cloudcommerce 0.2.3 → 0.4.0

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -35,22 +35,21 @@
     "@cloudcommerce/i18n": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.3",
     "@fastify/deepmerge": "^1.3.0",
-    "@headlessui/vue": "^1.7.7",
+    "@headlessui/vue": "^1.7.8",
     "@iconify-json/fa6-brands": "^1.1.8",
     "@iconify-json/heroicons": "^1.1.8",
     "@iconify-json/logos": "^1.1.22",
     "@vite-pwa/astro": "^0.0.1",
-    "@vueuse/core": "^9.11.1",
+    "@vueuse/core": "^9.12.0",
     "astro": "^2.0.2",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.0.3",
     "firebase": "^9.16.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.4",
+    "unocss": "^0.49.1",
     "vite": "^4.0.4",
     "vite-plugin-pwa": "^0.14.1",
     "vue": "^3.2.45"

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

@@ -1,5 +1,4 @@
 :root {
-  --content-max-width: 80rem;
   --font-size: 14.5px;
   --font-sans: var(--custom-font-sans, ui-sans-serif),
     system-ui, -apple-system, BlinkMacSystemFont,
@@ -8,6 +7,7 @@
   --font-mono: var(--custom-font-mono, ui-monospace),
     SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family: var(--font-sans);
+  --transition-fast: 75ms linear;
   --transition: .15s ease-in-out;
   --transition-slow: .25s ease-in-out;
   --transition-slower: .45s ease-in-out;
@@ -28,6 +28,7 @@
 
 @media (prefers-reduced-motion: reduce) {
   :root {
+    --transition-fast: 0s;
     --transition: 0s;
     --transition-slow: 0s;
     --transition-slower: .15s linear;
@@ -63,16 +64,6 @@ html {
   }
 }
 
-body > header,
-body > main,
-body > footer {
-  margin-left: auto;
-  margin-right: auto;
-}
-body > main {
-  max-width: var(--content-max-width);
-}
-
 :focus-visible {
   outline-color: var(--c-outline, rgba(var(--rgb-secondary), .1));
 }
@@ -95,3 +86,17 @@ body {
   background: var(--c-background);
   color: var(--c-on-background);
 }
+
+/*
+Custom elements for responsive tricks in /content JSON.
+Avoids the need of escape \" for class names with common elements.
+*/
+
+d-md {
+  display: none;
+}
+@screen md {
+  d-md {
+    display: inline;
+  }
+}

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

@@ -4,13 +4,13 @@ import {
   onMounted,
   onBeforeUnmount,
   ref,
+  computed,
   watch,
   toRef,
   nextTick,
   provide,
 } from 'vue';
-import debounce from 'lodash/debounce';
-import { useElementHover } from '@vueuse/core';
+import { useDebounceFn, useElementHover, useScroll } from '@vueuse/core';
 import { carouselKey } from './_injection-keys';
 import CarouselControl from './CarouselControl.vue';
 
@@ -20,58 +20,30 @@ export interface Props {
   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);
+const currentIndex = ref(props.modelValue - 1);
 watch(toRef(props, 'modelValue'), (modelValue) => {
-  currentPage.value = modelValue - 1;
+  currentIndex.value = modelValue - 1;
 });
-watch(currentPage, (current, previous) => {
+watch(currentIndex, (current, previous) => {
   if (current !== previous) {
     emit('update:modelValue', current + 1);
   }
 });
 const wrapper = ref<HTMLElement>(null);
-const isBoundLeft = ref(true);
-const isBoundRight = ref(false);
+const { x: currentPos, isScrolling, arrivedState } = useScroll(wrapper);
+const isBoundLeft = computed(() => arrivedState.left);
+const isBoundRight = computed(() => arrivedState.right);
 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 indexCount = ref(0);
 const calcWrapperWidth = () => {
   wrapperScrollWidth.value = wrapper.value.scrollWidth;
   wrapperVisibleWidth.value = wrapper.value.offsetWidth;
@@ -84,48 +56,27 @@ const calcSlidesWidth = () => {
   }));
 };
 const calcNextWidth = (direction) => {
-  const nextSlideIndex = direction > 0 ? currentPage.value : currentPage.value + direction;
-  const width = slidesWidth.value[nextSlideIndex].width || 0;
+  const nextSlideIndex = direction > 0
+    ? currentIndex.value : currentIndex.value + direction;
+  const width = slidesWidth.value[nextSlideIndex]?.width || 0;
   if (!width) {
     return 0;
   }
   return width * direction;
 };
-const calcCurrentPage = () => {
-  const getCurrentPage = slidesWidth.value.findIndex((slide) => {
+const calcCurrentIndex = () => {
+  const getCurrentIndex = slidesWidth.value.findIndex((slide: HTMLElement) => {
     // Find the closest point, with 5px approximate.
-    return approximatelyEqual(slide.offsetLeft, currentPos.value, 5);
+    return Math.abs(slide.offsetLeft - currentPos.value) <= 5;
   });
-  if (getCurrentPage !== -1 && getCurrentPage !== -2) {
-    currentPage.value = getCurrentPage || 0;
+  if (getCurrentIndex > -1) {
+    currentIndex.value = getCurrentIndex || 0;
   }
 };
-const calcCurrentPosition = () => {
-  currentPos.value = wrapper.value.scrollLeft || 0;
-};
-const calcMaxPages = () => {
+const calcIndexCount = () => {
   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();
+  indexCount.value = slidesWidth.value
+    .findIndex(({ offsetLeft }) => (offsetLeft >= maxPos - 5));
 };
 let autoplayTimer = null;
 const restartAutoplay = () => {
@@ -140,13 +91,13 @@ const restartAutoplay = () => {
 const changeSlide = (direction: number) => {
   if (direction < 0) {
     if (isBoundLeft.value) {
-      calcMaxPages();
-      currentPage.value = maxPages.value - 1;
+      calcIndexCount();
+      currentIndex.value = indexCount.value - 1;
       changeSlide(1);
       return;
     }
   } else if (isBoundRight.value) {
-    currentPage.value = 1;
+    currentIndex.value = 1;
     changeSlide(-1);
     return;
   }
@@ -156,37 +107,50 @@ const changeSlide = (direction: number) => {
     restartAutoplay();
   }
 };
+watch(isScrolling, (_isScrolling: boolean) => {
+  if (_isScrolling) {
+    clearTimeout(autoplayTimer);
+  } else {
+    calcCurrentIndex();
+    restartAutoplay();
+  }
+});
 const carousel = ref(null);
 const isHovered = useElementHover(carousel);
-watch(isHovered, (_isHovered) => {
+watch(isHovered, (_isHovered: boolean) => {
   if (_isHovered) {
     clearTimeout(autoplayTimer);
   } else {
     restartAutoplay();
   }
 });
+const calcOnInit = () => {
+  if (!wrapper.value) {
+    return;
+  }
+  calcWrapperWidth();
+  calcSlidesWidth();
+  calcCurrentIndex();
+  calcIndexCount();
+};
+const onResize = useDebounceFn(calcOnInit, 400);
 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();
+    window.addEventListener('resize', onResize);
   }
 });
 onBeforeUnmount(() => {
   if (!import.meta.env.SSR) {
-    wrapper.value.removeEventListener('scroll', onScrollFn.value);
-    window.removeEventListener('resize', onResizeFn.value);
-    clearTimeout(autoplayTimer);
+    window.removeEventListener('resize', onResize);
   }
+  clearTimeout(autoplayTimer);
 });
 provide(carouselKey, {
   autoplay: toRef(props, 'autoplay'),
@@ -204,7 +168,13 @@ provide(carouselKey, {
     <!-- @slot Slot for Arrows -->
     <slot
       name="controls"
-      v-bind="{ changeSlide, isBoundLeft, isBoundRight }"
+      v-bind="{
+        changeSlide,
+        isBoundLeft,
+        isBoundRight,
+        currentPage: currentIndex + 1,
+        pageCount: indexCount + 1,
+      }"
     >
       <CarouselControl :direction="-1">
         <slot name="previous" />

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

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import {
+  toRef,
+  ref,
+  computed,
+  watch,
+} from 'vue';
+
+export interface Props {
+  modelValue?: boolean;
+  placement?: 'start' | 'end' | 'top' | 'bottom';
+  position?: 'fixed' | 'absolute';
+  hasCloseButton?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  placement: 'start',
+  position: 'fixed',
+  hasCloseButton: true,
+});
+const emit = defineEmits([
+  'update:modelValue',
+]);
+const close = () => emit('update:modelValue', false);
+const drawer = ref(null);
+const outsideClickListener = (ev: MouseEvent) => {
+  if (!drawer.value?.contains(ev.target)) {
+    close();
+  }
+};
+const escClickListener = (ev: KeyboardEvent) => {
+  if (ev.key === 'Escape') {
+    close();
+  }
+};
+watch(toRef(props, 'modelValue'), async (isOpen) => {
+  if (isOpen) {
+    document.body.style.overflow = 'hidden';
+    setTimeout(() => {
+      document.addEventListener('click', outsideClickListener, { passive: true });
+      document.addEventListener('keydown', escClickListener, { passive: true });
+    }, 500);
+  } else {
+    document.body.style.overflow = null;
+    document.removeEventListener('click', outsideClickListener);
+    document.removeEventListener('keydown', escClickListener);
+  }
+});
+const slideTo = computed(() => {
+  switch (props.placement) {
+    case 'start': return 'left';
+    case 'end': return 'right';
+    case 'top': return 'up';
+    default: return 'down';
+  }
+});
+const isFixed = computed(() => {
+  return props.position === 'fixed';
+});
+const isPlacementX = computed(() => {
+  return props.placement === 'start' || props.placement === 'end';
+});
+</script>
+
+<template>
+  <Fade :slide="slideTo" speed="slow" is-floating>
+    <dialog
+      v-if="modelValue"
+      ref="drawer"
+      class="w-screen max-w-sm shadow p-0 m-0 z-50"
+      :class="[
+        position,
+        isFixed ? `top-0 left-0 ${(isPlacementX ? 'h-screen' : '')}` : null,
+      ]"
+      :open="modelValue"
+      :data-drawer="placement"
+    >
+      <div class="relative">
+        <button
+          v-if="hasCloseButton"
+          type="button"
+          :aria-label="$t.i19close"
+          @click.prevent="close"
+          class="absolute top-2"
+          :class="placement === 'end' ? 'left-2' : 'right-2'"
+          data-drawer-close
+        >
+          <slot name="close">
+            <i class="i-close text-base-400 text-3xl"></i>
+          </slot>
+        </button>
+        <slot />
+      </div>
+    </dialog>
+  </Fade>
+</template>

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

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

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

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import type { CategoriesList } from '@cloudcommerce/api/types';
+import { ref, computed } from 'vue';
+import { i19myAccount, i19openCart, i19searchProducts } from '@@i18n';
+import useStickyHeader from '@@sf/composables/use-sticky-header';
+import Drawer from '@@sf/components/Drawer.vue';
+import ShopSidenav from '@@sf/components/ShopSidenav.vue';
+
+export interface Props {
+  categories: CategoriesList;
+}
+
+defineProps<Props>();
+const buttons = ref({
+  search: {
+    icon: 'i-search',
+    onClick: () => {},
+    label: i19searchProducts,
+  },
+  account: {
+    icon: 'i-account',
+    onClick: () => {},
+    label: i19myAccount,
+  },
+  cart: {
+    icon: 'i-shopping-cart',
+    onClick: () => {},
+    label: i19openCart,
+  },
+});
+const isSidenavOpen = ref(false);
+const header = ref<HTMLElement | null>(null);
+const {
+  isSticky,
+  staticHeight,
+  staticY,
+} = useStickyHeader({ header });
+const sidenavHeight = computed(() => {
+  return isSticky.value ? staticHeight.value : staticY.value;
+});
+</script>
+
+<template>
+  <header
+    ref="header"
+    class="top-0 z-50"
+    :class="isSticky
+      ? 'bg-white/80 backdrop-blur-md shadow py-2 md:py-3'
+      : 'bg-white py-3 sm:py-4 md:py-5'"
+  >
+    <div class="container lg:max-w-7xl mx-auto px-1 lg:pl-3
+      grid grid-flow-col grid-cols-3 justify-between items-center
+      md:grid-cols-none md:auto-cols-max">
+      <slot name="sidenav-toggle">
+        <div class="md:hidden" data-sidenav-toggle>
+          <button
+            class="px-2 my-1"
+            :aria-label="$t.i19toggleMenu"
+            @click="isSidenavOpen = !isSidenavOpen"
+          >
+            <slot name="sidenav-toggle-content">
+              <i
+                class="text-base-500 text-3xl"
+                :class="isSidenavOpen ? 'i-close' : 'i-menu'"
+              ></i>
+            </slot>
+          </button>
+        </div>
+      </slot>
+      <slot name="logo" />
+      <slot name="nav" />
+      <slot name="buttons">
+        <div
+          class="px-2 flex justify-end items-center gap-3 lg:gap-4 text-base-800"
+          data-header-buttons
+        >
+          <slot
+            name="button"
+            v-for="({ icon, onClick, label }, name) in buttons"
+            :key="name"
+            v-bind="{ name, icon, onClick }"
+          >
+            <button
+              :class="name === 'account' ? 'hidden sm:block' : null"
+              :aria-label="label"
+              @click="onClick"
+              :data-header-button="name"
+            >
+              <slot name="button-content" v-bind="{ name, icon }">
+                <i
+                  :class="icon"
+                  class="hover:text-primary w-7 h-7 hover:scale-110 active:scale-125"
+                ></i>
+              </slot>
+            </button>
+          </slot>
+        </div>
+      </slot>
+    </div>
+    <Drawer
+      v-model="isSidenavOpen"
+      :has-close-button="false"
+      position="absolute"
+      class="mt-3"
+      :style="{ height: `calc(100vh - ${sidenavHeight}px)` }"
+    >
+      <ShopSidenav class="pt-6" :categories="categories" />
+    </Drawer>
+  </header>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { CategoriesList } from '@cloudcommerce/api/types';
+
+export interface Props {
+  categories: CategoriesList;
+}
+
+const props = defineProps<Props>();
+const mainCategories = props.categories.filter(({ slug, parent }) => {
+  return slug && !parent;
+});
+</script>
+
+<template>
+  <aside data-sidenav>
+    <nav class="py-5" data-sidenav-nav>
+      <ul>
+        <li v-for="mainCategory in mainCategories" :key="mainCategory._id">
+          <a :href="`/${mainCategory.slug}`">
+            {{ mainCategory.name }}
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </aside>
+</template>

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

@@ -4,12 +4,14 @@ import { computed } from 'vue';
 export interface Props {
   speed?: 'default' | 'slow' | 'slower',
   slide?: 'down' | 'left' | 'right' | 'up',
+  isFloating?: boolean,
   isLeaveTo?: boolean,
   isEnterFrom?: boolean,
 }
 
 const props = withDefaults(defineProps<Props>(), {
   speed: 'default',
+  isFloating: false,
   isLeaveTo: true,
   isEnterFrom: true,
 });
@@ -50,32 +52,28 @@ const isSlideY = computed(() => {
   return props.slide === 'down' || props.slide === 'up';
 });
 const height = computed(() => {
+  if (props.isFloating) return null;
   return isSlideY.value ? 0 : 'auto';
 });
 const width = computed(() => {
+  if (props.isFloating) return null;
   return props.slide && !isSlideY.value ? 0 : 'auto';
 });
 const enterFromHeight = computed(() => {
   return props.isEnterFrom ? height.value : 'auto';
 });
-const leaveToHeight = computed(() => {
-  return props.isLeaveTo ? height.value : 'auto';
-});
 const enterFromWidth = computed(() => {
   return props.isEnterFrom ? width.value : 'auto';
 });
-const leaveToWidth = computed(() => {
-  return props.isLeaveTo ? width.value : 'auto';
-});
 const willChange = computed(() => {
   let properties = 'opacity';
   if (transform.value !== 'none') properties += ', transform';
-  if (height.value !== 'auto') properties += ', height';
-  if (width.value !== 'auto') properties += ', width';
+  if (height.value === 0) properties += ', height';
+  if (width.value === 0) properties += ', width';
   return properties;
 });
 const onEnter = (el: HTMLElement) => {
-  if (props.slide) {
+  if (props.slide && !props.isFloating && props.isEnterFrom) {
     if (isSlideY.value) {
       el.style.width = getComputedStyle(el).width;
       el.style.height = 'auto';
@@ -104,12 +102,12 @@ const onEnter = (el: HTMLElement) => {
   }
 };
 const onAfterEnter = (el: HTMLElement) => {
-  if (props.slide) {
-    el.style[isSlideY.value ? 'height' : 'width'] = 'auto';
+  if (props.slide && !props.isFloating && props.isEnterFrom) {
+    el.style[isSlideY.value ? 'height' : 'width'] = null;
   }
 };
 const onLeave = (el: HTMLElement) => {
-  if (props.slide) {
+  if (props.slide && !props.isFloating && props.isLeaveTo) {
     if (isSlideY.value) {
       el.style.height = getComputedStyle(el).height;
     } else {
@@ -165,7 +163,5 @@ const onLeave = (el: HTMLElement) => {
 .sf-fade-leave-to {
   opacity: v-bind(leaveToOpacity);
   transform: v-bind(leaveToTransform);
-  height: v-bind(leaveToHeight);
-  width: v-bind(leaveToWidth);
 }
 </style>

package/packages/storefront/src/lib/composables/use-pitch-bar.ts

@@ -0,0 +1,27 @@
+import { computed } from 'vue';
+import { parseShippingPhrase } from '@@sf/state/modules-info';
+
+export interface Props {
+  slides: Array<{
+    href?: string;
+    target?: string;
+    html: string;
+  }>;
+}
+
+const usePitchBar = (props: Props) => {
+  const parsedContents = computed(() => {
+    return props.slides.map(({ html }) => {
+      return parseShippingPhrase(html).value;
+    });
+  });
+  const countValidSlides = computed(() => {
+    return parsedContents.value.filter((html) => html).length;
+  });
+  return {
+    parsedContents,
+    countValidSlides,
+  };
+};
+
+export default usePitchBar;

package/packages/storefront/src/lib/composables/use-prices.ts

@@ -7,7 +7,7 @@ export interface Props {
   product?: Partial<Products> & { price: number, final_price?: number };
   price?: number;
   basePrice?: number;
-  isAmountTotal?: boolean,
+  isAmountTotal?: boolean;
   installmentsOption?: ListPaymentsResponse['installments_option'];
   discountOption?: ListPaymentsResponse['discount_option'];
   loyaltyPointsProgram?: ListPaymentsResponse['loyalty_points_programs']['k'];
@@ -27,7 +27,7 @@ const getPriceWithDiscount = (price: number, discount: Props['discountOption'])
   return price;
 };
 
-export default (props: Props) => {
+const usePrices = (props: Props) => {
   const _product = computed(() => {
     return props.product || {
       price: props.price || 0,
@@ -177,3 +177,5 @@ export default (props: Props) => {
     cashbackValue,
   };
 };
+
+export default usePrices;