cloudcommerce 2.5.1 → 2.6.1

package/.vscode/settings.json

@@ -1,4 +1,7 @@
 {
+  "editor.tabSize": 2,
+  "files.eol": "\n",
+  "files.insertFinalNewline": true,
   "editor.quickSuggestions": {
     "strings": true
   },
@@ -16,7 +19,7 @@
   "tailwindCSS.experimental.configFile": {
     "packages/storefront/tailwind.config.cjs": "packages/**",
     "store/functions/ssr/tailwind.config.cjs": "store/**",
-    "ecomplus-stores/barra-doce/functions/ssr/tailwind.config.cjs": "ecomplus-stores/barra-doce/**"
+    "ecomplus-stores/barradoce/functions/ssr/tailwind.config.cjs": "ecomplus-stores/barradoce/**"
   },
   "typescript.tsdk": "node_modules/typescript/lib",
   "eslint.validate": [

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.6.1](https://github.com/ecomplus/cloud-commerce/compare/v2.6.0...v2.6.1) (2024-02-24)
+
+
+### Bug Fixes
+
+* **storefront:** Add `searchEngine` as custom prop of SSR `usePageSections` composable ([74f3078](https://github.com/ecomplus/cloud-commerce/commit/74f307807406d30a891990c5a6da44d125e8e9dc))
+* **storefront:** Better handle search engine middlewares passing search options object ([daf2084](https://github.com/ecomplus/cloud-commerce/commit/daf2084203561402ef72493d7840c7081eabac6e))
+* **storefront:** New optional `searchEngine` on search modal and showcase composables ([65c6e21](https://github.com/ecomplus/cloud-commerce/commit/65c6e21b3503227be2cb11d6c40558d480b0f72e))
+* **storefront:** Only sync middlewares (no promises) for `SearchEngine` fetch ([4fa8965](https://github.com/ecomplus/cloud-commerce/commit/4fa89658c409b90203ac76f8ee54cfbefdca44a3))
+* **storefront:** Properly support `SearchEngine` extendability with new `addMiddleware` method ([0142368](https://github.com/ecomplus/cloud-commerce/commit/01423686f3c915da63a3e476521d7cf275d67dd0))
+
+## [2.6.0](https://github.com/ecomplus/cloud-commerce/compare/v2.5.1...v2.6.0) (2024-02-22)
+
+
+### Features
+
+* **storefront:** New `<Spinner>` basic component ([b83b594](https://github.com/ecomplus/cloud-commerce/commit/b83b594c133635413829bf4fca15b9177187cf3c))
+* **storefront:** New `getShippingDeadline` and `getShippingPrice` methods on calculator composable ([4dc32e1](https://github.com/ecomplus/cloud-commerce/commit/4dc32e1c2a3d1b235c6d46f91602a263b393d432))
+
+
+### Bug Fixes
+
+* **storefront:** Bump Astro to latest v4.4.1 and VueUse v10.8 ([e01fb6d](https://github.com/ecomplus/cloud-commerce/commit/e01fb6d2d307c93fbdf34e413b4b7bad5f939a5c))
+* **storefront:** Exporting `isFetching` state from shipping calculator composable ([9266d0c](https://github.com/ecomplus/cloud-commerce/commit/9266d0c8d4a5c7dd6ffa99b44170988891e7257a))
+* **storefront:** Prevent "=undefined" params on modules (and other internals) fetch ([a4f594e](https://github.com/ecomplus/cloud-commerce/commit/a4f594ea40269c6ef8b22cb166c3298fa877023d))
+* **storefront:** Receiving `zipCode` ref instead of input on shipping calculator composable ([813dcb1](https://github.com/ecomplus/cloud-commerce/commit/813dcb16943f922ac52995778c42840d96195d67))
+
 ### [2.5.1](https://github.com/ecomplus/cloud-commerce/compare/v2.5.0...v2.5.1) (2024-02-19)
 
 

package/ecomplus-stores/barradoce/.devcontainer/devcontainer.json

@@ -2,13 +2,13 @@
   "postCreateCommand": "npm i && npm i --prefix=functions/ssr",
   "waitFor": "postCreateCommand",
   "portsAttributes": {
-    "3000": {
+    "4321": {
       "label": "Application",
       "onAutoForward": "openPreview"
     }
   },
   "forwardPorts": [
-    3000
+    4321
   ],
   "postAttachCommand": {
     "Server": "npm run dev"
@@ -16,7 +16,8 @@
   "customizations": {
     "codespaces": {
       "openFiles": [
-        "functions/ssr/src/main/Home.astro"
+        "functions/ssr/src/components/ShopHeader.vue",
+        "functions/ssr/src/components/ProductCard.vue"
       ]
     },
     "vscode": {
@@ -24,7 +25,12 @@
         "astro-build.astro-vscode",
         "vue.volar",
         "bradlc.vscode-tailwindcss"
-      ]
+      ],
+      "settings": {
+        "files.autoSave": "afterDelay",
+        "files.autoSaveDelay": 5000,
+        "files.autoSaveWhenNoErrors": true
+      }
     }
   }
 }

package/ecomplus-stores/barradoce/.vscode/settings.json

@@ -1,4 +1,7 @@
 {
+  "editor.tabSize": 2,
+  "files.eol": "\n",
+  "files.insertFinalNewline": true,
   "editor.quickSuggestions": {
     "strings": true
   },

package/ecomplus-stores/barradoce/functions/many/package.json

@@ -15,8 +15,8 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/feeds": "^2.5.0",
-    "@cloudcommerce/firebase": "^2.5.0",
-    "@cloudcommerce/passport": "^2.5.0"
+    "@cloudcommerce/feeds": "^2.6.0",
+    "@cloudcommerce/firebase": "^2.6.0",
+    "@cloudcommerce/passport": "^2.6.0"
   }
 }

package/ecomplus-stores/barradoce/functions/ssr/package.json

@@ -19,16 +19,16 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/api": "^2.5.0",
-    "@cloudcommerce/firebase": "^2.5.0",
-    "@cloudcommerce/ssr": "^2.5.0",
+    "@cloudcommerce/api": "^2.6.0",
+    "@cloudcommerce/firebase": "^2.6.0",
+    "@cloudcommerce/ssr": "^2.6.0",
     "@headlessui/vue": "^1.7.18",
     "micromark": "^4.0.0"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^2.5.0",
-    "@cloudcommerce/storefront": "^2.5.0",
-    "@cloudcommerce/types": "^2.5.0",
+    "@cloudcommerce/i18n": "^2.6.0",
+    "@cloudcommerce/storefront": "^2.6.0",
+    "@cloudcommerce/types": "^2.6.0",
     "@iconify-json/mingcute": "^1.1.16",
     "photoswipe": "^5.4.3"
   }

package/ecomplus-stores/barradoce/functions/ssr/src/components/CartSidebar.vue

@@ -2,7 +2,7 @@
   <aside class="flex h-screen flex-col bg-white">
     <header class="z-10 flex items-center justify-end gap-3
       px-6 py-4 shadow ring-1 ring-black/5">
-      <span class="text-base-600 text-right text-base font-medium">
+      <span class="text-right text-base font-medium text-base-600">
         {{ $t.i19myShoppingCart }}
       </span>
       <span class="min-w-[3rem] text-right">
@@ -11,18 +11,18 @@
         </span>
       </span>
     </header>
-    <article class="bg-base-50 grow overflow-y-auto">
+    <article class="grow overflow-y-auto bg-base-50">
       <div v-if="freeShippingFromValue" class="text-center text-sm">
         <div
           v-if="freeShippingFromValue > shoppingCart.subtotal"
-          class="secondary-subtle p-3"
+          class="p-3 secondary-subtle"
         >
           {{ $t.i19add$1ToEarn.replace('$1',
             $money(freeShippingFromValue - shoppingCart.subtotal)) }}
           <strong class="lowercase">{{ $t.i19freeShipping }}</strong>
         </div>
-        <div v-else class="bg-success-50 text-success-800 p-3">
-          <i class="text-success-900 i-check mr-1"></i>
+        <div v-else class="bg-success-50 p-3 text-success-800">
+          <i class="mr-1 text-success-900 i-check"></i>
           {{ $t.i19freeShippingFrom }} {{ $money(freeShippingFromValue) }}
         </div>
       </div>
@@ -39,19 +39,37 @@
         </div>
         <Prices :price="shoppingCart.subtotal" class="col-span-3 text-lg" />
       </div>
+      <div v-if="!hasShippingCalculator" class="my-2.5 text-right">
+        <a
+          href="#"
+          class="text-base-700 decoration-base-300 ui-link"
+          @click.prevent.stop="hasShippingCalculator = true"
+        >
+          {{ $t.i19calculateShipping }}
+          <i class="ml-1 text-base-500 i-truck-line"></i>
+        </a>
+      </div>
+      <Fade slide="down">
+        <ShippingCalculator
+          v-if="hasShippingCalculator"
+          :shipped-items="shoppingCart.items"
+          class="my-2.5 flex flex-wrap justify-end"
+          can-auto-submit
+        />
+      </Fade>
       <CheckoutLink
         to="checkout"
-        class="ui-btn-lg ui-btn-primary my-2.5 w-full text-right"
+        class="my-2.5 w-full text-right ui-btn-lg ui-btn-primary"
       >
-        <i class="i-check mr-2"></i>
+        <i class="mr-2 i-check"></i>
         {{ $t.i19checkout }}
       </CheckoutLink>
       <a
         href="#"
         @click.prevent="emit('close')"
-        class="text-base-500 ui-link hover:text-base-700 text-sm"
+        class="text-sm text-base-500 ui-link hover:text-base-700"
       >
-        <i class="i-arrow-right-line mr-1 rotate-180"></i>
+        <i class="mr-1 rotate-180 i-arrow-right-line"></i>
         {{ $t.i19continueShopping }}
       </a>
     </footer>
@@ -64,6 +82,8 @@ import { shoppingCart, totalItems } from '@@sf/state/shopping-cart';
 import CheckoutLink from '@@sf/components/CheckoutLink.vue';
 import Prices from '~/components/Prices.vue';
 import CartItem from '~/components/CartItem.vue';
+import ShippingCalculator from '~/components/ShippingCalculator.vue';
 
 const emit = defineEmits(['close']);
+const hasShippingCalculator = ref(false);
 </script>

package/ecomplus-stores/barradoce/functions/ssr/src/components/HeroSlider.vue

@@ -54,7 +54,5 @@ export type Props = {
 
 defineProps<Props>();
 const isMounted = ref(false);
-onMounted(() => {
-  isMounted.value = true;
-});
+onMounted(() => { isMounted.value = true; });
 </script>

package/ecomplus-stores/barradoce/functions/ssr/src/components/ProductDetails.vue

@@ -1,14 +1,24 @@
 <template>
-  <section class="ui-section relative grid grid-cols-1 items-start
-    gap-5 md:gap-4 lg:grid-cols-4 2xl:gap-6">
+  <section class="relative grid grid-cols-1 items-start gap-x-5
+    ui-section lg:grid-cols-4 lg:gap-x-4 2xl:gap-x-6">
     <div class="w-full lg:col-span-3">
       <template v-if="product.pictures?.length">
-        <ImagesGallery :pictures="product.pictures" />
+        <ImagesGallery :pictures="product.pictures" class="mb-5" />
       </template>
     </div>
-    <div class="lg:sticky-header:translate-y-24 top-0 py-4
-      transition-transform lg:sticky">
-      <h1 class="text-secondary-900 ui-text-brand text-lg">
+    <div class="top-0 pt-4 transition-transform
+      lg:sticky lg:pb-4 lg:sticky-header:translate-y-24">
+      <ul class="flax-wrap mb-3 flex gap-2">
+        <li class="flex items-center gap-1 py-1 font-normal ui-badge-pill">
+          <i class="m-0 text-secondary-700 i-arrow-path-rounded-square-16-solid"></i>
+          <span class="whitespace-nowrap text-sm">devolução grátis</span>
+        </li>
+        <li class="flex items-center gap-1 py-1 font-normal ui-badge-pill">
+          <i class="m-0 text-secondary-700 i-building-storefront-solid"></i>
+          <span class="whitespace-nowrap text-sm">desde 1984</span>
+        </li>
+      </ul>
+      <h1 class="text-lg text-base-600 ui-text-brand">
         {{ title }}
       </h1>
       <div v-if="isActive" class="mt-5">
@@ -20,9 +30,9 @@
           class="my-4"
         />
         <Fade slide="down">
-          <div v-if="hasSkuSelectionAlert" class="ui-alert inline-block">
+          <div v-if="hasSkuSelectionAlert" class="inline-block ui-alert">
             {{ $t.i19selectVariationMsg }}
-            <i class="i-arrow-right-line ml-1 -rotate-90"></i>
+            <i class="ml-1 -rotate-90 i-arrow-right-line"></i>
           </div>
         </Fade>
         <div class="mt-5 flex flex-wrap items-center gap-x-4 gap-y-2
@@ -31,11 +41,11 @@
             v-model="quantity"
             :min="product.min_quantity"
             :max="product.quantity"
-            class="border-base-100 rounded md:mr-5
+            class="rounded border-base-100 md:mr-5
             lg:mb-2 lg:mr-auto lg:border-2"
           />
           <CheckoutLink
-            class="ui-btn-lg ui-btn-primary grow text-center"
+            class="grow text-center ui-btn-lg ui-btn-primary"
             to="checkout"
             :cart-item="{
               product_id: product._id,
@@ -45,17 +55,24 @@
             :data-tooltip="!isSkuSelected ? $t.i19chooseProductDetailsToBuy : null"
             @click="checkVariation"
           >
-            <i class="i-chevron-double-right mr-1"></i>
+            <i class="mr-1 i-chevron-double-right"></i>
             {{ $t.i19buy }}
           </CheckoutLink>
           <button
-            class="ui-btn-lg ui-btn-contrast grow"
+            class="grow ui-btn-lg ui-btn-contrast"
             @click.prevent="addToCart"
             :data-tooltip="!isSkuSelected ? $t.i19chooseProductDetailsToBuy : null"
           >
             {{ $t.i19addToCart }}
           </button>
         </div>
+        <div class="mt-6 rounded border-2
+          border-base-50 border-t-secondary-100 p-4 lg:mt-4">
+          <ShippingCalculator
+            :shipped-items="[{ ...product, quantity }]"
+            has-label
+          />
+        </div>
       </div>
     </div>
     <div class="w-full lg:col-span-3">
@@ -74,6 +91,7 @@ import QuantitySelector from '@@sf/components/QuantitySelector.vue';
 import Prices from '~/components/Prices.vue';
 import ImagesGallery from '~/components/ImagesGallery.vue';
 import SkuSelector from '~/components/SkuSelector.vue';
+import ShippingCalculator from '~/components/ShippingCalculator.vue';
 
 export interface Props {
   product?: Products;

package/ecomplus-stores/barradoce/functions/ssr/src/components/SearchModal.vue

@@ -36,21 +36,21 @@
       <section
         v-if="!isFetching
           && (searchHistory.length || productCount > products.length)"
-        class="bg-base-100/80 grid grid-cols-1 items-center
-        gap-4 p-4 backdrop-blur-md
+        class="grid grid-cols-1 items-center gap-4
+        bg-base-100/80 p-4 backdrop-blur-md
         md:grid-cols-2 md:rounded-b lg:mt-5 lg:grid-cols-3 lg:rounded"
       >
         <div class="flex items-center justify-end gap-4 md:order-2">
           <p
             v-if="productCount > 1"
-            class="text-base-900 text-right text-sm lowercase"
+            class="text-right text-sm lowercase text-base-900"
           >
             <strong>{{ productCount }}</strong> {{ $t.i19itemsFound }}
           </p>
           <a
             v-if="productCount > products.length"
             :href="getSearchUrl(term)"
-            class="ui-btn ui-btn-primary w-auto whitespace-nowrap text-center"
+            class="w-auto whitespace-nowrap text-center ui-btn ui-btn-primary"
           >
             {{ $t.i19seeAll }}
           </a>
@@ -65,13 +65,13 @@
               >
                 <a
                   :href="getSearchUrl(term)"
-                  class="text-base-700 ui-link text-sm font-normal"
+                  class="text-sm font-normal text-base-700 ui-link"
                 >
                   {{ term }}
                 </a>
               </li>
               <template #previous>
-                <i class="i-clock m-0" :aria-label="$t.i19searchAgain"></i>
+                <i class="m-0 i-clock" :aria-label="$t.i19searchAgain"></i>
               </template>
             </Carousel>
           </nav>
@@ -88,15 +88,18 @@ import {
 } from '@@sf/composables/use-search-modal';
 import { getSearchUrl } from '@@sf/sf-lib';
 import ProductShelf from '~/components/ProductShelf.vue';
+import middSearchEngine from '~/state/midd-search-engine';
 
 export interface Props extends UseSearchModalProps {}
 
 const props = defineProps<Props>();
 const {
   searchHistory,
+  searchEngine,
   isFetching,
   products,
   productCount,
   linkHits,
 } = useSearchModal(props);
+middSearchEngine(searchEngine);
 </script>

package/ecomplus-stores/barradoce/functions/ssr/src/components/SearchShowcase.vue

@@ -1,17 +1,17 @@
 <template>
   <section
     v-if="searchTerm"
-    class="text-base-700 ui-section-slim px-6 text-center text-xl lowercase"
+    class="px-6 text-center text-xl lowercase text-base-700 ui-section-slim"
     :class="hasFiltersBar ? 'relative z-[14] -mb-4' : 'mb-0'"
   >
     {{ $t.i19searchingFor }}
-    <h1 class="text-base-800 inline font-bold italic">
+    <h1 class="inline font-bold italic text-base-800">
       {{ searchTerm }}
     </h1>
   </section>
   <div
     v-if="isFetching && !products.length"
-    class="ui-section relative min-h-[300px]"
+    class="relative min-h-[300px] ui-section"
   >
     <Skeleton class="absolute top-0 w-full px-5" is-bold is-large />
   </div>
@@ -19,13 +19,13 @@
     <Fade>
       <section
         v-if="hasFiltersBar"
-        class="to-base-100 ui-section-slim sticky-header:translate-y-16
-        lg:sticky-header:translate-y-24 sticky top-0
-        z-[12] flex items-center justify-between
-        rounded-b bg-white/80 px-6 py-4 shadow-sm
-        backdrop-blur-sm transition-transform"
+        class="sticky top-0 z-[12]
+        flex items-center justify-between
+        rounded-b bg-white/80 to-base-100 px-6
+        py-4 shadow-sm backdrop-blur-sm transition-transform ui-section-slim
+        sticky-header:translate-y-16 lg:sticky-header:translate-y-24"
       >
-        <strong class="text-base-700 font-medium lowercase">
+        <strong class="font-medium lowercase text-base-700">
           <template v-if="resultMeta.count > 1">
             {{ resultMeta.count }}
             <span class="hidden lg:inline">{{ $t.i19itemsFound }}</span>
@@ -34,23 +34,23 @@
         </strong>
         <div class="flex items-center gap-4">
           <span class="hidden text-xl leading-none md:block">
-            <i class="text-base-600 i-adjustments-horizontal m-0"></i>
+            <i class="m-0 text-base-600 i-adjustments-horizontal"></i>
           </span>
           <button
             @click="isFiltersOpen = !isFiltersOpen"
-            class="ui-btn-sm ui-btn-secondary relative"
+            class="relative ui-btn-sm ui-btn-secondary"
           >
             <span class="hidden md:inline">
               {{ $t.i19filterProducts }}
             </span>
             <span class="md:hidden">
-              <i class="i-adjustments-horizontal mr-1"></i>
+              <i class="mr-1 i-adjustments-horizontal"></i>
               {{ $t.i19filterOut }}
             </span>
             <span
               v-if="filtersCount"
-              class="outline-3 outline-secondary/80 ui-badge-pill-sm
-              absolute -right-1.5 -top-1 outline"
+              class="outline-3 absolute -right-1.5
+              -top-1 outline outline-secondary/80 ui-badge-pill-sm"
             >
               {{ filtersCount }}
             </span>
@@ -58,14 +58,14 @@
           <Listbox
             v-model="sortOption"
             as="div"
-            class="text-base-800 relative text-sm"
+            class="relative text-sm text-base-800"
           >
             <ListboxButton :id="$useId('ss')" class="ui-btn-sm ui-btn-secondary">
               {{ $t.i19sort }}
             </ListboxButton>
             <Fade>
-              <ListboxOptions class="divide-base-100
-                absolute right-0 mt-2 divide-y rounded bg-white
+              <ListboxOptions class="absolute
+                right-0 mt-2 divide-y divide-base-100 rounded bg-white
                 shadow ring-1 ring-black/5 focus:outline-none">
                 <ListboxOption
                   v-for="({ label, value }) in sortOptions"
@@ -139,6 +139,7 @@ import Drawer from '@@sf/components/Drawer.vue';
 import Pagination from '~/components/Pagination.vue';
 import ProductShelf from '~/components/ProductShelf.vue';
 import SearchFilters from '~/components/SearchFilters.vue';
+import middSearchEngine from '~/state/midd-search-engine';
 
 export interface Props extends UseSearchShowcaseProps {}
 
@@ -157,6 +158,7 @@ const {
   sortOptions,
   sortOption,
 } = useSearchShowcase({ ...props, showcase });
+middSearchEngine(searchEngine);
 if (import.meta.env.SSR) {
   await fetching;
 }

package/ecomplus-stores/barradoce/functions/ssr/src/components/ShippingCalculator.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="max-w-sm">
+    <form
+      class="group"
+      @submit.prevent="() => !isFetching && fetchShippingServices()"
+    >
+      <label
+        :for="zipInputId"
+        :class="hasLabel
+          ? 'lg:text-sm text-base-700 flex flex-wrap gap-x-5 items-center mb-1.5'
+          : 'sr-only'"
+      >
+        <span>{{ $t.i19calculateShipping }}</span>
+        <ALink
+          v-if="hasLabel && $settings.countryCode === 'BR'"
+          href="https://buscacepinter.correios.com.br/app/endereco/index.php"
+          class="text-xs font-normal text-base-500 ui-link"
+        >
+          Não sei meu CEP
+          <i class="mr-1 opacity-50 i-arrow-top-right-on-square"></i>
+        </ALink>
+      </label>
+      <div class="relative max-w-52">
+        <input
+          ref="zipInput"
+          :id="zipInputId"
+          type="tel"
+          :readonly="isFetching"
+          v-model.trim="zipCode"
+          placeholder="12345-123"
+          class="w-full"
+          :class="isFetching && 'bg-base-50'"
+        />
+        <button
+          class="absolute inset-y-0 end-0 grid w-12
+          place-content-center text-xl
+          hover:text-primary group-focus-within:text-primary"
+          :class="isMounted && !shippingServices.length && zipCode.length > 1
+            ? 'text-primary' : `${hasLabel ? 'text-base-400' : 'text-base-600'}`"
+          :aria-label="$t.i19calculateShipping"
+        >
+          <Spinner v-if="isFetching" class="size-5" />
+          <i v-else class="m-0 i-truck-line"></i>
+        </button>
+      </div>
+    </form>
+    <Fade slide="down">
+      <ul
+        v-if="!isFetching && shippingServices.length"
+        class="mt-2 grow divide-y divide-base-200
+        rounded border border-base-100 bg-base-50/50 px-3 py-1"
+      >
+        <li
+          v-for="({ label, shipping_line: shipping }, i) in shippingServices"
+          :key="`${zipCode}-${i}`"
+          class="py-2.5 text-base-800 md:text-sm"
+        >
+          <div class="flex flex-wrap items-center">
+            <div class="grow">
+              <strong class="mr-2 font-semibold">
+                {{ getShippingDeadline(shipping) }}
+              </strong>
+              <span class="mr-2">{{ getShippingPrice(shipping) }}</span>
+            </div>
+            <small class="text-base-600">{{ label }}</small>
+          </div>
+          <small v-if="shipping.delivery_instructions" class="text-base-700">
+            {{ shipping.delivery_instructions }}
+          </small>
+        </li>
+      </ul>
+    </Fade>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  type Props as UseShippingCalculatorProps,
+  useShippingCalculator,
+} from '@@sf/composables/use-shipping-calculator';
+import { useId } from '@@sf/sf-lib';
+import Spinner from '@@sf/components/Spinner.vue';
+
+export interface Props extends UseShippingCalculatorProps {
+  hasLabel?: boolean;
+}
+
+const props = defineProps<Props>();
+const zipCode = ref('');
+const zipInputId = useId('ZipInput');
+const {
+  isFetching,
+  fetchShippingServices,
+  shippingServices,
+  getShippingDeadline,
+  getShippingPrice,
+} = useShippingCalculator({ ...props, zipCode });
+const isMounted = ref(false);
+onMounted(() => { isMounted.value = true; });
+</script>

package/ecomplus-stores/barradoce/functions/ssr/src/main/content/Sections.astro

@@ -1,5 +1,6 @@
 ---
 import { usePageSections } from '@@sf/layouts/use-page-main';
+import { SearchEngine } from '@@sf/state/search-engine';
 import ContentClearfix from '@@sf/components/ContentClearfix.vue';
 import BannersGrid from '~/components/BannersGrid.astro';
 import Breadcrumbs from '~/components/Breadcrumbs.vue';
@@ -11,6 +12,7 @@ import ProductSpecifications from '~/components/ProductSpecifications.vue';
 import SearchShowcase from '~/components/SearchShowcase.vue';
 import PageTitle from '~/components/PageTitle.vue';
 import ContentEntry from '~/components/ContentEntry.vue';
+import middSearchEngine from '~/state/midd-search-engine';
 
 const { routeContext } = Astro.locals;
 const { sections } = await usePageSections({
@@ -19,6 +21,7 @@ const { sections } = await usePageSections({
     if (type === 'c:foo') return { props: { ...content, foo: 'bar' } };
     return { props: content };
   },
+  searchEngine: middSearchEngine(new SearchEngine()),
 });
 const { cmsContent } = routeContext;
 /* `apiContext` is surelly set here (from Main.astro)

package/ecomplus-stores/barradoce/functions/ssr/src/state/midd-search-engine.ts

@@ -0,0 +1,19 @@
+import type { SearchEngineInstance } from '@@sf/state/search-engine';
+
+export default (searchEngine: SearchEngineInstance) => {
+  searchEngine.addMiddleware((searchOptions) => {
+    if (!searchOptions.term) return;
+    if (!searchOptions.params) searchOptions.params = {};
+    let { sort } = searchOptions.params;
+    if (
+      (typeof sort === 'string' || typeof sort === 'object')
+      && (sort as string[]).includes('-available')
+    ) return;
+    searchOptions.params.sort = '-available,-in_stock';
+    if (sort) {
+      if (Array.isArray(sort)) sort = sort.join(',');
+      searchOptions.params.sort += `,${sort}`;
+    }
+  });
+  return searchEngine;
+};

package/ecomplus-stores/barradoce/functions/with-apps/package.json

@@ -15,8 +15,8 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/events": "^2.5.0",
-    "@cloudcommerce/firebase": "^2.5.0",
-    "@cloudcommerce/modules": "^2.5.0"
+    "@cloudcommerce/events": "^2.6.0",
+    "@cloudcommerce/firebase": "^2.6.0",
+    "@cloudcommerce/modules": "^2.6.0"
   }
 }

package/ecomplus-stores/barradoce/package.json

@@ -26,10 +26,10 @@
     "url": "https://github.com/ecomplus/cloud-commerce/issues"
   },
   "dependencies": {
-    "@cloudcommerce/cli": "^2.5.0"
+    "@cloudcommerce/cli": "^2.6.0"
   },
   "devDependencies": {
-    "@cloudcommerce/eslint": "^2.5.0",
+    "@cloudcommerce/eslint": "^2.6.0",
     "husky": "^9.0.10",
     "lint-staged": "^15.2.2"
   }