cloudcommerce 0.6.7 → 0.6.8

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

@@ -112,16 +112,16 @@ const logoAdditionalPrice = monocardWithLogo
     <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">
-          <i class="i-check-badge-20-solid bg-primary mr-1"></i> Frete grátis
+          <i class="i-checkbox-circle-fill bg-primary mr-1"></i> Frete grátis
         </div>
         <div class="inline-block mb-3">
-          <i class="i-check-badge-20-solid bg-primary mr-1"></i> Sem mensalidade
+          <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">
           <a href="#como-funciona">
-            <i class="i-play-circle mr-1"></i>Como o Monocard funciona?
+            <i class="i-play-circle-line mr-1"></i>Como o Monocard funciona?
           </a>
         </h4>
         <form>
@@ -152,7 +152,7 @@ const logoAdditionalPrice = monocardWithLogo
               >
               <div v-if="cardsBag.length > 1" class="flex-auto">
                 <div
-                  class="text-xl ml-1 bg-red-400 i-x-mark-20-solid"
+                  class="text-xl ml-1 bg-red-400 i-close-fill"
                   role="button"
                   :aria-label="`Remover cartão ${(i + 1)}`"
                   @click="removeCard(i)"
@@ -167,7 +167,7 @@ const logoAdditionalPrice = monocardWithLogo
                 type="button"
                 @click="cardsBag.push({ holderName: '', quantity: 1 })"
               >
-                <i class="i-plus-circle mr-1"></i>
+                <i class="i-add-circle-fill mr-1"></i>
                 Adicionar cartão
               </button>
             </div>
@@ -189,7 +189,7 @@ const logoAdditionalPrice = monocardWithLogo
         <div class="card mt-2 mb-5" :class="cardAnimationClass">
           <div class="card__front card__part">
             <div class="card__front-square card__square">
-              <div class="text-5xl i-qr-code-20-solid"></div>
+              <div class="text-5xl i-qr-code-line"></div>
             </div>
             <div class="card__front-logo card__logo">
               <div class="text-sm font-bold">monocard</div>
@@ -199,7 +199,7 @@ const logoAdditionalPrice = monocardWithLogo
             </div>
             <div class="card__space-25">
               <p class="card__info">
-                <i class="text-lg i-wifi-20-solid rotate-90"></i>
+                <i class="text-lg i-wifi-fill rotate-90"></i>
               </p>
             </div>
           </div>
@@ -221,7 +221,7 @@ const logoAdditionalPrice = monocardWithLogo
         >
           <i
             v-if="cardBgColor === bgColor"
-            class="text-xs i-check-circle-solid absolute bg-green-300"
+            class="text-xs i-checkbox-fill absolute bg-green-300"
           ></i>
         </button>
         <div class="mt-5">

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

@@ -0,0 +1,17 @@
+<template>
+  <component :is="as" v-if="!isOnce" v-motion-fade-visible>
+    <slot />
+  </component>
+  <component :is="as" v-else v-motion-fade-visible-once>
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  as?: string;
+  isOnce?: boolean;
+}
+
+withDefaults(defineProps<Props>(), { as: 'div' });
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="bg-black uppercase relative z-1">
+    <div class="bg-primary/20">
+      <div class="container md:w-2/3 mx-auto px-3 py-1">
+        <Carousel :autoplay="countValidSlides > 1 ? 7000 : null">
+          <li
+            v-for="(slide, i) in slides"
+            :key="i"
+            class="shrink-0 basis-full h-full text-center"
+          >
+            <component
+              :is="slide.href ? 'ALink' : 'span'"
+              :href="slide.href"
+              :target="slide.target"
+              class="inline-block px-8"
+              :class="slide.href ? 'hover:underline' : null"
+            >
+              <span
+                v-if="parsedContents[i]"
+                v-html="parsedContents[i]"
+                class="prose text-sm text-primary-100"
+              ></span>
+            </component>
+          </li>
+          <template #controls>
+            <div
+              v-show="countValidSlides > 1"
+              class="text-xl leading-none text-primary-400"
+            >
+              <CarouselControl
+                :direction="-1"
+                class="pr-2 hover:text-primary-200"
+              />
+              <CarouselControl class="pl-2 hover:text-primary-200" />
+            </div>
+          </template>
+        </Carousel>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import usePitchBar from '@@sf/composables/use-pitch-bar';
+import Carousel from '@@sf/components/Carousel.vue';
+import CarouselControl from '@@sf/components/CarouselControl.vue';
+
+export interface Props {
+  slides: Array<{
+    href?: string;
+    target?: string;
+    html: string;
+  }>;
+}
+
+const props = defineProps<Props>();
+const {
+  parsedContents,
+  countValidSlides,
+} = usePitchBar(props);
+</script>

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

@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="text-base-600"
+    :class="isBig ? 'text-lg' : null"
+    data-prices
+  >
+    <span v-if="comparePrice" class="text-base-500 mr-1">
+      <small v-if="isLiteral">
+        {{ `${$t.i19from} ` }}
+      </small>
+      <s>{{ $money(comparePrice) }}</s>
+      <small v-if="isLiteral">
+        {{ ` ${$t.i19to}` }}
+      </small>
+    </span>
+    <strong
+      class="inline-block text-base-800"
+      :class="isBig ? 'text-5xl block' : null"
+    >
+      <small v-if="hasVariedPrices">
+        {{ `${$t.i19asOf} ` }}
+      </small>
+      {{ $money(salePrice) }}
+    </strong>
+    <Fade slide="down">
+      <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>
+          <span class="font-medium">
+            {{ $money(cashbackValue) }}
+          </span>
+          <small> cashback</small>
+        </span>
+      </div>
+    </Fade>
+    <Fade slide="down">
+      <div v-if="installmentValue && hasPriceOptions">
+        <small v-if="isLiteral">
+          {{ `${$t.i19upTo} ` }}
+        </small>
+        {{ installmentsNumber }}x
+        <small v-if="isLiteral">
+          {{ ` ${$t.i19of} ` }}
+        </small>
+        <span>{{ $money(installmentValue) }}</span>
+        <small v-if="!monthlyInterest && isLiteral">
+          {{ $t.i19interestFree }}
+        </small>
+      </div>
+    </Fade>
+    <Fade slide="down">
+      <div v-if="priceWithDiscount < salePrice && hasPriceOptions">
+        <small v-if="!discountLabel">
+          {{ `${$t.i19asOf} ` }}
+        </small>
+        <span>{{ $money(priceWithDiscount) }}</span>
+        <small v-if="discountLabel">
+          {{ ` ${discountLabel}` }}
+        </small>
+      </div>
+    </Fade>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Products, ListPaymentsResponse } from '@cloudcommerce/types';
+import 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'];
+  isBig?: boolean;
+  isLiteral?: boolean;
+  hasCashback?: boolean;
+  hasPriceOptions?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hasCashback: true,
+  hasPriceOptions: true,
+});
+const {
+  hasVariedPrices,
+  salePrice,
+  comparePrice,
+  cashbackPercentage,
+  cashbackValue,
+  installmentsNumber,
+  monthlyInterest,
+  installmentValue,
+  priceWithDiscount,
+  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/SearchModal.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="w-full h-40 bg-base-300"></div>
+</template>
+
+<script setup lang="ts">
+</script>

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

@@ -0,0 +1,97 @@
+<template>
+  <header
+    ref="header"
+    class="relative top-0 z-50 transition-colors"
+    :class="[
+      isSticky && !isSidenavOpen ? 'bg-black/80' : 'bg-black',
+      isSticky ? 'backdrop-blur-md shadow py-2 md:py-3' : 'py-3 sm:py-4 md:py-5',
+    ]"
+  >
+    <div class="container lg:max-w-7xl mx-auto px-1 lg:pl-3
+      grid grid-flow-col grid-cols-3 justify-between items-center
+      lg:grid-cols-none lg:auto-cols-max">
+      <div class="lg:hidden">
+        <button
+          class="px-2 my-1"
+          :aria-label="$t.i19toggleMenu"
+          @click="isSidenavOpen = !isSidenavOpen"
+        >
+          <i
+            class="text-base-100 text-3xl"
+            :class="isSidenavOpen ? 'i-close' : 'i-menu'"
+          ></i>
+        </button>
+      </div>
+      <slot name="logo" />
+      <ShopHeaderMenu
+        class="hidden lg:block"
+        v-bind="{ isSticky, ...headerNavLinks }"
+      />
+      <div class="px-2 flex justify-end items-center gap-3 lg:gap-4">
+        <AccountMenu
+          class="hidden sm:block"
+          :aria-label="$t.i19myAccount"
+          :service-links="serviceLinks"
+        >
+          <template #button="{ open }">
+            <i
+              class="i-account w-7 h-7
+              hover:text-primary hover:scale-110 active:scale-125"
+              :class="open ? 'text-white scale-110' : 'text-base-200'"
+            ></i>
+          </template>
+        </AccountMenu>
+        <button :aria-label="$t.i19openCart">
+          <i class="i-shopping-cart w-7 h-7
+            text-base-200 hover:text-primary hover:scale-110 active:scale-125"></i>
+        </button>
+      </div>
+    </div>
+    <Drawer
+      v-model="isSidenavOpen"
+      :has-close-button="false"
+      position="absolute"
+      :class="isSticky ? 'mt-2 md:mt-3' : 'mt-3 sm:mt-4 md:mt-5'"
+      :style="{ height: `calc(100vh - ${positionY}px + .5rem)` }"
+    >
+      <ShopSidenav class="bg-white pt-6" />
+    </Drawer>
+  </header>
+</template>
+
+<script setup lang="ts">
+import type { CategoriesList } from '@cloudcommerce/api/types';
+import { getCurrentInstance, ref } from 'vue';
+import useShopHeader from '@@sf/composables/use-shop-header';
+import Drawer from '@@sf/components/Drawer.vue';
+import ShopSidenav from '~/components/ShopSidenav.vue';
+import ShopHeaderMenu from '~/components/ShopHeaderMenu.vue';
+import AccountMenu from '~/components/AccountMenu.vue';
+
+export interface Props {
+  categories: CategoriesList;
+  menuCategorySlugs?: string[];
+  menuRandomCategories?: number;
+  isAlphabeticalSortSubmenu?: boolean;
+  serviceLinks?: Array<{
+    title: string;
+    href: string;
+  }>;
+}
+
+const props = defineProps<Props>();
+const header = ref<HTMLElement | null>(null);
+const {
+  isSticky,
+  positionY,
+} = useShopHeader({ ...props, header });
+const isSidenavOpen = ref(false);
+const vm = getCurrentInstance();
+const { metafields } = vm.appContext.app.config.globalProperties.$settings;
+const headerNavLinks = {
+  supportUrl: metafields.support_url,
+  businessLpUrl: metafields.business_lp_url,
+  monocardSlug: metafields.monocard_slug,
+  monodotSlug: metafields.monodot_slug,
+};
+</script>

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

@@ -0,0 +1,92 @@
+<template>
+  <nav class="font-brand lowercase text-lg text-base-100">
+    <ul class="flex items-center gap-6 xl:gap-7">
+      <li>
+        <ALink
+          :href="supportUrl"
+          class="hover:text-white hover:underline decoration-2 underline-offset-4"
+        >
+          {{ $t.i19support }}
+        </ALink>
+      </li>
+      <li>
+        <a
+          :href="businessLpUrl"
+          class="text-white hover:text-primary underline
+          decoration-2 decoration-primary underline-offset-4"
+        >
+          <i class="i-stack-line opacity-50 mr-1.5"></i>
+          <h4 class="inline">Para empresas e times</h4>
+        </a>
+      </li>
+      <li>
+        <Menu as="div" v-slot="{ open }" class="relative z-50">
+          <MenuButton
+            class="group lowercase pl-4 pr-3 py-1 rounded-full"
+            :class="isSticky
+              ? 'bg-primary/20 text-primary hover:primary'
+              : 'primary hover:bg-primary-50'"
+          >
+            <span>{{ $t.i19buy }}</span>
+            <i
+              class="i-chevron-down ml-1 transition-transform"
+              :class="open ? 'rotate-180' : 'opacity-50'"
+            ></i>
+          </MenuButton>
+          <Fade>
+            <MenuItems
+              as="ul"
+              class="absolute -left-7 mt-3 w-48 rounded-b-md overflow-hidden
+              bg-black/80 text-white backdrop-blur-md shadow"
+            >
+              <MenuItem as="li">
+                <a
+                  :href="monocardSlug"
+                  class="flex gap-3 px-5 py-2.5 hover:bg-black"
+                >
+                  <h4 class="basis-4/6 text-right">
+                    <span class="opacity-70">Mono</span>card
+                  </h4>
+                  <span class="basis-2/6 opacity-80">
+                    <i class="i-qr-code-line"></i>
+                    <i class="i-signal-tower-fill ml-1.5"></i>
+                  </span>
+                </a>
+                <a
+                  :href="monodotSlug"
+                  class="flex gap-3 px-5 py-2.5 hover:bg-black"
+                >
+                  <h4 class="basis-4/6 text-right">
+                    <span class="opacity-70">Mono</span>dot
+                  </h4>
+                  <span class="basis-2/6 opacity-80">
+                    <i class="i-qr-code-line"></i>
+                  </span>
+                </a>
+              </MenuItem>
+            </MenuItems>
+          </Fade>
+        </Menu>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import {
+  Menu,
+  MenuButton,
+  MenuItems,
+  MenuItem,
+} from '@headlessui/vue';
+
+export interface Props {
+  isSticky?: boolean;
+  monocardSlug: string;
+  monodotSlug: string;
+  supportUrl: string;
+  businessLpUrl: string;
+}
+
+defineProps<Props>();
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <aside class="flex flex-col h-full">
+    <nav class="py-4 grow">
+      <ul class="relative h-full">
+        <ShopSidenavCategory
+          v-for="categoryTree in categoryTrees"
+          :key="categoryTree._id"
+          :category-tree="categoryTree"
+        />
+      </ul>
+    </nav>
+    <footer class="text-base">
+      <div class="flex items-center px-2 py-4 bg-base-100">
+        <AccountLink class="p-2 grow flex items-center gap-3">
+          <i class="i-account text-4xl text-base-500 m-0"></i>
+          <span class="leading-tight">
+            {{ `${$t.i19hello} ${customerName || $t.i19visitor}` }}
+            <small class="block lowercase font-semibold text-primary">
+              {{ $t.i19myOrders }}, {{ $t.i19myAccount }}
+            </small>
+          </span>
+        </AccountLink>
+        <button
+          v-if="isLogged"
+          @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>
+        </button>
+      </div>
+      <ul class="flex gap-3 p-4 bg-base-200 text-xl text-base-700">
+        <li v-for="(href, network) in socialNetworks" :key="network">
+          <SocialNetworkLink :network="network" class="p-1 active:text-primary" />
+        </li>
+      </ul>
+    </footer>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import type { CategoryTree } from '@@sf/composables/use-shop-header';
+import { onMounted } from 'vue';
+import {
+  customerName,
+  initializeFirebaseAuth,
+  isLogged,
+  logout,
+} from '@@sf/state/customer-session';
+import { socialNetworks } from '@@sf/server-data';
+import AccountLink from '@@sf/components/AccountLink.vue';
+import SocialNetworkLink from '@@sf/components/SocialNetworkLink.vue';
+import ShopSidenavCategory from '~/components/ShopSidenavCategory.vue';
+
+export interface Props {
+  categoryTrees?: CategoryTree[];
+}
+
+withDefaults(defineProps<Props>(), {
+  categoryTrees() {
+    return [];
+  },
+});
+onMounted(() => initializeFirebaseAuth());
+</script>

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

@@ -0,0 +1,78 @@
+<template>
+  <li class="text-lg text-base-800">
+    <details
+      v-if="categoryTree.subcategories.length"
+      class="bg-white overflow-y-auto overflow-x-hidden z-10
+      open:absolute open:top-0 open:left-0 open:w-full open:h-full"
+      @toggle="isOpen = !isOpen"
+    >
+      <summary
+        class="cursor-pointer list-none px-6 py-3 active:bg-base-100 transition-colors"
+        :class="isOpen ? 'bg-base-100' : null"
+      >
+        <i :class="!isOpen
+          ? 'i-arrow-right float-right mb-0 mt-1 text-xl text-base-500'
+          : 'i-arrow-left text-lg'"></i>
+        <AImg
+          v-if="!isOpen && categoryTree.icon"
+          :picture="categoryTree.icon"
+          class="w-auto h-5 inline mr-3"
+        />
+        <h3 class="inline" :class="isOpen ? 'ml-4 text-base' : null">
+          {{ categoryTree.name }}
+        </h3>
+      </summary>
+      <ul
+        class="mt-2 transition-opacity"
+        :class="isFaded ? 'opacity-20' : 'opacity-100'"
+        tabindex="-1"
+      >
+        <ShopSidenavCategory
+          v-for="subcategoryTree in categoryTree.subcategories"
+          :key="subcategoryTree._id"
+          :category-tree="subcategoryTree"
+        />
+        <li>
+          <a
+            :href="`/${categoryTree.slug}`"
+            class="block px-6 py-3 text-base underline active:bg-base-200"
+          >
+            {{ $t.i19seeAll$1Category.replace('$1', categoryTree.name) }}
+          </a>
+        </li>
+      </ul>
+    </details>
+    <a
+      v-else
+      :href="`/${categoryTree.slug}`"
+      class="block px-6 py-3 active:bg-base-200"
+    >
+      <AImg
+        v-if="!isOpen && categoryTree.icon"
+        :picture="categoryTree.icon"
+        class="w-auto h-5 inline mr-3"
+      />
+      <h3 class="inline">{{ categoryTree.name }}</h3>
+    </a>
+  </li>
+</template>
+
+<script setup lang="ts">
+import type { CategoryTree } from '@@sf/composables/use-shop-header';
+import { ref, watch } from 'vue';
+
+export interface Props {
+  categoryTree: CategoryTree;
+}
+
+defineProps<Props>();
+const isOpen = ref(false);
+const isFaded = ref(true);
+watch(isOpen, (_isOpen) => {
+  if (_isOpen) {
+    setTimeout(() => { isFaded.value = false; }, 25);
+  } else {
+    isFaded.value = true;
+  }
+});
+</script>

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

@@ -1,16 +1,12 @@
 <script lang="ts" setup>
 import {
-  i19myAccountAndOrders,
   i19openCart,
-  i19signUp,
 } from '@@i18n';
-import LoginDrawer, { Props as LoginDrawerProps } from '@@components/LoginDrawer.vue';
-import HeaderButtonLink from '@@components/header/HeaderButtonLink.vue';
+import HeaderButtonLink from '~/components/header/HeaderButtonLink.vue';
 
 export interface Props {
   accountUrl?: string;
   cartUrl?: string;
-  loginDrawerAdditionalLinks?: LoginDrawerProps['additionalLinks'];
 }
 
 withDefaults(defineProps<Props>(), {
@@ -31,22 +27,6 @@ withDefaults(defineProps<Props>(), {
     </a>
   </slot>
   <slot name="account">
-    <LoginDrawer
-      :account-url="accountUrl"
-      :additional-links="loginDrawerAdditionalLinks"
-    >
-      <template #toggle>
-        <HeaderButtonLink
-          :href="accountUrl"
-          :title="i19myAccountAndOrders"
-        >
-          <div class="i-user-circle"></div>
-        </HeaderButtonLink>
-      </template>
-      <template #form-button-content="{ isSignUp }">
-        {{ isSignUp ? i19signUp : 'Acompanhar pedidos' }}
-      </template>
-    </LoginDrawer>
   </slot>
   <slot name="cart">
     <HeaderButtonLink

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

@@ -6,7 +6,7 @@ import {
   i19help,
   i19products,
 } from '@@i18n';
-import HeaderNavLink from '@@components/header/HeaderNavLink.vue';
+import HeaderNavLink from '~/components/header/HeaderNavLink.vue';
 
 export interface Props {
   categories?: CategoriesList;

package/ecomplus-stores/monocard/functions/ssr/src/env.d.ts

@@ -1,3 +1,4 @@
-/// <reference types="astro/client" />
+/// <reference types="@astrojs/image/client" />
 /// <reference types="vite-plugin-pwa/client" />
 /// <reference types="@cloudcommerce/storefront/client" />
+/// <reference types="@cloudcommerce/storefront/server" />