cloudcommerce 0.0.133 → 0.1.0

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.0.133",
+  "version": "0.1.0",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "main": "src/index.js",
   "repository": {
@@ -15,9 +15,11 @@
     "url": "https://github.com/ecomplus/cloud-commerce/issues"
   },
   "homepage": "https://github.com/ecomplus/cloud-commerce/tree/main/packages/storefront#readme",
+  "engines": {
+    "node": ">=16"
+  },
   "scripts": {
     "dev": "astro dev",
-    "dev:cms": "tinacms dev -c \"astro dev\"",
     "start": "astro dev --host",
     "build": "astro build",
     "build:static": "BUILD_OUTPUT=static astro build",
@@ -27,29 +29,30 @@
   },
   "dependencies": {
     "@astrojs/image": "^0.12.1",
-    "@astrojs/node": "^3.1.0",
+    "@astrojs/node": "^4.0.0",
     "@astrojs/partytown": "^1.0.2",
     "@astrojs/prefetch": "^0.1.1",
-    "@astrojs/vue": "^1.2.1",
+    "@astrojs/vue": "^1.2.2",
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
     "@cloudcommerce/i18n": "workspace:*",
     "@ecomplus/utils": "1.5.0-rc.3",
     "@fastify/deepmerge": "^1.3.0",
-    "@headlessui/vue": "^1.7.5",
+    "@headlessui/vue": "^1.7.7",
     "@iconify-json/brands": "npm:@iconify-json/fa6-brands@^1.1.8",
     "@iconify-json/general": "npm:@iconify-json/heroicons@^1.1.6",
     "@iconify-json/logos": "^1.1.19",
-    "@vueuse/core": "^9.6.0",
-    "astro": "^1.6.14",
+    "@vueuse/core": "^9.7.0",
+    "astro": "^1.7.1",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.0.3",
     "firebase": "^9.15.0",
+    "floating-vue": "2.0.0-beta.20",
     "image-size": "^1.0.2",
     "tailwindcss": "^3.2.4",
-    "unocss": "^0.47.5",
+    "unocss": "^0.47.6",
     "vite": "^3.2.5",
-    "vite-plugin-pwa": "^0.13.3",
+    "vite-plugin-pwa": "^0.14.0",
     "vue": "^3.2.45",
     "vue-bind-once": "^0.1.1"
   },

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

@@ -9,6 +9,8 @@
     SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --font-family: var(--font-sans);
   --transition: .15s ease-in-out;
+  --transition-slow: .25s ease-in-out;
+  --transition-slower: .45s ease-in-out;
   --c-on-dark: rgb(255, 255, 255);
   --c-on-light: rgb(0, 0, 0);
   --c-background: #fff;
@@ -27,6 +29,8 @@
 @media (prefers-reduced-motion: reduce) {
   :root {
     --transition: 0s;
+    --transition-slow: 0s;
+    --transition-slower: .15s linear;
   }
 }
 

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

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import type { Products, Carts, ListPaymentsResponse } from '@cloudcommerce/types';
+import usePrices from '@@sf/composables/use-prices';
+import useComponentVariant from '@@sf/composables/use-component-variant';
+import { ref } from 'vue';
+
+export interface Props {
+  product?: Partial<Carts['items'][0]> & Partial<Products> & { price: Products['price'] };
+  price?: number;
+  basePrice?: number;
+  isAmountTotal?: boolean,
+  installmentsOption?: ListPaymentsResponse['installments_option'];
+  discountOption?: ListPaymentsResponse['discount_option'];
+  isBig?: boolean;
+  isLiteral?: boolean;
+  hasCashback?: boolean;
+  hasPriceOptions?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hasCashback: true,
+  hasPriceOptions: true,
+});
+const prices = usePrices(props);
+const {
+  hasVariedPrices,
+  salePrice,
+  comparePrice,
+  earnPointsPercentage,
+  pointsCashback,
+  installmentsNumber,
+  monthlyInterest,
+  installmentValue,
+  priceWithDiscount,
+  discountLabel,
+} = prices;
+const componentVariant = useComponentVariant(props);
+const isFade = ref(false);
+setTimeout(() => {
+  isFade.value = true;
+  setTimeout(() => {
+    isFade.value = false;
+  }, 5000);
+}, 5000);
+</script>
+
+<template>
+  <slot v-bind="prices">
+    <div :data-sf-prices="componentVariant" class="text-base-600">
+      <slot v-if="comparePrice" name="compare" v-bind="prices">
+        <span :data-sf-prices-compare="comparePrice" class="text-base-500 mr-1">
+          <slot name="compare-pre">
+            <small v-if="isLiteral">
+              {{ `${$t.i19from} ` }}
+            </small>
+          </slot>
+          <slot name="compare-value" v-bind="prices">
+            <s>{{ $money(comparePrice) }}</s>
+          </slot>
+          <slot name="compare-post">
+            <small v-if="isLiteral">
+              {{ ` ${$t.i19to}` }}
+            </small>
+          </slot>
+        </span>
+      </slot>
+      <slot name="sale" v-bind="prices">
+        <strong :data-sf-prices-sale="salePrice" class="inline-block text-base-800">
+          <slot name="sale-pre">
+            <small v-if="hasVariedPrices">
+              {{ `${$t.i19asOf} ` }}
+            </small>
+          </slot>
+          <slot name="sale-value" v-bind="prices">
+            {{ $money(salePrice) }}
+          </slot>
+          <slot name="sale-post" />
+        </strong>
+      </slot>
+      <slot v-if="pointsCashback" name="cashback" v-bind="prices">
+        <Fade slide="down">
+          <div v-if="hasCashback" :data-sf-prices-cashback="pointsCashback">
+            <span v-tooltip.bottom="$t.i19get$1back
+              .replace('$1', $percentage(earnPointsPercentage))">
+              <slot name="cashback-pre">
+                <i class="i-arrow-uturn-left mr-1"></i>
+              </slot>
+              <slot name="cashback-value" v-bind="prices">
+                <span class="font-medium">
+                  {{ $money(pointsCashback) }}
+                </span>
+              </slot>
+              <slot name="cashback-post">
+                <small> cashback</small>
+              </slot>
+            </span>
+          </div>
+        </Fade>
+      </slot>
+      <slot v-if="installmentValue" name="installment" v-bind="prices">
+        <Fade slide="down">
+          <div v-if="hasPriceOptions" :data-sf-prices-installment="installmentValue">
+            <slot name="installment-pre">
+              <small v-if="isLiteral">
+                {{ `${$t.i19upTo} ` }}
+              </small>
+            </slot>
+            <slot name="installment-value" v-bind="prices">
+              {{ installmentsNumber }}x
+              <small v-if="isLiteral">
+                {{ ` ${$t.i19of} ` }}
+              </small>
+              <span>{{ $money(installmentValue) }}</span>
+            </slot>
+            <slot name="installment-post">
+              <small v-if="!monthlyInterest && isLiteral">
+                {{ $t.i19interestFree }}
+              </small>
+            </slot>
+          </div>
+        </Fade>
+      </slot>
+      <slot v-if="priceWithDiscount < salePrice" name="discount" v-bind="prices">
+        <Fade slide="down">
+          <div v-if="hasPriceOptions" :data-sf-prices-discount="priceWithDiscount">
+            <slot name="discount-pre">
+              <small v-if="!discountLabel">
+                {{ `${$t.i19asOf} ` }}
+              </small>
+            </slot>
+            <slot name="discount-value" v-bind="prices">
+              <span>{{ $money(priceWithDiscount) }}</span>
+            </slot>
+            <slot name="discount-post">
+              <small v-if="discountLabel">
+                {{ ` ${discountLabel}` }}
+              </small>
+            </slot>
+          </div>
+        </Fade>
+      </slot>
+    </div>
+  </slot>
+</template>
+
+<style>
+[data-sf-prices-compare] {
+  font-size: 87%;
+}
+[data-sf-prices-cashback],
+[data-sf-prices-installment],
+[data-sf-prices-discount] {
+  font-size: 90%;
+}
+[data-sf-prices] small {
+  @apply lowercase;
+  font-size: 92%;
+}
+[data-sf-prices~=Big] {
+  @apply text-lg;
+}
+[data-sf-prices~=Big] [data-sf-prices-sale] {
+  @apply text-5xl block;
+}
+</style>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import Prices from '@@components/Prices.vue';
+
+export interface Props {
+  as?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  as: 'div',
+});
+const price = ref(12);
+const isBig = ref(false);
+setTimeout(() => {
+  price.value = 8;
+  isBig.value = true;
+}, 5000);
+</script>
+
+<template>
+  <component :is="as">
+    <Prices v-slot="{ salePrice }">
+      ProductCard {{ salePrice }}
+    </Prices>
+    <Prices :product="{ price }" />
+    <Prices :price="12" :base-price="17" />
+    <Prices :price="12" :base-price="16" :is-literal="true" />
+    <Prices :price="12" :is-big="isBig" />
+    <Prices :price="14" :base-price="18" :is-big="isBig" :is-literal="true" />
+    <Prices :price="12" :base-price="16">
+      <template #compare-value="{ comparePrice }">
+        x{{ comparePrice }}
+      </template>
+    </Prices>
+  </component>
+</template>

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

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+export interface Props {
+  speed?: 'default' | 'slow' | 'slower',
+  slide?: 'down' | 'left' | 'right' | 'up',
+  isLeaveTo?: boolean,
+  isEnterFrom?: boolean,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  speed: 'default',
+  isLeaveTo: true,
+  isEnterFrom: true,
+});
+const duration = computed(() => {
+  if (props.speed === 'default') return 'var(--transition, .2s linear)';
+  return `var(--transition-${props.speed}, .4s linear)`;
+});
+const transform = computed(() => {
+  switch (props.slide) {
+    case 'down':
+      return 'translate3d(0, -100%, 0)';
+    case 'left':
+      return 'translate3d(-100%, 0, 0)';
+    case 'right':
+      return 'translate3d(100%, 0, 0)';
+    case 'up':
+      return 'translate3d(0, 100%, 0)';
+    default:
+      return 'none';
+  }
+});
+const opacity = computed(() => {
+  return transform.value !== 'none' ? 0.1 : 0;
+});
+const enterFromOpacity = computed(() => {
+  return props.isEnterFrom ? opacity.value : 1;
+});
+const leaveToOpacity = computed(() => {
+  return props.isLeaveTo ? opacity.value : 1;
+});
+const enterFromTransform = computed(() => {
+  return props.isEnterFrom ? transform.value : 'none';
+});
+const leaveToTransform = computed(() => {
+  return props.isLeaveTo ? transform.value : 'none';
+});
+const isSlideY = computed(() => {
+  return props.slide === 'down' || props.slide === 'up';
+});
+const height = computed(() => {
+  return isSlideY.value ? 0 : 'auto';
+});
+const width = computed(() => {
+  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';
+  return properties;
+});
+const onEnter = (el: HTMLElement) => {
+  if (props.slide) {
+    if (isSlideY.value) {
+      el.style.width = getComputedStyle(el).width;
+      el.style.height = 'auto';
+    } else {
+      el.style.width = 'auto';
+      el.style.height = getComputedStyle(el).height;
+    }
+    el.style.position = 'absolute';
+    el.style.visibility = 'hidden';
+    // eslint-disable-next-line no-shadow
+    const { width, height } = getComputedStyle(el);
+    el.style.width = isSlideY.value ? null : '0';
+    el.style.height = isSlideY.value ? '0' : null;
+    el.style.position = null;
+    el.style.visibility = null;
+    // Force repaint to make sure the animation is triggered correctly
+    // eslint-disable-next-line no-unused-expressions
+    getComputedStyle(el)[isSlideY.value ? 'height' : 'width'];
+    requestAnimationFrame(() => {
+      if (isSlideY.value) {
+        el.style.height = height;
+      } else {
+        el.style.width = width;
+      }
+    });
+  }
+};
+const onAfterEnter = (el: HTMLElement) => {
+  if (props.slide) {
+    el.style[isSlideY.value ? 'height' : 'width'] = 'auto';
+  }
+};
+const onLeave = (el: HTMLElement) => {
+  if (props.slide) {
+    if (isSlideY.value) {
+      el.style.height = getComputedStyle(el).height;
+    } else {
+      el.style.width = getComputedStyle(el).width;
+    }
+    const sizeProp = isSlideY.value ? 'height' : 'width';
+    // eslint-disable-next-line no-unused-expressions
+    getComputedStyle(el)[sizeProp];
+    requestAnimationFrame(() => {
+      el.style[sizeProp] = '0';
+    });
+  }
+};
+</script>
+
+<template>
+  <Transition
+    name="sf-fade"
+    @enter="onEnter"
+    @after-enter="onAfterEnter"
+    @leave="onLeave"
+  >
+    <slot />
+  </Transition>
+</template>
+
+<style>
+.sf-fade-enter-active,
+.sf-fade-leave-active {
+  transition: opacity var(--duration), transform var(--duration),
+    height var(--duration), width var(--duration);
+  overflow: hidden;
+}
+</style>
+
+<style scoped>
+* {
+  will-change: v-bind(willChange);
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+.sf-fade-enter-active,
+.sf-fade-leave-active {
+  --duration: v-bind(duration);
+}
+.sf-fade-enter-from {
+  opacity: v-bind(enterFromOpacity);
+  transform: v-bind(enterFromTransform);
+  height: v-bind(enterFromHeight);
+  width: v-bind(enterFromWidth);
+}
+.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-component-variant.ts

@@ -0,0 +1,13 @@
+import { computed } from 'vue';
+
+export default (props: Record<string, any>) => {
+  return computed(() => {
+    let variantName = '';
+    Object.keys(props).forEach((prop) => {
+      if (props[prop] === true) {
+        variantName += ` ${prop.replace(/^(is|has)/, '')}`;
+      }
+    });
+    return variantName.slice(1);
+  });
+};

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

@@ -0,0 +1,172 @@
+import type { Products, Carts, ListPaymentsResponse } from '@cloudcommerce/types';
+import { computed } from 'vue';
+import { price as getPrice, onPromotion as checkOnPromotion } from '@ecomplus/utils';
+import modulesInfo from '@@sf/state/modules-info';
+
+export interface Props {
+  product?: Partial<Carts['items'][0]> & Partial<Products> & { price: Products['price'] };
+  price?: number;
+  basePrice?: number;
+  isAmountTotal?: boolean,
+  installmentsOption?: ListPaymentsResponse['installments_option'];
+  discountOption?: ListPaymentsResponse['discount_option'];
+  loyaltyPointsProgram?: ListPaymentsResponse['loyalty_points_programs']['k'];
+}
+
+const getPriceWithDiscount = (price: number, discount: Props['discountOption']) => {
+  const { type, value } = discount;
+  let priceWithDiscount: number;
+  if (value) {
+    if (type === 'percentage') {
+      priceWithDiscount = price * ((100 - value) / 100);
+    } else {
+      priceWithDiscount = price - value;
+    }
+    return priceWithDiscount > 0 ? priceWithDiscount : 0;
+  }
+  return price;
+};
+
+export default (props: Props) => {
+  const _product = computed(() => {
+    return props.product || {
+      price: props.price || 0,
+      base_price: props.basePrice,
+    };
+  });
+  const hasVariedPrices = computed(() => {
+    const { variations } = _product.value;
+    if (variations) {
+      const productPrice = getPrice(_product.value);
+      for (let i = 0; i < variations.length; i++) {
+        const price = getPrice({
+          ..._product.value,
+          ...variations[i],
+        });
+        if (price > productPrice) {
+          return true;
+        }
+      }
+    }
+    return false;
+  });
+  const extraDiscount = computed(() => {
+    return modulesInfo.apply_discount.available_extra_discount;
+  });
+  const salePrice = computed(() => {
+    const price = getPrice(_product.value);
+    const discount = extraDiscount.value;
+    if (discount && (!discount.min_amount || price > discount.min_amount)) {
+      return getPriceWithDiscount(price, discount);
+    }
+    return price;
+  });
+  const comparePrice = computed(() => {
+    if (checkOnPromotion(_product.value)) {
+      return _product.value.base_price as number;
+    }
+    const price = getPrice(_product.value);
+    if (price > salePrice.value) {
+      return price;
+    }
+    return 0;
+  });
+
+  const installmentsObject = computed(() => {
+    return props.installmentsOption
+      || modulesInfo.list_payments.installments_option
+      || { max_number: 1 };
+  });
+  const installmentsNumber = computed(() => {
+    if (installmentsObject.value.max_number <= 1) {
+      return 1;
+    }
+    const minInstallment = installmentsObject.value.min_installment || 5;
+    const maxInstallmentsNumber = Math.round(salePrice.value / minInstallment);
+    return Math.min(maxInstallmentsNumber, installmentsObject.value.max_number);
+  });
+  const monthlyInterest = computed(() => {
+    return installmentsObject.value.monthly_interest || 0;
+  });
+  const installmentValue = computed(() => {
+    if (installmentsNumber.value >= 2) {
+      if (monthlyInterest.value) {
+        return salePrice.value / installmentsNumber.value;
+      }
+      const interest = monthlyInterest.value / 100;
+      return (salePrice.value * interest)
+        / (1 - ((1 + interest) ** -installmentsNumber.value));
+    }
+    return 0;
+  });
+
+  const discountObject = computed(() => {
+    const discount = props.discountOption || modulesInfo.list_payments.discount_option;
+    if (
+      discount
+      && (!discount.min_amount || discount.min_amount <= salePrice.value)
+      && (!props.isAmountTotal || discount.apply_at === 'total')
+    ) {
+      return discount;
+    }
+    return {};
+  });
+  const discountLabel = computed(() => {
+    return discountObject.value.label || '';
+  });
+  const priceWithDiscount = computed(() => {
+    return getPriceWithDiscount(salePrice.value, discountObject.value);
+  });
+
+  const pointsProgramObject = computed(() => {
+    if (props.loyaltyPointsProgram) {
+      return props.loyaltyPointsProgram;
+    }
+    const pointsPrograms = modulesInfo.list_payments.loyalty_points_programs;
+    if (pointsPrograms) {
+      const programIds = Object.keys(pointsPrograms);
+      for (let i = 0; i < programIds.length; i++) {
+        const program = pointsPrograms[i];
+        if (program && program.earn_percentage > 0) {
+          return program;
+        }
+      }
+    }
+    return { ratio: 0 };
+  });
+  const pointsMinPrice = computed(() => {
+    return pointsProgramObject.value.min_subtotal_to_earn || 0;
+  });
+  const pointsProgramName = computed(() => {
+    return pointsProgramObject.value.name || '';
+  });
+  const earnPointsPercentage = computed(() => {
+    return pointsProgramObject.value.earn_percentage || 0;
+  });
+  const earnPointsFactor = computed(() => {
+    return earnPointsPercentage.value / 100;
+  });
+  const pointsCashback = computed(() => {
+    return earnPointsFactor.value > 0
+      ? salePrice.value * earnPointsFactor.value : 0;
+  });
+
+  return {
+    hasVariedPrices,
+    salePrice,
+    comparePrice,
+    installmentsObject,
+    installmentsNumber,
+    monthlyInterest,
+    installmentValue,
+    discountObject,
+    discountLabel,
+    priceWithDiscount,
+    pointsProgramObject,
+    pointsMinPrice,
+    pointsProgramName,
+    earnPointsPercentage,
+    earnPointsFactor,
+    pointsCashback,
+  };
+};

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

@@ -3,6 +3,7 @@ import type { PageContext } from '@@sf/ssr-context';
 import '@@sf/assets/preflight.css';
 import '@@sf/assets/base.css';
 import '@@sf/assets/forms.css';
+import 'floating-vue/dist/style.css';
 import 'uno.css';
 
 export interface Props {

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

@@ -1,5 +1,12 @@
 import type { App } from 'vue';
 import { i18n, formatMoney } from '@ecomplus/utils';
+import { VTooltip } from 'floating-vue';
+// @ts-ignore
+import Fade from '@@components/globals/Fade.vue';
+
+const formatPercentage = (value: number, digits = 1) => {
+  return Number.isInteger(value) ? `${value}%` : `${value.toFixed(digits)}%`;
+};
 
 export default (app: App) => {
   app.use({
@@ -10,7 +17,12 @@ export default (app: App) => {
         // @ts-ignore
         return i18n(dict, lang || options?.lang);
       };
-      app.config.globalProperties.$formatMoney = formatMoney;
+      app.config.globalProperties.$money = formatMoney;
+      app.config.globalProperties.$percentage = formatPercentage;
     },
   });
+  app.directive('tooltip', VTooltip);
+  app.component('Fade', Fade);
 };
+
+export type FormatPercentage = typeof formatPercentage;

package/packages/storefront/src/lib/state/modules-info.ts

@@ -16,7 +16,7 @@ const modulesInfo = reactive<{
   list_payments: {
     installments_option?: ListPaymentsResponse['installments_option'],
     discount_option?: ListPaymentsResponse['discount_option'],
-    loyalty_points_programs?: ListPaymentsResponse['discount_option'],
+    loyalty_points_programs?: ListPaymentsResponse['loyalty_points_programs'],
   },
   calculate_shipping: {
     free_shipping_from_value?: CalculateShippingResponse['free_shipping_from_value'],