add: translation in complete register

src/components/Footer.vue

@@ -1,3 +1,4 @@
+
 <template>
     <div class="footer">
         <div class="d-flex justify-content-between">
@@ -19,12 +20,12 @@
                 </div>
             </div>
             <div class="d-flex flex-column">
-                <RouterLink class="btn-links mb-1" :to="{name: 'notice-privacy'}" target="_blank">Aviso de privaciadad</RouterLink>
+                <RouterLink class="btn-links mb-1" :to="{name: 'notice-privacy'}" target="_blank">{{ $t('buttons.noticePrivacity') }} </RouterLink>
-                <RouterLink class="btn-links" :to="{name: 'terms-conditions'}" target="_blank">Términos y condiciones</RouterLink>
+                <RouterLink class="btn-links" :to="{name: 'terms-conditions'}" target="_blank">{{ $t('buttons.terms') }}</RouterLink>
                 <RouterLink class="btn-links" :to="{name: 'faqs'}" target="_blank">Faqs</RouterLink>
             </div>
         </div>
-        <h4 class="copy"><i class="fa fa-copyright" aria-hidden="true"></i> 2023 ETA VIAPORTE | TODOS LOS DERECHOS RESERVADOS</h4>
+        <h4 class="copy"><i class="fa fa-copyright" aria-hidden="true"></i>2024 {{ $t('global.footer') }}</h4>
     </div>
 </template>
 

src/components/ui/Cities.vue

@@ -2,9 +2,11 @@
     import { ref } from 'vue';
     import VueMultiselect from 'vue-multiselect'
     import { searchcities } from '../../services/public';
+    import { useI18n } from 'vue-i18n';
 
     const options = ref([]);
     const isLoading = ref(false);
+    const { t } = useI18n();
     
     // defineProps(['selectedCities', 'multiple']);
     defineProps({
@@ -42,18 +44,18 @@
         :disabled="disabled"
         @search-change="searchState"
         @remove="$emit('clear-option')"
-        placeholder="Busca por ciudad"
         label="city_name"
         track-by="city_name"
-        selectLabel="Presione para seleccionar"
+        :placeholder="t('labels.selectCity')"
-        selectedLabel="Selecionado"
+        :selectLabel="t('global.helpSelected')"
-        deselectLabel="Presione para remover selecion"
+        :selectedLabel="t('global.selected')"
+        :deselectLabel="t('global.removeSelected')"
     >
         <template #noResult>
-            Oops! No se encontro coincidencias.
+            {{ t('global.notFound') }}
         </template>
         <template #noOptions>
-            Escriba para obtener lista.
+            {{ t('global.emptyList') }}
         </template>
     </VueMultiselect>
 </template>

src/components/ui/Segments.vue

@@ -2,9 +2,11 @@
     import { ref } from 'vue';
     import VueMultiselect from 'vue-multiselect'
     import { searchcategories } from '../../services/public';
+import { useI18n } from 'vue-i18n';
 
     const options = ref([]);
     const isLoading = ref(false);
+    const { t } = useI18n();
 
     // defineProps(['selectedCategory']);
     defineProps({
@@ -38,18 +40,18 @@
         :close-on-select="true"
         @search-change="searchCategory"
         @remove="$emit('clear-option')"
-        placeholder="Busca por segmento"
         label="name"
         track-by="name"
-        selectLabel="Presione para seleccionar"
+        :placeholder="t('labels.selectSegment')"
-        selectedLabel="Selecionado"
+        :selectLabel="t('global.helpSelected')"
-        deselectLabel="Presione para remover selecion"
+        :selectedLabel="t('global.selected')"
+        :deselectLabel="t('global.removeSelected')"
     >
         <template #noResult>
-            Oops! No se encontro coincidencias.
+            {{ t('global.notFound') }}
         </template>
         <template #noOptions>
-            Lista vacia.
+            {{ t('global.emptyList') }}
         </template>
     </VueMultiselect>
 </template>

src/components/ui/States.vue

@@ -2,9 +2,11 @@
     import { ref } from 'vue';
     import VueMultiselect from 'vue-multiselect'
     import { searchstates } from '../../services/public';
+    import { useI18n } from 'vue-i18n';
 
     const options = ref([]);
     const isLoading = ref(false);
+    const { t } = useI18n();
     
     // defineProps(['selectedState', 'multiple']);
     defineProps({
@@ -39,19 +41,20 @@
         :close-on-select="true"
         @search-change="searchState"
         @remove="$emit('clear-option')"
-        placeholder="Busca por estado"
         label="state_name"
         track-by="state_name"
-        selectLabel="Presione para seleccionar"
+        :placeholder="t('labels.selectState')"
-        selectedLabel="Selecionado"
+        :selectLabel="t('global.helpSelected')"
-        deselectLabel="Presione para remover selecion"
+        :selectedLabel="t('global.selected')"
+        :deselectLabel="t('global.removeSelected')"
+    
 
     >
         <template #noResult>
-            Oops! No se encontro coincidencias.
+            {{ t('global.notFound') }}
         </template>
         <template #noOptions>
-            Escriba para obtener lista.
+            {{ t('global.emptyList') }}
         </template>
     </VueMultiselect>
 </template>

src/components/ui/TruckTypes.vue

@@ -2,9 +2,11 @@
     import { ref } from 'vue';
     import VueMultiselect from 'vue-multiselect'
     import { getSettingsQuery } from '../../services/public';
+    import { useI18n } from 'vue-i18n';
 
     const options = ref([]);
     const isLoading = ref(false);
+    const { t } = useI18n();
 
     // defineProps(['selectedTruckType']);
     defineProps({
@@ -46,18 +48,18 @@
         :close-on-select="true"
         @search-change="getTruckTypesQuery"
         @remove="$emit('clear-option')"
-        placeholder="Busca por tipo de transporte"
         label="meta_value"
         track-by="meta_value"
-        selectLabel="Presione para seleccionar"
+        :placeholder="t('labels.selectTruck')"
-        selectedLabel="Selecionado"
+        :selectLabel="t('global.helpSelected')"
-        deselectLabel="Presione para remover selecion"
+        :selectedLabel="t('global.selected')"
+        :deselectLabel="t('global.removeSelected')"
     >
         <template #noResult>
-            Oops! No se encontro coincidencias.
+            {{ t('global.notFound') }}
         </template>
         <template #noOptions>
-            Lista vacia.
+            {{ t('global.emptyList') }}
         </template>
     </VueMultiselect>
 </template>

src/i18n/i18n.js

@@ -8,6 +8,21 @@ const messages = {
         password2: 'New password',
         password3: 'Confirm Password',
         code: 'Enter the code',
+        questionCompany: 'What is the name of the company?',
+        questionRfc: "What is the company's RFC?",
+        questionSegments: 'What segments does the company belong to?',
+        questionSates: "What are the company's loading locations by state?",
+        questionCities: "What are the company's loading locations by city?",
+        questionTrucks: "What type of transport does the company use?",
+        infoCompanies: 'Additional company information',
+        selectSegment: 'Search by segment',
+        selectTruck: 'Search by type of transport',
+        selectState: 'Search by state',
+        selectCity: 'Search by city',
+        names: 'Name(s)',
+        lastnames: 'Last name',
+        phone1: 'Phone 1',
+        phone2: 'Phone 2',
     },
     buttons: {
         enter: "Enter here",
@@ -17,6 +32,7 @@ const messages = {
         resendCode: "Resend code",
         terms: 'Terms and Conditions',
         noticePrivacity: 'Privacy notice',
+        save: 'save',
     },
     errors: {
         requireds: "All fields required",
@@ -37,7 +53,8 @@ const messages = {
     messages: {
         sendCode: 'We send you a code to the email, entered!',
         changePassword: 'Password has been changed successfully!',
-        register: "Successful registration, Complete your registration!"
+        register: "Successful registration, Complete your registration!",
+        registerCompleted: 'Registration completed successfully, Welcome'
     },
     global: {
         signIn:  "Sign In",
@@ -50,6 +67,13 @@ const messages = {
         brokerCarrier: 'Broker (Carrier)',
         fisica: 'Persona fisica',
         moral: 'Persona moral',
+        helpSelected: 'Press to select',
+        selected: 'Selected',
+        removeSelected: 'Press to remove selection',
+        emptyList: 'Empty list',
+        notFound: 'Oops! No matches found.',
+        infoUser: 'Personal information',
+        footer: 'ETA VIAPORTE ALL RIGHTS RESERVED',
     },
     login: {
         title: 'Sign in',
@@ -75,6 +99,21 @@ es: {
         password2: 'Nueva contraseña',
         password3: 'Confirmar contraseña',
         code: 'Ingresa el código',
+        questionCompany: '¿Cuál es el nombre de la empresa?',
+        questionRfc: '¿Cuál es el RFC de la empresa?',
+        questionSegments: '¿A que segmentos pertenece la empresa?',
+        questionSates: '¿Cuáles son las locaciones de carga de la empresa por estado?',
+        questionCities: '¿Cuáles son las locaciones de carga de la empresa por municipio?',
+        questionTrucks: '¿Qué tipo de transportes utiliza la empresa?',
+        infoCompanies: 'Información adicional de la empresa',
+        selectSegment: 'Busca por segmento',
+        selectTruck: 'Busca por tipo de transporte',
+        selectState: 'Busca por estado',
+        selectCity: 'Busca por ciudad',
+        names: 'Nombre(s)',
+        lastnames: 'Apellido(s)',
+        phone1: 'Teléfono 1',
+        phone2: 'Teléfono 2',
     },
     buttons: {
         enter: "Ingresa aqui",
@@ -84,6 +123,7 @@ es: {
         resendCode: "Reenviar código",
         terms: 'Términos y condiciones',
         noticePrivacity: 'Aviso de privaciadad',
+        save: 'Guardar'
     },
     errors: {
         requireds: 'Todos los campos con obligatorios',
@@ -104,7 +144,8 @@ es: {
     messages: {
         sendCode: 'Te enviamos un código al correo, ingresado!',
         changePassword: 'Contraseña se ha cambiando exitosamente!',
-        register: "Registro exitoso, Complete su registro!"
+        register: "Registro exitoso, Complete su registro!",
+        registerCompleted: 'Registro completado exitosamento, Bienvenido'
     },
     global: {
         signIn:  'Ingresar',
@@ -117,6 +158,13 @@ es: {
         brokerCarrier: 'Broker (Transportista)',
         fisica: 'Persona fisica',
         moral: 'Persona moral',
+        helpSelected: 'Presione para seleccionar',
+        selected: 'Seleccionado',
+        removeSelected: 'Presione para remover selecion',
+        emptyList: 'Lista vacia',
+        notFound:  'Oops! No se encontro coincidencias.',
+        infoUser: 'Información personal',
+        footer: 'ETA VIAPORTE TODOS LOS DERECHOS RESERVADOS',
     },
     login: {
         title: 'Iniciar sesión',

src/views/CompleteRegisterView.vue

@@ -118,7 +118,7 @@
         }
         /////// Datos debug ///////
         notifications.show = true;
-        notifications.text = 'Los datos se llenaron correctamente';
+        notifications.text = t('messages.registerCompleted');
 
         loading.value = false;
         router.push({name: 'home'});
@@ -159,11 +159,11 @@
 
    const validatiosUser = () => {
         if(user.name.trim().length < 3) {
-            return 'Ingresa nombre(s) valido';
+            return t('errors.name');
         } else if(user.lastName.trim().length < 2) {
-            return 'Ingresa apellido(s) valido';
+            return t('errors.lastname');
         } else if(user.phone1.trim().length < 10) {
-            return 'Ingresa teléfono valido';
+            return t('errors.phone');
         } else {
             return '';
         }
@@ -229,49 +229,49 @@
             <h2>{{ t('login.companyData') }}</h2>
             <div class="divider mt-2 mb-4"></div>
             <Custominput
-                label="¿Cuál es el nombre de la empresa? *"
                 type="text"
+                :label="t('labels.questionCompany') + '*'"
                 name="name"
                 :filled="false"
                 v-model:field="company.name"
             />
             <Custominput
-                label="¿Cuál es el RFC de la empresa? *"
+                :label="t('labels.questionRfc') + '*'"
                 type="text"
                 name="rfc"
                 :filled="false"
                 v-model:field="company.rfc"
             />
             <div class="mb-4">
-                <label class="custom-label">¿A que segmentos pertenece la empresa? *</label>
+                <label class="custom-label">{{ t('labels.questionSegments') }} *</label>
                 <Segments 
                     v-model="company.segments" 
                     :multiple="true"
                 />
             </div>
             <div class="mb-4">
-                <label class="custom-label">¿Cuáles son las locaciones de carga de la empresa por estado? *</label>
+                <label class="custom-label">{{ t('labels.questionSates') }} *</label>
                 <States 
                     v-model="company.states"
                     :multiple="true"
                 />
             </div>
             <div class="mb-4">
-                <label class="custom-label">¿Cuáles son las locaciones de carga de la empresa por municipio? *</label>
+                <label class="custom-label">{{ t('labels.questionCities') }} *</label>
                 <Cities 
                     v-model="company.cities"
                     :multiple="true"
                 />
             </div>
             <div class="mb-4">
-                <label class="custom-label">¿Qué tipo de transportes utiliza la empresa? *</label>
+                <label class="custom-label">{{ t('labels.questionTrucks') }} *</label>
                 <TruckTypes 
                     v-model="company.truckTypes"
                     :multiple="true"
                 />
             </div>
             <Custominput
-                label="Información adicional de la empresa:"
+                :label="t('labels.infoCompanies')"
                 type="text"
                 name="description"
                 :filled="false"
@@ -287,17 +287,17 @@
                     class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> {{ t('buttons.back') }}</a>
             </div>
             <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
-            <h2>Información personal</h2>
+            <h2>{{ t('global.infoUser') }}</h2>
             <div class="divider mt-2 mb-4"></div>
             <Custominput
-                label="Nombres(s):"
+                :label=" t('labels.names') +'*'"
                 type="text"
                 name="name"
                 :filled="false"
                 v-model:field="user.name"
             />
             <Custominput
-                label="Apellidos(s):"
+            :label=" t('labels.lastnames') +'*'"
                 type="text"
                 name="lastname"
                 :filled="false"
@@ -305,7 +305,7 @@
             />
             <div class="content-phone">
                 <Custominput
-                    label="Teléfono 1: *"
+                    :label=" t('labels.phone1') +'*'"
                     type="number"
                     name="phone1"
                     :step="1"
@@ -313,7 +313,7 @@
                     v-model:field="user.phone1"
                 />
                 <Custominput
-                    label="Teléfono 2:"
+                :label=" t('labels.phone2')"
                     type="number"
                     name="phone2"
                     :step="1"