ADD: cart note added to delivery step

assets/css/main.scss

@@ -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/cart/checkout/Checkout.vue

@@ -205,7 +205,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,28 @@ 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
+    console.log(cart?.value?.note, 'cart')
+
+    try {
+      loading.value = true
+      if (cart?.value) {
+        await cartService.update(cart.value)
+      }
+    } catch (err) {
+      console.log(err)
+    }
+  }
+  opened.value = false
+}
 const next = () => {
   if (hasValidCarrier.value) {
     emit('next')
@@ -285,14 +365,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,37 @@
+<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">
+.message-wrapper {
+  @apply w-full text-xs;
+  &__content {
+    @apply flex justify-between items-center rounded border border-info p-4 transition-all duration-300 ease-in-out hover:border-primary hover:shadow-md;
+
+    .message-icon {
+      @apply text-info flex-none mr-1;
+
+    }
+    .message-text {
+      @apply grow;
+    }
+  }
+}
+</style>

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?.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>

locales/fr-FR.json

@@ -121,6 +121,10 @@
       "discount": "Remise"
     },
     "delivery": {
+      "message-btn": "Message",
+      "message-text": "Un message à nous faire parvenir ?",
+      "message-label": "Votre message ici...",
+      "message-btn-label": "Envoyer",
       "method": {
         "title": "Méthode de livraison",
         "intro": "Sélectionnez une méthode de livraison",
@@ -434,5 +438,10 @@
       "thankyou_title": "Merci pour votre message !",
       "thankyou_description": "Nous reviendrons vers vous au plus vite."
     }
+  },
+  "modal-popup":{
+    "title": "Laissez- nous un message",
+    "placeholder": "Votre message...",
+    "btn-label": "Envoyer",
   }
 }

services/auth/AuthCredentialService.ts

@@ -133,16 +133,18 @@ export class AuthCredentialService extends AuthService {
    * @returns
    */
   override async registerUser(
-    name: string,
+    firstname: string,
+    lastname: string,
     password: string,
     login: string
   ): Promise<AuthUserCredential | null> {
     let request = null
-    if (login && password && name) {
+    if (login && password && firstname && lastname) {
       request = await this.ofetch(this.urlEndpointAuth + '/register', {
         method: 'POST',
         body: {
-          name,
+          firstname,
+          lastname,
           login,
           password
         }