feat: guest order with steps (#600)

api/composables.api.md

@@ -102,6 +102,8 @@ export interface UseCheckout {
     guestOrderParams: Ref<Readonly<Partial<GuestOrderParams | null>>>;
     // (undocumented)
     isGuestOrder: Readonly<Ref<boolean>>;
+    // (undocumented)
+    updateGuestOrderParams: (params: Partial<GuestOrderParams>) => void;
 }
 
 // @alpha (undocumented)

packages/composables/__tests__/useCheckout.spec.ts

@@ -46,23 +46,10 @@ describe("Composables - useCheckout", () => {
     });
 
     describe("guestOrderParams", () => {
-      afterEach(() => {
-        // return to default state
-        const { guestOrderParams } = useCheckout();
-        guestOrderParams.value = {};
-      });
       it("should return an empty object when prams are not set", () => {
         const { guestOrderParams } = useCheckout();
         expect(guestOrderParams.value).toEqual({});
       });
-      it("should return guest order params if are set", () => {
-        const { guestOrderParams } = useCheckout();
-        expect(guestOrderParams.value).toEqual({});
-        guestOrderParams.value = {
-          firstName: "John",
-        };
-        expect(guestOrderParams.value).toEqual({ firstName: "John" });
-      });
     });
   });
 
@@ -270,10 +257,10 @@ describe("Composables - useCheckout", () => {
           mockedApiClient.createGuestOrder.mockResolvedValueOnce({
             id: "newOrderId",
           } as any);
-          const { createOrder, guestOrderParams } = useCheckout();
-          guestOrderParams.value = {
+          const { createOrder, updateGuestOrderParams } = useCheckout();
+          updateGuestOrderParams({
             firstName: "John",
-          };
+          });
           await createOrder();
           expect(mockedApiClient.createGuestOrder).toHaveBeenCalledWith({
             firstName: "John",

packages/composables/src/logic/useCheckout.ts

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import { Ref, computed } from "@vue/composition-api";
+import { Ref, computed, reactive } from "@vue/composition-api";
 import { useUser, useCart } from "@shopware-pwa/composables";
 import { ShippingMethod } from "@shopware-pwa/commons/interfaces/models/checkout/shipping/ShippingMethod";
 import { PaymentMethod } from "@shopware-pwa/commons/interfaces/models/checkout/payment/PaymentMethod";
@@ -25,6 +25,7 @@ export interface UseCheckout {
     forceReload: boolean;
   }) => Promise<Readonly<Ref<readonly PaymentMethod[]>>>;
   createOrder: () => Promise<Order>;
+  updateGuestOrderParams: (params: Partial<GuestOrderParams>) => void;
 }
 
 const orderData: {
@@ -49,6 +50,7 @@ export const useCheckout = (): UseCheckout => {
   const paymentMethods: Readonly<Ref<readonly PaymentMethod[]>> = computed(
     () => orderData.paymentMethods
   );
+  const localOrderData = reactive(orderData);
 
   const getShippingMethods = async (
     { forceReload } = { forceReload: false }
@@ -89,16 +91,17 @@ export const useCheckout = (): UseCheckout => {
   };
   const isGuestOrder = computed(() => !isLoggedIn.value);
 
-  const guestOrderParams = computed({
-    get: () => orderData.guestOrderParams,
-    set: (val) => (orderData.guestOrderParams = val),
-  });
+  const guestOrderParams = computed(() => localOrderData.guestOrderParams);
+  const updateGuestOrderParams = (params: Partial<GuestOrderParams>): void => {
+    orderData.guestOrderParams = { ...orderData.guestOrderParams, ...params };
+  };
 
   return {
     isGuestOrder,
     getPaymentMethods,
     getShippingMethods,
     createOrder,
     guestOrderParams,
+    updateGuestOrderParams,
   };
 };