first commit
This commit is contained in:
Inshal
130
resources/js/views/apps/ecommerce/settings/SettingsCheckout.vue
Normal file
130
resources/js/views/apps/ecommerce/settings/SettingsCheckout.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<script setup>
|
||||
const contactMethod = ref('Phone number')
|
||||
const fullName = ref('Only require last name')
|
||||
const companyName = ref('Don\'t include')
|
||||
const addressLine = ref('Optional')
|
||||
const shippingAddress = ref('Optional')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard
|
||||
title="Customer contact method"
|
||||
subtitle="Select what contact method customers use to check out."
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<VRadioGroup
|
||||
v-model="contactMethod"
|
||||
class="mb-4"
|
||||
>
|
||||
<VRadio
|
||||
label="Phone number"
|
||||
value="Phone number"
|
||||
/>
|
||||
<VRadio
|
||||
label="Email"
|
||||
value="Email"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VAlert
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
icon="ri-information-line"
|
||||
>
|
||||
<VAlertTitle class="mb-0">
|
||||
To send SMS updates, you need to install an SMS App.
|
||||
</VAlertTitle>
|
||||
</VAlert>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard
|
||||
title="Customer information"
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<VRadioGroup
|
||||
v-model="fullName"
|
||||
label="Full name"
|
||||
class="mb-4"
|
||||
>
|
||||
<VRadio
|
||||
value="Only require last name"
|
||||
label="Only require last name"
|
||||
/>
|
||||
<VRadio
|
||||
value="Require first and last name"
|
||||
label="Require first and last name"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VRadioGroup
|
||||
v-model="companyName"
|
||||
label="Company name"
|
||||
class="mb-4"
|
||||
>
|
||||
<VRadio
|
||||
value="Don't include"
|
||||
label="Don't include"
|
||||
/>
|
||||
<VRadio
|
||||
value="Optional"
|
||||
label="Optional"
|
||||
/>
|
||||
<VRadio
|
||||
value="Required"
|
||||
label="Required"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VRadioGroup
|
||||
v-model="addressLine"
|
||||
label="Address line 2 (apartment, unit, etc.)"
|
||||
class="mb-4"
|
||||
>
|
||||
<VRadio
|
||||
value="Don't include"
|
||||
label="Don't include"
|
||||
/>
|
||||
<VRadio
|
||||
value="Optional"
|
||||
label="Optional"
|
||||
/>
|
||||
<VRadio
|
||||
value="Required"
|
||||
label="Required"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
|
||||
<VRadioGroup
|
||||
v-model="shippingAddress"
|
||||
label="Shipping address phone number"
|
||||
class="mb-4"
|
||||
>
|
||||
<VRadio
|
||||
value="Don't include"
|
||||
label="Don't include"
|
||||
/>
|
||||
<VRadio
|
||||
value="Optional"
|
||||
label="Optional"
|
||||
/>
|
||||
<VRadio
|
||||
value="Required"
|
||||
label="Required"
|
||||
/>
|
||||
</VRadioGroup>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex justify-end gap-x-4">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
<VBtn>Save Changes</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
119
resources/js/views/apps/ecommerce/settings/SettingsLocations.vue
Normal file
119
resources/js/views/apps/ecommerce/settings/SettingsLocations.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<div>
|
||||
<VCard
|
||||
title="Location Name"
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<VTextField
|
||||
label="Location Name"
|
||||
placeholder="Empire Hub"
|
||||
/>
|
||||
<div class="my-4">
|
||||
<VCheckbox label="Fulfil online orders from this location" />
|
||||
</div>
|
||||
<VAlert
|
||||
color="info"
|
||||
variant="tonal"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="28"
|
||||
icon="ri-information-line"
|
||||
variant="elevated"
|
||||
color="info"
|
||||
rounded
|
||||
/>
|
||||
</template>
|
||||
<VAlertTitle class="mb-0">
|
||||
This is your default location. To change whether you fulfill online orders from this location, select another default location first.
|
||||
</VAlertTitle>
|
||||
</VAlert>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard title="Address">
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
label="Country/religion"
|
||||
placeholder="Select Country"
|
||||
:items="['United States', 'UK', 'Canada']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
label="Address"
|
||||
placeholder="123 , New Street"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
label="Apartment, suite, etc."
|
||||
placeholder="Empire Heights"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
label="Phone"
|
||||
placeholder="+1 (234) 456-7890"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
label="City"
|
||||
placeholder="New York"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
label="State"
|
||||
placeholder="NY"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
label="PIN code"
|
||||
placeholder="123897"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex justify-end gap-x-4 mt-6">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
<VBtn>Save Changes</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,192 @@
|
||||
<script setup>
|
||||
const customerNotifications = ref([
|
||||
{
|
||||
type: 'New customer sign up',
|
||||
email: true,
|
||||
app: false,
|
||||
},
|
||||
{
|
||||
type: 'Customer account password reset',
|
||||
email: false,
|
||||
app: true,
|
||||
},
|
||||
{
|
||||
type: 'Customer account invite',
|
||||
email: false,
|
||||
app: false,
|
||||
},
|
||||
])
|
||||
|
||||
const shippingNotifications = ref([
|
||||
{
|
||||
type: 'Picked up',
|
||||
email: true,
|
||||
app: false,
|
||||
},
|
||||
{
|
||||
type: 'Shipping update ',
|
||||
email: false,
|
||||
app: true,
|
||||
},
|
||||
{
|
||||
type: 'Delivered',
|
||||
email: false,
|
||||
app: false,
|
||||
},
|
||||
])
|
||||
|
||||
const ordersNotification = ref([
|
||||
{
|
||||
type: 'Order purchase',
|
||||
email: true,
|
||||
app: false,
|
||||
},
|
||||
{
|
||||
type: 'Order cancelled',
|
||||
email: false,
|
||||
app: true,
|
||||
},
|
||||
{
|
||||
type: 'Order refund request',
|
||||
email: false,
|
||||
app: false,
|
||||
},
|
||||
{
|
||||
type: 'Order confirmation',
|
||||
email: false,
|
||||
app: true,
|
||||
},
|
||||
{
|
||||
type: 'Payment error',
|
||||
email: false,
|
||||
app: true,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="mb-4">
|
||||
<VCardText>
|
||||
<h5 class="text-h5 mb-4">
|
||||
Customer
|
||||
</h5>
|
||||
<VTable class="text-no-wrap text-high-emphasis border rounded mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
TYPE
|
||||
</th>
|
||||
<th scope="col">
|
||||
EMAIL
|
||||
</th>
|
||||
<th scope="col">
|
||||
APP
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="notification in customerNotifications"
|
||||
:key="notification.type"
|
||||
>
|
||||
<td width="400px">
|
||||
{{ notification.type }}
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox v-model="notification.email" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<VCheckbox v-model="notification.app" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
|
||||
<h5 class="text-h5 mb-4">
|
||||
Orders
|
||||
</h5>
|
||||
<VTable class="border rounded text-high-emphasis text-no-wrap mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
TYPE
|
||||
</th>
|
||||
<th scope="col">
|
||||
EMAIL
|
||||
</th>
|
||||
<th scope="col">
|
||||
APP
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="notification in ordersNotification"
|
||||
:key="notification.type"
|
||||
>
|
||||
<td width="400px">
|
||||
{{ notification.type }}
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox v-model="notification.email" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<VCheckbox v-model="notification.app" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
|
||||
<h5 class="text-h5 mb-4">
|
||||
Shipping
|
||||
</h5>
|
||||
<VTable class="border rounded text-high-emphasis text-no-wrap mb-6">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
TYPE
|
||||
</th>
|
||||
<th scope="col">
|
||||
EMAIL
|
||||
</th>
|
||||
<th scope="col">
|
||||
APP
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="notification in shippingNotifications"
|
||||
:key="notification.type"
|
||||
>
|
||||
<td width="400px">
|
||||
{{ notification.type }}
|
||||
</td>
|
||||
<td>
|
||||
<VCheckbox v-model="notification.email" />
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<VCheckbox v-model="notification.app" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex justify-end gap-x-4">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
<VBtn>Save Changes</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
172
resources/js/views/apps/ecommerce/settings/SettingsPayment.vue
Normal file
172
resources/js/views/apps/ecommerce/settings/SettingsPayment.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import paypal from '@images/cards/paypal-primary.png'
|
||||
|
||||
const isAddPaymentMethodsDialogVisible = ref(false)
|
||||
const isPaymentProvidersDialogVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 👉 Payment Providers -->
|
||||
<VCard
|
||||
class="mb-6"
|
||||
title="Payment providers"
|
||||
>
|
||||
<VCardText>
|
||||
<p>
|
||||
Providers that enable you to accept payment methods at a rate set by the third-party. An additional fee will apply to new orders once you select a plan.
|
||||
</p>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
@click="isPaymentProvidersDialogVisible = !isPaymentProvidersDialogVisible"
|
||||
>
|
||||
Choose a provider
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Supported Payment Methods -->
|
||||
<VCard
|
||||
title="Supported payment methods"
|
||||
subtitle="Payment methods that are available with one of Vuexy's approved payment providers."
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<h6 class="text-h6 mb-5">
|
||||
Default
|
||||
</h6>
|
||||
<div class="rounded bg-var-theme-background pa-5 mb-6">
|
||||
<div class="d-flex justify-space-between align-center mb-6">
|
||||
<VAvatar
|
||||
variant="elevated"
|
||||
color="#ffffff"
|
||||
rounded
|
||||
class="px-1"
|
||||
>
|
||||
<VImg
|
||||
:src="paypal"
|
||||
height="21"
|
||||
width="21"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<VBtn variant="text">
|
||||
Activate PayPal
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<div class="d-flex justify-space-between flex-wrap mt-6 gap-x-4">
|
||||
<div>
|
||||
<div class="text-body-2 mb-2">
|
||||
Provider
|
||||
</div>
|
||||
<h6 class="text-h6">
|
||||
PayPal
|
||||
</h6>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-body-2 mb-2">
|
||||
Status
|
||||
</div>
|
||||
<VChip
|
||||
color="warning"
|
||||
size="small"
|
||||
>
|
||||
Inactive
|
||||
</VChip>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-body-2 mb-2">
|
||||
Transaction Fee
|
||||
</div>
|
||||
<h6 class="text-h6">
|
||||
2.99%
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
@click="isAddPaymentMethodsDialogVisible = !isAddPaymentMethodsDialogVisible"
|
||||
>
|
||||
Add Payment Method
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<!-- 👉 Manual Payment Methods -->
|
||||
<VCard
|
||||
title="Manual payment methods"
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<p>Payments that are made outside your online store. When a customer selects a manual payment method such as cash on delivery, you'll need to approve their order before it can be fulfilled.</p>
|
||||
|
||||
<VBtnGroup
|
||||
v-show="$vuetify.display.smAndUp"
|
||||
divided
|
||||
density="compact"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
>
|
||||
<VBtn>
|
||||
Add Manual Payment Methods
|
||||
</VBtn>
|
||||
<VBtn>
|
||||
<VIcon
|
||||
size="20"
|
||||
icon="ri-arrow-down-s-line"
|
||||
/>
|
||||
<VMenu activator="parent">
|
||||
<VList>
|
||||
<VListItem
|
||||
v-for="(item, index) in ['Create custom payment method', 'Bank Deposit', 'Money Order', 'Cash on Delivery(COD)']"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>
|
||||
<VListItemTitle>{{ item }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</VBtn>
|
||||
</VBtnGroup>
|
||||
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
class="d-block d-sm-none"
|
||||
>
|
||||
Add Manual Payment Methods
|
||||
<VMenu activator="parent">
|
||||
<VList>
|
||||
<VListItem
|
||||
v-for="(item, index) in ['Create custom payment method', 'Bank Deposit', 'Money Order', 'Cash on Delivery(COD)']"
|
||||
:key="index"
|
||||
:value="index"
|
||||
>
|
||||
<VListItemTitle>{{ item }}</VListItemTitle>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</VMenu>
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex justify-end gap-x-4">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
<VBtn>Save Changes</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AddPaymentMethodDialog v-model:is-dialog-visible="isAddPaymentMethodsDialogVisible" />
|
||||
<PaymentProvidersDialog v-model:is-dialog-visible="isPaymentProvidersDialogVisible" />
|
||||
</template>
|
||||
@@ -0,0 +1,193 @@
|
||||
<script setup>
|
||||
import avatar1 from '@images/avatars/avatar-1.png'
|
||||
import americaFlag from '@images/icons/countries/us.png'
|
||||
|
||||
const domesticTableData = [
|
||||
{
|
||||
rate: 'Weight',
|
||||
condition: '5Kg-10Kg',
|
||||
price: '$9',
|
||||
},
|
||||
{
|
||||
rate: 'VAT',
|
||||
condition: '12%',
|
||||
price: '$25',
|
||||
},
|
||||
{
|
||||
rate: 'Duty',
|
||||
condition: '-',
|
||||
price: '-',
|
||||
},
|
||||
]
|
||||
|
||||
const InternationalTableData = [
|
||||
{
|
||||
rate: 'Weight',
|
||||
condition: '5Kg-10Kg',
|
||||
price: '$9',
|
||||
},
|
||||
{
|
||||
rate: 'VAT',
|
||||
condition: '12%',
|
||||
price: '$25',
|
||||
},
|
||||
{
|
||||
rate: 'Duty',
|
||||
condition: 'Japan',
|
||||
price: '$49',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="mb-6">
|
||||
<VCardItem
|
||||
title="Shipping Zone"
|
||||
subtitle="Choose where you ship and how much you charge for shipping at checkout."
|
||||
>
|
||||
<template #append>
|
||||
<VBtn variant="text">
|
||||
Create Zone
|
||||
</VBtn>
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<div class="mb-6">
|
||||
<div class="d-flex flex-wrap align-center mb-4">
|
||||
<VAvatar
|
||||
:image="avatar1"
|
||||
size="34"
|
||||
class="me-4"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
Domestic
|
||||
</h6>
|
||||
<p class="text-body-2 mb-0">
|
||||
United state of America
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div>
|
||||
<IconBtn size="large">
|
||||
<VIcon icon="ri-pencil-line" />
|
||||
</IconBtn>
|
||||
<IconBtn size="large">
|
||||
<VIcon icon="ri-delete-bin-7-line" />
|
||||
</IconBtn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VTable class="border rounded mb-4">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>RATE NAME</th>
|
||||
<th>CONDITION</th>
|
||||
<th>PRICE</th>
|
||||
<th>ACTIONS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(data, index) in domesticTableData"
|
||||
:key="index"
|
||||
>
|
||||
<td>{{ data.rate }}</td>
|
||||
<td>{{ data.condition }}</td>
|
||||
<td>{{ data.price }}</td>
|
||||
<td style="inline-size: 2rem;">
|
||||
<IconBtn>
|
||||
<VIcon icon="ri-more-2-line" />
|
||||
</IconBtn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
size="small"
|
||||
>
|
||||
Add rate
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="d-flex flex-wrap align-center mb-4">
|
||||
<VAvatar
|
||||
:image="americaFlag"
|
||||
size="34"
|
||||
class="me-4"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
International
|
||||
</h6>
|
||||
<p class="text-body-2 mb-0">
|
||||
United state of America
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div>
|
||||
<IconBtn size="large">
|
||||
<VIcon icon="ri-pencil-line" />
|
||||
</IconBtn>
|
||||
<IconBtn size="large">
|
||||
<VIcon icon="ri-delete-bin-7-line" />
|
||||
</IconBtn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VTable class="border rounded mb-4">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>RATE NAME</th>
|
||||
<th>CONDITION</th>
|
||||
<th>PRICE</th>
|
||||
<th>ACTIONS</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="(data, index) in InternationalTableData"
|
||||
:key="index"
|
||||
>
|
||||
<td>{{ data.rate }}</td>
|
||||
<td>{{ data.condition }}</td>
|
||||
<td>{{ data.price }}</td>
|
||||
<td style="inline-size: 2rem;">
|
||||
<IconBtn>
|
||||
<VIcon icon="ri-more-2-line" />
|
||||
</IconBtn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
|
||||
<VBtn
|
||||
variant="outlined"
|
||||
size="small"
|
||||
>
|
||||
Add rate
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex justify-end gap-x-4">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
<VBtn>Save Changes</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<VCard
|
||||
title="Profile"
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Store name"
|
||||
placeholder="ABCD"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Phone"
|
||||
placeholder="+(123) 456-7890"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Store contact email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Sender email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol>
|
||||
<VAlert
|
||||
color="warning"
|
||||
variant="tonal"
|
||||
icon="ri-notification-3-line"
|
||||
>
|
||||
<VAlertTitle class="mb-0">
|
||||
Confirm that you have access to johndoe@gmail.com in sender email settings.
|
||||
</VAlertTitle>
|
||||
</VAlert>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard
|
||||
title="Billing Information"
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Legal business name"
|
||||
placeholder="Themeselection"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
label="Country*"
|
||||
:items="['United States', 'Canada', 'UK']"
|
||||
placeholder="Canada"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
placeholder="126, New Street"
|
||||
label="Address"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Apartment,suit, etc."
|
||||
placeholder="Empire Heights"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
label="City"
|
||||
placeholder="New York"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
label="State"
|
||||
placeholder="NY"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
label="PIN Code"
|
||||
placeholder="111011"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard
|
||||
title="Time zone and units of measurement"
|
||||
subtitle="Used to calculate product prices, shipping weights, and order times."
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
label="Time zone"
|
||||
:items="['(UTC-12:00) International Date Line West', '(UTC-11:00) Coordinated Universal Time-11', '(UTC-09:00) Alaska', '(UTC-08:00) Baja California']"
|
||||
placeholder="(UTC-12:00) International Date Line West"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
label="Unit system"
|
||||
:items="['Metric System', 'Imperial', 'International System']"
|
||||
placeholder="Metric System"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
label="Default weight unit"
|
||||
placeholder="Kilogram"
|
||||
:items="['Kilogram', 'Pounds', 'Gram']"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard
|
||||
title="Store currency"
|
||||
subtitle="The currency your products are sold in."
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<VSelect
|
||||
label="Store currency"
|
||||
:items="['USD', 'INR', 'Euro', 'Pound']"
|
||||
placeholder="USD"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<VCard
|
||||
title="Order id format"
|
||||
subtitle="Shown on the Orders page, customer pages, and customer order notifications to identify orders."
|
||||
class="mb-6"
|
||||
>
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Prefix"
|
||||
prefix="#"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
label="Suffix"
|
||||
suffix="$"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<div class="mt-2">
|
||||
Your order ID will appear as #1001, #1002, #1003 ...
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex justify-end gap-x-4">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
>
|
||||
Discard
|
||||
</VBtn>
|
||||
<VBtn>Save Changes</VBtn>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user