{"version":3,"file":"OfferPay-CfOu9asj.js","sources":["../../../node_modules/lodash-es/ceil.js","../../../resources/js/Pages/Offer/Components/OfferPay.vue"],"sourcesContent":["import createRound from './_createRound.js';\n\n/**\n * Computes `number` rounded up to `precision`.\n *\n * @static\n * @memberOf _\n * @since 3.10.0\n * @category Math\n * @param {number} number The number to round up.\n * @param {number} [precision=0] The precision to round up to.\n * @returns {number} Returns the rounded up number.\n * @example\n *\n * _.ceil(4.006);\n * // => 5\n *\n * _.ceil(6.004, 2);\n * // => 6.01\n *\n * _.ceil(6040, -2);\n * // => 6100\n */\nvar ceil = createRound('ceil');\n\nexport default ceil;\n","<script setup>\n\nimport Button from \"@/Components/Button.vue\";\nimport Card from \"@/Components/Card.vue\";\nimport {router, usePage} from \"@inertiajs/vue3\";\nimport InputError from \"@/Components/InputError.vue\";\nimport {computed, ref} from \"vue\";\nimport Multiselect from 'vue-multiselect/dist/vue-multiselect.ssr.js'\nimport PaymentMethod from \"@/Pages/Offer/Components/PaymentMethod.vue\";\nimport Checkbox from \"@/Components/Checkbox.vue\";\nimport {priceNumToStr, priceStrToNum} from \"@/helper.js\";\nimport floor from \"lodash-es/floor\";\nimport ceil from \"lodash-es/ceil\";\n\nconst props = defineProps({\n    price: Number\n})\n\nconst page = usePage()\nconst selectPaymentMethods = ref(undefined)\nconst paymentMethods = page.props.payment_methods,\n    useWallet = ref(page.props.wallet_balance > 0)\n\nconst deductWalletAmount = ref(0)\n\nconst getDeductWalletBalanceString = () => priceNumToStr(deductWalletAmount.value * page.props.currency.rate)\n\nconst deductWalletAmountString = ref(getDeductWalletBalanceString())\nconst deductWalletAmountUpdate = (event) => {\n    deductWalletAmount.value = floor(\n        priceStrToNum(event.target.value) / page.props.currency.rate * 10 ** page.props.currency.precision, 0)\n}\n\nconst pay = () => {\n    router.post(route('orders.store', {offer: page.props.offer.id}), {\n        wallet_amount: deductWalletAmount.value,\n        method: selectPaymentMethods.value?.value\n    })\n}\n\nconst walletMaxAmount = computed(() => {\n    return page.props.wallet_balance > props.price ? props.price : page.props.wallet_balance\n})\nconst selectMaxAmount = () => {\n    deductWalletAmount.value = walletMaxAmount.value\n    deductWalletAmountString.value =\n        priceNumToStr(ceil(deductWalletAmount.value * page.props.currency.rate) / 10 ** page.props.currency.precision)\n}\n\nconst minPaymentAmount = computed(() => Math.floor((selectPaymentMethods.value?.min_amount / 100) * selectPaymentMethods.value.currency_rate));\n\n</script>\n\n<template>\n    <card class=\"flex px-3 py-5 flex-col gap-2.5 w-full\">\n        <div class=\"px-2.5 flex gap-1.5 items-end\">\n            <span class=\"text-sm dark:text-slate-200 font-medium uppercase leading-full\">{{ $t('Price') }}</span>\n            <div class=\"flex items-end gap-1 leading-full\">\n                <span class=\"text-xl dark:text-slate-200 font-medium leading-full \">{{ $page.props.offer.price_currency_formatted }}</span>\n            </div>\n        </div>\n        <div class=\"px-2.5 sm:px-0 flex gap-1.5 items-end my-2.5\">\n            <div class=\"px-2.5 dark:bg-deep-green py-2 bg-green-50 w-full flex items-stretch content-center rounded-lg\">\n                <div class=\"w-[24px]\">\n                    <ion-icon class=\"text-2xl fill-green-600\" name=\"shield-checkmark\"></ion-icon>\n                </div>\n\n                <div class=\"ml-2.5\">\n                    <p class=\"text-sm font-medium dark:text-slate-200 font-sans leading-[.875rem]\">\n                        {{ $t('Your money is safe') }}\n                    </p>\n                    <p class=\"text-sm font-sans dark:text-slate-200 leading-[.875rem]\">\n                        {{ $t('The seller will not receive payment until you confirm the fulfillment of the order.') }}\n                    </p>\n                </div>\n            </div>\n        </div>\n        <Multiselect\n            v-model=\"selectPaymentMethods\" :close-on-select=\"true\" :options=\"paymentMethods\"\n            :placeholder=\"$t('Select payment method')\" :searchable=\"false\"\n            :show-labels=\"false\" track-by=\"value\"\n            class=\"border-gray-300 focus:border-blue-600 focus:ring-blue-600 rounded-md shadow-sm\"\n        >\n            <!--suppress VueUnrecognizedSlot -->\n            <template #option=\"props\">\n                <PaymentMethod :props=\"props\"/>\n            </template>\n            <!--suppress VueUnrecognizedSlot -->\n            <template #placeholder>\n                <span class=\"font-sans\">\n                    {{ $t('Select payment method') }}\n                </span>\n            </template>\n            <!--suppress VueUnrecognizedSlot -->\n            <template #singleLabel=\"props\">\n                <PaymentMethod :props=\"props\"/>\n            </template>\n        </Multiselect>\n        <div v-if=\"selectPaymentMethods?.min_amount > page.props.offer.price\">\n            <div class=\"px-2.5 py-2 w-full flex items-stretch content-center rounded-lg\">\n                <div class=\"w-[16px]\">\n                    <ion-icon class=\"text-base fill-green-600\" name=\"alert-circle\"></ion-icon>\n                </div>\n                <div class=\"ml-1.5\">\n                    <p class=\"text-sm font-sans text-slate-500 dark:text-slate-400 leading-[.875rem]\">\n                        {{$t('The minimum amount of payment by this method is :sum. The difference will be credited to your wallet for future payments.', {\n                            sum: `${ minPaymentAmount } ${selectPaymentMethods.currency.toUpperCase()}`\n                        })}}\n                    </p>\n                </div>\n            </div>\n        </div>\n        <div v-if=\"page.props.wallet_balance > 0\" class=\"px-2.5 pb-3 flex gap-2 items-center\">\n            <Checkbox :checked=\"useWallet\"\n                      @update:checked=\"useWallet = !useWallet\"\n            >\n                <template #label>\n                    <span class=\"dark:text-slate-200\">{{$t('Use funds from the wallet')}}</span>\n                </template>\n            </Checkbox>\n        </div>\n        <template v-if=\"useWallet\">\n            <div class=\"px-1 flex justify-between items-center\">\n                <div class=\"text-sm text-slate-500 dark:text-slate-400\">{{ $t('Available balance:') }}\n                    {{ page.props.wallet_balance_formatted }}\n                </div>\n                <button class=\"bg-blue-600 hover:bg-blue-700 text-white dark:text-dark-blue rounded-full h-7 px-4 uppercase text-[0.65rem]\"\n                        @click=\"selectMaxAmount()\">\n                    MAX\n                </button>\n            </div>\n            <div class=\"relative\">\n                <input\n                    v-model=\"deductWalletAmountString\"\n                    :class=\"[deductWalletAmount > walletMaxAmount ? 'border-red-300 focus:border-red-300 focus:ring-red-300'\n                : 'border-gray-300 focus:border-blue-600 focus:ring-blue-600']\"\n                    :placeholder=\"$t('Enter the amount to be debited from your wallet')\"\n                    class=\"rounded-md dark:bg-deep-blue dark:text-slate-200 shadow-sm placeholder:text-gray-400 w-full pl-8\"\n                    type=\"text\"\n                    @input=\"deductWalletAmountUpdate\"\n                >\n                <div class=\"absolute inset-y-0 left-0 flex items-center pl-4\">\n                    <span class=\"text-gray-400 font-normal text-xl\">{{ page.props.currency.symbol }}</span>\n                </div>\n            </div>\n            <div v-if=\"deductWalletAmount > walletMaxAmount\" class=\"text-red-500 text-sm mt-1 pl-2\">\n                <ion-icon name=\"alert-circle\" class=\"inline-block mr-1 align-middle\"></ion-icon>\n                <span class=\"text-sm align-middle\">{{ $t('The amount exceeds the wallet balance') }}</span>\n            </div>\n        </template>\n\n        <InputError v-if=\"page.props.errors?.error\" :message=\"page.props.errors?.error\"/>\n        <div class=\"flex pt-1 justify-center px-2.5\">\n            <Button :disabled=\"!selectPaymentMethods && deductWalletAmount !== props.price\"\n                    :text=\"$t('order')\"\n                    class=\"text-sm w-full\"\n                    type=\"primary\"\n                    @click=\"pay()\"\n            ></Button>\n        </div>\n    </card>\n</template>\n"],"names":["ceil","createRound","props","__props","page","usePage","selectPaymentMethods","ref","paymentMethods","useWallet","deductWalletAmount","deductWalletAmountString","priceNumToStr","deductWalletAmountUpdate","event","floor","priceStrToNum","pay","router","_a","walletMaxAmount","computed","selectMaxAmount","minPaymentAmount"],"mappings":"k5BAuBA,IAAIA,EAAOC,EAAY,MAAM,+xCCT7B,MAAMC,EAAQC,EAIRC,EAAOC,EAAO,EACdC,EAAuBC,EAAI,MAAS,EACpCC,EAAiBJ,EAAK,MAAM,gBAC9BK,EAAYF,EAAIH,EAAK,MAAM,eAAiB,CAAC,EAE3CM,EAAqBH,EAAI,CAAC,EAI1BI,EAA2BJ,EAFUK,EAAcF,EAAmB,MAAQN,EAAK,MAAM,SAAS,IAAI,CAEzC,EAC7DS,EAA4BC,GAAU,CACxCJ,EAAmB,MAAQK,EACvBC,EAAcF,EAAM,OAAO,KAAK,EAAIV,EAAK,MAAM,SAAS,KAAO,IAAMA,EAAK,MAAM,SAAS,UAAW,CAAC,CAC7G,EAEMa,EAAM,IAAM,OACdC,EAAO,KAAK,MAAM,eAAgB,CAAC,MAAOd,EAAK,MAAM,MAAM,EAAE,CAAC,EAAG,CAC7D,cAAeM,EAAmB,MAClC,QAAQS,EAAAb,EAAqB,QAArB,YAAAa,EAA4B,KACvC,CAAA,CACL,EAEMC,EAAkBC,EAAS,IACtBjB,EAAK,MAAM,eAAiBF,EAAM,MAAQA,EAAM,MAAQE,EAAK,MAAM,cAC7E,EACKkB,EAAkB,IAAM,CAC1BZ,EAAmB,MAAQU,EAAgB,MAC3CT,EAAyB,MACrBC,EAAcZ,EAAKU,EAAmB,MAAQN,EAAK,MAAM,SAAS,IAAI,EAAI,IAAMA,EAAK,MAAM,SAAS,SAAS,CACrH,EAEMmB,EAAmBF,EAAS,IAAA,OAAM,YAAK,QAAOF,EAAAb,EAAqB,QAArB,YAAAa,EAA4B,YAAa,IAAOb,EAAqB,MAAM,aAAa,EAAC","x_google_ignoreList":[0]}