cloudcommerce 0.1.7 → 0.2.0

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -38,24 +38,25 @@
     "@headlessui/vue": "^1.7.7",
     "@iconify-json/fa6-brands": "^1.1.8",
     "@iconify-json/heroicons": "^1.1.8",
-    "@iconify-json/logos": "^1.1.21",
-    "@vueuse/core": "^9.9.0",
-    "astro": "^1.8.0",
+    "@iconify-json/logos": "^1.1.22",
+    "@vite-pwa/astro": "^0.0.1",
+    "@vueuse/core": "^9.10.0",
+    "astro": "^1.9.2",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.0.3",
     "firebase": "^9.15.0",
     "image-size": "^1.0.2",
+    "lodash": "^4.17.21",
     "semver": "^7.3.8",
     "sharp": "^0.31.3",
     "tailwindcss": "^3.2.4",
-    "unocss": "^0.48.0",
+    "unocss": "^0.48.4",
     "vite": "^3.2.5",
-    "vite-plugin-pwa": "^0.14.0",
-    "vue": "^3.2.45",
-    "vue-bind-once": "^0.1.1"
+    "vite-plugin-pwa": "^0.14.1",
+    "vue": "^3.2.45"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.7",
+    "@babel/core": "^7.20.12",
     "@cloudcommerce/types": "workspace:*"
   }
 }

package/packages/storefront/src/env.d.ts

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

package/packages/storefront/src/lib/assets/tooltip.css

@@ -1,8 +1,9 @@
 [data-tooltip] {
   position: relative;
   cursor: help;
-  --c-background: var(--c-tooltip-background, rgba(44, 44, 44, 0.85));
-  --c-foreground: var(--c-tooltip-foreground, var(--c-on-dark));
+  --background-color: var(--c-tooltip-background, rgba(44, 44, 44, 0.85));
+  --color: var(--c-tooltip-foreground, var(--c-on-dark));
+  --border-color: transparent transparent var(--background-color) transparent;
 }
 [data-tooltip]::before {
   content: attr(data-tooltip);
@@ -16,8 +17,8 @@
   margin-top: 5px;
   font-size: clamp(0.75rem, 90%, 1rem);
   width: max-content;
-  background-color: var(--c-background);
-  color: var(--c-foreground);
+  background-color: var(--background-color);
+  color: var(--color);
   text-align: center;
   @apply rounded-sm py-1 px-2 leading-snug;
 }
@@ -34,7 +35,7 @@
   margin-top: -4px;
   border-width: 5px;
   border-style: solid;
-  border-color: transparent transparent var(--c-background) transparent;
+  border-color: var(--border-color);
 }
 [data-tooltip]:hover::before,
 [data-tooltip]:hover::after {

package/packages/storefront/src/lib/components/Carousel.vue

@@ -0,0 +1,259 @@
+<script setup lang="ts">
+/* REFERENCE: https://github.com/bartdominiak/vue-snap */
+import {
+  onMounted,
+  onBeforeUnmount,
+  ref,
+  watch,
+  toRef,
+  nextTick,
+  provide,
+} from 'vue';
+import debounce from 'lodash/debounce';
+import { useElementHover } from '@vueuse/core';
+import { carouselKey } from './_injection-keys';
+import CarouselControl from './CarouselControl.vue';
+
+export interface Props {
+  as?: string;
+  modelValue?: number;
+  autoplay?: number; // milliseconds
+}
+
+const approximatelyEqual = (v1, v2, epsilon) => {
+  return Math.abs(v1 - v2) <= epsilon;
+};
+const SCROLL_DEBOUNCE = 100;
+const RESIZE_DEBOUNCE = 410;
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'ul',
+  modelValue: 1,
+});
+const emit = defineEmits([
+  'update:modelValue',
+  'bound-left',
+  'bound-right',
+]);
+
+const currentPage = ref(props.modelValue - 1);
+watch(toRef(props, 'modelValue'), (modelValue) => {
+  currentPage.value = modelValue - 1;
+});
+watch(currentPage, (current, previous) => {
+  if (current !== previous) {
+    emit('update:modelValue', current + 1);
+  }
+});
+const wrapper = ref<HTMLElement>(null);
+const isBoundLeft = ref(true);
+const isBoundRight = ref(false);
+const slidesWidth = ref([]);
+const wrapperScrollWidth = ref(0);
+const wrapperVisibleWidth = ref(0);
+const currentPos = ref(0);
+const maxPages = ref(0);
+const onResizeFn = ref(null);
+const onScrollFn = ref(null);
+const calcBounds = () => {
+  // Find the closest point, with 5px approximate.
+  const _isBoundLeft = approximatelyEqual(currentPos.value, 0, 5);
+  const _isBoundRight = approximatelyEqual(
+    wrapperScrollWidth.value - wrapperVisibleWidth.value,
+    currentPos.value,
+    5,
+  );
+  if (_isBoundLeft) {
+    emit('bound-left', true);
+  }
+  isBoundLeft.value = _isBoundLeft;
+  if (_isBoundRight) {
+    emit('bound-right', true);
+  }
+  isBoundRight.value = _isBoundRight;
+};
+const calcWrapperWidth = () => {
+  wrapperScrollWidth.value = wrapper.value.scrollWidth;
+  wrapperVisibleWidth.value = wrapper.value.offsetWidth;
+};
+const calcSlidesWidth = () => {
+  const childNodes = [...wrapper.value.children];
+  slidesWidth.value = childNodes.map((node: HTMLElement) => ({
+    offsetLeft: node.offsetLeft,
+    width: node.offsetWidth,
+  }));
+};
+const calcNextWidth = (direction) => {
+  const nextSlideIndex = direction > 0 ? currentPage.value : currentPage.value + direction;
+  const width = slidesWidth.value[nextSlideIndex].width || 0;
+  if (!width) {
+    return 0;
+  }
+  return width * direction;
+};
+const calcCurrentPage = () => {
+  const getCurrentPage = slidesWidth.value.findIndex((slide) => {
+    // Find the closest point, with 5px approximate.
+    return approximatelyEqual(slide.offsetLeft, currentPos.value, 5);
+  });
+  if (getCurrentPage !== -1 && getCurrentPage !== -2) {
+    currentPage.value = getCurrentPage || 0;
+  }
+};
+const calcCurrentPosition = () => {
+  currentPos.value = wrapper.value.scrollLeft || 0;
+};
+const calcMaxPages = () => {
+  const maxPos = wrapperScrollWidth.value - wrapperVisibleWidth.value;
+  maxPages.value = slidesWidth.value
+    .findIndex(({ offsetLeft }) => (offsetLeft >= maxPos));
+};
+const calcOnInit = () => {
+  if (!wrapper.value) {
+    return;
+  }
+  calcWrapperWidth();
+  calcSlidesWidth();
+  calcCurrentPosition();
+  calcCurrentPage();
+  calcBounds();
+  calcMaxPages();
+};
+const calcOnScroll = () => {
+  if (!wrapper.value) {
+    return;
+  }
+  calcCurrentPosition();
+  calcCurrentPage();
+  calcBounds();
+};
+let autoplayTimer = null;
+const restartAutoplay = () => {
+  if (props.autoplay) {
+    clearTimeout(autoplayTimer);
+    autoplayTimer = setTimeout(() => {
+      // eslint-disable-next-line no-use-before-define
+      changeSlide(1);
+    }, props.autoplay);
+  }
+};
+const changeSlide = (direction: number) => {
+  if (direction < 0) {
+    if (isBoundLeft.value) {
+      calcMaxPages();
+      currentPage.value = maxPages.value - 1;
+      changeSlide(1);
+      return;
+    }
+  } else if (isBoundRight.value) {
+    currentPage.value = 1;
+    changeSlide(-1);
+    return;
+  }
+  const nextSlideWidth = calcNextWidth(direction);
+  if (nextSlideWidth) {
+    wrapper.value.scrollBy({ left: nextSlideWidth, behavior: 'smooth' });
+    restartAutoplay();
+  }
+};
+const carousel = ref(null);
+const isHovered = useElementHover(carousel);
+watch(isHovered, (_isHovered) => {
+  if (_isHovered) {
+    clearTimeout(autoplayTimer);
+  } else {
+    restartAutoplay();
+  }
+});
+onMounted(() => {
+  calcOnInit();
+  if (!import.meta.env.SSR) {
+    // Assign to new variable and keep reference for removeEventListener (Avoid Memory Leaks)
+    onScrollFn.value = debounce(calcOnScroll, SCROLL_DEBOUNCE);
+    onResizeFn.value = debounce(calcOnInit, RESIZE_DEBOUNCE);
+    wrapper.value.addEventListener('scroll', onScrollFn.value);
+    window.addEventListener('resize', onResizeFn.value);
+    nextTick(() => {
+      [...wrapper.value.children].forEach((slide: HTMLElement) => {
+        slide.setAttribute('tabindex', '0');
+      });
+    });
+    restartAutoplay();
+  }
+});
+onBeforeUnmount(() => {
+  if (!import.meta.env.SSR) {
+    wrapper.value.removeEventListener('scroll', onScrollFn.value);
+    window.removeEventListener('resize', onResizeFn.value);
+    clearTimeout(autoplayTimer);
+  }
+});
+provide(carouselKey, {
+  autoplay: toRef(props, 'autoplay'),
+  changeSlide,
+  isBoundLeft,
+  isBoundRight,
+});
+</script>
+
+<template>
+  <div ref="carousel" data-carousel>
+    <component :is="as" ref="wrapper" data-carousel-wrapper>
+      <slot />
+    </component>
+    <!-- @slot Slot for Arrows -->
+    <slot
+      name="controls"
+      v-bind="{ changeSlide, isBoundLeft, isBoundRight }"
+    >
+      <CarouselControl :direction="-1">
+        <slot name="previous" />
+      </CarouselControl>
+      <CarouselControl>
+        <slot name="next" />
+      </CarouselControl>
+    </slot>
+  </div>
+</template>
+
+<style>
+[data-carousel] {
+  position: relative;
+}
+[data-carousel-wrapper] {
+  display: flex;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: none;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+[data-carousel-wrapper]::-webkit-scrollbar {
+  display: none;
+}
+[data-carousel-wrapper] > * {
+  flex: 0 0 100%;
+  height: 100%;
+  scroll-snap-align: start;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+}
+[data-carousel-control] {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+}
+[data-carousel-control=previous] {
+  left: 0;
+}
+[data-carousel-control=next] {
+  right: 0;
+}
+</style>

package/packages/storefront/src/lib/components/CarouselControl.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import { carouselKey } from './_injection-keys';
+
+export interface Props {
+  direction?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  direction: 1,
+});
+const { changeSlide } = inject(carouselKey);
+</script>
+
+<template>
+  <button
+    type="button"
+    :aria-label="direction > 0 ? $t.i19next : $t.i19previous"
+    @click="changeSlide(direction)"
+    :data-carousel-control="direction > 0 ? 'next' : 'previous'"
+  >
+    <slot>
+      <i
+        class="mb-0 z-10"
+        :class="direction > 0 ? 'i-chevron-right' : 'i-chevron-left'"
+      ></i>
+    </slot>
+  </button>
+</template>

package/packages/storefront/src/lib/components/LoginDrawer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, defineAsyncComponent } from 'vue';
 import { i19myAccount, i19myOrders } from '@@i18n';
-import ADrawer from '@@components/ADrawer.vue';
+import ADrawer from '@@sf/components/ADrawer.vue';
 
 export interface Props {
   accountUrl?: string;

package/packages/storefront/src/lib/components/PitchBar.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import Carousel from '@@sf/components/Carousel.vue';
+import CarouselControl from '@@sf/components/CarouselControl.vue';
+
+export interface Props {
+  slides: Array<{
+    href?: string;
+    target?: string;
+    html: string;
+  }>;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div data-pitch-bar class="bg-base-100">
+    <div class="container md:w-2/3 mx-auto px-3 py-1">
+      <Carousel :autoplay="7000">
+        <li v-for="({ href, target, html }, i) in slides" :key="i">
+          <component
+            :is="href ? 'ALink' : 'span'"
+            :href="href"
+            :target="target"
+            :class="href ? 'hover:underline' : null"
+          >
+            <slot name="slide">
+              <span v-html="html" class="prose text-sm text-base-800"></span>
+            </slot>
+          </component>
+        </li>
+        <template #controls>
+          <div class="text-xl leading-none text-base-400">
+            <CarouselControl
+              :direction="-1"
+              class="pr-2 bg-base-100 hover:text-base-700"
+            />
+            <CarouselControl class="pl-2 bg-base-100 hover:text-base-700" />
+          </div>
+        </template>
+      </Carousel>
+    </div>
+  </div>
+</template>

package/packages/storefront/src/lib/components/Prices.vue

@@ -37,9 +37,9 @@ const componentVariant = useComponentVariant(props);
 </script>
 
 <template>
-  <div :data-sf-prices="componentVariant" class="text-base-600">
+  <div :data-prices="componentVariant" class="text-base-600">
     <slot v-if="comparePrice" name="compare" v-bind="{ salePrice, comparePrice }">
-      <span :data-sf-prices-compare="comparePrice" class="text-base-500 mr-1">
+      <span data-prices-compare class="text-base-500 mr-1">
         <slot name="compare-pre">
           <small v-if="isLiteral">
             {{ `${$t.i19from} ` }}
@@ -56,7 +56,7 @@ const componentVariant = useComponentVariant(props);
       </span>
     </slot>
     <slot name="sale" v-bind="{ salePrice }">
-      <strong :data-sf-prices-sale="salePrice" class="inline-block text-base-800">
+      <strong data-prices-sale class="inline-block text-base-800">
         <slot name="sale-pre">
           <small v-if="hasVariedPrices">
             {{ `${$t.i19asOf} ` }}
@@ -74,11 +74,7 @@ const componentVariant = useComponentVariant(props);
       v-bind="{ salePrice, cashbackValue, cashbackPercentage }"
     >
       <Fade slide="down">
-        <div
-          v-if="hasCashback"
-          :data-sf-prices-cashback="cashbackValue"
-          class="relative z-10"
-        >
+        <div v-if="hasCashback" data-prices-cashback class="relative z-10">
           <span :data-tooltip="$t.i19get$1back
             .replace('$1', $percentage(cashbackPercentage))">
             <slot name="cashback-pre">
@@ -105,7 +101,7 @@ const componentVariant = useComponentVariant(props);
       v-bind="{ salePrice, installmentValue, installmentsNumber, monthlyInterest }"
     >
       <Fade slide="down">
-        <div v-if="hasPriceOptions" :data-sf-prices-installment="installmentValue">
+        <div v-if="hasPriceOptions" data-prices-installment>
           <slot name="installment-pre">
             <small v-if="isLiteral">
               {{ `${$t.i19upTo} ` }}
@@ -135,7 +131,7 @@ const componentVariant = useComponentVariant(props);
       v-bind="{ salePrice, priceWithDiscount, discountLabel }"
     >
       <Fade slide="down">
-        <div v-if="hasPriceOptions" :data-sf-prices-discount="priceWithDiscount">
+        <div v-if="hasPriceOptions" data-prices-discount>
           <slot name="discount-pre">
             <small v-if="!discountLabel">
               {{ `${$t.i19asOf} ` }}
@@ -159,22 +155,22 @@ const componentVariant = useComponentVariant(props);
 </template>
 
 <style>
-[data-sf-prices-compare] {
+[data-prices-compare] {
   font-size: 87%;
 }
-[data-sf-prices-cashback],
-[data-sf-prices-installment],
-[data-sf-prices-discount] {
+[data-prices-cashback],
+[data-prices-installment],
+[data-prices-discount] {
   font-size: 90%;
 }
-[data-sf-prices] small {
+[data-prices] small {
   @apply lowercase;
   font-size: 92%;
 }
-[data-sf-prices~=Big] {
+[data-prices~=Big] {
   @apply text-lg;
 }
-[data-sf-prices~=Big] [data-sf-prices-sale] {
+[data-prices~=Big] [data-prices-sale] {
   @apply text-5xl block;
 }
 </style>

package/packages/storefront/src/lib/components/ProductCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import Prices from '@@components/Prices.vue';
+import Prices from '@@sf/components/Prices.vue';
 
 export interface Props {
   as?: string;

package/packages/storefront/src/lib/components/_injection-keys.ts

@@ -0,0 +1,9 @@
+/* eslint-disable import/prefer-default-export */
+import type { Ref, InjectionKey } from 'vue';
+
+export const carouselKey = Symbol('carousel') as InjectionKey<{
+  autoplay: Ref<number>,
+  changeSlide: (direction: number) => void,
+  isBoundLeft: Ref<boolean>,
+  isBoundRight: Ref<boolean>,
+}>;

package/packages/storefront/src/lib/components/globals/ALink.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+export interface Props {
+  href: string;
+  target?: string;
+}
+
+const props = defineProps<Props>();
+const linkTarget = computed(() => {
+  if (props.target) return props.target;
+  if (props.href.startsWith('http') && globalThis.storefront.settings) {
+    const domain = globalThis.storefront.settings.domain || window.location.host;
+    if (props.href.startsWith(`https://${domain}`)) return null;
+  }
+  return null;
+});
+</script>
+
+<template>
+  <a
+    :href="href"
+    :target="linkTarget"
+    :rel="linkTarget === '_blank' ? 'noopener' : null"
+  ><slot /></a>
+</template>

package/packages/storefront/src/lib/layouts/BaseBody.astro

@@ -13,10 +13,6 @@ export interface Props {
 
 <body>
   <slot />
-  <script>
-    import { registerSW } from 'virtual:pwa-register';
-    import '../scripts/session-utm';
-    registerSW();
-  </script>
+  <script src="../scripts/session-utm"></script>
   <slot name="before-body-end" />
 </body>

package/packages/storefront/src/lib/layouts/BaseHead.astro

@@ -1,7 +1,8 @@
 ---
 import type CmsSocial from '@@sf/types/cms-social';
-import { img as getImg } from '@ecomplus/utils';
 import type { PageContext } from '@@sf/ssr-context';
+import { pwaInfo } from 'virtual:pwa-info';
+import { img as getImg } from '@ecomplus/utils';
 import { getImage as transformImage } from '@@sf/ssr/image';
 
 export interface Props {
@@ -53,7 +54,6 @@ if (!ogImage) {
 <meta name="viewport" content="width=device-width">
 <meta name="theme-color" content={primaryColor}>
 <link rel="icon" href={favicon} />
-{import.meta.env.PROD && <link rel="manifest" href="/manifest.webmanifest" />}
 <title>{title}</title>
 <meta name="description" content={description}>
 <meta name="author" content={settings.name}>
@@ -73,3 +73,8 @@ if (!ogImage) {
 <meta name="twitter:card" content="summary">
 {cmsSocial.twitter_username && <meta name="twitter:site" content={cmsSocial.twitter_username} />}
 <meta name="ecom-store-id" content={String(storeId)}>
+{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
+<script>
+  import { registerSW } from 'virtual:pwa-register';
+  registerSW({ immediate: true });
+</script>

package/packages/storefront/src/lib/layouts/PagesHeader.astro

@@ -0,0 +1,38 @@
+---
+import type { Categories } from '@cloudcommerce/api/types';
+import type CmsHeader from '@@sf/types/cms-header';
+import type CmsContacts from '@@sf/types/cms-contacts';
+import type { PageContext } from '@@sf/ssr-context';
+import { i19buyOnWhatsApp } from '@@i18n';
+import { getImage } from '@@sf/ssr/image';
+import PitchBar, { Props as PitchBarProps } from '@@sf/components/PitchBar.vue';
+
+export interface Props {
+  pageContext: PageContext;
+}
+
+const {
+  pageContext: {
+    apiState,
+    settings,
+    cms,
+  },
+} = Astro.props as Props;
+const header = cms('header') as CmsHeader &
+  { marketing_stripe?: { text: string, link: string } };
+const pitchBar: PitchBarProps = { slides: [] };
+if (header.pitch_bar) {
+  pitchBar.slides = header.pitch_bar;
+} else if (header.marketing_stripe) {
+  pitchBar.slides = [{
+    href: header.marketing_stripe.link,
+    html: header.marketing_stripe.text,
+  }];
+}
+---
+
+<Fragment>
+  <slot name="pitch-bar">
+    {pitchBar.slides.length && <PitchBar {...pitchBar} client:idle />}
+  </slot>
+</Fragment>

package/packages/storefront/src/lib/pages/_vue.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue';
 import { i18n, formatMoney } from '@ecomplus/utils';
-// @ts-ignore
-import Fade from '@@components/globals/Fade.vue';
+import Fade from '@@sf/components/globals/Fade.vue';
+import ALink from '@@sf/components/globals/ALink.vue';
 
 const formatPercentage = (value: number, digits = 1) => {
   return Number.isInteger(value) ? `${value}%` : `${value.toFixed(digits)}%`;
@@ -21,6 +21,7 @@ export default (app: App) => {
     },
   });
   app.component('Fade', Fade);
+  app.component('ALink', ALink);
 };
 
 export type FormatPercentage = typeof formatPercentage;

package/packages/storefront/src/lib/ssr-context.ts

@@ -26,10 +26,15 @@ const getConfig: () => StorefrontConfig = _getConfig;
 declare global {
   // eslint-disable-next-line
   var api_prefetch_endpoints: ApiEndpoint[];
+  // eslint-disable-next-line
+  var storefront: { settings: Partial<CmsSettings> };
 }
 if (!globalThis.api_prefetch_endpoints) {
   globalThis.api_prefetch_endpoints = ['categories'];
 }
+if (!globalThis.storefront) {
+  globalThis.storefront = { settings: {} };
+}
 
 type ApiPrefetchEndpoints = Array<ApiEndpoint>;
 
@@ -53,6 +58,7 @@ const loadPageContext = async (Astro: AstroGlobal, {
   const urlPath = Astro.url.pathname;
   const { slug } = Astro.params;
   const config = getConfig();
+  globalThis.storefront.settings = config.settings;
   let cmsContent: Record<string, any> | undefined;
   let apiResource: string | undefined;
   let apiDoc: Record<string, any> | undefined;