Merge pull request #5419 from vuestorefront/checkout-shipping

Checkout shipping

packages/commercetools/composables/__tests__/useShipping/useShipping.spec.ts

@@ -0,0 +1,106 @@
+import useShipping from '../../src/useShipping';
+import useCart from '../../src/useCart';
+
+jest.mock('@vue-storefront/commercetools-api', () => ({
+  cartActions: {
+    setShippingMethodAction: () => {},
+    setShippingAddressAction: () => {}
+  }
+}));
+
+jest.mock('../../src/useCart', () => jest.fn(() => {}));
+
+jest.mock('@vue-storefront/core', () => ({
+  useShippingFactory: (params) => () => params
+}));
+
+describe('[commercetools-composables] useShipping', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('provides cart', async () => {
+    const { provide } = useShipping() as any;
+    const mockedCart = '12312312';
+    (useCart as jest.Mock).mockImplementation(() => mockedCart);
+
+    const toProvide = provide();
+
+    expect(toProvide).toMatchObject({ cart: mockedCart });
+    expect(useCart).toHaveBeenCalled();
+  });
+
+  it('loads shipping address via request if cart is not present', async () => {
+    const { load } = useShipping() as any;
+    const loadedShippingAddress = 'loadedShippingAddress';
+    const context = {
+      cart: {
+        cart: {
+          value: {
+            shippingAddress: null
+          }
+        },
+        load: jest.fn(() => {
+          context.cart.cart.value.shippingAddress = loadedShippingAddress;
+        })
+      }
+    };
+
+    const response = await load(context, {});
+
+    expect(response).toBe(loadedShippingAddress);
+    expect(context.cart.load).toHaveBeenCalled();
+  });
+
+  it('loads shipping address from cart if cart is present', async () => {
+    const { load } = useShipping() as any;
+    const loadedShippingAddress = 'loadedShippingAddress';
+    const context = {
+      cart: {
+        cart: {
+          value: {
+            shippingAddress: loadedShippingAddress
+          }
+        },
+        load: jest.fn()
+      }
+    };
+
+    const response = await load(context, {});
+
+    expect(response).toBe(loadedShippingAddress);
+    expect(context.cart.load).not.toHaveBeenCalled();
+  });
+
+  it('saves shipping details, updates cart and returns shipping details', async () => {
+    const { save } = useShipping() as any;
+    const newShippingAddress = 'newShippingAddress';
+    const context = {
+      cart: {
+        cart: {
+          value: {
+            shippingAddress: null
+          }
+        },
+        setCart: jest.fn(address => {
+          context.cart.cart.value.shippingAddress = address;
+        })
+      },
+      $ct: {
+        api: {
+          updateCart: jest.fn(() => ({
+            data: {
+              cart: newShippingAddress
+            }
+          }))
+        }
+      }
+    };
+
+    const response = await save(context, { shippingDetails: newShippingAddress });
+
+    expect(response).toBe(newShippingAddress);
+    expect(context.cart.setCart).toHaveBeenCalledWith(newShippingAddress);
+  });
+});
+

packages/commercetools/composables/jest.config.js

@@ -12,7 +12,7 @@ module.exports = {
 
     // Ignore mocked composables
     'Billing',
-    'Shipping',
+    'UserShipping',
 
     // TODO: https://github.com/DivanteLtd/vue-storefront/issues/5136
     '<rootDir>/src/getters/cartGetters.ts',

packages/commercetools/composables/src/getters/index.ts

@@ -1,7 +1,6 @@
 /* istanbul ignore file */
 import cartGetters from './cartGetters';
 import categoryGetters from './categoryGetters';
-import checkoutGetters from './checkoutGetters';
 import productGetters from './productGetters';
 import reviewGetters from './reviewGetters';
 import userGetters from './userGetters';
@@ -14,7 +13,6 @@ import facetGetters from './facetGetters';
 export {
   cartGetters,
   categoryGetters,
-  checkoutGetters,
   productGetters,
   reviewGetters,
   userGetters,

packages/commercetools/composables/src/index.ts

@@ -11,6 +11,7 @@ import useFacet from './useFacet';
 import useUserShipping from './useUserShipping';
 import useUserBilling from './useUserBilling';
 import useWishlist from './useWishlist';
+import useShipping from './useShipping';
 import { track } from '@vue-storefront/core';
 
 track('VSFCommercetools');
@@ -26,7 +27,8 @@ export {
   useWishlist,
   useUserShipping,
   useReview,
-  useFacet
+  useFacet,
+  useShipping
 };
 
 export * from './getters';

packages/commercetools/composables/src/types/GraphQL.ts

@@ -241,6 +241,8 @@ export type Address = {
   apartment?: Maybe<Scalars["String"]>;
   pOBox?: Maybe<Scalars["String"]>;
   contactInfo: AddressContactInfo;
+  phone?: Maybe<Scalars["String"]>;
+  email?: Maybe<Scalars["String"]>;
   additionalAddressInfo?: Maybe<Scalars["String"]>;
   externalId?: Maybe<Scalars["String"]>;
   key?: Maybe<Scalars["String"]>;

packages/commercetools/composables/src/useShipping/index.ts

@@ -0,0 +1,33 @@
+import { useShippingFactory, UseShippingParams, Context } from '@vue-storefront/core';
+import useCart from '../useCart';
+import { cartActions } from '@vue-storefront/commercetools-api';
+import { Address } from './../types/GraphQL';
+
+const params: UseShippingParams<Address, {}> = {
+  provide() {
+    return {
+      cart: useCart()
+    };
+  },
+  load: async (context: Context, { customQuery }) => {
+    if (!context.cart.cart?.value?.shippingAddress) {
+      await context.cart.load({ customQuery });
+    }
+    return context.cart.cart.value.shippingAddress;
+  },
+  save: async (context: Context, { shippingDetails, customQuery }) => {
+    const cartResponse = await context.$ct.api.updateCart({
+      id: context.cart.cart.value.id,
+      version: context.cart.cart.value.version,
+      actions: [
+        cartActions.setShippingMethodAction(),
+        cartActions.setShippingAddressAction(shippingDetails)
+      ]
+    }, customQuery);
+
+    context.cart.setCart(cartResponse.data.cart);
+    return context.cart.cart.value.shippingAddress;
+  }
+};
+
+export default useShippingFactory<Address, {}>(params);

packages/commercetools/composables/src/useUserShipping/index.ts

@@ -2,35 +2,35 @@ import { useUserShippingFactory, UseUserShippingFactoryParams, Context } from '@
 
 const addresses: any[] = [
   {
-    id: 1,
+    id: '_1231231253623423',
     firstName: 'John',
     lastName: 'Doe',
     streetName: 'Warsawska',
-    streetNumber: '24',
+    streetNumber: '193A',
     apartment: '193A',
     city: 'Phoenix',
     state: null,
     postalCode: '26-620',
     country: 'US',
     phone: '560123456',
     email: '',
-    company: '',
+    company: null,
     isDefault: true
   },
   {
-    id: 2,
+    id: '_245463456456356',
     firstName: 'Jonatan',
     lastName: 'Doe',
     streetName: 'Starachowicka',
-    streetNumber: '20',
+    streetNumber: '193A',
     apartment: '193A',
     city: 'Atlanta',
     state: null,
     postalCode: '53-603',
     country: 'US',
     phone: '560123456',
     email: '',
-    company: '',
+    company: null,
     isDefault: true
   }
 ];