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,
  };
 };