cloudcommerce 0.26.6 → 0.27.0

package/ecomplus-stores/monocard/functions/ssr/src/assets/card.css

@@ -0,0 +1,99 @@
+.card {
+  color: var(--color);
+  width: 320px;
+  height: 190px;
+  -webkit-perspective: 600px;
+  -moz-perspective: 600px;
+  perspective:600px;
+}
+.card__part {
+  box-shadow: 1px 1px #aaa3a3;
+  top: 0;
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  display: inline-block;
+  width: 320px;
+  height: 190px;
+  background: var(--background-color);
+  border-radius: 8px;
+  -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transform-style: preserve-3d;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+}
+.card__front {
+  padding: 18px;
+  transform: rotateY(0);
+  -webkit-transform: rotateY(0);
+  -moz-transform: rotateY(0);
+}
+.card__back {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  transform: rotateY(-180deg);
+  -webkit-transform: rotateY(-180deg);
+  -moz-transform: rotateY(-180deg);
+}
+.card__back img {
+  max-width: 256px;
+  max-height: 154px;
+}
+.card__logo {
+  height: 16px;
+}
+.card__front-logo{
+  position: absolute;
+  top: 18px;
+  right: 18px;
+}
+.card__square {
+  border-radius: 5px;
+  height: 30px;
+}
+.card__space-75 {
+  margin-top: 100px;
+  width: 75%;
+  float: left;
+}
+.card__space-25 {
+  margin-top: 30px;
+  width: 25%;
+  float: right;
+  text-align: right;
+}
+.card__label {
+  font-size: 10px;
+  text-transform: uppercase;
+  color: rgba(255,255,255,0.8);
+  letter-spacing: 1px;
+}
+.card__info {
+  margin-bottom: 0;
+  margin-top: 5px;
+  font-size: 16px;
+  line-height: 18px;
+  color: var(--color);
+  letter-spacing: 1px;
+  text-transform: uppercase;
+}
+.card:not(.card--no-back):hover .card__front,
+.card--show-back .card__front {
+  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+}
+.card:not(.card--no-back):hover .card__back,
+.card--show-back .card__back {
+  transform: rotateY(0deg);
+  -webkit-transform: rotateY(0deg);
+  -moz-transform: rotateY(0deg);
+}

package/ecomplus-stores/{iluminim → monocard}/functions/ssr/src/assets/style.css

@@ -1,6 +1,9 @@
 :root {
-  --custom-font-sans: "Heebo Variable";
+  --custom-font-sans: "Inter Variable";
+  --c-on-primary: rgb(0, 0, 0);
+  --un-prose-links: rgb(var(--rgb-primary-700));
 }
+
 html {
   scroll-behavior: smooth;
 }
@@ -14,13 +17,13 @@ a, button, button > * {
 }
 
 .ui-link {
-  @apply not-prose font-semibold text-primary underline underline-offset-4
-  hover:text-primary-bold active:text-primary-subtle;
+  @apply not-prose font-medium text-primary underline underline-offset-4
+  decoration-primary/70 hover:text-primary-bold active:text-primary-subtle;
 }
 
 [class*=ui-btn] {
   @apply not-prose inline-block text-base font-medium px-4 py-2 rounded
-  border-2 border-transparent focus:ring-1 active:ring-2;
+  border-2 border-transparent focus:ring-1 focus:ring-offset-1 active:ring-2;
 }
 .ui-btn-sm {
   @apply text-sm px-3 py-1.5 border-1;
@@ -40,10 +43,10 @@ a, button, button > * {
 }
 
 .ui-text-brand, .ui-title {
-  @apply font-brand font-bold italic uppercase tracking-tight;
+  @apply font-brand font-black italic;
 }
 .ui-title {
-  @apply font-black not-prose text-3xl xl:text-5xl;
+  @apply not-prose text-3xl xl:text-5xl;
 }
 
 [class*=ui-badge] {
@@ -60,6 +63,12 @@ a, button, button > * {
   @apply text-lg min-w-[1.75rem] px-2;
 }
 
-.ui-section {
+[class*=ui-section] {
   @apply container 2xl:max-w-7xl mx-auto px-4 sm:px-2 my-6 md:my-8;
 }
+.ui-section {
+  @apply sm:px-2 my-6 md:my-8;
+}
+.ui-section-slim {
+  @apply my-3;
+}

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

@@ -7,7 +7,7 @@
     <div v-if="open">
       <span v-once>{{ initializeFirebaseAuth() }}</span>
     </div>
-    <MenuButton class="outline-none">
+    <MenuButton class="outline-none" :aria-label="$t.i19myAccount">
       <slot name="button" v-bind="{ open }" />
     </MenuButton>
     <Fade>
@@ -16,7 +16,7 @@
         divide-y divide-base-100 focus:outline-none">
         <div class="p-3 text-base-600">
           {{ `${$t.i19hello} ${customerName || $t.i19visitor}` }}
-          <AccountLink class="block py-1.5 rounded primary hover:primary-bold my-1">
+          <AccountLink role="button" class="ui-btn-sm ui-btn-primary block my-1">
             {{ $t.i19accessMyAccount }}
           </AccountLink>
           <AccountLink
@@ -40,7 +40,7 @@
           <MenuItem
             as="li"
             v-slot="{ active }"
-            v-for="({ title, href }, i) in serviceLinks"
+            v-for="({ title, href }, i) in $settings.service_links"
             :key="`s-${i}`"
           >
             <ALink
@@ -67,7 +67,7 @@
           <MenuItem v-if="isLogged" as="li">
             <button @click="logout" class="p-2 text-right text-base-800">
               <span class="text-base-600">{{ $t.i19logout }}</span>
-              <i class="i-logout text-lg ml-1"></i>
+              <i class="i-logout-circle-r-line text-lg ml-1"></i>
             </button>
           </MenuItem>
         </ul>
@@ -83,7 +83,7 @@ import {
   MenuItems,
   MenuItem,
 } from '@headlessui/vue';
-import { socialNetworks } from '@@sf/server-data';
+import { socialNetworks } from '@@sf/sf-lib';
 import {
   customerName,
   initializeFirebaseAuth,
@@ -92,13 +92,4 @@ import {
 } from '@@sf/state/customer-session';
 import AccountLink from '@@sf/components/AccountLink.vue';
 import SocialNetworkLink from '@@sf/components/SocialNetworkLink.vue';
-
-export interface Props {
-  serviceLinks?: Array<{
-    title: string;
-    href: string;
-  }>;
-}
-
-defineProps<Props>();
 </script>

package/ecomplus-stores/{iluminim → monocard}/functions/ssr/src/components/Banner.vue

@@ -1,18 +1,20 @@
 <template>
   <div
     class="mx-auto overflow-x-hidden"
-    :class="hasHeader ? 'grid grid-cols-1 md:grid-cols-2 items-center' : null"
+    :class="hasHeader ? 'grid grid-cols-1 sm:grid-cols-2 items-center' : null"
   >
     <ALink
       :href="href"
-      class="[&_img]:rounded-lg"
-      :class="hasHeader ? 'basis-1/2 grow-0 md:order-last' : '[&_img]:w-full'"
+      :class="hasHeader
+        ? 'sm:order-last [&_img]:max-w-full sm:[&_img]:max-w-none'
+          + ' [&_img]:aspect-video sm:[&_img]:aspect-[2.5] [&_img]:object-cover'
+        : '[&_img]:max-w-full'"
     >
       <slot name="picture" />
     </ALink>
     <div
       v-if="hasHeader"
-      class="basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md:mb-0"
+      class="p-12 xl:ps-32 mb-3 sm:mb-0"
     >
       <Component
         v-if="parsedTitle"

package/ecomplus-stores/monocard/functions/ssr/src/components/Breadcrumbs.astro

@@ -0,0 +1,44 @@
+---
+import {
+  type Props as UseBreadcrumbsProps,
+  useBreadcrumbs,
+} from '@@sf/composables/use-breadcrumbs';
+
+export interface Props extends UseBreadcrumbsProps {}
+
+const { breadcrumbs, inlineJSONLd } = await useBreadcrumbs(Astro.props);
+---
+
+{breadcrumbs.length > 0 &&
+  <section class="ui-section-slim">
+    <nav aria-label="Breadcrumb" class="w-full overflow-hidden text-lg md:text-sm">
+      <ol class="flex items-center gap-1 text-base-600">
+        <li>
+          <a href="/" class="hover:text-primary">
+            <span class="sr-only"> Home </span>
+            <i class="i-home"></i>
+          </a>
+        </li>
+        {breadcrumbs.map(({ name, link }, i) => 
+          <>
+            {i + 1 < breadcrumbs.length
+              ? <li class="text-base-300">
+                  <i class="i-chevron-right"></i>
+                </li>
+                <li class="whitespace-nowrap">
+                  <a href={link} class="hover:text-primary">{name}</a>
+                </li>
+              : <li class="hidden lg:block text-base-300">
+                  <i class="i-chevron-right"></i>
+                </li>
+                <li class="hidden lg:block whitespace-nowrap overflow-hidden text-ellipsis">
+                  <span class="text-base-500">{name}</span>
+                </li>
+            }
+          </>
+        )}
+      </ol>
+    </nav>
+    {inlineJSONLd && <script type="application/ld+json" set:html={inlineJSONLd} />}
+  </section>
+}

package/ecomplus-stores/{iluminim → monocard}/functions/ssr/src/components/CartSidebar.vue

@@ -48,7 +48,7 @@
         @click.prevent="emit('close')"
         class="ui-link text-base-500 hover:text-base-700 text-sm"
       >
-        <i class="i-arrow-left mr-1"></i>
+        <i class="i-arrow-left-line mr-1"></i>
         {{ $t.i19continueShopping }}
       </a>
     </footer>

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

@@ -1,5 +1,10 @@
 <template>
-  <iframe id="ytplayer" width="700" class="lozad shrink-0 max-w-full aspect-video"
-    data-src="https://www.youtube.com/embed/u_TLiNHvrLo?autoplay=0"
-    frameborder="0" />
+  <iframe
+    loading="lazy"
+    id="ytplayer"
+    width="700"
+    class="shrink-0 max-w-full aspect-video"
+    src="https://www.youtube.com/embed/u_TLiNHvrLo?autoplay=0"
+    frameborder="0"
+  />
 </template>

package/ecomplus-stores/monocard/functions/ssr/src/components/DocDescription.astro

@@ -0,0 +1,30 @@
+---
+import type {
+  Products,
+  Categories,
+  Brands,
+  Collections,
+} from '@cloudcommerce/api/types';
+import { i19description } from '@@i18n';
+import ContentClearfix from '@@sf/components/ContentClearfix.astro';
+
+export interface Props {
+  apiDoc: Partial<Products | Categories | Brands | Collections>;
+  title?: string;
+}
+
+const { apiDoc, title } = Astro.props;
+const html = apiDoc.body_html || apiDoc.body_text;
+---
+
+{html &&
+  <section class="ui-section">
+    <p class="text-2xl font-medium lowercase text-base-700">
+      <a href="#description" id="description">
+        <i class="i-link text-base-400 mr-1"></i>
+        {title || i19description}
+      </a>
+    </p>
+    <ContentClearfix html={html} />
+  </section>
+}

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

@@ -43,7 +43,7 @@
       </TabList>
       <TabPanels class="text-left w-72 mx-auto sm:w-auto sm:px-5 mt-4
         md:min-h-[870px] lg:min-h-[880px] xl:min-h-[915px]">
-        <TabPanel v-motion-fade-visible>
+        <TabPanel v-motion-fade>
           <div class="prose mb-8">
             <h4 class="text-2xl xl:text-3xl leading-snug mb-5">
               Conecte instantaneamente
@@ -153,7 +153,7 @@
             </a>
           </div>
         </TabPanel>
-        <TabPanel v-motion-fade-visible>
+        <TabPanel v-motion-fade>
           <slot name="picture-edit" />
           <div class="flex flex-wrap md:flex-nowrap gap-x-10">
             <div class="md:basis-1/2 prose">

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

@@ -1,17 +1,20 @@
 <script lang="ts" setup>
 import { ref, onMounted } from 'vue';
-import lottie from 'lottie-web';
 
 const container = ref(null);
-onMounted(() => {
-  lottie.loadAnimation({
-    container: container.value as any as Element,
-    renderer: 'svg',
-    loop: true,
-    autoplay: true,
-    path: '/assets/lotties/phone-nfc.json',
+if (!import.meta.env.SSR) {
+  onMounted(() => {
+    import('lottie-web/build/player/lottie_light').then(({ default: lottie }) => {
+      lottie.loadAnimation({
+        container: container.value as any as Element,
+        renderer: 'svg',
+        loop: true,
+        autoplay: true,
+        path: '/assets/lotties/phone-nfc.json',
+      });
+    })
   });
-});
+}
 </script>
 
 <template>

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

@@ -186,7 +186,14 @@ const logoAdditionalPrice = monocardWithLogo
         </form>
       </div>
       <div class="basis-1/2 order-1">
-        <div class="card mt-2 mb-5" :class="cardAnimationClass">
+        <div
+          class="card mt-2 mb-5"
+          :class="cardAnimationClass"
+          :style="{
+            '--background-color': cardBgColor,
+            '--color': cardTextColor,
+          }"
+        >
           <div class="card__front card__part">
             <div class="card__front-square card__square">
               <div class="text-5xl i-qr-code-line"></div>
@@ -253,107 +260,3 @@ const logoAdditionalPrice = monocardWithLogo
     </article>
   </div>
 </template>
-
-<style scoped>
-.card {
-  --background-color: v-bind('cardBgColor');
-  --color: v-bind('cardTextColor');
-  color: var(--color);
-  width: 320px;
-  height: 190px;
-  -webkit-perspective: 600px;
-  -moz-perspective: 600px;
-  perspective:600px;
-}
-.card__part {
-  box-shadow: 1px 1px #aaa3a3;
-  top: 0;
-  position: absolute;
-  z-index: 1000;
-  left: 0;
-  display: inline-block;
-  width: 320px;
-  height: 190px;
-  background: var(--background-color);
-  border-radius: 8px;
-  -webkit-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -moz-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -ms-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  -o-transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-  transform-style: preserve-3d;
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-  backface-visibility: hidden;
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-}
-.card__front {
-  padding: 18px;
-  transform: rotateY(0);
-  -webkit-transform: rotateY(0);
-  -moz-transform: rotateY(0);
-}
-.card__back {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  transform: rotateY(-180deg);
-  -webkit-transform: rotateY(-180deg);
-  -moz-transform: rotateY(-180deg);
-}
-.card__back img {
-  max-width: 256px;
-  max-height: 154px;
-}
-.card__logo {
-  height: 16px;
-}
-.card__front-logo{
-  position: absolute;
-  top: 18px;
-  right: 18px;
-}
-.card__square {
-  border-radius: 5px;
-  height: 30px;
-}
-.card__space-75 {
-  margin-top: 100px;
-  width: 75%;
-  float: left;
-}
-.card__space-25 {
-  margin-top: 30px;
-  width: 25%;
-  float: right;
-  text-align: right;
-}
-.card__label {
-  font-size: 10px;
-  text-transform: uppercase;
-  color: rgba(255,255,255,0.8);
-  letter-spacing: 1px;
-}
-.card__info {
-  margin-bottom: 0;
-  margin-top: 5px;
-  font-size: 16px;
-  line-height: 18px;
-  color: var(--color);
-  letter-spacing: 1px;
-  text-transform: uppercase;
-}
-.card:not(.card--no-back):hover .card__front,
-.card--show-back .card__front {
-  transform: rotateY(180deg);
-  -webkit-transform: rotateY(180deg);
-  -moz-transform: rotateY(180deg);
-}
-.card:not(.card--no-back):hover .card__back,
-.card--show-back .card__back {
-  transform: rotateY(0deg);
-  -webkit-transform: rotateY(0deg);
-  -moz-transform: rotateY(0deg);
-}
-</style>

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

@@ -1,10 +1,10 @@
 <template>
   <div
-    class="text-base-600"
+    class="text-base-600
+      [&>div]:[font-size:90%] [&_small]:[font-size:92%] [&_small]:lowercase"
     :class="isBig ? 'text-lg' : null"
-    data-prices
   >
-    <span v-if="comparePrice" class="text-base-500 mr-1">
+    <span v-if="comparePrice" class="text-base-500 mr-1 text-[87%]">
       <small v-if="isLiteral">
         {{ `${$t.i19from} ` }}
       </small>
@@ -26,7 +26,7 @@
       <div v-if="cashbackValue && hasCashback" class="relative z-10">
         <span :data-tooltip="$t.i19get$1back
           .replace('$1', $percentage(cashbackPercentage))">
-          <i class="i-cashback mr-1"></i>
+          <i class="i-arrow-go-back-fill mr-1"></i>
           <span class="font-medium">
             {{ $money(cashbackValue) }}
           </span>
@@ -45,7 +45,7 @@
         </small>
         <span>{{ $money(installmentValue) }}</span>
         <small v-if="!monthlyInterest && isLiteral">
-          {{ $t.i19interestFree }}
+          {{ ` ${$t.i19interestFree}` }}
         </small>
       </div>
     </Fade>
@@ -64,16 +64,12 @@
 </template>
 
 <script setup lang="ts">
-import type { Products, ListPaymentsResponse } from '@cloudcommerce/types';
-import usePrices from '@@sf/composables/use-prices';
+import {
+  type Props as UsePricesProps,
+  usePrices,
+} from '@@sf/composables/use-prices';
 
-export interface Props {
-  product?: Partial<Products> & { price: number, final_price?: number };
-  price?: number;
-  basePrice?: number;
-  isAmountTotal?: boolean;
-  installmentsOption?: ListPaymentsResponse['installments_option'];
-  discountOption?: ListPaymentsResponse['discount_option'];
+export interface Props extends UsePricesProps {
   isBig?: boolean;
   isLiteral?: boolean;
   hasCashback?: boolean;
@@ -97,16 +93,3 @@ const {
   discountLabel,
 } = usePrices(props);
 </script>
-
-<style>
-[data-prices] > span {
-  font-size: 87%;
-}
-[data-prices] > div {
-  font-size: 90%;
-}
-[data-prices] small {
-  @apply lowercase;
-  font-size: 92%;
-}
-</style>

package/ecomplus-stores/{iluminim → monocard}/functions/ssr/src/components/ProductCard.vue

@@ -47,7 +47,7 @@
         group-hover:backdrop-blur-md bg-white/40 z-10">
         <component
           :is="headingTag"
-          class="ui-link uppercase font-bold text-sm no-underline line-clamp-2"
+          class="ui-link no-underline line-clamp-2"
           :class="[
             isActive ? 'text-base-700' : 'text-base-500',
             link ? 'group-hover:underline group-hover:text-primary' : null,