feat: code improvements for adding messages per section

components/minicart/Cart.tsx

@@ -131,4 +131,3 @@ function Cart() {
 }
 
 export default Cart;
-

components/minicart/FreeShippingBar.tsx

@@ -4,19 +4,41 @@ import { useCart } from "deco-sites/std/commerce/vtex/hooks/useCart.ts";
 import { formatPrice } from "deco-sites/fashion/sdk/format.ts";
 
 export interface Props {
+  /**
+   * @title Free shipping bar calculation value
+   * @description Amount used for free shipping rule calculation
+   */
   value?: number;
+  messages?: Messages;
 }
 
-function FreeShippingBar({ value }: Props) {
-  const { cart } = useCart();
+export interface Messages {
+  /**
+   * @title Default message
+   * @description Default message displayed when I don't have free shipping
+   */
+  defaultMessage: string;
 
-  const locale = cart.value?.clientPreferencesData.locale;
-  const currencyCode = cart.value?.storePreferencesData.currencyCode;
+  /**
+   * @title Free shipping message
+   * @description Message displayed when I have free shipping
+   */
+  freeShippingMessage: string;
+}
+
+function FreeShippingBar(
+  { value, messages }: Props,
+) {
+  const { cart } = useCart();
 
   const total = cart.value?.totalizers.find((item) => item.id === "Items");
 
-  if (!total || !value) return null;
+  if (!total || !value || !messages) return null;
 
+  const { defaultMessage, freeShippingMessage } = messages;
+
+  const locale = cart.value?.clientPreferencesData.locale;
+  const currencyCode = cart.value?.storePreferencesData.currencyCode;
   const progress = ((total?.value / 100) / value) * 100;
 
   return (
@@ -31,10 +53,17 @@ function FreeShippingBar({ value }: Props) {
             strokeWidth={0}
           />
           {progress < 100
-            ? `Faltam R$ ${
-              formatPrice(value - total?.value / 100, currencyCode!, locale)
-            } para o frete grátis`
-            : "Parabéns! Você tem frete grátis"}
+            ? defaultMessage.replace(
+              "{value}",
+              String(
+                formatPrice(
+                  (value - total?.value) / 100,
+                  currencyCode!,
+                  locale,
+                ),
+              ),
+            )
+            : freeShippingMessage}
         </div>
         <div
           className="bg-[#D4DBD7] h-2.5 rounded-full"

import_map.json

@@ -1,5 +1,6 @@
 {
   "imports": {
+    "carlosviniciusananias/fashion/": "./",
     "deco-sites/fashion/": "./",
     "deco-sites/std/": "https://denopkg.com/deco-sites/[email protected]/",
     "$live/": "https://denopkg.com/deco-cx/[email protected]/",

live.gen.ts

@@ -26,10 +26,11 @@ import * as $$$$$$$$7 from "./sections/Footer.tsx";
 import * as $$$$$$$$8 from "./sections/CookieConsent.tsx";
 import * as $$$$$$$$9 from "./sections/DesignSystem.tsx";
 import * as $$$$$$$$10 from "./sections/Header.tsx";
-import * as $$$$$$$$11 from "./sections/ProductDetails.tsx";
-import * as $$$$$$$$12 from "./sections/Highlights.tsx";
-import * as $$$$$$$$13 from "./sections/WhatsApp.tsx";
-import * as $$$$$$$$14 from "./sections/Carousel.tsx";
+import * as $$$$$$$$11 from "./sections/FreeShippingBarValue.tsx";
+import * as $$$$$$$$12 from "./sections/ProductDetails.tsx";
+import * as $$$$$$$$13 from "./sections/Highlights.tsx";
+import * as $$$$$$$$14 from "./sections/WhatsApp.tsx";
+import * as $$$$$$$$15 from "./sections/Carousel.tsx";
 import * as $live_middleware from "$live/routes/_middleware.ts";
 import * as $live_workbench from "$live/routes/live/workbench.ts";
 import * as $live_invoke from "$live/routes/live/invoke/index.ts";
@@ -117,21 +118,23 @@ const manifest = {
     "$live/sections/PageInclude.tsx": i2$$$0,
     "$live/sections/Slot.tsx": i2$$$1,
     "$live/sections/UseSlot.tsx": i2$$$2,
-    "deco-sites/fashion/sections/BannerGrid.tsx": $$$$$$$$4,
-    "deco-sites/fashion/sections/BannerPLP.tsx": $$$$$$$$3,
-    "deco-sites/fashion/sections/Carousel.tsx": $$$$$$$$14,
-    "deco-sites/fashion/sections/CookieConsent.tsx": $$$$$$$$8,
-    "deco-sites/fashion/sections/DesignSystem.tsx": $$$$$$$$9,
-    "deco-sites/fashion/sections/Features.tsx": $$$$$$$$2,
-    "deco-sites/fashion/sections/Footer.tsx": $$$$$$$$7,
-    "deco-sites/fashion/sections/Header.tsx": $$$$$$$$10,
-    "deco-sites/fashion/sections/Highlights.tsx": $$$$$$$$12,
-    "deco-sites/fashion/sections/LinkTree.tsx": $$$$$$$$1,
-    "deco-sites/fashion/sections/ProductDetails.tsx": $$$$$$$$11,
-    "deco-sites/fashion/sections/ProductShelf.tsx": $$$$$$$$6,
-    "deco-sites/fashion/sections/SearchResult.tsx": $$$$$$$$5,
-    "deco-sites/fashion/sections/WhatsApp.tsx": $$$$$$$$13,
-    "deco-sites/fashion/sections/WishlistGallery.tsx": $$$$$$$$0,
+    "carlosviniciusananias/fashion/sections/BannerGrid.tsx": $$$$$$$$4,
+    "carlosviniciusananias/fashion/sections/BannerPLP.tsx": $$$$$$$$3,
+    "carlosviniciusananias/fashion/sections/Carousel.tsx": $$$$$$$$15,
+    "carlosviniciusananias/fashion/sections/CookieConsent.tsx": $$$$$$$$8,
+    "carlosviniciusananias/fashion/sections/DesignSystem.tsx": $$$$$$$$9,
+    "carlosviniciusananias/fashion/sections/Features.tsx": $$$$$$$$2,
+    "carlosviniciusananias/fashion/sections/Footer.tsx": $$$$$$$$7,
+    "carlosviniciusananias/fashion/sections/FreeShippingBarValue.tsx":
+      $$$$$$$$11,
+    "carlosviniciusananias/fashion/sections/Header.tsx": $$$$$$$$10,
+    "carlosviniciusananias/fashion/sections/Highlights.tsx": $$$$$$$$13,
+    "carlosviniciusananias/fashion/sections/LinkTree.tsx": $$$$$$$$1,
+    "carlosviniciusananias/fashion/sections/ProductDetails.tsx": $$$$$$$$12,
+    "carlosviniciusananias/fashion/sections/ProductShelf.tsx": $$$$$$$$6,
+    "carlosviniciusananias/fashion/sections/SearchResult.tsx": $$$$$$$$5,
+    "carlosviniciusananias/fashion/sections/WhatsApp.tsx": $$$$$$$$14,
+    "carlosviniciusananias/fashion/sections/WishlistGallery.tsx": $$$$$$$$0,
     "deco-sites/std/sections/Analytics.tsx": i2$$$3,
     "deco-sites/std/sections/configOCC.global.tsx": i2$$$4,
     "deco-sites/std/sections/configShopify.global.tsx": i2$$$5,