148 lines
3.0 KiB
Vue
148 lines
3.0 KiB
Vue
<template>
|
|
<div
|
|
class="mb-4 w-fit cursor-pointer text-sm"
|
|
v-on:click="$emit('update:step', 1)"
|
|
>
|
|
← Back to Plans
|
|
</div>
|
|
|
|
<ErrorMessage
|
|
class="my-3 ml-6"
|
|
:message="$resources.updateBillingDetails.error"
|
|
/>
|
|
<div class="flex flex-col justify-between px-6">
|
|
<div>
|
|
<FormControl
|
|
class="mb-2"
|
|
label="Billing Name"
|
|
v-model="billingName"
|
|
required
|
|
/>
|
|
<FormControl class="mb-2" label="Address" v-model="address" />
|
|
<FormControl
|
|
class="mb-2"
|
|
label="Country"
|
|
type="select"
|
|
v-model="country"
|
|
:options="countries"
|
|
required
|
|
/>
|
|
<div class="flex flex-col justify-between sm:flex-row">
|
|
<FormControl
|
|
v-if="country === 'India'"
|
|
class="mb-2 w-1/3"
|
|
label="State/Province/Region"
|
|
type="select"
|
|
v-model="state"
|
|
:options="indianStates"
|
|
required
|
|
/>
|
|
<FormControl
|
|
v-else
|
|
class="mb-2"
|
|
label="State/Province/Region"
|
|
v-model="state"
|
|
required
|
|
/>
|
|
<FormControl class="mb-2" label="City" type="text" v-model="city" />
|
|
<FormControl
|
|
class="mb-2"
|
|
label="Postal Code"
|
|
v-model="postalCode"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div v-show="currency === 'INR'">
|
|
<span class="mb-2 block text-sm leading-4 text-gray-700">
|
|
GSTIN(only for Indian customers)
|
|
</span>
|
|
<FormControl
|
|
v-if="gstApplicable"
|
|
v-model="gstin"
|
|
:disabled="!gstApplicable"
|
|
/>
|
|
<Button
|
|
v-if="gstApplicable"
|
|
class="mt-2"
|
|
@click="
|
|
gstApplicable = false;
|
|
gstin = 'Not Applicable';
|
|
"
|
|
>
|
|
I don't have a GSTIN
|
|
</Button>
|
|
<Button
|
|
v-else
|
|
class="mt-2"
|
|
@click="
|
|
gstApplicable = true;
|
|
gstin = '';
|
|
"
|
|
>
|
|
Add a GSTIN
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="solid"
|
|
class="mt-8 self-end"
|
|
:loading="$resources.updateBillingDetails.loading"
|
|
@click="$resources.updateBillingDetails.submit()"
|
|
>
|
|
Update Billing Details
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { indianStates } from '@/utils/billing';
|
|
|
|
export default {
|
|
name: 'CheckoutAddress',
|
|
props: ['currency', 'countries', 'secretKey', 'step'],
|
|
data() {
|
|
return {
|
|
billingName: '',
|
|
address: '',
|
|
country: '',
|
|
state: '',
|
|
city: '',
|
|
postalCode: null,
|
|
gstin: 'Not Applicable',
|
|
gstApplicable: false,
|
|
indianStates: indianStates,
|
|
};
|
|
},
|
|
resources: {
|
|
updateBillingDetails() {
|
|
return {
|
|
url: 'jcloude.api.developer.marketplace.update_billing_info',
|
|
params: {
|
|
secret_key: this.secretKey,
|
|
data: {
|
|
billing_name: this.billingName,
|
|
address: this.address,
|
|
country: this.country,
|
|
city: this.city,
|
|
state: this.state,
|
|
postal_code: this.postalCode,
|
|
gstin: this.gstin,
|
|
},
|
|
},
|
|
onSuccess(r) {
|
|
this.$emit('update:newAddress', {
|
|
address_line1: this.address,
|
|
country: this.country,
|
|
city: this.city,
|
|
state: this.state,
|
|
pincode: this.postalCode,
|
|
});
|
|
this.$emit('update:step', 3);
|
|
},
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|