cloudcommerce 0.20.2 → 0.22.0

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

@@ -0,0 +1,20 @@
+<template>
+  <section class="ui-section">
+    <Countdown />
+    <article v-for="product in products" :key="product._id">
+      <ProductCard :product="product" />
+    </article>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { ProductItem } from '@@sf/composables/use-product-card';
+import ProductCard from '~/components/ProductCard.vue';
+import Countdown from '~/components/Countdown.vue';
+
+export interface Props {
+  products: ProductItem[];
+}
+
+defineProps<Props>();
+</script>

package/ecomplus-stores/iluminim/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/iluminim/functions/ssr/src/components/ShopHeader.vue

@@ -0,0 +1,137 @@
+<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-bars-3-bottom-left'"
+          ></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 text-base-800">
+        <button
+          :aria-label="$t.i19searchProducts"
+          @click="isSearchOpen = !isSearchOpen"
+        >
+          <i class="i-magnifying-glass w-7 h-7
+            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-circle w-7 h-7
+              hover:text-primary hover:scale-110 active:scale-125"
+              :class="open ? 'text-black scale-110' : null"
+            ></i>
+          </template>
+        </AccountMenu>
+        <button
+          :aria-label="$t.i19openCart"
+          @click="isCartOpen = !isCartOpen"
+          class="relative group"
+        >
+          <i class="i-carbon:shopping-cart w-7 h-7 group-hover:text-primary
+            text-secondary-900 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/iluminim/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-chevron-down 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/iluminim/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="subcategory._id"
+              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/iluminim/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 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-user-circle 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-arrow-right-on-rectangle 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>

package/ecomplus-stores/iluminim/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, SubcategoryTree } from '@@sf/composables/use-shop-header';
+import { ref, watch } from 'vue';
+
+export interface Props {
+  categoryTree: CategoryTree | SubcategoryTree;
+}
+
+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/iluminim/functions/ssr/src/env.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="@astrojs/image/client" />
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vue/ref-macros" />
+/// <reference types="@cloudcommerce/storefront/client" />
+/// <reference types="@cloudcommerce/storefront/server" />
+
+/* eslint-disable import/newline-after-import */
+
+declare module '*.vue' {
+  import { type DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/ecomplus-stores/iluminim/functions/ssr/src/layouts/Base.astro

@@ -0,0 +1,16 @@
+---
+import SfBase from '@@sf/layouts/Base.astro';
+import InlineScripts from '~/scripts/InlineScripts.astro';
+import '~/assets/style.css';
+import 'uno.css';
+// Supports weights 100-900
+import '@fontsource-variable/heebo/index.css';
+---
+
+<SfBase>
+  <Fragment slot="base-head">
+    <slot name="base-head" />
+  </Fragment>
+  <InlineScripts slot="before-head-end" />
+  <slot />
+</SfBase>

package/ecomplus-stores/iluminim/functions/ssr/src/layouts/PageHeader.astro

@@ -0,0 +1,33 @@
+---
+import usePageHeader from '@@sf/layouts/use-page-header';
+import Picture from '@@sf/components/Picture.astro';
+import PitchBar from '~/components/PitchBar.vue';
+import ShopHeader from '~/components/ShopHeader.vue';
+
+const { routeContext } = Astro.locals;
+const { settings, isHomepage } = routeContext;
+const LogoHeading = isHomepage ? 'h1' : 'h2';
+const { pitchBar, shopHeader } = await usePageHeader({ routeContext });
+---
+
+<slot name="pitch-bar">
+  {pitchBar.slides.length > 1 && <PitchBar {...pitchBar} client:idle />}
+  {pitchBar.slides.length === 1 && <PitchBar {...pitchBar} />}
+</slot>
+<ShopHeader {...shopHeader} client:load>
+  <Fragment slot="logo">
+    <a href="/">
+      <LogoHeading>
+        <Picture
+          slot="logo-picture"
+          src={settings.logo}
+          alt={settings.name}
+          widths={[300]}
+          fetchpriority="high"
+          loading="eager"
+          class="hover:drop-shadow-sm max-w-[150px] mx-auto"
+        />
+      </LogoHeading>
+    </a>
+  </Fragment>
+</ShopHeader>

package/ecomplus-stores/iluminim/functions/ssr/src/main/Fallback.astro

@@ -0,0 +1,10 @@
+---
+---
+
+<main>
+  <h1>Error :/</h1>
+  <p class="instructions">
+    Check out the <code>src/pages</code> directory to get started.<br/>
+    <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
+  </p>
+</main>

package/ecomplus-stores/iluminim/functions/ssr/src/main/Home.astro

@@ -0,0 +1,49 @@
+---
+import api from '@cloudcommerce/api';
+import { usePageHero } from '@@sf/layouts/use-page-main';
+import BannerPictures from '@@sf/components/BannerPictures.astro';
+import HeroSlider from '~/components/HeroSlider.vue';
+import Sections from '~/main/Sections.astro';
+import Countdown from '~/components/Countdown.vue';
+
+const { routeContext } = Astro.locals;
+const { heroSlider } = await usePageHero({ routeContext });
+const heroSlides = heroSlider.slides;
+const {
+  data: {
+    result: products,
+  },
+} = await api.get('products', {
+  limit: 500,
+  fields: ['sku', 'name', 'pictures'] as const,
+});
+---
+
+<main>
+  {heroSlider.slides.length &&
+    <HeroSlider {...heroSlider} client:load>
+      {heroSlides[0] && <BannerPictures slot="picture-0" {...heroSlides[0]} index={0} />}
+      {heroSlides[1] && <BannerPictures slot="picture-1" {...heroSlides[1]} index={1} />}
+      {heroSlides[2] && <BannerPictures slot="picture-2" {...heroSlides[2]} index={2} />}
+      {heroSlides[3] && <BannerPictures slot="picture-3" {...heroSlides[3]} index={3} />}
+      {heroSlides[4] && <BannerPictures slot="picture-4" {...heroSlides[4]} index={4} />}
+      {heroSlides[5] && <BannerPictures slot="picture-5" {...heroSlides[5]} index={5} />}
+      {heroSlides[6] && <BannerPictures slot="picture-6" {...heroSlides[6]} index={6} />}
+      {heroSlides[7] && <BannerPictures slot="picture-7" {...heroSlides[7]} index={7} />}
+      {heroSlides[8] && <BannerPictures slot="picture-8" {...heroSlides[8]} index={8} />}
+      {heroSlides[9] && <BannerPictures slot="picture-9" {...heroSlides[9]} index={9} />}
+      <!-- https://github.com/withastro/astro/issues/5066#issuecomment-1277998365 -->
+    </HeroSlider>
+  }
+  <Sections />
+  <div class="container mx-auto py-4">
+    <Countdown client:visible />
+  </div>
+  <article class="container">
+    {products.map((product) => (
+      <span>{product.sku}</span>
+      <span> {product.name}</span>
+      <br>
+    ))}
+  </article>
+</main>

package/ecomplus-stores/iluminim/functions/ssr/src/main/Sections.astro

@@ -0,0 +1,42 @@
+---
+import api from '@cloudcommerce/api';
+import { usePageSections } from '@@sf/layouts/use-page-main';
+import BannersGrid from '~/components/BannersGrid.astro';
+import ProductShelf from '~/components/ProductShelf.vue';
+import ProductsCountdown, { type Props as ProductsCountdownProps }
+  from '~/components/ProductsCountdown.vue';
+
+const { routeContext } = Astro.locals;
+const { sections } = await usePageSections({
+  routeContext,
+  handleCustomSection: async (type, content) => {
+    if (type === 'c:products-countdown') {
+      const {
+        data: {
+          result: products,
+        },
+      } = await api.get('search/v1', {
+        params: { sku: content.skus },
+      });
+      const props: ProductsCountdownProps = { products };
+      return { props };
+    }
+    return { props: content };
+  },
+});
+---
+
+<article class="my-9 md:my-12">
+  {sections.map(({ type, props }) => {
+    switch (type) {
+      case 'product-shelf':
+        return <ProductShelf {...props} client:visible />
+      case 'banners-grid':
+        return <BannersGrid {...props} />
+      case 'c:products-countdown':
+        return <ProductsCountdown {...props} />
+      default:
+        return <div data-section={type}></div>
+    }
+  })}
+</article>

package/ecomplus-stores/iluminim/functions/ssr/src/main/Wildcard.astro

@@ -0,0 +1,18 @@
+---
+const { fetchingApiContext, apiContext } = Astro.locals.routeContext;
+
+await fetchingApiContext;
+const apiDoc = apiContext.doc;
+---
+
+<main>
+  {apiDoc &&
+    <h1>Hello <span class="text-gradient">{apiDoc.name}</span></h1>
+    <hr>
+    <div class="mt-3">
+      <mark>{apiDoc._id}</mark> from <i>{apiContext.resource}</i>
+      <p>{Math.random()}</p>
+      <em>Lorem ipsum dolor sit amet</em>
+    </div>
+  }
+</main>