cloudcommerce 0.26.6 → 0.27.0

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

@@ -1,158 +0,0 @@
-<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="w-screen lg:w-[calc(100vw-1rem)] xl:max-w-[82rem] 2xl:max-w-[85rem]
-      mx-auto px-1 sm:pl-2 sm:pr-2.5 lg:px-1
-      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">
-          <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"
-    >
-      <Suspense>
-        <SearchModal v-if="isSearchOpenOnce" />
-        <template #fallback>
-          <div class="container mx-auto">
-            <Skeleton class="p-6" is-large />
-          </div>
-        </template>
-      </Suspense>
-    </Drawer>
-    <Teleport v-if="isMounted" to="#teleported-overlap">
-      <Drawer
-        v-model="isCartOpen"
-        placement="end"
-        backdrop-target="#teleported-overlap"
-      >
-        <Suspense>
-          <CartSidebar v-if="isCartOpenOnce" @close="isCartOpen = false" />
-          <template #fallback>
-            <Skeleton class="pt-16 px-6" is-bold />
-          </template>
-        </Suspense>
-      </Drawer>
-    </Teleport>
-  </header>
-</template>
-
-<script setup lang="ts">
-import {
-  ref,
-  watch,
-  onMounted,
-  defineAsyncComponent,
-} from 'vue';
-import { watchOnce } from '@vueuse/core';
-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 AccountMenu from '~/components/AccountMenu.vue';
-
-export interface Props extends Omit<UseShopHeaderProps, 'header'> {}
-
-const SearchModal = defineAsyncComponent(() => import('~/components/SearchModal.vue'));
-const CartSidebar = defineAsyncComponent(() => import('~/components/CartSidebar.vue'));
-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 isSearchOpenOnce = ref(false);
-watchOnce(isSearchOpen, () => {
-  isSearchOpenOnce.value = true;
-});
-const isCartOpen = ref(false);
-const isCartOpenOnce = ref(false);
-watchOnce(isCartOpen, () => {
-  isCartOpenOnce.value = true;
-});
-const isMounted = ref(false);
-const delayedTotalItems = ref(0);
-onMounted(() => {
-  isMounted.value = true;
-  watch(totalItems, (newTotalItems, prevTotalItems) => {
-    if (typeof prevTotalItems === 'number') {
-      if (prevTotalItems < newTotalItems) {
-        isCartOpen.value = true;
-      } else if (prevTotalItems && !newTotalItems) {
-        isCartOpen.value = false;
-      }
-    }
-    delayedTotalItems.value = newTotalItems;
-  }, { immediate: true });
-});
-</script>

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

@@ -1,58 +0,0 @@
-<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

@@ -1,88 +0,0 @@
-<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/iluminim/functions/ssr/src/components/ShopSidenav.vue

@@ -1,61 +0,0 @@
-<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-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 { socialNetworks } from '@@sf/sf-lib';
-import {
-  customerName,
-  initializeFirebaseAuth,
-  isLogged,
-  logout,
-} from '@@sf/state/customer-session';
-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

@@ -1,80 +0,0 @@
-<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"
-          :alt="categoryTree.name"
-          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, i) in categoryTree.subcategories"
-          :key="i"
-          :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"
-        :alt="categoryTree.name"
-        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

@@ -1,13 +0,0 @@
-/// <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

@@ -1,16 +0,0 @@
----
-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/main/Fallback.astro

@@ -1,10 +0,0 @@
----
----
-
-<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

@@ -1,49 +0,0 @@
----
-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

@@ -1,42 +0,0 @@
----
-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

@@ -1,18 +0,0 @@
----
-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>

package/ecomplus-stores/iluminim/functions/ssr/src/pages/[...slug].astro

@@ -1,40 +0,0 @@
----
-import api from '@cloudcommerce/api';
-import loadRouteContext, { RouteContext } from '@@sf/ssr-context';
-import BaseHead from '@@sf/layouts/BaseHead.astro';
-import Base from '~/layouts/Base.astro';
-import PageHeader from '~/layouts/PageHeader.astro';
-import WildcardMain from '~/main/Wildcard.astro';
-
-if (String(Astro.params.slug).endsWith('.css.map')) {
-  return new Response(null, { status: 404 });
-}
-
-let routeContext: RouteContext | undefined;
-let loadError: any;
-try {
-  routeContext = await loadRouteContext(Astro);
-} catch (err: any) {
-  if (err.astroResponse) {
-    return err.astroResponse;
-  }
-  loadError = err;
-}
-
-export async function getStaticPaths() {
-  return (await api.get('products?sort=-sales&limit=4&fields=slug'))
-    .data.result.map(({ slug }) => ({ params: { slug } }));
-}
----
-
-<!DOCTYPE html>
-<html lang={routeContext?.lang.replace('_', '-')}>
-{routeContext &&
-  <Base>
-    <BaseHead slot="base-head" />
-    <PageHeader />
-    <WildcardMain />
-  </Base>
-}
-{loadError && <Fragment set:html={loadError.responseHTML} />}
-</html>

package/ecomplus-stores/iluminim/functions/ssr/src/pages/_vue.ts

@@ -1,3 +0,0 @@
-import createApp from '@@sf/pages/_vue';
-
-export default createApp;