Merge pull request #51 from vuestorefront/feat-#49/shipping-billing

feat: #49/shipping billing

docs/.vuepress/config.js

@@ -46,6 +46,9 @@ module.exports = {
           ['/composables/use-category', 'useCategory'],
           ['/composables/use-facet', 'useFacet'],
           ['/composables/use-cart', 'useCart'],
+          ['/composables/use-billing', 'useBilling'],
+          ['/composables/use-shipping', 'useShipping'],
+          ['/composables/use-shipping-provider', 'useShippingProvider'],
         ]
       },
     ]

docs/composables/use-billing.md

@@ -0,0 +1,74 @@
+# `useBilling`
+
+## Features
+
+`useBilling` composable can be used for:
+
+* Loading billing address for the current cart.
+* Saving billing address for the current cart.
+
+## API
+
+* `load` - function for fetching billing address. When invoked, it requests data from the API and populates `billing` property. This method accepts a single optional `params` object. The `params` has the following option:
+
+  * `customQuery?: CustomQuery`
+
+```ts
+type CustomQuery = {
+  getBasicProfile: string
+}
+```
+
+* `save` - function for saving billing address. This method accepts a single `saveParams` object. The `saveParams` has the following options:
+
+  * `billingDetails: CreateAddressInput`
+
+<https://www.vendure.io/docs/graphql-api/admin/input-types/#createaddressinput>
+
+  * `customQuery?: CustomQuery`
+
+```ts
+type CustomQuery = {
+  updateCart: string
+}
+```
+
+* `billing: OrderAddress` - a main data object that contains a billing address.
+
+<https://www.vendure.io/docs/graphql-api/admin/object-types/#orderaddress>
+
+* `loading: boolean` - a reactive object containing information about loading state of your `load` or `save` method.
+
+* `error: UseBillingErrors` - a reactive object containing the error message, if `load` or `save` failed for any reason.
+
+```ts
+interface UseBillingErrors {
+  load?: Error;
+  save?: Error;
+}
+```
+
+## Getters
+
+We do not provide getters for checkout and its parts.
+
+## Example
+
+```js
+import { useBilling } from '@vue-storefront/vendure';
+import { onSSR } from '@vue-storefront/core'
+
+export default {
+  setup () {
+    const { load, billing } = useBilling();
+
+    onSSR(async () => {
+      await load();
+    });
+
+    return {
+      billing
+    };
+  }
+}
+```

docs/composables/use-shipping-provider.md

@@ -0,0 +1,81 @@
+# `useShippingProvider`
+
+## Features
+
+`useShippingProvider` composable can be used for:
+
+* Loading shipping methods for the current cart.
+
+## API
+
+* `load` - function for fetching shipping method. When invoked, it requests data from the API and populates the `response` key inside the `state` property. This method accepts a single optional `params` object. The `params` has the following option:
+
+  * `customQuery?: CustomQuery`
+
+```ts
+type CustomQuery = {
+  getBasicProfile: string
+}
+```
+
+* `save` - not used in this integration.
+
+::: warning
+This integration does not use the `save` method. Instead a direct call from the theme to the API Client is being made and the response is saved as a new Cart object to update prices, details, etc. It works as follows:
+
+```ts
+import { useCart, useShippingProvider } from '@vue-storefront/vendure';
+
+export default {
+  setup () {
+    const { setCart } = useCart();
+
+    const setShippingMethod = (shippingMethod) => {
+      const newOrder = await $vendure.api.setShippingMethod({ shippingMethodId: shippingMethod.id })
+      setCart(newOrder.data.setOrderShippingMethod);
+    }
+  }
+}
+```
+
+:::
+
+* `state: ShippingMethodQuote[]` - a main data object that contains shipping methods
+
+<https://www.vendure.io/docs/graphql-api/shop/object-types/#shippingmethodquote>
+
+* `loading: boolean` - a reactive object containing information about loading state of your `load` or `save` method.
+
+* `error: UseShippingProviderErrors` - a reactive object containing the error message, if `load` or `save` failed for any reason.
+
+```ts
+interface UseShippingProviderErrors {
+  load?: Error;
+  save?: Error;
+}
+```
+
+## Getters
+
+We do not provide getters for checkout and its parts.
+
+## Example
+
+```js
+import { useShippingProvider } from '@vue-storefront/vendure';
+import { onSSR } from '@vue-storefront/core';
+
+export default {
+  setup () {
+    const { load, state } = useShippingProvider();
+
+    onSSR(async () => {
+      await load();
+    });
+
+    return {
+      state
+    };
+  }
+}
+```

docs/composables/use-shipping.md

@@ -0,0 +1,74 @@
+# `useShipping`
+
+## Features
+
+`useShipping` composable can be used for:
+
+* Loading shipping address for the current cart.
+* Saving shipping address for the current cart.
+
+## API
+
+* `load` - function for fetching shipping address. When invoked, it requests data from the API and populates `shipping` property. This method accepts a single optional `params` object. The `params` has the following option:
+
+  * `customQuery?: CustomQuery`
+
+```ts
+type CustomQuery = {
+  getBasicProfile: string
+}
+```
+
+* `save` - function for saving shipping address. This method accepts a single `saveParams` object. The `saveParams` has the following options:
+
+  * `shippingDetails: CreateAddressInput`
+
+<https://www.vendure.io/docs/graphql-api/admin/input-types/#createaddressinput>
+
+* `customQuery?: CustomQuery`
+
+```ts
+type CustomQuery = {
+  updateCart: string
+}
+```
+
+* `shipping: OrderAddress` - a main data object that contains a shipping address.
+
+<https://www.vendure.io/docs/graphql-api/admin/object-types/#orderaddress>
+
+* `loading: boolean` - a reactive object containing information about loading state of your `load` or `save` method.
+
+* `error: UseShippingErrors` - a reactive object containing the error message, if `load` or `save` failed for any reason.
+
+```ts
+interface UseShippingErrors {
+  load?: Error;
+  save?: Error;
+}
+```
+
+## Getters
+
+We do not provide getters for checkout and its parts.
+
+## Example
+
+```js
+import { useShipping } from '@vue-storefront/vendure';
+import { onSSR } from '@vue-storefront/core';
+
+export default {
+  setup () {
+    const { load, shipping } = useShipping();
+
+    onSSR(async () => {
+      await load();
+    });
+
+    return {
+      shipping
+    };
+  }
+}
+```

packages/api-client/__tests__/api/addToCart.spec.ts

@@ -21,6 +21,8 @@ describe('[vendure-api-client] addToCart', () => {
 
     const { data } = await addToCart(context, { productVariantId: '1', quantity: 1});
 
-    expect(data).toBe('add to cart response');
+    const expectedAddToCart = 'add to cart response';
+
+    expect(data).toBe(expectedAddToCart);
   });
 });

packages/api-client/__tests__/api/applyCartCoupon.spec.ts

@@ -21,6 +21,8 @@ describe('[vendure-api-client] applyCartCoupon', () => {
 
     const { data } = await applyCartCoupon(context, { couponCode: '1'});
 
-    expect(data).toBe('apply cart coupon response');
+    const expectedApplyCoupon = 'apply cart coupon response';
+
+    expect(data).toBe(expectedApplyCoupon);
   });
 });

packages/api-client/__tests__/api/getCart.spec.ts

@@ -21,6 +21,8 @@ describe('[vendure-api-client] getCart', () => {
 
     const { data } = await getCart(context, {});
 
-    expect(data).toBe('get cart response');
+    const expectedGetCartResponse = 'get cart response';
+
+    expect(data).toBe(expectedGetCartResponse);
   });
 });

packages/api-client/__tests__/api/getCategory.spec.ts

@@ -23,6 +23,8 @@ describe('[vendure-api-client] getCategory', () => {
 
     const { data } = await getCategory(context, { options: {}});
 
-    expect(data).toBe('category response');
+    const expectedGetCategory = 'category response';
+
+    expect(data).toBe(expectedGetCategory);
   });
 });

packages/api-client/__tests__/api/getFacet.spec.ts

@@ -21,6 +21,8 @@ describe('[vendure-api-client] getFacet', () => {
 
     const { data } = await getFacet(context, {});
 
-    expect(data).toBe('facet response');
+    const expectedGetFacet = 'facet response';
+
+    expect(data).toBe(expectedGetFacet);
   });
 });

packages/api-client/__tests__/api/getMe.spec.ts

@@ -21,6 +21,8 @@ describe('[vendure-api-client] getMe', () => {
 
     const { data } = await getMe(context);
 
-    expect(data).toBe('get me response');
+    const expectedGetMe = 'get me response';
+
+    expect(data).toBe(expectedGetMe);
   });
 });

packages/api-client/__tests__/api/getProduct.spec.ts

@@ -24,6 +24,8 @@ describe('[vendure-api-client] getProduct', () => {
 
     const { data } = await getProduct(context, { id: '1', slug: 'laptop' });
 
-    expect(data).toBe('product response');
+    const expectedGetProduct = 'product response';
+
+    expect(data).toBe(expectedGetProduct);
   });
 });

packages/api-client/__tests__/api/getShippingMethods.spec.ts

@@ -0,0 +1,28 @@
+import getShippingMethods from '../../src/api/getShippingMethods';
+import eligibleShippingMethodsQuery from '../../src/api/getShippingMethods/eligibleShippingMethodsQuery';
+import { Context } from '../../src/types';
+
+describe('[vendure-api-client] getShippingMethods', () => {
+  it('returns shipping methods', async () => {
+    const givenVariables = {};
+
+    const context = {
+      config: {},
+      client: {
+        query: ({ variables, query }) => {
+          expect(variables).toEqual(givenVariables);
+          expect(query).toEqual(eligibleShippingMethodsQuery);
+
+          return { data: 'get shipping methods response' };
+        }
+      },
+      extendQuery: (customQuery, args) => args
+    } as unknown as Context;
+
+    const { data } = await getShippingMethods(context);
+
+    const expectedGetShippingMethods = 'get shipping methods response';
+
+    expect(data).toBe(expectedGetShippingMethods);
+  });
+});

packages/api-client/__tests__/api/removeCartCoupon.spec.ts

@@ -21,6 +21,8 @@ describe('[vendure-api-client] removeCartCoupon', () => {
 
     const { data } = await removeCartCoupon(context, { couponCode: '1'});
 
-    expect(data).toBe('remove cart coupon response');
+    const expectedRemoveCartCoupon = 'remove cart coupon response';
+
+    expect(data).toBe(expectedRemoveCartCoupon);
   });
 });

packages/api-client/__tests__/api/removeFromCart.spec.ts

@@ -21,6 +21,8 @@ describe('[vendure-api-client] removeFromCart', () => {
 
     const { data } = await removeFromCart(context, { orderLineId: '1'});
 
-    expect(data).toBe('remove from cart response');
+    const expectedRemoveFromCart = 'remove from cart response';
+
+    expect(data).toBe(expectedRemoveFromCart);
   });
 });

packages/api-client/__tests__/api/setShippingMethod.spec.ts

@@ -0,0 +1,28 @@
+import setShippingMethod from '../../src/api/setShippingMethod';
+import setOrderShippingMethodMutation from '../../src/api/setShippingMethod/setOrderShippingMethodMutation';
+import { Context } from '../../src/types';
+
+describe('[vendure-api-client] setShippingMethod', () => {
+  it('sets shipping method for certain order', async () => {
+    const givenVariables = { shippingMethodId: '1'};
+
+    const context = {
+      config: {},
+      client: {
+        mutate: ({ variables, mutation }) => {
+          expect(variables).toEqual(givenVariables);
+          expect(mutation).toEqual(setOrderShippingMethodMutation);
+
+          return { data: 'set shipping method response' };
+        }
+      },
+      extendQuery: (customQuery, args) => args
+    } as unknown as Context;
+
+    const { data } = await setShippingMethod(context, { shippingMethodId: '1' });
+
+    const expectedShippingMethod = 'set shipping method response';
+
+    expect(data).toBe(expectedShippingMethod);
+  });
+});