mirror of
https://github.com/crater-invoice/crater.git
synced 2025-12-17 02:42:54 -05:00
v6 update
This commit is contained in:
Mohit Panjwani
282
resources/scripts/customer/views/settings/AddressInformation.vue
Normal file
282
resources/scripts/customer/views/settings/AddressInformation.vue
Normal file
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<form class="relative h-full mt-4" @submit.prevent="UpdateCustomerAddress">
|
||||
<BaseCard>
|
||||
<div class="mb-6">
|
||||
<h6 class="font-bold text-left">
|
||||
{{ $t('settings.menu_title.address_information') }}
|
||||
</h6>
|
||||
<p
|
||||
class="mt-2 text-sm leading-snug text-left text-gray-500"
|
||||
style="max-width: 680px"
|
||||
>
|
||||
{{ $t('settings.address_information.section_description') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Billing Address -->
|
||||
|
||||
<div class="grid grid-cols-5 gap-4 mb-8">
|
||||
<h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
|
||||
{{ $t('customers.billing_address') }}
|
||||
</h6>
|
||||
|
||||
<div
|
||||
class="grid col-span-5 lg:col-span-4 gap-y-6 gap-x-4 md:grid-cols-6"
|
||||
>
|
||||
<BaseInputGroup
|
||||
:label="$t('customers.name')"
|
||||
class="w-full md:col-span-3"
|
||||
>
|
||||
<BaseInput
|
||||
v-model.trim="userStore.userForm.billing.name"
|
||||
type="text"
|
||||
class="w-full"
|
||||
name="address_name"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('customers.country')"
|
||||
class="md:col-span-3"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="userStore.userForm.billing.country_id"
|
||||
value-prop="id"
|
||||
label="name"
|
||||
track-by="name"
|
||||
resolve-on-load
|
||||
searchable
|
||||
:options="globalStore.countries"
|
||||
:placeholder="$t('general.select_country')"
|
||||
class="w-full"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup :label="$t('customers.state')" class="md:col-span-3">
|
||||
<BaseInput
|
||||
v-model="userStore.userForm.billing.state"
|
||||
name="billing.state"
|
||||
type="text"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup :label="$t('customers.city')" class="md:col-span-3">
|
||||
<BaseInput
|
||||
v-model="userStore.userForm.billing.city"
|
||||
name="billing.city"
|
||||
type="text"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('customers.address')"
|
||||
class="md:col-span-3"
|
||||
>
|
||||
<BaseTextarea
|
||||
v-model.trim="userStore.userForm.billing.address_street_1"
|
||||
:placeholder="$t('general.street_1')"
|
||||
type="text"
|
||||
name="billing_street1"
|
||||
:container-class="`mt-3`"
|
||||
/>
|
||||
|
||||
<BaseTextarea
|
||||
v-model.trim="userStore.userForm.billing.address_street_2"
|
||||
:placeholder="$t('general.street_2')"
|
||||
type="text"
|
||||
class="mt-3"
|
||||
name="billing_street2"
|
||||
:container-class="`mt-3`"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<div class="md:col-span-3">
|
||||
<BaseInputGroup :label="$t('customers.phone')" class="text-left">
|
||||
<BaseInput
|
||||
v-model.trim="userStore.userForm.billing.phone"
|
||||
type="text"
|
||||
name="phone"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('customers.zip_code')"
|
||||
class="mt-2 text-left"
|
||||
>
|
||||
<BaseInput
|
||||
v-model.trim="userStore.userForm.billing.zip"
|
||||
type="text"
|
||||
name="zip"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BaseDivider class="mb-5 md:mb-8" />
|
||||
|
||||
<!-- Billing Address Copy Button -->
|
||||
<div class="flex items-center justify-start mb-6 md:justify-end md:mb-0">
|
||||
<div class="p-1">
|
||||
<BaseButton
|
||||
ref="sameAddress"
|
||||
type="button"
|
||||
@click="userStore.copyAddress(true)"
|
||||
>
|
||||
<template #left="slotProps">
|
||||
<BaseIcon name="DocumentDuplicateIcon" :class="slotProps.class" />
|
||||
</template>
|
||||
{{ $t('customers.copy_billing_address') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shipping Address -->
|
||||
|
||||
<div class="grid grid-cols-5 gap-4 mb-8">
|
||||
<h6 class="col-span-5 text-lg font-semibold text-left lg:col-span-1">
|
||||
{{ $t('customers.shipping_address') }}
|
||||
</h6>
|
||||
|
||||
<div
|
||||
v-if="userStore.userForm.shipping"
|
||||
class="grid col-span-5 lg:col-span-4 gap-y-6 gap-x-4 md:grid-cols-6"
|
||||
>
|
||||
<BaseInputGroup :label="$t('customers.name')" class="md:col-span-3">
|
||||
<BaseInput
|
||||
v-model.trim="userStore.userForm.shipping.name"
|
||||
type="text"
|
||||
name="address_name"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('customers.country')"
|
||||
class="md:col-span-3"
|
||||
>
|
||||
<BaseMultiselect
|
||||
v-model="userStore.userForm.shipping.country_id"
|
||||
value-prop="id"
|
||||
label="name"
|
||||
track-by="name"
|
||||
resolve-on-load
|
||||
searchable
|
||||
:options="globalStore.countries"
|
||||
:placeholder="$t('general.select_country')"
|
||||
class="w-full"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup :label="$t('customers.state')" class="md:col-span-3">
|
||||
<BaseInput
|
||||
v-model="userStore.userForm.shipping.state"
|
||||
name="shipping.state"
|
||||
type="text"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup :label="$t('customers.city')" class="md:col-span-3">
|
||||
<BaseInput
|
||||
v-model="userStore.userForm.shipping.city"
|
||||
name="shipping.city"
|
||||
type="text"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('customers.address')"
|
||||
class="md:col-span-3"
|
||||
>
|
||||
<BaseTextarea
|
||||
v-model.trim="userStore.userForm.shipping.address_street_1"
|
||||
type="text"
|
||||
:placeholder="$t('general.street_1')"
|
||||
name="shipping_street1"
|
||||
/>
|
||||
|
||||
<BaseTextarea
|
||||
v-model.trim="userStore.userForm.shipping.address_street_2"
|
||||
type="text"
|
||||
:placeholder="$t('general.street_2')"
|
||||
name="shipping_street2"
|
||||
class="mt-3"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<div class="md:col-span-3">
|
||||
<BaseInputGroup :label="$t('customers.phone')" class="text-left">
|
||||
<BaseInput
|
||||
v-model.trim="userStore.userForm.shipping.phone"
|
||||
type="text"
|
||||
name="phone"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
|
||||
<BaseInputGroup
|
||||
:label="$t('customers.zip_code')"
|
||||
class="mt-2 text-left"
|
||||
>
|
||||
<BaseInput
|
||||
v-model.trim="userStore.userForm.shipping.zip"
|
||||
type="text"
|
||||
name="zip"
|
||||
/>
|
||||
</BaseInputGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end">
|
||||
<BaseButton :loading="isSaving" :disabled="isSaving">
|
||||
<template #left="slotProps">
|
||||
<BaseIcon
|
||||
v-if="!isSaving"
|
||||
name="SaveIcon"
|
||||
:class="slotProps.class"
|
||||
/>
|
||||
</template>
|
||||
{{ $t('general.save') }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</BaseCard>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useUserStore } from '@/scripts/customer/stores/user'
|
||||
import { useGlobalStore } from '@/scripts/customer/stores/global'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { ref } from 'vue'
|
||||
|
||||
//store
|
||||
|
||||
const userStore = useUserStore()
|
||||
const route = useRoute()
|
||||
const { tm, t } = useI18n()
|
||||
const globalStore = useGlobalStore()
|
||||
|
||||
// local state
|
||||
let isSaving = ref(false)
|
||||
|
||||
// created
|
||||
|
||||
globalStore.fetchCountries()
|
||||
|
||||
// methods
|
||||
|
||||
function UpdateCustomerAddress() {
|
||||
isSaving.value = true
|
||||
let data = userStore.userForm
|
||||
userStore
|
||||
.updateCurrentUser({
|
||||
data,
|
||||
message: tm('customers.address_updated_message'),
|
||||
})
|
||||
.then((res) => {
|
||||
isSaving.value = false
|
||||
})
|
||||
.catch((err) => {
|
||||
isSaving.value = false
|
||||
})
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user