feat: #49(composable) add useShipping & useBilling

packages/api-client/src/types/API.ts

@@ -18,7 +18,7 @@ export type RemoveFromCartResponse = MutationResponse<'removeOrderLine', RemoveO
 export type UpdateCartQuantityResponse = MutationResponse<'adjustOrderLine', UpdateOrderItemsResult>;
 export type ApplyCouponCodeResponse = MutationResponse<'applyCouponCode', ApplyCouponCodeResult>;
 export type RemoveCouponCodeResponse = MutationResponse<'removeCouponCode', Order>;
-export type UpdateAddressDetailsResponse = MutationResponse<'setOrderShippingAddress' | 'setOrderBilliingAddress', ActiveOrderResult>;
+export type UpdateAddressDetailsResponse = MutationResponse<'setOrderShippingAddress' | 'setOrderBillingAddress', ActiveOrderResult>;
 
 export interface VendureApiMethods {
   getProduct(params: ProductParams, customQuery?: CustomQuery): Promise<GetProductResponse>;

packages/composables/src/composables/useBilling/index.ts

@@ -3,23 +3,34 @@ import {
   useBillingFactory,
   UseBillingParams
 } from '@vue-storefront/core';
-import type { BillingAddress } from '@vue-storefront/vendure-api';
+import type { CreateAddressInput, Order, OrderAddress } from '@vue-storefront/vendure-api';
+import { BILLING_TYPE } from '../../helpers';
 import type {
   UseBillingAddParams as AddParams
 } from '../../types';
+import { useCart } from '../useCart';
 
-const params: UseBillingParams<BillingAddress, AddParams> = {
+const params: UseBillingParams<OrderAddress, AddParams> = {
+  provide() {
+    return {
+      cart: useCart()
+    };
+  },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   load: async (context: Context, { customQuery }) => {
-    console.log('Mocked: useBilling.load');
-    return {};
+    if (!context.cart.cart?.value?.billingAddress) {
+      await context.cart.load({ customQuery });
+    }
+    return context.cart.cart.value.billingAddress;
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   save: async (context: Context, { params, billingDetails, customQuery }) => {
-    console.log('Mocked: useBilling.save');
-    return {};
+    // OrderAddress has one property optional which is required in CreateAddressInput.
+    const response = await context.$vendure.api.updateAddressDetails({ input: billingDetails as CreateAddressInput, type: BILLING_TYPE }, customQuery);
+
+    return (response?.data?.setOrderBillingAddress as Order)?.billingAddress;
   }
 };
 
-export const useBilling = useBillingFactory<BillingAddress, AddParams>(params);
+export const useBilling = useBillingFactory<OrderAddress, AddParams>(params);

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

@@ -3,23 +3,32 @@ import {
   useShippingFactory,
   UseShippingParams
 } from '@vue-storefront/core';
-import type { ShippingAddress } from '@vue-storefront/vendure-api';
+import type { CreateAddressInput, Order, OrderAddress } from '@vue-storefront/vendure-api';
 import type {
   UseShippingAddParams as AddParams
 } from '../../types';
+import { useCart } from '../useCart';
 
-const params: UseShippingParams<ShippingAddress, AddParams> = {
+const params: UseShippingParams<OrderAddress, AddParams> = {
+  provide() {
+    return {
+      cart: useCart()
+    };
+  },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   load: async (context: Context, { customQuery }) => {
-    console.log('Mocked: useShipping.load');
-    return {};
+    if (!context.cart.cart?.value?.shippingAddress) {
+      await context.cart.load({ customQuery });
+    }
+    return context.cart.cart.value.shippingAddress;
   },
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   save: async (context: Context, { shippingDetails, customQuery }) => {
-    console.log('Mocked: useShipping.save');
-    return {};
+    const response = await context.$vendure.api.updateAddressDetails({ input: shippingDetails as CreateAddressInput }, customQuery);
+
+    return (response?.data?.setOrderShippingAddress as Order)?.shippingAddress;
   }
 };
 
-export const useShipping = useShippingFactory<ShippingAddress, AddParams>(params);
+export const useShipping = useShippingFactory<OrderAddress, AddParams>(params);

packages/composables/src/helpers/constants.ts

@@ -1,2 +1,3 @@
 export const ROOT_COLLECTION = '__root_collection__';
+export const BILLING_TYPE = 'billing';
 export const ITEMS_PER_PAGE = [20, 40, 100];