cloudcommerce 0.37.0 → 0.38.0

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

@@ -1,57 +0,0 @@
-<template>
-  <section class="ui-section">
-    <div v-if="title" class="mx-auto mb-2 max-w-prose text-center">
-      <h2 class="ui-text-brand text-3xl">
-        <ALink :href="titleLink" :class="titleLink ? 'ui-link' : 'text-base-700'">
-          {{ title }}
-        </ALink>
-      </h2>
-    </div>
-    <Carousel class="group/shelf [&>ul]:justify-center">
-      <li
-        v-for="product in products"
-        :key="product._id"
-        class="shrink-0 basis-1/2 lg:basis-1/3"
-      >
-        <ProductCard :product="product" />
-      </li>
-      <template #controls>
-        <div
-          v-show="products.length > 2"
-          class="text-primary text-3xl leading-none transition-opacity
-          group-hover/shelf:opacity-90 lg:text-2xl lg:opacity-0"
-        >
-          <CarouselControl class="lg:hover:bg-primary-300/60 !-left-4 !top-1/2 h-12
-            w-12 rounded-full bg-transparent ring-black/5
-            lg:bg-white/80 lg:shadow-sm lg:ring-1" is-prev />
-          <CarouselControl class="lg:hover:bg-primary-300/60 !-right-4 !top-1/2 h-12
-            w-12 rounded-full bg-transparent ring-black/5
-            lg:bg-white/80 lg:shadow-sm lg:ring-1" />
-        </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/monocard/functions/ssr/src/components/ProductSpecifications.vue

@@ -1,42 +0,0 @@
-<template>
-  <section v-if="hasSpecs" class="ui-section">
-    <Collapse :title="title || $t.i19specifications">
-      <ul>
-        <li
-          v-for="(grid, gridId) in specifications"
-          :key="gridId"
-          class="border-base-200 grid grid-cols-2
-          border-dashed py-2 sm:grid-cols-3 [&:not(:last-child)]:border-b"
-        >
-          <span class="text-base-700">
-            {{ getGridTitle(`${gridId}`, grids) }}
-          </span>
-          <strong class="font-semibold sm:col-span-2">
-            {{ getSpecTextValue(product, `${gridId}`, grids) }}
-          </strong>
-        </li>
-      </ul>
-    </Collapse>
-  </section>
-</template>
-
-<script setup lang="ts">
-import type { Products } from '@cloudcommerce/api/types';
-import {
-  gridTitle as getGridTitle,
-  specTextValue as getSpecTextValue,
-} from '@ecomplus/utils';
-import Collapse from '~/components/Collapse.vue';
-
-export interface Props {
-  product?: Products;
-  title?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  product: () => globalThis.$storefront.apiContext?.doc as Products,
-});
-const specifications = computed(() => props.product.specifications || {});
-const hasSpecs = computed(() => Object.keys(specifications.value).length);
-const { grids } = globalThis.$storefront.data;
-</script>

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

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

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

@@ -1,71 +0,0 @@
-<template>
-  <footer class="text-base-300 border-base-100 w-screen border-t bg-black py-2">
-    <div class="ui-section">
-      <div class="border-base-200 flex flex-wrap
-        justify-between gap-y-5 border-b pb-7 sm:gap-x-10 lg:flex-nowrap">
-        <div class="shrink">
-          <slot name="logo" />
-          <div v-if="$settings.description" class="prose prose-invert">
-            <p>{{ $settings.description }}</p>
-          </div>
-          <div class="text-base-400 flex gap-2">
-            <span v-for="(href, network) in socialNetworks" :key="network">
-              <SocialNetworkLink :network="network" class="hover:text-primary p-1">
-                <template v-if="network === 'whatsapp'" #append>
-                  <span class="text-base-300 ml-1 text-sm">
-                    {{ $settings.whatsapp }}
-                  </span>
-                </template>
-              </SocialNetworkLink>
-            </span>
-          </div>
-          <div v-if="$settings.phone" class="text-base-200 mt-3">
-            <ALink
-              v-if="$settings.phone"
-              :href="`tel:${$settings.phone.replace(/\D/g, '')}`"
-              class="hover:text-primary"
-            >
-              <i class="i-phone mr-0.5"></i>
-              {{ $settings.phone }}
-            </ALink>
-          </div>
-        </div>
-        <div v-if="pageLinks?.length" class="basis-1/2 sm:basis-auto">
-          <div class="mb-2.5 text-lg font-medium">
-            {{ pagesColTitle || $t.i19institutional }}
-          </div>
-          <ul
-            class="text-sm"
-            :class="pageLinks.length > 5
-              ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
-          >
-            <li v-for="({ title, href }, i) in pageLinks" :key="`p-${i}`">
-              <ALink :href="href" class="ui-link text-base-50">
-                {{ title }}
-              </ALink>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <FooterStamps :stamps="stamps" />
-  </footer>
-</template>
-
-<script setup lang="ts">
-import type { LayoutContent } from '@@sf/content';
-import { socialNetworks } from '@@sf/sf-lib';
-import SocialNetworkLink from '@@sf/components/SocialNetworkLink.vue';
-import FooterStamps from '~/components/FooterStamps.vue';
-
-export interface Props {
-  stamps?: LayoutContent['footer']['stamps'];
-  pageLinks?: Array<{
-    title: string;
-    href: string;
-  }>;
-  pagesColTitle?: string;
-}
-
-defineProps<Props>();
-</script>

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

@@ -1,137 +0,0 @@
-<template>
-  <header
-    ref="header"
-    class="relative top-0 z-50 transition-colors"
-    :class="[
-      isSticky && !isSidenavOpen ? 'bg-black/80' : 'bg-black',
-      isSticky ? 'py-2 shadow backdrop-blur-md md:py-3' : 'py-3 sm:py-4 md:py-5',
-    ]"
-  >
-    <div class="container mx-auto flex grid-flow-col
-      grid-cols-3 items-center justify-between
-      px-1 md:grid lg:max-w-4xl lg:auto-cols-max lg:grid-cols-none lg:pl-3
-      xl:max-w-6xl 2xl:max-w-7xl">
-      <div class="basis-1/4 lg:hidden">
-        <button
-          class="my-1 px-2"
-          :aria-label="$t.i19toggleMenu"
-          @click="isSidenavOpen = !isSidenavOpen"
-        >
-          <i
-            class="text-3xl transition-colors"
-            :class="[
-              isSidenavOpen ? 'i-close' : 'i-menu-3-line',
-              isMounted ? 'text-base-100' : 'text-base-300 animate-pulse',
-            ]"
-          ></i>
-        </button>
-      </div>
-      <slot name="logo" />
-      <ShopHeaderMenu
-        class="hidden lg:block"
-        v-bind="{ isSticky, ...headerNavLinks }"
-      />
-      <div class="flex basis-1/4 items-center justify-end gap-3 px-2 lg:gap-4">
-        <AccountMenu class="hidden sm:block">
-          <template #button="{ open }">
-            <i
-              class="i-account-pin-circle-line hover:text-primary h-7
-              w-7 hover:scale-110 active:scale-125"
-              :class="open ? 'text-white scale-110' : 'text-base-200'"
-            ></i>
-          </template>
-        </AccountMenu>
-        <a
-          :href="$settings.cartUrl || '/app/'"
-          :aria-label="$t.i19openCart"
-          @click.prevent="isCartOpen = !isCartOpen"
-          class="group relative"
-          role="button"
-        >
-          <i class="i-shopping-bag-3-line text-base-200 hover:text-primary
-            h-7 w-7 hover:scale-110 active:scale-125"></i>
-          <span
-            v-if="delayedTotalItems"
-            class="ui-badge-pill-sm absolute -right-1.5 -top-1"
-          >
-            {{ delayedTotalItems }}
-          </span>
-        </a>
-      </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)`,
-        maxHeight: `calc(100dvh - ${positionY}px + .5rem)`,
-      }"
-    >
-      <ShopSidenav class="bg-white pt-6" />
-    </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="px-6 pt-16" is-bold />
-          </template>
-        </Suspense>
-      </Drawer>
-    </Teleport>
-  </header>
-</template>
-
-<script setup lang="ts">
-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 CartSidebar = defineAsyncComponent(() => import('~/components/CartSidebar.vue'));
-const props = defineProps<Props>();
-const header = ref<HTMLElement | null>(null);
-const { isSticky, positionY } = useShopHeader({ ...props, header });
-const isSidenavOpen = ref(false);
-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 });
-});
-const headerNavLinks = {
-  supportUrl: '',
-  businessLpUrl: '',
-  monocardSlug: '',
-  monodotSlug: '',
-  ...globalThis.$storefront.settings.metafields,
-};
-</script>

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

@@ -1,92 +0,0 @@
-<template>
-  <nav class="font-brand text-base-100 text-lg lowercase">
-    <ul class="flex items-center gap-6 xl:gap-7">
-      <li>
-        <ALink
-          :href="supportUrl"
-          class="decoration-2 underline-offset-4 hover:text-white hover:underline"
-        >
-          {{ $t.i19help }}
-        </ALink>
-      </li>
-      <li>
-        <a
-          :href="businessLpUrl"
-          class="hover:text-primary decoration-primary text-white
-          underline decoration-2 underline-offset-4"
-        >
-          <i class="i-stack-line mr-1.5 opacity-50"></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 rounded-full py-1 pl-4 pr-3 lowercase"
-            :class="isSticky
-              ? 'bg-primary/20 text-primary hover:primary'
-              : 'primary hover:bg-primary-50'"
-          >
-            <span>{{ $t.i19buy }}</span>
-            <i
-              class="i-arrow-down-s-line ml-1 transition-transform"
-              :class="open ? 'rotate-180' : 'opacity-50'"
-            ></i>
-          </MenuButton>
-          <Fade>
-            <MenuItems
-              as="ul"
-              class="absolute -left-7 mt-3 w-48 overflow-hidden rounded-b-md
-              bg-black/80 text-white shadow backdrop-blur-md"
-            >
-              <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

@@ -1,64 +0,0 @@
-<template>
-  <aside class="flex h-full flex-col">
-    <nav class="grow py-4">
-      <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="bg-base-100 flex items-center px-2 py-4">
-        <AccountLink class="flex grow items-center gap-3 p-2">
-          <i class="i-account-pin-circle-line text-base-500 m-0 text-4xl"></i>
-          <span class="leading-tight">
-            {{ `${$t.i19hello} ${customerName || $t.i19visitor}` }}
-            <small class="text-primary block font-semibold lowercase">
-              {{ $t.i19myOrders }}, {{ $t.i19myAccount }}
-            </small>
-          </span>
-        </AccountLink>
-        <button
-          v-if="isLogged"
-          @click="logout"
-          class="text-base-800 p-2 text-right"
-        >
-          <span class="text-base-600">{{ $t.i19logout }}</span>
-          <i class="i-logout-circle-r-line ml-1 text-lg"></i>
-        </button>
-      </div>
-      <ul class="bg-base-200 text-base-700 flex gap-3 p-4 text-xl">
-        <li v-for="(href, network) in socialNetworks" :key="network">
-          <SocialNetworkLink :network="network" class="active:text-primary p-1" />
-        </li>
-      </ul>
-    </footer>
-  </aside>
-</template>
-
-<script setup lang="ts">
-import type { CategoryTree } from '@@sf/composables/use-shop-header';
-import {
-  customerName,
-  initializeFirebaseAuth,
-  isLogged,
-  logout,
-} from '@@sf/state/customer-session';
-import { socialNetworks } from '@@sf/sf-lib';
-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

@@ -1,77 +0,0 @@
-<template>
-  <li class="text-base-800 text-lg">
-    <details
-      v-if="categoryTree.subcategories.length"
-      class="z-10 overflow-y-auto overflow-x-hidden bg-white
-      open:absolute open:left-0 open:top-0 open:h-full open:w-full"
-      @toggle="isOpen = !isOpen"
-    >
-      <summary
-        class="active:bg-base-100 cursor-pointer list-none px-6 py-3 transition-colors"
-        :class="isOpen ? 'bg-base-100' : null"
-      >
-        <i :class="!isOpen
-          ? 'i-arrow-right-line float-right mb-0 mt-1 text-xl text-base-500'
-          : 'i-arrow-right-line text-lg rotate-180'"></i>
-        <AImg
-          v-if="!isOpen && categoryTree.icon"
-          :picture="categoryTree.icon"
-          class="mr-3 inline h-5 w-auto"
-        />
-        <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="active:bg-base-200 block px-6 py-3 text-base underline"
-          >
-            {{ $t.i19seeAll$1Category.replace('$1', categoryTree.name) }}
-          </a>
-        </li>
-      </ul>
-    </details>
-    <a
-      v-else
-      :href="`/${categoryTree.slug}`"
-      class="active:bg-base-200 block px-6 py-3"
-    >
-      <AImg
-        v-if="!isOpen && categoryTree.icon"
-        :picture="categoryTree.icon"
-        class="mr-3 inline h-5 w-auto"
-      />
-      <h3 class="inline">{{ categoryTree.name }}</h3>
-    </a>
-  </li>
-</template>
-
-<script setup lang="ts">
-import type { CategoryTree, SubcategoryTree } from '@@sf/composables/use-shop-header';
-
-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/monocard/functions/ssr/src/components/SkuSelector.vue

@@ -1,58 +0,0 @@
-<template>
-  <div>
-    <div v-for="(options, gridId) in variationsGrids" :key="gridId">
-      <span class="text-base-700 text-sm font-medium">
-        {{ getGridTitle(gridId) }}:
-        <strong v-if="selectedOptions[gridId]" class="text-base-800">
-          {{ selectedOptions[gridId] }}
-        </strong>
-      </span>
-      <ul v-if="options.length < 7" class="mt-2 flex gap-2">
-        <li v-for="(optionText, i) in options" :key="`${gridId}-${i}`">
-          <button
-            class="ring-secondary/60 rounded border"
-            :class="[
-              selectedOptions[gridId] === optionText
-                ? 'border-secondary ring-2'
-                : null,
-              gridId === 'colors'
-                ? 'h-9 w-9 text-[0]'
-                : 'px-2 py-1',
-              activeVariationsGrids[gridId].includes(optionText)
-                ? 'text-base-800 bg-base-100 border-base-400'
-                : 'text-base-500 bg-base-200 border-base-300'
-            ]"
-            :style="gridId === 'colors' ? getColorOptionBg(optionText) : undefined"
-            @click="selectOption({ optionText, gridId, gridIndex: i })"
-          >
-            {{ optionText }}
-          </button>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  type Props as UseSkuSelector,
-  useSkuSelector,
-} from '@@sf/composables/use-sku-selector';
-
-export interface Props extends UseSkuSelector {}
-
-const props = defineProps<Props>();
-const emit = defineEmits(['update:variationId']);
-const {
-  variationsGrids,
-  activeVariationsGrids,
-  selectOption,
-  selectedOptions,
-  variationId,
-  getGridTitle,
-  getColorOptionBg,
-} = useSkuSelector(props);
-watch(variationId, (_id) => {
-  emit('update:variationId', _id);
-});
-</script>

package/ecomplus-stores/monocard/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/monocard/functions/ssr/src/layouts/Base.astro

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