feat(localization): merc-7830 support for region translations

bigcommerce · Jul 20, 2021 · 9e66d6b · 9e66d6b
1 parent dae631a
commit 9e66d6b
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 267 deletions.
diff --git a/lib/regions.js b/lib/regions.js
@@ -73,22 +73,56 @@ function buildPageTemplate(templates, page) {
     return pageTemplate;
 }
 
+/**
+ * Returns a boolean if there are two regions with the same name
+ * @param {Object} regions
+ * @param {Object} regionData
+ * @returns {boolean}
+ */
+function checkDuplicateRegionName(regions, regionData) {
+    let result = false;
+    const regionsArray = Array.from(regions);
+    for (let i = 0; i < regionsArray.length; i += 1) {
+        if (regionsArray[i].name === regionData.name) {
+            result = true;
+            break;
+        }
+    }
+
+    return result;
+}
+
 /**
  * Parse a template content and return an array of unique region objects
  * @param {string} content
  * @returns {Array}
  */
 function parseRegions(content) {
-    const regionRegex = /{{3}\s*region\s+.*?name=["|']([\w-]+)["|'].*?}{3}/g;
+    const regionRegex = /{{3}\s*region\s+.*?name=["|']([\w-]+)["|'].*?}{3}?/g;
+    const translationRegex = /{{3}.*?\stranslation=["|'](i18n.RegionName.([\w-])+)["|'].*?}{3}?/g;
     const regions = new Set();
-    let match;
+    let regionMatch;
+    const translationMatch = translationRegex.exec(content);
 
     // eslint-disable-next-line
-    while ((match = regionRegex.exec(content))) {
-        regions.add(match[1]);
+    while ((regionMatch = regionRegex.exec(content))) {
+        const regionData = {};
+        // eslint-disable-next-line prefer-destructuring
+        regionData.name = regionMatch[1];
+
+        // If there is a translation match and regionName match is valid, add data to region
+        if (translationMatch && regionMatch[1]) {
+            // eslint-disable-next-line prefer-destructuring
+            regionData.translation = translationMatch[1];
+        }
+
+        if (!checkDuplicateRegionName(regions, regionData)) {
+            regions.add(regionData);
+        }
     }
+    const regionArray = Array.from(regions);
 
-    return Array.from(regions).map((name) => ({ name }));
+    return regionArray.map(({ name, translation }) => ({ name, translation }));
 }
 
 /**

diff --git a/lib/regions.spec.js b/lib/regions.spec.js
@@ -53,14 +53,20 @@ describe('Stencil Bundle', () => {
 describe('Regions', () => {
     describe('parseRegions', () => {
         const map = {
-            '{{{region name="_foobar"}}}': [{ name: '_foobar' }],
-            '{{{ region name="foo-bar"}}}': [{ name: 'foo-bar' }],
-            '{{{  region name="foobar__"}}}': [{ name: 'foobar__' }],
+            '{{{region translation="i18n.RegionName.TestingTranslation" name="_foobar"}}}': [
+                { name: '_foobar', translation: 'i18n.RegionName.TestingTranslation' },
+            ],
+            '{{{ region name="foo-bar" translation="i18n.RegionName.Testing-translations" }}}': [
+                { name: 'foo-bar', translation: 'i18n.RegionName.Testing-translations' },
+            ],
+            '{{{  region name="foobar__" translation="testing-without-i18n-prefix"}}}': [
+                { name: 'foobar__' },
+            ],
             '{{{  region name="foo_bar" }}}': [{ name: 'foo_bar' }],
             '{{{  region name="foo-_bar"  }}}': [{ name: 'foo-_bar' }],
             '{{{  region name="foobar1"  }}}': [{ name: 'foobar1' }],
             '{{{  region  name=" "  }}}': [],
-            '{{{  region  name="invalid name"  }}}': [],
+            '{{{  region  name="invalid name"  translation="i18n.RegionName.ValidTranslation"}}}': [],
             '{{  region  name="two_brackets"  }}': [],
             "{{{  region   name='foobar'  }}}": [{ name: 'foobar' }],
             '{{{region name="foobar" type="widget"}}}': [{ name: 'foobar' }],

diff --git a/lib/validator/schema-translations.js b/lib/validator/schema-translations.js
@@ -94,7 +94,15 @@ class ValidatorSchemaTranslations {
      * @returns {array}
      */
     findUnusedKeys() {
-        return this.translationsKeys.filter((key) => !this.schemaKeys.includes(key));
+        return this.translationsKeys.filter((key) => {
+            const translationRegex = /^i18n.RegionName.*?/g;
+            const translationMatch = translationRegex.exec(key);
+            if (translationMatch) {
+                return false;
+            }
+
+            return !this.schemaKeys.includes(key);
+        });
     }
 
     /**