Merge pull request #98 from vtex-apps/translationIssue

fix: format on the available and unavailable content on the button
vtex-apps · Aug 25, 2021 · f7d7741 · f7d7741
2 parents 8180a9d + 3381c82
commit f7d7741
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed 
+
+- Available and unavailable content text wasn't being translated. So, formatedIOMessage was added to AddtoCartButton.
+
 ## [0.26.8] - 2021-08-19
 
 ### Fixed

diff --git a/react/AddToCartButton.tsx b/react/AddToCartButton.tsx
@@ -13,6 +13,7 @@ import { usePixel } from 'vtex.pixel-manager'
 import { useProductDispatch } from 'vtex.product-context'
 import { usePWA } from 'vtex.store-resources/PWAContext'
 import { useOrderItems } from 'vtex.order-items/OrderItems'
+import { formatIOMessage } from 'vtex.native-types'
 
 import { CartItem } from './modules/catalogItemToCart'
 import useMarketingSessionParams from './hooks/useMarketingSessionParams'
@@ -206,14 +207,14 @@ function AddToCartButton(props: Props) {
     const pixelEvent =
       customPixelEventId && addToCartFeedback === 'customEvent'
         ? {
-            id: customPixelEventId,
-            event: 'addToCart',
-            items: pixelEventItems,
-          }
+          id: customPixelEventId,
+          event: 'addToCart',
+          items: pixelEventItems,
+        }
         : {
-            event: 'addToCart',
-            items: pixelEventItems,
-          }
+          event: 'addToCart',
+          items: pixelEventItems,
+        }
 
     // @ts-expect-error the event is not typed in pixel-manager
     push(pixelEvent)
@@ -268,7 +269,9 @@ function AddToCartButton(props: Props) {
   const availableButtonContent = (
     <div className={`${handles.buttonDataContainer} flex justify-center`}>
       {text ? (
-        <span className={handles.buttonText}>{text}</span>
+        <span className={handles.buttonText}>
+          {formatIOMessage({ id: text, intl })}
+        </span>
       ) : (
         <FormattedMessage id="store/add-to-cart.add-to-cart">
           {message => <span className={handles.buttonText}>{message}</span>}
@@ -278,7 +281,9 @@ function AddToCartButton(props: Props) {
   )
 
   const unavailableButtonContent = unavailableText ? (
-    <span className={handles.buttonText}>{unavailableText}</span>
+    <span className={handles.buttonText}>
+      {formatIOMessage({ id: unavailableText, intl })}
+    </span>
   ) : (
     <FormattedMessage id="store/add-to-cart.label-unavailable">
       {message => <span className={handles.buttonText}>{message}</span>}

diff --git a/react/__mocks__/vtex.native-types/index.tsx b/react/__mocks__/vtex.native-types/index.tsx
@@ -0,0 +1 @@
+export const formatIOMessage = ({ id }: { id: string }) => id
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const formatIOMessage = ({ id }: { id: string }) => id