128 lines
3.2 KiB
Vue
128 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Amount -->
|
|
<div>
|
|
<FormControl
|
|
:label="`Amount (Minimum Amount: ${maximumAmount})`"
|
|
class="mb-3"
|
|
v-model.number="creditsToBuy"
|
|
name="amount"
|
|
autocomplete="off"
|
|
type="number"
|
|
:max="maximumAmount"
|
|
>
|
|
<template #prefix>
|
|
<div class="grid w-4 place-items-center text-sm text-gray-700">
|
|
{{ team.pg.currency === 'INR' ? '₹' : '$' }}
|
|
</div>
|
|
</template>
|
|
</FormControl>
|
|
<FormControl
|
|
v-if="team.pg.currency === 'INR'"
|
|
:label="`Total Amount + GST (${
|
|
team.pg?.billing_info.gst_percentage * 100
|
|
}%)`"
|
|
disabled
|
|
:modelValue="totalAmount"
|
|
name="total"
|
|
autocomplete="off"
|
|
type="number"
|
|
>
|
|
<template #prefix>
|
|
<div class="grid w-4 place-items-center text-sm text-gray-700">
|
|
{{ team.pg.currency === 'INR' ? '₹' : '$' }}
|
|
</div>
|
|
</template>
|
|
</FormControl>
|
|
</div>
|
|
|
|
<!-- Payment Gateway -->
|
|
<div class="mt-4">
|
|
<div class="text-xs text-gray-600">Select Payment Gateway</div>
|
|
<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
<Button
|
|
v-if="team.pg.currency === 'INR' || team.pg.razorpay_enabled"
|
|
size="lg"
|
|
:class="{
|
|
'border-[1.5px] border-gray-700': paymentGateway === 'Razorpay',
|
|
}"
|
|
@click="paymentGateway = 'Razorpay'"
|
|
>
|
|
<RazorpayLogo class="w-24" />
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
:class="{
|
|
'border-[1.5px] border-gray-700': paymentGateway === 'Stripe',
|
|
}"
|
|
@click="paymentGateway = 'Stripe'"
|
|
>
|
|
<StripeLogo class="h-7 w-24" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Button -->
|
|
<BuyPartnerCreditsStripe
|
|
v-if="paymentGateway === 'Stripe'"
|
|
:amount="creditsToBuy"
|
|
:maximumAmount="maximumAmount"
|
|
@success="() => emit('success')"
|
|
@cancel="show = false"
|
|
/>
|
|
|
|
<BuyPartnerCreditsRazorpay
|
|
v-if="paymentGateway === 'Razorpay'"
|
|
:amount="creditsToBuy"
|
|
:maximumAmount="maximumAmount"
|
|
type="Partnership Fee"
|
|
@success="() => emit('success')"
|
|
@cancel="show = false"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import BuyPartnerCreditsStripe from './BuyPartnerCreditsStripe.vue';
|
|
import BuyPartnerCreditsRazorpay from './BuyPartnerCreditsRazorpay.vue';
|
|
import RazorpayLogo from '../../logo/RazorpayLogo.vue';
|
|
import StripeLogo from '../../logo/StripeLogo.vue';
|
|
import { FormControl, Button, createDocumentResource } from 'frappe-ui';
|
|
import { ref, computed, inject, defineEmits } from 'vue';
|
|
|
|
const emit = defineEmits(['success']);
|
|
|
|
const team = inject('team');
|
|
|
|
const pressSettings = createDocumentResource({
|
|
doctype: 'Press Settings',
|
|
name: 'Press Settings',
|
|
auto: true,
|
|
initialData: {},
|
|
});
|
|
|
|
const maximumAmount = computed(() => {
|
|
if (!pressSettings.pg) return 0;
|
|
const feeAmount =
|
|
team.pg?.currency == 'INR'
|
|
? pressSettings.pg.partnership_fee_inr
|
|
: pressSettings.pg.partnership_fee_usd;
|
|
return Math.ceil(feeAmount);
|
|
});
|
|
|
|
const creditsToBuy = ref(maximumAmount.value);
|
|
const paymentGateway = ref('');
|
|
|
|
const totalAmount = computed(() => {
|
|
const _creditsToBuy = creditsToBuy.value || 0;
|
|
|
|
if (team.pg?.currency === 'INR') {
|
|
return (
|
|
_creditsToBuy +
|
|
_creditsToBuy * (team.pg.billing_info.gst_percentage || 0)
|
|
).toFixed(2);
|
|
} else {
|
|
return _creditsToBuy;
|
|
}
|
|
});
|
|
</script>
|