Add title to address step

src/pages/Ecomerce/CheckoutView.vue

@@ -326,7 +326,7 @@ onMounted(async () => {
                     v-if="step.name === 'method'"
                     class="column justify-center items-center"
                 >
-                    <span class="text-h6 text-bold tex q-mb-md text-center">
+                    <span class="text-h6 step-title">
                         {{ t('receiveOrPickOrder') }}
                     </span>
                     <div class="column" style="max-width: max-content">
@@ -347,7 +347,7 @@ onMounted(async () => {
                     v-if="step.name === 'date'"
                     class="flex justify-center items-center"
                 >
-                    <span class="text-h6 text-bold tex q-mb-md text-center">
+                    <span class="text-h6 step-title">
                         {{ t('orderDateDelivery') }}
                     </span>
                     <QDate
@@ -360,8 +360,17 @@ onMounted(async () => {
                 <!-- Address step -->
                 <QList
                     v-if="step.name === 'address'"
-                    class="vn-w-xs q-gutter-y-sm"
+                    class="vn-w-xs q-gutter-y-sm column"
                 >
+                    <span class="text-h6 step-title">
+                        {{
+                            t(
+                                orderForm.method === 'PICKUP'
+                                    ? 'addressStepQuestionPickup'
+                                    : 'addressStepQuestion'
+                            )
+                        }}
+                    </span>
                     <QItem
                         v-for="(address, index) in addresses"
                         :key="index"
@@ -387,7 +396,7 @@ onMounted(async () => {
                     v-if="step.name === 'agency'"
                     class="flex justify-center items-center"
                 >
-                    <span class="text-h6 text-bold tex q-mb-md text-center">
+                    <span class="text-h6 step-title">
                         {{ t('orderDateDelivery') }}
                     </span>
                     <VnSelect
@@ -401,7 +410,7 @@ onMounted(async () => {
                     v-if="step.name === 'pickup'"
                     class="flex justify-center items-center"
                 >
-                    <span class="text-h6 text-bold tex q-mb-md text-center">
+                    <span class="text-h6 step-title">
                         {{ t('pickupWarehouse') }}
                     </span>
                     <VnSelect
@@ -416,7 +425,7 @@ onMounted(async () => {
                     v-if="step.name === 'confirm'"
                     class="flex column justify-center items-center"
                 >
-                    <span class="text-h6 text-bold tex q-mb-md text-center">
+                    <span class="text-h6 step-title">
                         {{ t('confirmData') }}
                     </span>
                     <div class="column vn-w-xs full-width">
@@ -447,7 +456,14 @@ onMounted(async () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.step-title {
+    min-width: 100%;
+    margin-bottom: 16px;
+    text-align: center;
+    font-weight: bold;
+}
+</style>
 
 <i18n lang="yaml">
 en-US:
@@ -469,6 +485,8 @@ en-US:
     pleaseSelectAWarehouse: Please select a store
     warehouse: Warehouse
     pickup: Pickup
+    addressStepQuestion: Where do you want to receive the order?
+    addressStepQuestionPickup: To which address do you want to associate the order? (Optional)
 es-ES:
     receiveOrPickOrder: ¿Quieres recibir o recoger el pedido?
     receiveOrder: Recibir en mi tienda
@@ -488,6 +506,8 @@ es-ES:
     pleaseSelectAWarehouse: Por favor elige un almacén
     warehouse: Almacén
     pickup: Recogida
+    addressStepQuestion: ¿Dónde quieres recibir el pedido?
+    addressStepQuestionPickup: ¿A qué dirección quieres asociar el pedido? (Opcional)
 ca-ES:
     receiveOrPickOrder: Vols rebre o recollir la comanda?
     receiveOrder: Rebre en mi tenda
@@ -507,6 +527,8 @@ ca-ES:
     pleaseSelectAWarehouse: Si us plau tria un magatzem
     warehouse: Magatzem
     pickup: Recollida
+    addressStepQuestion: On vols rebre la comanda?
+    addressStepQuestionPickup: A què direcció vols associar la comanda? (Opcional)
 fr-FR:
     receiveOrPickOrder: Voulez-vous recevoir ou récuperer l'ordre?
     receiveOrder: Livraison à la boutique
@@ -526,6 +548,8 @@ fr-FR:
     pleaseSelectAWarehouse: Veuillez choisir un entrepôt
     warehouse: Entrepôt
     pickup: Retrait
+    addressStepQuestion: Adresse livraison?
+    addressStepQuestionPickup: À quelle adresse voulez-vous associer la commande? (Optionnel)
 pt-PT:
     receiveOrPickOrder: Queres receber ou levantar a encomenda?
     receiveOrder: Receber na minha loja
@@ -544,4 +568,6 @@ pt-PT:
     pleaseSelectAWarehouse: Por favor, escolha um armazém
     warehouse: Armazém
     pickup: Recolhida
+    addressStepQuestion: Onde queres receber a encomenda?
+    addressStepQuestionPickup: Para qual endereço deseja associar o pedido? (Opcional)
 </i18n>