fix(composables): shipping and payment method (#1564)

.changeset/angry-timers-hear.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+Return the last element for the payment and shipping methods in `useOrderDetails`. The reason for this change is that the backend returns collections sorted by the entry date

packages/composables/src/useOrderDetails/useOrderDetails.test.ts

@@ -131,4 +131,94 @@ describe("useOrderDetails", () => {
     await vm.loadOrderDetails();
     expect(vm.paymentChangeable).toEqual(true);
   });
+
+  it("should return current payment method", async () => {
+    const { vm, injections } = useSetup(() => useOrderDetails("123-test"));
+    injections.apiClient.invoke.mockResolvedValue({
+      data: {
+        orders: {
+          elements: [
+            {
+              transactions: [
+                {
+                  paymentMethod: {
+                    shortName: "invoice_payment",
+                  },
+                },
+                {
+                  paymentMethod: {
+                    shortName: "cash_payment",
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      },
+    });
+    await vm.loadOrderDetails();
+    expect(vm.paymentMethod?.shortName).toEqual("cash_payment");
+  });
+
+  it("should return current delivery method", async () => {
+    const { vm, injections } = useSetup(() => useOrderDetails("123-test"));
+    injections.apiClient.invoke.mockResolvedValue({
+      data: {
+        orders: {
+          elements: [
+            {
+              deliveries: [
+                {
+                  shippingMethod: {
+                    name: "test",
+                  },
+                },
+                {
+                  shippingMethod: {
+                    name: "Standard",
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      },
+    });
+    await vm.loadOrderDetails();
+    expect(vm.shippingMethod?.name).toEqual("Standard");
+  });
+
+  it("should return undefined if payment method does not exists", async () => {
+    const { vm, injections } = useSetup(() => useOrderDetails("123-test"));
+    injections.apiClient.invoke.mockResolvedValue({
+      data: {
+        orders: {
+          elements: [
+            {
+              transactions: [],
+            },
+          ],
+        },
+      },
+    });
+    await vm.loadOrderDetails();
+    expect(vm.paymentMethod?.shortName).toEqual(undefined);
+  });
+
+  it("should return undefined if shipping method does not exists", async () => {
+    const { vm, injections } = useSetup(() => useOrderDetails("123-test"));
+    injections.apiClient.invoke.mockResolvedValue({
+      data: {
+        orders: {
+          elements: [
+            {
+              deliveries: [],
+            },
+          ],
+        },
+      },
+    });
+    await vm.loadOrderDetails();
+    expect(vm.shippingMethod?.name).toEqual(undefined);
+  });
 });

packages/composables/src/useOrderDetails/useOrderDetails.ts

@@ -50,11 +50,11 @@ export type UseOrderDetailsReturn = {
    */
   paymentUrl: Ref<null | string>;
   /**
-   * Selected shipping method
+   * Returns current selected shipping method for the order. Last element in delivery array.
    */
   shippingMethod: ComputedRef<Schemas["ShippingMethod"] | undefined | null>;
   /**
-   * Selected payment method
+   * Returns current selected payment method for the order. Last element in transactions array.
    */
   paymentMethod: ComputedRef<Schemas["PaymentMethod"] | undefined | null>;
   /**
@@ -139,12 +139,21 @@ export function useOrderDetails(
 
   const orderAssociations = useDefaultOrderAssociations();
 
-  const paymentMethod = computed(
-    () => _sharedOrder.value?.transactions?.[0]?.paymentMethod,
+  const paymentMethod = computed(() =>
+    _sharedOrder.value?.transactions?.length
+      ? _sharedOrder.value.transactions[
+          _sharedOrder.value.transactions.length - 1
+        ].paymentMethod
+      : undefined,
   );
-  const shippingMethod = computed(
-    () => _sharedOrder.value?.deliveries?.[0]?.shippingMethod,
+
+  const shippingMethod = computed(() =>
+    _sharedOrder.value?.deliveries?.length
+      ? _sharedOrder.value.deliveries[_sharedOrder.value.deliveries.length - 1]
+          .shippingMethod
+      : undefined,
   );
+
   const paymentUrl = ref();
 
   const personalDetails = computed(() => ({