changed discount button color

frontend/components/cart/global/CartSummary.vue

@@ -20,26 +20,15 @@ const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
 
 const discountCode = ref(cart.value?.discount_code?.code || "");
 
-const {
+const { mutateAsync: submitDiscountCode, isPending: submitDiscountCodeIsPending } = useSubmitDiscountCode();
-    mutateAsync: submitDiscountCode,
-    isPending: submitDiscountCodeIsPending,
-} = useSubmitDiscountCode();
 
-const {
+const { mutateAsync: deleteDiscountCode, isPending: deleteDiscountCodeIsPending } = useDeleteDiscountCode();
-    mutateAsync: deleteDiscountCode,
-    isPending: deleteDiscountCodeIsPending,
-} = useDeleteDiscountCode();
 
 const { mutateAsync: pay, isPending: paymentIsPending } = usePayOrder();
 
 // computed
 
-const nextPage = computed(
+const nextPage = computed(() => route.meta.nextPage as { name: string; label: string; query?: string } | undefined);
-    () =>
-        route.meta.nextPage as
-            | { name: string; label: string; query?: string }
-            | undefined
-);
 
 const hasSubmittedDiscountCode = computed(() => !!cart.value?.discount_code);
 
@@ -109,17 +98,20 @@ const handlePayment = () => {
 </script>
 
 <template>
-    <div
+    <div class="flex flex-col bg-slate-50 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 py-5 px-4 border-b border-slate-200">
-    >
-        <div
-            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" />
+            <Icon
+                name="ci:cart"
+                class="**:stroke-black"
+                size="24"
+            />
         </div>
 
-        <div v-if="cartIsLoading" class="flex flex-col p-4 gap-4 !rounded-lg">
+        <div
+            v-if="cartIsLoading"
+            class="flex flex-col p-4 gap-4 !rounded-lg"
+        >
             <Skeleton
                 v-for="i in 5"
                 :key="i"
@@ -130,10 +122,11 @@ const handlePayment = () => {
             />
         </div>
 
-        <div v-else class="flex flex-col p-4 gap-4">
+        <div
-            <div
+            v-else
-                class="flex items-center justify-between w-full text-slate-800"
+            class="flex flex-col p-4 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">
@@ -141,9 +134,7 @@ const handlePayment = () => {
                 </span>
             </div>
 
-            <div
+            <div class="flex items-center justify-between w-full text-slate-800">
-                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?.tax }} </span>
@@ -160,9 +151,7 @@ const handlePayment = () => {
                 </span>
             </div>
 
-            <div
+            <div class="flex items-center justify-between w-full text-slate-900">
-                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">
@@ -178,23 +167,12 @@ const handlePayment = () => {
                     :disabled="hasSubmittedDiscountCode"
                 />
                 <button
-                    @click="
+                    @click="hasSubmittedDiscountCode ? handleDeleteDiscountCode() : handleSubmitDiscountCode()"
-                        hasSubmittedDiscountCode
+                    class="text-xs px-5 rounded-e-100 py-1.5 text-white bg-black hover:bg-transparent hover:text-black border-[1.5px] border-black hover:border-black transition-all disabled:cursor-not-allowed"
-                            ? handleDeleteDiscountCode()
+                    :disabled="!discountCode.length || submitDiscountCodeIsPending || deleteDiscountCodeIsPending"
-                            : handleSubmitDiscountCode()
-                    "
-                    class="text-xs px-5 rounded-e-100 py-1.5 text-white bg-blue-500 hover:bg-transparent hover:text-blue-500 border-[1.5px] border-blue-500 hover:border-white transition-all disabled:cursor-not-allowed"
-                    :disabled="
-                        !discountCode.length ||
-                        submitDiscountCodeIsPending ||
-                        deleteDiscountCodeIsPending
-                    "
                 >
                     <Icon
-                        v-if="
+                        v-if="submitDiscountCodeIsPending || deleteDiscountCodeIsPending"
-                            submitDiscountCodeIsPending ||
-                            deleteDiscountCodeIsPending
-                        "
                         name="svg-spinners:180-ring-with-bg"
                         size="20"
                         class="**:fill-white"