From 9d5ef13bd63b9c31a9580c792da0028b6a8a2433 Mon Sep 17 00:00:00 2001
From: alexm <alexm@verdnatura.es>
Date: Thu, 10 Apr 2025 08:36:14 +0200
Subject: [PATCH] refactor(customerAddress): refs #7527 is popup remove /create
 /edit

---
 src/pages/Customer/Card/CustomerAddress.vue   |  99 +++--
 .../components/CustomerAddressEdit.vue        | 340 +++++-------------
 ...ressCreate.vue => CustomerAddressForm.vue} | 162 ++++-----
 .../Card/BasicData/TicketBasicDataForm.vue    |   5 +-
 src/router/modules/customer.js                |  27 --
 .../customer/clientAddress.spec.js            |  16 +-
 6 files changed, 252 insertions(+), 397 deletions(-)
 rename src/pages/Customer/components/{CustomerAddressCreate.vue => CustomerAddressForm.vue} (52%)

diff --git a/src/pages/Customer/Card/CustomerAddress.vue b/src/pages/Customer/Card/CustomerAddress.vue
index f1799d0cc..23b1ab1d4 100644
--- a/src/pages/Customer/Card/CustomerAddress.vue
+++ b/src/pages/Customer/Card/CustomerAddress.vue
@@ -1,18 +1,23 @@
 <script setup>
 import { onBeforeMount, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import FetchData from 'components/FetchData.vue';
 
 import axios from 'axios';
+import CustomerAddressForm from '../components/CustomerAddressForm.vue';
+import CustomerAddressEdit from '../components/CustomerAddressEdit.vue';
+import { onMounted } from 'vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
 
 const addresses = ref([]);
 const client = ref(null);
-
+const showFormCreate = ref();
+const showFormEdit = ref();
+const showFormEditModel = ref();
+const vnPaginateRef = ref();
 const addressFilter = {
     fields: [
         'id',
@@ -27,6 +32,11 @@ const addressFilter = {
         'isEqualizated',
         'isLogifloraAllowed',
         'postalCode',
+        'agencyModeFk',
+        'longitude',
+        'latitude',
+        'incotermsFk',
+        'customsAgentFk',
     ],
     order: ['isDefaultAddress DESC', 'isActive DESC', 'id DESC', 'nickname ASC'],
     include: [
@@ -48,14 +58,15 @@ const addressFilter = {
                 ],
             },
         },
+        {
+            relation: 'agencyMode',
+            scope: {
+                fields: ['id', 'name'],
+            },
+        },
     ],
 };
 
-onBeforeMount(() => {
-    const { id } = route.params;
-    getClientData(id);
-});
-
 watch(
     () => route.params.id,
     (newValue) => {
@@ -65,12 +76,8 @@ watch(
 );
 
 const getClientData = async (id) => {
-    try {
-        const { data } = await axios.get(`Clients/${id}`);
-        client.value = data;
-    } catch (error) {
-        return error;
-    }
+    const { data } = await axios.get(`Clients/${id}`);
+    client.value = data;
 };
 
 const isDefaultAddress = (address) => {
@@ -88,35 +95,38 @@ const setDefault = (address) => {
     });
 };
 
-const sortAddresses = (data) => {
+const sortAddresses = async (data) => {
+    await getClientData(route.params.id);
     if (!client.value || !data) return;
     addresses.value = data.sort((a, b) => {
         return isDefaultAddress(b) - isDefaultAddress(a);
     });
+    openAddressForm();
 };
 
-const toCustomerAddressCreate = () => {
-    router.push({ name: 'CustomerAddressCreate' });
-};
-
-const toCustomerAddressEdit = (addressId) => {
-    router.push({
-        name: 'CustomerAddressEdit',
-        params: {
-            id: route.params.id,
-            addressId,
-        },
-    });
-};
+function openAddressForm() {
+    console.log('route.query: ', route.query);
+    if (route.query.addressId) {
+        console.log('addresses.value: ', addresses.value);
+        const address = addresses.value.find(
+            (address) => address.id == +route.query.addressId,
+        );
+        console.log('address: ', address);
+        if (address) {
+            showFormEdit.value = true;
+            showFormEditModel.value = address;
+        }
+    }
+}
 </script>
 
 <template>
     <FetchData
+        ref="vnPaginateRef"
         @on-fetch="sortAddresses"
         auto-load
         data-key="CustomerAddresses"
         order="id DESC"
-        ref="vnPaginateRef"
         :filter="addressFilter"
         :url="`Clients/${route.params.id}/addresses`"
     />
@@ -131,7 +141,7 @@ const toCustomerAddressEdit = (addressId) => {
                         'q-mb-md': index < addresses.length - 1,
                         'item-disabled': !item.isActive,
                     }"
-                    @click="toCustomerAddressEdit(item.id)"
+                    @click="(showFormEdit = !showFormEdit) && (showFormEditModel = item)"
                 >
                     <div class="q-ml-xs q-mr-md flex items-center">
                         <QIcon
@@ -200,19 +210,18 @@ const toCustomerAddressEdit = (addressId) => {
                             v-for="(observation, obIndex) in item.observations"
                         >
                             <div class="text-weight-bold q-mr-sm">
-                                {{ observation.observationType.description }}:
+                                {{ observation?.observationType?.description }}:
                             </div>
-                            <div>{{ observation.description }}</div>
+                            <div>{{ observation?.description }}</div>
                         </div>
                     </div>
                 </div>
             </QCardSection>
         </QCard>
     </div>
-
     <QPageSticky :offset="[18, 18]">
         <QBtn
-            @click.stop="toCustomerAddressCreate()"
+            @click.stop="showFormCreate = !showFormCreate"
             color="primary"
             fab
             icon="add"
@@ -222,6 +231,28 @@ const toCustomerAddressEdit = (addressId) => {
             {{ t('New consignee') }}
         </QTooltip>
     </QPageSticky>
+    <QDialog v-model="showFormEdit" :full-width="true">
+        <CustomerAddressEdit
+            :id="showFormEditModel.id"
+            v-model="showFormEditModel"
+            @on-data-saved="() => vnPaginateRef.fetch()"
+        />
+    </QDialog>
+    <QDialog v-model="showFormCreate" :full-width="true">
+        <CustomerAddressForm
+            :is-create="true"
+            :form-initial-data="{
+                isDefaultAddress: false,
+                isActive: true,
+                isEqualizated: false,
+                isLogifloraAllowed: false,
+            }"
+            :observe-form-changes="false"
+            :url-create="`Clients/${route.params.id}/createAddress`"
+            model="client"
+            @on-data-saved="() => vnPaginateRef.fetch()"
+        />
+    </QDialog>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/components/CustomerAddressEdit.vue b/src/pages/Customer/components/CustomerAddressEdit.vue
index bc76f5985..577397d83 100644
--- a/src/pages/Customer/components/CustomerAddressEdit.vue
+++ b/src/pages/Customer/components/CustomerAddressEdit.vue
@@ -4,16 +4,14 @@ import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import axios from 'axios';
-import VnLocation from 'src/components/common/VnLocation.vue';
 import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
-import VnRow from 'components/ui/VnRow.vue';
+import VnConfirm from 'components/ui/VnConfirm.vue';
+import CustomerAddressForm from './CustomerAddressForm.vue';
+import VnRow from 'src/components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
-import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
-import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
-import VnInputNumber from 'src/components/common/VnInputNumber.vue';
-import VnConfirm from 'components/ui/VnConfirm.vue';
+
+const emit = defineEmits(['onDataSaved']);
 
 const { t } = useI18n();
 const route = useRoute();
@@ -22,31 +20,31 @@ const quasar = useQuasar();
 const urlUpdate = ref('');
 const agencyModes = ref([]);
 const incoterms = ref([]);
-const customsAgents = ref([]);
 const observationTypes = ref([]);
-const notes = ref([]);
+const customsAgents = ref([]);
 let originalNotes = [];
 const deletes = ref([]);
 
+const model = defineModel({ type: Object });
+const notes = ref(model.value.observations || []);
+const $props = defineProps({
+    id: {
+        type: Number,
+        required: true,
+    },
+});
+
 onBeforeMount(() => {
-    urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.addressId}`;
+    urlUpdate.value = `Clients/${route.params.id}/updateAddress/${$props.id}`;
 });
 
 const getData = async (observations) => {
     observationTypes.value = observations;
 
     if (observationTypes.value.length) {
-        const filter = {
-            fields: ['id', 'addressFk', 'observationTypeFk', 'description'],
-            where: { addressFk: `${route.params.addressId}` },
-        };
-        const { data } = await axios.get('AddressObservations', {
-            params: { filter: JSON.stringify(filter) },
-        });
-
-        if (data.length) {
-            originalNotes = data;
-            notes.value = originalNotes
+        if (notes.value.length) {
+            originalNotes = JSON.parse(JSON.stringify(notes.value));
+            notes.value = notes.value
                 .map((observation) => {
                     const type = observationTypes.value.find(
                         (type) => type.id === observation.observationTypeFk,
@@ -56,7 +54,7 @@ const getData = async (observations) => {
                               $isNew: false,
                               $oldData: null,
                               $orgIndex: null,
-                              addressFk: `${route.params.addressId}`,
+                              addressFk: `${$props.id}`,
                               description: observation.description,
                               id: observation.id,
                               observationTypeFk: type.id,
@@ -68,22 +66,6 @@ const getData = async (observations) => {
     }
 };
 
-const addNote = () => {
-    notes.value.push({
-        $isNew: true,
-        $oldData: null,
-        $orgIndex: null,
-        addressFk: `${route.params.addressId}`,
-        description: '',
-        observationTypeFk: '',
-    });
-};
-
-const deleteNote = (id, index) => {
-    deletes.value.push(id);
-    notes.value.splice(index, 1);
-};
-
 const updateAddress = async (data) => {
     await axios.patch(urlUpdate.value, data);
 };
@@ -116,8 +98,9 @@ function cleanPayload(payload) {
 async function updateAll({ data, payload }) {
     await updateObservations(payload);
     await updateAddress(data);
-    toCustomerAddress();
+    emit('onDataSaved');
 }
+
 function getPayload() {
     return {
         creates: notes.value.filter((note) => note.$isNew),
@@ -162,23 +145,21 @@ async function handleDialog(data) {
     }
 }
 
-const toCustomerAddress = () => {
-    notes.value = [];
-    deletes.value = [];
-    router.push({
-        name: 'CustomerAddress',
-        params: {
-            id: route.params.id,
-        },
+const addNote = () => {
+    notes.value.push({
+        $isNew: true,
+        $oldData: null,
+        $orgIndex: null,
+        addressFk: `${$props.id}`,
+        description: '',
+        observationTypeFk: '',
     });
 };
-function handleLocation(data, location) {
-    const { town, code, provinceFk, countryFk } = location ?? {};
-    data.postalCode = code;
-    data.city = town;
-    data.provinceFk = provinceFk;
-    data.countryFk = countryFk;
-}
+
+const deleteNote = (id, index) => {
+    deletes.value.push(id);
+    notes.value.splice(index, 1);
+};
 </script>
 
 <template>
@@ -194,207 +175,76 @@ function handleLocation(data, location) {
         url="CustomsAgents"
     />
     <FetchData @on-fetch="getData" auto-load url="ObservationTypes" />
-
-    <FormModel
-        :observe-form-changes="false"
+    <CustomerAddressForm
         :url-update="urlUpdate"
-        :url="`Addresses/${route.params.addressId}`"
+        :form-initial-data="model"
         :save-fn="handleDialog"
         auto-load
     >
-        <template #moreActions>
-            <QBtn
-                :label="t('globals.cancel')"
-                @click="toCustomerAddress"
-                color="primary"
-                flat
-                icon="close"
-            />
-        </template>
-
-        <template #form="{ data, validate }">
-            <VnRow>
-                <div class="col">
-                    <QCheckbox :label="t('Enabled')" v-model="data.isActive" />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Is equalizated')"
-                        v-model="data.isEqualizated"
-                    />
-                </div>
-                <div class="col">
-                    <QCheckbox
-                        :label="t('Is Loginflora allowed')"
-                        v-model="data.isLogifloraAllowed"
-                    />
-                </div>
-            </VnRow>
-
-            <VnRow>
-                <div class="col">
-                    <VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Street')" clearable v-model="data.street" />
-                </div>
-            </VnRow>
-
-            <VnRow>
-                <div class="col">
-                    <VnLocation
-                        :rules="validate('Worker.postcode')"
-                        :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
-                        :location="{
-                            postcode: data.postalCode,
-                            city: data.city,
-                            province: data.province,
-                            country: data.province?.country,
-                        }"
-                        @update:model-value="(location) => handleLocation(data, location)"
-                    ></VnLocation>
-                </div>
-            </VnRow>
-
-            <VnRow>
-                <div class="col">
-                    <VnSelect
-                        :label="t('Agency')"
-                        :options="agencyModes"
-                        :rules="validate('route.agencyFk')"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="data.agencyModeFk"
-                    />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Phone')" clearable v-model="data.phone" />
-                </div>
-                <div class="col">
-                    <VnInput :label="t('Mobile')" clearable v-model="data.mobile" />
-                </div>
-            </VnRow>
-            <VnRow>
-                <VnSelect
-                    :label="t('Incoterms')"
-                    :options="incoterms"
-                    hide-selected
-                    option-label="name"
-                    option-value="code"
-                    v-model="data.incotermsFk"
-                />
-                <VnSelectDialog
-                    :label="t('Customs agent')"
-                    :options="customsAgents"
-                    hide-selected
-                    option-label="fiscalName"
-                    option-value="id"
-                    v-model="data.customsAgentFk"
-                    :tooltip="t('New customs agent')"
+        <template #more-form="{ validate }">
+            <div class="column">
+                <h4 class="q-mb-xs">{{ t('Notes') }}</h4>
+                <VnRow
+                    v-if="!isPopup"
+                    :key="index"
+                    class="row q-gutter-md q-mb-md"
+                    v-for="(note, index) in notes"
                 >
-                    <template #form>
-                        <CustomerNewCustomsAgent />
-                    </template>
-                </VnSelectDialog>
-            </VnRow>
-            <VnRow>
-                <VnInputNumber
-                    :label="t('Longitude')"
-                    clearable
-                    v-model="data.longitude"
-                    :decimal-places="7"
-                    :positive="false"
-                />
-                <VnInputNumber
-                    :label="t('Latitude')"
-                    clearable
-                    v-model="data.latitude"
-                    :decimal-places="7"
-                    :positive="false"
-                />
-            </VnRow>
-            <h4 class="q-mb-xs">{{ t('Notes') }}</h4>
-            <VnRow
-                :key="index"
-                class="row q-gutter-md q-mb-md"
-                v-for="(note, index) in notes"
-            >
-                <VnSelect
-                    :label="t('Observation type')"
-                    :options="observationTypes"
-                    hide-selected
-                    option-label="description"
-                    option-value="id"
-                    v-model="note.observationTypeFk"
-                />
-                <VnInput
-                    :label="t('Description')"
-                    :rules="validate('route.description')"
-                    clearable
-                    v-model="note.description"
-                />
-                <QIcon
-                    :style="{ flex: 0, 'align-self': $q.screen.gt.xs ? 'end' : 'center' }"
-                    @click.stop="deleteNote(note.id, index)"
-                    class="cursor-pointer"
+                    <VnSelect
+                        :label="t('Observation type')"
+                        :options="observationTypes"
+                        hide-selected
+                        option-label="description"
+                        option-value="id"
+                        v-model="note.observationTypeFk"
+                    />
+                    <VnInput
+                        :label="t('Description')"
+                        :rules="validate('route.description')"
+                        clearable
+                        v-model="note.description"
+                    />
+                    <QIcon
+                        :style="{
+                            flex: 0,
+                            'align-self': $q.screen.gt.xs ? 'end' : 'center',
+                        }"
+                        @click.stop="deleteNote(note.id, index)"
+                        class="cursor-pointer"
+                        color="primary"
+                        name="delete"
+                        size="sm"
+                    >
+                        <QTooltip>
+                            {{ t('Remove note') }}
+                        </QTooltip>
+                    </QIcon>
+                </VnRow>
+                <QBtn
+                    @click.stop="addNote()"
+                    icon="add"
+                    v-shortcut="'+'"
                     color="primary"
-                    name="delete"
-                    size="sm"
+                    style="width: 10%"
                 >
                     <QTooltip>
-                        {{ t('Remove note') }}
+                        {{ t('Add note') }}
                     </QTooltip>
-                </QIcon>
-            </VnRow>
-            <QBtn
-                @click.stop="addNote()"
-                class="cursor-pointer add-icon q-mt-md"
-                flat
-                icon="add"
-                v-shortcut="'+'"
-            >
-                <QTooltip>
-                    {{ t('Add note') }}
-                </QTooltip>
-            </QBtn>
+                </QBtn>
+            </div>
         </template>
-    </FormModel>
+    </CustomerAddressForm>
 </template>
-
-<style lang="scss" scoped>
-.add-icon {
-    background-color: $primary;
-    border-radius: 50px;
-}
-</style>
-
 <i18n>
-es:
-    Enabled: Activo
-    Is equalizated: Recargo de equivalencia
-    Is Loginflora allowed: Compra directa en Holanda
-    Consignee: Consignatario
-    Street: Dirección fiscal
-    Postcode: Código postal
-    City: Población
-    Province: Provincia
-    Agency: Agencia
-    Phone: Teléfono
-    Mobile: Movíl
-    Incoterms: Incoterms
-    Customs agent: Agente de aduanas
-    New customs agent: Nuevo agente de aduanas
-    Notes: Notas
-    Observation type: Tipo de observación
-    Description: Descripción
-    Add note: Añadir nota
-    Remove note: Eliminar nota
-    Longitude: Longitud
-    Latitude: Latitud
-    confirmTicket: ¿Desea modificar también los estados de todos los tickets que están a punto de ser servidos?
-    confirmDeletionMessage: Si le das a aceptar, se modificaran todas las notas de los ticket a futuro
-en:
-    confirmTicket: Do you also want to modify the states of all the tickets that are about to be served?
-    confirmDeletionMessage: If you click accept, all the notes of the future tickets will be modified
+    es:
+        Notes: Notas
+        Observation type: Tipo de observación
+        Description: Descripción
+        Add note: Añadir nota
+        Remove note: Eliminar nota
+        confirmTicket: ¿Desea modificar también los estados de todos los tickets que están a punto de ser servidos?
+        confirmDeletionMessage: Si le das a aceptar, se modificaran todas las notas de los ticket a futuro
+    en:
+        confirmTicket: Do you also want to modify the states of all the tickets that are about to be served?
+        confirmDeletionMessage: If you click accept, all the notes of the future tickets will be modified
 </i18n>
diff --git a/src/pages/Customer/components/CustomerAddressCreate.vue b/src/pages/Customer/components/CustomerAddressForm.vue
similarity index 52%
rename from src/pages/Customer/components/CustomerAddressCreate.vue
rename to src/pages/Customer/components/CustomerAddressForm.vue
index e1be6b150..0d8d8d950 100644
--- a/src/pages/Customer/components/CustomerAddressCreate.vue
+++ b/src/pages/Customer/components/CustomerAddressForm.vue
@@ -1,36 +1,35 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { onBeforeMount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router';
-
+import { useRoute } from 'vue-router';
 import VnLocation from 'src/components/common/VnLocation.vue';
 import FetchData from 'components/FetchData.vue';
-import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
 import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
 import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+import FormModelPopup from 'src/components/FormModelPopup.vue';
 
 const { t } = useI18n();
 const route = useRoute();
-const router = useRouter();
-
-const formInitialData = reactive({ isDefaultAddress: false });
-
+const urlUpdate = ref('');
 const agencyModes = ref([]);
 const incoterms = ref([]);
 const customsAgents = ref([]);
 
-const toCustomerAddress = () => {
-    router.push({
-        name: 'CustomerAddress',
-        params: {
-            id: route.params.id,
-        },
-    });
-};
+const $props = defineProps({
+    isCreate: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+onBeforeMount(() => {
+    urlUpdate.value = `Clients/${route.params.id}/updateAddress/${route.params.addressId}`;
+});
+
 function handleLocation(data, location) {
     const { town, code, provinceFk, countryFk } = location ?? {};
     data.postalCode = code;
@@ -38,33 +37,21 @@ function handleLocation(data, location) {
     data.provinceFk = provinceFk;
     data.countryFk = countryFk;
 }
-
-function onAgentCreated({ id, fiscalName }, data) {
-    customsAgents.value.push({ id, fiscalName });
-    data.customsAgentFk = id;
-}
 </script>
 
 <template>
-    <FetchData
-        @on-fetch="(data) => (customsAgents = data)"
-        auto-load
-        url="CustomsAgents"
-    />
     <FetchData
         @on-fetch="(data) => (agencyModes = data)"
         auto-load
         url="AgencyModes/isActive"
     />
     <FetchData @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
-
-    <FormModel
-        :form-initial-data="formInitialData"
-        :observe-form-changes="false"
-        :url-create="`Clients/${route.params.id}/createAddress`"
-        @on-data-saved="toCustomerAddress()"
-        model="client"
-    >
+    <FetchData
+        @on-fetch="(data) => (customsAgents = data)"
+        auto-load
+        url="CustomsAgents"
+    />
+    <FormModelPopup v-bind="$attrs" v-on="$attrs" :reload="false">
         <template #moreActions>
             <QBtn
                 :label="t('globals.cancel')"
@@ -74,34 +61,49 @@ function onAgentCreated({ id, fiscalName }, data) {
                 icon="close"
             />
         </template>
-
-        <template #form="{ data, validate }">
-            <QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
-
+        <template #form-inputs="{ data, validate }">
             <VnRow>
-                <VnInput
-                    :label="t('Consignee')"
-                    required
-                    clearable
-                    v-model="data.nickname"
+                <QCheckbox
+                    :label="t('Default')"
+                    v-model="data.isDefaultAddress"
+                    checked-icon="star"
+                    unchecked-icon="star"
+                    indeterminate-icon="star"
+                    size="lg"
+                    :style="{
+                        'font-variation-settings': `'FILL' ${data.isDefaultAddress ? 1 : 0}`,
+                    }"
+                    color="primary"
                 />
-
-                <VnInput
-                    :label="t('Street address')"
-                    clearable
-                    v-model="data.street"
-                    required
+                <QCheckbox :label="t('Enabled')" v-model="data.isActive" />
+                <QCheckbox
+                    :label="t('Is equalizated')"
+                    v-model="data.isEqualizated"
+                    data-cy="isEqualizated_form"
+                />
+                <QCheckbox
+                    :label="t('Is Loginflora allowed')"
+                    v-model="data.isLogifloraAllowed"
                 />
             </VnRow>
-
-            <VnLocation
-                :rules="validate('Worker.postcode')"
-                :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
-                v-model="data.location"
-                @update:model-value="(location) => handleLocation(data, location)"
-            />
-
-            <div class="row justify-between q-gutter-md q-mb-md">
+            <VnRow>
+                <VnInput :label="t('Consignee')" clearable v-model="data.nickname" />
+                <VnInput :label="t('Street')" clearable v-model="data.street" />
+            </VnRow>
+            <VnRow>
+                <VnLocation
+                    :rules="validate('Worker.postcode')"
+                    :acls="[{ model: 'Town', props: '*', accessType: 'WRITE' }]"
+                    :location="{
+                        postcode: data.postalCode,
+                        city: data.city,
+                        province: data.province,
+                        country: data.province?.country,
+                    }"
+                    @update:model-value="(location) => handleLocation(data, location)"
+                ></VnLocation>
+            </VnRow>
+            <VnRow>
                 <VnSelect
                     :label="t('Agency')"
                     :options="agencyModes"
@@ -110,17 +112,10 @@ function onAgentCreated({ id, fiscalName }, data) {
                     option-label="name"
                     option-value="id"
                     v-model="data.agencyModeFk"
-                    class="col"
                 />
-                <VnInput class="col" :label="t('Phone')" clearable v-model="data.phone" />
-                <VnInput
-                    class="col"
-                    :label="t('Mobile')"
-                    clearable
-                    v-model="data.mobile"
-                />
-            </div>
-
+                <VnInput :label="t('Phone')" clearable v-model="data.phone" />
+                <VnInput :label="t('Mobile')" clearable v-model="data.mobile" />
+            </VnRow>
             <VnRow>
                 <VnSelect
                     :label="t('Incoterms')"
@@ -130,23 +125,17 @@ function onAgentCreated({ id, fiscalName }, data) {
                     option-value="code"
                     v-model="data.incotermsFk"
                 />
-
                 <VnSelectDialog
-                    url="CustomsAgents"
                     :label="t('Customs agent')"
                     :options="customsAgents"
                     hide-selected
                     option-label="fiscalName"
                     option-value="id"
                     v-model="data.customsAgentFk"
-                    :tooltip="t('Create a new expense')"
+                    :tooltip="t('New customs agent')"
                 >
                     <template #form>
-                        <CustomerNewCustomsAgent
-                            @on-data-saved="
-                                (requestResponse) => onAgentCreated(requestResponse, data)
-                            "
-                        />
+                        <CustomerNewCustomsAgent />
                     </template>
                 </VnSelectDialog>
             </VnRow>
@@ -166,13 +155,13 @@ function onAgentCreated({ id, fiscalName }, data) {
                     :positive="false"
                 />
             </VnRow>
+            <slot name="more-form" :validate />
         </template>
-    </FormModel>
+    </FormModelPopup>
 </template>
 
 <style lang="scss" scoped>
 .add-icon {
-    cursor: pointer;
     background-color: $primary;
     border-radius: 50px;
 }
@@ -180,9 +169,11 @@ function onAgentCreated({ id, fiscalName }, data) {
 
 <i18n>
 es:
-    Default: Predeterminado
+    Enabled: Activo
+    Is equalizated: Recargo de equivalencia
+    Is Loginflora allowed: Compra directa en Holanda
     Consignee: Consignatario
-    Street address: Dirección postal
+    Street: Dirección fiscal
     Postcode: Código postal
     City: Población
     Province: Provincia
@@ -191,6 +182,17 @@ es:
     Mobile: Movíl
     Incoterms: Incoterms
     Customs agent: Agente de aduanas
+    New customs agent: Nuevo agente de aduanas
+    Notes: Notas
+    Observation type: Tipo de observación
+    Description: Descripción
+    Add note: Añadir nota
+    Remove note: Eliminar nota
     Longitude: Longitud
     Latitude: Latitud
+    confirmTicket: ¿Desea modificar también los estados de todos los tickets que están a punto de ser servidos?
+    confirmDeletionMessage: Si le das a aceptar, se modificaran todas las notas de los ticket a futuro
+en:
+    confirmTicket: Do you also want to modify the states of all the tickets that are about to be served?
+    confirmDeletionMessage: If you click accept, all the notes of the future tickets will be modified
 </i18n>
diff --git a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
index 61932468c..44e522b72 100644
--- a/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
+++ b/src/pages/Ticket/Card/BasicData/TicketBasicDataForm.vue
@@ -218,8 +218,9 @@ const onFormModelInit = () => {
 
 const redirectToCustomerAddress = () => {
     router.push({
-        name: 'CustomerAddressEditCard',
-        params: { id: clientId.value, addressId: addressId.value },
+        name: 'CustomerAddress',
+        params: { id: clientId.value },
+        query: { addressId: addressId.value },
     });
 };
 
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index a33ed6be5..8139fcab3 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -75,33 +75,6 @@ const customerCard = {
                     component: () =>
                         import('src/pages/Customer/Card/CustomerAddress.vue'),
                 },
-                {
-                    path: 'create',
-                    name: 'CustomerAddressCreate',
-                    meta: {
-                        title: 'address-create',
-                    },
-                    component: () =>
-                        import('src/pages/Customer/components/CustomerAddressCreate.vue'),
-                },
-                {
-                    path: ':addressId',
-                    name: 'CustomerAddressEditCard',
-                    redirect: { name: 'CustomerAddressEdit' },
-                    children: [
-                        {
-                            path: 'edit',
-                            name: 'CustomerAddressEdit',
-                            meta: {
-                                title: 'addressEdit',
-                            },
-                            component: () =>
-                                import(
-                                    'src/pages/Customer/components/CustomerAddressEdit.vue'
-                                ),
-                        },
-                    ],
-                },
             ],
         },
         {
diff --git a/test/cypress/integration/customer/clientAddress.spec.js b/test/cypress/integration/customer/clientAddress.spec.js
index 5d82aa4bc..a42e054cd 100644
--- a/test/cypress/integration/customer/clientAddress.spec.js
+++ b/test/cypress/integration/customer/clientAddress.spec.js
@@ -9,18 +9,18 @@ describe('Client consignee', () => {
         cy.get('.q-card').should('be.visible');
     });
 
-    it('check as equalizated', function () {
+    it('check as equalizated', () => {
         cy.get('.q-card__section > .address-card').then(($el) => {
-            let addressCards_before = $el.length;
+            const addressCards_before = $el.length;
 
             cy.get('.q-page-sticky > div > .q-btn').click();
             const addressName = 'test';
             cy.dataCy('Consignee_input').type(addressName);
             cy.dataCy('Location_select').click();
             cy.getOption();
-            cy.dataCy('Street address_input').type('TEST ADDRESS');
-            cy.get('.q-btn-group > .q-btn--standard').click();
-            cy.location('href').should('contain', '#/customer/1107/address');
+            cy.dataCy('Street_input').type('TEST ADDRESS');
+            cy.saveCard();
+
             cy.get('.q-card__section > .address-card').should(
                 'have.length',
                 addressCards_before + 1,
@@ -33,13 +33,11 @@ describe('Client consignee', () => {
                 .should('contain', addressName)
                 .click();
         });
-        cy.get(
-            '.q-card > :nth-child(1) > :nth-child(2) > .q-checkbox > .q-checkbox__inner',
-        )
+        cy.get('[data-cy="isEqualizated_form"] > .q-checkbox__inner')
             .should('have.class', 'q-checkbox__inner--falsy')
             .click();
 
-        cy.get('.q-btn-group > .q-btn--standard > .q-btn__content').click();
+        cy.saveCard();
         cy.get(
             ':nth-child(2) > :nth-child(2) > .flex > .q-mr-lg > .q-checkbox__inner',
         ).should('have.class', 'q-checkbox__inner--truthy');