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 usePayOrder from "~/composables/api/orders/usePayOrder";
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();

const { mutateAsync: pay, isPending: paymentIsPending } = usePayOrder();

// computed

const nextPage = computed(() => route.meta.nextPage as { name: string; label: string; query?: string } | undefined);

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 = "";
        },
    });
};

const handlePayment = () => {
    pay(
        {
            gateway_type: route.query["gw"] as any,
        },
        {
            onSuccess: (data) => {
                setTimeout(() => {
                    window.location.href = data.url;
                }, 2000);
            },
            onError: () => {
                addToast({
                    message: "خطایی در پرداخت رخ داد",
                    options: {
                        description: "لطفا با پشتیبانی تماس بگیرید",
                        status: "error",
                    },
                });
            },
        }
    );
};
</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:bg-transparent hover:text-black border-[1.5px] border-black hover:border-black 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>

            <Button
                v-if="nextPage?.name == 'payment'"
                start-icon="ci:arrow-right"
                class="w-full rounded-100"
                @click="handlePayment"
                variant="primary"
            >
                {{ nextPage?.label }}
            </Button>

            <NuxtLink
                v-else
                :to="{ name: nextPage?.name, query: { gw: nextPage?.query } }"
            >
                <Button
                    start-icon="arrow-right"
                    class="w-full rounded-100"
                    variant="primary"
                >
                    {{ nextPage?.label }}
                </Button>
            </NuxtLink>

            <PaymentPendingModal v-model:isShow="paymentIsPending" />
        </div>
    </div>
</template>

<style scoped></style>