cloudcommerce 0.22.4 → 0.23.1

package/packages/storefront/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudcommerce/storefront",
   "type": "module",
-  "version": "0.22.4",
+  "version": "0.23.1",
   "description": "E-Com Plus Cloud Commerce storefront with Astro",
   "bin": {
     "storefront": "./scripts/build-prod.sh"
@@ -29,8 +29,8 @@
     "prepare-monorepo": "bash scripts/prepare-monorepo.sh"
   },
   "dependencies": {
-    "@astrojs/image": "0.17.2",
-    "@astrojs/node": "5.3.0",
+    "@astrojs/image": "0.17.3",
+    "@astrojs/node": "5.3.2",
     "@astrojs/vue": "2.2.1",
     "@cloudcommerce/api": "workspace:*",
     "@cloudcommerce/config": "workspace:*",
@@ -38,12 +38,12 @@
     "@ecomplus/utils": "1.5.0-rc.5",
     "@fastify/deepmerge": "^1.3.0",
     "@headlessui/vue": "^1.7.15",
-    "@iconify-json/fa6-brands": "^1.1.11",
-    "@iconify-json/heroicons": "^1.1.11",
-    "@iconify-json/logos": "^1.1.33",
+    "@iconify-json/fa6-brands": "^1.1.13",
+    "@iconify-json/heroicons": "^1.1.12",
+    "@iconify-json/logos": "^1.1.34",
     "@vite-pwa/astro": "^0.1.1",
     "@vueuse/core": "10.3.0",
-    "astro": "2.9.6",
+    "astro": "2.10.2",
     "chroma-js": "^2.4.2",
     "dotenv": "^16.3.1",
     "firebase": "^10.1.0",
@@ -52,13 +52,13 @@
     "semver": "^7.5.4",
     "sharp": "^0.32.4",
     "tailwindcss": "^3.3.3",
-    "unocss": "^0.54.1",
-    "vite": "^4.4.7",
+    "unocss": "^0.54.2",
+    "vite": "^4.4.9",
     "vite-plugin-pwa": "^0.16.4",
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@cloudcommerce/eslint": "workspace:^",
+    "@cloudcommerce/eslint": "workspace:*",
     "@cloudcommerce/types": "workspace:*"
   }
 }

package/packages/storefront/src/helpers/sf-utils.ts

@@ -0,0 +1,12 @@
+let id = -1;
+
+/* eslint-disable-next-line no-plusplus */
+export const useId = () => String(++id);
+
+export const requestIdleCallback = (fn: (...args: any[]) => any, fallbackMs = 300) => {
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(fn);
+  } else {
+    setTimeout(fn, fallbackMs);
+  }
+};

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

@@ -1,6 +1,7 @@
-<script setup lang="ts">
-/* REFERENCE: https://github.com/bartdominiak/vue-snap */
+<script lang="ts">
 import {
+  type Ref,
+  type InjectionKey,
   onMounted,
   onBeforeUnmount,
   ref,
@@ -11,9 +12,20 @@ import {
   provide,
 } from 'vue';
 import { useDebounceFn, useElementHover, useScroll } from '@vueuse/core';
-import { carouselKey } from '@@sf/components/_injection-keys';
 import CarouselControl from '@@sf/components/CarouselControl.vue';
 
+export type CarouselInject = {
+  autoplay: Ref<number | undefined>,
+  changeSlide: (direction: number, isPageScroll?: boolean) => void,
+  isBoundLeft: Ref<boolean>,
+  isBoundRight: Ref<boolean>,
+};
+
+export const carouselKey = Symbol('carousel') as InjectionKey<CarouselInject>;
+</script>
+
+<script setup lang="ts">
+/* REFERENCE: https://github.com/bartdominiak/vue-snap */
 export interface Props {
   as?: string;
   modelValue?: number;
@@ -27,10 +39,10 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits([
   'update:modelValue',
 ]);
-const currentIndex = ref(props.modelValue - 1);
+const currentIndex = ref(0);
 watch(toRef(props, 'modelValue'), (modelValue) => {
   currentIndex.value = modelValue - 1;
-});
+}, { immediate: true });
 watch(currentIndex, (current, previous) => {
   if (current !== previous) {
     emit('update:modelValue', current + 1);
@@ -119,9 +131,6 @@ const changeSlide = (direction: number, isPageScroll: boolean = true) => {
       direction = direction > 0 ? pageStep : -pageStep;
     }
   }
-  if (!props.autoplay) {
-    console.log({ direction }, currentIndex.value, slidesWidth.value.length);
-  }
   const nextOffsetLeft = calcNextOffsetLeft(direction);
   wrapper.value?.scrollTo({ left: nextOffsetLeft, behavior: 'smooth' });
   restartAutoplay();

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject } from 'vue';
-import { type CarouselInject, carouselKey } from '@@sf/components/_injection-keys';
+import { type CarouselInject, carouselKey } from '@@sf/components/Carousel.vue';
 
 export interface Props {
   isPrev?: boolean;

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+export interface Props {
+  to?: 'cart' | 'checkout';
+  cartUrl?: string;
+  checkoutUrl?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  to: 'cart',
+  cartUrl: globalThis.$storefront.settings.cart_url || '/app/#/cart',
+  checkoutUrl: globalThis.$storefront.settings.checkout_url || '/app/#/checkout',
+});
+const href = computed(() => {
+  if (props.to === 'cart') return props.cartUrl;
+  return props.checkoutUrl;
+});
+</script>
+
+<template>
+  <a :href="href"><slot /></a>
+</template>

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

@@ -99,7 +99,7 @@ const isPlacementX = computed(() => {
           data-drawer-close
         >
           <slot name="close">
-            <i class="i-close text-base-400 text-3xl"></i>
+            <i class="i-close text-base-400 hover:text-base-600 text-3xl"></i>
           </slot>
         </button>
         <slot />

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

@@ -0,0 +1,107 @@
+<script lang="ts">
+import {
+  type Ref,
+  type WritableComputedRef,
+  type InjectionKey,
+  ref,
+  computed,
+  provide,
+} from 'vue';
+import { useId } from '@@sf/sf-lib';
+import QuantitySelectorControl from '@@sf/components/QuantitySelectorControl.vue';
+
+export type QuantitySelectorInject = {
+  value: WritableComputedRef<number>,
+  isBoundMin: Ref<boolean>,
+  isBoundMax: Ref<boolean>,
+};
+
+export const quantitySelectorKey = Symbol('quantitySelector') as
+  InjectionKey<QuantitySelectorInject>;
+</script>
+
+<script setup lang="ts">
+export interface Props {
+  modelValue?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  readonly?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 1,
+  min: 1,
+});
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+}>();
+const input = ref<HTMLInputElement | null>(null);
+const inputId = `NInput${useId()}`;
+const value = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(_value) {
+    if (_value < props.min) {
+      _value = props.min;
+      (input.value as HTMLInputElement).value = `${_value}`;
+    }
+    if (props.max && _value > props.max) {
+      _value = props.max;
+      (input.value as HTMLInputElement).value = `${_value}`;
+    }
+    emit('update:modelValue', _value);
+  },
+});
+const isBoundMin = computed(() => {
+  return props.min >= value.value;
+});
+const isBoundMax = computed(() => {
+  return (props.max as number) <= value.value;
+});
+provide(quantitySelectorKey, {
+  value,
+  isBoundMin,
+  isBoundMax,
+});
+</script>
+
+<template>
+  <div data-quantity-selector>
+    <slot name="label" v-bind="{ inputId, value }">
+      <label :for="inputId" class="sr-only">
+        {{ $t.i19quantity }}
+      </label>
+    </slot>
+    <div class="flex items-center">
+      <input
+        ref="input"
+        type="number"
+        :id="inputId"
+        v-model="value"
+        :min="min"
+        :max="max"
+        :step="step"
+        :disabled="disabled"
+        :readonly="readonly"
+        class="h-12 w-14 px-2 text-lg border-transparent text-center
+        [-moz-appearance:_textfield] [&::-webkit-outer-spin-button]:m-0
+        [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:m-0
+        [&::-webkit-inner-spin-button]:appearance-none"
+      />
+      <slot
+        name="controls"
+        v-bind="{ value, isBoundMin, isBoundMax }"
+      >
+        <QuantitySelectorControl is-minus class="order-first">
+          <slot name="minus" />
+        </QuantitySelectorControl>
+        <QuantitySelectorControl class="order-last">
+          <slot name="plus" />
+        </QuantitySelectorControl>
+      </slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { inject } from 'vue';
+import {
+  type QuantitySelectorInject,
+  quantitySelectorKey,
+} from '@@sf/components/QuantitySelector.vue';
+
+export interface Props {
+  isMinus?: boolean;
+}
+
+defineProps<Props>();
+const {
+  value,
+  isBoundMin,
+  isBoundMax,
+} = inject(quantitySelectorKey) as QuantitySelectorInject;
+</script>
+
+<template>
+  <button
+    type="button"
+    class="w-10 h-12 text-xl leading-12 enabled:text-primary
+    enabled:hover:bg-primary-100/70 disabled:opacity-40"
+    :data-quantity-selector-control="isMinus ? 'minus' : 'plus'"
+    :aria-label="isMinus ? $t.i19minus : $t.i19plus"
+    :disabled="isMinus ? isBoundMin : isBoundMax"
+    @click.prevent="value += (isMinus ? -1 : 1)"
+  >
+    <slot>
+      <template v-if="isMinus">&minus;</template>
+      <template v-else>&plus;</template>
+    </slot>
+  </button>
+</template>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NetworkName } from '@@sf/server-data';
+import type { NetworkName } from '@@sf/sf-lib';
 import { computed } from 'vue';
 
 export interface Props {

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

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import type { NetworkName } from '@@sf/server-data';
+import { type NetworkName, isMobile, socialNetworks } from '@@sf/sf-lib';
 import { computed } from 'vue';
-import { isMobile } from '@@sf/browser-env';
-import { socialNetworks } from '@@sf/server-data';
 import SocialNetworkIcon from '@@sf/components/SocialNetworkIcon.vue';
 
 export interface Props {

package/packages/storefront/src/lib/composables/use-cart-item.ts

@@ -0,0 +1,52 @@
+import type { Carts } from '@cloudcommerce/api/types';
+import type { ProductItem } from '@@sf/composables/use-product-card';
+import { computed } from 'vue';
+import { name as getName, img as getImg } from '@ecomplus/utils';
+import { parseProduct } from '@@sf/state/shopping-cart';
+
+export type CartItem = Carts['items'][0];
+
+export type Props = {
+  item?: CartItem;
+  product?: ProductItem;
+  pictureSize?: string;
+} & ({ item: CartItem } | { product: ProductItem });
+
+export const useCartItem = (props: Props) => {
+  const parsedItem = computed(() => {
+    return !props.item && props.product
+      ? parseProduct(props.product)
+      : null;
+  });
+  const cartItem = computed(() => {
+    return (props.item || parsedItem.value) as CartItem;
+  });
+  const title = computed(() => {
+    return getName(cartItem.value);
+  });
+  const link = computed(() => {
+    const { slug } = cartItem.value;
+    if (typeof slug === 'string') {
+      return `/${slug}`;
+    }
+    return null;
+  });
+  const image = computed(() => {
+    if (cartItem.value.picture) {
+      return getImg(cartItem.value.picture, undefined, props.pictureSize || 'small');
+    }
+    return undefined;
+  });
+  const finalPrice = computed(() => {
+    return cartItem.value.final_price || cartItem.value.price;
+  });
+  return {
+    cartItem,
+    title,
+    link,
+    image,
+    finalPrice,
+  };
+};
+
+export default useCartItem;

package/packages/storefront/src/lib/composables/use-sticky-header.ts

@@ -10,7 +10,9 @@ import {
   useTimeout,
   useDebounceFn,
   useScroll,
+  watchDebounced,
 } from '@vueuse/core';
+import { isMobile } from '@@sf/sf-lib';
 
 export interface Props {
   header: Ref<HTMLElement | null>;
@@ -34,12 +36,20 @@ const useStickyHeader = (props: Props) => {
   const staticHeight = ref(0);
   const staticY = ref(0);
   let heightDiv: HTMLElement | undefined;
-  const { y } = !import.meta.env.SSR ? useScroll(document) : { y: ref(0) };
+  const { y: _y } = !import.meta.env.SSR ? useScroll(document) : { y: ref(0) };
+  const y = ref(0);
+  watchDebounced(_y, (nextY) => {
+    y.value = nextY;
+  }, {
+    debounce: isMobile ? 150 : 50,
+    maxWait: 600,
+  });
   const isSticky = computed(() => ready.value && y.value > staticY.value * 1.2);
   const transition = ref('none');
   watch(isSticky, async (_isSticky) => {
     if (canSetStyles && header.value) {
-      header.value.style.position = _isSticky ? 'sticky' : '';
+      header.value.style.position = _isSticky ? 'fixed' : '';
+      header.value.style.width = _isSticky ? '100vw' : '';
     }
     if (heightDiv) {
       heightDiv.style.height = _isSticky ? `${staticHeight.value}px` : '';
@@ -56,6 +66,7 @@ const useStickyHeader = (props: Props) => {
   watch(y, (newY, oldY) => {
     isScrollUp.value = newY > 0 && newY < oldY;
   });
+
   if (!import.meta.env.SSR) {
     onMounted(() => {
       if (!header.value) throw new Error('<header> (props.header) not set');
@@ -102,6 +113,7 @@ const useStickyHeader = (props: Props) => {
       }
     });
   }
+
   return {
     staticHeight,
     staticY,

package/packages/storefront/src/lib/sf-lib.ts

@@ -0,0 +1,7 @@
+export { i18n, formatMoney } from '@ecomplus/utils';
+
+export * from '../helpers/browser-env';
+
+export * from '../helpers/server-data';
+
+export * from '../helpers/sf-utils';

package/packages/storefront/src/lib/state/customer-session.ts

@@ -3,8 +3,8 @@ import type { Auth } from 'firebase/auth';
 import api from '@cloudcommerce/api';
 import { nickname as getNickname } from '@ecomplus/utils';
 import { computed } from 'vue';
-import requestIdleCallback from '../../helpers/idle-callback';
-import useStorage from './use-storage';
+import { requestIdleCallback } from '@@sf/sf-lib';
+import useStorage from '@@sf/state/use-storage';
 
 const storageKey = 'ecomSession';
 const emptySession = {

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

@@ -7,8 +7,8 @@ import { reactive, computed } from 'vue';
 import { formatMoney } from '@ecomplus/utils';
 import loadingGlobalInfoPreset from '@@sf/scripts/modules-info-preset';
 import utm from '@@sf/scripts/session-utm';
+import { requestIdleCallback } from '@@sf/sf-lib';
 import afetch from '../../helpers/afetch';
-import requestIdleCallback from '../../helpers/idle-callback';
 
 const emptyInfo = {
   list_payments: {},

package/packages/storefront/src/lib/state/shopping-cart/parse-product.ts

@@ -11,29 +11,31 @@ export default (
   if (typeof quantity !== 'number' || Number.isNaN(quantity)) {
     quantity = product.min_quantity || 1;
   }
-  const item: any = { ...product };
-  if (variationId && product.variations) {
-    Object.assign(item, product.variations.find(({ _id }) => _id === variationId));
-    delete item.variations;
-  }
-  item.product_id = product._id;
-  if (variationId) {
-    item.variation_id = variationId;
-    if (item.picture_id && product.pictures) {
-      const pictures = product.pictures.filter((picture) => {
-        return picture._id === item.picture_id;
-      });
-      if (pictures.length) {
-        [item.picture] = pictures;
-      }
-    }
+  const minQuantity = product.min_quantity || 0;
+  const variation = variationId && product.variations
+    ? product.variations.find(({ _id }) => _id === variationId)
+    : undefined;
+  const item: CartItem = {
+    product_id: product._id,
+    variation_id: variationId,
+    sku: variation?.sku || product.sku,
+    name: variation?.name || product.name,
+    slug: product.slug,
+    production_time: variation?.production_time || product.production_time,
+    currency_id: product.currency_id,
+    currency_symbol: product.currency_symbol,
+    base_price: variation?.base_price || product.base_price,
+    max_quantity: product.quantity,
+    quantity: minQuantity > 0 ? Math.max(minQuantity, quantity) : quantity,
+    price: getPrice(product),
+  };
+  if (variation?.picture_id && product.pictures) {
+    item.picture = product.pictures.find((_picture) => {
+      return _picture._id === variation.picture_id;
+    });
   }
   if (!item.picture && product.pictures) {
     [item.picture] = product.pictures;
   }
-  item.max_quantity = item.quantity || product.quantity;
-  const minQuantity = item.min_quantity || product.min_quantity;
-  item.quantity = minQuantity > 0 ? Math.max(minQuantity, quantity) : quantity;
-  item.price = getPrice(item) || getPrice(product);
-  return item as CartItem;
+  return item;
 };

package/packages/storefront/src/lib/state/shopping-cart.ts

@@ -1,8 +1,8 @@
 import type { Products, CartSet, SearchItem } from '@cloudcommerce/api/types';
 import { computed } from 'vue';
-import useStorage from './use-storage';
-import addItem from './shopping-cart/add-cart-item';
-import parseProduct from './shopping-cart/parse-product';
+import useStorage from '@@sf/state/use-storage';
+import addItem from '@@sf/state/shopping-cart/add-cart-item';
+import parseProduct from '@@sf/state/shopping-cart/parse-product';
 
 const storageKey = 'ecomShoppingCart';
 const emptyCart = {
@@ -72,7 +72,15 @@ const addCartItem = (newItem: CartSet['items'][0]) => {
     shoppingCart.value.items = cartObj.items;
   }
 };
-
+const removeCartItem = (itemId: string) => {
+  for (let i = 0; i < shoppingCart.value.items.length; i++) {
+    const item = shoppingCart.value.items[i];
+    if (item._id === itemId) {
+      shoppingCart.value.items.splice(i, 1);
+      break;
+    }
+  }
+};
 const addProductToCart = (
   product: (Partial<Products> | Partial<SearchItem>) & { _id: Products['_id'] },
   variationId?: Products['_id'],
@@ -85,6 +93,7 @@ export {
   totalItems,
   shoppingCart,
   addCartItem,
+  removeCartItem,
   parseProduct,
   addProductToCart,
 };

package/packages/types/package.json

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

package/packages/storefront/dist/client/_astro/Carousel.8af656b5.js

@@ -1 +0,0 @@
-import{a as q,h as G,c as J}from"./index.7eac5494.js";import{_ as M,d as K,B as X,o as B,a as Q,u as v,b as Y,n as H,j as c,k as h,t as $,c as D,l as Z,E as ee,Q as te,C as ae,g as oe,w as P,h as le,e as F,H as se,I as re}from"./_plugin-vue_export-helper.4cb7dd76.js";const U=Symbol("carousel"),ne=K({__name:"CarouselControl",props:{isPrev:{type:Boolean,default:!1}},setup(r,{expose:u}){u();const{changeSlide:l}=X(U),t={changeSlide:l};return Object.defineProperty(t,"__isScriptSetup",{enumerable:!1,value:!0}),t}}),ue=["aria-label","data-carousel-control"];function ie(r,u,l,t,n,o){return B(),Q("button",{type:"button","aria-label":l.isPrev?"Anterior":"Próximo",onClick:u[0]||(u[0]=m=>t.changeSlide(l.isPrev?-1:1)),class:H(["group absolute top-0 z-1",l.isPrev?"left-0":"right-0"]),"data-carousel-control":l.isPrev?"previous":"next"},[v(r.$slots,"default",{},()=>[Y("i",{class:H(["m-0",l.isPrev?"i-chevron-left group-active:-translate-x-1":"i-chevron-right group-active:translate-x-1"])},null,2)])],10,ue)}const ce=M(ne,[["render",ie]]),de=K({__name:"Carousel",props:{as:{default:"ul"},modelValue:{default:1},autoplay:{}},emits:["update:modelValue"],setup(r,{expose:u,emit:l}){u();const t=r,n=c(t.modelValue-1);h($(t,"modelValue"),e=>{n.value=e-1}),h(n,(e,a)=>{e!==a&&l("update:modelValue",e+1)});const o=c(null),{x:m,isScrolling:L,arrivedState:_}=q(o),T=D(()=>_.left),W=D(()=>_.right),s=c([]),g=c(0),p=c(0),I=c(0),k=()=>{o.value&&(g.value=o.value.scrollWidth,p.value=o.value.offsetWidth)},V=()=>{if(!o.value)return;let e=[...o.value.children];e.length===1&&e[0].tagName.endsWith("SLOT")&&(e=[...e[0].children]),s.value=e.map(a=>({offsetLeft:a.offsetLeft,width:a.offsetWidth}))},z=e=>{let a=n.value+e;if(a>=s.value.length)return 0;a<0&&(a=s.value.length+a);const{offsetLeft:b,width:d}=s.value[a]||{};return d?b:0},x=()=>{const e=s.value.findIndex(a=>Math.abs(a.offsetLeft-m.value)<=5);e>-1&&(n.value=e||0)},E=()=>{const e=g.value-p.value;I.value=s.value.findIndex(({offsetLeft:a})=>a>=e-5)};let i;const f=()=>{t.autoplay&&(clearTimeout(i),i=setTimeout(()=>{C(1)},t.autoplay))},C=(e,a=!0)=>{if(s.value.length<2)return;if(a&&(e===1||e===-1)){let d=0,j=0;for(let S=n.value;S<s.value.length;S++){const{width:A}=s.value[S]||{};if(A&&(d+=1,j+=A,j>=p.value))break}d&&(e=e>0?d:-d)}t.autoplay||console.log({direction:e},n.value,s.value.length);const b=z(e);o.value?.scrollTo({left:b,behavior:"smooth"}),f()};h(L,e=>{e?clearTimeout(i):(x(),f())});const O=c(null),R=G(O);h(R,e=>{e?clearTimeout(i):f()});const w=()=>{o.value&&(k(),V(),x(),E())},y=J(()=>{o.value&&(o.value.scrollLeft=0,w())},400);Z(()=>{w(),ee(()=>{o.value&&[...o.value.children].forEach(e=>{e.setAttribute("tabindex","0")})}),f(),window.addEventListener("resize",y)}),te(()=>{window.removeEventListener("resize",y),clearTimeout(i)}),ae(U,{autoplay:$(t,"autoplay"),changeSlide:C,isBoundLeft:T,isBoundRight:W});const N={props:t,emit:l,currentIndex:n,wrapper:o,currentPos:m,isScrolling:L,arrivedState:_,isBoundLeft:T,isBoundRight:W,slidesWidth:s,wrapperScrollWidth:g,wrapperVisibleWidth:p,indexCount:I,calcWrapperWidth:k,calcSlidesWidth:V,calcNextOffsetLeft:z,calcCurrentIndex:x,calcIndexCount:E,get autoplayTimer(){return i},set autoplayTimer(e){i=e},restartAutoplay:f,changeSlide:C,carousel:O,isHovered:R,calcOnInit:w,onResize:y,CarouselControl:ce};return Object.defineProperty(N,"__isScriptSetup",{enumerable:!1,value:!0}),N}}),fe={ref:"carousel",class:"relative","data-carousel":""};function ve(r,u,l,t,n,o){return B(),Q("div",fe,[(B(),oe(le(l.as),{ref:"wrapper",class:"flex overflow-x-scroll overflow-y-hidden list-none m-0 p-0 snap-x snap-mandatory scroll-smooth [&>*]:snap-start [&>*]:outline-none",style:{"scrollbar-width":"none","-webkit-overflow-scrolling":"touch","-ms-overflow-style":"none"},"data-carousel-wrapper":""},{default:P(()=>[v(r.$slots,"default")]),_:3},512)),v(r.$slots,"controls",se(re({changeSlide:t.changeSlide,isBoundLeft:t.isBoundLeft,isBoundRight:t.isBoundRight,currentPage:t.currentIndex+1,pageCount:t.indexCount+1})),()=>[F(t.CarouselControl,{"is-prev":""},{default:P(()=>[v(r.$slots,"previous")]),_:3}),F(t.CarouselControl,null,{default:P(()=>[v(r.$slots,"next")]),_:3})])],512)}const me=M(de,[["render",ve]]);export{me as C,ce as a};

package/packages/storefront/dist/client/_astro/ProductShelf.6351b57b.js

@@ -1 +0,0 @@
-import{L as R,j as O,M as q,N as A,c as d,O as F,_ as N,d as E,m as M,o as i,a as c,x as h,i as f,b as g,y as S,n as B,e as x,w as I,g as j,F as Q,h as T,q as G,f as J,v as K,r as U}from"./_plugin-vue_export-helper.4cb7dd76.js";import{a as D,b as X}from"./api.4984c5be.js";import{C as Y,a as Z}from"./Carousel.8af656b5.js";import{d as $,e as ee,g as te,l as ne,h as ae,w as re}from"./index.7eac5494.js";import{i as se,g as oe}from"./img.abbe849f.js";import"./session-utm.744b0db3.js";const ie=(t,n=R.get("lang"))=>n&&t.i18n&&t.i18n[n]?t.i18n[n]:t.name||t.title||se(t.i18n,n)||"",le=ie,ce=t=>t&&t.min_quantity||1,ue=ce,de=t=>!t.hasOwnProperty("quantity")||t.quantity>=ue(t),W=de,me=t=>{const n=O(t.title||""),r=O(t.titleLink||""),e=O(!1);let m=null;const s=O(null),u=q(t.products||[]);return t.products||(e.value=!0,m=(async()=>{let _=t.searchQuery||"",b;if(t.collectionId){try{const{data:a}=await D.get(`collections/${t.collectionId}`);b=a}catch(a){console.error(a),s.value=a}const l=b?.products;Array.isArray(l)&&l.length&&(_+=`&_id=${l.slice(0,60).join(",")}`),!n.value&&n.value!==null&&b?.name&&(n.value=b?.name)}const v=t.limit||24;let p=`offset=${t.page?(t.page-1)*v:0}&limit=${v}`;t.sort&&(p+=`&sort=${t.sort}`),p+=_;try{const{data:l}=await D.get(`search/v1?${p}`);if(t.isShuffle){let a=l.result.filter(P=>P.available&&W(P)).length,k,C;for(;a;)C=Math.floor(Math.random()*a--),k=l.result[a],l.result[a]=l.result[C],l.result[C]=k}l.result.forEach(a=>u.push(a))}catch(l){console.error(l),s.value=l}e.value=!1})()),{title:n,titleLink:r,isFetching:e,fetching:m,fetchError:s,products:u}},he=t=>{const n=O(!1);let r=null;const e=O(null),{productId:m}=t,s=q({...t.product,_id:t.product?._id||m,price:A(t.product||{})});!t.product&&m&&(n.value=!0,r=(async()=>{try{const{data:a}=await D.get(`products/${m}`);Object.assign(s,a)}catch(a){console.error(a),e.value=a}n.value=!1})());const u=d(()=>le(s)),_=d(()=>{const{slug:a}=s;return typeof a=="string"?`/${a}`:null}),b=d(()=>{const{pictures:a}=s,k=[];return a&&a.forEach(C=>{const P=oe(C);P&&k.push(P)}),k}),v=d(()=>W(s)),w=d(()=>v.value&&s.available&&s.visible),p=d(()=>{if(F(s)){const a=s.base_price;return Math.round((a-A(s))*100/a)}return 0}),l=d(()=>s.has_variations?!0:!!s.variations?.length);return{isFetching:n,fetching:r,fetchError:e,product:s,title:u,link:_,images:b,isInStock:v,isActive:w,discountPercentage:p,hasVariations:l}},z=(t,n)=>{const{type:r,value:e}=n;let m;return e?(r==="percentage"?m=t*((100-e)/100):m=t-e,m>0?m:0):t},_e=t=>{const n=d(()=>t.product||{price:t.price||0,base_price:t.basePrice}),r=d(()=>{const{variations:o}=n.value;if(o){const y=A(n.value);for(let L=0;L<o.length;L++)if(A({...n.value,...o[L]})>y)return!0}return!1}),e=d(()=>{const o=A(n.value),y=$.value;return y&&(!y.min_amount||o>y.min_amount)?z(o,y):o}),m=d(()=>{if(F(n.value))return n.value.base_price;const o=A(n.value);return o>e.value?o:0}),s=d(()=>t.installmentsOption||ee.value||{max_number:1}),u=d(()=>{if(s.value.max_number<=1)return 1;const o=s.value.min_installment||5,y=Math.floor(e.value/o);return Math.min(y,s.value.max_number)}),_=d(()=>s.value.monthly_interest||0),b=d(()=>{if(u.value>=2){if(!_.value)return e.value/u.value;const o=_.value/100;return e.value*o/(1-(1+o)**-u.value)}return 0}),v=d(()=>{const o=t.discountOption||te.value;return o&&(!o.min_amount||o.min_amount<=e.value)&&(!t.isAmountTotal||o.apply_at==="total")?o:{}}),w=d(()=>{const{label:o}=v.value;return o?o.includes(" ")?o:`via ${o}`:""}),p=d(()=>z(e.value,v.value)),l=d(()=>{if(t.loyaltyPointsProgram)return t.loyaltyPointsProgram;const o=ne.value;if(o){const y=Object.keys(o);for(let L=0;L<y.length;L++){const V=o[y[L]];if(V?.earn_percentage&&V.earn_percentage>0)return V}}return{ratio:0}}),a=d(()=>l.value.min_subtotal_to_earn||0),k=d(()=>l.value.name||""),C=d(()=>l.value.earn_percentage||0),P=d(()=>C.value*l.value.ratio),H=d(()=>P.value>=1?e.value*(P.value/100):0);return{hasVariedPrices:r,salePrice:e,comparePrice:m,installmentsObject:s,installmentsNumber:u,monthlyInterest:_,installmentValue:b,discountObject:v,discountLabel:w,priceWithDiscount:p,pointsProgramObject:l,pointsMinPrice:a,pointsProgramName:k,earnPointsPercentage:C,cashbackPercentage:P,cashbackValue:H}},fe=E({__name:"Prices",props:{isBig:{type:Boolean},isLiteral:{type:Boolean},hasCashback:{type:Boolean,default:!0},hasPriceOptions:{type:Boolean,default:!0},product:{},price:{},basePrice:{},isAmountTotal:{type:Boolean},installmentsOption:{},discountOption:{},loyaltyPointsProgram:{}},setup(t,{expose:n}){n();const r=t,{hasVariedPrices:e,salePrice:m,comparePrice:s,cashbackPercentage:u,cashbackValue:_,installmentsNumber:b,monthlyInterest:v,installmentValue:w,priceWithDiscount:p,discountLabel:l}=_e(r),a={props:r,hasVariedPrices:e,salePrice:m,comparePrice:s,cashbackPercentage:u,cashbackValue:_,installmentsNumber:b,monthlyInterest:v,installmentValue:w,priceWithDiscount:p,discountLabel:l};return Object.defineProperty(a,"__isScriptSetup",{enumerable:!1,value:!0}),a}}),ge={key:0,class:"text-base-500 mr-1 [font-size:87%]"},ve={key:0},be={key:1},pe={key:0},ye={key:0,class:"relative z-10"},ke=["data-tooltip"],Pe=g("i",{class:"i-arrow-uturn-left mr-1"},null,-1),xe={class:"font-medium"},we=g("small",null," cashback",-1),Ce={key:0},Oe={key:0},Ie={key:1},Le={key:2},Se={key:0},Ae={key:0},Ve={key:1};function je(t,n,r,e,m,s){const u=M("Fade");return i(),c("div",{class:B(["text-base-600 [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]",r.isBig?"text-lg":null]),"data-prices":""},[e.comparePrice?(i(),c("span",ge,[r.isLiteral?(i(),c("small",ve,h("De "))):f("",!0),g("s",null,h(t.$money(e.comparePrice)),1),r.isLiteral?(i(),c("small",be,h(" Por"))):f("",!0)])):f("",!0),g("strong",{class:B(["inline-block text-base-800",r.isBig?"text-5xl block":null])},[e.hasVariedPrices?(i(),c("small",pe,h("A partir de "))):f("",!0),S(" "+h(t.$money(e.salePrice)),1)],2),x(u,{slide:"down"},{default:I(()=>[e.cashbackValue&&r.hasCashback?(i(),c("div",ye,[g("span",{"data-tooltip":"Receba $1 de volta".replace("$1",t.$percentage(e.cashbackPercentage))},[Pe,g("span",xe,h(t.$money(e.cashbackValue)),1),we],8,ke)])):f("",!0)]),_:1}),x(u,{slide:"down"},{default:I(()=>[e.installmentValue&&r.hasPriceOptions?(i(),c("div",Ce,[r.isLiteral?(i(),c("small",Oe,h("Até "))):f("",!0),S(" "+h(e.installmentsNumber)+"x ",1),r.isLiteral?(i(),c("small",Ie,h(" De "))):f("",!0),g("span",null,h(t.$money(e.installmentValue)),1),!e.monthlyInterest&&r.isLiteral?(i(),c("small",Le,h("Sem juros"))):f("",!0)])):f("",!0)]),_:1}),x(u,{slide:"down"},{default:I(()=>[e.priceWithDiscount<e.salePrice&&r.hasPriceOptions?(i(),c("div",Se,[e.discountLabel?f("",!0):(i(),c("small",Ae,h("A partir de "))),g("span",null,h(t.$money(e.priceWithDiscount)),1),e.discountLabel?(i(),c("small",Ve,h(` ${e.discountLabel}`),1)):f("",!0)])):f("",!0)]),_:1})],2)}const Be=N(fe,[["render",je]]),De=E({__name:"ProductCard",props:{product:{},productId:{},headingTag:{default:"h3"}},setup(t,{expose:n}){n();const r=t,{product:e,title:m,link:s,images:u,isInStock:_,isActive:b,discountPercentage:v,hasVariations:w}=he({product:r.product,productId:r.productId}),p=O(null),l=ae(p),a=O(!1);re(l,()=>{a.value=!0});const k={props:r,product:e,title:m,link:s,images:u,isInStock:_,isActive:b,discountPercentage:v,hasVariations:w,card:p,isHovered:l,wasHoveredOnce:a,get addProductToCart(){return X},Prices:Be};return Object.defineProperty(k,"__isScriptSetup",{enumerable:!1,value:!0}),k}}),Ne=["data-sku"],Ee={class:"aspect-square p-2 motion-safe:group-hover:scale-110 transition-transform"},Me={class:"relative w-full h-full bg-white rounded overflow-hidden group-hover:rounded-none"},Te={key:1,class:"w-full h-full bg-gradient-to-br from-base-50/20 to-base-100"},ze={key:0,class:"uno-bm03rg"},qe={class:"relative flex flex-col grow justify-between p-4 group-hover:backdrop-blur-md bg-white/40 z-10"},Fe={class:"pt-2"},Qe={key:0},We={key:1,class:"ui-badge bg-warning-100 text-warning-700"},He=g("i",{class:"i-plus-20-solid mr-0.5"},null,-1);function Re(t,n,r,e,m,s){const u=M("AImg");return i(),c("article",{ref:"card","data-sku":e.product.sku,class:"relative h-full max-w-[350px] mx-auto py-3 group"},[(i(),j(T(e.link?"ALink":"span"),{href:e.link,class:"flex flex-col h-full rounded overflow-hidden group-hover:shadow group-hover:ring-1 ring-black/5"},{default:I(()=>[g("div",Ee,[g("div",Me,[e.images?.length?(i(),c(Q,{key:0},[x(u,{picture:e.images[0],alt:e.title,class:"absolute top-0 left-0 block w-full h-full object-cover"},null,8,["picture","alt"]),e.images[1]&&e.wasHoveredOnce?(i(),j(u,{key:0,picture:e.images[1],alt:e.title,class:"absolute top-0 left-0 block w-full h-full object-cover opacity-0 group-hover:opacity-100 transition-opacity motion-safe:duration-300 text-transparent z-10"},null,8,["picture","alt"])):f("",!0)],64)):(i(),c("div",Te))])]),e.discountPercentage?(i(),c("span",ze,[S(" -"),g("strong",null,h(e.discountPercentage),1),S("% ")])):f("",!0),g("div",qe,[(i(),j(T(r.headingTag),{class:B(["ui-link no-underline line-clamp-2",[e.isActive?"text-base-700":"text-base-500",e.link?"group-hover:underline group-hover:text-primary":null]])},{default:I(()=>[S(h(e.title),1)]),_:1},8,["class"])),g("div",Fe,[e.isActive?(i(),c("div",Qe,[x(e.Prices,{product:e.product},null,8,["product"])])):(i(),c("span",We,h(e.isInStock?"Inativo":"Sem estoque"),1))]),e.isActive&&!e.hasVariations?(i(),c("button",{key:0,class:"uno-3suct9 ui-btn-sm ui-btn-primary",onClick:n[0]||(n[0]=G(_=>e.addProductToCart(e.product),["prevent"]))},[He,S(" "+h("Adicionar ao carrinho"))])):f("",!0)])]),_:1},8,["href"]))],8,Ne)}const Ge=N(De,[["render",Re]]),Je=E({__name:"ProductShelf",props:{collectionId:{},searchQuery:{},sort:{},title:{},titleLink:{},isShuffle:{type:Boolean},limit:{},page:{},products:{}},async setup(t,{expose:n}){n();const r=t,{title:e,titleLink:m,fetching:s,products:u}=me(r),_={props:r,title:e,titleLink:m,fetching:s,products:u,Carousel:Y,CarouselControl:Z,ProductCard:Ge};return Object.defineProperty(_,"__isScriptSetup",{enumerable:!1,value:!0}),_}}),Ke={class:"ui-section"},Ue={key:0,class:"max-w-prose mx-auto text-center mb-2"},Xe={class:"ui-text-brand text-3xl"},Ye={key:1,class:"text-base-700"},Ze={class:"text-3xl lg:text-2xl leading-none text-primary lg:opacity-0 group-hover/shelf:opacity-90 transition-opacity"};function $e(t,n,r,e,m,s){const u=M("ALink");return i(),c("section",Ke,[e.title?(i(),c("div",Ue,[g("h2",Xe,[e.titleLink?(i(),j(u,{key:0,href:e.titleLink,class:"ui-link"},{default:I(()=>[S(h(e.title),1)]),_:1},8,["href"])):(i(),c("span",Ye,h(e.title),1))])])):f("",!0),x(e.Carousel,{class:"group/shelf"},{controls:I(()=>[J(g("div",Ze,[x(e.CarouselControl,{class:"!top-1/2 !-left-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5","is-prev":""}),x(e.CarouselControl,{class:"!top-1/2 !-right-4 w-12 h-12 bg-transparent lg:bg-white/80 lg:hover:bg-primary-300/60 rounded-full lg:shadow-sm lg:ring-1 ring-black/5"})],512),[[K,e.products.length>2]])]),default:I(()=>[(i(!0),c(Q,null,U(e.products,_=>(i(),c("li",{key:_._id,class:"basis-1/2 md:basis-1/3 lg:basis-1/4 shrink-0"},[x(e.ProductCard,{product:_},null,8,["product"])]))),128))]),_:1})])}const ot=N(Je,[["render",$e]]);export{ot as default};