cloudcommerce 0.1.6 → 0.2.0

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

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import type { Products, Carts, ListPaymentsResponse } from '@cloudcommerce/types';
+import type { Products, 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'] };
+  product?: Partial<Products> & { price: number, final_price?: number };
   price?: number;
   basePrice?: number;
   isAmountTotal?: boolean,
@@ -26,8 +25,8 @@ const {
   hasVariedPrices,
   salePrice,
   comparePrice,
-  earnPointsPercentage,
-  pointsCashback,
+  cashbackPercentage,
+  cashbackValue,
   installmentsNumber,
   monthlyInterest,
   installmentValue,
@@ -35,131 +34,143 @@ const {
   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">
+  <div :data-prices="componentVariant" class="text-base-600">
+    <slot v-if="comparePrice" name="compare" v-bind="{ salePrice, comparePrice }">
+      <span data-prices-compare class="text-base-500 mr-1">
+        <slot name="compare-pre">
+          <small v-if="isLiteral">
+            {{ `${$t.i19from} ` }}
+          </small>
+        </slot>
+        <slot name="compare-value" v-bind="{ salePrice, comparePrice }">
+          <s>{{ $money(comparePrice) }}</s>
+        </slot>
+        <slot name="compare-post">
+          <small v-if="isLiteral">
+            {{ ` ${$t.i19to}` }}
+          </small>
+        </slot>
+      </span>
+    </slot>
+    <slot name="sale" v-bind="{ salePrice }">
+      <strong data-prices-sale class="inline-block text-base-800">
+        <slot name="sale-pre">
+          <small v-if="hasVariedPrices">
+            {{ `${$t.i19asOf} ` }}
+          </small>
+        </slot>
+        <slot name="sale-value" v-bind="{ salePrice }">
+          {{ $money(salePrice) }}
+        </slot>
+        <slot name="sale-post" />
+      </strong>
+    </slot>
+    <slot
+      v-if="cashbackValue"
+      name="cashback"
+      v-bind="{ salePrice, cashbackValue, cashbackPercentage }"
+    >
+      <Fade slide="down">
+        <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">
+              <i class="i-cashback mr-1"></i>
+            </slot>
+            <slot
+              name="cashback-value"
+              v-bind="{ salePrice, cashbackValue, cashbackPercentage }"
+            >
+              <span class="font-medium">
+                {{ $money(cashbackValue) }}
+              </span>
+            </slot>
+            <slot name="cashback-post">
+              <small> cashback</small>
+            </slot>
+          </span>
+        </div>
+      </Fade>
+    </slot>
+    <slot
+      v-if="installmentValue"
+      name="installment"
+      v-bind="{ salePrice, installmentValue, installmentsNumber, monthlyInterest }"
+    >
+      <Fade slide="down">
+        <div v-if="hasPriceOptions" data-prices-installment>
+          <slot name="installment-pre">
             <small v-if="isLiteral">
-              {{ `${$t.i19from} ` }}
+              {{ `${$t.i19upTo} ` }}
             </small>
           </slot>
-          <slot name="compare-value" v-bind="prices">
-            <s>{{ $money(comparePrice) }}</s>
-          </slot>
-          <slot name="compare-post">
+          <slot
+            name="installment-value"
+            v-bind="{ salePrice, installmentValue, installmentsNumber, monthlyInterest }"
+          >
+            {{ installmentsNumber }}x
             <small v-if="isLiteral">
-              {{ ` ${$t.i19to}` }}
+              {{ ` ${$t.i19of} ` }}
             </small>
+            <span>{{ $money(installmentValue) }}</span>
           </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">
+          <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="{ salePrice, priceWithDiscount, discountLabel }"
+    >
+      <Fade slide="down">
+        <div v-if="hasPriceOptions" data-prices-discount>
+          <slot name="discount-pre">
+            <small v-if="!discountLabel">
               {{ `${$t.i19asOf} ` }}
             </small>
           </slot>
-          <slot name="sale-value" v-bind="prices">
-            {{ $money(salePrice) }}
+          <slot
+            name="discount-value"
+            v-bind="{ salePrice, priceWithDiscount, discountLabel }"
+          >
+            <span>{{ $money(priceWithDiscount) }}</span>
           </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 :data-tooltip="$t.i19get$1back
-              .replace('$1', $percentage(earnPointsPercentage))">
-              <slot name="cashback-pre">
-                <i class="i-cashback 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>
+          <slot name="discount-post">
+            <small v-if="discountLabel">
+              {{ ` ${discountLabel}` }}
+            </small>
+          </slot>
+        </div>
+      </Fade>
+    </slot>
+  </div>
 </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/composables/use-prices.ts

@@ -1,10 +1,10 @@
-import type { Products, Carts, ListPaymentsResponse } from '@cloudcommerce/types';
+import type { Products, 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'] };
+  product?: Partial<Products> & { price: number, final_price?: number };
   price?: number;
   basePrice?: number;
   isAmountTotal?: boolean,
@@ -90,7 +90,7 @@ export default (props: Props) => {
   });
   const installmentValue = computed(() => {
     if (installmentsNumber.value >= 2) {
-      if (monthlyInterest.value) {
+      if (!monthlyInterest.value) {
         return salePrice.value / installmentsNumber.value;
       }
       const interest = monthlyInterest.value / 100;
@@ -112,7 +112,14 @@ export default (props: Props) => {
     return {};
   });
   const discountLabel = computed(() => {
-    return discountObject.value.label || '';
+    const { label } = discountObject.value;
+    if (label) {
+      if (label.includes(' ')) {
+        return label;
+      }
+      return `via ${label}`;
+    }
+    return '';
   });
   const priceWithDiscount = computed(() => {
     return getPriceWithDiscount(salePrice.value, discountObject.value);
@@ -126,7 +133,7 @@ export default (props: Props) => {
     if (pointsPrograms) {
       const programIds = Object.keys(pointsPrograms);
       for (let i = 0; i < programIds.length; i++) {
-        const program = pointsPrograms[i];
+        const program = pointsPrograms[programIds[i]];
         if (program && program.earn_percentage > 0) {
           return program;
         }
@@ -143,12 +150,12 @@ export default (props: Props) => {
   const earnPointsPercentage = computed(() => {
     return pointsProgramObject.value.earn_percentage || 0;
   });
-  const earnPointsFactor = computed(() => {
-    return earnPointsPercentage.value / 100;
+  const cashbackPercentage = computed(() => {
+    return earnPointsPercentage.value * pointsProgramObject.value.ratio;
   });
-  const pointsCashback = computed(() => {
-    return earnPointsFactor.value > 0
-      ? salePrice.value * earnPointsFactor.value : 0;
+  const cashbackValue = computed(() => {
+    return cashbackPercentage.value >= 1
+      ? salePrice.value * (cashbackPercentage.value / 100) : 0;
   });
 
   return {
@@ -166,7 +173,7 @@ export default (props: Props) => {
     pointsMinPrice,
     pointsProgramName,
     earnPointsPercentage,
-    earnPointsFactor,
-    pointsCashback,
+    cashbackPercentage,
+    cashbackValue,
   };
 };

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/image.ts

@@ -15,8 +15,9 @@ const tryImageSize = (src: string) => {
   return dimensions;
 };
 
-type TransformOptions = Parameters<typeof _getImage>[0] & {
+type TransformOptions = Omit<Parameters<typeof _getImage>[0], 'alt'> & {
   isLowResolution?: boolean,
+  alt?: string,
 };
 const getImage = async (options: TransformOptions) => {
   if (!options.isLowResolution) {
@@ -40,7 +41,7 @@ const getImage = async (options: TransformOptions) => {
       options.aspectRatio = height ? width / height : 1;
     }
   }
-  const imgAttrs = await _getImage(options);
+  const imgAttrs = await _getImage({ alt: '', ...options });
   imgAttrs.src += imgAttrs.src.includes('?') ? '&' : '?';
   imgAttrs.src += `V=${import.meta.env.DEPLOY_RAND || '_'}`;
   if (typeof imgAttrs.width === 'number') {

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;

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

@@ -46,10 +46,16 @@ if (!import.meta.env.SSR) {
   if (persistedValue?.list_payments) {
     Object.assign(modulesInfo, persistedValue);
   } else {
-    const modulesToFetch: { modName: string, reqOptions?: Record<string, any> }[] = [
-      { modName: 'list_payments' },
-      { modName: 'calculate_shipping' },
-    ];
+    const modulesInfoPreset = window.storefront?.modulesInfoPreset;
+    if (modulesInfoPreset) {
+      Object.assign(modulesInfo, modulesInfoPreset);
+    }
+    const modulesToFetch: { modName: string, reqOptions?: Record<string, any> }[] = [];
+    ['list_payments', 'calculate_shipping'].forEach((modName) => {
+      if (!Object.keys(modulesInfo[modName]).length) {
+        modulesToFetch.push({ modName });
+      }
+    });
     if (Object.keys(utm).length) {
       modulesToFetch.push({
         modName: 'apply_discount',

package/packages/storefront/src/vue-globals.d.ts

@@ -1,6 +1,6 @@
-/* eslint-disable */
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
+// eslint-disable-next-line import/no-extraneous-dependencies
+import '@vue/runtime-core';
 import type { FormatPercentage } from '@@sf/pages/_vue';
 
 type Dictionary = Omit<typeof import('@@i18n'),
@@ -21,9 +21,9 @@ declare module '@vue/runtime-core' {
   }
 
   export interface GlobalComponents {
-    // @ts-ignore
-    Fade: typeof import('@@components/globals/Fade.vue')['default']
+    Fade: typeof import('@@sf/components/globals/Fade.vue')['default'];
+    ALink: typeof import('@@sf/components/globals/ALink.vue')['default'];
   }
 }
 
-export {}
+export {};

package/packages/storefront/tailwind.config.cjs

@@ -37,8 +37,14 @@ let defaultThemeOptions = {
     'dinersclub',
   ],
   generalIcons: 'heroicons',
-  shoppingCartIcon: 'shopping-bag',
-  cashbackIcon: 'arrow-uturn-left',
+  iconAliases: {
+    'shopping-cart': 'shopping-bag',
+    cashback: 'arrow-uturn-left',
+    'chevron-right': 'chevron-right',
+    'chevron-left': 'chevron-left',
+    'chevron-up': 'chevron-up',
+    'chevron-down': 'chevron-down',
+  },
 };
 if (globalThis.storefront_theme_options) {
   defaultThemeOptions = deepmerge(defaultThemeOptions, globalThis.storefront_theme_options);
@@ -115,8 +121,7 @@ const genTailwindConfig = (themeOptions = {}) => {
     successColor,
     warningColor,
     dangerColor,
-    shoppingCartIcon,
-    cashbackIcon,
+    iconAliases,
   } = deepmerge(defaultThemeOptions, themeOptions);
   const config = {
     theme: {
@@ -162,8 +167,9 @@ const genTailwindConfig = (themeOptions = {}) => {
               if (!shortcuts) {
                 const { icons } = require(`@iconify-json/${iconset}`);
                 shortcuts = Object.keys(icons.icons);
-                shortcuts.push(['shopping-cart', shoppingCartIcon]);
-                shortcuts.push(['cashback', cashbackIcon]);
+                Object.keys(iconAliases).forEach((alias) => {
+                  shortcuts.push([alias, iconAliases[alias]]);
+                });
               }
               shortcuts.forEach((shortcut) => {
                 if (typeof shortcut === 'string') {

package/packages/storefront/tsconfig.json

@@ -6,9 +6,9 @@
     "paths": {
       "@@i18n": ["./node_modules/@cloudcommerce/i18n/src/pt_br.ts"],
       "@@sf/*": ["./src/lib/*"],
-      "@@components/*": ["./src/components/*", "./src/lib/components/*"],
       "~/*": ["./src/*"],
       "content/*": ["./content/*"],
-    }
+    },
+    "types": ["vite-plugin-pwa/info"]
   }
 }

package/packages/storefront/uno.config.cjs

@@ -46,8 +46,7 @@ const genUnoCSSConfig = (themeOptions = {}) => {
     brandLogos,
     brandLogosShortcuts,
     generalIcons,
-    shoppingCartIcon,
-    cashbackIcon,
+    iconAliases,
     preflights = [{
       getCSS: () => {
         const strCSSVars = Object.entries(colorCSSVars)
@@ -86,8 +85,9 @@ const genUnoCSSConfig = (themeOptions = {}) => {
           ? { [`i-${brand}`]: `i-${brandLogos}:${brand}` }
           : { [`i-${brand[0]}`]: `i-${brandLogos}:${brand[1]}` };
       }),
-      { 'i-shopping-cart': `i-${generalIcons}:${shoppingCartIcon}` },
-      { 'i-cashback': `i-${generalIcons}:${cashbackIcon}` },
+      ...Object.keys(iconAliases).map((alias) => {
+        return { [`i-${alias}`]: `i-${generalIcons}:${iconAliases[alias]}` };
+      }),
       [/^i-([^:]+)$/, ([, icon]) => `i-${generalIcons}:${icon}`],
     ],
     theme: {

package/packages/types/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/types",
   "type": "module",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "E-Com Plus Cloud Commerce reusable type definitions",
   "main": "index.ts",
   "repository": {