cloudcommerce 0.26.6 → 0.26.7

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

@@ -0,0 +1,66 @@
+<template>
+  <aside class="flex flex-col h-screen bg-white">
+    <header class="px-6 py-4 flex justify-end items-center gap-3
+      shadow ring-1 ring-black/5 z-10">
+      <span class="text-right text-base text-base-600 font-medium">
+        {{ $t.i19myShoppingCart }}
+      </span>
+      <span class="min-w-[3rem] text-right">
+        <span class="ui-badge-pill-lg">
+          {{ totalItems }}
+        </span>
+      </span>
+    </header>
+    <article class="grow overflow-y-auto bg-base-50">
+      <div v-if="freeShippingFromValue" class="text-sm text-center">
+        <div
+          v-if="freeShippingFromValue > shoppingCart.subtotal"
+          class="p-3 secondary-subtle"
+        >
+          {{ $t.i19add$1ToEarn.replace('$1',
+            $money(freeShippingFromValue - shoppingCart.subtotal)) }}
+          <strong class="lowercase">{{ $t.i19freeShipping }}</strong>
+        </div>
+        <div v-else class="p-3 bg-success-50 text-success-800">
+          <i class="text-success-900 i-check mr-1"></i>
+          {{ $t.i19freeShippingFrom }} {{ $money(freeShippingFromValue) }}
+        </div>
+      </div>
+      <ul class="px-4 pt-4 pb-2">
+        <li v-for="(item, i) in shoppingCart.items" :key="i">
+          <CartItem :item="item" class="mb-3" />
+        </li>
+      </ul>
+    </article>
+    <footer class="px-5 pt-4 pb-3 ring-2 ring-black/5 z-10">
+      <div class="grid grid-cols-5 gap-3 items-center text-right">
+        <div class="col-span-2">
+          {{ $t.i19subtotal }}
+        </div>
+        <Prices :price="shoppingCart.subtotal" class="col-span-3 text-lg" />
+      </div>
+      <CheckoutLink class="ui-btn-lg ui-btn-primary w-full text-right my-2.5">
+        <i class="i-check mr-2"></i>
+        {{ $t.i19checkout }}
+      </CheckoutLink>
+      <a
+        href="#"
+        @click.prevent="emit('close')"
+        class="ui-link text-base-500 hover:text-base-700 text-sm"
+      >
+        <i class="i-arrow-left-line mr-1"></i>
+        {{ $t.i19continueShopping }}
+      </a>
+    </footer>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { freeShippingFromValue } from '@@sf/state/modules-info';
+import { shoppingCart, totalItems } from '@@sf/state/shopping-cart';
+import CheckoutLink from '@@sf/components/CheckoutLink.vue';
+import Prices from '~/components/Prices.vue';
+import CartItem from '~/components/CartItem.vue';
+
+const emit = defineEmits(['close']);
+</script>

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/monocard/functions/ssr/src/components/ProductCard.vue

@@ -0,0 +1,117 @@
+<template>
+  <article
+    ref="card"
+    :data-sku="product.sku"
+    class="relative h-full max-w-[350px] mx-auto py-3 group"
+  >
+    <ALink
+      :href="link"
+      class="flex flex-col h-full rounded overflow-hidden
+      group-hover:shadow group-hover:ring-1 ring-black/5"
+    >
+      <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
+          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"
+            />
+            <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"
+            />
+          </span>
+          <div
+            v-else
+            class="w-full h-full bg-gradient-to-br from-base-50/20 to-base-100"
+          />
+        </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%)]"
+      >
+        -<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">
+        <component
+          :is="headingTag"
+          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,
+          ]"
+        >
+          {{ title }}
+        </component>
+        <div class="pt-2">
+          <div v-if="isActive">
+            <Prices :product="product" />
+          </div>
+          <span v-else class="ui-badge bg-warning-100 text-warning-700">
+            {{ !isInStock ? $t.i19outOfStock : $t.i19inactive }}
+          </span>
+        </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"
+          @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">
+            &plus;
+          </span>
+          {{ $t.i19addToCart }}
+        </button>
+      </div>
+    </ALink>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { watchOnce, useElementHover } from '@vueuse/core';
+import { addProductToCart } from '@@sf/state/shopping-cart';
+import {
+  type Props as UseProductCardProps,
+  useProductCard,
+} from '@@sf/composables/use-product-card';
+import Prices from '~/components/Prices.vue';
+
+export type Props = UseProductCardProps & {
+  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  headingTag: 'h3',
+});
+const {
+  product,
+  title,
+  link,
+  images,
+  isInStock,
+  isActive,
+  discountPercentage,
+  hasVariations,
+} = useProductCard(props as UseProductCardProps);
+const card = ref<HTMLElement | null>(null);
+const isHovered = useElementHover(card);
+const wasHoveredOnce = ref(false);
+watchOnce(isHovered, () => {
+  wasHoveredOnce.value = true;
+});
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <section class="ui-section">
+    <div v-if="title" class="max-w-prose mx-auto text-center mb-2">
+      <h2 class="ui-text-brand text-3xl">
+        <ALink :href="titleLink" :class="titleLink ? 'ui-link' : 'text-base-700'">
+          {{ title }}
+        </ALink>
+      </h2>
+    </div>
+    <Carousel class="group/shelf">
+      <li
+        v-for="product in products"
+        :key="product._id"
+        class="basis-1/2 md:basis-1/3 lg:basis-1/4 shrink-0"
+      >
+        <ProductCard :product="product" />
+      </li>
+      <template #controls>
+        <div
+          v-show="products.length > 2"
+          class="text-3xl lg:text-2xl leading-none text-primary
+          lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity"
+        >
+          <CarouselControl class="!top-1/2 !-left-4 w-12 h-12
+            bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full
+            lg:shadow-sm lg:ring-1 ring-black/5" is-prev />
+          <CarouselControl class="!top-1/2 !-right-4 w-12 h-12
+            bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full
+            lg:shadow-sm lg:ring-1 ring-black/5" />
+        </div>
+      </template>
+    </Carousel>
+  </section>
+</template>
+
+<script setup lang="ts">
+import {
+  type Props as UseProductShelfProps,
+  useProductShelf,
+} from '@@sf/composables/use-product-shelf';
+import Carousel from '@@sf/components/Carousel.vue';
+import CarouselControl from '@@sf/components/CarouselControl.vue';
+import ProductCard from '~/components/ProductCard.vue';
+
+export interface Props extends UseProductShelfProps {}
+
+const props = defineProps<Props>();
+const {
+  title,
+  titleLink,
+  fetching,
+  products,
+} = useProductShelf(props);
+if (import.meta.env.SSR) {
+  await fetching;
+}
+</script>

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

@@ -0,0 +1,123 @@
+<template>
+  <footer class="w-screen bg-black text-base-300 border-t border-base-100 py-2">
+    <div class="ui-section">
+      <div class="pb-7 border-b border-base-200
+        flex justify-between flex-wrap lg:flex-nowrap sm:gap-x-10 gap-y-5">
+        <div class="shrink">
+          <slot name="logo" />
+          <div v-if="$settings.description" class="prose prose-invert">
+            <p>{{ $settings.description }}</p>
+          </div>
+          <div class="flex gap-2 text-base-400">
+            <span v-for="(href, network) in socialNetworks" :key="network">
+              <SocialNetworkLink :network="network" class="p-1 hover:text-primary">
+                <template v-if="network === 'whatsapp'" #append>
+                  <span class="ml-1 text-sm text-base-300">
+                    {{ $settings.whatsapp }}
+                  </span>
+                </template>
+              </SocialNetworkLink>
+            </span>
+          </div>
+          <div v-if="$settings.address || $settings.phone" class="mt-3 text-base-200">
+            <address v-if="$settings.address" class="inline-block mr-4">
+              {{ $settings.address }}
+            </address>
+            <ALink
+              v-if="$settings.phone"
+              :href="`tel:${$settings.phone.replace(/\D/g, '')}`"
+              class="hover:text-primary"
+            >
+              <i class="i-phone mr-0.5"></i>
+              {{ $settings.phone }}
+            </ALink>
+          </div>
+        </div>
+        <div v-if="pageLinks?.length" class="basis-1/2 sm:basis-auto">
+          <div class="text-lg font-medium mb-2.5">
+            {{ pagesColTitle || $t.i19institutional }}
+          </div>
+          <ul
+            class="text-sm"
+            :class="pageLinks.length > 5
+              ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
+          >
+            <li v-for="({ title, href }, i) in pageLinks" :key="`p-${i}`">
+              <ALink :href="href" class="ui-link text-base-50">
+                {{ title }}
+              </ALink>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="ui-section">
+      <div class="flex flex-wrap lg:flex-nowrap justify-between items-start gap-5">
+        <ul class="flex gap-y-3 gap-x-6 lg:gap-x-8 items-center
+          md:flex-wrap mx-auto md:mx-0 overflow-x-auto md:overflow-hidden">
+          <li v-for="(stamp, i) in stamps" :key="i">
+            <ALink :href="stamp.href?.replace('{domain}', $settings.domain || '')">
+              <slot :name="`picture-${i}`" />
+              <span v-if="!stamp.img" class="flex items-center">
+                <span
+                  v-if="stamp.icon"
+                  class="text-4xl mr-2
+                  [&>*]:bg-gradient-to-br [&>*]:from-success-200 [&>*]:to-success-700"
+                >
+                  <i v-if="stamp.icon === 'lock'" class="i-lock-closed"></i>
+                  <i v-else-if="stamp.icon === 'check'" class="i-check-badge"></i>
+                  <i v-else class="i-arrow-path-rounded-square"></i>
+                </span>
+                <span class="text-sm font-medium text-base-300 max-w-[140px]">
+                  {{ stamp.alt }}
+                  <i
+                    v-if="stamp.href && stamp.href.charAt(0) !== '/'"
+                    class="bg-base-400 ml-0.5 i-arrow-top-right-on-square"
+                  ></i>
+                </span>
+              </span>
+            </ALink>
+          </li>
+        </ul>
+        <div class="flex flex-wrap md:flex-nowrap justify-end items-center
+          gap-4 text-2xl mx-auto md:mx-0 overflow-x-auto md:overflow-hidden">
+          <PaymentMethodFlag
+            v-for="paymentMethod in $settings.payment_methods"
+            :key="paymentMethod"
+            :flag="paymentMethod"
+            class="!text-base-50"
+          />
+        </div>
+      </div>
+      <div class="mt-7 text-xs text-center md:text-left
+        md:flex justify-between gap-4">
+        <div class="mb-3 md:mb-0">
+          @ {{ new Date().getFullYear() }} {{ $settings.corporate_name }}
+          {{ $settings.address ? `/ ${$settings.address}` : '' }}
+          / {{ $settings.doc_number }}
+        </div>
+        <ALink href="https://www.ecomplus.io/" class="italic text-[rgb(239,235,240)]">
+          powered by <b>E-Com Plus</b>
+        </ALink>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import type { LayoutContent } from '@@sf/content';
+import { socialNetworks } from '@@sf/sf-lib';
+import SocialNetworkLink from '@@sf/components/SocialNetworkLink.vue';
+import PaymentMethodFlag from '@@sf/components/PaymentMethodFlag.vue';
+
+export interface Props {
+  stamps?: LayoutContent['footer']['stamps'];
+  pageLinks?: Array<{
+    title: string;
+    href: string;
+  }>;
+  pagesColTitle?: string;
+}
+
+defineProps<Props>();
+</script>