added submit discount code

frontend/components/cart/global/CartSummary.vue

@@ -2,10 +2,14 @@
 // imports
 
 import useGetOrdersCart from "~/composables/api/orders/useGetOrdersCart";
+import useSubmitDiscountCode from "~/composables/api/orders/useSubmitDiscountCode";
+import { useToast } from "~/composables/global/useToast";
+import { QUERY_KEYS } from "~/constants";
 
 // state
 
 const route = useRoute();
+const { $queryClient: queryClient } = useNuxtApp();
 
 const discountCode = ref("");
 
@@ -13,10 +17,39 @@ const discountCode = ref("");
 
 const { data: cart, isLoading: cartIsLoading } = useGetOrdersCart();
 
+const { addToast } = useToast();
+
+const {
+    mutateAsync: submitDiscountCode,
+    isPending: submitDiscountCodeIsPending,
+} = useSubmitDiscountCode();
+
 // computed
 
 const nextPage: ComputedRef<{ name: string; label: string } | undefined> =
     computed(() => route.meta.nextPage);
+
+// methods
+
+const handleSubmitDiscountCode = () => {
+    submitDiscountCode(
+        { code: discountCode.value },
+        {
+            onSuccess: () => {
+                queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.cart] });
+            },
+            onError: () => {
+                addToast({
+                    message: "خطایی در ثبت کد تخفیف رخ داد",
+                    options: {
+                        status: "error",
+                    },
+                });
+                discountCode.value = "";
+            },
+        }
+    );
+};
 </script>
 
 <template>
@@ -30,14 +63,27 @@ const nextPage: ComputedRef<{ name: string; label: string } | undefined> =
             <Icon name="ci:cart" class="**:stroke-black" size="24" />
         </div>
 
-        <div class="flex flex-col p-5 gap-5">
+        <div v-if="cartIsLoading" class="flex flex-col p-5 gap-4">
+            <Skeleton
+                v-for="i in 5"
+                :key="i"
+                class="w-full !h-7"
+                :class="{
+                    '!h-12': [4, 5].includes(i),
+                    '!rounded-full': i == 5,
+                    '!rounded-lg': i != 5,
+                }"
+            />
+        </div>
+
+        <div v-else class="flex flex-col p-5 gap-4">
             <div
                 class="flex items-center justify-between w-full text-slate-800"
             >
                 <span class="max-w-1/2 text-sm"> جمع سبد خرید: </span>
 
                 <span class="max-w-1/2 text-sm">
-                    {{ cart?.cart_total }} تومان
+                    {{ cart?.cart_total }}
                 </span>
             </div>
 
@@ -46,28 +92,27 @@ const nextPage: ComputedRef<{ name: string; label: string } | undefined> =
             >
                 <span class="max-w-1/2 text-sm"> مالیات ارزش افزوده: </span>
 
-                <span class="max-w-1/2 text-sm"> {{ cart?.tax }} تومان </span>
+                <span class="max-w-1/2 text-sm"> {{ cart?.tax }} </span>
             </div>
 
             <div
                 v-if="!!cart?.discount_code"
-                class="flex items-center justify-between w-full text-status-error-primary"
+                class="flex items-center justify-between w-full text-status-error-primary text-red-700"
             >
                 <span class="max-w-1/2 text-sm"> تخفیف: </span>
 
                 <span class="max-w-1/2 text-sm">
-                    {{ cart?.discount_code.amount }} تومان
+                    {{ cart?.discount_code.amount }}
                 </span>
             </div>
 
             <div
-                v-if="!!cart?.discount_code"
                 class="flex items-center justify-between w-full text-slate-900"
             >
                 <span class="max-w-1/2 text-sm"> جمع کل: </span>
 
                 <span class="max-w-1/2 text-sm">
-                    {{ cart?.final_price }} تومان
+                    {{ cart?.final_price }}
                 </span>
             </div>
 
@@ -78,6 +123,7 @@ const nextPage: ComputedRef<{ name: string; label: string } | undefined> =
             >
                 <template #endItem>
                     <button
+                        @click="handleSubmitDiscountCode"
                         class="text-xs px-3 rounded-[7px] py-1.5 text-white bg-black hover:invert border border-white transition-all"
                     >
                         ثبت