From edc1066b3facb74f7e8fce724ee9697fefe3c4f6 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Tue, 18 Mar 2025 16:20:17 +0330
Subject: [PATCH] changed submit discount code input and button

---
 .../components/cart/global/CartSummary.vue    | 46 ++++++++++---------
 1 file changed, 25 insertions(+), 21 deletions(-)

diff --git a/frontend/components/cart/global/CartSummary.vue b/frontend/components/cart/global/CartSummary.vue
index 99431d5..46e3968 100644
--- a/frontend/components/cart/global/CartSummary.vue
+++ b/frontend/components/cart/global/CartSummary.vue
@@ -54,29 +54,27 @@ const handleSubmitDiscountCode = () => {
 
 <template>
     <div
-        class="flex flex-col bg-slate-50 sticky top-44 w-full lg:w-3/12 transition-all border border-slate-200 rounded-xl"
+        class="flex flex-col bg-slate-50 w-full lg:w-3/12 transition-all border border-slate-200 rounded-xl"
     >
         <div
-            class="w-full flex items-center justify-between p-5 border-b border-slate-200"
+            class="w-full flex items-center justify-between py-5 px-4 border-b border-slate-200"
         >
             <span class="typo-sub-h-xl text-black">فاکتور خرید</span>
             <Icon name="ci:cart" class="**:stroke-black" size="24" />
         </div>
 
-        <div v-if="cartIsLoading" class="flex flex-col p-5 gap-4">
+        <div v-if="cartIsLoading" class="flex flex-col p-4 gap-4 !rounded-lg">
             <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 v-else class="flex flex-col p-4 gap-4">
             <div
                 class="flex items-center justify-between w-full text-slate-800"
             >
@@ -116,23 +114,29 @@ const handleSubmitDiscountCode = () => {
                 </span>
             </div>
 
-            <Input
-                v-model="discountCode"
-                placeholder="کد تخفیف"
-                class="!py-2 !pe-2 ps-2.5"
-            >
-                <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"
-                    >
-                        ثبت
-                    </button>
-                </template>
-            </Input>
+            <div class="w-full flex justify-between">
+                <Input
+                    v-model="discountCode"
+                    placeholder="کد تخفیف"
+                    class="!py-3 !pe-2 ps-2.5 w-full !rounded-none !border-e-[0px] !rounded-s-100"
+                />
+                <button
+                    @click="handleSubmitDiscountCode"
+                    class="text-xs px-5 rounded-e-100 py-1.5 text-white bg-black hover:invert border-[1.5px] border-black hover:border-white transition-all disabled:cursor-not-allowed"
+                    :disabled="!discountCode.length"
+                >
+                    <Icon
+                        v-if="submitDiscountCodeIsPending"
+                        name="svg-spinners:180-ring-with-bg"
+                        size="20"
+                        class="**:fill-white"
+                    />
+                    <span v-else> ثبت </span>
+                </button>
+            </div>
 
             <NuxtLink :to="{ name: nextPage?.name }">
-                <Button start-icon="bi:arrow-right" class="w-full rounded-full">
+                <Button start-icon="bi:arrow-right" class="w-full rounded-100">
                     {{ nextPage?.label }}
                 </Button>
             </NuxtLink>