ADD: cart note added to delivery step

assets/css/main.scss

@@ -7,12 +7,12 @@
 
   h2,
   .h2 {
-    @apply mb-5 mt-0 font-heading text-3xl leading-tight text-primary;
+    @apply mb-5 mt-0 font-heading text-3xl leading-tight ;
   }
 
   h1,
   .h1 {
-    @apply mb-5 mt-0 font-heading text-4xl leading-tight text-primary;
+    @apply mb-5 mt-0 font-heading text-4xl leading-tight ;
   }
 
   .backdrop {
@@ -21,6 +21,25 @@
   .icon {
     font-size: 24px;
   }
+  .modal-popup {
+    .modal-box {
+      .popup {
+        &__content {
+          @apply flex flex-col items-center;  
+
+          textarea {
+            @apply w-full;
+          }
+          .modal-btn {
+            @apply px-2 btn btn-primary btn-sm mt-2  py-1;
+          }
+
+        }
+      }
+    }
+
+  }
+
   .form-control {
     .label,
     label {
@@ -34,4 +53,6 @@
       }
     }
   }
+
+
 }

components/account/AccountLogin.vue

@@ -65,7 +65,7 @@
           <span class="footer-content__text">
             {{ t('account.login.not_yet_account') }}
           </span>
-          <nuxt-link class="footer-content__link" :to="localePath('/account/register')">
+          <nuxt-link class="footer-content__link" :to="localePath({path: '/account/register'})">
             {{ t('account.login.create_account') }}
           </nuxt-link>
         </p>

components/cart/checkout/Checkout.vue

@@ -208,7 +208,7 @@ const localePath = useLocalePath()
 const cartService = useShopinvaderService('cart')
 const cart = cartService?.getCart() || ref(null)
 const { t } = useI18n()
-const displayCart = ref(false)
+const displayCart = ref(true)
 
 /** Default steps of the checkout funnel */
 const defaultSteps: checkoutStep[] = [

components/cart/checkout/CheckoutDelivery.vue

@@ -93,11 +93,56 @@
           </cart-total>
         </slot>
       </div>
+      <div class="checkout-delivery__message">
+        <slot name="delivery-message" :opened="opened">
+          <cart-checkout-delivery-message :opened="opened">
+            <template #info-message> </template>
+            <template #message-button>
+              <div class="msg-btn-wrapper">
+                <button
+                  type="button"
+                  class="msg-btn"
+                  @click="opened = !opened"
+                >
+                  <span class="msg-btn__label"> {{ $t('cart.delivery.message-btn') }}</span>
+                  <icon name="mdi:message-outline" class="msg-btn__icon" />
+                </button>
+              </div>
+            </template>
+            <template #action="{ opened }">
+              <modal-popup :opened="opened" @close="onClose">
+                <template #content>
+                  <div class="popup__content ">
+                    <textarea
+                      v-model="messageContent"
+                      class="textarea"
+                      rows="4"
+                      :placeholder="t('cart.delivery.message-label')"
+                    >
+                    </textarea>
+                    <button
+                      type="button"
+                      class="modal-btn "
+                      @click="onMessageSubmit"
+                    >
+                    {{t('cart.delivery.message-btn-label')}}
+                    </button>
+                  </div>
+                </template>
+              </modal-popup>
+            </template>
+          </cart-checkout-delivery-message>
+        </slot>
+      </div>
       <div class="checkout-delivery__footer">
-        <button type="button" class="btn btn-ghost" @click="back">
-          <icon name="left"></icon>
-          {{ t('cart.back') }}
-        </button>
+        <slot name="footer" :back="back" :opened="opened">
+          <div>
+            <button type="button" class="btn btn-ghost" @click="back">
+              <icon name="left"></icon>
+              {{ t('cart.back') }}
+            </button>
+          </div>
+        </slot>
       </div>
     </template>
     <div v-else class="checkout-delivery__summary">
@@ -121,18 +166,30 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { CartTotal, DeliveryGeneric, Spinner } from '#components'
+import {
+  CartTotal,
+  DeliveryGeneric,
+  Spinner,
+  ModalPopup,
+  CartCheckoutDeliveryMessage
+} from '#components'
 import type { DeliveryCarrier } from '#models'
+import type { Cart } from '@shopinvader/cart'
 interface CarrierWithComponent extends DeliveryCarrier {
   component: any
   carrier: DeliveryCarrier
 }
+const opened = ref(false)
+
 const emit = defineEmits({
   /** Emit to go to the next step */
   next: () => true,
   /** Emit to go back to the previous step */
-  back: () => true
+  back: () => true,
+  /** Emit to close de popup modal */
+  close: () => true
 })
+
 /**
  * Checkout delivery step.
  * This component is used in the Checkout funnel.
@@ -159,6 +216,7 @@ const selectedCarrier = ref(null as DeliveryCarrier | null)
 const carriers = shallowRef([] as CarrierWithComponent[])
 const error = ref(null as string | null)
 const loading = ref(false)
+const messageContent = ref('')
 
 const hasValidCarrier = computed(() => {
   if (selectedCarrier?.value) {
@@ -178,6 +236,29 @@ onMounted(async () => {
   await fetchCarriers()
 })
 
+const onClose = () => {
+  opened.value = false
+  emit('close')
+}
+const onMessageSubmit = async () => {
+  const cartService = useShopinvaderService('cart')
+  const cart = cartService.getCart()
+  if (cart?.value) {
+    cart.value.note = messageContent.value
+
+
+    try {
+      loading.value = true
+      if (cart?.value) {
+        await cartService.update(cart.value)
+        fetchCarriers()
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  }
+  opened.value = false
+}
 const next = () => {
   if (hasValidCarrier.value) {
     emit('next')
@@ -285,14 +366,30 @@ const selectCarrier = async (carrier: DeliveryCarrier) => {
     @apply col-span-3 flex flex-col justify-between;
   }
   &__footer {
-    @apply col-span-3 flex justify-between;
+    @apply col-span-3 flex flex-col justify-between;
   }
   &__error {
     @apply col-span-3;
   }
   &__loading {
     @apply col-span-3 flex h-full flex-col items-center justify-center gap-4 md:col-span-2;
   }
+  &__message {
+    @apply max-md:col-span-3 ;
+    .msg-btn-wrapper {
+      @apply flex items-center;
+      .msg-btn {
+        @apply px-4 md:px-6 btn-outline btn btn-primary btn-sm  flex items-center;
+        &__label {
+
+        }
+        &__icon {
+          @apply text-[0.85rem];
+        }
+
+      }
+    }
+  }
   &__summary {
     @apply col-span-3 md:col-span-2;
     .method {

components/cart/checkout/CheckoutDeliveryMessage.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="message-wrapper">
+    <div class="message-wrapper__content">
+      <slot name="info-message">
+        <icon name="info" class="message-icon" />
+        <span class="message-text">{{ t('cart.delivery.message-text') }}</span>
+      </slot>
+      <slot name="message-button"> </slot>
+    </div>
+  </div>
+  <slot name="action" :opened="opened"> </slot>
+</template>
+<script setup lang="ts">
+const { t } = useI18n()
+defineProps({
+  opened: {
+    type: Boolean,
+    required: true
+  }
+})
+</script>
+<style lang="scss">
+.checkout-delivery__message {
+  @apply w-full;
+  .message-wrapper {
+  @apply  text-xs w-full rounded border border-info p-4 transition-all duration-300 ease-in-out hover:border-primary hover:shadow-md;
+  &__content {
+    @apply flex justify-between items-center p-3;
+
+    .message-icon {
+      @apply text-info flex-none mr-1;
+
+    }
+    .message-text {
+      @apply grow;
+    }
+  }
+}
+}
+
+</style>

components/global/InputQty.vue

@@ -114,7 +114,7 @@ export default {
 </script>
 <style lang="scss">
 .input-qty {
-  @apply input input-bordered flex items-center gap-2;
+  @apply  input input-bordered  flex items-center ;
   &__input {
     @apply grow text-center;
     appearance: textfield;

components/global/ModalPopup.vue

@@ -0,0 +1,59 @@
+<template>
+  <Teleport to="#header-target">
+    <dialog ref="message" class="modal-popup" :class="classContent">
+        <div class="modal-box">
+          <form method="dialog">
+            <button  @click="$emit('close')" class="btn btn-circle btn-ghost btn-sm absolute right-2 top-2">✕</button>
+          </form>
+          <slot name="content">
+          </slot>
+        </div>
+    </dialog>
+  </Teleport>
+</template>
+<script setup lang="ts">
+const message = ref<HTMLElement | null>(null);
+const props = defineProps({
+  opened: {
+    type: Boolean,
+    default: false,
+    required: true,
+  },
+  classContent: {
+    type: String,
+    default: ''
+  },
+})
+watch( () => props.opened, (opened) => {
+  if(document?.body) {
+    if (opened && message?.value) {
+      message?.value?.showModal()
+    } else {
+      message?.value?.close()
+    }
+  }
+}, { immediate: true });  
+
+onMounted(() => {
+  if(document?.body) {
+      if (props.opened) {
+            message?.value.showModal()
+          } else {
+            message?.value.close()
+          }
+    }
+})
+const emit = defineEmits(['close', 'submit'])
+const submit= () =>  { 
+     emit('close')
+}
+   const onClose = () => {
+     emit('close')
+   }
+</script>
+
+<style lang="scss">
+.modal-popup {
+  @apply modal;
+}
+</style>

components/global/header/HeaderNav.vue

@@ -124,9 +124,9 @@ const { data: categories, status } = await useLazyAsyncData('categories', async
               }
             }
             .item__level2 {
-              @apply flex flex-col border-l border-black pl-3;
+              @apply flex flex-col pl-3;
               .level2__item {
-                @apply border-b py-2;
+                @apply border-b-0 py-2;
               }
               ul {
                 @apply pl-3;

components/global/header/HeaderUser.vue

@@ -33,7 +33,7 @@ const next = async () => {
 </script>
 <style lang="scss">
 .header-user {
-  @apply relative flex pb-5;
+  @apply relative flex;
   &--logged {
     .button {
       &__label {

components/product/ProductDetail.vue

@@ -277,7 +277,7 @@ try {
     @apply absolute left-10 top-16 z-10;
   }
   &__header {
-    @apply w-full flex-grow;
+    @apply w-full flex-grow max-md:flex-col;
   }
   &__image {
     @apply w-full py-4 md:w-1/2 md:pr-5 lg:w-3/5;
@@ -286,9 +286,9 @@ try {
     }
   }
   &__content {
-    @apply w-full pt-5 md:w-1/2 md:px-2 lg:w-2/5;
+    @apply w-full lg:pt-5 md:w-1/2 md:px-2 lg:w-2/5;
     .content {
-      @apply sticky top-24;
+      @apply sticky lg:top-24 lg:p-2 pt-0 ;
       &__header {
         @apply order-3 mb-4 border-b;
         .header {
@@ -325,7 +325,7 @@ try {
         }
       }
       &__price {
-        @apply mt-4 min-h-48 border-t sm:min-h-14;
+        @apply mt-4  min-h-32 border-t sm:min-h-14;
       }
       &__cart {
         @apply sm:min-h-28;