cloudcommerce 2.7.4 → 2.8.7

package/ecomplus-stores/barradoce/functions/ssr/public/robots.txt

@@ -1,5 +1,6 @@
 User-agent: *
 Allow: /
+Disallow: /s/
 Disallow: /app/
 Disallow: /admin/
 Disallow: /_api/

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

@@ -7,6 +7,7 @@
   >
     <ALink
       :href="href"
+      prefetch="visible"
       :class="hasHeader
         ? 'lg:col-span-3 sm:order-last [&_img]:max-w-full sm:[&_img]:max-w-none'
           + ' [&_img]:aspect-video sm:[&_img]:aspect-[2.5] [&_img]:object-cover'
@@ -22,13 +23,13 @@
       <Component
         v-if="parsedTitle"
         :is="headingTag"
-        class="ui-title mt-1"
+        class="mt-1 ui-title"
       >
         {{ parsedTitle }}
       </Component>
       <p
         v-if="parsedSubtitle"
-        class="text-base-800 mt-4 text-lg font-medium uppercase
+        class="mt-4 text-lg font-medium uppercase text-base-800
         md:mt-6 lg:text-xl"
       >
         {{ parsedSubtitle }}
@@ -36,9 +37,10 @@
       <ALink
         v-if="parsedButtonText"
         :href="buttonLink"
-        class="ui-btn-lg ui-btn-contrast mt-7 min-w-[150px] md:mt-10"
+        :prefetch="href ? 'hover' : 'visible'"
+        class="mt-7 min-w-[150px] ui-btn-lg ui-btn-contrast md:mt-10"
       >
-        <i class="i-tag-chevron-fill mr-1"></i>
+        <i class="mr-1 i-tag-chevron-fill"></i>
         {{ parsedButtonText }}
       </ALink>
     </div>

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

@@ -12,28 +12,26 @@
             class="aspect-[3/2] w-full max-w-[600px] rounded object-cover"
           />
         </a>
-        <div class="prose grow pt-5">
-          <small class="text-base-500 font-semibold uppercase">Blog</small>
+        <div class="grow pt-5 prose">
+          <small class="font-semibold uppercase text-base-500">Blog</small>
           <a :href="`/posts/${featured.slug}`" class="not-prose">
-            <h1 class="ui-title mb-4 mt-2">
+            <h1 class="mb-4 mt-2 ui-title">
               {{ featured.title }}
             </h1>
           </a>
-          <p class="text-xl">
-            {{ featured.description }}
-          </p>
-          <span v-if="featured.date" class="text-base-600 mr-4">
-            {{ featured.date }}
+          <p class="text-xl" v-html="featured.description"></p>
+          <span v-if="featured.date" class="mr-4 text-base-600">
+            {{ formatDate(featured.date) }}
           </span>
           <em v-if="featured.author" class="text-base-600">
             --- {{ featured.author }}
           </em>
-          <div class="not-prose mt-5">
+          <div class="mt-5 not-prose">
             <a
               :href="`/posts/${featured.slug}`"
               class="ui-btn-lg ui-btn-primary"
             >
-              <i class="i-chevron-right mr-1"></i>
+              <i class="mr-1 i-chevron-right"></i>
               {{ $t.i19seeMore }}
             </a>
           </div>
@@ -48,13 +46,13 @@
                 :picture="{ url: post.thumbnail, size: '750x500' }"
                 class="aspect-[3/2] w-full rounded object-cover"
               />
-              <div class="text-base-700 px-3 pt-4">
-                <h3 class="text-base-800 mb-1 text-xl font-medium">
+              <div class="px-3 pt-4 text-base-700">
+                <h3 class="mb-1 text-xl font-medium text-base-800">
                   {{ post.title }}
                 </h3>
-                <p>{{ post.description }}</p>
-                <small v-if="post.date" class="text-base-500 mt-1 block">
-                  {{ post.date }}
+                <p v-html="post.description"></p>
+                <small v-if="post.date" class="mt-1 block text-base-500">
+                  {{ formatDate(post.date) }}
                 </small>
               </div>
             </a>
@@ -73,6 +71,7 @@
 </template>
 
 <script setup lang="ts">
+import { formatDate } from '@ecomplus/utils';
 import Pagination from '~/components/Pagination.vue';
 
 export interface Props {

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

@@ -3,9 +3,9 @@
     <section class="bg-base-50">
       <div class="flex flex-wrap items-center
         justify-center gap-6 ui-section lg:gap-12">
-        <a href="/">
+        <ALink href="/">
           <slot name="logo" />
-        </a>
+        </ALink>
         <div class="flex items-center gap-2">
           <i class="m-0 bg-success-400 text-3xl i-shield-check-solid"></i>
           <span class="text-base text-base-600">

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

@@ -42,7 +42,6 @@
       text-center text-xs md:flex md:text-left">
       <div class="mb-3 md:mb-0">
         @ {{ new Date().getFullYear() }} {{ $settings.corporateName }}
-        {{ $settings.address ? `/ ${$settings.address}` : '' }}
         / {{ $settings.docNumber }}
       </div>
       <ALink href="https://www.ecomplus.io/" class="italic text-[#37003c]">

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

@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-base-100 relative z-20">
-    <div class="container mx-auto px-3 py-1 lg:w-2/3">
+  <div class="relative z-20 bg-base-100">
+    <div class="container mx-auto px-3 py-1 lg:w-4/5 xl:w-2/3">
       <Carousel :autoplay="countValidSlides > 1 ? 7000 : undefined">
         <li
           v-for="(slide, i) in slides"
@@ -16,20 +16,20 @@
             <span
               v-if="parsedContents[i]"
               v-html="parsedContents[i]"
-              class="text-base-800 prose text-sm"
+              class="text-sm text-base-800 prose"
             ></span>
           </ALink>
         </li>
         <template #controls>
           <div
             v-show="countValidSlides > 1"
-            class="text-base-400 text-xl leading-none"
+            class="text-xl leading-none text-base-400"
           >
             <CarouselControl
-              class="bg-base-100 hover:text-base-700 pr-2"
+              class="bg-base-100 pr-2 hover:text-base-700"
               is-prev
             />
-            <CarouselControl class="bg-base-100 hover:text-base-700 pl-2" />
+            <CarouselControl class="bg-base-100 pl-2 hover:text-base-700" />
           </div>
         </template>
       </Carousel>

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

@@ -6,6 +6,7 @@
   >
     <ALink
       :href="link"
+      prefetch="visible"
       class="flex h-full flex-col overflow-hidden rounded bg-white
       ring-black/5 group-hover:shadow group-hover:ring-1"
     >
@@ -20,7 +21,7 @@
               class="absolute left-0 top-0 block size-full object-cover"
             />
             <AImg
-              v-if="images[1] && wasHoveredOnce"
+              v-if="!isMobile && images[1] && wasHoveredOnce"
               :picture="images[1]"
               :alt="title"
               class="absolute left-0 top-0 z-10 block size-full
@@ -30,7 +31,7 @@
           </span>
           <div
             v-else
-            class="from-base-50/20 to-base-100 size-full bg-gradient-to-br"
+            class="size-full bg-gradient-to-br from-base-50/20 to-base-100"
           />
         </div>
       </div>
@@ -54,7 +55,7 @@
         </div>
         <component
           :is="headingTag"
-          class="ui-link line-clamp-2 text-sm no-underline"
+          class="line-clamp-2 text-sm no-underline ui-link"
           :class="[
             isActive ? 'text-base-700' : 'text-base-500',
             link ? 'group-hover:text-primary group-hover:underline' : null,
@@ -64,13 +65,15 @@
         </component>
         <button
           v-if="isActive && !hasVariations"
-          class="lg:-top-13 primary absolute -top-12 left-1/2 z-10
-          -ml-7 size-14 rounded-full p-2 text-3xl leading-none
-          opacity-75 hover:opacity-100 lg:left-4 lg:ml-0"
+          class="absolute -top-11 right-1 z-10 flex items-center gap-1
+          rounded-full px-3 py-2 leading-none
+          opacity-75 primary hover:opacity-100
+          md:-top-4 lg:-top-9 lg:left-4 lg:right-auto lg:ml-0"
           @click.stop.prevent="addProductToCart(product)"
           :aria-label="$t.i19addToCart"
         >
-          <i class="i-shopping-bag-3-line"></i>
+          <i class="m-0 text-xl i-shopping-bag-3-line md:text-2xl"></i>
+          <span class="text-sm md:text-base">{{ $t.i19add }}</span>
         </button>
       </div>
     </ALink>
@@ -78,12 +81,13 @@
 </template>
 
 <script setup lang="ts">
-import { watchOnce, useElementHover } from '@vueuse/core';
+import { useElementHover } from '@vueuse/core';
 import { addProductToCart } from '@@sf/state/shopping-cart';
 import {
   type Props as UseProductCardProps,
   useProductCard,
 } from '@@sf/composables/use-product-card';
+import { isMobile } from '@@sf/sf-lib';
 import Prices from '~/components/Prices.vue';
 
 export type Props = UseProductCardProps & {
@@ -106,7 +110,8 @@ const {
 const card = ref<HTMLElement | null>(null);
 const isHovered = useElementHover(card);
 const wasHoveredOnce = ref(false);
-watchOnce(isHovered, () => {
+const unwatch = watch(isHovered, () => {
   wasHoveredOnce.value = true;
+  unwatch();
 });
 </script>

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

@@ -49,35 +49,19 @@
             <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
-          md:flex-nowrap lg:mt-4 lg:flex-wrap">
+        <div class="mt-5 flex flex-wrap items-center gap-2 lg:mt-4">
           <QuantitySelector
             v-model="quantity"
             :min="product.min_quantity"
             :max="product.quantity"
-            class="rounded border-base-100 md:mr-5
-            lg:mb-2 lg:mr-auto lg:border-2"
+            class="rounded lg:[&_button]:w-9 lg:[&_input]:w-10"
           />
-          <CheckoutLink
-            class="grow text-center ui-btn-lg ui-btn-primary"
-            to="checkout"
-            :cart-item="{
-              product_id: product._id,
-              quantity,
-              variation_id: variationId || undefined,
-            }"
-            :data-tooltip="!isSkuSelected ? $t.i19chooseProductDetailsToBuy : null"
-            @click="checkVariation"
-          >
-            <i class="mr-1 i-chevron-double-right"></i>
-            {{ $t.i19buy }}
-          </CheckoutLink>
           <button
-            class="grow ui-btn-lg ui-btn-contrast"
+            class="min-h-12 max-w-72 grow text-center ui-btn-lg ui-btn-primary"
             @click.prevent="addToCart"
             :data-tooltip="!isSkuSelected ? $t.i19chooseProductDetailsToBuy : null"
           >
-            {{ $t.i19addToCart }}
+            {{ $t.i19buy }}
           </button>
         </div>
         <div class="mt-6 flex flex-col
@@ -118,7 +102,6 @@ import type { SectionPreviewProps } from '@@sf/state/use-cms-preview';
 import { useUrlSearchParams } from '@vueuse/core';
 import { addProductToCart } from '@@sf/state/shopping-cart';
 import { useProductCard } from '@@sf/composables/use-product-card';
-import CheckoutLink from '@@sf/components/CheckoutLink.vue';
 import QuantitySelector from '@@sf/components/QuantitySelector.vue';
 import Prices from '~/components/Prices.vue';
 import ImagesGallery from '~/components/ImagesGallery.vue';

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

@@ -1,7 +1,7 @@
 <template>
   <section class="ui-section">
     <div v-if="title" class="mx-auto mb-4 max-w-prose text-center">
-      <h2>
+      <h3>
         <ALink
           :href="titleLink"
           class="text-3xl text-base-700 ui-text-brand"
@@ -9,7 +9,7 @@
         >
           {{ title }}
         </ALink>
-      </h2>
+      </h3>
     </div>
     <Component
       :is="isGrid ? 'ul' : 'Carousel'"

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

@@ -47,13 +47,14 @@
           >
             <strong>{{ productCount }}</strong> {{ $t.i19itemsFound }}
           </p>
-          <a
+          <ALink
             v-if="productCount > products.length"
+            prefetch="visible"
             :href="getSearchUrl(term)"
             class="w-auto whitespace-nowrap text-center ui-btn ui-btn-primary"
           >
             {{ $t.i19seeAll }}
-          </a>
+          </ALink>
         </div>
         <div class="lg:col-span-2">
           <nav>

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

@@ -56,6 +56,7 @@
             </span>
           </button>
           <Listbox
+            v-if="!fixedParams?.sort"
             v-model="sortOption"
             as="div"
             class="relative text-sm text-base-800"

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

@@ -1,37 +1,59 @@
 <template>
-  <footer class="border-base-100 bg-base-50 mt-auto w-screen border-t py-2">
+  <footer class="mt-auto w-screen border-t border-base-100 bg-base-50 py-2">
     <div class="ui-section">
-      <div class="border-base-200 flex flex-wrap justify-between
-        gap-y-5 border-b pb-7 sm:gap-x-10 lg:flex-nowrap">
+      <div class="flex flex-wrap justify-between gap-y-5
+        border-b border-base-200 pb-7 sm:gap-x-10 lg:flex-nowrap">
         <div class="shrink">
           <slot name="logo" />
           <div v-if="$settings.description" class="prose">
             <p>{{ $settings.description }}</p>
           </div>
-          <div class="text-base-500 flex gap-2">
+          <div class="flex gap-2 text-base-500">
             <span v-for="(href, network) in socialNetworks" :key="network">
               <SocialNetworkLink
                 :network="network"
-                class="hover:text-primary p-1"
+                class="p-1 hover:text-primary"
               >
                 <template v-if="network === 'whatsapp'" #append>
-                  <span class="text-base-600 ml-1 text-sm">
+                  <span class="ml-1 text-sm text-base-600">
                     {{ $settings.whatsapp }}
                   </span>
                 </template>
               </SocialNetworkLink>
             </span>
           </div>
-          <div v-if="$settings.phone" class="text-base-700 mt-3">
+          <div v-if="$settings.phone" class="mt-3 text-base-700">
             <ALink
               v-if="$settings.phone"
               :href="`tel:${$settings.phone.replace(/\D/g, '')}`"
               class="hover:text-primary"
             >
-              <i class="i-phone mr-0.5"></i>
+              <i class="mr-0.5 i-phone-fill"></i>
               {{ $settings.phone }}
             </ALink>
+            <template v-if="$settings.metadata?.inStorePhone">
+              compras no site
+              <br>
+              <ALink
+                v-if="$settings.metadata.inStorePhone"
+                :href="`tel:${$settings.metadata.inStorePhone.replace(/\D/g, '')}`"
+                class="hover:text-primary"
+              >
+                <i class="mr-0.5 i-phone-fill"></i>
+                {{ $settings.metadata.inStorePhone }}
+              </ALink>
+              loja física
+            </template>
           </div>
+          <ALink
+            href="https://www.google.com/maps/place/BarraDoce/@-23.6066724,-46.6755503,17z/data=!3m1!4b1!4m6!3m5!1s0x94ce50a900141d31:0xea26c6af36a48871!8m2!3d-23.6066724!4d-46.6729754!16s%2Fg%2F11b6cq3vt3"
+            class="mt-2 inline-block font-medium text-primary-700
+            hover:text-primary"
+          >
+            <i class="mr-1 i-map-line"></i>
+            {{ $settings.address }}
+            <i class="ml-0.5 bg-primary-300 i-external-link-line"></i>
+          </ALink>
         </div>
         <div
           v-if="categories?.length"
@@ -40,13 +62,12 @@
           <div class="mb-2.5 text-lg font-medium">
             {{ categoriesColTitle || $t.i19categories }}
           </div>
-          <ul
-            class="text-sm"
-            :class="categories.length > 4
-              ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
-          >
+          <ul class="space-y-1.5 text-sm">
             <li v-for="({ name, slug }, i) in categories" :key="`c-${i}`">
-              <a :href="`/${slug}`" class="text-base-600 ui-link">
+              <a
+                :href="`/${slug}`"
+                class="block text-base-600 ui-link md:truncate"
+              >
                 {{ name }}
               </a>
             </li>
@@ -64,16 +85,13 @@
           <div class="mb-2.5 text-lg font-medium">
             {{ pagesColTitle || $t.i19institutional }}
           </div>
-          <ul
-            class="text-sm"
-            :class="pageLinks.length > 5
-              ? 'grid md:grid-cols-2 gap-x-5 gap-y-1.5' : 'space-y-1.5'"
-          >
+          <ul class="space-y-1.5 text-sm uppercase">
             <li v-for="({ title, href }, i) in pageLinks" :key="`p-${i}`">
               <ALink
                 :href="href"
                 class="ui-link"
-                :class="title === 'Blog' ? 'text-base-900' : 'text-base-600'"
+                :class="title === 'Blog'
+                  ? 'text-base-900 font-bold' : 'text-base-600'"
               >
                 {{ title }}
               </ALink>

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

@@ -20,7 +20,7 @@
               class="text-3xl transition-colors"
               :class="[
                 isSidenavOpen ? 'i-close' : 'i-menu-line',
-                isMounted ? 'text-base-600' : 'text-base-400 animate-pulse',
+                isMounted ? 'text-base-600' : 'animate-pulse text-base-400',
               ]"
             ></i>
           </button>
@@ -28,8 +28,8 @@
         <div class="lg:grow" :class="isSticky ? '[&_img]:max-w-[170px]' : null">
           <slot name="logo" />
         </div>
-        <div class="text-base-800 flex basis-1/4
-          items-center justify-end gap-3 px-2 lg:gap-4">
+        <div class="flex basis-1/4 items-center
+          justify-end gap-3 px-2 text-base-800 lg:gap-4">
           <form action="/s" method="get" class="relative h-12">
             <label for="HeaderSearch" class="sr-only">
               {{ $t.i19searchProducts }}
@@ -48,10 +48,11 @@
                 name="q"
                 v-model.trim="searchTerm"
                 :placeholder="$t.i19searchProducts"
-                class="border-secondary-200 from-secondary-50/10
-                to-secondary-50/80 text-secondary-700
-                placeholder:text-secondary-700/60 h-12 w-72 rounded-md
-                bg-gradient-to-br py-2.5 pl-4 pr-10 shadow-sm lg:w-[400px]"
+                class="h-12 w-72
+                rounded-md border-secondary-200
+                bg-gradient-to-br from-secondary-50/10 to-secondary-50/80 py-2.5
+                pl-4 pr-10 text-secondary-700 shadow-sm
+                placeholder:text-secondary-700/60 lg:w-[400px]"
                 @focusin="isSearchOpen = true"
               />
             </div>
@@ -59,23 +60,51 @@
               <button
                 type="submit"
                 :aria-label="$t.i19searchProducts"
-                class="hover:text-primary flex h-12
-                flex-col justify-center lg:px-2.5"
+                class="flex h-12 flex-col
+                justify-center hover:text-primary lg:px-2.5"
                 :class="isSearchOpen
                   ? 'text-primary px-2.5'
                   : 'text-secondary-600'"
                 @click="toggleSearch"
               >
                 <span class="sr-only">{{ $t.i19search }}</span>
-                <i class="i-search-3-line mb-0 size-7"></i>
+                <i class="mb-0 size-7 i-search-3-line"></i>
               </button>
             </span>
           </form>
+          <a
+            href="/p/lancamentos"
+            class="group hidden items-center gap-x-1.5 lg:flex"
+          >
+            <i class="m-0 size-7 text-base-600 transition-all
+              i-announcement-line group-hover:scale-110
+              group-hover:text-primary group-active:scale-125"></i>
+            <span class="hidden text-sm leading-none text-base-500
+              decoration-primary/25 decoration-2 ui-link
+              group-hover:decoration-primary lg:block">
+              <span class="xl:hidden">Novos</span>
+              <span class="hidden xl:inline">Novidades</span>
+            </span>
+          </a>
+          <a
+            href="/p/promocoes"
+            class="group hidden items-center gap-x-1.5 md:flex"
+          >
+            <i class="m-0 size-7 animate-pulse text-primary-500
+              transition-all i-tag-2-line group-hover:scale-110
+              group-hover:text-primary group-active:scale-125"></i>
+            <span class="hidden text-sm leading-none text-primary-600
+              decoration-primary/25 decoration-2 ui-link
+              group-hover:decoration-primary lg:block">
+              <span class="xl:hidden">Promo</span>
+              <span class="hidden xl:inline">Ofertas</span>
+            </span>
+          </a>
           <AccountMenu v-if="!isMobile" class="hidden sm:block">
             <template #button="{ open }">
               <i
-                class="text-base-600 i-user-2-line hover:text-primary
-                size-7 hover:scale-110 active:scale-125"
+                class="size-7 text-base-600 i-user-2-line
+                hover:scale-110 hover:text-primary active:scale-125"
                 :class="open ? 'text-base-800 scale-110' : null"
               ></i>
             </template>
@@ -84,14 +113,14 @@
             :href="$settings.cartUrl || '/app/'"
             :aria-label="$t.i19openCart"
             @click.prevent="isCartOpen = !isCartOpen"
-            class="text-primary-500 group relative"
+            class="group relative text-primary-500"
             role="button"
           >
-            <i class="i-shopping-bag-3-fill group-hover:text-primary size-7
-              group-hover:scale-110 group-active:scale-125"></i>
+            <i class="size-7 i-shopping-bag-3-fill group-hover:scale-110
+              group-hover:text-primary group-active:scale-125"></i>
             <span
               v-if="cartTotalItems"
-              class="ui-badge-pill-sm absolute -right-1.5 -top-1"
+              class="absolute -right-1.5 -top-1 ui-badge-pill-sm"
             >
               {{ cartTotalItems }}
             </span>