cloudcommerce 0.22.0 → 0.22.2

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="bg-base-100 relative z-20">
+    <div class="container md:w-2/3 mx-auto px-3 py-1">
+      <Carousel :autoplay="countValidSlides > 1 ? 7000 : undefined">
+        <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-base-800"
+            ></span>
+          </component>
+        </li>
+        <template #controls>
+          <div
+            v-show="countValidSlides > 1"
+            class="text-xl leading-none text-base-400"
+          >
+            <CarouselControl class="pr-2 bg-base-100 hover:text-base-700" is-prev />
+            <CarouselControl class="pl-2 bg-base-100 hover:text-base-700" />
+          </div>
+        </template>
+      </Carousel>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  type Props as UsePitchBarProps,
+  usePitchBar,
+} from '@@sf/composables/use-pitch-bar';
+import Carousel from '@@sf/components/Carousel.vue';
+import CarouselControl from '@@sf/components/CarouselControl.vue';
+
+export interface Props extends UsePitchBarProps {}
+
+const props = defineProps<Props>();
+const {
+  parsedContents,
+  countValidSlides,
+} = usePitchBar(props);
+</script>

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

@@ -0,0 +1,96 @@
+<template>
+  <div
+    class="text-base-600
+      [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]"
+    :class="isBig ? 'text-lg' : null"
+    data-prices
+  >
+    <span v-if="comparePrice" class="text-base-500 mr-1 [font-size:87%]">
+      <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-back-fill 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 Props as UsePricesProps,
+  usePrices,
+} from '@@sf/composables/use-prices';
+
+export interface Props extends UsePricesProps {
+  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>

package/ecomplus-stores/barra-doce/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"
+  >
+    <component
+      :is="link ? 'ALink' : 'span'"
+      :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">
+          <template v-if="images?.length">
+            <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"
+            />
+          </template>
+          <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-start p-4
+        group-hover:backdrop-blur-md bg-white/40 z-10">
+        <div class="pb-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>
+        <component
+          :is="headingTag"
+          class="ui-link no-underline line-clamp-2 text-sm"
+          :class="[
+            isActive ? 'text-base-700' : 'text-base-500',
+            link ? 'group-hover:underline group-hover:text-primary' : null,
+          ]"
+        >
+          {{ title }}
+        </component>
+        <button
+          v-if="isActive && !hasVariations"
+          class="absolute -top-12 left-1/2 -ml-7 w-14 h-14 lg:left-4 lg:ml-0
+          primary opacity-75 hover:opacity-100
+          rounded-full text-3xl leading-none p-2 z-10"
+          @click.prevent="addProductToCart(product)"
+        >
+          <i class="i-shopping-bag-3-line"></i>
+        </button>
+      </div>
+    </component>
+  </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({
+  product: props.product,
+  productId: props.productId,
+} 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/barra-doce/functions/ssr/src/components/ProductShelf.vue

@@ -0,0 +1,60 @@
+<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 v-if="titleLink" :href="titleLink" class="ui-link">
+          {{ title }}
+        </ALink>
+        <span v-else class="text-base-700">
+          {{ title }}
+        </span>
+      </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 !lg:top-1/3 !-left-4 w-12 h-12
+            bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded
+            lg:shadow-sm lg:ring-1 ring-black/5" is-prev />
+          <CarouselControl class="!top-1/2 !lg:top-1/3 !-right-4 w-12 h-12
+            bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded
+            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/barra-doce/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/barra-doce/functions/ssr/src/components/ShopHeader.vue

@@ -0,0 +1,136 @@
+<template>
+  <header
+    ref="header"
+    class="relative top-0 z-50 transition-colors"
+    :class="[
+      isSticky && !isSidenavOpen ? 'bg-white/80' : 'bg-white',
+      isSticky ? 'backdrop-blur-md shadow py-2 md:py-3' : 'py-3 sm:py-4 md:py-5',
+    ]"
+  >
+    <div class="container 2xl:max-w-7xl
+      mx-auto px-1 lg:pr-3 lg:pl-5 xl:pr-7 xl:pl-9 2xl:pr-0 2xl:pl-2
+      flex md:grid grid-flow-col grid-cols-3 lg:grid-cols-none lg:auto-cols-max
+      justify-between items-center">
+      <div class="basis-1/4 lg:hidden">
+        <button
+          class="px-2 my-1"
+          :aria-label="$t.i19toggleMenu"
+          @click="isSidenavOpen = !isSidenavOpen"
+        >
+          <i
+            class="text-base-500 text-3xl"
+            :class="isSidenavOpen ? 'i-close' : 'i-menu-line'"
+          ></i>
+        </button>
+      </div>
+      <slot name="logo" />
+      <ShopHeaderMenu class="hidden lg:block" v-bind="{ inlineMenuTrees }" />
+      <div class="basis-1/4 px-2 flex justify-end items-center gap-3 lg:gap-4">
+        <button
+          :aria-label="$t.i19searchProducts"
+          @click="isSearchOpen = !isSearchOpen"
+        >
+          <i class="i-search-3-line w-7 h-7
+            text-base-700 hover:text-primary hover:scale-110 active:scale-125"></i>
+        </button>
+        <AccountMenu
+          class="hidden sm:block"
+          :aria-label="$t.i19myAccount"
+          :service-links="serviceLinks"
+        >
+          <template #button="{ open }">
+            <i
+              class="i-user-2-line w-7 h-7
+              text-base-600 hover:text-primary hover:scale-110 active:scale-125"
+              :class="open ? 'text-base-800 scale-110' : null"
+            ></i>
+          </template>
+        </AccountMenu>
+        <button
+          :aria-label="$t.i19openCart"
+          @click="isCartOpen = !isCartOpen"
+          class="relative group text-primary-500"
+        >
+          <i class="i-shopping-bag-3-fill w-7 h-7 group-hover:text-primary
+            group-hover:scale-110 group-active:scale-125"></i>
+          <span
+            v-if="delayedTotalItems"
+            class="ui-badge-pill-sm absolute -top-1 -right-1.5"
+          >
+            {{ delayedTotalItems }}
+          </span>
+        </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" v-bind="{ categoryTrees }" />
+    </Drawer>
+    <Drawer
+      v-model="isSearchOpen"
+      :has-close-button="false"
+      placement="top"
+    >
+      <SearchModal />
+    </Drawer>
+    <Teleport v-if="isMounted" to="#teleported-overlap">
+      <Drawer
+        v-model="isCartOpen"
+        placement="end"
+        backdrop-target="#teleported-overlap"
+      >
+        <CartSidebar />
+      </Drawer>
+    </Teleport>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue';
+import { totalItems } from '@@sf/state/shopping-cart';
+import {
+  type Props as UseShopHeaderProps,
+  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 SearchModal from '~/components/SearchModal.vue';
+import AccountMenu from '~/components/AccountMenu.vue';
+import CartSidebar from '~/components/CartSidebar.vue';
+
+export interface Props extends Omit<UseShopHeaderProps, 'header'> {
+  serviceLinks?: Array<{
+    title: string;
+    href: string;
+  }>;
+}
+
+const props = defineProps<Props>();
+const header = ref<HTMLElement | null>(null);
+const {
+  isSticky,
+  positionY,
+  categoryTrees,
+  inlineMenuTrees,
+} = useShopHeader({ ...props, header });
+const isSidenavOpen = ref(false);
+const isSearchOpen = ref(false);
+const isCartOpen = ref(false);
+const isMounted = ref(false);
+const delayedTotalItems = ref(0);
+onMounted(() => {
+  isMounted.value = true;
+  watch(totalItems, (newTotalItems, prevTotalItems) => {
+    if (prevTotalItems && prevTotalItems < newTotalItems) {
+      isCartOpen.value = true;
+    }
+    delayedTotalItems.value = newTotalItems;
+  }, { immediate: true });
+});
+</script>

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

@@ -0,0 +1,58 @@
+<template>
+  <nav>
+    <ul
+      class="flex gap-4 xl:gap-5 text-base-700"
+      :class="inlineMenuTrees.length < 7 ? 'text-base' : 'text-sm'"
+    >
+      <li v-for="(categoryTree, i) in inlineMenuTrees" :key="i">
+        <ShopHeaderSubmenu
+          v-if="categoryTree.subcategories.length"
+          :category-tree="categoryTree"
+        >
+          <template #button="{ open }">
+            <span class="hover:text-primary group">
+              <h3
+                class="group-hover:underline inline"
+                :class="[
+                  inlineMenuTrees.length < 7 ? 'decoration-2' : null,
+                  open ? 'underline' : null,
+                ]"
+              >
+                {{ categoryTree.name }}
+              </h3>
+              <i
+                v-if="hasOneLevelSubcategories"
+                class="i-down-line ml-1 transition-transform
+                text-base-400 group-hover:text-primary-subtle"
+                :class="open ? 'rotate-180' : null"
+              ></i>
+            </span>
+          </template>
+        </ShopHeaderSubmenu>
+        <a
+          v-else
+          :href="`/${categoryTree.slug}`"
+          class="hover:text-primary hover:underline"
+          :class="inlineMenuTrees.length < 7 ? 'decoration-2' : null"
+        >
+          <h3 class="inline">{{ categoryTree.name }}</h3>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import type { CategoryTree } from '@@sf/composables/use-shop-header';
+import { computed } from 'vue';
+import ShopHeaderSubmenu from '~/components/ShopHeaderSubmenu.vue';
+
+export interface Props {
+  inlineMenuTrees: CategoryTree[];
+}
+
+const props = defineProps<Props>();
+const hasOneLevelSubcategories = computed(() => {
+  return !!props.inlineMenuTrees.find(({ subcategories }) => !subcategories.length);
+});
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ShopHeaderSubmenu.vue

@@ -0,0 +1,88 @@
+<template>
+  <Popover v-slot="{ open }">
+    <PopoverButton class="outline-none">
+      <slot name="button" v-bind="{ open }" />
+    </PopoverButton>
+    <div class="relative">
+      <Fade>
+        <PopoverPanel
+          class="absolute z-20 top-3 left-1/2 -translate-x-1/2 !transform
+          px-6 py-4 rounded backdrop-blur-md shadow bg-white/80
+          text-base text-base-700"
+          :class="countMenuCols === 1 ? 'w-60'
+            : countMenuCols === 2 ? `w-screen ${(categoryPicture ? 'max-w-lg' : 'max-w-sm')}`
+            : countMenuCols === 3 ? `w-screen ${(categoryPicture ? 'max-w-xl' : 'max-w-md')}`
+            : countMenuCols < 6 ? 'w-screen max-w-3xl' : 'w-screen max-w-5xl'"
+        >
+          <div class="flex gap-6 w-full">
+            <ul v-if="subcategoryLinks.length" class="flex-1">
+              <li
+                v-for="(subcategory, i) in subcategoryLinks"
+                :key="`link-${i}`"
+                :class="subcategoryLinks.length > 10 ? 'text-sm mb-1' : 'mb-2'"
+              >
+                <a :href="`/${subcategory.slug}`" class="hover:text-primary">
+                  <h3>{{ subcategory.name }}</h3>
+                </a>
+              </li>
+            </ul>
+            <div
+              v-for="(subcategory, i) in subcategoryCols"
+              :key="i"
+              class="flex-1"
+            >
+              <a :href="`/${subcategory.slug}`" class="hover:text-primary">
+                <h3>{{ subcategory.name }}</h3>
+              </a>
+              <ul class="text-sm text-base-600 mt-1 mb-1.5">
+                <li
+                  v-for="(nestedSubcategory, ii) in subcategory.subcategories"
+                  :key="`${i}-${ii}`"
+                  class="mb-0.5"
+                >
+                  <a
+                    :href="`/${nestedSubcategory.slug}`"
+                    class="hover:text-primary hover:underline"
+                  >
+                    <h3>{{ nestedSubcategory.name }}</h3>
+                  </a>
+                </li>
+              </ul>
+            </div>
+            <div
+              v-if="categoryPicture"
+              :class="countMenuCols === 2 ? 'basis-1/2'
+                : countMenuCols < 5 ? 'basis-2/5' : 'basis-1/3'"
+            >
+              <AImg :picture="categoryPicture" class="ml-auto rounded" />
+            </div>
+          </div>
+          <a
+            :href="`/${categoryTree.slug}`"
+            class="block mt-1 text-xs text-base-600 leading-snug underline"
+          >
+            {{ $t.i19seeAll$1Category.replace('$1', categoryTree.name) }}
+          </a>
+        </PopoverPanel>
+      </Fade>
+    </div>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue';
+import {
+  type Props as UseShopHeaderSubmenuProps,
+  useShopHeaderSubmenu,
+} from '@@sf/composables/use-shop-header-submenu';
+
+export interface Props extends UseShopHeaderSubmenuProps {}
+
+const props = defineProps<Props>();
+const {
+  categoryPicture,
+  subcategoryLinks,
+  subcategoryCols,
+  countMenuCols,
+} = useShopHeaderSubmenu(props);
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <aside class="flex flex-col h-full">
+    <nav class="py-4 grow">
+      <ul class="relative h-full">
+        <ShopSidenavCategory
+          v-for="(categoryTree, i) in categoryTrees"
+          :key="i"
+          :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-user-2-line 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-align-arrow-left-fill 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[];
+}
+
+defineProps<Props>();
+onMounted(() => initializeFirebaseAuth());
+</script>