Add download for orders

frontend/components/profile/purchases-and-orders/index/PurchasesTableRow.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+// imports
+
+import useDownloadInvoice from "~/composables/api/orders/useDownloadInvoice";
+
 // types
 
 type Props = {
@@ -11,12 +15,13 @@ const props = defineProps<Props>();
 
 const { data } = toRefs(props);
 
+// states
+
+const { downloadFn, downloadIsLoading } = useDownloadInvoice(String(data.value.id));
 </script>
 
 <template>
-    <tr
+    <tr class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200">
-        class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200"
-    >
         <td
             scope="row"
             class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
@@ -24,9 +29,7 @@ const { data } = toRefs(props);
         >
             {{ data.order_id ? `${data.order_id}#` : "--" }}
         </td>
-        <td
+        <td class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0">
-            class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
-        >
             {{ data.created_at ?? "--" }}
         </td>
         <td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
@@ -39,40 +42,35 @@ const { data } = toRefs(props);
             <div
                 class="w-max rounded-full py-1.5 px-3 text-xs border"
                 :class="{
-                    'text-warning-600 bg-warning-100 border-warning-600': [
+                    'text-warning-600 bg-warning-100 border-warning-600': ['ADMIN_PENDING', 'PENDING'].includes(
-                        'ADMIN_PENDING',
+                        data.status,
-                        'PENDING',
+                    ),
-                    ].includes(data.status),
+                    'text-success-600 bg-success-100 border-success-600': ['POSTED', 'RECEIVED'].includes(data.status),
-                    'text-success-600 bg-success-100 border-success-600': [
+                    'text-danger-600 bg-danger-100 border-danger-600': ['CANCELED', 'REFUND'].includes(data.status),
-                        'POSTED',
-                        'RECEIVED',
-                    ].includes(data.status),
-                    'text-danger-600 bg-danger-100 border-danger-600': [
-                        'CANCELED',
-                        'REFUND',
-                    ].includes(data.status),
                 }"
             >
                 {{ data.verbose_status ? data.verbose_status : "--" }}
             </div>
         </td>
         <td class="w-1/12 px-6 py-6 shrink-0">
-            <NuxtLink
+            <button
-                :to="{
+                @click="!downloadIsLoading ? downloadFn() : undefined"
-                    name: 'profile-purchases-and-orders-id',
+                :disabled="downloadIsLoading"
-                    params: { id: data.id },
+                class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
-                }"
             >
-                <button
+                <Icon
-                    class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
+                    v-if="downloadIsLoading"
-                >
+                    name="svg-spinners:3-dots-fade"
-                    <Icon
+                    class="**:stroke-black"
-                        name="ci:eye-open"
+                    size="20"
-                        class="**:stroke-black"
+                />
-                        size="20"
+                <Icon
-                    />
+                    v-else
-                </button>
+                    name="ci:download"
-            </NuxtLink>
+                    class="**:stroke-black"
+                    size="20"
+                />
+            </button>
         </td>
     </tr>
 </template>

frontend/composables/api/orders/useDownloadInvoice.ts

@@ -0,0 +1,59 @@
+// imports
+
+import { API_ENDPOINTS } from "~/constants";
+import { useQuery } from "@tanstack/vue-query";
+
+const useDownloadInvoice = (transactionId: string) => {
+    // state
+
+    const { $queryClient: queryClient, $axios: axios } = useNuxtApp();
+
+    const enabled = ref(false);
+
+    // methods
+
+    const download = () => {
+        if (!enabled.value) enabled.value = true;
+        queryClient.invalidateQueries({
+            queryKey: ["download-invoice", transactionId],
+        });
+    };
+
+    // query
+
+    const handleDownloadInvoice = async () => {
+        const { data } = await axios.get<Blob>(`${API_ENDPOINTS.orders.cart.download_invoice}/${transactionId}`, {
+            responseType: "blob",
+        });
+        return data;
+    };
+
+    const { data: file, isLoading } = useQuery({
+        queryKey: ["download-invoice", transactionId],
+        queryFn: () => handleDownloadInvoice(),
+        enabled,
+        refetchOnWindowFocus: false,
+    });
+
+    // watch
+
+    whenever(file, () => {
+        if (!!file.value) {
+            const url = URL.createObjectURL(file.value);
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = "invoice.pdf";
+            link.click();
+            URL.revokeObjectURL(url);
+
+            enabled.value = false;
+        }
+    });
+
+    return {
+        downloadIsLoading: isLoading,
+        downloadFn: download,
+    };
+};
+
+export default useDownloadInvoice;

frontend/constants/index.ts

@@ -56,6 +56,7 @@ export const API_ENDPOINTS = {
     orders: {
         get_all: "/order/all",
         cart: {
+            download_invoice: "/order/invoice",
             get_all: "/order/cart",
             delete_one: "/order/cart/item",
             delete_all: "/order/cart/all",