feat: order details page (#1550)

* feat: order details page * feat: add status component * feat: adjust current order pagination * feat: added changesets * feat: add currentPage test
shopware · Jan 2, 2025 · 63d56b3 · 63d56b3
1 parent ed668d7
commit 63d56b3
Show file tree

Hide file tree

Showing 13 changed files with 561 additions and 19 deletions.
diff --git a/.changeset/tiny-swans-compete.md b/.changeset/tiny-swans-compete.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": minor
+---
+
+Removed order details from `AccountOrder` component and moved it to the new order details page `pages/account/order/details/[id].vue`
diff --git a/.changeset/unlucky-owls-bathe.md b/.changeset/unlucky-owls-bathe.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/composables-next": patch
+---
+
+useCustomerOrders - Set current page based on the orders endpoint response
diff --git a/packages/composables/src/useCustomerOrders/useCustomerOrders.test.ts b/packages/composables/src/useCustomerOrders/useCustomerOrders.test.ts
@@ -34,4 +34,14 @@ describe("useCustomerOrders", () => {
       }),
     );
   });
+
+  it("should set current page after loading orders", async () => {
+    const { vm, injections } = useSetup(useCustomerOrders);
+    injections.apiClient.invoke.mockResolvedValue({
+      data: { orders: { elements: [], page: 23 } },
+    });
+    await vm.loadOrders();
+
+    expect(vm.currentPage).toBe(23);
+  });
 });
diff --git a/packages/composables/src/useCustomerOrders/useCustomerOrders.ts b/packages/composables/src/useCustomerOrders/useCustomerOrders.ts
@@ -64,6 +64,7 @@ export function useCustomerOrders(): UseCustomerOrdersReturn {
     });
     orders.value = fetchedOrders.data.orders.elements;
     totalOrderItemsCount.value = fetchedOrders.data.orders.total ?? 0;
+    currentPaginationPage.value = fetchedOrders.data.orders.page ?? 1;
   };
 
   const changeCurrentPage = async (pageNumber: number) => {

diff --git a/templates/vue-demo-store/components/account/AccountOrder.vue b/templates/vue-demo-store/components/account/AccountOrder.vue
@@ -9,11 +9,7 @@ const props = defineProps<{
   order: Schemas["Order"];
 }>();
 
-const isExpand = ref(false);
 const { t } = useI18n();
-const toggleView = () => {
-  isExpand.value = !isExpand.value;
-};
 const { currency } = useSessionContext();
 
 const orderDate = computed(() =>
@@ -33,23 +29,26 @@ const orderDate = computed(() =>
         {{ order.amountTotal }} {{ currency?.symbol }}
       </div>
       <div class="text-secondary-600">{{ orderDate }}</div>
-      <div class="text-secondary-600">{{ order.stateMachineState.name }}</div>
-      <div
-        class="hidden sm:block justify-self-end text-dark cursor-pointer"
-        @click="toggleView"
-      >
-        {{ !isExpand ? t("account.view") : t("account.hide") }}
+      <div class="text-secondary-600">
+        <AccountOrderStatus
+          v-if="order.stateMachineState"
+          :state="order.stateMachineState"
+        />
+      </div>
+      <div class="hidden sm:block justify-self-end text-dark cursor-pointer">
+        <NuxtLink :to="`/account/order/details/${order.id}`">
+          {{ t("account.view") }}
+        </NuxtLink>
       </div>
     </AccountOrderSummary>
     <div>
       <div
         class="block sm:hidden text-center text-dark cursor-pointer bg-secondary py-2"
-        :aria-expanded="isExpand"
-        @click="toggleView"
       >
-        {{ !isExpand ? t("account.view") : t("account.hide") }}
+        <NuxtLink :to="`/account/order/details/${order.id}`">
+          {{ t("account.view") }}
+        </NuxtLink>
       </div>
     </div>
-    <AccountOrderDetails v-if="isExpand" :order-id="order.id" />
   </div>
 </template>
diff --git a/templates/vue-demo-store/components/account/AccountOrderDetails.vue b/templates/vue-demo-store/components/account/AccountOrderDetails.vue
@@ -13,7 +13,6 @@ const { getErrorsCodes } = useCartNotification();
 const { pushSuccess, pushError } = useNotifications();
 const { t } = useI18n();
 const {
-  loadOrderDetails,
   order,
   hasDocuments,
   documents,
@@ -25,9 +24,6 @@ const {
 } = await useOrderDetails(props.orderId);
 const { addProducts, count } = useCart();
 const addingProducts = ref(false);
-onMounted(() => {
-  loadOrderDetails();
-});
 
 const lineItems = computed<Array<Schemas["OrderLineItem"]>>(
   () => order.value?.lineItems || [],

diff --git a/templates/vue-demo-store/components/account/order/Status.vue b/templates/vue-demo-store/components/account/order/Status.vue
@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import type { Schemas } from "#shopware";
+
+const props = defineProps<{
+  state: Schemas["StateMachineState"];
+}>();
+
+const statusClass = computed(() => {
+  switch (props.state.technicalName) {
+    case "completed":
+      return "bg-green-100 text-green-800";
+    case "open":
+    case "in_progress":
+      return "bg-yellow-100 text-yellow-800";
+    case "cancelled":
+      return "bg-red-100 text-red-800";
+    default:
+      return "bg-gray-100 text-gray-800";
+  }
+});
+</script>
+<template>
+  <span
+    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full"
+    :class="statusClass"
+    >{{ state.name }}</span
+  >
+</template>
diff --git a/templates/vue-demo-store/i18n/de-DE/account.json b/templates/vue-demo-store/i18n/de-DE/account.json
@@ -48,6 +48,30 @@
       "order": "Bestellung",
       "orders": "Bestellungen"
     },
+    "orderDetails": {
+      "order": "Bestellung",
+      "placedOn": "Bestellt am {d}",
+      "shippingAddress": "Lieferadresse",
+      "billingAddress": "Rechnungsadresse",
+      "orderSummary": "Bestellübersicht",
+      "paymentMethod": "Zahlungsmethode",
+      "shippingMethod": "Versandart",
+      "subtotal": "Zwischensumme",
+      "shipping": "Versand",
+      "total": "Gesamt",
+      "takesUpTo": "Dauert bis zu",
+      "change": "Ändern",
+      "changePaymentMethod": "Zahlungsmethode ändern",
+      "cancel": "Stornieren",
+      "confirm": "Bestätigen",
+      "backToOrdersList": "Zurück zur Bestellliste",
+      "itemsHeader": {
+        "item": "Artikel",
+        "quantity": "Menge",
+        "price": "Preis",
+        "total": "Gesamt"
+      }
+    },
     "personalData": {
       "infoBox": "Bearbeiten Sie Ihre Daten unten, damit Ihr Konto immer auf dem neuesten Stand ist.",
       "label": "Persönliche Daten"

diff --git a/templates/vue-demo-store/i18n/en-GB/account.json b/templates/vue-demo-store/i18n/en-GB/account.json
@@ -50,6 +50,30 @@
       "order": "Order",
       "orders": "Orders"
     },
+    "orderDetails": {
+      "order": "Order",
+      "placedOn": "Placed on {d}",
+      "shippingAddress": "Shipping address",
+      "billingAddress": "Billing address",
+      "orderSummary": "Order Summary",
+      "paymentMethod": "Payment method",
+      "shippingMethod": "Shipping method",
+      "subtotal": "Subtotal",
+      "shipping": "Shipping",
+      "total": "Total",
+      "takesUpTo": "Takes up to",
+      "change": "Change",
+      "changePaymentMethod": "Change payment method",
+      "cancel": "Cancel",
+      "confirm": "Confirm",
+      "backToOrdersList": "Back to orders list",
+      "itemsHeader": {
+        "item": "Item",
+        "quantity": "Quantity",
+        "price": "Price",
+        "total": "Total"
+      }
+    },
     "personalData": {
       "infoBox": "Feel free to edit any of your details below so your account is always up to date",
       "label": "Personal data"

diff --git a/templates/vue-demo-store/i18n/pl-PL/account.json b/templates/vue-demo-store/i18n/pl-PL/account.json
@@ -48,6 +48,30 @@
       "order": "zamówienie",
       "orders": "Zamówienia"
     },
+    "orderDetails": {
+      "order": "Zamówienie",
+      "placedOn": "Złożone dnia {d}",
+      "shippingAddress": "Adres wysyłki",
+      "billingAddress": "Adres rozliczeniowy",
+      "orderSummary": "Podsumowanie zamówienia",
+      "paymentMethod": "Metoda płatności",
+      "shippingMethod": "Metoda wysyłki",
+      "subtotal": "Suma częściowa",
+      "shipping": "Wysyłka",
+      "total": "Całkowita kwota",
+      "takesUpTo": "Zajmuje do",
+      "change": "Zmień",
+      "changePaymentMethod": "Zmień metodę płatności",
+      "cancel": "Anuluj",
+      "confirm": "Potwierdź",
+      "backToOrdersList": "Powrót do listy zamówień",
+      "itemsHeader": {
+        "item": "Przedmiot",
+        "quantity": "Ilość",
+        "price": "Cena",
+        "total": "Całkowita kwota"
+      }
+    },
     "personalData": {
       "infoBox": "Edytuj swoje dane poniżej, aby twoje konto zawsze było aktualne",
       "label": "Dane osobowe"