cloudcommerce 0.20.2 → 0.22.0

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

@@ -0,0 +1,104 @@
+<template>
+  <Menu
+    as="div"
+    class="relative text-center text-sm text-base-800"
+    v-slot="{ open }"
+  >
+    <div v-if="open">
+      <span v-once>{{ initializeFirebaseAuth() }}</span>
+    </div>
+    <MenuButton class="outline-none">
+      <slot name="button" v-bind="{ open }" />
+    </MenuButton>
+    <Fade>
+      <MenuItems class="absolute -right-8 mt-2 w-56
+        rounded shadow ring-1 ring-black/5 bg-white
+        divide-y divide-base-100 focus:outline-none">
+        <div class="p-3 text-base-600">
+          {{ `${$t.i19hello} ${customerName || $t.i19visitor}` }}
+          <AccountLink role="button" class="ui-btn-sm ui-btn-primary block my-1">
+            {{ $t.i19accessMyAccount }}
+          </AccountLink>
+          <AccountLink v-if="!isLogged" is-sign-up class="ui-link block">
+            {{ $t.i19createAnAccount }}
+          </AccountLink>
+        </div>
+        <ul class="list-none">
+          <MenuItem as="li" v-slot="{ active }">
+            <AccountLink
+              to="orders"
+              class="block p-2"
+              :class="active ? 'bg-base-100 text-primary' : null"
+            >
+              {{ $t.i19myOrders }}
+            </AccountLink>
+          </MenuItem>
+          <MenuItem as="li" v-slot="{ active }">
+            <AccountLink
+              to="favorites"
+              class="block p-2"
+              :class="active ? 'bg-base-100 text-primary' : null"
+            >
+              <i class="i-heart mr-1"></i>
+              {{ $t.i19myFavorites }}
+            </AccountLink>
+          </MenuItem>
+          <MenuItem
+            as="li"
+            v-slot="{ active }"
+            v-for="({ title, href }, i) in serviceLinks"
+            :key="`s-${i}`"
+          >
+            <ALink
+              :href="href"
+              class="block p-2"
+              :class="active ? 'bg-base-100 text-primary' : null"
+            >
+              {{ title }}
+            </ALink>
+          </MenuItem>
+          <MenuItem as="li">
+            <div class="flex justify-center gap-2 p-2 text-base-500 text-base">
+              <span v-for="(href, network) in socialNetworks" :key="network">
+                <SocialNetworkLink :network="network" class="p-1 hover:text-primary" />
+              </span>
+            </div>
+          </MenuItem>
+          <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-arrow-right-on-rectangle text-lg ml-1"></i>
+            </button>
+          </MenuItem>
+        </ul>
+      </MenuItems>
+    </Fade>
+  </Menu>
+</template>
+
+<script setup lang="ts">
+import {
+  Menu,
+  MenuButton,
+  MenuItems,
+  MenuItem,
+} from '@headlessui/vue';
+import { socialNetworks } from '@@sf/server-data';
+import {
+  customerName,
+  initializeFirebaseAuth,
+  isLogged,
+  logout,
+} 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/functions/ssr/src/components/Banner.vue

@@ -0,0 +1,59 @@
+<template>
+  <div
+    class="mx-auto overflow-x-hidden"
+    :class="hasHeader ? 'grid grid-cols-1 md:grid-cols-2 items-center' : null"
+  >
+    <component
+      :is="href ? 'a-link' : 'span'"
+      :href="href"
+      class="[&_img]:rounded-lg"
+      :class="hasHeader ? 'basis-1/2 grow-0 md:order-last' : '[&_img]:w-full'"
+    >
+      <slot name="picture" />
+    </component>
+    <div
+      v-if="hasHeader"
+      class="basis-1/2 grow-0 p-12 xl:ps-32 mb-3 md:mb-0"
+    >
+      <Component
+        v-if="parsedTitle"
+        :is="headingTag"
+        class="ui-title mt-1"
+      >
+        {{ parsedTitle }}
+      </Component>
+      <p v-if="parsedSubtitle" class="text-lg mt-4 md:mt-6">
+        {{ parsedSubtitle }}
+      </p>
+      <component
+        v-if="parsedButtonText"
+        :is="buttonLink ? 'a-link' : 'span'"
+        :href="buttonLink"
+        class="ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
+      >
+        {{ parsedButtonText }}
+      </component>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  type Props as UseBannerProps,
+  useBanner,
+} from '@@sf/composables/use-banner';
+
+export type Props = UseBannerProps & {
+  headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  headingTag: 'h3',
+});
+const {
+  hasHeader,
+  parsedTitle,
+  parsedSubtitle,
+  parsedButtonText,
+} = useBanner(props);
+</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/BannersGrid.astro

@@ -0,0 +1,25 @@
+---
+import type { Props as UseBannerProps } from '@@sf/composables/use-banner';
+import BannerPictures from '@@sf/components/BannerPictures.astro';
+import Banner from '~/components/Banner.vue';
+
+export type Props = {
+  title?: string;
+  titleLink?: string;
+  banners: UseBannerProps[];
+}
+
+const { banners } = Astro.props;
+---
+
+<section class="ui-section">
+  <ul class="flex flex-wrap lg:flex-nowrap gap-4">
+    {banners.map((banner) => (
+      <li class="lg:flex-1 [&_img]:w-full [&_img]:object-cover">
+        <Banner {...banner}>
+          <BannerPictures {...banner} slot="picture" />
+        </Banner>
+      </li>
+    ))}
+  </ul>
+</section>

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

@@ -0,0 +1,35 @@
+<template>
+  <aside class="flex flex-col h-full">
+    <header class="px-6 py-4 flex justify-end items-center gap-3">
+      <span class="text-right text-base text-base-600 font-medium">
+        {{ $t.i19myShoppingCart }}
+      </span>
+      <span class="ui-badge-pill-lg">
+        {{ totalItems }}
+      </span>
+    </header>
+    <article class="grow bg-base-50 border-t-2 border-b-2 border-base-100">
+      <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>
+    </article>
+    <footer class="p-5 shadow">
+    </footer>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { freeShippingFromValue } from '@@sf/state/modules-info';
+import { shoppingCart, totalItems } from '@@sf/state/shopping-cart';
+</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/Countdown.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="flex w-[300px] justify-between">
+    <div>
+      <strong class="text-lg">{{ hours }}</strong>
+      <span>{{ $t.i19about }}</span>
+    </div>
+    <span>:</span>
+    <div>
+      {{ minutes }}
+    </div>
+    <span>:</span>
+    <div>
+      {{ seconds }}
+    </div>
+    <span>:</span>
+    <div>
+      {{ ms }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  ref,
+  computed,
+  watch,
+  watchEffect,
+} from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+
+export interface Props {
+  endsAt?: string;
+  maxHours?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxHours: 8,
+});
+const endTimestamp = computed(() => {
+  if (props.endsAt) {
+    return new Date(props.endsAt).getTime();
+  }
+  return null;
+});
+const hours = ref<number | null>(null);
+const minutes = ref<number>(59);
+const seconds = ref<number>(59);
+const ms = ref<number>(999);
+watchEffect(() => {
+  if (endTimestamp.value) {
+    const timeDiff = endTimestamp.value - Date.now();
+    if (timeDiff > 0) {
+      const diffHours = Math.floor(timeDiff / (1000 * 60 * 60));
+      hours.value = Math.min(diffHours, props.maxHours);
+    }
+    return;
+  }
+  hours.value = props.maxHours;
+});
+useIntervalFn(() => {
+  ms.value -= 1;
+  if (ms.value < 0) {
+    ms.value = 999;
+  }
+}, 1);
+watch([ms], () => {
+  if (ms.value === 0) {
+    seconds.value -= 1;
+    if (seconds.value < 0) {
+      seconds.value = 59;
+      minutes.value -= 1;
+      if (minutes.value < 0) {
+        minutes.value = 59;
+        hours.value = Math.min((hours.value as number) - 1, 0);
+      }
+    }
+  }
+});
+</script>

package/ecomplus-stores/iluminim/functions/ssr/src/components/HeroSlider.vue

@@ -0,0 +1,52 @@
+<template>
+  <section class="bg-base-100 py-3">
+    <div class="relative container mx-auto">
+      <Carousel :autoplay="autoplay" class="[&>*]:items-center">
+        <li
+          v-for="(slide, i) in slides"
+          :key="i"
+          class="shrink-0 basis-full"
+        >
+          <Banner
+            v-bind="{ ...slide, headingTag: i === 0 ? 'h2' : 'h3' }"
+            class="w-full"
+          >
+            <template #picture>
+              <slot :name="`picture-${i}`" />
+            </template>
+          </Banner>
+        </li>
+        <template #controls>
+          <div
+            v-show="slides.length > 1"
+            class="absolute z-10 bottom-5 right-5 flex justify-end items-center"
+          >
+            <div class="relative w-20 h-10 rounded-full
+              bg-primary/80 text-on-primary shadow-sm ring-1 ring-black/5">
+              <CarouselControl class="w-10 h-10 rounded-full hover:bg-primary" is-prev>
+                <i class="i-arrow-left"></i>
+              </CarouselControl>
+              <CarouselControl class="w-10 h-10 rounded-full hover:bg-primary">
+                <i class="i-arrow-right"></i>
+              </CarouselControl>
+            </div>
+          </div>
+        </template>
+      </Carousel>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { Props as UseBannerProps } from '@@sf/composables/use-banner';
+import Carousel from '@@sf/components/Carousel.vue';
+import CarouselControl from '@@sf/components/CarouselControl.vue';
+import Banner from '~/components/Banner.vue';
+
+export type Props = {
+  autoplay?: number;
+  slides: UseBannerProps[];
+}
+
+defineProps<Props>();
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="bg-black relative z-20">
+    <div class="container md:w-2/3 mx-auto px-3 py-1 md:py-1.5">
+      <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 md:text-base lg:tracking-wide
+              text-base-200 uppercase font-semibold
+              [&_b]:text-base-100 [&_strong]:font-black
+              [&_strong]:text-transparent [&_strong]:bg-clip-text [&_strong]:bg-gradient-to-r
+              [&_strong]:from-yellow-200 [&_strong]:to-yellow-400"
+            ></span>
+          </component>
+        </li>
+        <template #controls>
+          <div
+            v-show="countValidSlides > 1"
+            class="text-xl leading-none text-base-300"
+          >
+            <CarouselControl class="pr-2 bg-black hover:text-white" is-prev />
+            <CarouselControl class="pl-2 bg-black hover:text-white" />
+          </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/iluminim/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-arrow-uturn-left 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/iluminim/functions/ssr/src/components/ProductCard.vue

@@ -0,0 +1,118 @@
+<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-between p-4
+        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="[
+            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)"
+        >
+          <i class="i-plus-20-solid mr-0.5"></i>
+          {{ $t.i19addToCart }}
+        </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/iluminim/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 !-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>