mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-16 17:54:06 +00:00
71388ec6a5
Now that the legacy v1 frontend (commit 064bdf53) is gone, the v2 directory is the only frontend and the v2 suffix is just noise. Renames resources/scripts-v2 to resources/scripts via git mv (so git records the move as renames, preserving blame and log --follow), then bulk-rewrites the 152 files that imported via @v2/... to use @/scripts/... instead. The existing @ alias (resources/) covers the new path with no extra config needed.
Drops the now-unused @v2 alias from vite.config.js and points the laravel-vite-plugin entry at resources/scripts/main.ts. Updates the only blade reference (resources/views/app.blade.php) to match. The package.json test script (eslint ./resources/scripts) automatically targets the right place after the rename without any edit.
Verified: npm run build exits clean and the Vite warning lines now reference resources/scripts/plugins/i18n.ts, confirming every import resolved through the new path. git log --follow on any moved file walks back through its scripts-v2 history.
656 lines
22 KiB
Vue
656 lines
22 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useI18n } from 'vue-i18n'
|
|
import {
|
|
required,
|
|
minLength,
|
|
maxLength,
|
|
email,
|
|
url,
|
|
helpers,
|
|
requiredIf,
|
|
sameAs,
|
|
} from '@vuelidate/validators'
|
|
import useVuelidate from '@vuelidate/core'
|
|
import { useModalStore } from '../../../../stores/modal.store'
|
|
import { useCustomerStore } from '../store'
|
|
import { useCompanyStore } from '../../../../stores/company.store'
|
|
import { useGlobalStore } from '../../../../stores/global.store'
|
|
import { useNotificationStore } from '../../../../stores/notification.store'
|
|
import CopyInputField from '@/scripts/features/company/customers/components/CopyInputField.vue'
|
|
|
|
// These stores are needed for auto-selecting customer after creation
|
|
import { useEstimateStore } from '@/scripts/features/company/estimates/store'
|
|
import { useInvoiceStore } from '@/scripts/features/company/invoices/store'
|
|
import { useRecurringInvoiceStore } from '@/scripts/features/company/recurring-invoices/store'
|
|
|
|
const recurringInvoiceStore = useRecurringInvoiceStore()
|
|
const modalStore = useModalStore()
|
|
const estimateStore = useEstimateStore()
|
|
const customerStore = useCustomerStore()
|
|
const companyStore = useCompanyStore()
|
|
const globalStore = useGlobalStore()
|
|
const invoiceStore = useInvoiceStore()
|
|
const notificationStore = useNotificationStore()
|
|
|
|
const isFetchingInitialData = ref<boolean>(false)
|
|
|
|
const { t } = useI18n()
|
|
const route = useRoute()
|
|
const isEdit = ref<boolean>(false)
|
|
const isLoading = ref<boolean>(false)
|
|
const isShowPassword = ref<boolean>(false)
|
|
const isShowConfirmPassword = ref<boolean>(false)
|
|
|
|
const modalActive = computed<boolean>(
|
|
() => modalStore.active && modalStore.componentName === 'CustomerModal'
|
|
)
|
|
|
|
const rules = computed(() => ({
|
|
name: {
|
|
required: helpers.withMessage(t('validation.required'), required),
|
|
minLength: helpers.withMessage(
|
|
t('validation.name_min_length', { count: 3 }),
|
|
minLength(3)
|
|
),
|
|
},
|
|
currency_id: {
|
|
required: helpers.withMessage(t('validation.required'), required),
|
|
},
|
|
password: {
|
|
required: helpers.withMessage(
|
|
t('validation.required'),
|
|
requiredIf(
|
|
customerStore.currentCustomer.enable_portal === true &&
|
|
!customerStore.currentCustomer.password_added
|
|
)
|
|
),
|
|
minLength: helpers.withMessage(
|
|
t('validation.password_min_length', { count: 8 }),
|
|
minLength(8)
|
|
),
|
|
},
|
|
confirm_password: {
|
|
sameAsPassword: helpers.withMessage(
|
|
t('validation.password_incorrect'),
|
|
sameAs(customerStore.currentCustomer.password)
|
|
),
|
|
},
|
|
email: {
|
|
required: helpers.withMessage(
|
|
t('validation.required'),
|
|
requiredIf(customerStore.currentCustomer.enable_portal === true)
|
|
),
|
|
email: helpers.withMessage(t('validation.email_incorrect'), email),
|
|
},
|
|
prefix: {
|
|
minLength: helpers.withMessage(
|
|
t('validation.name_min_length', { count: 3 }),
|
|
minLength(3)
|
|
),
|
|
},
|
|
website: {
|
|
url: helpers.withMessage(t('validation.invalid_url'), url),
|
|
},
|
|
billing: {
|
|
address_street_1: {
|
|
maxLength: helpers.withMessage(
|
|
t('validation.address_maxlength', { count: 255 }),
|
|
maxLength(255)
|
|
),
|
|
},
|
|
address_street_2: {
|
|
maxLength: helpers.withMessage(
|
|
t('validation.address_maxlength', { count: 255 }),
|
|
maxLength(255)
|
|
),
|
|
},
|
|
},
|
|
shipping: {
|
|
address_street_1: {
|
|
maxLength: helpers.withMessage(
|
|
t('validation.address_maxlength', { count: 255 }),
|
|
maxLength(255)
|
|
),
|
|
},
|
|
address_street_2: {
|
|
maxLength: helpers.withMessage(
|
|
t('validation.address_maxlength', { count: 255 }),
|
|
maxLength(255)
|
|
),
|
|
},
|
|
},
|
|
}))
|
|
|
|
const v$ = useVuelidate(
|
|
rules,
|
|
computed(() => customerStore.currentCustomer)
|
|
)
|
|
|
|
const getCustomerPortalUrl = computed<string>(() => {
|
|
return `${window.location.origin}/${companyStore.selectedCompany?.slug}/customer/login`
|
|
})
|
|
|
|
function copyAddress(): void {
|
|
customerStore.copyAddress()
|
|
}
|
|
|
|
async function setInitialData(): Promise<void> {
|
|
await Promise.all([
|
|
globalStore.fetchCurrencies(),
|
|
globalStore.fetchCountries(),
|
|
])
|
|
|
|
if (!customerStore.isEdit) {
|
|
customerStore.currentCustomer.currency_id =
|
|
companyStore.selectedCompanyCurrency?.id ?? null
|
|
}
|
|
}
|
|
|
|
async function submitCustomerData(): Promise<void> {
|
|
v$.value.$touch()
|
|
|
|
if (v$.value.$invalid && customerStore.currentCustomer.email === '') {
|
|
notificationStore.showNotification({
|
|
type: 'error',
|
|
message: t('settings.notification.please_enter_email'),
|
|
})
|
|
}
|
|
|
|
if (v$.value.$invalid) {
|
|
return
|
|
}
|
|
|
|
isLoading.value = true
|
|
|
|
const data = {
|
|
...customerStore.currentCustomer,
|
|
}
|
|
|
|
try {
|
|
const action = customerStore.isEdit
|
|
? customerStore.updateCustomer
|
|
: customerStore.addCustomer
|
|
const response = await action(data)
|
|
|
|
if (response.data) {
|
|
isLoading.value = false
|
|
// Automatically select newly created customer
|
|
if (route.name === 'invoices.create' || route.name === 'invoices.edit') {
|
|
invoiceStore.selectCustomer(response.data.id)
|
|
}
|
|
if (route.name === 'estimates.create' || route.name === 'estimates.edit') {
|
|
estimateStore.selectCustomer(response.data.id)
|
|
}
|
|
if (
|
|
route.name === 'recurring-invoices.create' ||
|
|
route.name === 'recurring-invoices.edit'
|
|
) {
|
|
recurringInvoiceStore.selectCustomer(response.data.id)
|
|
}
|
|
closeCustomerModal()
|
|
}
|
|
} catch {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
function closeCustomerModal(): void {
|
|
modalStore.closeModal()
|
|
setTimeout(() => {
|
|
customerStore.resetCurrentCustomer()
|
|
v$.value.$reset()
|
|
}, 300)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<BaseModal
|
|
:show="modalActive"
|
|
@close="closeCustomerModal"
|
|
@open="setInitialData"
|
|
>
|
|
<template #header>
|
|
<div class="flex justify-between w-full">
|
|
{{ modalStore.title }}
|
|
<BaseIcon
|
|
name="XMarkIcon"
|
|
class="h-6 w-6 text-muted cursor-pointer"
|
|
@click="closeCustomerModal"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<form action="" @submit.prevent="submitCustomerData">
|
|
<div class="px-6 pb-3 max-h-[calc(80vh-8rem)] overflow-y-auto">
|
|
<BaseTabGroup>
|
|
<BaseTab :title="$t('customers.basic_info')">
|
|
<BaseInputGrid layout="one-column">
|
|
<BaseInputGroup
|
|
:label="$t('customers.display_name')"
|
|
required
|
|
:error="v$.name.$error && v$.name.$errors[0].$message"
|
|
>
|
|
<BaseInput
|
|
v-model.trim="customerStore.currentCustomer.name"
|
|
type="text"
|
|
name="name"
|
|
class="mt-1 md:mt-0"
|
|
:invalid="v$.name.$error"
|
|
@input="v$.name.$touch()"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup
|
|
:label="$t('settings.currencies.currency')"
|
|
required
|
|
:error="
|
|
v$.currency_id.$error && v$.currency_id.$errors[0].$message
|
|
"
|
|
>
|
|
<BaseMultiselect
|
|
v-model="customerStore.currentCustomer.currency_id"
|
|
:options="globalStore.currencies"
|
|
value-prop="id"
|
|
searchable
|
|
:placeholder="$t('customers.select_currency')"
|
|
:max-height="200"
|
|
class="mt-1 md:mt-0"
|
|
track-by="name"
|
|
:invalid="v$.currency_id.$error"
|
|
label="name"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.primary_contact_name')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.contact_name"
|
|
type="text"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup
|
|
:label="$t('login.email')"
|
|
:error="v$.email.$error && v$.email.$errors[0].$message"
|
|
>
|
|
<BaseInput
|
|
v-model.trim="customerStore.currentCustomer.email"
|
|
type="text"
|
|
name="email"
|
|
class="mt-1 md:mt-0"
|
|
:invalid="v$.email.$error"
|
|
@input="v$.email.$touch()"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup
|
|
:label="$t('customers.prefix')"
|
|
:error="v$.prefix.$error && v$.prefix.$errors[0].$message"
|
|
:content-loading="isFetchingInitialData"
|
|
>
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.prefix"
|
|
:content-loading="isFetchingInitialData"
|
|
type="text"
|
|
name="name"
|
|
:invalid="v$.prefix.$error"
|
|
@input="v$.prefix.$touch()"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGrid>
|
|
<BaseInputGroup :label="$t('customers.phone')">
|
|
<BaseInput
|
|
v-model.trim="customerStore.currentCustomer.phone"
|
|
type="text"
|
|
name="phone"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup
|
|
:label="$t('customers.website')"
|
|
:error="v$.website.$error && v$.website.$errors[0].$message"
|
|
>
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.website"
|
|
type="url"
|
|
class="mt-1 md:mt-0"
|
|
:invalid="v$.website.$error"
|
|
@input="v$.website.$touch()"
|
|
/>
|
|
</BaseInputGroup>
|
|
</BaseInputGrid>
|
|
|
|
<BaseInputGroup :label="$t('customers.tax_id')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.tax_id"
|
|
type="text"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
</BaseInputGrid>
|
|
</BaseTab>
|
|
|
|
<BaseTab :title="$t('customers.portal_access')">
|
|
<BaseInputGrid class="col-span-5 lg:col-span-4">
|
|
<div class="md:col-span-2">
|
|
<p class="text-sm text-muted">
|
|
{{ $t('customers.portal_access_text') }}
|
|
</p>
|
|
<BaseSwitch
|
|
v-model="customerStore.currentCustomer.enable_portal"
|
|
class="mt-1 flex"
|
|
/>
|
|
</div>
|
|
|
|
<BaseInputGroup
|
|
v-if="customerStore.currentCustomer.enable_portal"
|
|
:content-loading="isFetchingInitialData"
|
|
:label="$t('customers.portal_access_url')"
|
|
class="md:col-span-2"
|
|
:help-text="$t('customers.portal_access_url_help')"
|
|
>
|
|
<CopyInputField :token="getCustomerPortalUrl" />
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup
|
|
v-if="customerStore.currentCustomer.enable_portal"
|
|
:content-loading="isFetchingInitialData"
|
|
:error="v$.password.$error && v$.password.$errors[0].$message"
|
|
:label="$t('customers.password')"
|
|
>
|
|
<BaseInput
|
|
v-model.trim="customerStore.currentCustomer.password"
|
|
:content-loading="isFetchingInitialData"
|
|
:type="isShowPassword ? 'text' : 'password'"
|
|
name="password"
|
|
:invalid="v$.password.$error"
|
|
@input="v$.password.$touch()"
|
|
>
|
|
<template #right>
|
|
<BaseIcon
|
|
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
|
class="mr-1 text-muted cursor-pointer"
|
|
@click="isShowPassword = !isShowPassword"
|
|
/>
|
|
</template>
|
|
</BaseInput>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup
|
|
v-if="customerStore.currentCustomer.enable_portal"
|
|
:error="
|
|
v$.confirm_password.$error &&
|
|
v$.confirm_password.$errors[0].$message
|
|
"
|
|
:content-loading="isFetchingInitialData"
|
|
:label="$t('customers.confirm_password')"
|
|
>
|
|
<BaseInput
|
|
v-model.trim="customerStore.currentCustomer.confirm_password"
|
|
:content-loading="isFetchingInitialData"
|
|
:type="isShowConfirmPassword ? 'text' : 'password'"
|
|
name="confirm_password"
|
|
:invalid="v$.confirm_password.$error"
|
|
@input="v$.confirm_password.$touch()"
|
|
>
|
|
<template #right>
|
|
<BaseIcon
|
|
:name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
|
|
class="mr-1 text-muted cursor-pointer"
|
|
@click="isShowConfirmPassword = !isShowConfirmPassword"
|
|
/>
|
|
</template>
|
|
</BaseInput>
|
|
</BaseInputGroup>
|
|
</BaseInputGrid>
|
|
</BaseTab>
|
|
|
|
<BaseTab :title="$t('customers.billing_address')">
|
|
<BaseInputGrid layout="one-column">
|
|
<BaseInputGroup :label="$t('customers.name')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.billing.name"
|
|
type="text"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.country')">
|
|
<BaseMultiselect
|
|
v-model="customerStore.currentCustomer.billing.country_id"
|
|
:options="globalStore.countries"
|
|
searchable
|
|
:show-labels="false"
|
|
:placeholder="$t('general.select_country')"
|
|
:allow-empty="false"
|
|
track-by="name"
|
|
class="mt-1 md:mt-0"
|
|
label="name"
|
|
value-prop="id"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.state')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.billing.state"
|
|
type="text"
|
|
name="billingState"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.city')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.billing.city"
|
|
type="text"
|
|
name="billingCity"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup
|
|
:label="$t('customers.address')"
|
|
:error="
|
|
v$.billing.address_street_1.$error &&
|
|
v$.billing.address_street_1.$errors[0].$message
|
|
"
|
|
>
|
|
<BaseTextarea
|
|
v-model="
|
|
customerStore.currentCustomer.billing.address_street_1
|
|
"
|
|
:placeholder="$t('general.street_1')"
|
|
rows="2"
|
|
cols="50"
|
|
class="mt-1 md:mt-0"
|
|
:invalid="v$.billing.address_street_1.$error"
|
|
@input="v$.billing.address_street_1.$touch()"
|
|
/>
|
|
</BaseInputGroup>
|
|
</BaseInputGrid>
|
|
|
|
<BaseInputGrid layout="one-column">
|
|
<BaseInputGroup
|
|
:error="
|
|
v$.billing.address_street_2.$error &&
|
|
v$.billing.address_street_2.$errors[0].$message
|
|
"
|
|
>
|
|
<BaseTextarea
|
|
v-model="
|
|
customerStore.currentCustomer.billing.address_street_2
|
|
"
|
|
:placeholder="$t('general.street_2')"
|
|
rows="2"
|
|
cols="50"
|
|
:invalid="v$.billing.address_street_2.$error"
|
|
@input="v$.billing.address_street_2.$touch()"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.phone')">
|
|
<BaseInput
|
|
v-model.trim="customerStore.currentCustomer.billing.phone"
|
|
type="text"
|
|
name="phone"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.zip_code')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.billing.zip"
|
|
type="text"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
</BaseInputGrid>
|
|
</BaseTab>
|
|
|
|
<BaseTab :title="$t('customers.shipping_address')">
|
|
<div class="grid md:grid-cols-12">
|
|
<div class="flex justify-end col-span-12">
|
|
<BaseButton
|
|
variant="primary"
|
|
type="button"
|
|
size="xs"
|
|
@click="copyAddress"
|
|
>
|
|
{{ $t('customers.copy_billing_address') }}
|
|
</BaseButton>
|
|
</div>
|
|
</div>
|
|
|
|
<BaseInputGrid layout="one-column">
|
|
<BaseInputGroup :label="$t('customers.name')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.shipping.name"
|
|
type="text"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.country')">
|
|
<BaseMultiselect
|
|
v-model="customerStore.currentCustomer.shipping.country_id"
|
|
:options="globalStore.countries"
|
|
:searchable="true"
|
|
:show-labels="false"
|
|
:allow-empty="false"
|
|
:placeholder="$t('general.select_country')"
|
|
track-by="name"
|
|
class="mt-1 md:mt-0"
|
|
label="name"
|
|
value-prop="id"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.state')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.shipping.state"
|
|
type="text"
|
|
name="shippingState"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.city')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.shipping.city"
|
|
type="text"
|
|
name="shippingCity"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup
|
|
:label="$t('customers.address')"
|
|
:error="
|
|
v$.shipping.address_street_1.$error &&
|
|
v$.shipping.address_street_1.$errors[0].$message
|
|
"
|
|
>
|
|
<BaseTextarea
|
|
v-model="
|
|
customerStore.currentCustomer.shipping.address_street_1
|
|
"
|
|
:placeholder="$t('general.street_1')"
|
|
rows="2"
|
|
cols="50"
|
|
class="mt-1 md:mt-0"
|
|
:invalid="v$.shipping.address_street_1.$error"
|
|
@input="v$.shipping.address_street_1.$touch()"
|
|
/>
|
|
</BaseInputGroup>
|
|
</BaseInputGrid>
|
|
|
|
<BaseInputGrid layout="one-column">
|
|
<BaseInputGroup
|
|
:error="
|
|
v$.shipping.address_street_2.$error &&
|
|
v$.shipping.address_street_2.$errors[0].$message
|
|
"
|
|
>
|
|
<BaseTextarea
|
|
v-model="
|
|
customerStore.currentCustomer.shipping.address_street_2
|
|
"
|
|
:placeholder="$t('general.street_2')"
|
|
rows="2"
|
|
cols="50"
|
|
:invalid="v$.shipping.address_street_2.$error"
|
|
@input="v$.shipping.address_street_2.$touch()"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.phone')">
|
|
<BaseInput
|
|
v-model.trim="customerStore.currentCustomer.shipping.phone"
|
|
type="text"
|
|
name="phone"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
|
|
<BaseInputGroup :label="$t('customers.zip_code')">
|
|
<BaseInput
|
|
v-model="customerStore.currentCustomer.shipping.zip"
|
|
type="text"
|
|
class="mt-1 md:mt-0"
|
|
/>
|
|
</BaseInputGroup>
|
|
</BaseInputGrid>
|
|
</BaseTab>
|
|
</BaseTabGroup>
|
|
</div>
|
|
|
|
<div
|
|
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
|
|
>
|
|
<BaseButton
|
|
class="mr-3 text-sm"
|
|
type="button"
|
|
variant="primary-outline"
|
|
@click="closeCustomerModal"
|
|
>
|
|
{{ $t('general.cancel') }}
|
|
</BaseButton>
|
|
|
|
<BaseButton :loading="isLoading" variant="primary" type="submit">
|
|
<template #left="slotProps">
|
|
<BaseIcon
|
|
v-if="!isLoading"
|
|
name="ArrowDownOnSquareIcon"
|
|
:class="slotProps.class"
|
|
/>
|
|
</template>
|
|
{{ $t('general.save') }}
|
|
</BaseButton>
|
|
</div>
|
|
</form>
|
|
</BaseModal>
|
|
</template>
|