añadir los banners y ajustes checkout

src/components/quasar-components/carousel/VerticalCarouselImgs.vue

@@ -10,10 +10,10 @@ import { useVerticalCarouselImgs } from "src/hooks/useVerticalCarouselImgs";
 export default defineComponent({
   name: "vertical-carousel-imgs",
   props: {
-    imgsArr: {
+    banners: {
       type: Array,
       default: () => [""],
-    },
+    }
   },
   components: { IconSearch, Calendar, PostalCode },
   setup() {
@@ -45,65 +45,42 @@ export default defineComponent({
 </script>
 
 <template>
-  <div
+  <div ref="target" class="vertical-carousel-container" style="min-height: 100dvh">
-    ref="target"
+    <q-carousel navigation-position="right" style="min-height: 100dvh" v-model="slide" navigation autoplay infinite
-    class="vertical-carousel-container"
+      animated v-if="!!banners.length" class="custom-carousel">
-    style="min-height: 100dvh"
+      <q-carousel-slide v-for="(item, i) in banners" :key="i" :name="item.title" :img-src="item.image">
-  >
+        <div class="vertical-carousel-content">
-    <q-carousel
+          <header class="carousel-content-header">
-      navigation-position="right"
+            <h1 class="carousel-header-title">
-      style="min-height: 100dvh"
+              {{ item.title }}
-      v-model="slide"
+            </h1>
-      navigation
+          </header>
-      autoplay
+
-      infinite
+          <form @submit="onSubmit" class="carousel-content-body">
-      animated
+            <div class="carousel-content-item">
-      v-if="!!imgsArr.length"
+              <PostalCode v-model="postalCode" v-bind:bindValue="postalCodeAttrs" :setFieldError="setFieldError" />
-      class="custom-carousel"
+            </div>
-    >
+
-      <q-carousel-slide
+            <div class="carousel-content-item">
-        v-for="(img, i) in imgsArr"
+              <Calendar v-model="calendar" v-bind:bindValue="calendarAttrs" :setValues="setValues" />
-        :key="i"
+            </div>
-        :name="img"
+
-        :img-src="img"
+            <q-btn type="submit" class="btn carousel-content-item">
-      />
+              <IconSearch /> ver disponibilidad
+            </q-btn>
+          </form>
+        </div>
+      </q-carousel-slide>
     </q-carousel>
 
-    <div class="vertical-carousel-content">
-      <header class="carousel-content-header">
-        <h1 class="carousel-header-title">
-          Regala un verano lleno de flores y plantas
-        </h1>
-      </header>
 
-      <form @submit="onSubmit" class="carousel-content-body">
-        <div class="carousel-content-item">
-          <PostalCode
-            v-model="postalCode"
-            v-bind:bindValue="postalCodeAttrs"
-            :setFieldError="setFieldError"
-          />
-        </div>
-
-        <div class="carousel-content-item">
-          <Calendar
-            v-model="calendar"
-            v-bind:bindValue="calendarAttrs"
-            :setValues="setValues"
-          />
-        </div>
-
-        <q-btn type="submit" class="btn carousel-content-item">
-          <IconSearch /> ver disponibilidad
-        </q-btn>
-      </form>
-    </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .vertical-carousel-container {
   position: relative;
+
   & .custom-carousel {
     user-select: none;
   }
@@ -116,6 +93,7 @@ export default defineComponent({
     bottom: 110px;
     width: min(100%, 845px);
     margin: 0 auto;
+
     & .carousel-content-header {
       display: flex;
       flex-direction: column;
@@ -123,6 +101,7 @@ export default defineComponent({
       color: $white;
       text-align: center;
       margin-bottom: 27px;
+
       & .carousel-header-title {
         font-size: $font-35;
         font-weight: 500;
@@ -161,6 +140,7 @@ export default defineComponent({
         padding-inline: 53px 34px;
         flex: 1;
         position: relative;
+
         &:first-child::after {
           content: "";
           position: absolute;
@@ -170,11 +150,14 @@ export default defineComponent({
           right: 0;
           top: 27px;
           bottom: 29px;
+
           @media only screen and (max-width: $med-md) {
             display: none;
           }
         }
+
         &.btn {
+
           &:focus,
           &:focus-visible {
             outline: none;
@@ -205,6 +188,7 @@ export default defineComponent({
       & .carousel-content-header {
         gap: 15px;
         margin-bottom: 49px;
+
         & .carousel-header-title {
           font-size: $font-28;
           line-height: 34px;
@@ -215,16 +199,20 @@ export default defineComponent({
           font-weight: 500;
         }
       }
+
       & .carousel-content-body {
         margin-bottom: initial;
         flex-direction: column;
         width: min(100%, 276px);
         margin: 0 auto;
+
         & .carousel-content-item {
           padding-block: 24px;
+
           &:first-child {
             border-radius: 10px 10px 0px 0px;
           }
+
           &:last-child {
             border-radius: 0 0 10px 10px;
           }
@@ -236,8 +224,7 @@ export default defineComponent({
       }
     }
 
-    @media only screen and (max-width: $med-md) {
+    @media only screen and (max-width: $med-md) {}
-    }
 
     @media only screen and (max-height: 360px) {
       /* background-color: tomato; */

src/hooks/useCheckoutForm.js

@@ -241,7 +241,6 @@ export function useCheckoutForm() {
         type: values.paymentMethod,
       };
       addItem("payment", values.paymentMethod);
-
       const typeObj = {
         paypal: async () => {
           const {
@@ -254,8 +253,10 @@ export function useCheckoutForm() {
           const {
             data: { data },
           } = await apiBack.post("payment", productData);
-          redsysData.value = data;
+          redsysData.value = await data;
-
+          document.querySelector("input[name='Ds_SignatureVersion']").value = redsysData.value.Ds_SignatureVersion;
+          document.querySelector("input[name='Ds_MerchantParameters']").value = redsysData.value.Ds_MerchantParameters;
+          document.querySelector("input[name='Ds_Signature']").value = redsysData.value.Ds_Signature;
           redsysFormRef.value.click();
         },
         default: () => {

src/pages/CheckoutPage.vue

@@ -151,29 +151,19 @@ export default defineComponent({
 
       <div class="checkout-container">
         <div class="checkout-steps">
-          <div
+          <div v-for="({ active, description, name, value }, i) in stepsFormated" class="step-item-container" :key="i">
-            v-for="({ active, description, name, value }, i) in stepsFormated"
-            class="step-item-container"
-            :key="i"
-          >
             <div class="step-item">
               <div class="circle-step-container">
                 <span class="border-step" :class="[i == 0 && 'transparent']" />
 
-                <div
+                <div class="circle-step" :class="[
-                  class="circle-step"
+            (active || (meta.valid && i == 1) || !checkoutBlock) &&
-                  :class="[
+            'active',
-                    (active || (meta.valid && i == 1) || !checkoutBlock) &&
+          ]">
-                      'active',
-                  ]"
-                >
                   <span class="step-value">{{ value }}</span>
                 </div>
 
-                <span
+                <span class="border-step" :class="[i == stepList['data'].length - 1 && 'transparent']" />
-                  class="border-step"
-                  :class="[i == stepList['data'].length - 1 && 'transparent']"
-                />
               </div>
 
               <div class="step-content">
@@ -199,85 +189,37 @@ export default defineComponent({
 
                 <div class="checkout-fields">
                   <div class="field-control field-input">
-                    <q-input
+                    <q-input placeholder="Nombre*" name="name" type="text" v-model="name" v-bind:="nameAttrs"
-                      placeholder="Nombre*"
+                      :error="!!errors.name" :error-message="errors.name" outlined />
-                      name="name"
-                      type="text"
-                      v-model="name"
-                      v-bind:="nameAttrs"
-                      :error="!!errors.name"
-                      :error-message="errors.name"
-                      outlined
-                    />
                   </div>
 
                   <div class="field-control field-input">
-                    <q-input
+                    <q-input placeholder="Apellidos*" name="surname" type="text" v-model="surname"
-                      placeholder="Apellidos*"
+                      v-bind:="surnameAttrs" :error="!!errors.surname" :error-message="errors.surname" outlined />
-                      name="surname"
-                      type="text"
-                      v-model="surname"
-                      v-bind:="surnameAttrs"
-                      :error="!!errors.surname"
-                      :error-message="errors.surname"
-                      outlined
-                    />
                   </div>
 
                   <div class="field-control field-input">
-                    <q-input
+                    <q-input placeholder="Dirección*" name="address" type="text" v-model="address"
-                      placeholder="Dirección*"
+                      v-bind:="addressAttrs" :error="!!errors.address" :error-message="errors.address" outlined />
-                      name="address"
-                      type="text"
-                      v-model="address"
-                      v-bind:="addressAttrs"
-                      :error="!!errors.address"
-                      :error-message="errors.address"
-                      outlined
-                    />
                   </div>
 
                   <div class="field-control field-input">
-                    <q-input
+                    <q-input placeholder="Código postal*" name="postalCode" type="text" mask="#####"
-                      placeholder="Código postal*"
+                      v-model="postalCode" v-bind:="postalCodeAttrs" :error="!!errors.postalCode"
-                      name="postalCode"
+                      :error-message="errors.postalCode" ref="postalCodeRef" readonly outlined @mouseenter="showTooltip"
-                      type="text"
+                      @mouseleave="hideTooltip">
-                      mask="#####"
-                      v-model="postalCode"
-                      v-bind:="postalCodeAttrs"
-                      :error="!!errors.postalCode"
-                      :error-message="errors.postalCode"
-                      ref="postalCodeRef"
-                      readonly
-                      outlined
-                      @mouseenter="showTooltip"
-                      @mouseleave="hideTooltip"
-                    >
                       <template #after>
-                        <q-btn
+                        <q-btn to="/" :style="'--clr: #ffffff'" class="btn custom-btn-input paragraph-sm"
-                          to="/"
+                          label="EDITAR" />
-                          :style="'--clr: #ffffff'"
-                          class="btn custom-btn-input paragraph-sm"
-                          label="EDITAR"
-                        />
                       </template>
                     </q-input>
 
-                    <div
+                    <div ref="postalCodeTooltip" :style="[floatingStyles, '--clr: #117564']"
-                      ref="postalCodeTooltip"
+                      :class="['tooltip ', isHidden && 'hidden']" @mouseenter="showTooltip" @mouseleave="hideTooltip">
-                      :style="[floatingStyles, '--clr: #117564']"
-                      :class="['tooltip ', isHidden && 'hidden']"
-                      @mouseenter="showTooltip"
-                      @mouseleave="hideTooltip"
-                    >
                       <p class="paragraph-sm">
                         No se puede editar este campo
-                        <a
+                        <a href="https://www.google.com/maps" rel="noreferrer noopener" target="_blank"
-                          href="https://www.google.com/maps"
+                          class="paragraph-sm link">
-                          rel="noreferrer noopener"
-                          target="_blank"
-                          class="paragraph-sm link"
-                        >
                           ¿No conoce su código postal?
                         </a>
                       </p>
@@ -285,49 +227,23 @@ export default defineComponent({
                   </div>
 
                   <div class="field-control field-select">
-                    <q-select
+                    <q-select name="province" v-model="province" v-bind:="provinceAttrs" :error="!!errors.province"
-                      name="province"
+                      :error-message="errors.province" :options="provinceOptions" option-value="code"
-                      v-model="province"
+                      option-label="name" label="País*" stack-label map-options emit-value outlined />
-                      v-bind:="provinceAttrs"
-                      :error="!!errors.province"
-                      :error-message="errors.province"
-                      :options="provinceOptions"
-                      option-value="code"
-                      option-label="name"
-                      label="País*"
-                      stack-label
-                      map-options
-                      emit-value
-                      outlined
-                    />
                   </div>
 
                   <div class="field-control field-select">
-                    <q-input
+                    <q-input placeholder="Ciudad*" name="city" type="text" v-model="city" v-bind:="cityAttrs"
-                      placeholder="Ciudad*"
+                      :error="!!errors.city" :error-message="errors.city" outlined />
-                      name="city"
-                      type="text"
-                      v-model="city"
-                      v-bind:="cityAttrs"
-                      :error="!!errors.city"
-                      :error-message="errors.city"
-                      outlined
-                    />
                   </div>
 
                   <div class="field-control field-input telephone">
-                    <vue-tel-input
+                    <vue-tel-input v-model="phone" v-bind="phoneAttrs" :styleClasses="[
-                      v-model="phone"
+            'custom-input',
-                      v-bind="phoneAttrs"
+            !!errors.phone && 'error',
-                      :styleClasses="[
+          ]" ref="phoneInputRef" :inputOptions="{
-                        'custom-input',
+            placeholder: 'Teléfono*',
-                        !!errors.phone && 'error',
+          }" />
-                      ]"
-                      ref="phoneInputRef"
-                      :inputOptions="{
-                        placeholder: 'Teléfono*',
-                      }"
-                    />
                     <p v-if="!!errors.phone" class="error">
                       {{ errors.phone }}
                     </p>
@@ -342,57 +258,30 @@ export default defineComponent({
 
                 <div class="checkout-fields">
                   <div class="field-control field-input">
-                    <q-input
+                    <q-input placeholder="Nombre y apellidos o nombre de empresa" name="senderName" type="text"
-                      placeholder="Nombre y apellidos o nombre de empresa"
+                      v-model="senderName" v-bind:="senderNameAttrs" :error="!!errors.senderName"
-                      name="senderName"
+                      :error-message="errors.senderName" outlined />
-                      type="text"
-                      v-model="senderName"
-                      v-bind:="senderNameAttrs"
-                      :error="!!errors.senderName"
-                      :error-message="errors.senderName"
-                      outlined
-                    />
                   </div>
 
                   <div class="field-control field-input">
-                    <q-input
+                    <q-input placeholder="CIF / NIF" name="senderCifNif" type="text" v-model="senderCifNif"
-                      placeholder="CIF / NIF"
+                      v-bind:="senderCifNifAttrs" :error="!!errors.senderCifNif" :error-message="errors.senderCifNif"
-                      name="senderCifNif"
+                      outlined />
-                      type="text"
-                      v-model="senderCifNif"
-                      v-bind:="senderCifNifAttrs"
-                      :error="!!errors.senderCifNif"
-                      :error-message="errors.senderCifNif"
-                      outlined
-                    />
                   </div>
 
                   <div class="field-control field-input">
-                    <q-input
+                    <q-input placeholder="Email" name="senderEmail" type="email" v-model="senderEmail"
-                      placeholder="Email"
+                      v-bind:="senderEmailAttrs" :error="!!errors.senderEmail" :error-message="errors.senderEmail"
-                      name="senderEmail"
+                      outlined />
-                      type="email"
-                      v-model="senderEmail"
-                      v-bind:="senderEmailAttrs"
-                      :error="!!errors.senderEmail"
-                      :error-message="errors.senderEmail"
-                      outlined
-                    />
                   </div>
 
                   <div class="field-control field-input telephone">
-                    <vue-tel-input
+                    <vue-tel-input v-model="senderPhone" v-bind="senderPhoneAttrs" :styleClasses="[
-                      v-model="senderPhone"
+            'custom-input',
-                      v-bind="senderPhoneAttrs"
+            !!errors.senderPhone && 'error',
-                      :styleClasses="[
+          ]" ref="phoneSenderInputRef" :inputOptions="{
-                        'custom-input',
+            placeholder: 'Teléfono*',
-                        !!errors.senderPhone && 'error',
+          }" />
-                      ]"
-                      ref="phoneSenderInputRef"
-                      :inputOptions="{
-                        placeholder: 'Teléfono*',
-                      }"
-                    />
                     <p v-if="!!errors.senderPhone" class="error">
                       {{ errors.senderPhone }}
                     </p>
@@ -401,43 +290,19 @@ export default defineComponent({
                   <div class="field-control field-input">
                     <q-input
                       placeholder="Notas sobre tu pedido (Opcional), por ejemplo, notas especiales para la entrega"
-                      name="senderNotes"
+                      name="senderNotes" type="textarea" v-model="senderNotes" v-bind:="senderNotesAttrs"
-                      type="textarea"
+                      :error="!!errors.senderNotes" :error-message="errors.senderNotes" class="message" autogrow
-                      v-model="senderNotes"
+                      outlined />
-                      v-bind:="senderNotesAttrs"
-                      :error="!!errors.senderNotes"
-                      :error-message="errors.senderNotes"
-                      class="message"
-                      autogrow
-                      outlined
-                    />
                   </div>
                 </div>
               </div>
             </q-form>
 
-            <form
+            <form v-if="paymentMethod === 'redsys' && meta.valid" name="from"
-              v-if="paymentMethod === 'redsys' && meta.valid"
+              action="https://sis-t.redsys.es:25443/sis/realizarPago" method="POST" class="hide">
-              name="from"
+              <input type="text" name="Ds_SignatureVersion" :value="redsysData.Ds_SignatureVersion" />
-              action="https://sis-t.redsys.es:25443/sis/realizarPago"
+              <input type="text" name="Ds_MerchantParameters" :value="redsysData.Ds_MerchantParameters" />
-              method="POST"
+              <input type="text" name="Ds_Signature" :value="redsysData.Ds_Signature" />
-              class="hide"
-            >
-              <input
-                type="hidden"
-                name="Ds_SignatureVersion"
-                :value="redsysData.Ds_SignatureVersion"
-              />
-              <input
-                type="hidden"
-                name="Ds_MerchantParameters"
-                :value="redsysData.Ds_MerchantParameters"
-              />
-              <input
-                type="hidden"
-                name="Ds_Signature"
-                :value="redsysData.Ds_Signature"
-              />
               <input ref="redsysFormRef" type="submit" value="Go to pay" />
             </form>
           </div>
@@ -462,11 +327,7 @@ export default defineComponent({
 
               <div class="checkout-summary-body gray-bg">
                 <ul class="checkout-summary-list">
-                  <li
+                  <li class="checkout-summary-item" v-for="({ name, price }, index) in cart" :key="index">
-                    class="checkout-summary-item"
-                    v-for="({ name, price }, index) in cart"
-                    :key="index"
-                  >
                     <p>
                       {{ name }}
                       <span>{{ price }}€</span>
@@ -487,31 +348,18 @@ export default defineComponent({
 
             <div class="checkout-payment-methods gray-bg">
               <header class="checkout-aside-header">
-                <strong
+                <strong class="checkout-aside-title" :style="!!errors.paymentMethod && 'color: red'">
-                  class="checkout-aside-title"
-                  :style="!!errors.paymentMethod && 'color: red'"
-                >
                   Método de pago
                 </strong>
                 <p v-if="!!errors.paymentMethod"></p>
               </header>
 
               <div class="checkout-payment-body">
-                <q-radio
+                <q-radio v-model="paymentMethod" v-bind="paymentMethodAttrs" val="paypal" color="primary">
-                  v-model="paymentMethod"
-                  v-bind="paymentMethodAttrs"
-                  val="paypal"
-                  color="primary"
-                >
                   <p>Paypal</p>
                 </q-radio>
 
-                <q-radio
+                <q-radio v-model="paymentMethod" v-bind="paymentMethodAttrs" val="redsys" color="primary">
-                  v-model="paymentMethod"
-                  v-bind="paymentMethodAttrs"
-                  val="redsys"
-                  color="primary"
-                >
                   <p>Redsys</p>
                 </q-radio>
               </div>
@@ -525,13 +373,7 @@ export default defineComponent({
                 </p>
               </q-checkbox>
 
-              <q-btn
+              <q-btn flat class="btn" type="submit" form="checkout-form" :loading="isLoadingSubmit">
-                flat
-                class="btn"
-                type="submit"
-                form="checkout-form"
-                :loading="isLoadingSubmit"
-              >
                 PROCEDER AL PAGO
               </q-btn>
             </div>
@@ -585,13 +427,16 @@ export default defineComponent({
     align-items: center;
     border-radius: 50%;
     user-select: none;
+
     .step-value {
       font-family: $font-questrial;
       color: $primary-dark;
       font-size: 1.25rem;
     }
+
     &.active {
       background-color: $primary-dark;
+
       .step-value {
         color: $white;
       }
@@ -603,6 +448,7 @@ export default defineComponent({
     flex-direction: column;
     align-items: center;
     font-family: $font-questrial;
+
     h4 {
       font-size: 1rem;
       font-weight: 700;
@@ -611,6 +457,7 @@ export default defineComponent({
       margin-bottom: 4px;
       line-height: 1.3;
     }
+
     p {
       font-size: 0.875rem;
       color: $text-default;
@@ -631,6 +478,7 @@ export default defineComponent({
       width: 100%;
       margin-bottom: 21px;
       border-radius: 5px;
+
       & h3 {
         color: $text-default;
         font-weight: 600;
@@ -647,8 +495,10 @@ export default defineComponent({
     & .checkout-form {
       flex: 1 0 min(100%, 795px);
     }
+
     & .checkout-aside {
       flex: 1 0 min(100%, 329px);
+
       & .checkout-delivery-date,
       & .checkout-summary,
       & .checkout-payment-methods {
@@ -672,6 +522,7 @@ export default defineComponent({
         visibility: hidden;
         height: 0;
         overflow: hidden;
+
         &.active {
           height: min-content;
           padding-block: 16px 18px;
@@ -683,6 +534,7 @@ export default defineComponent({
 
       & .checkout-summary {
         margin-bottom: 33px;
+
         & .checkout-aside-header,
         & .checkout-summary-body,
         & .checkout-summary-footer {
@@ -691,6 +543,7 @@ export default defineComponent({
 
         & .checkout-aside-header {
           padding-block: 16px 17px;
+
           & .checkout-aside-title {
             font-family: $font-lora;
             font-weight: 600;
@@ -701,6 +554,7 @@ export default defineComponent({
 
         & .checkout-summary-body {
           padding-bottom: 23px;
+
           & p {
             font-size: $font-12;
             line-height: 21px;
@@ -713,12 +567,14 @@ export default defineComponent({
             flex-direction: column;
             gap: 4px;
             margin-bottom: 4px;
+
             & .checkout-summary-item p {
               display: flex;
               justify-content: space-between;
             }
           }
         }
+
         & .checkout-summary-footer {
           display: flex;
           justify-content: space-between;
@@ -737,19 +593,23 @@ export default defineComponent({
       & .checkout-payment-methods {
         padding: 9px 16px 20px 21px;
         margin-bottom: 21px;
+
         & .checkout-aside-header {
           margin-bottom: 14px;
         }
+
         & .checkout-payment-body {
           display: flex;
           flex-direction: column;
           gap: 12px;
+
           & p {
             width: min(100%, 200px);
             display: inline-flex;
             justify-content: space-between;
             gap: 31px;
             font-size: $font-12;
+
             & .card-flags {
               display: inline-flex;
               align-items: center;
@@ -773,6 +633,7 @@ export default defineComponent({
         display: flex;
         flex-direction: column;
         gap: 23px;
+
         & .terms p {
           margin-left: 10px;
           font-size: $font-12;
@@ -799,29 +660,36 @@ export default defineComponent({
     width: min(100%, 499px);
     margin: 122px auto 0;
     text-align: center;
+
     & .checkout-success-title {
       margin-bottom: 26px;
     }
+
     & .checkout-success-body {
       & .checkout-success-content {
         background-color: $secondary-5;
         padding: 30px 46px 42px 38px;
         border-radius: 5px 5px 0px 0px;
+
         & .checkout-success-list {
           display: flex;
           flex-direction: column;
           gap: 28px;
+
           & .checkout-success-item {
             display: flex;
             flex: 1;
+
             & .checkout-item-content {
               display: flex;
               justify-content: space-between;
               flex: 1;
               min-height: 61px;
+
               & .checkout-product-details {
                 display: flex;
                 gap: 14px;
+
                 & .checkout-product-img {
                   object-fit: cover;
                   width: 54px;
@@ -875,8 +743,9 @@ export default defineComponent({
   & .form-fields-container {
     display: flex;
     flex-wrap: wrap;
-    &.delivery {
+
-    }
+    &.delivery {}
+
     &.sender {
       margin-top: 12px;
     }
@@ -886,6 +755,7 @@ export default defineComponent({
       display: flex;
       flex-wrap: wrap;
       gap: 12px 9px;
+
       @media only screen and (max-width: $med-lg) {
         gap: 15px;
       }
@@ -896,6 +766,7 @@ export default defineComponent({
 
       &.telephone {
         flex: 0 0 calc(50% - 5px);
+
         @media only screen and (max-width: $med-lg) {
           flex: 1 0 min(100%, 390px);
         }
@@ -905,10 +776,12 @@ export default defineComponent({
         label {
           padding-bottom: 10px;
         }
+
         & .q-field__control {
           background-color: #fff;
           height: 40px;
           border: 1px solid $primary-light;
+
           & input {
             padding: 0px 0px 0px 20px;
             font-family: $font-questrial;
@@ -923,20 +796,24 @@ export default defineComponent({
           &.text-negative {
             border-color: $negative;
           }
+
           &::after,
           &::before {
             display: none;
           }
         }
+
         .q-field__marginal {
           height: 40px;
           padding-right: 30px;
         }
       }
+
       .q-field--error .q-field__bottom {
         padding-top: 4px;
         font-size: 0.675rem;
       }
+
       &.field-select {
         .q-field__control {
           min-height: initial;
@@ -944,23 +821,28 @@ export default defineComponent({
           height: 40px;
           padding: 0px 30px;
           border: 1px solid $primary-light;
+
           .q-field__native span {
             display: none;
           }
         }
+
         .q-field__append {
           height: 40px;
         }
+
         .q-field__label {
           font-family: $font-questrial;
           color: $text-default !important;
         }
+
         .q-field__control-container {
           padding-top: 0;
           height: 36px;
         }
       }
     }
+
     @media only screen and (max-width: $med-lg) {
       &.sender {
         margin-top: 45px;
@@ -972,6 +854,7 @@ export default defineComponent({
     padding: 10.5px 1px;
     border-radius: 4px;
     transition: 200ms ease-in-out;
+
     &:hover {
       border-color: $black;
     }
@@ -1007,4 +890,4 @@ export default defineComponent({
     font-family: "Roboto" !important;
   }
 }
-</style>
+</style>

src/pages/HomePage.vue

@@ -2,6 +2,7 @@
 import { storeToRefs } from "pinia";
 import { defineComponent, onBeforeMount, ref } from "vue";
 
+import { apiBack } from "src/boot/axios";
 import VerticalCarouselImgs from "src/components/quasar-components/carousel/VerticalCarouselImgs.vue";
 import Swiper from "src/components/swiper/Swiper.vue";
 import Card from "src/components/ui/Card.vue";
@@ -18,6 +19,7 @@ export default defineComponent({
     Card,
   },
   setup() {
+    const banners = ref()
     const mobileStore = useMobileStore();
     const { isCarouselVisible, isOpenNav, screenWidth } =
       storeToRefs(mobileStore);
@@ -26,35 +28,24 @@ export default defineComponent({
     const { getProducts } = cartStore;
     const { products, homeSection } = storeToRefs(cartStore);
 
+    async function getBanners() {
+      const { data: { data } } = await apiBack("/banners/")
+      return data
+    }
+
+
     onBeforeMount(async () => {
       await getProducts();
-    });
+      banners.value = await getBanners();
-
-    const slidesContent = ref([]);
-
-    onBeforeMount(async () => {
-      const images = await new Promise((resolve) => {
-        setTimeout(() => {
-          resolve([
-            "assets/1.jpg",
-            "assets/2.jpg",
-            "assets/3.jpg",
-            "assets/4.jpg",
-            "assets/5.jpg",
-          ]);
-        }, 1000);
-      });
-
-      slidesContent.value = images;
     });
 
     return {
       isCarouselVisible,
-      slidesContent,
       screenWidth,
       homeSection,
       isOpenNav,
       products,
+      banners
     };
   },
 });
@@ -63,7 +54,7 @@ export default defineComponent({
 <template>
   <q-page>
     <q-no-ssr>
-      <VerticalCarouselImgs :imgsArr="slidesContent" class="home-carousel" />
+      <VerticalCarouselImgs v-if="banners" :banners="banners" class="home-carousel" />
     </q-no-ssr>
 
     <section class="products-section" ref="homeSection">
@@ -77,25 +68,15 @@ export default defineComponent({
 
       <div class="products-body">
         <Container cardContainer>
-          <template
+          <template v-for="({ id, name, price, image, isNew }, i) in products?.data" :key="id">
-            v-for="({ id, name, price, image, isNew }, i) in products?.data"
+            <Card v-if="i < 8" :id="id" :price="price" :title="name" :imgSrc="image" :isNew="isNew"
-            :key="id"
+              imgClass="list-products" size="md-card" />
-          >
-            <Card
-              v-if="i < 8"
-              :id="id"
-              :price="price"
-              :title="name"
-              :imgSrc="image"
-              :isNew="isNew"
-              imgClass="list-products"
-              size="md-card"
-            />
           </template>
         </Container>
 
         <RouterLink class="btn rounded outlined" to="/categoria/all">
-          Ver todos los diseños <IconArrowCircleFilledRight />
+          Ver todos los diseños
+          <IconArrowCircleFilledRight />
         </RouterLink>
       </div>
     </section>
@@ -112,20 +93,10 @@ export default defineComponent({
       <div class="products-selection-body">
         <q-no-ssr>
           <Swiper>
-            <template
+            <template v-for="({ id, isNew, price, name, image }, i) in products.data" :key="id">
-              v-for="({ id, isNew, price, name, image }, i) in products.data"
-              :key="id"
-            >
               <swiper-slide class="swiper-slide" v-if="i < 10">
-                <Card
+                <Card :id="id" :price="price" :title="name" :imgSrc="image" :isNew="isNew" imgClass="carousel"
-                  :id="id"
+                  size="lg-card" />
-                  :price="price"
-                  :title="name"
-                  :imgSrc="image"
-                  :isNew="isNew"
-                  imgClass="carousel"
-                  size="lg-card"
-                />
               </swiper-slide>
             </template>
           </Swiper>
@@ -134,7 +105,8 @@ export default defineComponent({
 
       <footer class="products-selection-footer">
         <RouterLink class="btn rounded outlined pd-icon" to="/">
-          Ver todas las plantas <IconArrowCircleFilledRight />
+          Ver todas las plantas
+          <IconArrowCircleFilledRight />
         </RouterLink>
       </footer>
     </section>
@@ -177,11 +149,9 @@ export default defineComponent({
   scroll-margin: 30px;
 
   & .products-section-header {
-    & .products-header-title {
+    & .products-header-title {}
-    }
 
-    & .products-header-paragraph {
+    & .products-header-paragraph {}
-    }
   }
 
   & .products-body {
@@ -193,8 +163,7 @@ export default defineComponent({
   }
 
   @media only screen and (max-width: $med-xmd) {
-    & .products-body {
+    & .products-body {}
-    }
   }
 }