cloudcommerce 0.33.0 → 0.33.2

package/.github/workflows/test-apps.yml

@@ -104,11 +104,11 @@ jobs:
             ${{ steps.npm-paths.outputs.LIB_PATH }}
             ${{ steps.npm-paths.outputs.BIN_PATH }}
             ~/.npm-global/bin
-          key: ${{ runner.os }}-npm-globals-firebase-tools-12.6.2
+          key: ${{ runner.os }}-npm-globals-firebase-tools-12.9.0
 
       - if: steps.npm-g-cache.outputs.cache-hit != 'true'
         shell: bash
-        run: npm install -g firebase-tools@12.6.2
+        run: npm install -g firebase-tools@12.9.0
 
       - name: Initialize Firebase emulators
         shell: bash

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 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.
 
+### [0.33.2](https://github.com/ecomplus/cloud-commerce/compare/v0.33.1...v0.33.2) (2023-11-21)
+
+
+### Features
+
+* **storefront:** Export `cartEvents` from shopping cart state to handle item add/remove events ([57bdcc8](https://github.com/ecomplus/cloud-commerce/commit/57bdcc85aff78a41e67cc05ec8734f7683261315))
+* **storefront:** Parsing pageview, items and cart events to Meta Pixel ([0ace18a](https://github.com/ecomplus/cloud-commerce/commit/0ace18a2715ae06f5d81513e368fbf73efffefa4))
+* **storefront:** Update `useAnalytics` to emit shopping cart gtag events ([c1a600f](https://github.com/ecomplus/cloud-commerce/commit/c1a600f0970cf2687fc098b42030c43c52db7d10))
+
+
+### Bug Fixes
+
+* **storefront:** Identifying analytics item view on product page by list id ([cb2cbd2](https://github.com/ecomplus/cloud-commerce/commit/cb2cbd2378a74423f022cb641fab647b3e157c04))
+* **storefront:** Sen page view params on every analytics message payload ([98be05f](https://github.com/ecomplus/cloud-commerce/commit/98be05f5b4a2ef098efe69da4f9ced60eda2741c))
+
+### [0.33.1](https://github.com/ecomplus/cloud-commerce/compare/v0.33.0...v0.33.1) (2023-11-16)
+
+
+### Features
+
+* **storefront:** Add new `getGtagItem` method on `useAnalytics` state as reusable parser ([2f7cb99](https://github.com/ecomplus/cloud-commerce/commit/2f7cb99ccf37f9c0dfcd484068702e0e7291f0f6))
+* **storefront:** New `send-gtag-events` script, auto emit first pageview ([a888870](https://github.com/ecomplus/cloud-commerce/commit/a88887013901aa42fbf1722fd7a5c578a810c6ed))
+* **storefront:** New `state/use-analytics` module to send and watch events and retrieve session ([f2c10f5](https://github.com/ecomplus/cloud-commerce/commit/f2c10f5d0138755c9526b94f7d033de48123d89d))
+* **storefront:** Send page view analytics event on each view transitions "SPA" page load ([914aec4](https://github.com/ecomplus/cloud-commerce/commit/914aec4e07f9b954d2a5da803d1a2fc1dd01f4b3))
+* **storefront:** Typing analytics gtag events ([12d2325](https://github.com/ecomplus/cloud-commerce/commit/12d2325d4270b9f8233e4c854cccbd5c41098258))
+* **storefront:** Update `scripts/push-analytics-events` to handle GTM `dataLayer` if globally set ([058fe1d](https://github.com/ecomplus/cloud-commerce/commit/058fe1d4b3a6bb6c4a683282a1de1bfc3f0c58c9))
+* **storefront:** Update `useProductCard` composable to send view item gtag event ([f2dafd5](https://github.com/ecomplus/cloud-commerce/commit/f2dafd545471530f1e49f51147312aef169a4ad3))
+
+
+### Bug Fixes
+
+* **deps:** Update non-major dependencies ([#268](https://github.com/ecomplus/cloud-commerce/issues/268)) ([a2a2ebd](https://github.com/ecomplus/cloud-commerce/commit/a2a2ebdccb6153afb89b5df937ca0ea30fa16300))
+* **storefront:** Ensure async components hydration with `client:context` on first load ([782ba4a](https://github.com/ecomplus/cloud-commerce/commit/782ba4a0d4b0388e2081c1181393b7c252ce99fe))
+* **storefront:** Keep UTM on local storage and consider valid for 7 days ([b0b2d6e](https://github.com/ecomplus/cloud-commerce/commit/b0b2d6e33948798f8a564bc0ee9a0467a09f29d9))
+* **storefront:** Properly set page meta title and description from route state and store settings ([39f1ce4](https://github.com/ecomplus/cloud-commerce/commit/39f1ce4b0f8c20777770b0eba67d0e20d4d4f84e))
+* **storefront:** Update `<Carousel>` to properly handle partially fit slides ([86666f7](https://github.com/ecomplus/cloud-commerce/commit/86666f7451ebaa5be09df303b297f17b1ac7be58))
+
 ## [0.33.0](https://github.com/ecomplus/cloud-commerce/compare/v0.32.0...v0.33.0) (2023-11-09)
 
 

package/action.yml

@@ -145,11 +145,11 @@ runs:
           ${{ steps.npm-paths.outputs.LIB_PATH }}
           ${{ steps.npm-paths.outputs.BIN_PATH }}
           ~/.npm-global/bin
-        key: ${{ runner.os }}-npm-g-firebase-tools-12.6.2
+        key: ${{ runner.os }}-npm-g-firebase-tools-12.9.0
 
     - if: ${{ github.event_name == 'push' && steps.npm-g-cache.outputs.cache-hit != 'true' }}
       shell: bash
-      run: npm i --location=global firebase-tools@12.6.2
+      run: npm i --location=global firebase-tools@12.9.0
 
     - if: steps.npm-cache-many.outputs.cache-hit != 'true'
       name: Install codebase "many" dependencies

package/ecomplus-stores/barra-doce/.github/workflows/build-and-deploy.yml

@@ -24,7 +24,7 @@ jobs:
     if: |
       !contains(github.event.head_commit.message, '[skip ci]')
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - uses: ecomplus/cloud-commerce@main

package/ecomplus-stores/barra-doce/.github/workflows/calibreapp-image-actions.yml

@@ -16,7 +16,7 @@ jobs:
     name: calibreapp/image-actions
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Compress images
         uses: calibreapp/image-actions@main
         with:

package/ecomplus-stores/barra-doce/.vscode/settings.json

@@ -2,6 +2,9 @@
   "editor.quickSuggestions": {
     "strings": true
   },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
   "files.associations": {
     "*.css": "tailwindcss"
   },

package/ecomplus-stores/barra-doce/functions/many/package.json

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

package/ecomplus-stores/barra-doce/functions/ssr/content/extra-pages/terms.json

@@ -1,5 +1,5 @@
 {
-  "title": "Termos de serviço",
+  "title": "Privacidade e termos de serviço",
   "date": "",
   "meta_title": "",
   "meta_description": "",

package/ecomplus-stores/barra-doce/functions/ssr/content/pages/home.json

@@ -28,6 +28,26 @@
       "isShuffle": false,
       "limit": 12,
       "page": 1
+    },
+    {
+      "type": "product-shelf",
+      "collectionIdAndInfo": null,
+      "sort": "-sales",
+      "title": "Ingredientes que fazem a diferença",
+      "isHeadless": false,
+      "isShuffle": false,
+      "limit": 12,
+      "page": 3
+    },
+    {
+      "type": "product-shelf",
+      "collectionIdAndInfo": null,
+      "sort": "-created_at",
+      "title": "Fitas de Natal",
+      "isHeadless": false,
+      "isShuffle": false,
+      "limit": 12,
+      "page": 3
     }
   ]
 }

package/ecomplus-stores/barra-doce/functions/ssr/content/pages/products.json

@@ -5,7 +5,8 @@
     },
     {
       "type": "product-details",
-      "hasDescription": true
+      "hasDescription": true,
+      "hasSpecifications": true
     },
     {
       "type": "related-products"

package/ecomplus-stores/barra-doce/functions/ssr/content/settings.json

@@ -1,6 +1,5 @@
 {
   "domain": "barradoce.ecomplus.app",
-  "assetsPrefix": "https://s2-barradoce.b-cdn.net",
   "name": "BarraDoce",
   "description": "Loja de utensílios de confeitaria e acessórios de festa. Tudo o que precisa para fazer bolos, chocolates, biscoitos e muito mais.",
   "logo": "/img/uploads/logo-barradoce.webp",
@@ -28,6 +27,10 @@
     {
       "title": "Fale conosco",
       "href": "/pages/contato"
+    },
+    {
+      "title": "Privacidade e termos",
+      "href": "/p/terms"
     }
   ],
   "paymentMethods": [

package/ecomplus-stores/barra-doce/functions/ssr/package.json

@@ -17,16 +17,17 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/api": "^0.32.0",
-    "@cloudcommerce/firebase": "^0.32.0",
-    "@cloudcommerce/ssr": "^0.32.0",
+    "@cloudcommerce/api": "^0.33.1",
+    "@cloudcommerce/firebase": "^0.33.1",
+    "@cloudcommerce/ssr": "^0.33.1",
     "@headlessui/vue": "^1.7.16"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^0.32.0",
-    "@cloudcommerce/storefront": "^0.32.0",
-    "@cloudcommerce/types": "^0.32.0",
-    "@fontsource/croissant-one": "^5.0.9",
-    "@iconify-json/mingcute": "^1.1.9"
+    "@cloudcommerce/i18n": "^0.33.1",
+    "@cloudcommerce/storefront": "^0.33.1",
+    "@cloudcommerce/types": "^0.33.1",
+    "@fontsource/croissant-one": "^5.0.17",
+    "@iconify-json/mingcute": "^1.1.11",
+    "photoswipe": "^5.4.2"
   }
 }

package/ecomplus-stores/barra-doce/functions/ssr/public/robots.txt

@@ -2,5 +2,5 @@ User-agent: *
 Allow: /
 Disallow: /app/
 Disallow: /admin/
-Disallow: /api/
+Disallow: /_api/
 Disallow: /~*

package/ecomplus-stores/barra-doce/functions/ssr/src/assets/style.css

@@ -7,7 +7,7 @@ html {
 body {
   overflow-x: hidden;
 }
-a, button, button > * {
+a, button, button > *, [role=button], [role=button] > * {
   transition: background-color var(--transition),
     color var(--transition), border-color var(--transition),
     opacity var(--transition), transform var(--transition-fast);
@@ -20,13 +20,13 @@ a, button, button > * {
 
 [class*=ui-btn] {
   @apply not-prose inline-block text-base font-medium px-4 py-2 rounded
-  border-2 border-transparent focus:ring-1 active:ring-2;
+  border-2 border-transparent focus:ring-1 focus:ring-offset-1 active:ring-2;
 }
 .ui-btn-sm {
   @apply text-sm px-3 py-1.5 border-1;
 }
 .ui-btn-lg {
-  @apply text-lg md:text-xl font-bold px-6 py-2.5 active:ring-3;
+  @apply text-lg font-bold px-6 py-3 lg:text-base lg:py-2.5 active:ring-3;
 }
 .ui-btn-primary {
   @apply primary border-primary hover:primary-bold ring-primary/30;
@@ -60,6 +60,17 @@ a, button, button > * {
   @apply text-lg min-w-[1.75rem] px-2;
 }
 
-.ui-section {
+.ui-alert {
+  @apply bg-warning-100 text-warning-800 border-warning-200
+  border text-base rounded px-4 py-3;
+}
+
+[class*=ui-section] {
   @apply container 2xl:max-w-7xl mx-auto px-4 sm:px-2 my-6 md:my-8;
 }
+.ui-section {
+  @apply sm:px-2 my-6 md:my-8;
+}
+.ui-section-slim {
+  @apply my-3;
+}

package/ecomplus-stores/barra-doce/functions/ssr/src/components/AccountMenu.vue

@@ -7,9 +7,11 @@
     <div v-if="open">
       <span v-once>{{ initializeFirebaseAuth() }}</span>
     </div>
-    <MenuButton class="outline-none" :aria-label="$t.i19myAccount">
-      <slot name="button" v-bind="{ open }" />
-    </MenuButton>
+    <AccountLink role="button" @click.prevent>
+      <MenuButton class="outline-none" :aria-label="$t.i19myAccount">
+        <slot name="button" v-bind="{ open }" />
+      </MenuButton>
+    </AccountLink>
     <Fade>
       <MenuItems class="divide-base-100 absolute -right-8 mt-2
         w-56 divide-y rounded bg-white shadow

package/ecomplus-stores/barra-doce/functions/ssr/src/components/AccountPage.vue

@@ -0,0 +1,62 @@
+<template>
+  <article class="from-secondary-700 to-secondary-950 flex
+    min-h-screen w-full flex-col justify-center bg-gradient-to-br">
+    <div class="mx-auto p-4">
+      <section class="ui-section text-center">
+        <a href="/" class="text-base-200 hover:text-white">
+          <i class="i-arrow-right-line mr-1 rotate-180"></i>
+          {{ $t.i19goToStore }}
+        </a>
+      </section>
+      <section class="overflow-hidden rounded-md
+        shadow-md ring-4 ring-black/10">
+        <LoginForm v-bind="{ loginLinkActionUrl }">
+          <template #head>
+            <div class="mb-5 text-center">
+              <a href="/" class="inline-block">
+                <slot name="logo" />
+              </a>
+            </div>
+          </template>
+        </LoginForm>
+      </section>
+      <nav v-if="$settings.serviceLinks?.length" class="ui-section px-0">
+        <ul class="mx-auto flex max-w-sm flex-wrap items-center
+          justify-evenly gap-4 px-3">
+          <li
+            v-for="({ title, href }, i) in $settings.serviceLinks"
+            :key="`s-${i}`"
+          >
+            <ALink :href="href" class="ui-link text-base-200 hover:text-white">
+              {{ title }}
+            </ALink>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { isLogged } from '@@sf/state/customer-session';
+import LoginForm from '~/components/LoginForm.vue';
+
+let loginLinkActionUrl: string | null = null;
+if (!import.meta.env.SSR) {
+  const { location } = window;
+  const returnUrl = new URLSearchParams(location.search).get('return_url');
+  if (!returnUrl) {
+    const url = new URL(location.toString());
+    url.pathname = '/app/';
+    url.hash = `#${location.pathname.replace('/app/', '/')}`;
+    loginLinkActionUrl = url.toString();
+  }
+  watch(isLogged, () => {
+    if (isLogged.value) {
+      location.href = (returnUrl || loginLinkActionUrl) as string;
+    }
+  }, {
+    immediate: true,
+  });
+}
+</script>

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

@@ -15,7 +15,10 @@
     >
       <slot name="picture" />
     </ALink>
-    <div v-if="hasHeader" class="lg:col-span-2 p-8 lg:p-12 xl:ps-32 mb-3 md:mb-0">
+    <div
+      v-if="hasHeader"
+      class="mb-3 p-8 md:mb-0 lg:col-span-2 lg:p-12 xl:ps-32"
+    >
       <Component
         v-if="parsedTitle"
         :is="headingTag"
@@ -25,14 +28,14 @@
       </Component>
       <p
         v-if="parsedSubtitle"
-        class="mt-4 md:mt-6 text-base-800 uppercase font-medium text-lg lg:text-xl"
+        class="text-base-800 mt-4 text-lg font-medium uppercase md:mt-6 lg:text-xl"
       >
         {{ parsedSubtitle }}
       </p>
       <ALink
         v-if="parsedButtonText"
         :href="buttonLink"
-        class="ui-btn-lg ui-btn-contrast min-w-[150px] mt-7 md:mt-10"
+        class="ui-btn-lg ui-btn-contrast mt-7 min-w-[150px] md:mt-10"
       >
         <i class="i-tag-chevron-fill mr-1"></i>
         {{ parsedButtonText }}

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Breadcrumbs.astro

@@ -0,0 +1,44 @@
+---
+import {
+  type Props as UseBreadcrumbsProps,
+  useBreadcrumbs,
+} from '@@sf/composables/use-breadcrumbs';
+
+export interface Props extends UseBreadcrumbsProps {}
+
+const { breadcrumbs, inlineJSONLd } = await useBreadcrumbs(Astro.props);
+---
+
+{breadcrumbs.length > 0 &&
+  <section class={`ui-section-slim ${breadcrumbs.length > 1 ? '' : 'hidden lg:block'}`}>
+    <nav aria-label="Breadcrumb" class="w-full overflow-hidden text-lg md:text-sm">
+      <ol class="flex items-center gap-1 text-base-600">
+        <li>
+          <a href="/" class="hover:text-primary">
+            <span class="sr-only"> Home </span>
+            <i class="i-home"></i>
+          </a>
+        </li>
+        {breadcrumbs.map(({ name, link }, i) => 
+          <>
+            {i + 1 < breadcrumbs.length
+              ? <li class="text-base-300">
+                  <i class="i-chevron-right"></i>
+                </li>
+                <li class="whitespace-nowrap">
+                  <a href={link} class="hover:text-primary">{name}</a>
+                </li>
+              : <li class="hidden lg:block text-base-300">
+                  <i class="i-chevron-right"></i>
+                </li>
+                <li class="hidden lg:block whitespace-nowrap overflow-hidden text-ellipsis">
+                  <span class="text-base-500">{name}</span>
+                </li>
+            }
+          </>
+        )}
+      </ol>
+    </nav>
+    {inlineJSONLd && <script type="application/ld+json" set:html={inlineJSONLd} />}
+  </section>
+}

package/ecomplus-stores/barra-doce/functions/ssr/src/components/CartItem.vue

@@ -1,30 +1,30 @@
 <template>
   <article class="relative bg-white shadow-sm">
-    <ALink :href="link" class="flex items-center gap-5 p-4 group">
+    <ALink :href="link" class="group flex items-center gap-5 p-4">
       <AImg
         v-if="image"
         :picture="image"
         :alt="title"
-        class="w-20 h-20 object-cover"
+        class="h-20 w-20 object-cover"
       />
-      <p class="py-2 flex-auto text-sm text-base-700
-        group-hover:text-base-900 group-hover:underline">
+      <p class="text-base-700 group-hover:text-base-900 flex-auto py-2
+        text-sm group-hover:underline">
         {{ title }}
       </p>
     </ALink>
     <button
       v-if="cartItem._id"
       @click.stop="removeCartItem(cartItem._id)"
-      class="absolute top-0 right-0 p-2 opacity-70 hover:opacity-100"
+      class="absolute right-0 top-0 p-2 opacity-70 hover:opacity-100"
       :aria-label="$t.i19remove"
     >
-      <span class="w-5 h-5 text-sm leading-none flex flex-col justify-center
-        rounded-full border-3 text-danger-800 border-danger-700/30">
-        <i class="i-close my-0 mx-auto"></i>
+      <span class="border-3 text-danger-800 border-danger-700/30 flex h-5 w-5 flex-col
+        justify-center rounded-full text-sm leading-none">
+        <i class="i-close mx-auto my-0"></i>
       </span>
     </button>
-    <div class="flex justify-between items-center border-t-2 border-base-100">
-      <div class="border-r-2 border-base-100">
+    <div class="border-base-100 flex items-center justify-between border-t-2">
+      <div class="border-base-100 border-r-2">
         <QuantitySelector
           v-model="cartItem.quantity"
           :min="cartItem.min_quantity"
@@ -36,7 +36,7 @@
         :price="finalPrice"
         :has-cashback="false"
         :has-price-options="false"
-        class="px-4 py-2.5 text-[95%] text-right"
+        class="px-4 py-2.5 text-right text-[95%]"
       />
     </div>
   </article>

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

@@ -1,8 +1,8 @@
 <template>
-  <aside class="flex flex-col h-screen bg-white">
-    <header class="px-6 py-4 flex justify-end items-center gap-3
-      shadow ring-1 ring-black/5 z-10">
-      <span class="text-right text-base text-base-600 font-medium">
+  <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">
         {{ $t.i19myShoppingCart }}
       </span>
       <span class="min-w-[3rem] text-right">
@@ -11,35 +11,38 @@
         </span>
       </span>
     </header>
-    <article class="grow overflow-y-auto bg-base-50">
-      <div v-if="freeShippingFromValue" class="text-sm text-center">
+    <article class="bg-base-50 grow overflow-y-auto">
+      <div v-if="freeShippingFromValue" class="text-center text-sm">
         <div
           v-if="freeShippingFromValue > shoppingCart.subtotal"
-          class="p-3 secondary-subtle"
+          class="secondary-subtle p-3"
         >
           {{ $t.i19add$1ToEarn.replace('$1',
             $money(freeShippingFromValue - shoppingCart.subtotal)) }}
           <strong class="lowercase">{{ $t.i19freeShipping }}</strong>
         </div>
-        <div v-else class="p-3 bg-success-50 text-success-800">
+        <div v-else class="bg-success-50 text-success-800 p-3">
           <i class="text-success-900 i-check mr-1"></i>
           {{ $t.i19freeShippingFrom }} {{ $money(freeShippingFromValue) }}
         </div>
       </div>
-      <ul class="px-4 pt-4 pb-2">
+      <ul class="px-4 pb-2 pt-4">
         <li v-for="(item, i) in shoppingCart.items" :key="i">
           <CartItem :item="item" class="mb-3" />
         </li>
       </ul>
     </article>
-    <footer class="px-5 pt-4 pb-3 ring-2 ring-black/5 z-10">
-      <div class="grid grid-cols-5 gap-3 items-center text-right">
+    <footer class="z-10 px-5 pb-3 pt-4 ring-2 ring-black/5">
+      <div class="grid grid-cols-5 items-center gap-3 text-right">
         <div class="col-span-2">
           {{ $t.i19subtotal }}
         </div>
         <Prices :price="shoppingCart.subtotal" class="col-span-3 text-lg" />
       </div>
-      <CheckoutLink class="ui-btn-lg ui-btn-primary w-full text-right my-2.5">
+      <CheckoutLink
+        to="checkout"
+        class="ui-btn-lg ui-btn-primary my-2.5 w-full text-right"
+      >
         <i class="i-check mr-2"></i>
         {{ $t.i19checkout }}
       </CheckoutLink>
@@ -48,7 +51,7 @@
         @click.prevent="emit('close')"
         class="ui-link text-base-500 hover:text-base-700 text-sm"
       >
-        <i class="i-arrow-left mr-1"></i>
+        <i class="i-arrow-right-line mr-1 rotate-180"></i>
         {{ $t.i19continueShopping }}
       </a>
     </footer>

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

@@ -0,0 +1,33 @@
+<template>
+  <article class="flex min-h-screen flex-col justify-end">
+    <section class="grow">
+      <article id="storefront-app"></article>
+    </section>
+    <section class="bg-base-50 mt-4 lg:mt-8">
+      <nav class="ui-section-slim">
+        <ul class="mt-6 flex flex-wrap justify-center gap-6 lg:gap-8">
+          <li
+            v-for="({ title, href }, i) in $settings.serviceLinks"
+            :key="`s-${i}`"
+          >
+            <ALink :href="href" target="blank" class="ui-link text-base-700">
+              {{ title }}
+              <i class="bg-base-300 i-arrow-top-right-on-square ml-0.5"></i>
+            </ALink>
+          </li>
+        </ul>
+      </nav>
+      <FooterStamps :stamps="footerStamps" />
+    </section>
+  </article>
+</template>
+
+<script setup lang="ts">
+import FooterStamps from '~/components/FooterStamps.vue';
+
+export interface Props {
+  footerStamps: InstanceType<typeof FooterStamps>['$props']['stamps'];
+}
+
+defineProps<Props>();
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Collapse.vue

@@ -0,0 +1,19 @@
+<template>
+  <details class="[&_i]:open:rotate-180">
+    <summary role="button" class="text-base-700 hover:text-base-800
+      [&>i]:hover:text-primary my-4 list-none text-2xl
+      font-medium lowercase md:my-5">
+      <i class="i-chevron-down mr-1"></i>
+      <span>{{ title }}</span>
+    </summary>
+    <slot />
+  </details>
+</template>
+
+<script setup lang="ts">
+export interface Props {
+  title: string;
+}
+
+defineProps<Props>();
+</script>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/DocDescription.vue

@@ -0,0 +1,28 @@
+<template>
+  <section v-if="html" class="ui-section">
+    <Collapse :title="title || $t.i19description" open>
+      <ContentClearfix :html="html" />
+    </Collapse>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type {
+  Products,
+  Categories,
+  Brands,
+  Collections,
+} from '@cloudcommerce/api/types';
+import ContentClearfix from '@@sf/components/ContentClearfix.vue';
+import Collapse from '~/components/Collapse.vue';
+
+export interface Props {
+  apiDoc?: Partial<Products | Categories | Brands | Collections>;
+  title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  apiDoc: () => globalThis.$storefront.apiContext?.doc as Products,
+});
+const html = computed(() => props.apiDoc.body_html || props.apiDoc.body_text);
+</script>