cloudcommerce 0.33.0 → 0.33.2

package/ecomplus-stores/monocard/functions/ssr/src/components/ImagesGallery.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="-mx-4 flex w-screen gap-3 sm:mx-0 sm:w-full md:h-[525px] 2xl:gap-5">
+    <Carousel
+      v-if="pictures.length > 1"
+      axis="y"
+      class="group hidden w-[300px] shrink-0 md:block"
+    >
+      <li
+        v-for="i in Math.ceil(pictures.length / 2)"
+        :key="i"
+        class="grid h-1/3 w-full grid-cols-2 gap-3 px-1 pb-3"
+        :class="i === 1 && 'pt-1'"
+      >
+        <template
+          v-for="index in [1, 2].map(ii => (i - 1) * 2 + (ii - 1))"
+          :key="`${i}-${index}`"
+        >
+          <button
+            v-if="index < pictures.length"
+            class="bg-secondary-50 h-full rounded"
+            @click="activeIndex = index"
+          >
+            <AImg
+              :picture="pictures[index]"
+              class="ring-secondary/10 h-full w-full rounded border-2
+              object-cover opacity-90 transition-colors"
+              :class="index === activeIndex
+                ? 'border-secondary/50 ring-4 cursor-auto'
+                : 'border-transparent hover:border-primary'
+                  + ' hover:ring-4 hover:ring-primary/20'"
+            />
+          </button>
+        </template>
+      </li>
+      <template #controls>
+        <span>
+          <CarouselControl
+            v-if="pictures.length > 6"
+            class="hover:bg-primary-300/60 text-primary
+            hover:text-on-primary !bottom-3 !left-1/2 -ml-5 h-10
+            w-10 rounded-full bg-white/60 text-xl
+            opacity-0 shadow-sm ring-1 ring-black/5 group-hover:opacity-90"
+          />
+          <span class="absolute bottom-0 block h-2 w-full
+            bg-gradient-to-b from-transparent to-white"></span>
+        </span>
+      </template>
+    </Carousel>
+    <div class="relative aspect-square h-full grow md:aspect-auto">
+      <Carousel
+        as="div"
+        v-model:index="activeIndex"
+        class="text-base-600 [&_i]:i-arrow-right mx-auto
+        h-full w-full max-w-[525px] [&>*]:h-full [&_i]:mx-2 [&_i]:text-2xl"
+        :class="isLoadingLightbox && 'opacity-80'"
+        :id="psId"
+      >
+        <ALink
+          v-for="(picture, i) in pictures"
+          :key="`big-${i}`"
+          :href="picture.zoom?.size && picture.zoom.url"
+          :data-pswp-width="getImgSizes(picture.zoom || '').width"
+          :data-pswp-height="getImgSizes(picture.zoom || '').height"
+          target="_blank"
+          rel="noreferrer"
+          class="shrink-0 basis-full"
+          :class="picture.zoom?.size && 'cursor-zoom-in'"
+          v-once
+          @click.prevent="() => picture.zoom?.size && zoom(i)"
+        >
+          <AImg
+            :picture="picture"
+            preferred-size="big"
+            class="h-full w-full rounded object-cover"
+            :fetchpriority="i === 0 ? 'high' : 'low'"
+            :loading="i === 0 ? 'eager' : 'lazy'"
+          />
+        </ALink>
+      </Carousel>
+      <i
+        v-if="isLoadingLightbox"
+        class="i-arrow-path bg-base-200 absolute
+        left-1/2 top-1/2 -ml-7 -mt-7 h-14 w-14 animate-spin"
+        :aria-label="$t.i19loading"
+      ></i>
+      <ul
+        v-if="pictures.length > 1"
+        class="mt-2 flex justify-center gap-1.5 md:hidden"
+      >
+        <li v-for="i in pictures.length" :key="`d-${i}`">
+          <button
+            class="bg-base-700 block h-1.5 w-3 rounded-full"
+            :class="activeIndex !== i - 1 && 'opacity-40'"
+            :aria-label="`${$t.i19picture} ${i}`"
+            @click="activeIndex = i - 1"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Products } from '@cloudcommerce/api/types';
+import { imgSizes as getImgSizes } from '@ecomplus/utils';
+import { useId } from '@@sf/sf-lib';
+import Carousel from '@@sf/components/Carousel.vue';
+import CarouselControl from '@@sf/components/CarouselControl.vue';
+
+export interface Props {
+  pictures: Exclude<Products['pictures'], undefined>;
+}
+
+defineProps<Props>();
+const activeIndex = ref(0);
+const psId = ref('');
+let lightbox: any;
+const isLoadingLightbox = ref(false);
+const zoom = (index: number) => {
+  psId.value = `ps-${useId()}`;
+  if (!lightbox && !isLoadingLightbox.value) {
+    isLoadingLightbox.value = true;
+    const styleId = 'photoswipe-style';
+    Promise.all([
+      // @ts-ignore
+      import('photoswipe/lightbox'),
+      import('photoswipe'),
+      !document.getElementById(styleId) && import('photoswipe/style.css?inline'),
+    ]).then(([
+      { default: PhotoSwipeLightbox },
+      { default: pswpModule },
+      cssImport,
+    ]) => {
+      if (cssImport) {
+        const { default: css } = cssImport;
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = css;
+        document.head.appendChild(style);
+      }
+      lightbox = new PhotoSwipeLightbox({
+        gallery: `#${psId.value} > div`,
+        children: 'a',
+        pswpModule,
+        showAnimationDuration: 300,
+        hideAnimationDuration: 300,
+      });
+      lightbox.init();
+      lightbox.loadAndOpen(index);
+      isLoadingLightbox.value = false;
+    });
+  }
+};
+</script>

package/ecomplus-stores/monocard/functions/ssr/src/components/LoginForm.vue

@@ -0,0 +1,107 @@
+<template>
+  <form
+    class="text-base-800 w-full max-w-sm bg-white p-6 text-base md:p-8"
+    @submit.prevent="() => submitLogin(loginLinkActionUrl)"
+  >
+    <slot name="head" />
+    <p class="text-base-600 mb-4 text-2xl font-light">
+      {{ $t.i19hello }}
+      <span v-if="customerName">{{ customerName }}</span>
+      <span v-else class="lowercase">{{ $t.i19visitor }}</span>
+    </p>
+    <label v-if="isLinkSignIn" for="login-form-email">
+      {{ $t.i19sendLoginLinkByEmail }}
+    </label>
+    <input
+      id="login-form-email"
+      type="email"
+      placeholder="email@mail.com"
+      v-model="email"
+      class="mb-0.5 mt-2 w-full rounded"
+      required
+    />
+    <input
+      v-if="!isLinkSignIn"
+      type="password"
+      :placeholder="$t.i19password"
+      v-model="password"
+      class="mb-0.5 mt-2 w-full rounded lowercase"
+      required
+    />
+    <div class="relative">
+      <div
+        class="transition-opacity"
+        :class="isEmailSentMsg && 'opacity-0 invisible'"
+      >
+        <a
+          v-show="!isSignUp && !isLinkSignInBlocked"
+          href="?password"
+          class="ui-link text-base-500 text-right text-sm lowercase"
+          @click.prevent="isLinkSignIn = !isLinkSignIn"
+        >
+          {{ isLinkSignIn ? $t.i19enterWithPassword : $t.i19iForgotMyPassword }}
+        </a>
+        <button
+          type="submit"
+          :disabled="isSubmitting"
+          class="ui-btn-lg ui-btn-primary mb-2 mt-5 w-full"
+          :class="isSubmitting && 'opacity-50'"
+        >
+          {{ isSignUp ? $t.i19signUp : $t.i19accessMyAccount }}
+        </button>
+      </div>
+      <Fade speed="slow">
+        <p
+          v-if="isEmailSentMsg"
+          class="text-success-800 absolute left-0 top-0 mt-4 font-medium"
+        >
+          <i class="i-check mr-1"></i>
+          {{ $t.i19emailWasSentMsg }}
+        </p>
+      </Fade>
+      <a
+        href="?sign_up"
+        class="ui-btn-lg ui-btn-contrast block w-full text-center"
+        @click.prevent="isSignUp = !isSignUp"
+      >
+        {{ isSignUp ? $t.i19accessMyAccount : $t.i19createAnAccount }}
+      </a>
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import useLoginForm from '@@sf/composables/use-login-form';
+import { customerName } from '@@sf/state/customer-session';
+
+export interface Props {
+  loginLinkActionUrl?: string | null;
+}
+
+defineProps<Props>();
+const {
+  isLinkSignIn,
+  isSignUp,
+  email,
+  password,
+  isSubmitting,
+  submitLogin,
+} = useLoginForm();
+const isEmailSentMsg = ref(false);
+const countEmailsSent = ref(0);
+const isLinkSignInBlocked = computed(() => {
+  return countEmailsSent.value > 9;
+});
+watch((isSubmitting), () => {
+  if (!isSubmitting.value && isLinkSignIn.value) {
+    isEmailSentMsg.value = true;
+    countEmailsSent.value += 1;
+  }
+});
+watch([email, isSignUp], () => {
+  isEmailSentMsg.value = false;
+});
+watch(isLinkSignInBlocked, () => {
+  isLinkSignIn.value = false;
+});
+</script>

package/ecomplus-stores/monocard/functions/ssr/src/components/LottiePhoneNFC.vue

@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
-
 const container = ref(null);
 if (!import.meta.env.SSR) {
   onMounted(() => {
@@ -12,7 +10,7 @@ if (!import.meta.env.SSR) {
         autoplay: true,
         path: '/assets/lotties/phone-nfc.json',
       });
-    })
+    });
   });
 }
 </script>

package/ecomplus-stores/monocard/functions/ssr/src/components/MonocardCustomizer.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { Products } from '@cloudcommerce/api/types';
-import { ref, computed, watch } from 'vue';
 import ecomUtils from '@ecomplus/utils';
 
 export interface Props {
@@ -109,17 +108,17 @@ const logoAdditionalPrice = monocardWithLogo
 
 <template>
   <div class="container">
-    <article class="lg:flex gap-5 max-w-4xl mx-auto">
-      <div class="mb-10 lg:mb-0 basis-1/2 order-2">
-        <div class="inline-block mb-3 mr-5">
+    <article class="mx-auto max-w-4xl gap-5 lg:flex">
+      <div class="order-2 mb-10 basis-1/2 lg:mb-0">
+        <div class="mb-3 mr-5 inline-block">
           <i class="i-checkbox-circle-fill bg-primary mr-1"></i> Frete grátis
         </div>
-        <div class="inline-block mb-3">
+        <div class="mb-3 inline-block">
           <i class="i-checkbox-circle-fill bg-primary mr-1"></i> Sem mensalidade
         </div>
         <a name="comprar"></a>
         <h1 class="mb-3">Seu cartão de visitas eletrônico personalizado</h1>
-        <h4 class="text-sm mb-10">
+        <h4 class="mb-10 text-sm">
           <a href="#como-funciona">
             <i class="i-play-circle-line mr-1"></i>Como o Monocard funciona?
           </a>
@@ -128,12 +127,12 @@ const logoAdditionalPrice = monocardWithLogo
           <div
             v-for="(card, i) in cardsBag"
             :key="i"
-            class="flex gap-2 mb-3"
+            class="mb-3 flex gap-2"
           >
             <input
               id="login-form-email"
               type="text"
-              class="uppercase mb-0"
+              class="mb-0 uppercase"
               placeholder="Nome no cartão"
               @focus="focusedCard = i"
               @focusin="isNameInputFocus = true"
@@ -141,7 +140,7 @@ const logoAdditionalPrice = monocardWithLogo
               v-model="card.holderName"
               required
             >
-            <div class="basis-1/3 flex items-center">
+            <div class="flex basis-1/3 items-center">
               <input
                 class="mb-0"
                 type="number"
@@ -152,7 +151,7 @@ const logoAdditionalPrice = monocardWithLogo
               >
               <div v-if="cardsBag.length > 1" class="flex-auto">
                 <div
-                  class="text-xl ml-1 bg-red-400 i-close-fill"
+                  class="i-close-fill ml-1 bg-red-400 text-xl"
                   role="button"
                   :aria-label="`Remover cartão ${(i + 1)}`"
                   @click="removeCard(i)"
@@ -160,10 +159,10 @@ const logoAdditionalPrice = monocardWithLogo
               </div>
             </div>
           </div>
-          <div class="lg:flex gap-8">
-            <div class="flex-none order-last">
+          <div class="gap-8 lg:flex">
+            <div class="order-last flex-none">
               <button
-                class="flex-none secondary text-sm inline-block w-auto leading-none"
+                class="secondary inline-block w-auto flex-none text-sm leading-none"
                 type="button"
                 @click="cardsBag.push({ holderName: '', quantity: 1 })"
               >
@@ -178,16 +177,16 @@ const logoAdditionalPrice = monocardWithLogo
                 </strong>
                 <span v-if="totalQuantity > 1">{{ formatMoney(price) }} /cartão</span>
               </div>
-              <button class="uppercase font-bold rounded-full text-xl" type="submit">
+              <button class="rounded-full text-xl font-bold uppercase" type="submit">
                 Comprar
               </button>
             </div>
           </div>
         </form>
       </div>
-      <div class="basis-1/2 order-1">
+      <div class="order-1 basis-1/2">
         <div
-          class="card mt-2 mb-5"
+          class="card mb-5 mt-2"
           :class="cardAnimationClass"
           :style="{
             '--background-color': cardBgColor,
@@ -196,7 +195,7 @@ const logoAdditionalPrice = monocardWithLogo
         >
           <div class="card__front card__part">
             <div class="card__front-square card__square">
-              <div class="text-5xl i-qr-code-line"></div>
+              <div class="i-qr-code-line text-5xl"></div>
             </div>
             <div class="card__front-logo card__logo">
               <div class="text-sm font-bold">monocard</div>
@@ -206,7 +205,7 @@ const logoAdditionalPrice = monocardWithLogo
             </div>
             <div class="card__space-25">
               <p class="card__info">
-                <i class="text-lg i-wifi-fill rotate-90"></i>
+                <i class="i-wifi-fill rotate-90 text-lg"></i>
               </p>
             </div>
           </div>
@@ -221,14 +220,14 @@ const logoAdditionalPrice = monocardWithLogo
         <button
           v-for="{ bgColor, textColor } in cardVariants"
           :key="bgColor"
-          class="rounded-full w-5 h-5 p-0 inline-block mr-2
-            shadow drop-shadow border-1 border-gray relative"
+          class="border-1 border-gray relative mr-2 inline-block h-5
+            w-5 rounded-full p-0 shadow drop-shadow"
           :style="{ background: bgColor }"
           @click="selectCardVariant({ bgColor, textColor })"
         >
           <i
             v-if="cardBgColor === bgColor"
-            class="text-xs i-checkbox-fill absolute bg-green-300"
+            class="i-checkbox-fill absolute bg-green-300 text-xs"
           ></i>
         </button>
         <div class="mt-5">
@@ -241,7 +240,7 @@ const logoAdditionalPrice = monocardWithLogo
               v-model="isLogoEnabled"
             >
             Imagem no verso
-            <small class="text-sm mb-2" v-if="logoAdditionalPrice">
+            <small class="mb-2 text-sm" v-if="logoAdditionalPrice">
               <br>+ {{ formatMoney(logoAdditionalPrice) }} por cartão
             </small>
           </label>

package/ecomplus-stores/monocard/functions/ssr/src/components/PitchBar.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="bg-black uppercase relative z-20">
+  <div class="relative z-20 bg-black uppercase">
     <div class="bg-primary/20">
-      <div class="container md:w-2/3 mx-auto px-3 py-1">
+      <div class="container mx-auto px-3 py-1 md:w-2/3">
         <Carousel :autoplay="countValidSlides > 1 ? 7000 : undefined">
           <li
             v-for="(slide, i) in slides"
             :key="i"
-            class="shrink-0 basis-full h-full text-center"
+            class="h-full shrink-0 basis-full text-center"
           >
             <component
               :is="slide.href ? 'ALink' : 'span'"
@@ -18,20 +18,20 @@
               <span
                 v-if="parsedContents[i]"
                 v-html="parsedContents[i]"
-                class="prose text-sm text-primary-100"
+                class="prose text-primary-100 text-sm"
               ></span>
             </component>
           </li>
           <template #controls>
             <div
               v-show="countValidSlides > 1"
-              class="text-xl leading-none text-primary-400"
+              class="text-primary-400 text-xl leading-none"
             >
               <CarouselControl
                 :direction="-1"
-                class="pr-2 hover:text-primary-200"
+                class="hover:text-primary-200 pr-2"
               />
-              <CarouselControl class="pl-2 hover:text-primary-200" />
+              <CarouselControl class="hover:text-primary-200 pl-2" />
             </div>
           </template>
         </Carousel>

package/ecomplus-stores/monocard/functions/ssr/src/components/Prices.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="text-base-600
-      [&>div]:[font-size:90%] [&_small]:[font-size:92%] [&_small]:lowercase"
+      [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]"
     :class="isBig ? 'text-lg' : null"
   >
     <span v-if="comparePrice" class="text-base-500 mr-1 text-[87%]">
@@ -14,8 +14,8 @@
       </small>
     </span>
     <strong
-      class="inline-block text-base-800"
-      :class="isBig ? 'text-5xl block' : null"
+      class="text-base-800"
+      :class="isBig ? 'text-4xl block' : 'inline-block'"
     >
       <small v-if="hasVariedPrices">
         {{ `${$t.i19asOf} ` }}

package/ecomplus-stores/monocard/functions/ssr/src/components/ProductCard.vue

@@ -2,55 +2,56 @@
   <article
     ref="card"
     :data-sku="product.sku"
-    class="relative h-full max-w-[350px] mx-auto py-3 group"
+    class="group relative mx-auto h-full max-w-[350px] py-3"
   >
     <ALink
       :href="link"
-      class="flex flex-col h-full rounded overflow-hidden
-      group-hover:shadow group-hover:ring-1 ring-black/5"
+      class="flex h-full flex-col overflow-hidden rounded
+      ring-black/5 group-hover:shadow group-hover:ring-1"
     >
       <div class="aspect-square p-2
-        motion-safe:group-hover:scale-110 transition-transform">
-        <div class="relative w-full h-full bg-white rounded overflow-hidden
+        transition-transform motion-safe:group-hover:scale-110">
+        <div class="relative h-full w-full overflow-hidden rounded bg-white
           group-hover:rounded-none">
           <span v-if="images?.length" class="text-xs text-opacity-70">
             <AImg
               :picture="images[0]"
               :alt="title"
-              class="absolute top-0 left-0 block w-full h-full object-cover"
+              class="absolute left-0 top-0 block h-full w-full object-cover"
             />
             <AImg
               v-if="images[1] && wasHoveredOnce"
               :picture="images[1]"
               :alt="title"
-              class="absolute top-0 left-0 block w-full h-full object-cover
-              opacity-0 group-hover:opacity-100 transition-opacity
-              motion-safe:duration-300 text-transparent z-10"
+              class="absolute left-0 top-0 z-10 block h-full w-full
+              object-cover text-transparent opacity-0
+              transition-opacity group-hover:opacity-100 motion-safe:duration-300"
             />
           </span>
           <div
             v-else
-            class="w-full h-full bg-gradient-to-br from-base-50/20 to-base-100"
+            class="from-base-50/20 to-base-100 h-full w-full bg-gradient-to-br"
           />
         </div>
       </div>
       <span
         v-if="discountPercentage"
-        class=":uno: absolute top-9 right-2
-        group-hover:scale-110 group-hover:translate-x-2 transition-transform
-        bg-secondary/70 text-on-secondary text-xs
-        py-0.5 pr-1.5 pl-3 [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]"
+        class=":uno: bg-secondary/70 text-on-secondary absolute
+        right-2 top-9 py-0.5
+        pl-3 pr-1.5 text-xs
+        transition-transform [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]
+        group-hover:translate-x-2 group-hover:scale-110"
       >
         -<strong>{{ discountPercentage }}</strong>%
       </span>
-      <div class="relative flex flex-col grow justify-between p-4
-        group-hover:backdrop-blur-md bg-white/40 z-10">
+      <div class="relative z-10 flex grow flex-col justify-between
+        bg-white/40 p-4 group-hover:backdrop-blur-md">
         <component
           :is="headingTag"
-          class="ui-link no-underline line-clamp-2"
+          class="ui-link line-clamp-2 no-underline"
           :class="[
             isActive ? 'text-base-700' : 'text-base-500',
-            link ? 'group-hover:underline group-hover:text-primary' : null,
+            link ? 'group-hover:text-primary group-hover:underline' : null,
           ]"
         >
           {{ title }}
@@ -65,13 +66,13 @@
         </div>
         <button
           v-if="isActive && !hasVariations"
-          class=":uno: hidden md:block ui-btn-sm ui-btn-primary
-          absolute -top-6 left-0 w-full rounded-none
-          opacity-0 group-hover:opacity-100 transition -z-10 group-hover:z-10"
+          class=":uno: ui-btn-sm ui-btn-primary absolute -top-6
+          left-0 -z-10 hidden w-full rounded-none
+          opacity-0 transition group-hover:z-10 group-hover:opacity-100 md:block"
           @click.prevent="addProductToCart(product)"
         >
-          <span class="inline-block h-4 w-4 leading-none text-base text-center
-            bg-on-primary text-primary opacity-80 rounded-full mr-1">
+          <span class="bg-on-primary text-primary mr-1 inline-block h-4 w-4
+            rounded-full text-center text-base leading-none opacity-80">
             &plus;
           </span>
           {{ $t.i19addToCart }}
@@ -82,7 +83,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
 import { watchOnce, useElementHover } from '@vueuse/core';
 import { addProductToCart } from '@@sf/state/shopping-cart';
 import {