radicall/resources/js/Client/components/dashboard/wallet/WithdrawRequestCard.vue

<script setup>
import { computed, ref } from 'vue';
import { useForm, usePage } from '@inertiajs/inertia-vue3';
import { Inertia } from '@inertiajs/inertia';
import Dialog from 'primevue/dialog';
import { toast } from 'vue3-toastify';
import UiCard from '../../ui/UiCard.vue';
import UiInput from '../../ui/UiInput.vue';
import UiButton from '../../ui/UiButton.vue';
import { convertEnglishToPersian, convertPersianToEnglish, formatPrice } from '../../../utils/numberUtils';

const props = defineProps({
    bankCards: {
        type: Array,
        required: true
    }
});

const { props: pageProps } = usePage();

const walletBalance = computed(() => Number(pageProps.value.auth?.wallet_balance || 0));

const amount = ref('');
const selectedCardId = ref(props.bankCards[0]?.id ?? null);

const numericAmount = computed(() => Number(convertPersianToEnglish(amount.value).replace(/\D/g, '')) || 0);

const formatCardNumber = (cardNumber) => convertEnglishToPersian(cardNumber.replace(/(\d{4})(?=\d)/g, '$1 - '));

const selectFullBalance = () => {
    amount.value = String(walletBalance.value);
};

const withdrawForm = useForm({
    amount: null,
    bank_card_id: null,
});

const submitWithdraw = () => {
    if (numericAmount.value < 10000) {
        toast.error('حداقل مبلغ برداشت ۱۰٬۰۰۰ تومان است.');
        return;
    }

    if (!selectedCardId.value) {
        toast.error('لطفا کارت بانکی مقصد را انتخاب کنید.');
        return;
    }

    withdrawForm.amount = numericAmount.value;
    withdrawForm.bank_card_id = selectedCardId.value;

    withdrawForm.post('/dashboard/wallet/withdraw-requests', {
        preserveScroll: true,
        onSuccess: () => {
            amount.value = '';
            toast.success('درخواست برداشت شما ثبت شد و در انتظار بررسی است.');
        },
        onError: (errors) => toast.error(Object.values(errors)[0] || 'خطا در ثبت درخواست برداشت.'),
    });
};

const cardModalVisible = ref(false);

const cardForm = useForm({
    card_number: '',
    holder_name: '',
});

const submitCard = () => {
    cardForm.card_number = convertPersianToEnglish(cardForm.card_number).replace(/\D/g, '');

    cardForm.post('/dashboard/wallet/bank-cards', {
        preserveScroll: true,
        onSuccess: () => {
            cardForm.reset();
            cardModalVisible.value = false;
            toast.success('کارت بانکی با موفقیت ثبت شد.');
        },
        onError: (errors) => toast.error(Object.values(errors)[0] || 'خطا در ثبت کارت بانکی.'),
    });
};

const deleteCard = (card) => {
    Inertia.delete(`/dashboard/wallet/bank-cards/${card.id}`, {
        preserveScroll: true,
        onSuccess: () => {
            if (selectedCardId.value === card.id) {
                selectedCardId.value = null;
            }
        },
    });
};
</script>

<template>
    <UiCard title="درخواست برداشت" variant="default">
        <div class="grid grid-cols-2 max-lg:grid-cols-1 gap-6 items-start">
            <div class="flex flex-col gap-4">
                <p class="text-[11px] font-normal text-[#576989] leading-6">
                    مبلغ مورد نظر پس از بررسی و تایید توسط کارشناسان، از کیف پول شما کسر و به کارت انتخابی واریز می‌شود.
                </p>
                <div class="flex items-end gap-3 max-sm:flex-col max-sm:items-stretch">
                    <UiInput
                        v-model="amount"
                        label="مبلغ برداشت"
                        placeholder="مبلغ مورد نظر را به تومان وارد کنید"
                        prefixEnd="تومان"
                        prefixClasses="!border-dominant-50"
                        class="!w-full"
                        customClass="!border-dominant-50 !font-normal !text-[12px]"
                    />
                </div>
                <div class="flex items-center gap-2 flex-wrap">
                    <button
                        type="button"
                        class="text-[11px] font-normal text-[#576989] bg-[#F5F7FA] border border-[#DEE3EB] rounded-lg px-3 py-1.5 hover:bg-[#EEF2F8]"
                        @click="selectFullBalance"
                    >
                        کل موجودی ({{ formatPrice(walletBalance) }} تومان)
                    </button>
                </div>
                <UiButton
                    label="ثبت درخواست برداشت"
                    severity="success"
                    size="small"
                    class="self-start"
                    :loading="withdrawForm.processing"
                    :disabled="withdrawForm.processing"
                    @click="submitWithdraw"
                />
            </div>

            <div class="flex flex-col gap-3">
                <div class="flex items-center justify-between">
                    <span class="text-[11px] font-semibold text-[#3E4C63]">کارت بانکی مقصد</span>
                    <button type="button" class="text-[11px] font-semibold text-[#365891]" @click="cardModalVisible = true">
                        + افزودن کارت
                    </button>
                </div>
                <p v-if="!bankCards.length" class="bg-[#F8FAFC] border border-dashed border-[#C1D0E8] rounded-xl p-4 text-[11px] font-normal text-[#576989] text-center leading-6">
                    هنوز کارتی ثبت نکرده‌اید. برای ثبت درخواست برداشت ابتدا یک کارت بانکی اضافه کنید.
                </p>
                <label
                    v-for="card in bankCards"
                    :key="card.id"
                    class="flex items-center gap-3 border rounded-xl px-4 py-3 cursor-pointer transition-colors"
                    :class="selectedCardId === card.id ? 'border-[#365891] bg-[#EEF2F8]' : 'border-[#DEE3EB] bg-white hover:bg-[#F8FAFC]'"
                >
                    <input
                        v-model="selectedCardId"
                        type="radio"
                        name="bank_card"
                        :value="card.id"
                        class="accent-[#365891]"
                    />
                    <span class="flex flex-col gap-1 flex-1">
                        <span class="text-[12px] font-semibold text-[#3E4C63]" dir="ltr">{{ formatCardNumber(card.card_number) }}</span>
                        <span class="text-[11px] font-normal text-[#576989]">{{ card.holder_name }}</span>
                    </span>
                    <button type="button" class="text-[11px] font-semibold text-[#7A1419]" @click.prevent="deleteCard(card)">حذف</button>
                </label>
            </div>
        </div>

        <Dialog v-model:visible="cardModalVisible" :modal="true" :closable="true" :dismissableMask="false" :style="{ width: '420px' }" class="fast-request-dialog" :pt="{ header: '!bg-client-primaryBlue' }">
            <template #header>
                <div class="w-full flex items-center justify-start">
                    <h2 class="text-[14px] font-[700] text-[#576989]">افزودن کارت بانکی</h2>
                </div>
            </template>
            <div class="w-full flex flex-col gap-4 border-t border-[#EBEBEB] pt-4">
                <UiInput
                    v-model="cardForm.card_number"
                    label="شماره کارت"
                    placeholder="شماره کارت ۱۶ رقمی"
                    maxlength="16"
                    customClass="!border-dominant-50 !font-normal !text-[12px]"
                />
                <UiInput
                    v-model="cardForm.holder_name"
                    label="نام صاحب حساب"
                    placeholder="نام و نام خانوادگی صاحب کارت"
                    customClass="!border-dominant-50 !font-normal !text-[12px]"
                />
            </div>
            <div class="w-full pt-4 flex items-center justify-start gap-2 border-t border-[#EBEBEB] mt-4">
                <UiButton label="ثبت کارت" severity="success" size="small" :loading="cardForm.processing" :disabled="cardForm.processing" @click="submitCard" />
                <UiButton label="انصراف" severity="secondary" size="small" :disabled="cardForm.processing" @click="cardModalVisible = false" />
            </div>
        </Dialog>
    </UiCard>
</template>