Merge pull request #3 from vtex/fix/internationalization

fix/internationalization

README.md

@@ -20,6 +20,10 @@ vtex install vtex.similar-products-variants
 }
 ```
 
+3. Add similar products in the SKU configuration section.
+
+![image](https://user-images.githubusercontent.com/65255533/142908816-41a4d093-5680-4153-9c60-9d986b077fb1.png)
+
 ## Usage
 
 Add the similar-products-variants block to the store theme template where you desire to display a similar product list. For example:

manifest.json

@@ -1,11 +1,12 @@
 {
   "vendor": "vtex",
   "name": "similar-products-variants",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "title": "similar-products-variants",
   "description": "similar-products-variants",
   "defaultLocale": "en",
   "builders": {
+    "messages": "1.x",
     "store": "0.x",
     "react": "3.x"
   },

messages/en.json

@@ -0,0 +1,3 @@
+{
+    "store/title.label": "Colors 2"
+}

messages/es.json

@@ -0,0 +1,3 @@
+{
+    "store/title.label": "Colores"
+}

messages/pt.json

@@ -0,0 +1,3 @@
+{
+    "store/title.label": "Cores"
+}

package.json

@@ -30,4 +30,4 @@
     "prettier": "^2.0.2",
     "typescript": "^3.8.3"
   }
-}
+}

react/Index.tsx

@@ -4,6 +4,8 @@ import { useProduct } from 'vtex.product-context'
 import { useQuery } from 'react-apollo'
 import { useCssHandles } from 'vtex.css-handles'
 import { useRuntime } from 'vtex.render-runtime'
+import { useIntl } from 'react-intl'
+import { Link } from 'vtex.render-runtime'
 
 import productRecommendationsQuery from './queries/productRecommendations.gql'
 
@@ -29,6 +31,7 @@ function SimilarProductsVariants({
   imageLabel
 }: SimilarProductsVariantsProps) {
   const handles = useCssHandles(CSS_HANDLES)
+  const intl = useIntl()
   const productContext = useProduct()
   const { route } = useRuntime()
   const productId =
@@ -68,33 +71,39 @@ function SimilarProductsVariants({
 
   return (
     <div className={`${handles.variants}`}>
-      <p className={`${handles.title}`}>Colores</p>
+      <p className={`${handles.title}`}>{intl.formatMessage({ id: "store/title.label" })}</p>
       <div className={handles['var-wrap']}>
         {items.map((element: ProductTypes.Product) => {
-          const imageIndex = imageLabel === undefined 
+          const imageIndex = imageLabel === undefined
             ? 0
             : element.items[0].images.findIndex(image => image.imageLabel === imageLabel) === -1
-              ? 0 
+              ? 0
               : element.items[0].images.findIndex(image => image.imageLabel === imageLabel)
-              
+
           const srcImage = element.items[0].images[imageIndex].imageUrl
           return (
-            <a
-              key={element.productId}
-              href={`/${element.linkText}/p`}
-              className={`${handles.img_wrap}${
-                route?.params?.slug === element.linkText ? '--is-active' : ''
-              }`}
-            >
-              <img
-                src={ srcImage }
-                alt={element.productName}
-                height="50px"
-                className={`${handles.img} mr3 ${
-                  route?.params?.slug === element.linkText ? 'o-50' : ''
-                }`}
-              />
-            </a>
+            <Link {...{
+              page: 'store.product',
+              params: {
+                slug: element?.linkText,
+                id: element?.productId,
+              },
+            }}>
+              <a
+                key={element.productId}
+                className={`${handles.img_wrap}${route?.params?.slug === element.linkText ? '--is-active' : ''
+                  }`}
+              >
+                <img
+                  src={srcImage}
+                  alt={element.productName}
+                  height="50px"
+                  className={`${handles.img} mr3 ${route?.params?.slug === element.linkText ? 'o-50' : ''
+                    }`
+                  }
+                />
+              </a>
+            </Link>
           )
         })}
       </div>

react/package.json

@@ -8,7 +8,7 @@
     "react": "^16.12.0",
     "react-apollo": "^3.1.3",
     "react-dom": "^16.12.0",
-    "react-intl": "^3.12.0"
+    "react-intl": "^5.21.2"
   },
   "devDependencies": {
     "@apollo/react-testing": "^3.1.3",
@@ -21,13 +21,13 @@
     "graphql": "^14.6.0",
     "typescript": "3.9.7",
     "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
-    "vtex.order-items": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-items@0.11.1/public/@types/vtex.order-items",
-    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager",
-    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.9.9/public/@types/vtex.product-context",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.128.2/public/@types/vtex.render-runtime",
-    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.43.0/public/@types/vtex.search-graphql",
-    "vtex.similar-products-variants": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.similar-products-variants@0.0.2/public/@types/vtex.similar-products-variants",
-    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.79.0/public/@types/vtex.store-resources",
-    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.138.2/public/@types/vtex.styleguide"
+    "vtex.order-items": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-items@0.13.1/public/@types/vtex.order-items",
+    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.11.1/public/@types/vtex.order-manager",
+    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.3/public/@types/vtex.render-runtime",
+    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.47.2/public/@types/vtex.search-graphql",
+    "vtex.similar-products-variants": "https://roo--paragonsports.myvtex.com/_v/private/typings/linked/v1/vtex.similar-products-variants@0.0.7+build1637602189/public/@types/vtex.similar-products-variants",
+    "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.85.0/public/@types/vtex.store-resources",
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.2/public/@types/vtex.styleguide"
   }
 }

react/tsconfig.json

@@ -1,11 +1,18 @@
 {
   "extends": "@vtex/tsconfig",
   "compilerOptions": {
+    "jsx": "react",
     "noEmitOnError": false,
-    "lib": ["dom"],
+    "lib": [
+      "dom"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "target": "es2017"
   },
-  "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
-}
+  "include": [
+    "./typings/*.d.ts",
+    "./**/*.tsx",
+    "./**/*.ts"
+  ]
+}