pre work for replacing IconComponent usages with iconPartial

commands/helpers/utils/argumentmetadata.js

@@ -16,9 +16,9 @@ Object.freeze(ArgumentType);
 class ArgumentMetadata {
   constructor(type, description, isRequired, defaultValue, itemType) {
     this._type = type;
+    this._description = description;
     this._isRequired = isRequired;
     this._defaultValue = defaultValue;
-    this._description = description;
     this._itemType = itemType;
   }
 

hbshelpers/relativePathHandler.js

@@ -4,13 +4,14 @@ const isNonRelativeUrl = require('./isNonRelativeUrl');
  * If the url is not relative, return it. If it is relative,
  * append relativePath to it.
  * 
- * @param {string} url 
  * @param {import('handlebars').HelperOptions} options
+ * @param {string} options.hash.relativePath
+ * @param {string} options.hash.url
  * @returns {string}
  */
 module.exports = function relativePathHandler(options) {
   const { relativePath, url } = options.hash || {};
-  if (isNonRelativeUrl(url) || !relativePath) {
+  if (isNonRelativeUrl(url) || !relativePath || !url) {
     return url;
   }
   return relativePath + '/' + url;

hbshelpers/sdkAssetUrl.js

@@ -1,5 +1,6 @@
 const RELEASE_BRANCH_REGEX = /^release\/v[0-9.]+$/;
 const HOTFIX_BRANCH_REGEX = /^hotfix\/v[0-9.]+$/;
+const I18N_FEATURE_BRANCH_REGEX = /^feature\/.+-i18n$/;
 const SEM_VER_REGEX = /^[1-9]+$|^[1-9]+\.[0-9]+$|^[1-9]+\.[0-9]+\.[0-9]+$/;
 
 /**
@@ -25,8 +26,9 @@ module.exports = function sdkAssetUrl(branch, locale, assetName) {
 
   const isPreReleaseBranch = 
     RELEASE_BRANCH_REGEX.test(branch) || HOTFIX_BRANCH_REGEX.test(branch);
+  const isI18nFeatureBranch = I18N_FEATURE_BRANCH_REGEX.test(branch);
   const isLocalizationSupported = 
-    (isReleasedBranch || isPreReleaseBranch) && 
+    (isReleasedBranch || isPreReleaseBranch || isI18nFeatureBranch) && 
     !(locale.startsWith('en') || assetName === 'answers.css') ;
 
   const parsedAssetName = isLocalizationSupported ?

package.json

@@ -47,7 +47,8 @@
   },
   "jest": {
     "collectCoverageFrom": [
-      "static/**/*.js"
+      "static/**/*.js",
+      "hbshelpers/*.js"
     ],
     "verbose": true,
     "moduleFileExtensions": [

script/core.hbs

@@ -73,14 +73,32 @@
          * Determine whether a URL is absolute or not.
          * Common examples: "mailto:slapshot@gmail.com", "//yext.com", "https://yext.com"
          */
-        ANSWERS.registerHelper('isNonRelativeUrl', function(str) {
+        function isNonRelativeUrl(str) {
           const absoluteURLRegex = /^(\/|[a-zA-Z]+:)/;
           return str && str.match(absoluteURLRegex);
-        });
+        }
+        ANSWERS.registerHelper('isNonRelativeUrl', isNonRelativeUrl);
 
         ANSWERS.registerHelper('close-card-svg', () => {
           return ANSWERS.renderer.SafeString({{{stringifyPartial (read 'static/assets/images/close-card') }}});
         });
+
+        /**
+        * If the url is not relative, return it. If it is relative,
+        * append relativePath to it.
+        *
+        * @param {import('handlebars').HelperOptions} options
+        * @param {string} options.hash.relativePath
+        * @param {string} options.hash.url
+        * @returns {string}
+        */
+        ANSWERS.registerHelper('relativePathHandler', function relativePathHandler(options) {
+          const { relativePath, url } = options.hash || {};
+          if (isNonRelativeUrl(url) || !relativePath || !url) {
+            return url;
+          }
+          return relativePath + '/' + url;
+        });
       }
     }).catch(err => {
       window.AnswersExperience.AnswersInitializedPromise.reject('Answers failed to initialized.');

test-site/.gitignore

@@ -1,15 +1,17 @@
+public/*
+config/*
+pages/*
+cards/*
+directanswercards/*
+Gruntfile.js
+package-lock.json
+package.json
+webpack-config.js
+
+!cards/custom-cta-icons/
 !config/global_config.json
 !config/locale_config.json
 !config/index.json
 !pages/index.html.hbs
 !public/iframe_test.html
-!public/overlay.html
-public/
-config/
-pages/
-cards/
-directanswercards/
-Gruntfile.js
-package-lock.json
-package.json
-webpack-config.js
+!public/overlay.html

test-site/cards/custom-cta-icons/component.js

@@ -0,0 +1,56 @@
+{{> cards/card_component componentName='custom-cta-icons' }}
+
+class custom_cta_iconsCardComponent extends BaseCard['custom-cta-icons'] {
+  constructor(config = {}, systemConfig = {}) {
+    super(config, systemConfig);
+  }
+
+  dataForRender(profile) {
+    const linkTarget = AnswersExperience.runtimeConfig.get('linkTarget') || '_top';
+
+    return {
+      title: profile.name, 
+      url: profile.website,
+      target: linkTarget,
+      titleEventOptions: this.addDefaultEventOptions(),
+      date: Formatter.bigDate(profile),
+      subtitle: Formatter.dateRange(profile),
+      details: profile.description,
+      CTA1: {
+        label: 'Hitchhiker Thumb!',
+        /**
+         * @Test a custom icon url without iconName in the CTA
+         * @Expect the custom icon to show up
+         */
+        iconUrl: 'static/assets/hitchhiker-thumb.jpeg',
+        url: 'testUrl',
+        target: linkTarget,
+        eventType: 'RSVP',
+        eventOptions: this.addDefaultEventOptions(),
+      },
+      CTA2: {
+        label: 'AYAYA',
+        iconName: 'star',
+        /**
+         * @Test a custom icon url hen an iconName already exists
+         * @Expect the custom icon to show up
+         */
+        iconUrl: 'static/assets/ayaya.png',
+        url: 'testUrl',
+        target: linkTarget,
+        eventType: 'DRIVING_DIRECTIONS',
+        eventOptions: this.addDefaultEventOptions(),
+      }
+    };
+  }
+
+  static defaultTemplateName (config) {
+    return 'cards/custom-cta-icons';
+  }
+}
+
+ANSWERS.registerTemplate(
+  'cards/custom-cta-icons',
+  {{{stringifyPartial (read 'cards/event-standard/template') }}}
+);
+ANSWERS.registerComponentType(custom_cta_iconsCardComponent);

test-site/config-overrides/events_custom_cta_icons.es.json

@@ -0,0 +1,8 @@
+{
+  "verticalsToConfig": {
+    "events": {
+      "cardType": "custom-cta-icons",
+      "label": "Eventos"
+    }
+  }
+}

test-site/config-overrides/events_custom_cta_icons.json

@@ -0,0 +1,7 @@
+{
+  "verticalsToConfig": {
+    "events": {
+      "cardType": "custom-cta-icons"
+    }
+  }
+}

test-site/config/global_config.json

@@ -1,5 +1,5 @@
 {
-  "sdkVersion": "1.9", // The version of the Answers SDK to use
+  "sdkVersion": "feature/icon-partial-i18n", // The version of the Answers SDK to use
   "apiKey": "2d8c550071a64ea23e263118a2b0680b", // The answers api key found on the experiences page. This will be provided automatically by the Yext CI system
   // "experienceVersion": "<REPLACE ME>", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system
   // "businessId": "<REPLACE ME>", // The business ID of the account. This will be provided automatically by the Yext CI system

test-site/config/index.json

@@ -40,7 +40,7 @@
       "mapConfig": {
         "mapProvider": "Google"
       },
-      "icon": "static/assets/slapshot.png"
+      "iconUrl": "static/assets/slapshot.png"
     },
     "products": {
       "universalSectionTemplate": "grid-three-columns",

test-site/scripts/create-verticals.js

@@ -10,6 +10,10 @@ const verticalConfiguration = {
     template: 'vertical-standard',
     cardName: 'event-custom'
   },
+  events_custom_cta_icons: {
+    verticalKey: 'events',
+    template: 'vertical-standard'
+  },
   faqs: {
     verticalKey: 'faq',
     template: 'vertical-standard',
@@ -90,7 +94,12 @@ const testSiteDir = path.resolve(__dirname, '..');
 process.chdir(testSiteDir);
 
 Object.entries(verticalConfiguration).forEach(([pageName, config]) => {
-  execSync(`npx jambo vertical --name ${pageName} --verticalKey ${config.verticalKey} --template ${config.template} --cardName ${config.cardName} --locales es`);
+  let verticalCommand =
+    `npx jambo vertical --name ${pageName} --verticalKey ${config.verticalKey} --template ${config.template} --locales es`
+  if (config.cardName) {
+    verticalCommand += ` --cardName ${config.cardName}`
+  }
+  execSync(verticalCommand);
   configMerger.mergeConfigForPage(pageName);
   pagePatcher.applyPatchToPage(pageName);
   configMerger.mergeConfigForPage(pageName + '.es');

tests/hbshelpers/relativePathHandler.js

@@ -0,0 +1,56 @@
+import relativePathHandler from '../../hbshelpers/relativePathHandler';
+
+it('works for undefined url', () => {
+  const hash = {
+    url: undefined,
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual(undefined);
+});
+
+it('works for null url', () => {
+  const hash = {
+    url: null,
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual(null);
+});
+
+it('works for blank string url', () => {
+  const hash = {
+    url: '',
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual('');
+});
+
+it('works for relative url with relativePath', () => {
+  const hash = {
+    url: 'mySpecialAsset.jpg',
+    relativePath: '.'
+  };
+  expect(relativePathHandler({ hash })).toEqual('./mySpecialAsset.jpg');
+});
+
+it('works for relative url with relativePath that points back a level', () => {
+  const hash = {
+    url: 'mySpecialAsset.jpg',
+    relativePath: '../..'
+  };
+  expect(relativePathHandler({ hash })).toEqual('../../mySpecialAsset.jpg');
+});
+
+it('works when no relativePath', () => {
+  const hash = {
+    url: 'mySpecialAsset.jpg'
+  };
+  expect(relativePathHandler({ hash })).toEqual('mySpecialAsset.jpg');
+});
+
+it('works with absolute url', () => {
+  const hash = {
+    url: '/mySpecialAsset.jpg',
+    relativePath: '../../'
+  };
+  expect(relativePathHandler({ hash })).toEqual('/mySpecialAsset.jpg');
+});

tests/percy/photographer.js

@@ -53,6 +53,9 @@ class Photographer {
     await this._pageNavigator.gotoVerticalPage('events', { query: 'vrginia' });
     await this._camera.snapshot('vertical-search--spellcheck');
 
+    await this._pageNavigator.gotoVerticalPage('events_custom_cta_icons');
+    await this._camera.snapshot('vertical-search--custom-cta-icons');
+
     await this._pageNavigator.gotoVerticalPage('financial_professionals', { query: 'connor' });
     await this._camera.snapshot('vertical-search--financial-professional-location');