diff --git a/common/types.ts b/common/types.ts index c0ab4d03..119a4a0a 100644 --- a/common/types.ts +++ b/common/types.ts @@ -104,6 +104,7 @@ export interface CustomerData{ } entity: { inn: string; + kpp: string; orgName: string; address: string; email: string; @@ -120,6 +121,7 @@ export interface RecentAddress { export interface RecentOrg { inn: string; + kpp: string; orgName: string; address: string; } diff --git a/components/Input.vue b/components/Input.vue index 4191c25f..7554a635 100644 --- a/components/Input.vue +++ b/components/Input.vue @@ -10,6 +10,8 @@ const props = defineProps<{ autocomplete?: string; required?: boolean; disabled?: boolean; + pattern?: string; + title?: string; }>(); const model = defineModel(); @@ -41,6 +43,8 @@ const validate = () => { :inputmode="inputmode" :required="required" :autocomplete="autocomplete" + :pattern="pattern" + :title="title" @blur="validate" @input="validate" /> diff --git a/components/order/Customer.vue b/components/order/Customer.vue index fb763fbc..4c825dcf 100644 --- a/components/order/Customer.vue +++ b/components/order/Customer.vue @@ -6,7 +6,7 @@ import { RUSSIA_ID, type RecentOrg } from '~/common/types'; const { t } = useI18n(); const payerType = defineModel('payerType'); const individual = defineModel<{ fio: string; phone: string; additional: string; email: string; comment: string; }>('individual'); -const entity = defineModel<{ fio: string; phone: string; additional: string; inn: string; orgName: string; address: string; email: string; comment: string; }>('entity', {required: true}); +const entity = defineModel<{ fio: string; phone: string; additional: string; inn: string; kpp: string; orgName: string; address: string; email: string; comment: string; }>('entity', {required: true}); const country = defineModel('country'); const { countries, cdekCountries, recentOrgs } = defineProps<{ @@ -20,6 +20,7 @@ const recentOrgSuggestions = computed(() => value: org.orgName, data: { inn: org.inn, + kpp: org.kpp, name: { short_with_opf: org.orgName }, address: { unrestricted_value: org.address }, }, @@ -43,7 +44,7 @@ const orgFromSearch = ref(isRussia.value && hasSavedOrg); const orgSearchNoResults = ref(false); const resetOrg = () => { - entity.value = { ...entity.value, orgName: '', inn: '', address: '' }; + entity.value = { ...entity.value, orgName: '', inn: '', kpp: '', address: '' }; orgMode.value = isRussia.value ? 'search' : 'fields'; orgFromSearch.value = false; orgSearchNoResults.value = false; @@ -53,9 +54,10 @@ watch(country, () => { resetOrg(); }); -const onOrgSelect = ({ orgName, inn, address }: { orgName: string; inn: string; address: string }) => { +const onOrgSelect = ({ orgName, inn, kpp, address }: { orgName: string; inn: string; kpp: string; address: string }) => { entity.value.orgName = orgName; entity.value.inn = inn; + entity.value.kpp = kpp; entity.value.address = address; orgMode.value = 'fields'; orgFromSearch.value = true; @@ -113,8 +115,9 @@ const onOrgSelect = ({ orgName, inn, address }: { orgName: string; inn: string; -
+
+
@@ -149,6 +152,10 @@ const onOrgSelect = ({ orgName, inn, address }: { orgName: string; inn: string; gap: 18px; } +.customer-orgFieldWrapper--withKpp { + grid-template-columns: minmax(140px, 1fr) minmax(140px, 1fr) 2fr; +} + .customer-manualBtn { background: none; border: none; @@ -227,7 +234,8 @@ const onOrgSelect = ({ orgName, inn, address }: { orgName: string; inn: string; @media (max-width: 768px) { .customer-fieldWrapper, - .customer-orgFieldWrapper { + .customer-orgFieldWrapper, + .customer-orgFieldWrapper--withKpp { grid-template-columns: 1fr; } } @@ -246,10 +254,12 @@ const onOrgSelect = ({ orgName, inn, address }: { orgName: string; inn: string; "email": "Email", "comment": "Комментарий", "inn": "ИНН организации", + "kpp": "КПП", "orgName": "Наименование организации", "address": "Юридический адрес", "manualEntry": "Не удалось найти организацию, введите вручную →", - "changeOrg": "← Изменить организацию" + "changeOrg": "← Изменить организацию", + "kppFormat": "КПП — 9 цифр" }, "en": { "title": "Enter the customer's information", @@ -262,10 +272,12 @@ const onOrgSelect = ({ orgName, inn, address }: { orgName: string; inn: string; "email": "Email", "comment": "Comment", "inn": "Taxpayer identification number", + "kpp": "Tax Registration Reason Code", "orgName": "Full legal entity title", "address": "Legal address", "manualEntry": "Can't find your organization? Enter it manually →", - "changeOrg": "← Change organization" + "changeOrg": "← Change organization", + "kppFormat": "KPP is 9 digits" } } diff --git a/components/order/OrgSearch.vue b/components/order/OrgSearch.vue index bbe5df27..6d18d65f 100644 --- a/components/order/OrgSearch.vue +++ b/components/order/OrgSearch.vue @@ -1,6 +1,7 @@