feat: shipping methods position and delivery time (#212)

.changeset/cold-papayas-listen.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": minor
+---
+
+Sort shipping methods on the getShippingMethods function

.changeset/modern-planets-kick.md

@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/types": patch
+---
+
+Add translated property to the DeliveryTime type. Fix updateAt type

.changeset/short-eggs-suffer.md

@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Display delivery time on the checkout page

apps/docs/src/getting-started/e-commerce/checkout.md

@@ -64,6 +64,14 @@ const selectedShippingMethod = computed({
 </template>
 ```
 
+The shipping method position on the list is determined by the `position` field settled on the admin panel. Sorting logic in `useCheckout.ts::getShippingMethods()`
+
+You can also display:
+
+- Shipping delivery time
+- Shipping icon
+- Shipping description
+
 **Get payment methods**
 
 ```ts

packages/composables/src/useCheckout.ts

@@ -115,7 +115,11 @@ export function useCheckout(): UseCheckoutReturn {
     const response = await getAvailableShippingMethods(apiInstance, {
       ...mergedAssociations,
     });
-    storeShippingMethods.value = response?.elements || [];
+    storeShippingMethods.value =
+      response?.elements.sort(
+        (a: ShippingMethod, b: ShippingMethod) =>
+          (a.position ?? 0) - (b.position ?? 0)
+      ) || [];
     return shippingMethods;
   }
 

packages/helpers/src/checkout/getShippingMethodDeliveryTime.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { getShippingMethodDeliveryTime } from "./getShippingMethodDeliveryTime";
+import mockedShippingMethods from "./mocks/shippingMethods";
+
+describe("getShippingMethodDeliveryTime", () => {
+  it("should return shipping delivery time", () => {
+    const deliveryTimeMocked =
+      mockedShippingMethods[0].deliveryTime?.translated.name;
+    const deliveryTime = getShippingMethodDeliveryTime(
+      mockedShippingMethods[0]
+    );
+    expect(deliveryTime).toBe(deliveryTimeMocked);
+  });
+});

packages/helpers/src/checkout/getShippingMethodDeliveryTime.ts

@@ -0,0 +1,10 @@
+import { ShippingMethod } from "@shopware-pwa/types";
+
+/**
+ *  Get shipping delivery time
+ *
+ * @param {ShippingMethod} shippingMethod
+ */
+export function getShippingMethodDeliveryTime(shippingMethod: ShippingMethod) {
+  return shippingMethod.deliveryTime?.translated?.name;
+}

packages/helpers/src/checkout/index.ts

@@ -0,0 +1 @@
+export * from "./getShippingMethodDeliveryTime";

packages/helpers/src/checkout/mocks/shippingMethods.ts

@@ -0,0 +1,215 @@
+import { ShippingMethod } from "@shopware-pwa/types";
+const shippingMethods: ShippingMethod[] = [
+  {
+    translated: {
+      name: "Standard",
+      customFields: { sendcloud_service_point_enabled: "0" },
+      description: null,
+      trackingUrl: null,
+    },
+    createdAt: "2020-08-06T06:23:32.016+00:00",
+    updatedAt: "2023-05-16T15:31:50.158+00:00",
+    name: "Standard",
+    active: true,
+    position: 0,
+    description: null,
+    trackingUrl: null,
+    deliveryTimeId: "aca1d61eafd74b2095035bb4f9a373dc",
+    deliveryTime: {
+      translated: { name: "Instant download", customFields: {} },
+      createdAt: "2023-02-06T14:41:50.564+00:00",
+      updatedAt: null,
+      name: "Instant download",
+      min: 0,
+      max: 0,
+      unit: "hour",
+      id: "aca1d61eafd74b2095035bb4f9a373dc",
+      customFields: null,
+      apiAlias: "delivery_time",
+    },
+    translations: null,
+    availabilityRule: null,
+    prices: [
+      {
+        translated: [],
+        createdAt: "2020-08-06T06:23:32.029+00:00",
+        updatedAt: null,
+        shippingMethodId: "a9d9cc502b3547f4a89eb2830c032c78",
+        ruleId: null,
+        calculation: 1,
+        quantityStart: 0,
+        quantityEnd: null,
+        calculationRuleId: null,
+        currencyPrice: [
+          {
+            currencyId: "b7d2554b0ce847cd82f3ac9bd1c0dfca",
+            net: 0,
+            gross: 0,
+            linked: false,
+            listPrice: null,
+            percentage: null,
+            regulationPrice: null,
+            apiAlias: "price",
+          },
+        ],
+        id: "09163f081c0246e2b3348bedce814c75",
+        customFields: null,
+        apiAlias: "shipping_method_price",
+      },
+      {
+        translated: [],
+        createdAt: "2020-08-06T06:26:54.179+00:00",
+        updatedAt: null,
+        shippingMethodId: "a9d9cc502b3547f4a89eb2830c032c78",
+        ruleId: null,
+        calculation: 1,
+        quantityStart: 0,
+        quantityEnd: null,
+        calculationRuleId: null,
+        currencyPrice: [
+          {
+            currencyId: "b7d2554b0ce847cd82f3ac9bd1c0dfca",
+            net: 0,
+            gross: 0,
+            linked: false,
+            listPrice: null,
+            percentage: null,
+            regulationPrice: null,
+            apiAlias: "price",
+          },
+        ],
+        id: "0b4ce04df7f847be809e2835541ea63f",
+        customFields: null,
+        apiAlias: "shipping_method_price",
+      },
+    ],
+    mediaId: null,
+    media: null,
+    tags: null,
+    taxType: "auto",
+    tax: null,
+    id: "a9d9cc502b3547f4a89eb2830c032c78",
+    customFields: { sendcloud_service_point_enabled: "0" },
+    apiAlias: "shipping_method",
+  },
+  {
+    translated: {
+      name: "Express",
+      customFields: {},
+      description: "Example description",
+      trackingUrl: null,
+    },
+    createdAt: "2020-08-06T06:26:54.184+00:00",
+    updatedAt: "2023-05-01T06:45:56.010+00:00",
+    name: "Express",
+    active: true,
+    position: 1,
+    description: "Example description",
+    trackingUrl: null,
+    deliveryTimeId: "0caaf7f6131142f6b1fa81f3e3f6c0fb",
+    deliveryTime: {
+      translated: { name: "1-3 days", customFields: {} },
+      createdAt: "2020-08-06T06:26:54.178+00:00",
+      updatedAt: "2020-08-06T06:26:54.182+00:00",
+      name: "1-3 days",
+      min: 1,
+      max: 3,
+      unit: "day",
+      id: "0caaf7f6131142f6b1fa81f3e3f6c0fb",
+      customFields: null,
+      apiAlias: "delivery_time",
+    },
+    translations: null,
+    availabilityRule: null,
+    prices: [
+      {
+        translated: [],
+        createdAt: "2020-08-06T06:26:54.184+00:00",
+        updatedAt: "2023-04-28T15:25:35.319+00:00",
+        shippingMethodId: "79ef7bea9b7d49fb9d32b235fb18aa18",
+        ruleId: "438d0573b5184c6b97af290dbf9f53a2",
+        calculation: 1,
+        quantityStart: 1,
+        quantityEnd: 1,
+        calculationRuleId: null,
+        currencyPrice: [
+          {
+            currencyId: "b7d2554b0ce847cd82f3ac9bd1c0dfca",
+            net: 1.1,
+            gross: 1,
+            linked: false,
+            listPrice: null,
+            percentage: null,
+            regulationPrice: null,
+            apiAlias: "price",
+          },
+        ],
+        id: "20edde6c66ad448ea72647f6e739654a",
+        customFields: null,
+        apiAlias: "shipping_method_price",
+      },
+      {
+        translated: [],
+        createdAt: "2023-04-28T07:53:02.297+00:00",
+        updatedAt: "2023-04-28T15:25:35.319+00:00",
+        shippingMethodId: "79ef7bea9b7d49fb9d32b235fb18aa18",
+        ruleId: "438d0573b5184c6b97af290dbf9f53a2",
+        calculation: 1,
+        quantityStart: 2,
+        quantityEnd: 2,
+        calculationRuleId: null,
+        currencyPrice: [
+          {
+            currencyId: "b7d2554b0ce847cd82f3ac9bd1c0dfca",
+            net: 2.2,
+            gross: 2,
+            linked: false,
+            listPrice: null,
+            percentage: null,
+            regulationPrice: null,
+            apiAlias: "price",
+          },
+        ],
+        id: "21d63d5b00634d8cb25c34c0909cc37c",
+        customFields: null,
+        apiAlias: "shipping_method_price",
+      },
+      {
+        translated: [],
+        createdAt: "2023-04-28T15:25:35.320+00:00",
+        updatedAt: null,
+        shippingMethodId: "79ef7bea9b7d49fb9d32b235fb18aa18",
+        ruleId: "438d0573b5184c6b97af290dbf9f53a2",
+        calculation: 1,
+        quantityStart: 3,
+        quantityEnd: null,
+        calculationRuleId: null,
+        currencyPrice: [
+          {
+            currencyId: "b7d2554b0ce847cd82f3ac9bd1c0dfca",
+            net: 2.2,
+            gross: 2,
+            linked: false,
+            listPrice: null,
+            percentage: null,
+            regulationPrice: null,
+            apiAlias: "price",
+          },
+        ],
+        id: "f8916a8043ce42efa51d7519f943627f",
+        customFields: null,
+        apiAlias: "shipping_method_price",
+      },
+    ],
+    mediaId: null,
+    media: null,
+    tags: null,
+    taxType: "auto",
+    tax: null,
+    id: "79ef7bea9b7d49fb9d32b235fb18aa18",
+    customFields: null,
+    apiAlias: "shipping_method",
+  },
+];
+
+export default shippingMethods;

packages/helpers/src/index.ts

@@ -10,3 +10,4 @@ export * from "./price";
 export * from "./media/image";
 export * from "./media/getMedia";
 export * from "./media/downloadFile";
+export * from "./checkout";

packages/types/shopware-6-client/models/checkout/customer/Customer.d.ts

@@ -37,7 +37,7 @@ export type Customer = {
   lastOrderDate: Date;
   orderCount: number;
   createdAt: Date;
-  updatedAt: Date;
+  updatedAt: Date | string | null;
   group: CustomerGroup;
   defaultPaymentMethod: PaymentMethod;
   defaultBillingAddress: BillingAddress;

packages/types/shopware-6-client/models/checkout/delivery/Delivery.d.ts

@@ -32,7 +32,7 @@ export type Delivery = {
   stateMachineState: StateMachineState;
   trackingCodes: unknown[];
   translated: unknown[];
-  updatedAt: string | null;
+  updatedAt: Date | string | null;
   versionId: string;
   _uniqueIdentifier: string;
 };

packages/types/shopware-6-client/models/checkout/delivery/DeliveryTime.d.ts

@@ -6,11 +6,24 @@ import { CustomFields } from "../../common/CustomField";
  * @public
  */
 export type DeliveryTime = {
+  id: string;
   name: string | null;
   min: number;
   max: number;
   unit: string;
-  shippingMethods: ShippingMethod[] | null;
-  translations: Entity[];
+  shippingMethods?: ShippingMethod[] | null;
+  translations?: Entity[];
+  translated: TranslatedDeliveryTime;
+  customFields: CustomFields | null;
+  createdAt: Date | string;
+  updatedAt: Date | string | null;
+  apiAlias: string;
+};
+
+/**
+ * @public
+ */
+export type TranslatedDeliveryTime = {
   customFields: CustomFields;
+  name: string;
 };

packages/types/shopware-6-client/models/checkout/order/Order.d.ts

@@ -59,7 +59,7 @@ interface OrderCustomer {
   versionId: string;
   translated: [];
   createdAt: Date;
-  updatedAt: null;
+  updatedAt: Date | string | null;
   extensions: unknown;
   id: string;
   orderVersionId: string;
@@ -101,7 +101,7 @@ export type Order = {
   versionId: string;
   translated: any[];
   createdAt: Date;
-  updatedAt: Date | null;
+  updatedAt: Date | string | null;
   extensions: unknown;
   id: string;
   billingAddressVersionId: string;

packages/types/shopware-6-client/models/checkout/order/OrderDocument.d.ts

@@ -9,5 +9,5 @@ export type OrderDocument = {
   orderId: string;
   fileType: string;
   createdAt: Date;
-  updatedAt: Date;
+  updatedAt: Date | string | null;
 };

packages/types/shopware-6-client/models/checkout/order/OrderDownloads.d.ts

@@ -8,7 +8,7 @@ export type Downloads = {
   versionId: string;
   translated: { [key: string]: string };
   createdAt: Date;
-  updatedAt: Date;
+  updatedAt: Date | string | null;
   orderLineItemId: string;
   orderLineItemVersionId: string;
   mediaId: string;

packages/types/shopware-6-client/models/checkout/order/OrderState.d.ts

@@ -7,7 +7,7 @@ export type OrderState = {
   versionId: string | null;
   translated: unknown;
   createdAt: Date;
-  updatedAt: Date | null;
+  updatedAt: Date | string | null;
   extensions: unknown;
   customFields: CustomFields;
   apiAlias: string;

packages/types/shopware-6-client/models/checkout/payment/PaymentMethod.d.ts

@@ -31,7 +31,7 @@ export type PaymentMethod = {
   customFields: CustomFields;
   formattedHandlerIDentifier: string;
   createdAt: string;
-  updatedAt: string | null;
+  updatedAt: Date | string | null;
   distinguishableName: string;
   afterOrderEnabled: boolean;
   shortName: string;