516 lines
15 KiB
Vue
516 lines
15 KiB
Vue
<script setup>
|
|
import BillingHistoryTable from './BillingHistoryTable.vue'
|
|
import mastercard from '@images/icons/payments/mastercard.png'
|
|
import visa from '@images/icons/payments/visa.png'
|
|
|
|
const selectedPaymentMethod = ref('credit-debit-atm-card')
|
|
const isPricingPlanDialogVisible = ref(false)
|
|
const isConfirmDialogVisible = ref(false)
|
|
const isCardEditDialogVisible = ref(false)
|
|
const isCardDetailSaveBilling = ref(false)
|
|
|
|
const creditCards = [
|
|
{
|
|
name: 'Tom McBride',
|
|
number: '5531234567899856',
|
|
expiry: '12/23',
|
|
isPrimary: true,
|
|
type: 'visa',
|
|
cvv: '456',
|
|
image: mastercard,
|
|
},
|
|
{
|
|
name: 'Mildred Wagner',
|
|
number: '4851234567895896',
|
|
expiry: '10/27',
|
|
isPrimary: false,
|
|
type: 'mastercard',
|
|
cvv: '123',
|
|
image: visa,
|
|
},
|
|
]
|
|
|
|
const countryList = [
|
|
'United States',
|
|
'Canada',
|
|
'United Kingdom',
|
|
'Australia',
|
|
'New Zealand',
|
|
'India',
|
|
'Russia',
|
|
'China',
|
|
'Japan',
|
|
]
|
|
|
|
const currentCardDetails = ref()
|
|
|
|
const openEditCardDialog = cardDetails => {
|
|
currentCardDetails.value = cardDetails
|
|
isCardEditDialogVisible.value = true
|
|
}
|
|
|
|
const cardNumber = ref(135632156548789)
|
|
const cardName = ref('john Doe')
|
|
const cardExpiryDate = ref('05/24')
|
|
const cardCvv = ref(420)
|
|
|
|
const resetPaymentForm = () => {
|
|
cardNumber.value = 135632156548789
|
|
cardName.value = 'john Doe'
|
|
cardExpiryDate.value = '05/24'
|
|
cardCvv.value = 420
|
|
selectedPaymentMethod.value = 'credit-debit-atm-card'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<!-- 👉 Current Plan -->
|
|
<VCol cols="12">
|
|
<VCard title="Current Plan">
|
|
<VCardText>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<div class="d-flex flex-column gap-y-6">
|
|
<div class="d-flex flex-column gap-y-1">
|
|
<h6 class="text-h6">
|
|
Your Current Plan is Basic
|
|
</h6>
|
|
<div>
|
|
A simple start for everyone
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column gap-y-1">
|
|
<h6 class="text-h6">
|
|
Active until Dec 09, 2021
|
|
</h6>
|
|
<div>
|
|
We will send you a notification upon Subscription expiration
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex flex-column gap-y-1">
|
|
<div class="d-flex align-center gap-x-2">
|
|
<h6 class="text-h6">
|
|
$199 Per Month
|
|
</h6>
|
|
<VChip
|
|
color="primary"
|
|
size="small"
|
|
>
|
|
Popular
|
|
</VChip>
|
|
</div>
|
|
<p class="text-base mb-0">
|
|
Standard plan for small to medium businesses
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VAlert
|
|
type="warning"
|
|
variant="tonal"
|
|
title="We need your attention!"
|
|
text="Your plan requires update"
|
|
/>
|
|
|
|
<!-- progress -->
|
|
<h6 class="d-flex text-h6 justify-space-between mt-6 mb-1">
|
|
<div>Days</div>
|
|
<div>12 of 30 Days</div>
|
|
</h6>
|
|
<VProgressLinear
|
|
color="primary"
|
|
rounded
|
|
height="6"
|
|
model-value="75"
|
|
/>
|
|
<p class="text-base mt-1">
|
|
18 days remaining until your plan requires update
|
|
</p>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<div class="d-flex flex-wrap gap-4">
|
|
<VBtn @click="isPricingPlanDialogVisible = true">
|
|
upgrade plan
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
color="error"
|
|
variant="outlined"
|
|
@click="isConfirmDialogVisible = true"
|
|
>
|
|
Cancel Subscription
|
|
</VBtn>
|
|
</div>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<!-- 👉 Confirm Dialog -->
|
|
<ConfirmDialog
|
|
v-model:isDialogVisible="isConfirmDialogVisible"
|
|
confirmation-question="Are you sure to cancel your subscription?"
|
|
cancel-msg="Unsubscription Cancelled!!"
|
|
cancel-title="Cancelled"
|
|
confirm-msg="Your subscription cancelled successfully."
|
|
confirm-title="Unsubscribed!"
|
|
/>
|
|
|
|
<!-- 👉 plan and pricing dialog -->
|
|
<PricingPlanDialog v-model:is-dialog-visible="isPricingPlanDialogVisible" />
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
|
|
<!-- 👉 Payment Methods -->
|
|
<VCol cols="12">
|
|
<VCard title="Payment Methods">
|
|
<VCardText>
|
|
<VForm @submit.prevent="() => {}">
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VRow>
|
|
<!-- 👉 card type switch -->
|
|
<VCol cols="12">
|
|
<VRadioGroup
|
|
v-model="selectedPaymentMethod"
|
|
inline
|
|
>
|
|
<VRadio
|
|
value="credit-debit-atm-card"
|
|
label="Credit/Debit/ATM Card"
|
|
color="primary"
|
|
/>
|
|
<VRadio
|
|
value="cod-cheque"
|
|
label="COD/Cheque"
|
|
color="primary"
|
|
/>
|
|
</VRadioGroup>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<VRow v-show="selectedPaymentMethod === 'credit-debit-atm-card'">
|
|
<!-- 👉 Card Number -->
|
|
<VCol cols="12">
|
|
<VTextField
|
|
v-model="cardNumber"
|
|
label="Card Number"
|
|
placeholder="1234 1234 1234 1234"
|
|
type="number"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Name -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
v-model="cardName"
|
|
label="Name"
|
|
placeholder="John Doe"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Expiry date -->
|
|
<VCol
|
|
cols="6"
|
|
md="3"
|
|
>
|
|
<VTextField
|
|
v-model="cardExpiryDate"
|
|
label="Expiry Date"
|
|
placeholder="MM/YY"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Cvv code -->
|
|
<VCol
|
|
cols="6"
|
|
md="3"
|
|
>
|
|
<VTextField
|
|
v-model="cardCvv"
|
|
type="number"
|
|
label="CVV Code"
|
|
placeholder="123"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Future Billing switch -->
|
|
<VCol cols="12">
|
|
<VSwitch
|
|
v-model="isCardDetailSaveBilling"
|
|
density="compact"
|
|
label="Save card for future billing?"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Payment method action button -->
|
|
<VCol
|
|
cols="12"
|
|
class="d-flex flex-wrap gap-4"
|
|
>
|
|
<VBtn type="submit">
|
|
Save changes
|
|
</VBtn>
|
|
<VBtn
|
|
color="secondary"
|
|
variant="outlined"
|
|
@click="resetPaymentForm"
|
|
>
|
|
Reset
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
|
|
<p
|
|
v-show="selectedPaymentMethod === 'cod-cheque'"
|
|
class="text-base"
|
|
>
|
|
Cash on delivery is a mode of payment where you make the payment after the goods/services are received.
|
|
</p>
|
|
<p
|
|
v-show="selectedPaymentMethod === 'cod-cheque'"
|
|
class="text-base"
|
|
>
|
|
You can pay cash or make the payment via debit/credit card directly to the delivery person.
|
|
</p>
|
|
</VCol>
|
|
</VRow>
|
|
</VCol>
|
|
|
|
<!-- 👉 Saved Cards -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<h6 class="text-h6 mb-6">
|
|
My Cards
|
|
</h6>
|
|
|
|
<div class="d-flex flex-column gap-y-4">
|
|
<VCard
|
|
v-for="card in creditCards"
|
|
:key="card.name"
|
|
color="rgba(var(--v-theme-on-surface), var(--v-hover-opacity))"
|
|
flat
|
|
>
|
|
<VCardText class="d-flex flex-sm-row flex-column">
|
|
<div class="text-no-wrap">
|
|
<img :src="card.image">
|
|
<div class="d-flex align-center gap-x-4">
|
|
<h6 class="text-h6 my-2">
|
|
{{ card.name }}
|
|
</h6>
|
|
<VChip
|
|
v-if="card.isPrimary"
|
|
color="primary"
|
|
size="small"
|
|
>
|
|
Primary
|
|
</VChip>
|
|
</div>
|
|
<div>**** **** **** {{ card.number.substring(card.number.length - 4) }}</div>
|
|
</div>
|
|
|
|
<VSpacer />
|
|
|
|
<div class="d-flex flex-column text-sm-end">
|
|
<div class="d-flex flex-wrap gap-4 order-sm-0 order-1">
|
|
<VBtn
|
|
variant="outlined"
|
|
@click="openEditCardDialog(card)"
|
|
>
|
|
Edit
|
|
</VBtn>
|
|
<VBtn
|
|
color="error"
|
|
variant="outlined"
|
|
>
|
|
Delete
|
|
</VBtn>
|
|
</div>
|
|
<div class="my-4 text-body-2 order-sm-1 order-0">
|
|
Card expires at {{ card.expiry }}
|
|
</div>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</div>
|
|
|
|
<!-- 👉 Add Edit Card Dialog -->
|
|
<CardAddEditDialog
|
|
v-model:isDialogVisible="isCardEditDialogVisible"
|
|
:card-details="currentCardDetails"
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
|
|
<!-- 👉 Billing Address -->
|
|
<VCol cols="12">
|
|
<VCard title="Billing Address">
|
|
<VCardText>
|
|
<VForm @submit.prevent="() => {}">
|
|
<VRow>
|
|
<!-- 👉 Company name -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
label="Company Name"
|
|
placeholder="Themeselection"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Billing Email -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
label="Billing Email"
|
|
placeholder="themeselection@email.com"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Tax ID -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
label="Tax ID"
|
|
placeholder="123 123 1233"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Vat Number -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
label="VAT Number"
|
|
placeholder="121212"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Mobile -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
dirty
|
|
label="Phone Number"
|
|
type="number"
|
|
prefix="US (+1)"
|
|
placeholder="+1 123 456 7890"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Country -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VSelect
|
|
label="Country"
|
|
:items="countryList"
|
|
placeholder="Select Country"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Billing Address -->
|
|
<VCol cols="12">
|
|
<VTextField
|
|
label="Billing Address"
|
|
placeholder="1234 Main St"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 State -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
label="State"
|
|
placeholder="New York"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Zip Code -->
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VTextField
|
|
label="Zip Code"
|
|
type="number"
|
|
placeholder="100006"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 Actions Button -->
|
|
<VCol
|
|
cols="12"
|
|
class="d-flex flex-wrap gap-4"
|
|
>
|
|
<VBtn type="submit">
|
|
Save changes
|
|
</VBtn>
|
|
<VBtn
|
|
type="reset"
|
|
color="secondary"
|
|
variant="outlined"
|
|
>
|
|
Reset
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
|
|
<!-- 👉 Billing History -->
|
|
<VCol cols="12">
|
|
<BillingHistoryTable />
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.pricing-dialog {
|
|
.pricing-title {
|
|
font-size: 1.5rem !important;
|
|
}
|
|
|
|
.v-card {
|
|
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
</style>
|