conncted discount input to api

frontend/components/cart/global/CartSummary.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 // imports
 
+import useDeleteDiscountCode from "~/composables/api/orders/useDeleteDiscountCode";
 import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
 import useSubmitDiscountCode from "~/composables/api/orders/useSubmitDiscountCode";
 import { useToast } from "~/composables/global/useToast";
@@ -10,25 +11,31 @@ import { QUERY_KEYS } from "~/constants";
 
 const route = useRoute();
 const { $queryClient: queryClient } = useNuxtApp();
-
-const discountCode = ref("");
+const { addToast } = useToast();
 
 // queries
 
 const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
 
-const { addToast } = useToast();
+const discountCode = ref(cart.value?.discount_code?.code || "");
 
 const {
     mutateAsync: submitDiscountCode,
     isPending: submitDiscountCodeIsPending,
 } = useSubmitDiscountCode();
 
+const {
+    mutateAsync: deleteDiscountCode,
+    isPending: deleteDiscountCodeIsPending,
+} = useDeleteDiscountCode();
+
 // computed
 
 const nextPage: ComputedRef<{ name: string; label: string } | undefined> =
     computed(() => route.meta.nextPage);
 
+const hasSubmittedDiscountCode = computed(() => !!cart.value?.discount_code);
+
 // methods
 
 const handleSubmitDiscountCode = () => {
@@ -50,6 +57,24 @@ const handleSubmitDiscountCode = () => {
         }
     );
 };
+
+const handleDeleteDiscountCode = () => {
+    deleteDiscountCode(undefined, {
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.cart] });
+            discountCode.value = "";
+        },
+        onError: () => {
+            addToast({
+                message: "خطایی در حذف کد تخفیف رخ داد",
+                options: {
+                    status: "error",
+                },
+            });
+            discountCode.value = "";
+        },
+    });
+};
 </script>
 
 <template>
@@ -94,7 +119,7 @@ const handleSubmitDiscountCode = () => {
             </div>
 
             <div
-                v-if="!!cart?.discount_code"
+                v-if="hasSubmittedDiscountCode"
                 class="flex items-center justify-between w-full text-status-error-primary text-red-700"
             >
                 <span class="max-w-1/2 text-sm"> تخفیف: </span>
@@ -119,19 +144,33 @@ const handleSubmitDiscountCode = () => {
                     v-model="discountCode"
                     placeholder="کد تخفیف"
                     class="!py-3 !pe-2 ps-2.5 w-full !rounded-none !border-e-[0px] !rounded-s-100"
+                    :disabled="hasSubmittedDiscountCode"
                 />
                 <button
-                    @click="handleSubmitDiscountCode"
+                    @click="
+                        hasSubmittedDiscountCode
+                            ? handleDeleteDiscountCode()
+                            : 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"
+                    :disabled="
+                        !discountCode.length ||
+                        submitDiscountCodeIsPending ||
+                        deleteDiscountCodeIsPending
+                    "
                 >
                     <Icon
-                        v-if="submitDiscountCodeIsPending"
+                        v-if="
+                            submitDiscountCodeIsPending ||
+                            deleteDiscountCodeIsPending
+                        "
                         name="svg-spinners:180-ring-with-bg"
                         size="20"
                         class="**:fill-white"
                     />
-                    <span v-else> ثبت </span>
+                    <span v-else>
+                        {{ hasSubmittedDiscountCode ? "حذف" : "ثبت" }}
+                    </span>
                 </button>
             </div>