hossein-por-shop/frontend/components/cart/global/CartSummary.vue

<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";
import { QUERY_KEYS } from "~/constants";

// state

const route = useRoute();
const { $queryClient: queryClient } = useNuxtApp();
const { addToast } = useToast();

// queries

const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();

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 = () => {
    submitDiscountCode(
        { code: discountCode.value },
        {
            onSuccess: () => {
                queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.cart] });
            },
            onError: () => {
                addToast({
                    message: "خطایی در ثبت کد تخفیف رخ داد",
                    options: {
                        status: "error",
                    },
                });
                discountCode.value = "";
            },
        }
    );
};

const handleDeleteDiscountCode = () => {
    deleteDiscountCode(undefined, {
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.cart] });
            discountCode.value = "";
        },
        onError: () => {
            addToast({
                message: "خطایی در حذف کد تخفیف رخ داد",
                options: {
                    status: "error",
                },
            });
            discountCode.value = "";
        },
    });
};
</script>

<template>
    <div
        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"
        >
            <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-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),
                }"
            />
        </div>

        <div v-else 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">
                    {{ cart?.cart_total }}
                </span>
            </div>

            <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?.tax }} </span>
            </div>

            <div
                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>

                <span class="max-w-1/2 text-sm">
                    {{ cart?.discount_code.amount }}
                </span>
            </div>

            <div
                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 }}
                </span>
            </div>

            <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"
                    :disabled="hasSubmittedDiscountCode"
                />
                <button
                    @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 ||
                        submitDiscountCodeIsPending ||
                        deleteDiscountCodeIsPending
                    "
                >
                    <Icon
                        v-if="
                            submitDiscountCodeIsPending ||
                            deleteDiscountCodeIsPending
                        "
                        name="svg-spinners:180-ring-with-bg"
                        size="20"
                        class="**:fill-white"
                    />
                    <span v-else>
                        {{ hasSubmittedDiscountCode ? "حذف" : "ثبت" }}
                    </span>
                </button>
            </div>

            <NuxtLink :to="{ name: nextPage?.name }">
                <Button start-icon="bi:arrow-right" class="w-full rounded-100">
                    {{ nextPage?.label }}
                </Button>
            </NuxtLink>
        </div>
    </div>
</template>

<style scoped></style>