From b80ba4c85fa788464c316dffc649b18628949889 Mon Sep 17 00:00:00 2001 From: Yen Truong <36055303+yen-tt@users.noreply.github.com> Date: Thu, 16 Sep 2021 08:37:42 -0400 Subject: [PATCH 01/22] Fix google maps InvalidValueError in theme (#955) - SDK GoogleMapMarkerConfig expects label to be of type string J=SLAP-655 TEST=manual see that map is working properly and error is gone in browser inspector --- templates/universal-standard/script/map-pin.hbs | 2 +- templates/vertical-map/script/map-pin.hbs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/universal-standard/script/map-pin.hbs b/templates/universal-standard/script/map-pin.hbs index 0ff478714..88f2a1d81 100644 --- a/templates/universal-standard/script/map-pin.hbs +++ b/templates/universal-standard/script/map-pin.hbs @@ -32,7 +32,7 @@ if (mapProvider === 'google') { config.svg = svg; {{!-- Don't use the sdk's built-in label for GoogleMapProvider --}} - config.label = {}; + config.label = ''; config.scaledSize = { w: pinStyling.width, h: pinStyling.height, diff --git a/templates/vertical-map/script/map-pin.hbs b/templates/vertical-map/script/map-pin.hbs index 2bf925670..a59c623fc 100644 --- a/templates/vertical-map/script/map-pin.hbs +++ b/templates/vertical-map/script/map-pin.hbs @@ -32,7 +32,7 @@ if (mapProvider === 'google') { config.svg = svg; {{!-- Don't use the sdk's built-in label for GoogleMapProvider --}} - config.label = {}; + config.label = ''; config.scaledSize = { w: pinStyling.width, h: pinStyling.height, From 299baa22e622e130ac66aa09e2ef583a1936f89e Mon Sep 17 00:00:00 2001 From: Yen Truong <36055303+yen-tt@users.noreply.github.com> Date: Fri, 17 Sep 2021 10:56:09 -0400 Subject: [PATCH 02/22] avoid results render on locator map view (#954) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Improve performance for map pages on mobile by only render result cards on list view - VerticalFullPageMapOrchestrator use a field in core storage `DISABLE_RENDER_RESULTS` to communicate with VerticalResults component whether it should render the results on page. - VerticalResults component's config pass in a beforeMountOverride function to avoid mount() being call in the component lifecycle and render if `DISABLE_RENDER_RESULTS` is true. - VerticalResults component's config also pass in a onCreate function to add a listener on any changes `DISABLE_RENDER_RESULTS`, to potentially trigger render update for the rsults if user switch from map view to list view, or screen resize between mobile and desktop view - Since VerticalResults now will not render any location cards on map view, VerticalFullPageOrchestrator can no longer copy the card and display that when a pin is clicked. So,cardType is passed into the config for VerticalFullPageOrchestrator. When a pin is click, the cardId is used to pull the corresponding entity data from results in storage, and construct a card component based on cardType to append to the top level map container. Note: require update to SDK's component.js file for beforeMountOverride to work J=SLAP-1302 TEST=manual & auto smoke test from theme's locations_full_page_map vertical page: - resize screen from mobile to desktop and vice versa, see that results and focused pins are still loaded properly. - toggle between map and list view, see that the results are only render on list view in elemnt inspection (except for the first time when search is trigger from searchbar) - in map view, drag across the map a few times and see that pins are loaded correctly but results are not render on the page. - see that detail card is displayed correctly when click on pin from map view, before and after dragging acrross the map recorded performance metric on browser inspector, see that the tasks to re-render the components shrink to around ~≤27ms compare to previous time depending on result count (~≥100ms for 2000+ results) (got rid of most of the 'long tasks' - where the main UI thread is busy for 50 ms or longer) no changes in map related snapshots from percy --- global_config.json | 2 +- .../VerticalFullPageMapOrchestrator.js | 38 ++++++++++++++----- .../script/verticalresults.hbs | 10 +++++ test-site/config/global_config.json | 2 +- .../vertical-full-page-map/script.js | 3 ++ 5 files changed, 44 insertions(+), 11 deletions(-) diff --git a/global_config.json b/global_config.json index e72e40d11..1e20400d6 100644 --- a/global_config.json +++ b/global_config.json @@ -1,5 +1,5 @@ { - "sdkVersion": "1.10", // The version of the Answers SDK to use + "sdkVersion": "develop", // The version of the Answers SDK to use // "apiKey": "", // The answers api key found on the experiences page. This will be provided automatically by the Yext CI system // "experienceVersion": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system diff --git a/static/js/theme-map/VerticalFullPageMapOrchestrator.js b/static/js/theme-map/VerticalFullPageMapOrchestrator.js index 74484dee2..39113226d 100644 --- a/static/js/theme-map/VerticalFullPageMapOrchestrator.js +++ b/static/js/theme-map/VerticalFullPageMapOrchestrator.js @@ -19,6 +19,13 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component { constructor(config, systemConfig) { super(config, systemConfig); + /** + * Name of a location card type + * + * @type {string} + */ + this.cardType = config.cardType; + /** * The container in the DOM for the interactive map * @type {HTMLElement} @@ -182,14 +189,14 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component { this.searchThisArea(); }); - this.setupCssForBreakpoints(); + this.setupMobileBreakpointListener(); this.addMapComponent(); } /** * Properly set CSS classes for mobile and desktop */ - setupCssForBreakpoints () { + setupMobileBreakpointListener () { if (!this.isMobile()) { this.updateCssForDesktop(); } @@ -198,6 +205,7 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component { if (this.isMobile()) { this.updateCssForMobile(); } else { + this.core.storage.set('DISABLE_RENDER_RESULTS', false); this.updateCssForDesktop(); } }; @@ -466,22 +474,29 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component { */ pinFocusListener (index, cardId) { this.core.storage.set(StorageKeys.LOCATOR_SELECTED_RESULT, cardId); - const selector = `.yxt-Card[data-opts='{ "_index": ${index - 1} }']`; - const card = document.querySelector(selector); - document.querySelectorAll('.yxt-Card--pinFocused').forEach((el) => { el.classList.remove('yxt-Card--pinFocused'); }); - card.classList.add('yxt-Card--pinFocused'); - if (this.isMobile()) { document.querySelectorAll('.yxt-Card--isVisibleOnMobileMap').forEach((el) => removeElement(el)); const isDetailCardOpened = document.querySelectorAll('.yxt-Card--isVisibleOnMobileMap').length; - this._detailCard = card.cloneNode(true); + const entityId = cardId.replace('js-yl-', ''); + const verticalResults = this.core.storage.get(StorageKeys.VERTICAL_RESULTS).results; + const entityData = verticalResults.find(entity => entity.id.toString() === entityId); + const opts = { + parentContainer: this._container, + container: `.yxt-Card-${entityId}`, + data: { + result: entityData, + verticalKey: this.verticalKey + } + }; + ANSWERS.addComponent(this.cardType, opts); + this._detailCard = this._container.querySelector(`.yxt-Card-${entityId}`); this._detailCard.classList.add('yxt-Card--isVisibleOnMobileMap'); - this._container.appendChild(this._detailCard); + this._detailCard.classList.add('yxt-Card--pinFocused'); if (!isDetailCardOpened) { window.requestAnimationFrame(() => { @@ -502,6 +517,9 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component { this.addCssClassesForState(MobileStates.DETAIL_SHOWN); } else { + const selector = `.yxt-Card[data-opts='{ "_index": ${index - 1} }']`; + const card = document.querySelector(selector); + card.classList.add('yxt-Card--pinFocused'); this.scrollToResult(card); } } @@ -532,8 +550,10 @@ class VerticalFullPageMapOrchestrator extends ANSWERS.Component { this.deselectAllResults(); window.scrollTo(0, 0); if (this._mobileView === MobileStates.LIST_VIEW) { + this.core.storage.set('DISABLE_RENDER_RESULTS', true); this.setMobileMapView(); } else { + this.core.storage.set('DISABLE_RENDER_RESULTS', false); this.setMobileListView(); } }); diff --git a/templates/vertical-full-page-map/script/verticalresults.hbs b/templates/vertical-full-page-map/script/verticalresults.hbs index 3972d3232..87fda4b24 100644 --- a/templates/vertical-full-page-map/script/verticalresults.hbs +++ b/templates/vertical-full-page-map/script/verticalresults.hbs @@ -1,5 +1,15 @@ ANSWERS.addComponent("VerticalResults", Object.assign({}, { container: "#js-answersVerticalResults", + onCreate: function() { + this.core.storage.registerListener({ + storageKey: 'DISABLE_RENDER_RESULTS', + eventType: 'update', + callback: () => { this.setState(this.getState()) } + }); + }, + beforeMountOverride: function(data) { + return !this.core.storage.get('DISABLE_RENDER_RESULTS'); + }, {{#if verticalKey}} verticalKey: "{{{verticalKey}}}", modifier: "{{{verticalKey}}}", diff --git a/test-site/config/global_config.json b/test-site/config/global_config.json index b86160394..ee59f998f 100644 --- a/test-site/config/global_config.json +++ b/test-site/config/global_config.json @@ -1,5 +1,5 @@ { - "sdkVersion": "1.10", // The version of the Answers SDK to use + "sdkVersion": "develop", // 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": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system diff --git a/theme-components/vertical-full-page-map/script.js b/theme-components/vertical-full-page-map/script.js index a8c251736..06142ad9b 100644 --- a/theme-components/vertical-full-page-map/script.js +++ b/theme-components/vertical-full-page-map/script.js @@ -22,6 +22,9 @@ ANSWERS.addComponent('VerticalFullPageMapOrchestrator', Object.assign({}, }, locale: "{{global_config.locale}}", verticalKey: "{{{verticalKey}}}", + {{#with (lookup verticalsToConfig verticalKey)}} + {{#if cardType}}cardType: "{{{cardType}}}",{{/if}} + {{/with}} verticalPages: [ {{#each verticalConfigs}} {{#if verticalKey}} From 351737c974dd8a21c662e990b90eb6f29a188129 Mon Sep 17 00:00:00 2001 From: Yen Truong <36055303+yen-tt@users.noreply.github.com> Date: Mon, 20 Sep 2021 15:33:19 -0400 Subject: [PATCH 03/22] remove unused file (#956) - when checking usage of window.alert for theme, this is the only place that uses it. But since this class/file is not being used anywhere, we should remove it. --- .../js/theme-map/Util/GeoSearchFormBinder.js | 89 ------------------- 1 file changed, 89 deletions(-) delete mode 100644 static/js/theme-map/Util/GeoSearchFormBinder.js diff --git a/static/js/theme-map/Util/GeoSearchFormBinder.js b/static/js/theme-map/Util/GeoSearchFormBinder.js deleted file mode 100644 index 0860461ba..000000000 --- a/static/js/theme-map/Util/GeoSearchFormBinder.js +++ /dev/null @@ -1,89 +0,0 @@ -import { HTML5Geolocation } from './Html5Geolocation.js'; -import { SpinnerModal } from '../SpinnerModal/SpinnerModal.js'; - -export class GeoSearchFormBinder { - - constructor(input, form, submitHandler, spinnerParent) { - this.input = input; - this.form = form; - this.useSpinner = spinnerParent != undefined; - this.running = false; - - // Google's example values - const geoLocationOptions = { - "timeout": 5 * 1000, - "maximumAge": 5 * 60 * 1000, - }; - - HTML5Geolocation.initClass(geoLocationOptions); - - if (typeof submitHandler === 'function') { - this.submitHandler = submitHandler; - } else { - console.warn('the submit handler should be a function, was: ', typeof submitHandler); - } - - if (this.useSpinner) { - this.spinner = new SpinnerModal(spinnerParent); - } - } - - fillPosition(position) { - if ('latitude' in position && 'longitude' in position) { - let query = `${position.latitude},${position.longitude}`; - this.input.name = 'qp'; - let q = document.createElement('input'); - q.name ='q'; - q.type = 'hidden'; - q.value = query; - this.form.appendChild(q); - if (this.submitHandler) { - this.submitHandler(); - return - } - // This will not get fired if you provide a submitHandler function. - // It's useful because browsers do not fire the 'submit' event when form - // submits are triggered via javascript. So if you need to do something - // with the form before it submits, pass a submitHandler!!!!!! - this.form.submit(); - } - } - - geolocateAndSearch() { - if (this.running) return; - this.running = true; - if (this.useSpinner) { - this.spinner.showSpinner(); - } - - this.form.classList.add('js-geolocating'); - document.body.classList.add('js-geolocating'); - - HTML5Geolocation.geolocate(this.geoLocationSuccess.bind(this), this.geoLocationFailure.bind(this)); - } - - geoLocationSuccess(position) { - this.running = false; - this.fillPosition(position); - } - - geoLocationFailure(error) { - this.running = false; - - if (error.code == error.PERMISSION_DENIED) { - console.warn(error.message); - } else { - alert('Sorry, we could not geolocate you at this time'); - } - - console.error(error); - - Array.from(document.getElementsByClassName('js-geolocating')).forEach(function(element) { - element.classList.remove('js-geolocating'); - }); - - if (this.useSpinner) { - this.spinner.hideSpinner(); - } - } -} From d4c67556a2bf3eb383f848bd0b6b1981255a2806 Mon Sep 17 00:00:00 2001 From: Yen Truong <36055303+yen-tt@users.noreply.github.com> Date: Thu, 23 Sep 2021 16:07:17 -0400 Subject: [PATCH 04/22] Distance formatter to include locale with region (#957) Int.FormatNumber and toLocaleString would fail on locale with underscore, such as chinese locale like 'zh-Hant_CN'. Update function to replace underscore with dash for locale TEST=auto pass updated jest test --- static/js/formatters-internal.js | 18 +++++++++++------- tests/static/js/formatters.js | 26 +++++++++++++++++++++++++- 2 files changed, 36 insertions(+), 8 deletions(-) diff --git a/static/js/formatters-internal.js b/static/js/formatters-internal.js index fbdc7fb5f..dbbe9bcb9 100644 --- a/static/js/formatters-internal.js +++ b/static/js/formatters-internal.js @@ -82,15 +82,19 @@ export function toLocalizedDistance(profile, key = 'd_distance', displayUnits) { return this.toMiles(profile, undefined, undefined, locale); } +export function _getLocaleWithDashes(locale) { + return locale && locale.replace(/_/g, '-'); +} + export function _getDocumentLocale() { - return document.documentElement.lang.replace('_', '-'); + return _getLocaleWithDashes(document.documentElement.lang); } export function toKilometers(profile, key = 'd_distance', displayUnits = 'km', locale) { if (!profile[key]) { return ''; } - locale = locale || _getDocumentLocale() + locale = _getLocaleWithDashes(locale) || _getDocumentLocale(); const distanceInKilometers = profile[key] / 1000; // Convert meters to kilometers return new Intl.NumberFormat(locale, { style: 'decimal', maximumFractionDigits: 1, minimumFractionDigits: 1}) @@ -101,7 +105,7 @@ export function toMiles(profile, key = 'd_distance', displayUnits = 'mi', locale if (!profile[key]) { return ''; } - locale = locale || _getDocumentLocale() + locale = _getLocaleWithDashes(locale) || _getDocumentLocale(); const distanceInMiles = profile[key] / 1609.344; // Convert meters to miles return new Intl.NumberFormat(locale, { style: 'decimal', maximumFractionDigits: 1, minimumFractionDigits: 1 }) @@ -234,7 +238,7 @@ export function snakeToTitle(snake) { * @returns {string} The pretty printed value. */ export function prettyPrintObject(obj, locale) { - locale = locale || _getDocumentLocale(); + locale = _getLocaleWithDashes(locale) || _getDocumentLocale(); switch (typeof obj) { case 'string': @@ -459,7 +463,7 @@ export function openStatus(profile, key = 'hours', isTwentyFourHourClock, locale } const hoursLocalizer = new HoursStringsLocalizer( - locale || _getDocumentLocale(), isTwentyFourHourClock); + _getLocaleWithDashes(locale) || _getDocumentLocale(), isTwentyFourHourClock); return new OpenStatusMessageFactory(hoursLocalizer) .create(hours.openStatus); } @@ -501,7 +505,7 @@ export function hoursList(profile, opts = {}, key = 'hours', locale) { }; const hoursLocalizer = new HoursStringsLocalizer( - locale || _getDocumentLocale(), opts.isTwentyFourHourClock); + _getLocaleWithDashes(locale) || _getDocumentLocale(), opts.isTwentyFourHourClock); return new HoursTableBuilder(hoursLocalizer).build(hours, standardizedOpts); } @@ -515,7 +519,7 @@ export { generateCTAFieldTypeLink }; * returns the price value without formatting */ export function price(fieldValue = {}, locale) { - const localeForFormatting = locale || _getDocumentLocale() || 'en'; + const localeForFormatting = _getLocaleWithDashes(locale) || _getDocumentLocale() || 'en'; const price = fieldValue.value && parseFloat(fieldValue.value); const currencyCode = fieldValue.currencyCode && fieldValue.currencyCode.split('-')[0]; if (!price || isNaN(price) || !currencyCode) { diff --git a/tests/static/js/formatters.js b/tests/static/js/formatters.js index da57bbc16..7e543d68d 100644 --- a/tests/static/js/formatters.js +++ b/tests/static/js/formatters.js @@ -5,19 +5,25 @@ describe('Formatters', () => { describe('toLocalizedDistance', () => { const profile = { d_distance: 10000000 }; // Distance in meters const distanceKey = 'd_distance'; - document.documentElement.lang = 'en'; + + beforeEach(() => { + document.documentElement.lang = ''; + }); it('Formats a distance in kilometers', () => { + document.documentElement.lang = 'en'; const distance = Formatters.toLocalizedDistance(profile, distanceKey, 'km'); expect(distance).toEqual('10,000.0 km'); }); it('Formats a distance in miles', () => { + document.documentElement.lang = 'en'; const distance = Formatters.toLocalizedDistance(profile, distanceKey, 'mi'); expect(distance).toEqual('6,213.7 mi'); }); it('Fallbacks to miles', () => { + document.documentElement.lang = 'en'; const distance = Formatters.toLocalizedDistance(profile, distanceKey, 'unknown-unit'); expect(distance).toEqual('6,213.7 mi'); }); @@ -51,6 +57,15 @@ describe('Formatters', () => { const distance = Formatters.toLocalizedDistance(profile); expect(distance).toEqual('10,000.0 km'); }); + + it('Correctly formats distance for Chinese display', () => { + document.documentElement.lang = 'zh-CN'; + let distance = Formatters.toLocalizedDistance(profile); + expect(distance).toEqual('10,000.0 km'); + document.documentElement.lang = 'zh-Hant_TW'; + distance = Formatters.toLocalizedDistance(profile); + expect(distance).toEqual('10,000.0 km'); + }); }) describe('price', () => { @@ -58,14 +73,22 @@ describe('Formatters', () => { value: '100.99', currencyCode: 'USD-US Dollar' }; + + beforeEach(() => { + document.documentElement.lang = ''; + }); + it('Formats a price in USD', () => { const price = Formatters.price(priceField, 'en'); expect(price).toEqual('$100.99'); }); + it('Formats a price in USD with no provided locale', () => { + document.documentElement.lang = 'en'; const price = Formatters.price(priceField); expect(price).toEqual('$100.99'); }); + it('Formats a price in USD with a non-en locale', () => { const price = Formatters.price(priceField, 'fr'); expect(price).toEqual('100,99 $US'); @@ -76,6 +99,7 @@ describe('Formatters', () => { const price = Formatters.price(priceField); expect(price).toEqual('€100.99'); }); + it('Formats a price in EUR with a non-en locale', () => { priceField.currencyCode = 'EUR-Euro'; const price = Formatters.price(priceField, 'fr'); From 80cc0817a252ce9fe88552d2356222ac92f5b2dd Mon Sep 17 00:00:00 2001 From: Yen Truong <36055303+yen-tt@users.noreply.github.com> Date: Fri, 24 Sep 2021 11:18:46 -0400 Subject: [PATCH 05/22] Automate PR from master to develp (#959) - add github action to create pr from master/main to develop on push to master/main (yml file from generator-slapshot repo) J=SLAP-1357 --- .github/workflows/sync_develop_and_main.yml | 27 +++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 .github/workflows/sync_develop_and_main.yml diff --git a/.github/workflows/sync_develop_and_main.yml b/.github/workflows/sync_develop_and_main.yml new file mode 100644 index 000000000..3c1bfb9d1 --- /dev/null +++ b/.github/workflows/sync_develop_and_main.yml @@ -0,0 +1,27 @@ +name: create PR from main to develop + +on: + push: + branches: [main, master] + +permissions: + contents: read + pull-requests: write + +jobs: + createPullRequest: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - name: extract package version + id: vars + run: | + PACKAGE_VERSION="v$(cat ./package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[",]//g' | tr -d '[[:space:]]')" + echo ::set-output name=tag::${PACKAGE_VERSION} + - uses: repo-sync/pull-request@v2 + with: + source_branch: "${{ github.event.repository.default_branch }}" + destination_branch: "develop" + pr_title: "Merge ${{ github.event.repository.default_branch }} (${{ steps.vars.outputs.tag }}) into develop" + pr_body: "Merge ${{ github.event.repository.default_branch }} (${{ steps.vars.outputs.tag }}) into develop" + github_token: ${{ secrets.GITHUB_TOKEN }} From b98b5497dd5ec854254be0b5ff12ef4e7895a7c3 Mon Sep 17 00:00:00 2001 From: Oliver Shi Date: Mon, 4 Oct 2021 09:51:47 -0400 Subject: [PATCH 06/22] dont hide ANSWERS.onReady errors (#964) Prior to this change, all errors that occurred during ANSWERS.onReady were being swallowed up by the .catch(). This could lead to very frustrating debugging experiences, and also hide critical errors like a null pointer error. J=SLAP-1616 TEST=manual see that errors are no longer hidden --- script/core.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/script/core.hbs b/script/core.hbs index 6b78f0e3e..8f5798b5e 100644 --- a/script/core.hbs +++ b/script/core.hbs @@ -106,6 +106,7 @@ }); } }).catch(err => { + console.error(err); window.AnswersExperience.AnswersInitializedPromise.reject('Answers failed to initialized.'); }); {{> script/after-init}} From 092a19ffda5ed63c35a3eb09ab2075de0afaf2a1 Mon Sep 17 00:00:00 2001 From: nmanu1 <88398086+nmanu1@users.noreply.github.com> Date: Mon, 4 Oct 2021 15:27:31 -0400 Subject: [PATCH 07/22] Update vertical-grid config (#965) Add `verticalLimit` and `universalLimit` to vertical-grid's page-config.json, and have them commented out as default. J=SLAP-1618 TEST=none --- templates/vertical-grid/page-config.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/templates/vertical-grid/page-config.json b/templates/vertical-grid/page-config.json index 242f0d6ea..038b4c683 100644 --- a/templates/vertical-grid/page-config.json +++ b/templates/vertical-grid/page-config.json @@ -65,6 +65,8 @@ "verticalsToConfig": { "": { // The vertical key from your search configuration // "label": "", // The name of the vertical in the section header and the navigation bar + // "verticalLimit": 15, // The result count limit for vertical search + // "universalLimit": 5, // The result count limit for universal search "cardType": "product-prominentimage", // The name of the card to use - e.g. accordion, location, customcard "icon": "star", // The icon to use on the card for this vertical "universalSectionTemplate": "standard" From 350ca683a4adf184e88e8c24b5a998e272283b4d Mon Sep 17 00:00:00 2001 From: Oliver Shi Date: Mon, 4 Oct 2021 15:37:39 -0400 Subject: [PATCH 08/22] add apiKey validation when using injected data and useJWT=false (#962) J=TECHOPS-2183 TEST=manual tested using my local JAMBO_INJECTED DATA tested that errors are emitted when using the deprecated injected api key, but the build continues tested that the build throws an error when no production or deprecated api key exist --- hooks/templatedatavalidator.js | 46 +++++++++++++++++++++++++++++++--- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/hooks/templatedatavalidator.js b/hooks/templatedatavalidator.js index 6f120ba08..7eaafe50e 100644 --- a/hooks/templatedatavalidator.js +++ b/hooks/templatedatavalidator.js @@ -1,6 +1,6 @@ const path = require('path'); const { parseJamboConfig } = require('../commands/helpers/utils/jamboconfigutils'); -const { error } = require('../commands/helpers/utils/logger'); +const { error, warn } = require('../commands/helpers/utils/logger'); /** * Validates the template data and partials used during jambo build. @@ -13,8 +13,9 @@ const { error } = require('../commands/helpers/utils/logger'); */ module.exports = function (pageData, partials) { const jamboConfig = parseJamboConfig(); + const { JAMBO_INJECTED_DATA } = pageData.env; const validatorResults = [ - isGlobalConfigValid(pageData.global_config), + isGlobalConfigValid(pageData.global_config, JAMBO_INJECTED_DATA), isPageVerticalConfigValid(pageData, jamboConfig, partials) ]; const isValid = validatorResults.every(result => result); @@ -25,13 +26,50 @@ module.exports = function (pageData, partials) { * Validates global config for the page template * * @param {Object} globalConfig + * @param {Object} JAMBO_INJECTED_DATA * @returns {boolean} */ -function isGlobalConfigValid(globalConfig) { - if (!globalConfig.experienceKey) { +function isGlobalConfigValid(globalConfig, JAMBO_INJECTED_DATA) { + const { experienceKey } = globalConfig; + if (!experienceKey) { error('Missing Info: no experienceKey found.'); return false; } + if (globalConfig.useJWT || globalConfig.apiKey) { + return true; + } + + const injectedDataForExperience = JAMBO_INJECTED_DATA.answers.experiences[experienceKey]; + if (!injectedDataForExperience) { + error(`No JAMBO_INJECTED_DATA found for experience key: "${experienceKey}"`); + error(`Found JAMBO_INJECTED_DATA: "${JSON.stringify(JAMBO_INJECTED_DATA, null, 2)}.`); + return false; + } + + const productionApiKey = injectedDataForExperience.configByLabel.PRODUCTION.apiKey; + const deprecatedApiKey = injectedDataForExperience.apiKey; + if (!productionApiKey) { + if (!deprecatedApiKey) { + error(`No injected production api key found for experience key: "${experienceKey}"`); + } else { + warn('No injected production api key found, using the default apiKey instead.'); + } + } + + const stagingApiKey = injectedDataForExperience.configByLabel.STAGING.apiKey; + if (!stagingApiKey) { + if (!deprecatedApiKey) { + error(`No injected staging api key found for experience key: "${experienceKey}"`); + } else { + warn('No injected staging api key found, using the default apiKey instead.'); + } + } + + if ((!productionApiKey || !stagingApiKey) && !deprecatedApiKey) { + error(`JAMBO_INJECTED_DATA is missing an api key.`); + error(`Found JAMBO_INJECTED_DATA: "${JSON.stringify(JAMBO_INJECTED_DATA, null, 2)}.`); + return false; + } return true; } From 4eda44d3d0056998df3b285db1f5c758d30c19e2 Mon Sep 17 00:00:00 2001 From: cea2aj <42848445+cea2aj@users.noreply.github.com> Date: Thu, 7 Oct 2021 16:35:44 -0400 Subject: [PATCH 09/22] Comment out vertical icons (#967) Comment out vertical icons per the HH's request With this change, Icons will no longer appear next to the names of verticals on the universal page by default J=SLAP-1619 TEST=manual, visual Build the local test site and see that icons are no longer there except for where a custom icon url is supplied --- templates/vertical-full-page-map/page-config.json | 2 +- templates/vertical-grid/page-config.json | 2 +- templates/vertical-map/page-config.json | 2 +- templates/vertical-standard/page-config.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/vertical-full-page-map/page-config.json b/templates/vertical-full-page-map/page-config.json index 54bb8016b..3d5142d4a 100644 --- a/templates/vertical-full-page-map/page-config.json +++ b/templates/vertical-full-page-map/page-config.json @@ -66,7 +66,7 @@ // "verticalLimit": 15, // The result count limit for vertical search // "universalLimit": 5, // The result count limit for universal search "cardType": "location-standard", // The name of the card to use - e.g. accordion, location, customcard - "icon": "pin", // The icon to use on the card for this vertical + // "icon": "pin", // The icon to use on the card for this vertical "mapConfig": { //"enablePinClustering": true, // Cluster pins on the map that are close together. Defaults false "mapProvider": "MapBox", // The name of the provider (e.g. Mapbox, Google) diff --git a/templates/vertical-grid/page-config.json b/templates/vertical-grid/page-config.json index 038b4c683..7d1c4279d 100644 --- a/templates/vertical-grid/page-config.json +++ b/templates/vertical-grid/page-config.json @@ -68,7 +68,7 @@ // "verticalLimit": 15, // The result count limit for vertical search // "universalLimit": 5, // The result count limit for universal search "cardType": "product-prominentimage", // The name of the card to use - e.g. accordion, location, customcard - "icon": "star", // The icon to use on the card for this vertical + // "icon": "star", // The icon to use on the card for this vertical "universalSectionTemplate": "standard" } } diff --git a/templates/vertical-map/page-config.json b/templates/vertical-map/page-config.json index 603662232..21beb8b33 100644 --- a/templates/vertical-map/page-config.json +++ b/templates/vertical-map/page-config.json @@ -68,7 +68,7 @@ // "verticalLimit": 15, // The result count limit for vertical search // "universalLimit": 5, // The result count limit for universal search "cardType": "location-standard", // The name of the card to use - e.g. accordion, location, customcard - "icon": "pin", // The icon to use on the card for this vertical + // "icon": "pin", // The icon to use on the card for this vertical "mapConfig": { "mapProvider": "MapBox", // The name of the provider (e.g. Mapbox, Google) "pin": { diff --git a/templates/vertical-standard/page-config.json b/templates/vertical-standard/page-config.json index d67f4fc8e..7286a26f5 100644 --- a/templates/vertical-standard/page-config.json +++ b/templates/vertical-standard/page-config.json @@ -68,7 +68,7 @@ // "verticalLimit": 15, // The result count limit for vertical search // "universalLimit": 5, // The result count limit for universal search "cardType": "standard", // The name of the card to use - e.g. accordion, location, customcard - "icon": "star", // The icon to use on the card for this vertical + // "icon": "star", // The icon to use on the card for this vertical "universalSectionTemplate": "standard" } } From 306e3ab0e3ca7fd28348a588a3c6282c39d77294 Mon Sep 17 00:00:00 2001 From: Oliver Shi Date: Fri, 8 Oct 2021 10:46:04 -0400 Subject: [PATCH 10/22] add sorting facets by optionsOrder (#968) J=SLAP-1631 TEST=manual,auto saw facets were sorted on the people page --- static/js/transform-facets.js | 49 +++++++---- test-site/config-overrides/people.json | 6 +- tests/static/js/transform-facets.js | 111 ++++++++++++++++++++++--- 3 files changed, 138 insertions(+), 28 deletions(-) diff --git a/static/js/transform-facets.js b/static/js/transform-facets.js index 09b715c06..f2c1ddcef 100644 --- a/static/js/transform-facets.js +++ b/static/js/transform-facets.js @@ -12,33 +12,52 @@ export default function transformFacets (facets, config) { } return facets.map(facet => { - const isConfigurationForFacet = facet.fieldId in config.fields; - if (!isConfigurationForFacet) { + const hasConfigurationForFacet = facet.fieldId in config.fields; + if (!hasConfigurationForFacet) { return facet; } - const facetConfig = config.fields[facet.fieldId]; + + if (typeof config.fields[facet.fieldId] !== 'object') { + console.error( + `The "fields" config for ${facet.fieldId} should be an object. ` + + `Received ${config.fields[facet.fieldId]} instead.`); + } + + const { + fieldLabels, + optionsOrder, + ...filterOptionsConfig + } = config.fields[facet.fieldId]; let options = facet.options; - if ('fieldLabels' in facetConfig) { + if (fieldLabels) { options = facet.options.map(option => { - const fieldLabels = facetConfig.fieldLabels; - const displayName = (option.displayName in fieldLabels) ? fieldLabels[option.displayName] : option.displayName; - - return Object.assign({}, option, { displayName }); + return { ...option, displayName }; }) } - const filterOptionsConfig = Object.entries(facetConfig).reduce((filterOptions, [option, value]) => { - if (option !== 'fieldLabels') { - filterOptions[option] = value; + if (optionsOrder) { + if (optionsOrder === 'ASC') { + options = options.sort((a, b) => { + return a.displayName.toString().localeCompare(b.displayName.toString()) + }); + } else if (optionsOrder === 'DESC') { + options = options.sort((a, b) => { + return b.displayName.toString().localeCompare(a.displayName.toString()) + }); + } else { + console.error(`Unknown facet optionsOrder "${optionsOrder}" for the "${facet.fieldId}" facet.`); } - return filterOptions; - }, {}); + } - return Object.assign({}, facet, filterOptionsConfig, { options }); + return { + ...facet, + ...filterOptionsConfig, + options + }; }); -} \ No newline at end of file +} diff --git a/test-site/config-overrides/people.json b/test-site/config-overrides/people.json index 04e824c16..af86372a2 100644 --- a/test-site/config-overrides/people.json +++ b/test-site/config-overrides/people.json @@ -11,12 +11,14 @@ "fieldLabels": { "Frodo": "FRODO !!!", "Marty": "MARTY !!!" - } + }, + "optionsOrder": "ASC" }, "c_employeeDepartment": { "fieldLabels": { "Strategy": "STRATEGY !!!" - } + }, + "optionsOrder": "DESC" } } }, diff --git a/tests/static/js/transform-facets.js b/tests/static/js/transform-facets.js index c498f9344..964a4febe 100644 --- a/tests/static/js/transform-facets.js +++ b/tests/static/js/transform-facets.js @@ -27,13 +27,13 @@ it('can specify both filterOptionsConfig values and fieldLabels', () => { } } const expectedTransformedFacets = [{ - displayName: "Meal type", - fieldId: "c_mealType", + displayName: 'Meal type', + fieldId: 'c_mealType', searchable: true, placeholderText: 'Search...', options: [{ ...defaultOption, - displayName: "BREAKFAST!!!", + displayName: 'BREAKFAST!!!', }] }]; const actualTransformedFacets = transformFacets(defaultFacets, facetsConfig); @@ -51,10 +51,10 @@ it('can specify filterOptionsConfig values', () => { } } const expectedTransformedFacets = [{ - displayName: "Meal type", - fieldId: "c_mealType", + displayName: 'Meal type', + fieldId: 'c_mealType', options: [defaultOption], - placeholderText: "Search", + placeholderText: 'Search', searchable: true, showMoreLimit: 5 }]; @@ -91,11 +91,11 @@ it('fieldLabels updates option displayNames', () => { } } const expectedTransformedFacets = [{ - displayName: "Meal type", - fieldId: "c_mealType", + displayName: 'Meal type', + fieldId: 'c_mealType', options: [{ ...defaultOption, - displayName: "BREAKFAST!!!", + displayName: 'BREAKFAST!!!', value: 'breakfast' }, { ...defaultOption, @@ -113,10 +113,99 @@ it('fieldLabels updates option displayNames', () => { it('facets do not change if fields is not specified in in the config', () => { const facets = [{ - displayName: "Meal type", - fieldId: "c_mealType", + displayName: 'Meal type', + fieldId: 'c_mealType', options: [defaultOption] }]; const actualTransformedFacets = transformFacets(facets, {}); expect(actualTransformedFacets).toEqual(facets); +}); + +describe('optionsOrder', () => { + const facets = [ + { + fieldId: 'c_mealType', + displayName: 'Meal type', + options: [ + { + ...defaultOption, + displayName: 'Breakfast', + value: 'breakfast' + }, + { + ...defaultOption, + displayName: 'Lunch', + value: 'lunch' + }, + { + ...defaultOption, + displayName: 'Dinner', + value: 'dinner' + } + ] + } + ]; + + function createFacetsConfig(optionsOrder, fieldLabels) { + return { + fields: { + c_mealType: { + fieldLabels: fieldLabels || { + Breakfast: 'ze breakfast', + Lunch: 'a lunch', + Dinner: 'duh dinner' + }, + optionsOrder + } + } + } + }; + + it('works for ASC order', () => { + const actualOptions = transformFacets(facets, createFacetsConfig('ASC'))[0].options; + expect(actualOptions[0].displayName).toEqual('a lunch'); + expect(actualOptions[1].displayName).toEqual('duh dinner'); + expect(actualOptions[2].displayName).toEqual('ze breakfast'); + }) + + it('works for DESC order', () => { + const actualOptions = transformFacets(facets, createFacetsConfig('DESC'))[0].options; + expect(actualOptions[0].displayName).toEqual('ze breakfast'); + expect(actualOptions[1].displayName).toEqual('duh dinner'); + expect(actualOptions[2].displayName).toEqual('a lunch'); + }) + + it('logs an error if you use an unknown optionsOrder, and does not try to sort', () => { + const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {}); + expect(consoleError).toHaveBeenCalledTimes(0); + const actualOptions = transformFacets(facets, createFacetsConfig('PACER'))[0].options; + expect(consoleError).toHaveBeenCalledWith( + 'Unknown facet optionsOrder "PACER" for the "c_mealType" facet.'); + consoleError.mockRestore(); + expect(actualOptions[0].displayName).toEqual('ze breakfast'); + expect(actualOptions[1].displayName).toEqual('a lunch'); + expect(actualOptions[2].displayName).toEqual('duh dinner'); + }) + + it('works with ASC number display names', () => { + const actualOptions = transformFacets(facets, createFacetsConfig('ASC', { + Breakfast: 3, + Lunch: 2, + Dinner: 1 + }))[0].options; + expect(actualOptions[0].displayName).toEqual(1); + expect(actualOptions[1].displayName).toEqual(2); + expect(actualOptions[2].displayName).toEqual(3); + }) + + it('works with DESC number display names', () => { + const actualOptions = transformFacets(facets, createFacetsConfig('DESC', { + Breakfast: 2, + Lunch: 3, + Dinner: 1 + }))[0].options; + expect(actualOptions[0].displayName).toEqual(3); + expect(actualOptions[1].displayName).toEqual(2); + expect(actualOptions[2].displayName).toEqual(1); + }) }); \ No newline at end of file From d9bf11104dc2094fb0397adc146973c463f19459 Mon Sep 17 00:00:00 2001 From: nmanu1 <88398086+nmanu1@users.noreply.github.com> Date: Mon, 11 Oct 2021 11:03:47 -0400 Subject: [PATCH 11/22] Add visitor support (#970) Add a runtime config listener for changes to `visitor`. J=SLAP-1621 TEST=auto, manual Add jest test for visitor listener and check in test-site if `visitor` is sent in analytics events and searches in standard and iframe integration. --- static/js/answers-experience.js | 4 +++- static/js/runtime-config-listeners/visitor.js | 9 +++++++++ tests/static/js/answers-experience.js | 12 ++++++++++++ 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 static/js/runtime-config-listeners/visitor.js create mode 100644 tests/static/js/answers-experience.js diff --git a/static/js/answers-experience.js b/static/js/answers-experience.js index 899c98bc2..9b528ac0f 100644 --- a/static/js/answers-experience.js +++ b/static/js/answers-experience.js @@ -2,6 +2,7 @@ import DeferredPromise from './deferred-promise'; import analyticsListener from './runtime-config-listeners/analytics'; import sessionTrackingListener from './runtime-config-listeners/session-tracking'; import querySourceListener from './runtime-config-listeners/query-source'; +import visitorListener from './runtime-config-listeners/visitor'; /** * @typedef {import('./runtime-config.js').RuntimeConfigListener} RuntimeConfigListener @@ -14,7 +15,8 @@ export default class AnswersExperience { this._runtimeConfigListeners = [ analyticsListener, sessionTrackingListener, - querySourceListener + querySourceListener, + visitorListener ]; this._registerRuntimeConfigListeners(); diff --git a/static/js/runtime-config-listeners/visitor.js b/static/js/runtime-config-listeners/visitor.js new file mode 100644 index 000000000..47f1bee2e --- /dev/null +++ b/static/js/runtime-config-listeners/visitor.js @@ -0,0 +1,9 @@ +/** + * @type {import('../runtime-config.js').RuntimeConfigListener} + */ + export default { + key: 'visitor', + callback: value => { + ANSWERS.setVisitor(value); + } +} \ No newline at end of file diff --git a/tests/static/js/answers-experience.js b/tests/static/js/answers-experience.js new file mode 100644 index 000000000..fbb3a032f --- /dev/null +++ b/tests/static/js/answers-experience.js @@ -0,0 +1,12 @@ +import AnswersExperience from '../../../static/js/answers-experience'; +import RuntimeConfig from '../../../static/js/runtime-config'; + +describe('AnswersExperience works properly', () => { + it('visitor listener is called when visitor is set', () => { + const runtimeConfig = new RuntimeConfig(); + const experience = new AnswersExperience(runtimeConfig); + const callListenerSpy = jest.spyOn(experience.runtimeConfig, '_callKeySpecificListeners'); + experience.runtimeConfig.set('visitor', { id: '123', idMethod: 'test' }); + expect(callListenerSpy).toHaveBeenCalledWith('update', 'visitor'); + }); +}); \ No newline at end of file From c288da543c1f52b803d776b6cf1f9b798ba71e1c Mon Sep 17 00:00:00 2001 From: Oliver Shi Date: Mon, 11 Oct 2021 16:56:55 -0400 Subject: [PATCH 12/22] handle different optionsFieldType (#971) Originally, I thought running a toString() on the displayName would handle number display names. But, string.prototype.localeCompare doesn't work with number strings the way I hoped it would. If you try to sort an array of numbers like [100, 20, 120], the result will be [100, 120, 20] rather than the expected [20, 100, 120]. My unit tests only had single digit numbers, so they didn't run test that case. TEST=auto J=SLAP-1631 --- static/js/transform-facets.js | 57 ++++++++++++++++++++------- tests/static/js/transform-facets.js | 61 +++++++++++++++++++++-------- 2 files changed, 88 insertions(+), 30 deletions(-) diff --git a/static/js/transform-facets.js b/static/js/transform-facets.js index f2c1ddcef..c54e85786 100644 --- a/static/js/transform-facets.js +++ b/static/js/transform-facets.js @@ -6,8 +6,8 @@ * @param {FilterOptionsConfig} config the config of the FilterOptionsConfig from answers-search-ui * @returns {(DisplayableFacet | FilterOptionsConfig)[]} */ -export default function transformFacets (facets, config) { - if(!config || !('fields' in config)) { +export default function transformFacets(facets, config) { + if (!config || !('fields' in config)) { return facets; } @@ -26,6 +26,7 @@ export default function transformFacets (facets, config) { const { fieldLabels, optionsOrder, + optionsFieldType = 'STRING', ...filterOptionsConfig } = config.fields[facet.fieldId]; @@ -41,19 +42,9 @@ export default function transformFacets (facets, config) { } if (optionsOrder) { - if (optionsOrder === 'ASC') { - options = options.sort((a, b) => { - return a.displayName.toString().localeCompare(b.displayName.toString()) - }); - } else if (optionsOrder === 'DESC') { - options = options.sort((a, b) => { - return b.displayName.toString().localeCompare(a.displayName.toString()) - }); - } else { - console.error(`Unknown facet optionsOrder "${optionsOrder}" for the "${facet.fieldId}" facet.`); - } + options = sortFacetOptions(options, optionsOrder, optionsFieldType, facet.fieldId); } - + return { ...facet, ...filterOptionsConfig, @@ -61,3 +52,41 @@ export default function transformFacets (facets, config) { }; }); } + +/** + * Sorts the facet options in place. + * + * @param {{ displayName: string }[]} options The facet options to sort. + * @param {'ASC' | 'DESC'} optionsOrder + * @param {'STRING' | 'INT'} optionsFieldType + * @param {string} fieldId + * @returns {{ displayName: string }[]} + */ +function sortFacetOptions(options, optionsOrder, optionsFieldType, fieldId) { + const getSortComparator = () => { + if (optionsFieldType === 'STRING') { + return (a, b) => a.displayName.localeCompare(b.displayName); + } else if (optionsFieldType === 'INT') { + return (a, b) => parseInt(a.displayName) - parseInt(b.displayName); + } else { + console.error(`Unknown facet optionsFieldType "${optionsFieldType}" for the "${fieldId}" facet.`); + return undefined; + } + } + const applyDirectionToComparator = (comparator) => { + if (!comparator) { + return undefined; + } + + if (optionsOrder === 'ASC') { + return comparator; + } else if (optionsOrder === 'DESC') { + return (a, b) => -1 * comparator(a, b) + } else { + console.error(`Unknown facet optionsOrder "${optionsOrder}" for the "${fieldId}" facet.`); + return undefined; + } + } + + return options.sort(applyDirectionToComparator(getSortComparator())) +} diff --git a/tests/static/js/transform-facets.js b/tests/static/js/transform-facets.js index 964a4febe..5a00be8a6 100644 --- a/tests/static/js/transform-facets.js +++ b/tests/static/js/transform-facets.js @@ -146,7 +146,7 @@ describe('optionsOrder', () => { } ]; - function createFacetsConfig(optionsOrder, fieldLabels) { + function createFacetsConfig(optionsOrder, optionsFieldType, fieldLabels) { return { fields: { c_mealType: { @@ -155,6 +155,7 @@ describe('optionsOrder', () => { Lunch: 'a lunch', Dinner: 'duh dinner' }, + optionsFieldType: optionsFieldType || 'STRING', optionsOrder } } @@ -175,37 +176,65 @@ describe('optionsOrder', () => { expect(actualOptions[2].displayName).toEqual('a lunch'); }) - it('logs an error if you use an unknown optionsOrder, and does not try to sort', () => { + it('logs an error if you use an unknown optionsOrder', () => { const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {}); expect(consoleError).toHaveBeenCalledTimes(0); - const actualOptions = transformFacets(facets, createFacetsConfig('PACER'))[0].options; + transformFacets(facets, createFacetsConfig('PACER'))[0].options; expect(consoleError).toHaveBeenCalledWith( 'Unknown facet optionsOrder "PACER" for the "c_mealType" facet.'); consoleError.mockRestore(); - expect(actualOptions[0].displayName).toEqual('ze breakfast'); - expect(actualOptions[1].displayName).toEqual('a lunch'); - expect(actualOptions[2].displayName).toEqual('duh dinner'); + }) + + it('logs an error if you use an unknown optionsFieldType, and does not try to sort', () => { + const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {}); + expect(consoleError).toHaveBeenCalledTimes(0); + transformFacets(facets, createFacetsConfig('ASC', 'FAKEINT'))[0].options; + expect(consoleError).toHaveBeenCalledWith( + 'Unknown facet optionsFieldType "FAKEINT" for the "c_mealType" facet.'); + consoleError.mockRestore(); }) it('works with ASC number display names', () => { - const actualOptions = transformFacets(facets, createFacetsConfig('ASC', { + const actualOptions = transformFacets(facets, createFacetsConfig('ASC', 'INT', { Breakfast: 3, Lunch: 2, - Dinner: 1 + Dinner: 100 }))[0].options; - expect(actualOptions[0].displayName).toEqual(1); - expect(actualOptions[1].displayName).toEqual(2); - expect(actualOptions[2].displayName).toEqual(3); + expect(actualOptions[0].displayName).toEqual(2); + expect(actualOptions[1].displayName).toEqual(3); + expect(actualOptions[2].displayName).toEqual(100); }) it('works with DESC number display names', () => { - const actualOptions = transformFacets(facets, createFacetsConfig('DESC', { + const actualOptions = transformFacets(facets, createFacetsConfig('DESC', 'INT', { Breakfast: 2, Lunch: 3, - Dinner: 1 + Dinner: 100 + }))[0].options; + expect(actualOptions[0].displayName).toEqual(100); + expect(actualOptions[1].displayName).toEqual(3); + expect(actualOptions[2].displayName).toEqual(2); + }) + + it('works with ASC number display names that need to be parsed', () => { + const actualOptions = transformFacets(facets, createFacetsConfig('ASC', 'INT', { + Breakfast: '3', + Lunch: '2', + Dinner: '100' + }))[0].options; + expect(actualOptions[0].displayName).toEqual('2'); + expect(actualOptions[1].displayName).toEqual('3'); + expect(actualOptions[2].displayName).toEqual('100'); + }) + + it('works with DESC number display names that need to be parsed', () => { + const actualOptions = transformFacets(facets, createFacetsConfig('DESC', 'INT', { + Breakfast: '2', + Lunch: '3', + Dinner: '100' }))[0].options; - expect(actualOptions[0].displayName).toEqual(3); - expect(actualOptions[1].displayName).toEqual(2); - expect(actualOptions[2].displayName).toEqual(1); + expect(actualOptions[0].displayName).toEqual('100'); + expect(actualOptions[1].displayName).toEqual('3'); + expect(actualOptions[2].displayName).toEqual('2'); }) }); \ No newline at end of file From d3d591b38092c6ccb321ba697b7ccf267e55e892 Mon Sep 17 00:00:00 2001 From: nmanu1 <88398086+nmanu1@users.noreply.github.com> Date: Tue, 12 Oct 2021 12:03:39 -0400 Subject: [PATCH 13/22] Add generic thumbs up/down (#973) Add generic thumbs up/down feedback buttons and analytics to all cards (#938, #939, #940). - Include a `feedback` config option in `dataForRender` so user can specify if feedback buttons should appear on the card or not. - Create a shared partial for the buttons that is used in all cards, including direct answer cards - Update analytics for direct answer feedback with additional event attributes. J=SLAP-1544, 1545 TEST=manual Smoke testing to see if thumbs up/down buttons function as expected on all cards and send analytics. --- cards/card_component.js | 72 ++++++++++- cards/common-partials/thumbsfeedback.hbs | 54 ++++++++ cards/document-standard/component.js | 6 +- cards/document-standard/template.hbs | 9 +- cards/event-standard/component.js | 6 +- cards/event-standard/template.hbs | 35 +++--- cards/faq-accordion/component.js | 26 +++- cards/faq-accordion/template.hbs | 41 ++++--- .../component.js | 6 +- .../template.hbs | 9 +- cards/job-standard/component.js | 6 +- cards/job-standard/template.hbs | 9 +- cards/link-standard/component.js | 4 + cards/link-standard/template.hbs | 7 +- cards/location-standard/component.js | 6 +- cards/location-standard/template.hbs | 9 +- cards/menuitem-standard/component.js | 6 +- cards/menuitem-standard/template.hbs | 25 ++-- cards/multilang-event-standard/component.js | 6 +- cards/multilang-event-standard/template.hbs | 37 +++--- cards/multilang-faq-accordion/component.js | 26 +++- cards/multilang-faq-accordion/template.hbs | 41 ++++--- .../component.js | 6 +- .../template.hbs | 9 +- cards/multilang-job-standard/component.js | 6 +- cards/multilang-job-standard/template.hbs | 9 +- cards/multilang-link-standard/component.js | 4 + cards/multilang-link-standard/template.hbs | 7 +- .../multilang-location-standard/component.js | 6 +- .../multilang-location-standard/template.hbs | 9 +- .../multilang-menuitem-standard/component.js | 6 +- .../multilang-menuitem-standard/template.hbs | 25 ++-- .../component.js | 4 + .../template.hbs | 5 + .../component.js | 6 +- .../template.hbs | 7 +- .../component.js | 6 +- .../template.hbs | 7 +- cards/multilang-product-standard/component.js | 4 + cards/multilang-product-standard/template.hbs | 23 ++-- .../component.js | 6 +- .../template.hbs | 9 +- .../component.js | 6 +- .../template.hbs | 7 +- cards/multilang-standard/component.js | 6 +- cards/multilang-standard/template.hbs | 9 +- .../component.js | 4 + .../template.hbs | 5 + cards/product-prominentimage/component.js | 6 +- cards/product-prominentimage/template.hbs | 7 +- cards/product-prominentvideo/component.js | 6 +- cards/product-prominentvideo/template.hbs | 7 +- cards/product-standard/component.js | 4 + cards/product-standard/template.hbs | 23 ++-- cards/professional-location/component.js | 6 +- cards/professional-location/template.hbs | 9 +- cards/professional-standard/component.js | 6 +- cards/professional-standard/template.hbs | 7 +- cards/standard/component.js | 6 +- cards/standard/template.hbs | 9 +- .../allfields-standard/component.js | 4 +- .../allfields-standard/template.hbs | 52 +------- directanswercards/card_component.js | 57 +++------ .../documentsearch-standard/component.js | 4 +- .../documentsearch-standard/template.hbs | 52 +------- .../multilang-allfields-standard/component.js | 4 +- .../multilang-allfields-standard/template.hbs | 52 +------- script/core.hbs | 5 + static/js/HitchhikerJS.js | 3 + static/js/dom.js | 30 +++++ .../scss/answers/cards/document-standard.scss | 8 ++ static/scss/answers/cards/event-standard.scss | 8 ++ static/scss/answers/cards/faq-accordion.scss | 19 +++ .../scss/answers/cards/location-standard.scss | 23 ++++ .../product-prominentimage-clickable.scss | 18 +++ .../answers/cards/product-prominentimage.scss | 18 +++ .../answers/cards/product-prominentvideo.scss | 18 +++ static/scss/answers/cards/standard.scss | 8 ++ .../directanswercards/allfields-standard.scss | 8 ++ .../documentsearch-standard.scss | 12 ++ .../interactive-map/VerticalFullPageMap.scss | 8 ++ static/scss/answers/module.scss | 115 ++++++++++++++++-- test-site/config/global_config.json | 2 +- translations/messages.pot | 50 +++++++- 84 files changed, 948 insertions(+), 373 deletions(-) create mode 100644 cards/common-partials/thumbsfeedback.hbs create mode 100644 static/js/dom.js diff --git a/cards/card_component.js b/cards/card_component.js index e946baaef..54c862afa 100644 --- a/cards/card_component.js +++ b/cards/card_component.js @@ -30,6 +30,38 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { }) ); } + + this.addFeedbackListeners(); + } + + addFeedbackListeners() { + const feedbackFormSelector = '.js-HitchhikerCard-feedbackForm'; + let feedbackFormEl = this._container.querySelector(feedbackFormSelector); + if (feedbackFormEl) { + // For WCAG compliance, the feedback should be a submittable form + feedbackFormEl.addEventListener('submit', (e) => { + const formTargetEl = e.target; + const isGood = formTargetEl.querySelector('input:checked').value === 'true'; + + this.reportQuality(isGood); + this.updateState({ + feedbackSubmitted: true + }); + }); + + let thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput'); + if (thumbSelectorEls) { + thumbSelectorEls.forEach(el => { + el.addEventListener('click', (e) => { + let input = el.querySelector('input'); + if (input) { + input.checked = true; + } + HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit'); + }); + }); + } + } } setState(data) { @@ -46,7 +78,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { cardData.titleEventOptions = updatedEventOptions; } - let { details, showMoreDetails } = cardData; + const { details, showMoreDetails } = cardData; const cardDetails = details || ''; const cardShowMoreConfig = showMoreDetails || {}; @@ -56,7 +88,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { // The card's details must extend past this limit as well for the toggling to be enabled. const showExcessDetailsToggle = showMoreLimit && cardDetails.length > showMoreLimit; - let truncatedDetails = showExcessDetailsToggle + const truncatedDetails = showExcessDetailsToggle ? `${cardDetails.substring(0, showMoreLimit)}...` : ''; @@ -78,6 +110,42 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { } } + /** + * reportQuality will send the quality feedback to analytics + * @param {boolean} isGood true if the answer is what you were looking for + */ + reportQuality(isGood) { + /** + * EventTypes are explicit strings defined + * for what the server expects for analytics. + * + * @enum + */ + const EventTypes = { + THUMBS_UP: 'THUMBS_UP', + THUMBS_DOWN: 'THUMBS_DOWN' + }; + const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN; + const event = new ANSWERS.AnalyticsEvent(eventType) + .addOptions({ + directAnswer: false, + verticalKey: this.verticalKey, + searcher: this._config.isUniversal ? 'UNIVERSAL' : 'VERTICAL', + entityId: this.result.id + }); + + this.analyticsReporter.report(event); + } + + /** + * updateState enables for partial updates (the delta between the old and new) + * @type {object} The new state to apply to the old + */ + updateState (state = {}) { + const newState = Object.assign({}, this.getState(), state); + this.setState(newState); + } + addDefaultEventOptions(eventOptions = {}) { return Object.assign({}, { verticalKey: this.verticalKey, diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs new file mode 100644 index 000000000..a211443a7 --- /dev/null +++ b/cards/common-partials/thumbsfeedback.hbs @@ -0,0 +1,54 @@ +{{#if directAnswerClass}} + {{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}} +{{else}} + {{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}} +{{/if}} + +{{#*inline 'feedback'}} +
+
+ {{#if feedbackSubmitted}} +
+ {{feedbackTextOnSubmission}} +
+ {{else}} + {{#if feedbackText}} +
+ {{feedbackText}} +
+ {{/if}} +
+
+
+ + +
+ +
+
+ {{/if}} +
+
+{{/inline}} diff --git a/cards/document-standard/component.js b/cards/document-standard/component.js index f1f55f707..7e79f93a8 100644 --- a/cards/document-standard/component.js +++ b/cards/document-standard/component.js @@ -48,7 +48,11 @@ class document_standardCardComponent extends BaseCard['document-standard'] { eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs index a9f3b0402..990728dd7 100644 --- a/cards/document-standard/template.hbs +++ b/cards/document-standard/template.hbs @@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -90,4 +95,4 @@ {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/event-standard/component.js b/cards/event-standard/component.js index a9cb2278f..42764a44f 100644 --- a/cards/event-standard/component.js +++ b/cards/event-standard/component.js @@ -48,7 +48,11 @@ class event_standardCardComponent extends BaseCard['event-standard'] { eventType: 'DRIVING_DIRECTIONS', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs index 6fd9a597e..69841178f 100644 --- a/cards/event-standard/template.hbs +++ b/cards/event-standard/template.hbs @@ -32,24 +32,29 @@ {{/if}} {{> 'details'}} - {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} -
- {{#if (all card.CTA1.url card.CTA1.label)}} -
- {{#with card.CTA1}} - {{> CTA }} - {{/with}} +
+ {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} +
+ {{#if (all card.CTA1.url card.CTA1.label)}} +
+ {{#with card.CTA1}} + {{> CTA }} + {{/with}} +
+ {{/if}} + {{#if (all card.CTA2.url card.CTA2.label)}} +
+ {{#with card.CTA2}} + {{> CTA }} + {{/with}} +
+ {{/if}}
{{/if}} - {{#if (all card.CTA2.url card.CTA2.label)}} -
- {{#with card.CTA2}} - {{> CTA }} - {{/with}} -
+ {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} {{/if}}
- {{/if}}
@@ -109,4 +114,4 @@ {{label}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/faq-accordion/component.js b/cards/faq-accordion/component.js index f05c1e8ca..ff6b4db0f 100644 --- a/cards/faq-accordion/component.js +++ b/cards/faq-accordion/component.js @@ -47,6 +47,10 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] { eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }), // ariaLabel: '', }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } @@ -64,11 +68,29 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] { const contentEl = this._container.querySelector(accordionContentSelector); let isExpanded = this._container.querySelector(`.${accordionExpandedClass}`); - contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`; + + const cardEl = this._container.querySelector(accordionCardSelector); const linkEls = contentEl.querySelectorAll('a'); + + if (this.stayExpanded && this.getState('feedbackSubmitted')) { + isExpanded = true; + cardEl.classList.add(accordionExpandedClass); + accordionToggleEl.setAttribute('aria-expanded', 'true'); + contentEl.setAttribute('aria-hidden', 'false'); + } + contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`; this._setLinksInteractivity(linkEls, isExpanded); - const cardEl = this._container.querySelector(accordionCardSelector); + this.stayExpanded = false; + + const thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput'); + if (thumbSelectorEls) { + thumbSelectorEls.forEach(el => { + el.addEventListener('click', (e) => { + this.stayExpanded = true; + }); + }); + } accordionToggleEl.addEventListener('click', function() { isExpanded = !isExpanded; diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs index fd73c014d..2906450f0 100644 --- a/cards/faq-accordion/template.hbs +++ b/cards/faq-accordion/template.hbs @@ -19,24 +19,29 @@ {{/if}} {{> 'details'}} - {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}} -
- {{#if card.CTA1.url}} -
- {{#with card.CTA1}} - {{> CTA }} - {{/with}} +
+ {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}} +
+ {{#if card.CTA1.url}} +
+ {{#with card.CTA1}} + {{> CTA }} + {{/with}} +
+ {{/if}} + {{#if card.CTA2.url}} +
+ {{#with card.CTA2}} + {{> CTA }} + {{/with}} +
+ {{/if}}
- {{/if}} - {{#if card.CTA2.url}} -
- {{#with card.CTA2}} - {{> CTA }} - {{/with}} -
- {{/if}} -
- {{/if}} + {{/if}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -95,4 +100,4 @@ {{label}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/financial-professional-location/component.js b/cards/financial-professional-location/component.js index 033539bba..3f4267b0e 100644 --- a/cards/financial-professional-location/component.js +++ b/cards/financial-professional-location/component.js @@ -64,7 +64,11 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs index 76021ecac..f92ff84c7 100644 --- a/cards/financial-professional-location/template.hbs +++ b/cards/financial-professional-location/template.hbs @@ -19,7 +19,12 @@ {{> list }} {{> phone }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -197,4 +202,4 @@ Close Card -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/job-standard/component.js b/cards/job-standard/component.js index 17893ce3a..91577d553 100644 --- a/cards/job-standard/component.js +++ b/cards/job-standard/component.js @@ -39,7 +39,11 @@ class job_standardCardComponent extends BaseCard['job-standard'] { eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', // Accessible text providing a descriptive label for the CTA - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs index d1535314a..212c50c7b 100644 --- a/cards/job-standard/template.hbs +++ b/cards/job-standard/template.hbs @@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -112,4 +117,4 @@ {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/link-standard/component.js b/cards/link-standard/component.js index 5061223ae..e8ef4714f 100644 --- a/cards/link-standard/component.js +++ b/cards/link-standard/component.js @@ -28,6 +28,10 @@ class link_standardCardComponent extends BaseCard['link-standard'] { // showLessText: 'Show less' // Label when toggle will hide truncated text // }, details: profile.htmlSnippet, // The text in the body of the card + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs index 206a6d2f3..0e60c4c40 100644 --- a/cards/link-standard/template.hbs +++ b/cards/link-standard/template.hbs @@ -4,6 +4,11 @@ {{> subtitle }}
{{> details }} +
+ {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -67,4 +72,4 @@ {{/if}} {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/location-standard/component.js b/cards/location-standard/component.js index 8e997c306..7b17bfc03 100644 --- a/cards/location-standard/component.js +++ b/cards/location-standard/component.js @@ -53,7 +53,11 @@ class location_standardCardComponent extends BaseCard['location-standard'] { eventType: 'DRIVING_DIRECTIONS', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs index a12a0ded0..cdb4356d6 100644 --- a/cards/location-standard/template.hbs +++ b/cards/location-standard/template.hbs @@ -24,7 +24,12 @@ {{> contactInfo }} {{> details }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -208,4 +213,4 @@ Close Card -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/menuitem-standard/component.js b/cards/menuitem-standard/component.js index c0c6ef15e..1b3ad11ca 100644 --- a/cards/menuitem-standard/component.js +++ b/cards/menuitem-standard/component.js @@ -54,7 +54,11 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-standard'] { eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs index 9c9966794..ceca3bf20 100644 --- a/cards/menuitem-standard/template.hbs +++ b/cards/menuitem-standard/template.hbs @@ -8,16 +8,21 @@ {{> list }} {{> details }} - {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} -
- {{#with card.CTA1}} - {{> CTA ctaName="primaryCTA" }} - {{/with}} - {{#with card.CTA2}} - {{> CTA ctaName="secondaryCTA" }} - {{/with}} +
+ {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} +
+ {{#with card.CTA1}} + {{> CTA ctaName="primaryCTA" }} + {{/with}} + {{#with card.CTA2}} + {{> CTA ctaName="secondaryCTA" }} + {{/with}} +
+ {{/if}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
- {{/if}}
@@ -132,4 +137,4 @@ {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/multilang-event-standard/component.js b/cards/multilang-event-standard/component.js index af223357c..cfc0f07d6 100644 --- a/cards/multilang-event-standard/component.js +++ b/cards/multilang-event-standard/component.js @@ -48,7 +48,11 @@ class multilang_event_standardCardComponent extends BaseCard['multilang-event-st eventType: 'DRIVING_DIRECTIONS', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs index 6fd9a597e..2c275320a 100644 --- a/cards/multilang-event-standard/template.hbs +++ b/cards/multilang-event-standard/template.hbs @@ -32,24 +32,29 @@ {{/if}} {{> 'details'}} - {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} -
- {{#if (all card.CTA1.url card.CTA1.label)}} -
- {{#with card.CTA1}} - {{> CTA }} - {{/with}} -
+
+ {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} +
+ {{#if (all card.CTA1.url card.CTA1.label)}} +
+ {{#with card.CTA1}} + {{> CTA }} + {{/with}} +
+ {{/if}} + {{#if (all card.CTA2.url card.CTA2.label)}} +
+ {{#with card.CTA2}} + {{> CTA }} + {{/with}} +
+ {{/if}} +
{{/if}} - {{#if (all card.CTA2.url card.CTA2.label)}} -
- {{#with card.CTA2}} - {{> CTA }} - {{/with}} -
+ {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} {{/if}}
- {{/if}}
@@ -109,4 +114,4 @@ {{label}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/multilang-faq-accordion/component.js b/cards/multilang-faq-accordion/component.js index 529fbb14a..c32c7a1ca 100644 --- a/cards/multilang-faq-accordion/component.js +++ b/cards/multilang-faq-accordion/component.js @@ -47,6 +47,10 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }), // ariaLabel: '', }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } @@ -64,11 +68,29 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor const contentEl = this._container.querySelector(accordionContentSelector); let isExpanded = this._container.querySelector(`.${accordionExpandedClass}`); - contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`; + + const cardEl = this._container.querySelector(accordionCardSelector); const linkEls = contentEl.querySelectorAll('a'); + + if (this.stayExpanded && this.getState('feedbackSubmitted')) { + isExpanded = true; + cardEl.classList.add(accordionExpandedClass); + accordionToggleEl.setAttribute('aria-expanded', 'true'); + contentEl.setAttribute('aria-hidden', 'false'); + } + contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`; this._setLinksInteractivity(linkEls, isExpanded); - const cardEl = this._container.querySelector(accordionCardSelector); + this.stayExpanded = false; + + const thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput'); + if (thumbSelectorEls) { + thumbSelectorEls.forEach(el => { + el.addEventListener('click', (e) => { + this.stayExpanded = true; + }); + }); + } accordionToggleEl.addEventListener('click', function() { isExpanded = !isExpanded; diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs index fd73c014d..2906450f0 100644 --- a/cards/multilang-faq-accordion/template.hbs +++ b/cards/multilang-faq-accordion/template.hbs @@ -19,24 +19,29 @@ {{/if}} {{> 'details'}} - {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}} -
- {{#if card.CTA1.url}} -
- {{#with card.CTA1}} - {{> CTA }} - {{/with}} +
+ {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}} +
+ {{#if card.CTA1.url}} +
+ {{#with card.CTA1}} + {{> CTA }} + {{/with}} +
+ {{/if}} + {{#if card.CTA2.url}} +
+ {{#with card.CTA2}} + {{> CTA }} + {{/with}} +
+ {{/if}}
- {{/if}} - {{#if card.CTA2.url}} -
- {{#with card.CTA2}} - {{> CTA }} - {{/with}} -
- {{/if}} -
- {{/if}} + {{/if}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -95,4 +100,4 @@ {{label}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/multilang-financial-professional-location/component.js b/cards/multilang-financial-professional-location/component.js index 07595f9b3..002623931 100644 --- a/cards/multilang-financial-professional-location/component.js +++ b/cards/multilang-financial-professional-location/component.js @@ -64,7 +64,11 @@ class multilang_financial_professional_locationCardComponent extends BaseCard['m eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs index a802076a3..90999f442 100644 --- a/cards/multilang-financial-professional-location/template.hbs +++ b/cards/multilang-financial-professional-location/template.hbs @@ -19,7 +19,12 @@ {{> list }} {{> phone }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -197,4 +202,4 @@ {{translate phrase='Close Card' context='Close is a verb'}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/multilang-job-standard/component.js b/cards/multilang-job-standard/component.js index db073bd0c..5df6f8631 100644 --- a/cards/multilang-job-standard/component.js +++ b/cards/multilang-job-standard/component.js @@ -39,7 +39,11 @@ class multilang_job_standardCardComponent extends BaseCard['multilang-job-standa eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', // Accessible text providing a descriptive label for the CTA - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs index d1535314a..212c50c7b 100644 --- a/cards/multilang-job-standard/template.hbs +++ b/cards/multilang-job-standard/template.hbs @@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -112,4 +117,4 @@ {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/multilang-link-standard/component.js b/cards/multilang-link-standard/component.js index 2e1b5e74d..7eb07832a 100644 --- a/cards/multilang-link-standard/component.js +++ b/cards/multilang-link-standard/component.js @@ -28,6 +28,10 @@ class multilang_link_standardCardComponent extends BaseCard['multilang-link-stan // showLessText: {{ translateJS phrase='Show less' }} // Label when toggle will hide truncated text // }, details: profile.htmlSnippet, // The text in the body of the card + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs index 206a6d2f3..0e60c4c40 100644 --- a/cards/multilang-link-standard/template.hbs +++ b/cards/multilang-link-standard/template.hbs @@ -4,6 +4,11 @@ {{> subtitle }}
{{> details }} +
+ {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -67,4 +72,4 @@ {{/if}} {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/multilang-location-standard/component.js b/cards/multilang-location-standard/component.js index bc5d5d0c4..da489ac7b 100644 --- a/cards/multilang-location-standard/component.js +++ b/cards/multilang-location-standard/component.js @@ -53,7 +53,11 @@ class multilang_location_standardCardComponent extends BaseCard['multilang-locat eventType: 'DRIVING_DIRECTIONS', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs index afbc93210..929553765 100644 --- a/cards/multilang-location-standard/template.hbs +++ b/cards/multilang-location-standard/template.hbs @@ -24,7 +24,12 @@ {{> contactInfo }} {{> details }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -208,4 +213,4 @@ {{translate phrase='Close Card' context='Close is a verb'}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/multilang-menuitem-standard/component.js b/cards/multilang-menuitem-standard/component.js index 269728ca4..0f7226f66 100644 --- a/cards/multilang-menuitem-standard/component.js +++ b/cards/multilang-menuitem-standard/component.js @@ -54,7 +54,11 @@ class multilang_menuitem_standardCardComponent extends BaseCard['multilang-menui eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs index 9c9966794..a8a9ed612 100644 --- a/cards/multilang-menuitem-standard/template.hbs +++ b/cards/multilang-menuitem-standard/template.hbs @@ -8,16 +8,21 @@ {{> list }} {{> details }} - {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} -
- {{#with card.CTA1}} - {{> CTA ctaName="primaryCTA" }} - {{/with}} - {{#with card.CTA2}} - {{> CTA ctaName="secondaryCTA" }} - {{/with}} +
+ {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} +
+ {{#with card.CTA1}} + {{> CTA ctaName="primaryCTA" }} + {{/with}} + {{#with card.CTA2}} + {{> CTA ctaName="secondaryCTA" }} + {{/with}} +
+ {{/if}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
- {{/if}}
@@ -132,4 +137,4 @@ {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/multilang-product-prominentimage-clickable/component.js b/cards/multilang-product-prominentimage-clickable/component.js index c3b66bc29..18063da72 100644 --- a/cards/multilang-product-prominentimage-clickable/component.js +++ b/cards/multilang-product-prominentimage-clickable/component.js @@ -40,6 +40,10 @@ class multilang_product_prominentimage_clickableCardComponent altText: alternateText, // The alternate text for the image details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget) : null, // The text in the body of the card, Warning: cannot contain links // tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs index 6b06630db..2cf510f90 100644 --- a/cards/multilang-product-prominentimage-clickable/template.hbs +++ b/cards/multilang-product-prominentimage-clickable/template.hbs @@ -13,6 +13,11 @@ {{> subtitle }}
{{> details }} +
+ {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
{{#if card.url}}{{/if}} diff --git a/cards/multilang-product-prominentimage/component.js b/cards/multilang-product-prominentimage/component.js index f1d8e21e0..c34128f66 100644 --- a/cards/multilang-product-prominentimage/component.js +++ b/cards/multilang-product-prominentimage/component.js @@ -57,7 +57,11 @@ class multilang_product_prominentimageCardComponent extends BaseCard['multilang- eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs index 9314c43f0..df3d75ff6 100644 --- a/cards/multilang-product-prominentimage/template.hbs +++ b/cards/multilang-product-prominentimage/template.hbs @@ -5,7 +5,12 @@ {{> subtitle }}
{{> details }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
diff --git a/cards/multilang-product-prominentvideo/component.js b/cards/multilang-product-prominentvideo/component.js index 631515086..76a0da752 100644 --- a/cards/multilang-product-prominentvideo/component.js +++ b/cards/multilang-product-prominentvideo/component.js @@ -52,7 +52,11 @@ class multilang_product_prominentvideoCardComponent extends BaseCard['multilang- eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs index c89099678..bad303598 100644 --- a/cards/multilang-product-prominentvideo/template.hbs +++ b/cards/multilang-product-prominentvideo/template.hbs @@ -52,7 +52,12 @@ {{#if (any card.details (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
{{> details }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
{{/if}} {{/inline}} diff --git a/cards/multilang-product-standard/component.js b/cards/multilang-product-standard/component.js index 947c66e7f..27f9cd01f 100644 --- a/cards/multilang-product-standard/component.js +++ b/cards/multilang-product-standard/component.js @@ -57,6 +57,10 @@ class multilang_product_standardCardComponent extends BaseCard['multilang-produc eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs index a1a245d6d..7eab7a8a3 100644 --- a/cards/multilang-product-standard/template.hbs +++ b/cards/multilang-product-standard/template.hbs @@ -5,16 +5,21 @@ {{> subtitle }}
{{> details }} - {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}} -
- {{#with card.CTA1}} - {{> CTA ctaName="primaryCTA" }} - {{/with}} - {{#with card.CTA2}} - {{> CTA ctaName="secondaryCTA" }} - {{/with}} +
+ {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}} +
+ {{#with card.CTA1}} + {{> CTA ctaName="primaryCTA" }} + {{/with}} + {{#with card.CTA2}} + {{> CTA ctaName="secondaryCTA" }} + {{/with}} +
+ {{/if}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
- {{/if}}
diff --git a/cards/multilang-professional-location/component.js b/cards/multilang-professional-location/component.js index 55006a511..d497a1ef7 100644 --- a/cards/multilang-professional-location/component.js +++ b/cards/multilang-professional-location/component.js @@ -64,7 +64,11 @@ class multilang_professional_locationCardComponent extends BaseCard['multilang-p eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs index a20c75bfd..befb06fc2 100644 --- a/cards/multilang-professional-location/template.hbs +++ b/cards/multilang-professional-location/template.hbs @@ -19,7 +19,12 @@ {{> list }} {{> phone }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -194,4 +199,4 @@ {{translate phrase='Close Card' context='Close is a verb'}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/multilang-professional-standard/component.js b/cards/multilang-professional-standard/component.js index 0d969a180..56dceb90f 100644 --- a/cards/multilang-professional-standard/component.js +++ b/cards/multilang-professional-standard/component.js @@ -54,7 +54,11 @@ class multilang_professional_standardCardComponent extends BaseCard['multilang-p eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs index 4ea666620..8fef8f9b1 100644 --- a/cards/multilang-professional-standard/template.hbs +++ b/cards/multilang-professional-standard/template.hbs @@ -9,7 +9,12 @@ {{> list }} {{> phone }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
diff --git a/cards/multilang-standard/component.js b/cards/multilang-standard/component.js index 1d12e678d..1090d6eac 100644 --- a/cards/multilang-standard/component.js +++ b/cards/multilang-standard/component.js @@ -49,7 +49,11 @@ class multilang_standardCardComponent extends BaseCard['multilang-standard'] { eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up + negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs index 9c37fe70d..9fdb99b9d 100644 --- a/cards/multilang-standard/template.hbs +++ b/cards/multilang-standard/template.hbs @@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -114,4 +119,4 @@ {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/product-prominentimage-clickable/component.js b/cards/product-prominentimage-clickable/component.js index f70bd39d0..3c469f239 100644 --- a/cards/product-prominentimage-clickable/component.js +++ b/cards/product-prominentimage-clickable/component.js @@ -39,6 +39,10 @@ class product_prominentimage_clickableCardComponent extends BaseCard['product-pr altText: alternateText, // The alternate text for the image details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget) : null, // The text in the body of the card, Warning: cannot contain links // tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/product-prominentimage-clickable/template.hbs b/cards/product-prominentimage-clickable/template.hbs index 32fa8f716..b30dd4e0b 100644 --- a/cards/product-prominentimage-clickable/template.hbs +++ b/cards/product-prominentimage-clickable/template.hbs @@ -13,6 +13,11 @@ {{> subtitle }}
{{> details }} +
+ {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
{{#if card.url}}{{/if}} diff --git a/cards/product-prominentimage/component.js b/cards/product-prominentimage/component.js index 163eea636..4f3ab4857 100644 --- a/cards/product-prominentimage/component.js +++ b/cards/product-prominentimage/component.js @@ -57,7 +57,11 @@ class product_prominentimageCardComponent extends BaseCard['product-prominentima eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs index 677aeb8e0..45d4e4e59 100644 --- a/cards/product-prominentimage/template.hbs +++ b/cards/product-prominentimage/template.hbs @@ -5,7 +5,12 @@ {{> subtitle }}
{{> details }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
diff --git a/cards/product-prominentvideo/component.js b/cards/product-prominentvideo/component.js index 29015b903..85209c3ec 100644 --- a/cards/product-prominentvideo/component.js +++ b/cards/product-prominentvideo/component.js @@ -52,7 +52,11 @@ class product_prominentvideoCardComponent extends BaseCard['product-prominentvid eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs index c89099678..bad303598 100644 --- a/cards/product-prominentvideo/template.hbs +++ b/cards/product-prominentvideo/template.hbs @@ -52,7 +52,12 @@ {{#if (any card.details (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
{{> details }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
{{/if}} {{/inline}} diff --git a/cards/product-standard/component.js b/cards/product-standard/component.js index 08d911d0e..e69f0f41a 100644 --- a/cards/product-standard/component.js +++ b/cards/product-standard/component.js @@ -57,6 +57,10 @@ class product_standardCardComponent extends BaseCard['product-standard'] { eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs index a1a245d6d..7eab7a8a3 100644 --- a/cards/product-standard/template.hbs +++ b/cards/product-standard/template.hbs @@ -5,16 +5,21 @@ {{> subtitle }}
{{> details }} - {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}} -
- {{#with card.CTA1}} - {{> CTA ctaName="primaryCTA" }} - {{/with}} - {{#with card.CTA2}} - {{> CTA ctaName="secondaryCTA" }} - {{/with}} +
+ {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}} +
+ {{#with card.CTA1}} + {{> CTA ctaName="primaryCTA" }} + {{/with}} + {{#with card.CTA2}} + {{> CTA ctaName="secondaryCTA" }} + {{/with}} +
+ {{/if}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
- {{/if}}
diff --git a/cards/professional-location/component.js b/cards/professional-location/component.js index 38f0e0531..1d22bd5b4 100644 --- a/cards/professional-location/component.js +++ b/cards/professional-location/component.js @@ -64,7 +64,11 @@ class professional_locationCardComponent extends BaseCard['professional-location eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs index 83c8763ab..c2a9da855 100644 --- a/cards/professional-location/template.hbs +++ b/cards/professional-location/template.hbs @@ -19,7 +19,12 @@ {{> list }} {{> phone }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -194,4 +199,4 @@ Close Card -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/cards/professional-standard/component.js b/cards/professional-standard/component.js index 2dc4949a1..86508a810 100644 --- a/cards/professional-standard/component.js +++ b/cards/professional-standard/component.js @@ -54,7 +54,11 @@ class professional_standardCardComponent extends BaseCard['professional-standard eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/professional-standard/template.hbs b/cards/professional-standard/template.hbs index 4ea666620..8fef8f9b1 100644 --- a/cards/professional-standard/template.hbs +++ b/cards/professional-standard/template.hbs @@ -9,7 +9,12 @@ {{> list }} {{> phone }} - {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
diff --git a/cards/standard/component.js b/cards/standard/component.js index 17ab9c0d5..893619e4d 100644 --- a/cards/standard/component.js +++ b/cards/standard/component.js @@ -49,7 +49,11 @@ class standardCardComponent extends BaseCard['standard'] { eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - } + }, + feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked + positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up + negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/standard/template.hbs b/cards/standard/template.hbs index 9c37fe70d..9fdb99b9d 100644 --- a/cards/standard/template.hbs +++ b/cards/standard/template.hbs @@ -7,7 +7,12 @@
{{> details }}
- {{> ctas }} +
+ {{> ctas }} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} +
@@ -114,4 +119,4 @@ {{/if}} -{{/inline}} \ No newline at end of file +{{/inline}} diff --git a/directanswercards/allfields-standard/component.js b/directanswercards/allfields-standard/component.js index 531ca79df..51fbdfd9b 100644 --- a/directanswercards/allfields-standard/component.js +++ b/directanswercards/allfields-standard/component.js @@ -187,8 +187,8 @@ class allfields_standardComponent extends BaseDirectAnswerCard['allfields-standa // eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA // eventOptions: this.addDefaultEventOptions() // The event options for CTA click analytics // }, - footerTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked - footerText: 'Was this the answer you were looking for?', // Text to display in the footer + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked + feedbackText: 'Was this the answer you were looking for?', // Text to display in the footer positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up negativeFeedbackSrText: 'This did not answer my question', // Screen reader only text for thumbs-down isRichText: isRichText, // If the direct answer is sourced from a rich-text field diff --git a/directanswercards/allfields-standard/template.hbs b/directanswercards/allfields-standard/template.hbs index bc3210a53..6c673ed4e 100644 --- a/directanswercards/allfields-standard/template.hbs +++ b/directanswercards/allfields-standard/template.hbs @@ -14,7 +14,7 @@ {{> cta CTA linkTarget=linkTarget}} {{/if}} - {{> footer }} + {{> thumbsfeedback directAnswerClass="HitchhikerAllFieldsStandard"}} {{#*inline 'icon'}} @@ -112,56 +112,6 @@ {{/if}} {{/inline}} -{{#*inline 'footer'}} -{{#if (any footerTextOnSubmission footerText)}} -
- -
-{{/if}} -{{/inline}} - {{#*inline 'cta'}} {{#if (all url label)}}
diff --git a/directanswercards/card_component.js b/directanswercards/card_component.js index 851d27e95..18c4f026e 100644 --- a/directanswercards/card_component.js +++ b/directanswercards/card_component.js @@ -5,7 +5,7 @@ BaseDirectAnswerCard = typeof (BaseDirectAnswerCard) !== 'undefined' ? BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { constructor(config = {}, systemConfig = {}) { super(config, systemConfig); - let data = config.data || {}; + const data = config.data || {}; this.type = data.type || ''; this.answer = data.answer || {}; this.snippet = this.answer.snippet || {}; @@ -40,17 +40,24 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { } onMount() { - let feedbackFormSelector = '.js-HitchhikerDirectAnswerCard-feedbackForm'; + this.addFeedbackListeners(); + + const rtfElement = this._container.querySelector('.js-yxt-rtfValue'); + rtfElement && rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e)); + } + + addFeedbackListeners() { + const feedbackFormSelector = '.js-HitchhikerDirectAnswerCard-feedbackForm'; let feedbackFormEl = this._container.querySelector(feedbackFormSelector); if (feedbackFormEl) { // For WCAG compliance, the feedback should be a submittable form feedbackFormEl.addEventListener('submit', (e) => { - let formTargetEl = e.target; - let checkedValue = formTargetEl.querySelector('input:checked').value === 'true'; + const formTargetEl = e.target; + const isGood = formTargetEl.querySelector('input:checked').value === 'true'; - this.reportQuality(checkedValue); + this.reportQuality(isGood); this.updateState({ - 'feedbackSubmitted': true + feedbackSubmitted: true }); }); @@ -62,42 +69,11 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { if (input) { input.checked = true; } - this._triggerCustomEvent(feedbackFormSelector, 'submit'); + HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit'); }); }); } } - - const rtfElement = this._container.querySelector('.js-yxt-rtfValue'); - rtfElement && rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e)); - } - - /** - * Triggers the event passed in dispatched from the given selector - * @param {string} selector selector to dispatch event from - * @param {string} event event to fire - * @param {Object} settings additional settings - */ - _triggerCustomEvent(selector, event, settings) { - let e = this._customEvent(event, settings); - this._container.querySelector(selector).dispatchEvent(e); - } - - /** - * _customEvent is an event constructor polyfill - * @param {string} event event to fire - * @param {Object} settings additional settings - */ - _customEvent(event, settings) { - const _settings = { - bubbles: true, - cancelable: true, - detail: null, - ...settings - }; - const evt = document.createEvent('CustomEvent'); - evt.initCustomEvent(event, _settings.bubbles, _settings.cancelable, _settings.detail); - return evt; } /** @@ -118,7 +94,10 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN; const event = new ANSWERS.AnalyticsEvent(eventType) .addOptions({ - 'directAnswer': true + directAnswer: true, + verticalKey: this.verticalConfigId, + searcher: 'UNIVERSAL', + entityId: this.associatedEntityId }); this.analyticsReporter.report(event); diff --git a/directanswercards/documentsearch-standard/component.js b/directanswercards/documentsearch-standard/component.js index c03380e5c..62d0282bf 100644 --- a/directanswercards/documentsearch-standard/component.js +++ b/directanswercards/documentsearch-standard/component.js @@ -40,8 +40,8 @@ class documentsearch_standardComponent extends BaseDirectAnswerCard['documentsea // eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA // eventOptions: this.addDefaultEventOptions({ fieldName: 'snippet' }) // The event options for CTA click analytics // }, - footerTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked - footerText: 'Was this the answer you were looking for?', // Text to display in the footer + feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked + feedbackText: 'Was this the answer you were looking for?', // Text to display in the footer positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up negativeFeedbackSrText: 'This did not answer my question', // Screen reader only text for thumbs-down }; diff --git a/directanswercards/documentsearch-standard/template.hbs b/directanswercards/documentsearch-standard/template.hbs index 028de17c5..0af0faefb 100644 --- a/directanswercards/documentsearch-standard/template.hbs +++ b/directanswercards/documentsearch-standard/template.hbs @@ -9,7 +9,7 @@ {{> cta CTA linkTarget=linkTarget}}
- {{> footer}} + {{> thumbsfeedback directAnswerClass="HitchhikerDocumentSearchStandard"}} {{#*inline 'title'}} @@ -43,56 +43,6 @@ {{/if}} {{/inline}} -{{#*inline 'footer'}} -{{#if (any footerTextOnSubmission footerText)}} -
- -
-{{/if}} -{{/inline}} - {{#*inline 'cta'}} {{#if (all url label)}}
diff --git a/directanswercards/multilang-allfields-standard/component.js b/directanswercards/multilang-allfields-standard/component.js index 3b50f0ba6..bb91f66ba 100644 --- a/directanswercards/multilang-allfields-standard/component.js +++ b/directanswercards/multilang-allfields-standard/component.js @@ -185,8 +185,8 @@ class multilang_allfields_standardComponent extends BaseDirectAnswerCard['multil // eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA // eventOptions: this.addDefaultEventOptions() // The event options for CTA click analytics // }, - footerTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display in the footer when a thumbs up/down is clicked - footerText: {{ translateJS phrase='Was this the answer you were looking for?' }}, // Text to display in the footer + feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display in the footer when a thumbs up/down is clicked + feedbackText: {{ translateJS phrase='Was this the answer you were looking for?' }}, // Text to display in the footer positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }}, // Screen reader only text for thumbs-down }; diff --git a/directanswercards/multilang-allfields-standard/template.hbs b/directanswercards/multilang-allfields-standard/template.hbs index 025addb96..8a1904e75 100644 --- a/directanswercards/multilang-allfields-standard/template.hbs +++ b/directanswercards/multilang-allfields-standard/template.hbs @@ -14,7 +14,7 @@ {{> cta CTA linkTarget=linkTarget}}
{{/if}} - {{> footer }} + {{> thumbsfeedback directAnswerClass="HitchhikerAllFieldsStandard"}} {{#*inline 'icon'}} @@ -112,56 +112,6 @@ {{/if}} {{/inline}} -{{#*inline 'footer'}} -{{#if (any footerTextOnSubmission footerText)}} -
- -
-{{/if}} -{{/inline}} - {{#*inline 'cta'}} {{#if (all url label)}}
diff --git a/script/core.hbs b/script/core.hbs index 8f5798b5e..a65d5b4f0 100644 --- a/script/core.hbs +++ b/script/core.hbs @@ -84,6 +84,11 @@ return ANSWERS.renderer.SafeString({{{stringifyPartial (read 'static/assets/images/close-card') }}}); }); + ANSWERS.registerPartial( + 'thumbsfeedback', + {{{stringifyPartial (read 'cards/common-partials/thumbsfeedback') }}} + ); + /** * If the url is not relative, return it. If it is relative, * append relativePath to it. diff --git a/static/js/HitchhikerJS.js b/static/js/HitchhikerJS.js index 869dd5705..31ad12433 100644 --- a/static/js/HitchhikerJS.js +++ b/static/js/HitchhikerJS.js @@ -46,3 +46,6 @@ import AnswersExperience from './answers-experience'; window.AnswersExperience = new AnswersExperience(runtimeConfig); export * from './video-apis'; + +import DOM from './dom'; +export { DOM }; \ No newline at end of file diff --git a/static/js/dom.js b/static/js/dom.js new file mode 100644 index 000000000..168e4d32b --- /dev/null +++ b/static/js/dom.js @@ -0,0 +1,30 @@ +export default class DOM { + /** + * Triggers the event passed in dispatched from the given selector + * @param {HTMLElement} container container to select from + * @param {string} selector selector to dispatch event from + * @param {string} event event to fire + * @param {Object} settings additional settings + */ + static triggerCustomEvent(container, selector, event, settings) { + const e = this.customEvent(event, settings); + container.querySelector(selector).dispatchEvent(e); + } + + /** + * _customEvent is an event constructor polyfill + * @param {string} event event to fire + * @param {Object} settings additional settings + */ + static customEvent(event, settings) { + const _settings = { + bubbles: true, + cancelable: true, + detail: null, + ...settings + }; + const evt = document.createEvent('CustomEvent'); + evt.initCustomEvent(event, _settings.bubbles, _settings.cancelable, _settings.detail); + return evt; + } +} \ No newline at end of file diff --git a/static/scss/answers/cards/document-standard.scss b/static/scss/answers/cards/document-standard.scss index a2772937c..40ceb2b97 100644 --- a/static/scss/answers/cards/document-standard.scss +++ b/static/scss/answers/cards/document-standard.scss @@ -91,4 +91,12 @@ { display: none; } + + .HitchhikerCard-feedbackWrapper + { + @include bpgte(sm) + { + margin-right: calc(var(--yxt-base-spacing) / 2); + } + } } diff --git a/static/scss/answers/cards/event-standard.scss b/static/scss/answers/cards/event-standard.scss index 0fad3e910..c8a5898dc 100644 --- a/static/scss/answers/cards/event-standard.scss +++ b/static/scss/answers/cards/event-standard.scss @@ -109,4 +109,12 @@ { display: none; } + + .HitchhikerCard-feedbackWrapper + { + @include bpgte(sm) + { + margin-left: 1.5rem; + } + } } diff --git a/static/scss/answers/cards/faq-accordion.scss b/static/scss/answers/cards/faq-accordion.scss index 32d84f701..975e9183b 100644 --- a/static/scss/answers/cards/faq-accordion.scss +++ b/static/scss/answers/cards/faq-accordion.scss @@ -142,4 +142,23 @@ { display: none; } + + .HitchhikerCard + { + &-actions + { + flex-direction: row; + } + + &-feedbackWrapper + { + margin: calc(var(--yxt-base-spacing) / 2) var(--yxt-base-spacing); + padding-bottom: calc(var(--yxt-base-spacing) / 2); + } + + &-feedbackContent + { + margin-top: 0; + } + } } diff --git a/static/scss/answers/cards/location-standard.scss b/static/scss/answers/cards/location-standard.scss index 751f7342c..e56750f9e 100644 --- a/static/scss/answers/cards/location-standard.scss +++ b/static/scss/answers/cards/location-standard.scss @@ -50,6 +50,29 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac } } } + + .HitchhikerCard + { + &-actions + { + flex-direction: row; + + @include bpgte(lg) + { + flex-direction: column; + } + } + + &-feedbackWrapper + { + margin-left: 0; + + @include bpgte(lg) + { + margin-left: calc(var(--hh-location-standard-base-spacing) / 2); + } + } + } } .HitchhikerLocationStandard diff --git a/static/scss/answers/cards/product-prominentimage-clickable.scss b/static/scss/answers/cards/product-prominentimage-clickable.scss index 922eba9db..0e2cbec73 100644 --- a/static/scss/answers/cards/product-prominentimage-clickable.scss +++ b/static/scss/answers/cards/product-prominentimage-clickable.scss @@ -114,4 +114,22 @@ { @include rich_text_formatting; } + + .HitchhikerCard + { + &-actions + { + flex-direction: row; + } + + &-feedbackWrapper + { + margin-left: 0; + } + + &-feedbackContent + { + margin-top: calc(var(--yxt-base-spacing) / 2); + } + } } diff --git a/static/scss/answers/cards/product-prominentimage.scss b/static/scss/answers/cards/product-prominentimage.scss index 308a2d5df..b1dea9bda 100644 --- a/static/scss/answers/cards/product-prominentimage.scss +++ b/static/scss/answers/cards/product-prominentimage.scss @@ -115,4 +115,22 @@ { display: none; } + + .HitchhikerCard + { + &-actions + { + flex-direction: row; + } + + &-feedbackWrapper + { + margin-left: 0; + } + + &-feedbackContent + { + margin-top: calc(var(--yxt-base-spacing) / 2); + } + } } diff --git a/static/scss/answers/cards/product-prominentvideo.scss b/static/scss/answers/cards/product-prominentvideo.scss index a07f58f9b..02b74b612 100644 --- a/static/scss/answers/cards/product-prominentvideo.scss +++ b/static/scss/answers/cards/product-prominentvideo.scss @@ -86,4 +86,22 @@ { display: none; } + + .HitchhikerCard + { + &-actions + { + flex-direction: row; + } + + &-feedbackWrapper + { + margin-left: 0; + } + + &-feedbackContent + { + margin-top: calc(var(--yxt-base-spacing) / 2); + } + } } diff --git a/static/scss/answers/cards/standard.scss b/static/scss/answers/cards/standard.scss index 7182a178e..23f5438e1 100644 --- a/static/scss/answers/cards/standard.scss +++ b/static/scss/answers/cards/standard.scss @@ -91,4 +91,12 @@ { display: none; } + + .HitchhikerCard-feedbackWrapper + { + @include bpgte(sm) + { + margin-right: calc(var(--yxt-base-spacing) / 2); + } + } } diff --git a/static/scss/answers/directanswercards/allfields-standard.scss b/static/scss/answers/directanswercards/allfields-standard.scss index 24fdc39b1..00e6448d2 100644 --- a/static/scss/answers/directanswercards/allfields-standard.scss +++ b/static/scss/answers/directanswercards/allfields-standard.scss @@ -97,11 +97,13 @@ } + &-feedbackWrapper, &-footerWrapper { background-color: var(--yxt-direct-answer-footer-background-color); } + &-feedbackContent, &-footer { display: flex; @@ -113,6 +115,7 @@ padding-bottom: 8px; } + &-feedbackText, &-footerText { display: inline; @@ -125,6 +128,11 @@ ); } + &-thumbsWrapper + { + display: flex; + } + &-thumbs { display: flex; diff --git a/static/scss/answers/directanswercards/documentsearch-standard.scss b/static/scss/answers/directanswercards/documentsearch-standard.scss index cabdb173f..665821450 100644 --- a/static/scss/answers/directanswercards/documentsearch-standard.scss +++ b/static/scss/answers/directanswercards/documentsearch-standard.scss @@ -86,6 +86,12 @@ } + &-feedbackWrapper + { + background-color: var(--yxt-direct-answer-footer-background-color); + } + + &-feedbackContent, &-footer { display: flex; @@ -97,6 +103,7 @@ padding-bottom: 8px; } + &-feedbackText, &-footerText { display: inline; @@ -109,6 +116,11 @@ ); } + &-thumbsWrapper + { + display: flex; + } + &-thumbs { display: flex; diff --git a/static/scss/answers/interactive-map/VerticalFullPageMap.scss b/static/scss/answers/interactive-map/VerticalFullPageMap.scss index 75ebd6b4e..71452a7a5 100644 --- a/static/scss/answers/interactive-map/VerticalFullPageMap.scss +++ b/static/scss/answers/interactive-map/VerticalFullPageMap.scss @@ -551,6 +551,10 @@ &-ctasWrapper { margin-top: calc(var(--yxt-base-spacing) / 2); } + + .HitchhikerCard-actions { + flex-direction: row; + } } .HitchhikerLocationCard { @@ -592,6 +596,10 @@ font-weight: bold; justify-content: flex-end; } + + .HitchhikerCard-feedbackWrapper { + margin-left: 0; + } } .yxt-Card--isVisibleOnMobileMap { diff --git a/static/scss/answers/module.scss b/static/scss/answers/module.scss index 762490075..ce1730493 100644 --- a/static/scss/answers/module.scss +++ b/static/scss/answers/module.scss @@ -17,14 +17,113 @@ @include sr-only-focusable(); } -.HitchhikerCard-detailsToggle +.HitchhikerCard { - text-align: left; - margin-top: calc(var(--yxt-base-spacing) / 4); + &-detailsToggle + { + text-align: left; + margin-top: calc(var(--yxt-base-spacing) / 4); + @include Text( + $color: var(--yxt-color-brand-primary), + $line-height: var(--yxt-line-height-md), + $style: italic); + @include TextButton($padding: 0); + } + + &-actions + { + display: flex; + align-items: flex-end; + + @include bpgte(sm) + { + flex-direction: column; + } + } + + &-feedbackWrapper + { + display: flex; + flex-grow: 1; + background-color: var(--yxt-color-background-highlight); + min-width: 55px; + @include bpgte(sm) + { + margin-left: calc(var(--yxt-base-spacing) / 2); + } + } + + &-feedbackContent + { + display: flex; + justify-content: flex-end; + align-items: flex-end; + flex-grow: 1; + @include bpgte(sm) + { + margin-top: calc(var(--yxt-base-spacing) / 2); + } + } + + &-feedbackText + { + display: inline; @include Text( - $color: var(--yxt-color-brand-primary), - $line-height: var(--yxt-line-height-md), - $style: italic); - @include TextButton($padding: 0); -} + $size: var(--yxt-font-size-md), + $line-height: var(--yxt-line-height-md), + $weight: var(--yxt-font-weight-normal), + $color: var(--yxt-color-text-secondary) + ); + text-align: right; + } + + &-thumbs + { + display: flex; + margin: 0; + } + + &-thumbUpIcon + { + transform: rotate(180deg); + } + + &-thumbUpIcon, + &-thumbDownIcon + { + display: inline-flex; + color: var(--yxt-color-text-secondary); + } + + &-thumb + { + display: inline; + flex-shrink: 0; + cursor: pointer; + font-size: 18px; + + & + & + { + margin-left: 8px; + } + } + + &-fieldset + { + display: inline; + margin-inline-start: 2px; + margin-inline-end: 2px; + line-height: 0; + min-inline-size: min-content; + } + + &-feedback + { + @include Text( + $color: var(--yxt-color-text-neutral), + ); + background-color: var(--yxt-color-background-highlight); + display: none; + } +} \ No newline at end of file diff --git a/test-site/config/global_config.json b/test-site/config/global_config.json index ee59f998f..9c505ad2b 100644 --- a/test-site/config/global_config.json +++ b/test-site/config/global_config.json @@ -2,7 +2,7 @@ "sdkVersion": "develop", // 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": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system - // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system + "businessId": "3350634", // The business ID of the account. This will be provided automatically by the Yext CI system // "initializeManually": true, // If true, the experience must be started by calling AnswersExperience.init() or AnswersExperienceFrame.init() for iframe integrations. // "useJWT": true, // Whether or not to enable JWT. If true, the apiKey will be hidden from the build and the token must be specified through the runtime config. "sessionTrackingEnabled": true, // Whether or not session tracking is enabled for all pages diff --git a/translations/messages.pot b/translations/messages.pot index 16c7cee7d..9a1d7ac0e 100644 --- a/translations/messages.pot +++ b/translations/messages.pot @@ -88,7 +88,7 @@ msgstr "" msgid "Saturday" msgstr "" -#: cards/multilang-location-standard/template.hbs:140 +#: cards/multilang-location-standard/template.hbs:145 msgid "Services:" msgstr "" @@ -132,6 +132,20 @@ msgstr "" msgid "Sunday" msgstr "" +#: cards/multilang-event-standard/component.js:53 +#: cards/multilang-faq-accordion/component.js:51 +#: cards/multilang-financial-professional-location/component.js:69 +#: cards/multilang-job-standard/component.js:44 +#: cards/multilang-link-standard/component.js:32 +#: cards/multilang-location-standard/component.js:58 +#: cards/multilang-menuitem-standard/component.js:59 +#: cards/multilang-product-prominentimage-clickable/component.js:44 +#: cards/multilang-product-prominentimage/component.js:62 +#: cards/multilang-product-prominentvideo/component.js:57 +#: cards/multilang-product-standard/component.js:61 +#: cards/multilang-professional-location/component.js:69 +#: cards/multilang-professional-standard/component.js:59 +#: cards/multilang-standard/component.js:54 #: directanswercards/multilang-allfields-standard/component.js:188 msgid "Thank you for your feedback!" msgstr "" @@ -142,10 +156,38 @@ msgid_plural "The following search categories yielded results for Date: Tue, 12 Oct 2021 12:13:23 -0400 Subject: [PATCH 14/22] support sorting facets using optionsOrderList (#972) I changed the sorting to not mutate the original array. Originally I was worried about performance, but it should be very minor. J=SLAP-1632 TEST=manual,auto added optionsOrderList to the people page's config override for percy snapshots manually built the page and saw the facets being sorted --- static/js/transform-facets.js | 31 ++++++++++++++++++++++---- test-site/config-overrides/people.json | 7 ++++++ tests/static/js/transform-facets.js | 30 ++++++++++++++++++++++++- 3 files changed, 63 insertions(+), 5 deletions(-) diff --git a/static/js/transform-facets.js b/static/js/transform-facets.js index c54e85786..9d5b85eee 100644 --- a/static/js/transform-facets.js +++ b/static/js/transform-facets.js @@ -26,6 +26,7 @@ export default function transformFacets(facets, config) { const { fieldLabels, optionsOrder, + optionsOrderList, optionsFieldType = 'STRING', ...filterOptionsConfig } = config.fields[facet.fieldId]; @@ -41,7 +42,9 @@ export default function transformFacets(facets, config) { }) } - if (optionsOrder) { + if (optionsOrderList) { + options = sortFacetOptionsCustom(options, optionsOrderList); + } else if (optionsOrder) { options = sortFacetOptions(options, optionsOrder, optionsFieldType, facet.fieldId); } @@ -54,7 +57,7 @@ export default function transformFacets(facets, config) { } /** - * Sorts the facet options in place. + * Sorts the facet options and returns a new array. * * @param {{ displayName: string }[]} options The facet options to sort. * @param {'ASC' | 'DESC'} optionsOrder @@ -87,6 +90,26 @@ function sortFacetOptions(options, optionsOrder, optionsFieldType, fieldId) { return undefined; } } - - return options.sort(applyDirectionToComparator(getSortComparator())) + + return [...options].sort(applyDirectionToComparator(getSortComparator())) } + + +/** + * Sorts the facet options using the priority specified in + * the optionsOrderList and returns a new array. + * + * @param {{ displayName: string }[]} options The facet options to sort. + * @param {string[]} optionsOrderList + * @returns {{ displayName: string }[]} + */ +function sortFacetOptionsCustom(options, optionsOrderList) { + const getPriority = displayName => { + const index = optionsOrderList.indexOf(displayName); + return index === -1 ? optionsOrderList.length : index; + } + + return [...options].sort((a, b) => { + return getPriority(a.displayName) - getPriority(b.displayName); + }); +} \ No newline at end of file diff --git a/test-site/config-overrides/people.json b/test-site/config-overrides/people.json index af86372a2..53c8d3dae 100644 --- a/test-site/config-overrides/people.json +++ b/test-site/config-overrides/people.json @@ -19,6 +19,13 @@ "Strategy": "STRATEGY !!!" }, "optionsOrder": "DESC" + }, + "languages": { + "optionsOrderList": [ + "Italian", + "French", + "German" + ] } } }, diff --git a/tests/static/js/transform-facets.js b/tests/static/js/transform-facets.js index 5a00be8a6..cbcdebdea 100644 --- a/tests/static/js/transform-facets.js +++ b/tests/static/js/transform-facets.js @@ -236,5 +236,33 @@ describe('optionsOrder', () => { expect(actualOptions[0].displayName).toEqual('100'); expect(actualOptions[1].displayName).toEqual('3'); expect(actualOptions[2].displayName).toEqual('2'); - }) + }); +}); + +describe('sorting facets using optionsOrderList', () => { + function createFacets(displayNames) { + return [ + { + fieldId: 'c_mealType', + options: displayNames.map(d => ({ displayName: d })) + } + ]; + } + + function createFacetsConfig(optionsOrderList) { + return { + fields: { + c_mealType: { + optionsOrderList + } + } + } + }; + + it('will assign priority based on the optionsOrderList', () => { + const displayNames = ['a', 'b', 'c', 'd', 'e', 'f', 'g'] + const transformedFacets = transformFacets(createFacets(displayNames), createFacetsConfig(['e', 'g'])); + const actualOptions = transformedFacets[0].options; + expect(actualOptions.map(o => o.displayName)).toEqual(['e', 'g', 'a', 'b', 'c', 'd', 'f']) + }); }); \ No newline at end of file From 0e63edefc8bdd69c0579f2c351d17df92f4b2bb6 Mon Sep 17 00:00:00 2001 From: Oliver Shi Date: Tue, 12 Oct 2021 12:46:41 -0400 Subject: [PATCH 15/22] remove optionsFieldType (#974) The backend does not natively support facets on number fields. The closest thing that is supported is assuming a string field contains a parseable number. This PR removes support for interpreting string fields as numbers, to be consistent with the backend. J=SLAP-1631 TEST=manual rebuilt page and checked optionsOrder and optionsOrderList facets --- static/js/transform-facets.js | 31 +++++---------- tests/static/js/transform-facets.js | 60 ++--------------------------- 2 files changed, 12 insertions(+), 79 deletions(-) diff --git a/static/js/transform-facets.js b/static/js/transform-facets.js index 9d5b85eee..8bd62b968 100644 --- a/static/js/transform-facets.js +++ b/static/js/transform-facets.js @@ -27,7 +27,6 @@ export default function transformFacets(facets, config) { fieldLabels, optionsOrder, optionsOrderList, - optionsFieldType = 'STRING', ...filterOptionsConfig } = config.fields[facet.fieldId]; @@ -45,7 +44,7 @@ export default function transformFacets(facets, config) { if (optionsOrderList) { options = sortFacetOptionsCustom(options, optionsOrderList); } else if (optionsOrder) { - options = sortFacetOptions(options, optionsOrder, optionsFieldType, facet.fieldId); + options = sortFacetOptions(options, optionsOrder, facet.fieldId); } return { @@ -61,37 +60,25 @@ export default function transformFacets(facets, config) { * * @param {{ displayName: string }[]} options The facet options to sort. * @param {'ASC' | 'DESC'} optionsOrder - * @param {'STRING' | 'INT'} optionsFieldType * @param {string} fieldId * @returns {{ displayName: string }[]} */ -function sortFacetOptions(options, optionsOrder, optionsFieldType, fieldId) { +function sortFacetOptions(options, optionsOrder, fieldId) { const getSortComparator = () => { - if (optionsFieldType === 'STRING') { - return (a, b) => a.displayName.localeCompare(b.displayName); - } else if (optionsFieldType === 'INT') { - return (a, b) => parseInt(a.displayName) - parseInt(b.displayName); - } else { - console.error(`Unknown facet optionsFieldType "${optionsFieldType}" for the "${fieldId}" facet.`); - return undefined; - } - } - const applyDirectionToComparator = (comparator) => { - if (!comparator) { - return undefined; - } - if (optionsOrder === 'ASC') { - return comparator; + return (a, b) => a.displayName.localeCompare(b.displayName); } else if (optionsOrder === 'DESC') { - return (a, b) => -1 * comparator(a, b) + return (a, b) => b.displayName.localeCompare(a.displayName); } else { console.error(`Unknown facet optionsOrder "${optionsOrder}" for the "${fieldId}" facet.`); return undefined; } } - - return [...options].sort(applyDirectionToComparator(getSortComparator())) + const comparator = getSortComparator(); + if (!comparator) { + return options; + } + return [...options].sort(comparator); } diff --git a/tests/static/js/transform-facets.js b/tests/static/js/transform-facets.js index cbcdebdea..5df3a6c97 100644 --- a/tests/static/js/transform-facets.js +++ b/tests/static/js/transform-facets.js @@ -146,7 +146,7 @@ describe('optionsOrder', () => { } ]; - function createFacetsConfig(optionsOrder, optionsFieldType, fieldLabels) { + function createFacetsConfig(optionsOrder, fieldLabels) { return { fields: { c_mealType: { @@ -155,7 +155,6 @@ describe('optionsOrder', () => { Lunch: 'a lunch', Dinner: 'duh dinner' }, - optionsFieldType: optionsFieldType || 'STRING', optionsOrder } } @@ -167,14 +166,14 @@ describe('optionsOrder', () => { expect(actualOptions[0].displayName).toEqual('a lunch'); expect(actualOptions[1].displayName).toEqual('duh dinner'); expect(actualOptions[2].displayName).toEqual('ze breakfast'); - }) + }); it('works for DESC order', () => { const actualOptions = transformFacets(facets, createFacetsConfig('DESC'))[0].options; expect(actualOptions[0].displayName).toEqual('ze breakfast'); expect(actualOptions[1].displayName).toEqual('duh dinner'); expect(actualOptions[2].displayName).toEqual('a lunch'); - }) + }); it('logs an error if you use an unknown optionsOrder', () => { const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {}); @@ -183,59 +182,6 @@ describe('optionsOrder', () => { expect(consoleError).toHaveBeenCalledWith( 'Unknown facet optionsOrder "PACER" for the "c_mealType" facet.'); consoleError.mockRestore(); - }) - - it('logs an error if you use an unknown optionsFieldType, and does not try to sort', () => { - const consoleError = jest.spyOn(console, 'error').mockImplementation(() => {}); - expect(consoleError).toHaveBeenCalledTimes(0); - transformFacets(facets, createFacetsConfig('ASC', 'FAKEINT'))[0].options; - expect(consoleError).toHaveBeenCalledWith( - 'Unknown facet optionsFieldType "FAKEINT" for the "c_mealType" facet.'); - consoleError.mockRestore(); - }) - - it('works with ASC number display names', () => { - const actualOptions = transformFacets(facets, createFacetsConfig('ASC', 'INT', { - Breakfast: 3, - Lunch: 2, - Dinner: 100 - }))[0].options; - expect(actualOptions[0].displayName).toEqual(2); - expect(actualOptions[1].displayName).toEqual(3); - expect(actualOptions[2].displayName).toEqual(100); - }) - - it('works with DESC number display names', () => { - const actualOptions = transformFacets(facets, createFacetsConfig('DESC', 'INT', { - Breakfast: 2, - Lunch: 3, - Dinner: 100 - }))[0].options; - expect(actualOptions[0].displayName).toEqual(100); - expect(actualOptions[1].displayName).toEqual(3); - expect(actualOptions[2].displayName).toEqual(2); - }) - - it('works with ASC number display names that need to be parsed', () => { - const actualOptions = transformFacets(facets, createFacetsConfig('ASC', 'INT', { - Breakfast: '3', - Lunch: '2', - Dinner: '100' - }))[0].options; - expect(actualOptions[0].displayName).toEqual('2'); - expect(actualOptions[1].displayName).toEqual('3'); - expect(actualOptions[2].displayName).toEqual('100'); - }) - - it('works with DESC number display names that need to be parsed', () => { - const actualOptions = transformFacets(facets, createFacetsConfig('DESC', 'INT', { - Breakfast: '2', - Lunch: '3', - Dinner: '100' - }))[0].options; - expect(actualOptions[0].displayName).toEqual('100'); - expect(actualOptions[1].displayName).toEqual('3'); - expect(actualOptions[2].displayName).toEqual('2'); }); }); From c96c5f1e313666cfd254c68f4588796d67448c3d Mon Sep 17 00:00:00 2001 From: cea2aj <42848445+cea2aj@users.noreply.github.com> Date: Tue, 12 Oct 2021 14:08:16 -0400 Subject: [PATCH 16/22] Use color-text-primary for card body text (#966) Use the color-text-primary variable for the color of text on the body of cards This change makes most text slightly lighter because the value of --yxt-color-text-primary is `#212121;`. Previously the cards were falling back to the default of the browser which is black. The item mentioned using the text mixin to accomplish this, however I decided to use the variable directly because there is less chance of side effects because the text mixin affects things other than color. J=SLAP-1617 TEST=manual For testing purposes, set the text to red and view all of the cards of the test site. See that the color of the body of text is red as expected. --- .../scss/answers/cards/document-standard.scss | 1 + static/scss/answers/cards/event-standard.scss | 1 + static/scss/answers/cards/faq-accordion.scss | 6 +++++- .../financial-professional-location.scss | 19 ++++++++++++++++++- static/scss/answers/cards/job-standard.scss | 1 + static/scss/answers/cards/link-standard.scss | 1 + .../scss/answers/cards/location-standard.scss | 13 ++++++++++++- .../scss/answers/cards/menuitem-standard.scss | 6 ++++++ .../product-prominentimage-clickable.scss | 1 + .../answers/cards/product-prominentimage.scss | 1 + .../answers/cards/product-prominentvideo.scss | 1 + .../scss/answers/cards/product-standard.scss | 3 ++- .../answers/cards/professional-location.scss | 14 +++++++++++++- .../answers/cards/professional-standard.scss | 7 +++++++ static/scss/answers/cards/standard.scss | 1 + 15 files changed, 71 insertions(+), 5 deletions(-) diff --git a/static/scss/answers/cards/document-standard.scss b/static/scss/answers/cards/document-standard.scss index 40ceb2b97..873aea869 100644 --- a/static/scss/answers/cards/document-standard.scss +++ b/static/scss/answers/cards/document-standard.scss @@ -64,6 +64,7 @@ &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-ctasWrapper diff --git a/static/scss/answers/cards/event-standard.scss b/static/scss/answers/cards/event-standard.scss index c8a5898dc..6b9d27eae 100644 --- a/static/scss/answers/cards/event-standard.scss +++ b/static/scss/answers/cards/event-standard.scss @@ -79,6 +79,7 @@ &-detailsText { margin-top: calc(var(--yxt-base-spacing) / 2); + color: var(--yxt-color-text-primary); } &-content diff --git a/static/scss/answers/cards/faq-accordion.scss b/static/scss/answers/cards/faq-accordion.scss index 975e9183b..32ab65e14 100644 --- a/static/scss/answers/cards/faq-accordion.scss +++ b/static/scss/answers/cards/faq-accordion.scss @@ -90,10 +90,14 @@ margin: calc(var(--yxt-base-spacing) / 2) var(--yxt-base-spacing); font-size: var(--yxt-font-size-md); - color: var(--yxt-color-text-primary); line-height: var(--yxt-line-height-md); } + &-detailsText + { + color: var(--yxt-color-text-primary); + } + &-details-toggle { margin-left: var(--yxt-base-spacing); diff --git a/static/scss/answers/cards/financial-professional-location.scss b/static/scss/answers/cards/financial-professional-location.scss index 632f9014c..79db7aeea 100644 --- a/static/scss/answers/cards/financial-professional-location.scss +++ b/static/scss/answers/cards/financial-professional-location.scss @@ -95,6 +95,11 @@ $financial-professional-location-ordinal-dimensions: 18px !default; padding-bottom: 0; } + &-distance + { + color: var(--yxt-color-text-primary); + } + &-distance { font-style: italic; @@ -103,7 +108,12 @@ $financial-professional-location-ordinal-dimensions: 18px !default; margin-right: 0; } - &-address, + &-address + { + margin-top: calc(var(--hh-financial-professional-location-spacing) / 2); + color: var(--yxt-color-text-primary); + } + &-cardDetails { margin-top: calc(var(--hh-financial-professional-location-spacing) / 2); @@ -112,6 +122,7 @@ $financial-professional-location-ordinal-dimensions: 18px !default; &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-listTitle @@ -127,9 +138,15 @@ $financial-professional-location-ordinal-dimensions: 18px !default; padding-left: calc(var(--hh-financial-professional-location-spacing) / 2); } + &-listWrapper + { + color: var(--yxt-color-text-primary); + } + &-phone { margin-top: calc(var(--hh-financial-professional-location-spacing) / 2); + color: var(--yxt-color-text-primary); } &-phone--desktop { diff --git a/static/scss/answers/cards/job-standard.scss b/static/scss/answers/cards/job-standard.scss index d3616eefa..d35c16588 100644 --- a/static/scss/answers/cards/job-standard.scss +++ b/static/scss/answers/cards/job-standard.scss @@ -67,6 +67,7 @@ &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-ctasWrapper diff --git a/static/scss/answers/cards/link-standard.scss b/static/scss/answers/cards/link-standard.scss index 6174af735..81a579fef 100644 --- a/static/scss/answers/cards/link-standard.scss +++ b/static/scss/answers/cards/link-standard.scss @@ -62,6 +62,7 @@ &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); br { display: none; // TODO (agrow) figure out a less hacky way to do this diff --git a/static/scss/answers/cards/location-standard.scss b/static/scss/answers/cards/location-standard.scss index e56750f9e..8b9f6c722 100644 --- a/static/scss/answers/cards/location-standard.scss +++ b/static/scss/answers/cards/location-standard.scss @@ -146,6 +146,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac font-style: italic; white-space: nowrap; padding-left: 4px; + color: var(--yxt-color-text-primary); } &-subtitle @@ -228,13 +229,16 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac &-address { + color: var(--yxt-color-text-primary); + .c-AddressRow:last-child { display: none; } } &-phone - { + { + color: var(--yxt-color-text-primary); display: flex; font-weight: var(--yxt-font-weight-semibold); margin-top: calc(var(--hh-location-standard-base-spacing) / 4); @@ -265,8 +269,14 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac margin-top: calc(var(--hh-location-standard-base-spacing) / 2); } + &-detailsText + { + color: var(--yxt-color-text-primary); + } + &-hoursText { + color: var(--yxt-color-text-primary); margin-top: calc(var(--hh-location-standard-base-spacing) / 2); } @@ -277,6 +287,7 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac &-services { + color: var(--yxt-color-text-primary); flex-basis: 100%; margin-top: calc(var(--hh-location-standard-base-spacing) / 2); } diff --git a/static/scss/answers/cards/menuitem-standard.scss b/static/scss/answers/cards/menuitem-standard.scss index 407d2181d..9a94f6d14 100644 --- a/static/scss/answers/cards/menuitem-standard.scss +++ b/static/scss/answers/cards/menuitem-standard.scss @@ -61,6 +61,11 @@ padding-bottom: calc(var(--yxt-base-spacing) / 2); } + &-listWrapper + { + color: var(--yxt-color-text-primary); + } + &-content { margin-top: calc(var(--yxt-base-spacing) / 2); @@ -69,6 +74,7 @@ &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-contentCtasWrapper diff --git a/static/scss/answers/cards/product-prominentimage-clickable.scss b/static/scss/answers/cards/product-prominentimage-clickable.scss index 0e2cbec73..0d5b112b8 100644 --- a/static/scss/answers/cards/product-prominentimage-clickable.scss +++ b/static/scss/answers/cards/product-prominentimage-clickable.scss @@ -113,6 +113,7 @@ &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } .HitchhikerCard diff --git a/static/scss/answers/cards/product-prominentimage.scss b/static/scss/answers/cards/product-prominentimage.scss index b1dea9bda..b8b8cba44 100644 --- a/static/scss/answers/cards/product-prominentimage.scss +++ b/static/scss/answers/cards/product-prominentimage.scss @@ -95,6 +95,7 @@ &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-ctasWrapper diff --git a/static/scss/answers/cards/product-prominentvideo.scss b/static/scss/answers/cards/product-prominentvideo.scss index 02b74b612..a0178a0d7 100644 --- a/static/scss/answers/cards/product-prominentvideo.scss +++ b/static/scss/answers/cards/product-prominentvideo.scss @@ -61,6 +61,7 @@ &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-cardDetails diff --git a/static/scss/answers/cards/product-standard.scss b/static/scss/answers/cards/product-standard.scss index 006d7da6d..31b311e62 100644 --- a/static/scss/answers/cards/product-standard.scss +++ b/static/scss/answers/cards/product-standard.scss @@ -66,7 +66,8 @@ &-detailsText { - @include rich_text_formatting; + @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-ctasWrapper diff --git a/static/scss/answers/cards/professional-location.scss b/static/scss/answers/cards/professional-location.scss index 3b7168669..5d0fb1363 100644 --- a/static/scss/answers/cards/professional-location.scss +++ b/static/scss/answers/cards/professional-location.scss @@ -103,7 +103,12 @@ $professional-location-ordinal-dimensions: 18px !default; margin-right: 0; } - &-address, + &-address + { + margin-top: calc(var(--hh-professional-location-spacing) / 2); + color: var(--yxt-color-text-primary); + } + &-cardDetails { margin-top: calc(var(--hh-professional-location-spacing) / 2); @@ -112,6 +117,7 @@ $professional-location-ordinal-dimensions: 18px !default; &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-listTitle @@ -127,9 +133,15 @@ $professional-location-ordinal-dimensions: 18px !default; padding-left: calc(var(--hh-professional-location-spacing) / 2); } + &-listWrapper + { + color: var(--yxt-color-text-primary); + } + &-phone { margin-top: calc(var(--hh-professional-location-spacing) / 2); + color: var(--yxt-color-text-primary); } &-phone--desktop { diff --git a/static/scss/answers/cards/professional-standard.scss b/static/scss/answers/cards/professional-standard.scss index aefe6e15c..330c59055 100644 --- a/static/scss/answers/cards/professional-standard.scss +++ b/static/scss/answers/cards/professional-standard.scss @@ -71,6 +71,7 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default; &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-listTitle @@ -86,9 +87,15 @@ $professional-standard-spacing: var(--yxt-base-spacing) !default; padding-left: calc(var(--hh-professional-standard-spacing) / 2); } + &-listWrapper + { + color: var(--yxt-color-text-primary); + } + &-phone { margin-top: calc(var(--hh-professional-standard-spacing) / 2); + color: var(--yxt-color-text-primary); } &-phone--desktop { diff --git a/static/scss/answers/cards/standard.scss b/static/scss/answers/cards/standard.scss index 23f5438e1..c7e09a177 100644 --- a/static/scss/answers/cards/standard.scss +++ b/static/scss/answers/cards/standard.scss @@ -64,6 +64,7 @@ &-detailsText { @include rich_text_formatting; + color: var(--yxt-color-text-primary); } &-ctasWrapper From 646c16624f01129bad6853d685ffac6a3091da72 Mon Sep 17 00:00:00 2001 From: nmanu1 <88398086+nmanu1@users.noreply.github.com> Date: Tue, 12 Oct 2021 19:40:48 -0400 Subject: [PATCH 17/22] Fix feedback analytics (#975) Only show thumbs up/down feedback buttons when user provides `businessId` and enables analytics. J=SLAP-1175 TEST=manual Smoke testing to check if feedback buttons only appear when expected. --- cards/card_component.js | 2 ++ cards/common-partials/thumbsfeedback.hbs | 10 ++++++---- cards/document-standard/template.hbs | 4 +--- cards/event-standard/template.hbs | 4 +--- cards/faq-accordion/template.hbs | 4 +--- cards/financial-professional-location/template.hbs | 4 +--- cards/job-standard/template.hbs | 4 +--- cards/link-standard/template.hbs | 4 +--- cards/location-standard/template.hbs | 4 +--- cards/menuitem-standard/template.hbs | 4 +--- cards/multilang-event-standard/template.hbs | 4 +--- cards/multilang-faq-accordion/template.hbs | 4 +--- .../template.hbs | 4 +--- cards/multilang-job-standard/template.hbs | 4 +--- cards/multilang-link-standard/template.hbs | 4 +--- cards/multilang-location-standard/template.hbs | 4 +--- cards/multilang-menuitem-standard/template.hbs | 4 +--- .../template.hbs | 4 +--- cards/multilang-product-prominentimage/template.hbs | 4 +--- cards/multilang-product-prominentvideo/template.hbs | 4 +--- cards/multilang-product-standard/template.hbs | 4 +--- cards/multilang-professional-location/template.hbs | 4 +--- cards/multilang-professional-standard/template.hbs | 4 +--- cards/multilang-standard/template.hbs | 4 +--- cards/product-prominentimage-clickable/template.hbs | 4 +--- cards/product-prominentimage/template.hbs | 4 +--- cards/product-prominentvideo/template.hbs | 4 +--- cards/product-standard/template.hbs | 4 +--- cards/professional-location/template.hbs | 4 +--- cards/professional-standard/template.hbs | 4 +--- cards/standard/template.hbs | 4 +--- directanswercards/card_component.js | 1 + global_config.json | 2 +- test-site/config/global_config.json | 4 ++-- translations/messages.pot | 8 ++++---- 35 files changed, 45 insertions(+), 98 deletions(-) diff --git a/cards/card_component.js b/cards/card_component.js index 54c862afa..511d3fb92 100644 --- a/cards/card_component.js +++ b/cards/card_component.js @@ -78,6 +78,8 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { cardData.titleEventOptions = updatedEventOptions; } + cardData.feedbackEnabled = ANSWERS.getAnalyticsOptIn() && cardData.feedback; + const { details, showMoreDetails } = cardData; const cardDetails = details || ''; diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs index a211443a7..d52bcd154 100644 --- a/cards/common-partials/thumbsfeedback.hbs +++ b/cards/common-partials/thumbsfeedback.hbs @@ -1,7 +1,9 @@ -{{#if directAnswerClass}} - {{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}} -{{else}} - {{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}} +{{#if feedbackEnabled}} + {{#if directAnswerClass}} + {{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}} + {{else}} + {{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}} + {{/if}} {{/if}} {{#*inline 'feedback'}} diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs index 990728dd7..3ac578d79 100644 --- a/cards/document-standard/template.hbs +++ b/cards/document-standard/template.hbs @@ -9,9 +9,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs index 69841178f..7cd5b4832 100644 --- a/cards/event-standard/template.hbs +++ b/cards/event-standard/template.hbs @@ -51,9 +51,7 @@ {{/if}} {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs index 2906450f0..4c5df47f6 100644 --- a/cards/faq-accordion/template.hbs +++ b/cards/faq-accordion/template.hbs @@ -38,9 +38,7 @@ {{/if}} {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs index f92ff84c7..77d10d0ca 100644 --- a/cards/financial-professional-location/template.hbs +++ b/cards/financial-professional-location/template.hbs @@ -21,9 +21,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs index 212c50c7b..1fae49cf0 100644 --- a/cards/job-standard/template.hbs +++ b/cards/job-standard/template.hbs @@ -9,9 +9,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs index 0e60c4c40..a145c79cb 100644 --- a/cards/link-standard/template.hbs +++ b/cards/link-standard/template.hbs @@ -5,9 +5,7 @@
{{> details }}
- {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs index cdb4356d6..3d8548246 100644 --- a/cards/location-standard/template.hbs +++ b/cards/location-standard/template.hbs @@ -26,9 +26,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs index ceca3bf20..f859990a6 100644 --- a/cards/menuitem-standard/template.hbs +++ b/cards/menuitem-standard/template.hbs @@ -19,9 +19,7 @@ {{/with}} {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs index 2c275320a..8a99337db 100644 --- a/cards/multilang-event-standard/template.hbs +++ b/cards/multilang-event-standard/template.hbs @@ -51,9 +51,7 @@ {{/if}} {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs index 2906450f0..4c5df47f6 100644 --- a/cards/multilang-faq-accordion/template.hbs +++ b/cards/multilang-faq-accordion/template.hbs @@ -38,9 +38,7 @@ {{/if}} {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs index 90999f442..e2e68a0ea 100644 --- a/cards/multilang-financial-professional-location/template.hbs +++ b/cards/multilang-financial-professional-location/template.hbs @@ -21,9 +21,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs index 212c50c7b..1fae49cf0 100644 --- a/cards/multilang-job-standard/template.hbs +++ b/cards/multilang-job-standard/template.hbs @@ -9,9 +9,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs index 0e60c4c40..a145c79cb 100644 --- a/cards/multilang-link-standard/template.hbs +++ b/cards/multilang-link-standard/template.hbs @@ -5,9 +5,7 @@
{{> details }}
- {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs index 929553765..c7b520b6d 100644 --- a/cards/multilang-location-standard/template.hbs +++ b/cards/multilang-location-standard/template.hbs @@ -26,9 +26,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs index a8a9ed612..bd9e4f698 100644 --- a/cards/multilang-menuitem-standard/template.hbs +++ b/cards/multilang-menuitem-standard/template.hbs @@ -19,9 +19,7 @@ {{/with}} {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs index 2cf510f90..e54877d26 100644 --- a/cards/multilang-product-prominentimage-clickable/template.hbs +++ b/cards/multilang-product-prominentimage-clickable/template.hbs @@ -14,9 +14,7 @@
{{> details }}
- {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs index df3d75ff6..3d30a07a1 100644 --- a/cards/multilang-product-prominentimage/template.hbs +++ b/cards/multilang-product-prominentimage/template.hbs @@ -7,9 +7,7 @@ {{> details }}
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs index bad303598..6e4bbc169 100644 --- a/cards/multilang-product-prominentvideo/template.hbs +++ b/cards/multilang-product-prominentvideo/template.hbs @@ -54,9 +54,7 @@ {{> details }}
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}} diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs index 7eab7a8a3..d9c741930 100644 --- a/cards/multilang-product-standard/template.hbs +++ b/cards/multilang-product-standard/template.hbs @@ -16,9 +16,7 @@ {{/with}} {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs index befb06fc2..15d775d30 100644 --- a/cards/multilang-professional-location/template.hbs +++ b/cards/multilang-professional-location/template.hbs @@ -21,9 +21,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs index 8fef8f9b1..9569afc4f 100644 --- a/cards/multilang-professional-standard/template.hbs +++ b/cards/multilang-professional-standard/template.hbs @@ -11,9 +11,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs index 9fdb99b9d..6b5b160f1 100644 --- a/cards/multilang-standard/template.hbs +++ b/cards/multilang-standard/template.hbs @@ -9,9 +9,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/product-prominentimage-clickable/template.hbs b/cards/product-prominentimage-clickable/template.hbs index b30dd4e0b..802a25cab 100644 --- a/cards/product-prominentimage-clickable/template.hbs +++ b/cards/product-prominentimage-clickable/template.hbs @@ -14,9 +14,7 @@
{{> details }}
- {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs index 45d4e4e59..ff7e00a62 100644 --- a/cards/product-prominentimage/template.hbs +++ b/cards/product-prominentimage/template.hbs @@ -7,9 +7,7 @@ {{> details }}
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs index bad303598..6e4bbc169 100644 --- a/cards/product-prominentvideo/template.hbs +++ b/cards/product-prominentvideo/template.hbs @@ -54,9 +54,7 @@ {{> details }}
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
{{/if}} diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs index 7eab7a8a3..d9c741930 100644 --- a/cards/product-standard/template.hbs +++ b/cards/product-standard/template.hbs @@ -16,9 +16,7 @@ {{/with}} {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs index c2a9da855..6c75ad83d 100644 --- a/cards/professional-location/template.hbs +++ b/cards/professional-location/template.hbs @@ -21,9 +21,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/professional-standard/template.hbs b/cards/professional-standard/template.hbs index 8fef8f9b1..9569afc4f 100644 --- a/cards/professional-standard/template.hbs +++ b/cards/professional-standard/template.hbs @@ -11,9 +11,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/cards/standard/template.hbs b/cards/standard/template.hbs index 9fdb99b9d..6b5b160f1 100644 --- a/cards/standard/template.hbs +++ b/cards/standard/template.hbs @@ -9,9 +9,7 @@
{{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}}
diff --git a/directanswercards/card_component.js b/directanswercards/card_component.js index 18c4f026e..8523356a5 100644 --- a/directanswercards/card_component.js +++ b/directanswercards/card_component.js @@ -26,6 +26,7 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { return super.setState({ ...cardData, + feedbackEnabled: ANSWERS.getAnalyticsOptIn(), feedbackSubmitted: data.feedbackSubmitted, isArray: Array.isArray(this.answer.value), cardName: `{{componentName}}`, diff --git a/global_config.json b/global_config.json index 1e20400d6..a460e2d31 100644 --- a/global_config.json +++ b/global_config.json @@ -1,5 +1,5 @@ { - "sdkVersion": "develop", // The version of the Answers SDK to use + "sdkVersion": "release/1.11", // The version of the Answers SDK to use // "apiKey": "", // The answers api key found on the experiences page. This will be provided automatically by the Yext CI system // "experienceVersion": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system diff --git a/test-site/config/global_config.json b/test-site/config/global_config.json index 9c505ad2b..91bd5f242 100644 --- a/test-site/config/global_config.json +++ b/test-site/config/global_config.json @@ -1,8 +1,8 @@ { - "sdkVersion": "develop", // The version of the Answers SDK to use + "sdkVersion": "release/v1.11", // 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": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system - "businessId": "3350634", // The business ID of the account. This will be provided automatically by the Yext CI system + // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system // "initializeManually": true, // If true, the experience must be started by calling AnswersExperience.init() or AnswersExperienceFrame.init() for iframe integrations. // "useJWT": true, // Whether or not to enable JWT. If true, the apiKey will be hidden from the build and the token must be specified through the runtime config. "sessionTrackingEnabled": true, // Whether or not session tracking is enabled for all pages diff --git a/translations/messages.pot b/translations/messages.pot index 9a1d7ac0e..835e153cd 100644 --- a/translations/messages.pot +++ b/translations/messages.pot @@ -88,7 +88,7 @@ msgstr "" msgid "Saturday" msgstr "" -#: cards/multilang-location-standard/template.hbs:145 +#: cards/multilang-location-standard/template.hbs:143 msgid "Services:" msgstr "" @@ -241,9 +241,9 @@ msgctxt "Call is a verb" msgid "Call" msgstr "" -#: cards/multilang-financial-professional-location/template.hbs:203 -#: cards/multilang-location-standard/template.hbs:214 -#: cards/multilang-professional-location/template.hbs:200 +#: cards/multilang-financial-professional-location/template.hbs:201 +#: cards/multilang-location-standard/template.hbs:212 +#: cards/multilang-professional-location/template.hbs:198 msgctxt "Close is a verb" msgid "Close Card" msgstr "" From 373774dec22b939fb7d3bbddeb2e09ebd91eac4f Mon Sep 17 00:00:00 2001 From: Tom Meyer Date: Wed, 13 Oct 2021 08:47:37 -0400 Subject: [PATCH 18/22] Revert "Add visitor support (#970)" This reverts commit d9bf11104dc2094fb0397adc146973c463f19459. --- static/js/answers-experience.js | 4 +--- static/js/runtime-config-listeners/visitor.js | 9 --------- tests/static/js/answers-experience.js | 12 ------------ 3 files changed, 1 insertion(+), 24 deletions(-) delete mode 100644 static/js/runtime-config-listeners/visitor.js delete mode 100644 tests/static/js/answers-experience.js diff --git a/static/js/answers-experience.js b/static/js/answers-experience.js index 9b528ac0f..899c98bc2 100644 --- a/static/js/answers-experience.js +++ b/static/js/answers-experience.js @@ -2,7 +2,6 @@ import DeferredPromise from './deferred-promise'; import analyticsListener from './runtime-config-listeners/analytics'; import sessionTrackingListener from './runtime-config-listeners/session-tracking'; import querySourceListener from './runtime-config-listeners/query-source'; -import visitorListener from './runtime-config-listeners/visitor'; /** * @typedef {import('./runtime-config.js').RuntimeConfigListener} RuntimeConfigListener @@ -15,8 +14,7 @@ export default class AnswersExperience { this._runtimeConfigListeners = [ analyticsListener, sessionTrackingListener, - querySourceListener, - visitorListener + querySourceListener ]; this._registerRuntimeConfigListeners(); diff --git a/static/js/runtime-config-listeners/visitor.js b/static/js/runtime-config-listeners/visitor.js deleted file mode 100644 index 47f1bee2e..000000000 --- a/static/js/runtime-config-listeners/visitor.js +++ /dev/null @@ -1,9 +0,0 @@ -/** - * @type {import('../runtime-config.js').RuntimeConfigListener} - */ - export default { - key: 'visitor', - callback: value => { - ANSWERS.setVisitor(value); - } -} \ No newline at end of file diff --git a/tests/static/js/answers-experience.js b/tests/static/js/answers-experience.js deleted file mode 100644 index fbb3a032f..000000000 --- a/tests/static/js/answers-experience.js +++ /dev/null @@ -1,12 +0,0 @@ -import AnswersExperience from '../../../static/js/answers-experience'; -import RuntimeConfig from '../../../static/js/runtime-config'; - -describe('AnswersExperience works properly', () => { - it('visitor listener is called when visitor is set', () => { - const runtimeConfig = new RuntimeConfig(); - const experience = new AnswersExperience(runtimeConfig); - const callListenerSpy = jest.spyOn(experience.runtimeConfig, '_callKeySpecificListeners'); - experience.runtimeConfig.set('visitor', { id: '123', idMethod: 'test' }); - expect(callListenerSpy).toHaveBeenCalledWith('update', 'visitor'); - }); -}); \ No newline at end of file From f7a18e6b854c789b58b0fa235405a7fc68830c25 Mon Sep 17 00:00:00 2001 From: Tom Meyer Date: Wed, 13 Oct 2021 09:13:29 -0400 Subject: [PATCH 19/22] Update version to v1.25. --- package-lock.json | 2 +- package.json | 2 +- static/package-lock.json | 2 +- static/package.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index a3971cf84..4ca1c3a08 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "answers-hitchhiker-theme", - "version": "1.24.1", + "version": "1.25.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index e4a6a756b..2e2ea20ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "answers-hitchhiker-theme", - "version": "1.24.1", + "version": "1.25.0", "description": "A starter answers theme for hitchhikers", "scripts": { "test": "cross-env NODE_ICU_DATA=node_modules/full-icu jest --verbose", diff --git a/static/package-lock.json b/static/package-lock.json index c5b09f86f..8606337f0 100644 --- a/static/package-lock.json +++ b/static/package-lock.json @@ -1,6 +1,6 @@ { "name": "answers-hitchhiker-theme", - "version": "1.24.1", + "version": "1.25.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/static/package.json b/static/package.json index c59b534d7..fd97fd6f9 100644 --- a/static/package.json +++ b/static/package.json @@ -1,6 +1,6 @@ { "name": "answers-hitchhiker-theme", - "version": "1.24.1", + "version": "1.25.0", "description": "Toolchain for use with the HH Theme", "main": "Gruntfile.js", "scripts": { From 63c18338b87228ac51b97f5156a36657d1a0290d Mon Sep 17 00:00:00 2001 From: nmanu1 Date: Wed, 13 Oct 2021 10:55:20 -0400 Subject: [PATCH 20/22] Revert "Fix feedback analytics (#975)" This reverts commit 646c16624f01129bad6853d685ffac6a3091da72. --- cards/card_component.js | 2 -- cards/common-partials/thumbsfeedback.hbs | 10 ++++------ cards/document-standard/template.hbs | 4 +++- cards/event-standard/template.hbs | 4 +++- cards/faq-accordion/template.hbs | 4 +++- cards/financial-professional-location/template.hbs | 4 +++- cards/job-standard/template.hbs | 4 +++- cards/link-standard/template.hbs | 4 +++- cards/location-standard/template.hbs | 4 +++- cards/menuitem-standard/template.hbs | 4 +++- cards/multilang-event-standard/template.hbs | 4 +++- cards/multilang-faq-accordion/template.hbs | 4 +++- .../template.hbs | 4 +++- cards/multilang-job-standard/template.hbs | 4 +++- cards/multilang-link-standard/template.hbs | 4 +++- cards/multilang-location-standard/template.hbs | 4 +++- cards/multilang-menuitem-standard/template.hbs | 4 +++- .../template.hbs | 4 +++- cards/multilang-product-prominentimage/template.hbs | 4 +++- cards/multilang-product-prominentvideo/template.hbs | 4 +++- cards/multilang-product-standard/template.hbs | 4 +++- cards/multilang-professional-location/template.hbs | 4 +++- cards/multilang-professional-standard/template.hbs | 4 +++- cards/multilang-standard/template.hbs | 4 +++- cards/product-prominentimage-clickable/template.hbs | 4 +++- cards/product-prominentimage/template.hbs | 4 +++- cards/product-prominentvideo/template.hbs | 4 +++- cards/product-standard/template.hbs | 4 +++- cards/professional-location/template.hbs | 4 +++- cards/professional-standard/template.hbs | 4 +++- cards/standard/template.hbs | 4 +++- directanswercards/card_component.js | 1 - global_config.json | 2 +- test-site/config/global_config.json | 4 ++-- translations/messages.pot | 8 ++++---- 35 files changed, 98 insertions(+), 45 deletions(-) diff --git a/cards/card_component.js b/cards/card_component.js index 511d3fb92..54c862afa 100644 --- a/cards/card_component.js +++ b/cards/card_component.js @@ -78,8 +78,6 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { cardData.titleEventOptions = updatedEventOptions; } - cardData.feedbackEnabled = ANSWERS.getAnalyticsOptIn() && cardData.feedback; - const { details, showMoreDetails } = cardData; const cardDetails = details || ''; diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs index d52bcd154..a211443a7 100644 --- a/cards/common-partials/thumbsfeedback.hbs +++ b/cards/common-partials/thumbsfeedback.hbs @@ -1,9 +1,7 @@ -{{#if feedbackEnabled}} - {{#if directAnswerClass}} - {{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}} - {{else}} - {{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}} - {{/if}} +{{#if directAnswerClass}} + {{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}} +{{else}} + {{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}} {{/if}} {{#*inline 'feedback'}} diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs index 3ac578d79..990728dd7 100644 --- a/cards/document-standard/template.hbs +++ b/cards/document-standard/template.hbs @@ -9,7 +9,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs index 7cd5b4832..69841178f 100644 --- a/cards/event-standard/template.hbs +++ b/cards/event-standard/template.hbs @@ -51,7 +51,9 @@ {{/if}} {{/if}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs index 4c5df47f6..2906450f0 100644 --- a/cards/faq-accordion/template.hbs +++ b/cards/faq-accordion/template.hbs @@ -38,7 +38,9 @@ {{/if}} {{/if}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs index 77d10d0ca..f92ff84c7 100644 --- a/cards/financial-professional-location/template.hbs +++ b/cards/financial-professional-location/template.hbs @@ -21,7 +21,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs index 1fae49cf0..212c50c7b 100644 --- a/cards/job-standard/template.hbs +++ b/cards/job-standard/template.hbs @@ -9,7 +9,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs index a145c79cb..0e60c4c40 100644 --- a/cards/link-standard/template.hbs +++ b/cards/link-standard/template.hbs @@ -5,7 +5,9 @@
{{> details }}
- {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs index 3d8548246..cdb4356d6 100644 --- a/cards/location-standard/template.hbs +++ b/cards/location-standard/template.hbs @@ -26,7 +26,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs index f859990a6..ceca3bf20 100644 --- a/cards/menuitem-standard/template.hbs +++ b/cards/menuitem-standard/template.hbs @@ -19,7 +19,9 @@ {{/with}} {{/if}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs index 8a99337db..2c275320a 100644 --- a/cards/multilang-event-standard/template.hbs +++ b/cards/multilang-event-standard/template.hbs @@ -51,7 +51,9 @@ {{/if}} {{/if}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs index 4c5df47f6..2906450f0 100644 --- a/cards/multilang-faq-accordion/template.hbs +++ b/cards/multilang-faq-accordion/template.hbs @@ -38,7 +38,9 @@ {{/if}} {{/if}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs index e2e68a0ea..90999f442 100644 --- a/cards/multilang-financial-professional-location/template.hbs +++ b/cards/multilang-financial-professional-location/template.hbs @@ -21,7 +21,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs index 1fae49cf0..212c50c7b 100644 --- a/cards/multilang-job-standard/template.hbs +++ b/cards/multilang-job-standard/template.hbs @@ -9,7 +9,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs index a145c79cb..0e60c4c40 100644 --- a/cards/multilang-link-standard/template.hbs +++ b/cards/multilang-link-standard/template.hbs @@ -5,7 +5,9 @@
{{> details }}
- {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs index c7b520b6d..929553765 100644 --- a/cards/multilang-location-standard/template.hbs +++ b/cards/multilang-location-standard/template.hbs @@ -26,7 +26,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs index bd9e4f698..a8a9ed612 100644 --- a/cards/multilang-menuitem-standard/template.hbs +++ b/cards/multilang-menuitem-standard/template.hbs @@ -19,7 +19,9 @@ {{/with}} {{/if}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs index e54877d26..2cf510f90 100644 --- a/cards/multilang-product-prominentimage-clickable/template.hbs +++ b/cards/multilang-product-prominentimage-clickable/template.hbs @@ -14,7 +14,9 @@
{{> details }}
- {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs index 3d30a07a1..df3d75ff6 100644 --- a/cards/multilang-product-prominentimage/template.hbs +++ b/cards/multilang-product-prominentimage/template.hbs @@ -7,7 +7,9 @@ {{> details }}
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs index 6e4bbc169..bad303598 100644 --- a/cards/multilang-product-prominentvideo/template.hbs +++ b/cards/multilang-product-prominentvideo/template.hbs @@ -54,7 +54,9 @@ {{> details }}
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
{{/if}} diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs index d9c741930..7eab7a8a3 100644 --- a/cards/multilang-product-standard/template.hbs +++ b/cards/multilang-product-standard/template.hbs @@ -16,7 +16,9 @@ {{/with}} {{/if}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs index 15d775d30..befb06fc2 100644 --- a/cards/multilang-professional-location/template.hbs +++ b/cards/multilang-professional-location/template.hbs @@ -21,7 +21,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs index 9569afc4f..8fef8f9b1 100644 --- a/cards/multilang-professional-standard/template.hbs +++ b/cards/multilang-professional-standard/template.hbs @@ -11,7 +11,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs index 6b5b160f1..9fdb99b9d 100644 --- a/cards/multilang-standard/template.hbs +++ b/cards/multilang-standard/template.hbs @@ -9,7 +9,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/product-prominentimage-clickable/template.hbs b/cards/product-prominentimage-clickable/template.hbs index 802a25cab..b30dd4e0b 100644 --- a/cards/product-prominentimage-clickable/template.hbs +++ b/cards/product-prominentimage-clickable/template.hbs @@ -14,7 +14,9 @@
{{> details }}
- {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs index ff7e00a62..45d4e4e59 100644 --- a/cards/product-prominentimage/template.hbs +++ b/cards/product-prominentimage/template.hbs @@ -7,7 +7,9 @@ {{> details }}
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs index 6e4bbc169..bad303598 100644 --- a/cards/product-prominentvideo/template.hbs +++ b/cards/product-prominentvideo/template.hbs @@ -54,7 +54,9 @@ {{> details }}
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
{{/if}} diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs index d9c741930..7eab7a8a3 100644 --- a/cards/product-standard/template.hbs +++ b/cards/product-standard/template.hbs @@ -16,7 +16,9 @@ {{/with}} {{/if}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}} diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs index 6c75ad83d..c2a9da855 100644 --- a/cards/professional-location/template.hbs +++ b/cards/professional-location/template.hbs @@ -21,7 +21,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/professional-standard/template.hbs b/cards/professional-standard/template.hbs index 9569afc4f..8fef8f9b1 100644 --- a/cards/professional-standard/template.hbs +++ b/cards/professional-standard/template.hbs @@ -11,7 +11,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/cards/standard/template.hbs b/cards/standard/template.hbs index 6b5b160f1..9fdb99b9d 100644 --- a/cards/standard/template.hbs +++ b/cards/standard/template.hbs @@ -9,7 +9,9 @@
{{> ctas }} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if card.feedback}} + {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{/if}}
diff --git a/directanswercards/card_component.js b/directanswercards/card_component.js index 8523356a5..18c4f026e 100644 --- a/directanswercards/card_component.js +++ b/directanswercards/card_component.js @@ -26,7 +26,6 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { return super.setState({ ...cardData, - feedbackEnabled: ANSWERS.getAnalyticsOptIn(), feedbackSubmitted: data.feedbackSubmitted, isArray: Array.isArray(this.answer.value), cardName: `{{componentName}}`, diff --git a/global_config.json b/global_config.json index a460e2d31..1e20400d6 100644 --- a/global_config.json +++ b/global_config.json @@ -1,5 +1,5 @@ { - "sdkVersion": "release/1.11", // The version of the Answers SDK to use + "sdkVersion": "develop", // The version of the Answers SDK to use // "apiKey": "", // The answers api key found on the experiences page. This will be provided automatically by the Yext CI system // "experienceVersion": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system diff --git a/test-site/config/global_config.json b/test-site/config/global_config.json index 91bd5f242..9c505ad2b 100644 --- a/test-site/config/global_config.json +++ b/test-site/config/global_config.json @@ -1,8 +1,8 @@ { - "sdkVersion": "release/v1.11", // The version of the Answers SDK to use + "sdkVersion": "develop", // 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": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system - // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system + "businessId": "3350634", // The business ID of the account. This will be provided automatically by the Yext CI system // "initializeManually": true, // If true, the experience must be started by calling AnswersExperience.init() or AnswersExperienceFrame.init() for iframe integrations. // "useJWT": true, // Whether or not to enable JWT. If true, the apiKey will be hidden from the build and the token must be specified through the runtime config. "sessionTrackingEnabled": true, // Whether or not session tracking is enabled for all pages diff --git a/translations/messages.pot b/translations/messages.pot index 835e153cd..9a1d7ac0e 100644 --- a/translations/messages.pot +++ b/translations/messages.pot @@ -88,7 +88,7 @@ msgstr "" msgid "Saturday" msgstr "" -#: cards/multilang-location-standard/template.hbs:143 +#: cards/multilang-location-standard/template.hbs:145 msgid "Services:" msgstr "" @@ -241,9 +241,9 @@ msgctxt "Call is a verb" msgid "Call" msgstr "" -#: cards/multilang-financial-professional-location/template.hbs:201 -#: cards/multilang-location-standard/template.hbs:212 -#: cards/multilang-professional-location/template.hbs:198 +#: cards/multilang-financial-professional-location/template.hbs:203 +#: cards/multilang-location-standard/template.hbs:214 +#: cards/multilang-professional-location/template.hbs:200 msgctxt "Close is a verb" msgid "Close Card" msgstr "" From de779cd260b80490b34b77b23d38a547e9f54f5a Mon Sep 17 00:00:00 2001 From: nmanu1 Date: Wed, 13 Oct 2021 10:58:35 -0400 Subject: [PATCH 21/22] Revert "Add generic thumbs up/down (#973)" This reverts commit d3d591b38092c6ccb321ba697b7ccf267e55e892. --- cards/card_component.js | 72 +---------- cards/common-partials/thumbsfeedback.hbs | 54 -------- cards/document-standard/component.js | 6 +- cards/document-standard/template.hbs | 9 +- cards/event-standard/component.js | 6 +- cards/event-standard/template.hbs | 35 +++--- cards/faq-accordion/component.js | 26 +--- cards/faq-accordion/template.hbs | 41 +++---- .../component.js | 6 +- .../template.hbs | 9 +- cards/job-standard/component.js | 6 +- cards/job-standard/template.hbs | 9 +- cards/link-standard/component.js | 4 - cards/link-standard/template.hbs | 7 +- cards/location-standard/component.js | 6 +- cards/location-standard/template.hbs | 9 +- cards/menuitem-standard/component.js | 6 +- cards/menuitem-standard/template.hbs | 25 ++-- cards/multilang-event-standard/component.js | 6 +- cards/multilang-event-standard/template.hbs | 37 +++--- cards/multilang-faq-accordion/component.js | 26 +--- cards/multilang-faq-accordion/template.hbs | 41 +++---- .../component.js | 6 +- .../template.hbs | 9 +- cards/multilang-job-standard/component.js | 6 +- cards/multilang-job-standard/template.hbs | 9 +- cards/multilang-link-standard/component.js | 4 - cards/multilang-link-standard/template.hbs | 7 +- .../multilang-location-standard/component.js | 6 +- .../multilang-location-standard/template.hbs | 9 +- .../multilang-menuitem-standard/component.js | 6 +- .../multilang-menuitem-standard/template.hbs | 25 ++-- .../component.js | 4 - .../template.hbs | 5 - .../component.js | 6 +- .../template.hbs | 7 +- .../component.js | 6 +- .../template.hbs | 7 +- cards/multilang-product-standard/component.js | 4 - cards/multilang-product-standard/template.hbs | 23 ++-- .../component.js | 6 +- .../template.hbs | 9 +- .../component.js | 6 +- .../template.hbs | 7 +- cards/multilang-standard/component.js | 6 +- cards/multilang-standard/template.hbs | 9 +- .../component.js | 4 - .../template.hbs | 5 - cards/product-prominentimage/component.js | 6 +- cards/product-prominentimage/template.hbs | 7 +- cards/product-prominentvideo/component.js | 6 +- cards/product-prominentvideo/template.hbs | 7 +- cards/product-standard/component.js | 4 - cards/product-standard/template.hbs | 23 ++-- cards/professional-location/component.js | 6 +- cards/professional-location/template.hbs | 9 +- cards/professional-standard/component.js | 6 +- cards/professional-standard/template.hbs | 7 +- cards/standard/component.js | 6 +- cards/standard/template.hbs | 9 +- .../allfields-standard/component.js | 4 +- .../allfields-standard/template.hbs | 52 +++++++- directanswercards/card_component.js | 57 ++++++--- .../documentsearch-standard/component.js | 4 +- .../documentsearch-standard/template.hbs | 52 +++++++- .../multilang-allfields-standard/component.js | 4 +- .../multilang-allfields-standard/template.hbs | 52 +++++++- script/core.hbs | 5 - static/js/HitchhikerJS.js | 3 - static/js/dom.js | 30 ----- .../scss/answers/cards/document-standard.scss | 8 -- static/scss/answers/cards/event-standard.scss | 8 -- static/scss/answers/cards/faq-accordion.scss | 19 --- .../scss/answers/cards/location-standard.scss | 23 ---- .../product-prominentimage-clickable.scss | 18 --- .../answers/cards/product-prominentimage.scss | 18 --- .../answers/cards/product-prominentvideo.scss | 18 --- static/scss/answers/cards/standard.scss | 8 -- .../directanswercards/allfields-standard.scss | 8 -- .../documentsearch-standard.scss | 12 -- .../interactive-map/VerticalFullPageMap.scss | 8 -- static/scss/answers/module.scss | 115 ++---------------- test-site/config/global_config.json | 2 +- translations/messages.pot | 50 +------- 84 files changed, 373 insertions(+), 948 deletions(-) delete mode 100644 cards/common-partials/thumbsfeedback.hbs delete mode 100644 static/js/dom.js diff --git a/cards/card_component.js b/cards/card_component.js index 54c862afa..e946baaef 100644 --- a/cards/card_component.js +++ b/cards/card_component.js @@ -30,38 +30,6 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { }) ); } - - this.addFeedbackListeners(); - } - - addFeedbackListeners() { - const feedbackFormSelector = '.js-HitchhikerCard-feedbackForm'; - let feedbackFormEl = this._container.querySelector(feedbackFormSelector); - if (feedbackFormEl) { - // For WCAG compliance, the feedback should be a submittable form - feedbackFormEl.addEventListener('submit', (e) => { - const formTargetEl = e.target; - const isGood = formTargetEl.querySelector('input:checked').value === 'true'; - - this.reportQuality(isGood); - this.updateState({ - feedbackSubmitted: true - }); - }); - - let thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput'); - if (thumbSelectorEls) { - thumbSelectorEls.forEach(el => { - el.addEventListener('click', (e) => { - let input = el.querySelector('input'); - if (input) { - input.checked = true; - } - HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit'); - }); - }); - } - } } setState(data) { @@ -78,7 +46,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { cardData.titleEventOptions = updatedEventOptions; } - const { details, showMoreDetails } = cardData; + let { details, showMoreDetails } = cardData; const cardDetails = details || ''; const cardShowMoreConfig = showMoreDetails || {}; @@ -88,7 +56,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { // The card's details must extend past this limit as well for the toggling to be enabled. const showExcessDetailsToggle = showMoreLimit && cardDetails.length > showMoreLimit; - const truncatedDetails = showExcessDetailsToggle + let truncatedDetails = showExcessDetailsToggle ? `${cardDetails.substring(0, showMoreLimit)}...` : ''; @@ -110,42 +78,6 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { } } - /** - * reportQuality will send the quality feedback to analytics - * @param {boolean} isGood true if the answer is what you were looking for - */ - reportQuality(isGood) { - /** - * EventTypes are explicit strings defined - * for what the server expects for analytics. - * - * @enum - */ - const EventTypes = { - THUMBS_UP: 'THUMBS_UP', - THUMBS_DOWN: 'THUMBS_DOWN' - }; - const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN; - const event = new ANSWERS.AnalyticsEvent(eventType) - .addOptions({ - directAnswer: false, - verticalKey: this.verticalKey, - searcher: this._config.isUniversal ? 'UNIVERSAL' : 'VERTICAL', - entityId: this.result.id - }); - - this.analyticsReporter.report(event); - } - - /** - * updateState enables for partial updates (the delta between the old and new) - * @type {object} The new state to apply to the old - */ - updateState (state = {}) { - const newState = Object.assign({}, this.getState(), state); - this.setState(newState); - } - addDefaultEventOptions(eventOptions = {}) { return Object.assign({}, { verticalKey: this.verticalKey, diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs deleted file mode 100644 index a211443a7..000000000 --- a/cards/common-partials/thumbsfeedback.hbs +++ /dev/null @@ -1,54 +0,0 @@ -{{#if directAnswerClass}} - {{> feedback className=directAnswerClass cardType='HitchhikerDirectAnswerCard'}} -{{else}} - {{> feedback className='HitchhikerCard' cardType='HitchhikerCard'}} -{{/if}} - -{{#*inline 'feedback'}} -
-
- {{#if feedbackSubmitted}} -
- {{feedbackTextOnSubmission}} -
- {{else}} - {{#if feedbackText}} -
- {{feedbackText}} -
- {{/if}} -
-
-
- - -
- -
-
- {{/if}} -
-
-{{/inline}} diff --git a/cards/document-standard/component.js b/cards/document-standard/component.js index 7e79f93a8..f1f55f707 100644 --- a/cards/document-standard/component.js +++ b/cards/document-standard/component.js @@ -48,11 +48,7 @@ class document_standardCardComponent extends BaseCard['document-standard'] { eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/document-standard/template.hbs b/cards/document-standard/template.hbs index 990728dd7..a9f3b0402 100644 --- a/cards/document-standard/template.hbs +++ b/cards/document-standard/template.hbs @@ -7,12 +7,7 @@
{{> details }}
-
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -95,4 +90,4 @@ {{/if}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/event-standard/component.js b/cards/event-standard/component.js index 42764a44f..a9cb2278f 100644 --- a/cards/event-standard/component.js +++ b/cards/event-standard/component.js @@ -48,11 +48,7 @@ class event_standardCardComponent extends BaseCard['event-standard'] { eventType: 'DRIVING_DIRECTIONS', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs index 69841178f..6fd9a597e 100644 --- a/cards/event-standard/template.hbs +++ b/cards/event-standard/template.hbs @@ -32,29 +32,24 @@ {{/if}} {{> 'details'}} -
- {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} -
- {{#if (all card.CTA1.url card.CTA1.label)}} -
- {{#with card.CTA1}} - {{> CTA }} - {{/with}} -
- {{/if}} - {{#if (all card.CTA2.url card.CTA2.label)}} -
- {{#with card.CTA2}} - {{> CTA }} - {{/with}} -
- {{/if}} + {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} +
+ {{#if (all card.CTA1.url card.CTA1.label)}} +
+ {{#with card.CTA1}} + {{> CTA }} + {{/with}}
{{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if (all card.CTA2.url card.CTA2.label)}} +
+ {{#with card.CTA2}} + {{> CTA }} + {{/with}} +
{{/if}}
+ {{/if}}
@@ -114,4 +109,4 @@ {{label}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/faq-accordion/component.js b/cards/faq-accordion/component.js index ff6b4db0f..f05c1e8ca 100644 --- a/cards/faq-accordion/component.js +++ b/cards/faq-accordion/component.js @@ -47,10 +47,6 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] { eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }), // ariaLabel: '', }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } @@ -68,29 +64,11 @@ class faq_accordionCardComponent extends BaseCard['faq-accordion'] { const contentEl = this._container.querySelector(accordionContentSelector); let isExpanded = this._container.querySelector(`.${accordionExpandedClass}`); - - const cardEl = this._container.querySelector(accordionCardSelector); - const linkEls = contentEl.querySelectorAll('a'); - - if (this.stayExpanded && this.getState('feedbackSubmitted')) { - isExpanded = true; - cardEl.classList.add(accordionExpandedClass); - accordionToggleEl.setAttribute('aria-expanded', 'true'); - contentEl.setAttribute('aria-hidden', 'false'); - } contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`; + const linkEls = contentEl.querySelectorAll('a'); this._setLinksInteractivity(linkEls, isExpanded); - this.stayExpanded = false; - - const thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput'); - if (thumbSelectorEls) { - thumbSelectorEls.forEach(el => { - el.addEventListener('click', (e) => { - this.stayExpanded = true; - }); - }); - } + const cardEl = this._container.querySelector(accordionCardSelector); accordionToggleEl.addEventListener('click', function() { isExpanded = !isExpanded; diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs index 2906450f0..fd73c014d 100644 --- a/cards/faq-accordion/template.hbs +++ b/cards/faq-accordion/template.hbs @@ -19,29 +19,24 @@ {{/if}} {{> 'details'}} -
- {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}} -
- {{#if card.CTA1.url}} -
- {{#with card.CTA1}} - {{> CTA }} - {{/with}} -
- {{/if}} - {{#if card.CTA2.url}} -
- {{#with card.CTA2}} - {{> CTA }} - {{/with}} -
- {{/if}} + {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}} +
+ {{#if card.CTA1.url}} +
+ {{#with card.CTA1}} + {{> CTA }} + {{/with}}
- {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{/if}} + {{#if card.CTA2.url}} +
+ {{#with card.CTA2}} + {{> CTA }} + {{/with}} +
+ {{/if}} +
+ {{/if}}
@@ -100,4 +95,4 @@ {{label}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/financial-professional-location/component.js b/cards/financial-professional-location/component.js index 3f4267b0e..033539bba 100644 --- a/cards/financial-professional-location/component.js +++ b/cards/financial-professional-location/component.js @@ -64,11 +64,7 @@ class financial_professional_locationCardComponent extends BaseCard['financial-p eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs index f92ff84c7..76021ecac 100644 --- a/cards/financial-professional-location/template.hbs +++ b/cards/financial-professional-location/template.hbs @@ -19,12 +19,7 @@ {{> list }} {{> phone }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -202,4 +197,4 @@ Close Card -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/job-standard/component.js b/cards/job-standard/component.js index 91577d553..17893ce3a 100644 --- a/cards/job-standard/component.js +++ b/cards/job-standard/component.js @@ -39,11 +39,7 @@ class job_standardCardComponent extends BaseCard['job-standard'] { eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', // Accessible text providing a descriptive label for the CTA - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs index 212c50c7b..d1535314a 100644 --- a/cards/job-standard/template.hbs +++ b/cards/job-standard/template.hbs @@ -7,12 +7,7 @@
{{> details }}
-
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -117,4 +112,4 @@ {{/if}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/link-standard/component.js b/cards/link-standard/component.js index e8ef4714f..5061223ae 100644 --- a/cards/link-standard/component.js +++ b/cards/link-standard/component.js @@ -28,10 +28,6 @@ class link_standardCardComponent extends BaseCard['link-standard'] { // showLessText: 'Show less' // Label when toggle will hide truncated text // }, details: profile.htmlSnippet, // The text in the body of the card - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs index 0e60c4c40..206a6d2f3 100644 --- a/cards/link-standard/template.hbs +++ b/cards/link-standard/template.hbs @@ -4,11 +4,6 @@ {{> subtitle }}
{{> details }} -
- {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
@@ -72,4 +67,4 @@ {{/if}} {{/if}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/location-standard/component.js b/cards/location-standard/component.js index 7b17bfc03..8e997c306 100644 --- a/cards/location-standard/component.js +++ b/cards/location-standard/component.js @@ -53,11 +53,7 @@ class location_standardCardComponent extends BaseCard['location-standard'] { eventType: 'DRIVING_DIRECTIONS', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs index cdb4356d6..a12a0ded0 100644 --- a/cards/location-standard/template.hbs +++ b/cards/location-standard/template.hbs @@ -24,12 +24,7 @@ {{> contactInfo }} {{> details }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -213,4 +208,4 @@ Close Card -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/menuitem-standard/component.js b/cards/menuitem-standard/component.js index 1b3ad11ca..c0c6ef15e 100644 --- a/cards/menuitem-standard/component.js +++ b/cards/menuitem-standard/component.js @@ -54,11 +54,7 @@ class menuitem_standardCardComponent extends BaseCard['menuitem-standard'] { eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs index ceca3bf20..9c9966794 100644 --- a/cards/menuitem-standard/template.hbs +++ b/cards/menuitem-standard/template.hbs @@ -8,21 +8,16 @@ {{> list }} {{> details }} -
- {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} -
- {{#with card.CTA1}} - {{> CTA ctaName="primaryCTA" }} - {{/with}} - {{#with card.CTA2}} - {{> CTA ctaName="secondaryCTA" }} - {{/with}} -
- {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} +
+ {{#with card.CTA1}} + {{> CTA ctaName="primaryCTA" }} + {{/with}} + {{#with card.CTA2}} + {{> CTA ctaName="secondaryCTA" }} + {{/with}}
+ {{/if}}
@@ -137,4 +132,4 @@ {{/if}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/multilang-event-standard/component.js b/cards/multilang-event-standard/component.js index cfc0f07d6..af223357c 100644 --- a/cards/multilang-event-standard/component.js +++ b/cards/multilang-event-standard/component.js @@ -48,11 +48,7 @@ class multilang_event_standardCardComponent extends BaseCard['multilang-event-st eventType: 'DRIVING_DIRECTIONS', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs index 2c275320a..6fd9a597e 100644 --- a/cards/multilang-event-standard/template.hbs +++ b/cards/multilang-event-standard/template.hbs @@ -32,29 +32,24 @@ {{/if}} {{> 'details'}} -
- {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} -
- {{#if (all card.CTA1.url card.CTA1.label)}} -
- {{#with card.CTA1}} - {{> CTA }} - {{/with}} -
- {{/if}} - {{#if (all card.CTA2.url card.CTA2.label)}} -
- {{#with card.CTA2}} - {{> CTA }} - {{/with}} -
- {{/if}} -
+ {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} +
+ {{#if (all card.CTA1.url card.CTA1.label)}} +
+ {{#with card.CTA1}} + {{> CTA }} + {{/with}} +
{{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} + {{#if (all card.CTA2.url card.CTA2.label)}} +
+ {{#with card.CTA2}} + {{> CTA }} + {{/with}} +
{{/if}}
+ {{/if}}
@@ -114,4 +109,4 @@ {{label}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/multilang-faq-accordion/component.js b/cards/multilang-faq-accordion/component.js index c32c7a1ca..529fbb14a 100644 --- a/cards/multilang-faq-accordion/component.js +++ b/cards/multilang-faq-accordion/component.js @@ -47,10 +47,6 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor eventOptions: this.addDefaultEventOptions({ /* Add additional options here */ }), // ariaLabel: '', }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } @@ -68,29 +64,11 @@ class multilang_faq_accordionCardComponent extends BaseCard['multilang-faq-accor const contentEl = this._container.querySelector(accordionContentSelector); let isExpanded = this._container.querySelector(`.${accordionExpandedClass}`); - - const cardEl = this._container.querySelector(accordionCardSelector); - const linkEls = contentEl.querySelectorAll('a'); - - if (this.stayExpanded && this.getState('feedbackSubmitted')) { - isExpanded = true; - cardEl.classList.add(accordionExpandedClass); - accordionToggleEl.setAttribute('aria-expanded', 'true'); - contentEl.setAttribute('aria-hidden', 'false'); - } contentEl.style.height = `${isExpanded ? contentEl.scrollHeight : 0}px`; + const linkEls = contentEl.querySelectorAll('a'); this._setLinksInteractivity(linkEls, isExpanded); - this.stayExpanded = false; - - const thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput'); - if (thumbSelectorEls) { - thumbSelectorEls.forEach(el => { - el.addEventListener('click', (e) => { - this.stayExpanded = true; - }); - }); - } + const cardEl = this._container.querySelector(accordionCardSelector); accordionToggleEl.addEventListener('click', function() { isExpanded = !isExpanded; diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs index 2906450f0..fd73c014d 100644 --- a/cards/multilang-faq-accordion/template.hbs +++ b/cards/multilang-faq-accordion/template.hbs @@ -19,29 +19,24 @@ {{/if}} {{> 'details'}} -
- {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}} -
- {{#if card.CTA1.url}} -
- {{#with card.CTA1}} - {{> CTA }} - {{/with}} -
- {{/if}} - {{#if card.CTA2.url}} -
- {{#with card.CTA2}} - {{> CTA }} - {{/with}} -
- {{/if}} + {{#if (any (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}} +
+ {{#if card.CTA1.url}} +
+ {{#with card.CTA1}} + {{> CTA }} + {{/with}}
- {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{/if}} + {{#if card.CTA2.url}} +
+ {{#with card.CTA2}} + {{> CTA }} + {{/with}} +
+ {{/if}} +
+ {{/if}}
@@ -100,4 +95,4 @@ {{label}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/multilang-financial-professional-location/component.js b/cards/multilang-financial-professional-location/component.js index 002623931..07595f9b3 100644 --- a/cards/multilang-financial-professional-location/component.js +++ b/cards/multilang-financial-professional-location/component.js @@ -64,11 +64,7 @@ class multilang_financial_professional_locationCardComponent extends BaseCard['m eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs index 90999f442..a802076a3 100644 --- a/cards/multilang-financial-professional-location/template.hbs +++ b/cards/multilang-financial-professional-location/template.hbs @@ -19,12 +19,7 @@ {{> list }} {{> phone }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -202,4 +197,4 @@ {{translate phrase='Close Card' context='Close is a verb'}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/multilang-job-standard/component.js b/cards/multilang-job-standard/component.js index 5df6f8631..db073bd0c 100644 --- a/cards/multilang-job-standard/component.js +++ b/cards/multilang-job-standard/component.js @@ -39,11 +39,7 @@ class multilang_job_standardCardComponent extends BaseCard['multilang-job-standa eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', // Accessible text providing a descriptive label for the CTA - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs index 212c50c7b..d1535314a 100644 --- a/cards/multilang-job-standard/template.hbs +++ b/cards/multilang-job-standard/template.hbs @@ -7,12 +7,7 @@
{{> details }}
-
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -117,4 +112,4 @@ {{/if}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/multilang-link-standard/component.js b/cards/multilang-link-standard/component.js index 7eb07832a..2e1b5e74d 100644 --- a/cards/multilang-link-standard/component.js +++ b/cards/multilang-link-standard/component.js @@ -28,10 +28,6 @@ class multilang_link_standardCardComponent extends BaseCard['multilang-link-stan // showLessText: {{ translateJS phrase='Show less' }} // Label when toggle will hide truncated text // }, details: profile.htmlSnippet, // The text in the body of the card - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs index 0e60c4c40..206a6d2f3 100644 --- a/cards/multilang-link-standard/template.hbs +++ b/cards/multilang-link-standard/template.hbs @@ -4,11 +4,6 @@ {{> subtitle }}
{{> details }} -
- {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
@@ -72,4 +67,4 @@ {{/if}} {{/if}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/multilang-location-standard/component.js b/cards/multilang-location-standard/component.js index da489ac7b..bc5d5d0c4 100644 --- a/cards/multilang-location-standard/component.js +++ b/cards/multilang-location-standard/component.js @@ -53,11 +53,7 @@ class multilang_location_standardCardComponent extends BaseCard['multilang-locat eventType: 'DRIVING_DIRECTIONS', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs index 929553765..afbc93210 100644 --- a/cards/multilang-location-standard/template.hbs +++ b/cards/multilang-location-standard/template.hbs @@ -24,12 +24,7 @@ {{> contactInfo }} {{> details }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -213,4 +208,4 @@ {{translate phrase='Close Card' context='Close is a verb'}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/multilang-menuitem-standard/component.js b/cards/multilang-menuitem-standard/component.js index 0f7226f66..269728ca4 100644 --- a/cards/multilang-menuitem-standard/component.js +++ b/cards/multilang-menuitem-standard/component.js @@ -54,11 +54,7 @@ class multilang_menuitem_standardCardComponent extends BaseCard['multilang-menui eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs index a8a9ed612..9c9966794 100644 --- a/cards/multilang-menuitem-standard/template.hbs +++ b/cards/multilang-menuitem-standard/template.hbs @@ -8,21 +8,16 @@ {{> list }} {{> details }} -
- {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} -
- {{#with card.CTA1}} - {{> CTA ctaName="primaryCTA" }} - {{/with}} - {{#with card.CTA2}} - {{> CTA ctaName="secondaryCTA" }} - {{/with}} -
- {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{#if (any (all card.CTA1 card.CTA1.url) (all card.CTA2 card.CTA2.url))}} +
+ {{#with card.CTA1}} + {{> CTA ctaName="primaryCTA" }} + {{/with}} + {{#with card.CTA2}} + {{> CTA ctaName="secondaryCTA" }} + {{/with}}
+ {{/if}}
@@ -137,4 +132,4 @@ {{/if}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/multilang-product-prominentimage-clickable/component.js b/cards/multilang-product-prominentimage-clickable/component.js index 18063da72..c3b66bc29 100644 --- a/cards/multilang-product-prominentimage-clickable/component.js +++ b/cards/multilang-product-prominentimage-clickable/component.js @@ -40,10 +40,6 @@ class multilang_product_prominentimage_clickableCardComponent altText: alternateText, // The alternate text for the image details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget) : null, // The text in the body of the card, Warning: cannot contain links // tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs index 2cf510f90..6b06630db 100644 --- a/cards/multilang-product-prominentimage-clickable/template.hbs +++ b/cards/multilang-product-prominentimage-clickable/template.hbs @@ -13,11 +13,6 @@ {{> subtitle }}
{{> details }} -
- {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
{{#if card.url}}{{/if}} diff --git a/cards/multilang-product-prominentimage/component.js b/cards/multilang-product-prominentimage/component.js index c34128f66..f1d8e21e0 100644 --- a/cards/multilang-product-prominentimage/component.js +++ b/cards/multilang-product-prominentimage/component.js @@ -57,11 +57,7 @@ class multilang_product_prominentimageCardComponent extends BaseCard['multilang- eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs index df3d75ff6..9314c43f0 100644 --- a/cards/multilang-product-prominentimage/template.hbs +++ b/cards/multilang-product-prominentimage/template.hbs @@ -5,12 +5,7 @@ {{> subtitle }}
{{> details }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }}
diff --git a/cards/multilang-product-prominentvideo/component.js b/cards/multilang-product-prominentvideo/component.js index 76a0da752..631515086 100644 --- a/cards/multilang-product-prominentvideo/component.js +++ b/cards/multilang-product-prominentvideo/component.js @@ -52,11 +52,7 @@ class multilang_product_prominentvideoCardComponent extends BaseCard['multilang- eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs index bad303598..c89099678 100644 --- a/cards/multilang-product-prominentvideo/template.hbs +++ b/cards/multilang-product-prominentvideo/template.hbs @@ -52,12 +52,7 @@ {{#if (any card.details (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
{{> details }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }}
{{/if}} {{/inline}} diff --git a/cards/multilang-product-standard/component.js b/cards/multilang-product-standard/component.js index 27f9cd01f..947c66e7f 100644 --- a/cards/multilang-product-standard/component.js +++ b/cards/multilang-product-standard/component.js @@ -57,10 +57,6 @@ class multilang_product_standardCardComponent extends BaseCard['multilang-produc eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down }; } diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs index 7eab7a8a3..a1a245d6d 100644 --- a/cards/multilang-product-standard/template.hbs +++ b/cards/multilang-product-standard/template.hbs @@ -5,21 +5,16 @@ {{> subtitle }}
{{> details }} -
- {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}} -
- {{#with card.CTA1}} - {{> CTA ctaName="primaryCTA" }} - {{/with}} - {{#with card.CTA2}} - {{> CTA ctaName="secondaryCTA" }} - {{/with}} -
- {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}} +
+ {{#with card.CTA1}} + {{> CTA ctaName="primaryCTA" }} + {{/with}} + {{#with card.CTA2}} + {{> CTA ctaName="secondaryCTA" }} + {{/with}}
+ {{/if}}
diff --git a/cards/multilang-professional-location/component.js b/cards/multilang-professional-location/component.js index d497a1ef7..55006a511 100644 --- a/cards/multilang-professional-location/component.js +++ b/cards/multilang-professional-location/component.js @@ -64,11 +64,7 @@ class multilang_professional_locationCardComponent extends BaseCard['multilang-p eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs index befb06fc2..a20c75bfd 100644 --- a/cards/multilang-professional-location/template.hbs +++ b/cards/multilang-professional-location/template.hbs @@ -19,12 +19,7 @@ {{> list }} {{> phone }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -199,4 +194,4 @@ {{translate phrase='Close Card' context='Close is a verb'}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/multilang-professional-standard/component.js b/cards/multilang-professional-standard/component.js index 56dceb90f..0d969a180 100644 --- a/cards/multilang-professional-standard/component.js +++ b/cards/multilang-professional-standard/component.js @@ -54,11 +54,7 @@ class multilang_professional_standardCardComponent extends BaseCard['multilang-p eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs index 8fef8f9b1..4ea666620 100644 --- a/cards/multilang-professional-standard/template.hbs +++ b/cards/multilang-professional-standard/template.hbs @@ -9,12 +9,7 @@ {{> list }} {{> phone }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} diff --git a/cards/multilang-standard/component.js b/cards/multilang-standard/component.js index 1090d6eac..1d12e678d 100644 --- a/cards/multilang-standard/component.js +++ b/cards/multilang-standard/component.js @@ -49,11 +49,7 @@ class multilang_standardCardComponent extends BaseCard['multilang-standard'] { eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up - negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }} // Screen reader only text for thumbs-down + } }; } diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs index 9fdb99b9d..9c37fe70d 100644 --- a/cards/multilang-standard/template.hbs +++ b/cards/multilang-standard/template.hbs @@ -7,12 +7,7 @@
{{> details }}
-
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -119,4 +114,4 @@ {{/if}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/product-prominentimage-clickable/component.js b/cards/product-prominentimage-clickable/component.js index 3c469f239..f70bd39d0 100644 --- a/cards/product-prominentimage-clickable/component.js +++ b/cards/product-prominentimage-clickable/component.js @@ -39,10 +39,6 @@ class product_prominentimage_clickableCardComponent extends BaseCard['product-pr altText: alternateText, // The alternate text for the image details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', linkTarget) : null, // The text in the body of the card, Warning: cannot contain links // tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/product-prominentimage-clickable/template.hbs b/cards/product-prominentimage-clickable/template.hbs index b30dd4e0b..32fa8f716 100644 --- a/cards/product-prominentimage-clickable/template.hbs +++ b/cards/product-prominentimage-clickable/template.hbs @@ -13,11 +13,6 @@ {{> subtitle }}
{{> details }} -
- {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
{{#if card.url}}{{/if}} diff --git a/cards/product-prominentimage/component.js b/cards/product-prominentimage/component.js index 4f3ab4857..163eea636 100644 --- a/cards/product-prominentimage/component.js +++ b/cards/product-prominentimage/component.js @@ -57,11 +57,7 @@ class product_prominentimageCardComponent extends BaseCard['product-prominentima eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs index 45d4e4e59..677aeb8e0 100644 --- a/cards/product-prominentimage/template.hbs +++ b/cards/product-prominentimage/template.hbs @@ -5,12 +5,7 @@ {{> subtitle }}
{{> details }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }}
diff --git a/cards/product-prominentvideo/component.js b/cards/product-prominentvideo/component.js index 85209c3ec..29015b903 100644 --- a/cards/product-prominentvideo/component.js +++ b/cards/product-prominentvideo/component.js @@ -52,11 +52,7 @@ class product_prominentvideoCardComponent extends BaseCard['product-prominentvid eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs index bad303598..c89099678 100644 --- a/cards/product-prominentvideo/template.hbs +++ b/cards/product-prominentvideo/template.hbs @@ -52,12 +52,7 @@ {{#if (any card.details (all card.CTA1 card.CTA1.url card.CTA1.label) (all card.CTA2 card.CTA2.url card.CTA2.label))}}
{{> details }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }}
{{/if}} {{/inline}} diff --git a/cards/product-standard/component.js b/cards/product-standard/component.js index e69f0f41a..08d911d0e 100644 --- a/cards/product-standard/component.js +++ b/cards/product-standard/component.js @@ -57,10 +57,6 @@ class product_standardCardComponent extends BaseCard['product-standard'] { eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down }; } diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs index 7eab7a8a3..a1a245d6d 100644 --- a/cards/product-standard/template.hbs +++ b/cards/product-standard/template.hbs @@ -5,21 +5,16 @@ {{> subtitle }}
{{> details }} -
- {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}} -
- {{#with card.CTA1}} - {{> CTA ctaName="primaryCTA" }} - {{/with}} - {{#with card.CTA2}} - {{> CTA ctaName="secondaryCTA" }} - {{/with}} -
- {{/if}} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} + {{#if (any (all card.CTA1 card.CTA1.label card.CTA1.url) (all card.CTA2 card.CTA2.label card.CTA2.url))}} +
+ {{#with card.CTA1}} + {{> CTA ctaName="primaryCTA" }} + {{/with}} + {{#with card.CTA2}} + {{> CTA ctaName="secondaryCTA" }} + {{/with}}
+ {{/if}}
diff --git a/cards/professional-location/component.js b/cards/professional-location/component.js index 1d22bd5b4..38f0e0531 100644 --- a/cards/professional-location/component.js +++ b/cards/professional-location/component.js @@ -64,11 +64,7 @@ class professional_locationCardComponent extends BaseCard['professional-location eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs index c2a9da855..83c8763ab 100644 --- a/cards/professional-location/template.hbs +++ b/cards/professional-location/template.hbs @@ -19,12 +19,7 @@ {{> list }} {{> phone }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -199,4 +194,4 @@ Close Card -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/cards/professional-standard/component.js b/cards/professional-standard/component.js index 86508a810..2dc4949a1 100644 --- a/cards/professional-standard/component.js +++ b/cards/professional-standard/component.js @@ -54,11 +54,7 @@ class professional_standardCardComponent extends BaseCard['professional-standard eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '' - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/professional-standard/template.hbs b/cards/professional-standard/template.hbs index 8fef8f9b1..4ea666620 100644 --- a/cards/professional-standard/template.hbs +++ b/cards/professional-standard/template.hbs @@ -9,12 +9,7 @@ {{> list }} {{> phone }} -
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} diff --git a/cards/standard/component.js b/cards/standard/component.js index 893619e4d..17ab9c0d5 100644 --- a/cards/standard/component.js +++ b/cards/standard/component.js @@ -49,11 +49,7 @@ class standardCardComponent extends BaseCard['standard'] { eventType: 'CTA_CLICK', eventOptions: this.addDefaultEventOptions(), // ariaLabel: '', - }, - feedback: false, // Shows thumbs up/down buttons to provide feedback on the result card - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display after a thumbs up/down is clicked - positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up - negativeFeedbackSrText: 'This did not answer my question' // Screen reader only text for thumbs-down + } }; } diff --git a/cards/standard/template.hbs b/cards/standard/template.hbs index 9fdb99b9d..9c37fe70d 100644 --- a/cards/standard/template.hbs +++ b/cards/standard/template.hbs @@ -7,12 +7,7 @@
{{> details }}
-
- {{> ctas }} - {{#if card.feedback}} - {{> thumbsfeedback card feedbackSubmitted=feedbackSubmitted}} - {{/if}} -
+ {{> ctas }} @@ -119,4 +114,4 @@ {{/if}} -{{/inline}} +{{/inline}} \ No newline at end of file diff --git a/directanswercards/allfields-standard/component.js b/directanswercards/allfields-standard/component.js index 51fbdfd9b..531ca79df 100644 --- a/directanswercards/allfields-standard/component.js +++ b/directanswercards/allfields-standard/component.js @@ -187,8 +187,8 @@ class allfields_standardComponent extends BaseDirectAnswerCard['allfields-standa // eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA // eventOptions: this.addDefaultEventOptions() // The event options for CTA click analytics // }, - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked - feedbackText: 'Was this the answer you were looking for?', // Text to display in the footer + footerTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked + footerText: 'Was this the answer you were looking for?', // Text to display in the footer positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up negativeFeedbackSrText: 'This did not answer my question', // Screen reader only text for thumbs-down isRichText: isRichText, // If the direct answer is sourced from a rich-text field diff --git a/directanswercards/allfields-standard/template.hbs b/directanswercards/allfields-standard/template.hbs index 6c673ed4e..bc3210a53 100644 --- a/directanswercards/allfields-standard/template.hbs +++ b/directanswercards/allfields-standard/template.hbs @@ -14,7 +14,7 @@ {{> cta CTA linkTarget=linkTarget}} {{/if}} - {{> thumbsfeedback directAnswerClass="HitchhikerAllFieldsStandard"}} + {{> footer }} {{#*inline 'icon'}} @@ -112,6 +112,56 @@ {{/if}} {{/inline}} +{{#*inline 'footer'}} +{{#if (any footerTextOnSubmission footerText)}} +
+ +
+{{/if}} +{{/inline}} + {{#*inline 'cta'}} {{#if (all url label)}}
diff --git a/directanswercards/card_component.js b/directanswercards/card_component.js index 18c4f026e..851d27e95 100644 --- a/directanswercards/card_component.js +++ b/directanswercards/card_component.js @@ -5,7 +5,7 @@ BaseDirectAnswerCard = typeof (BaseDirectAnswerCard) !== 'undefined' ? BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { constructor(config = {}, systemConfig = {}) { super(config, systemConfig); - const data = config.data || {}; + let data = config.data || {}; this.type = data.type || ''; this.answer = data.answer || {}; this.snippet = this.answer.snippet || {}; @@ -40,24 +40,17 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { } onMount() { - this.addFeedbackListeners(); - - const rtfElement = this._container.querySelector('.js-yxt-rtfValue'); - rtfElement && rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e)); - } - - addFeedbackListeners() { - const feedbackFormSelector = '.js-HitchhikerDirectAnswerCard-feedbackForm'; + let feedbackFormSelector = '.js-HitchhikerDirectAnswerCard-feedbackForm'; let feedbackFormEl = this._container.querySelector(feedbackFormSelector); if (feedbackFormEl) { // For WCAG compliance, the feedback should be a submittable form feedbackFormEl.addEventListener('submit', (e) => { - const formTargetEl = e.target; - const isGood = formTargetEl.querySelector('input:checked').value === 'true'; + let formTargetEl = e.target; + let checkedValue = formTargetEl.querySelector('input:checked').value === 'true'; - this.reportQuality(isGood); + this.reportQuality(checkedValue); this.updateState({ - feedbackSubmitted: true + 'feedbackSubmitted': true }); }); @@ -69,11 +62,42 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { if (input) { input.checked = true; } - HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit'); + this._triggerCustomEvent(feedbackFormSelector, 'submit'); }); }); } } + + const rtfElement = this._container.querySelector('.js-yxt-rtfValue'); + rtfElement && rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e)); + } + + /** + * Triggers the event passed in dispatched from the given selector + * @param {string} selector selector to dispatch event from + * @param {string} event event to fire + * @param {Object} settings additional settings + */ + _triggerCustomEvent(selector, event, settings) { + let e = this._customEvent(event, settings); + this._container.querySelector(selector).dispatchEvent(e); + } + + /** + * _customEvent is an event constructor polyfill + * @param {string} event event to fire + * @param {Object} settings additional settings + */ + _customEvent(event, settings) { + const _settings = { + bubbles: true, + cancelable: true, + detail: null, + ...settings + }; + const evt = document.createEvent('CustomEvent'); + evt.initCustomEvent(event, _settings.bubbles, _settings.cancelable, _settings.detail); + return evt; } /** @@ -94,10 +118,7 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN; const event = new ANSWERS.AnalyticsEvent(eventType) .addOptions({ - directAnswer: true, - verticalKey: this.verticalConfigId, - searcher: 'UNIVERSAL', - entityId: this.associatedEntityId + 'directAnswer': true }); this.analyticsReporter.report(event); diff --git a/directanswercards/documentsearch-standard/component.js b/directanswercards/documentsearch-standard/component.js index 62d0282bf..c03380e5c 100644 --- a/directanswercards/documentsearch-standard/component.js +++ b/directanswercards/documentsearch-standard/component.js @@ -40,8 +40,8 @@ class documentsearch_standardComponent extends BaseDirectAnswerCard['documentsea // eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA // eventOptions: this.addDefaultEventOptions({ fieldName: 'snippet' }) // The event options for CTA click analytics // }, - feedbackTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked - feedbackText: 'Was this the answer you were looking for?', // Text to display in the footer + footerTextOnSubmission: 'Thank you for your feedback!', // Text to display in the footer when a thumbs up/down is clicked + footerText: 'Was this the answer you were looking for?', // Text to display in the footer positiveFeedbackSrText: 'This answered my question', // Screen reader only text for thumbs-up negativeFeedbackSrText: 'This did not answer my question', // Screen reader only text for thumbs-down }; diff --git a/directanswercards/documentsearch-standard/template.hbs b/directanswercards/documentsearch-standard/template.hbs index 0af0faefb..028de17c5 100644 --- a/directanswercards/documentsearch-standard/template.hbs +++ b/directanswercards/documentsearch-standard/template.hbs @@ -9,7 +9,7 @@ {{> cta CTA linkTarget=linkTarget}}
- {{> thumbsfeedback directAnswerClass="HitchhikerDocumentSearchStandard"}} + {{> footer}} {{#*inline 'title'}} @@ -43,6 +43,56 @@ {{/if}} {{/inline}} +{{#*inline 'footer'}} +{{#if (any footerTextOnSubmission footerText)}} +
+ +
+{{/if}} +{{/inline}} + {{#*inline 'cta'}} {{#if (all url label)}}
diff --git a/directanswercards/multilang-allfields-standard/component.js b/directanswercards/multilang-allfields-standard/component.js index bb91f66ba..3b50f0ba6 100644 --- a/directanswercards/multilang-allfields-standard/component.js +++ b/directanswercards/multilang-allfields-standard/component.js @@ -185,8 +185,8 @@ class multilang_allfields_standardComponent extends BaseDirectAnswerCard['multil // eventType: 'CTA_CLICK', // Type of Analytics event fired when clicking the CTA // eventOptions: this.addDefaultEventOptions() // The event options for CTA click analytics // }, - feedbackTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display in the footer when a thumbs up/down is clicked - feedbackText: {{ translateJS phrase='Was this the answer you were looking for?' }}, // Text to display in the footer + footerTextOnSubmission: {{ translateJS phrase='Thank you for your feedback!' }}, // Text to display in the footer when a thumbs up/down is clicked + footerText: {{ translateJS phrase='Was this the answer you were looking for?' }}, // Text to display in the footer positiveFeedbackSrText: {{ translateJS phrase='This answered my question' }}, // Screen reader only text for thumbs-up negativeFeedbackSrText: {{ translateJS phrase='This did not answer my question' }}, // Screen reader only text for thumbs-down }; diff --git a/directanswercards/multilang-allfields-standard/template.hbs b/directanswercards/multilang-allfields-standard/template.hbs index 8a1904e75..025addb96 100644 --- a/directanswercards/multilang-allfields-standard/template.hbs +++ b/directanswercards/multilang-allfields-standard/template.hbs @@ -14,7 +14,7 @@ {{> cta CTA linkTarget=linkTarget}}
{{/if}} - {{> thumbsfeedback directAnswerClass="HitchhikerAllFieldsStandard"}} + {{> footer }} {{#*inline 'icon'}} @@ -112,6 +112,56 @@ {{/if}} {{/inline}} +{{#*inline 'footer'}} +{{#if (any footerTextOnSubmission footerText)}} +
+ +
+{{/if}} +{{/inline}} + {{#*inline 'cta'}} {{#if (all url label)}}
diff --git a/script/core.hbs b/script/core.hbs index a65d5b4f0..8f5798b5e 100644 --- a/script/core.hbs +++ b/script/core.hbs @@ -84,11 +84,6 @@ return ANSWERS.renderer.SafeString({{{stringifyPartial (read 'static/assets/images/close-card') }}}); }); - ANSWERS.registerPartial( - 'thumbsfeedback', - {{{stringifyPartial (read 'cards/common-partials/thumbsfeedback') }}} - ); - /** * If the url is not relative, return it. If it is relative, * append relativePath to it. diff --git a/static/js/HitchhikerJS.js b/static/js/HitchhikerJS.js index 31ad12433..869dd5705 100644 --- a/static/js/HitchhikerJS.js +++ b/static/js/HitchhikerJS.js @@ -46,6 +46,3 @@ import AnswersExperience from './answers-experience'; window.AnswersExperience = new AnswersExperience(runtimeConfig); export * from './video-apis'; - -import DOM from './dom'; -export { DOM }; \ No newline at end of file diff --git a/static/js/dom.js b/static/js/dom.js deleted file mode 100644 index 168e4d32b..000000000 --- a/static/js/dom.js +++ /dev/null @@ -1,30 +0,0 @@ -export default class DOM { - /** - * Triggers the event passed in dispatched from the given selector - * @param {HTMLElement} container container to select from - * @param {string} selector selector to dispatch event from - * @param {string} event event to fire - * @param {Object} settings additional settings - */ - static triggerCustomEvent(container, selector, event, settings) { - const e = this.customEvent(event, settings); - container.querySelector(selector).dispatchEvent(e); - } - - /** - * _customEvent is an event constructor polyfill - * @param {string} event event to fire - * @param {Object} settings additional settings - */ - static customEvent(event, settings) { - const _settings = { - bubbles: true, - cancelable: true, - detail: null, - ...settings - }; - const evt = document.createEvent('CustomEvent'); - evt.initCustomEvent(event, _settings.bubbles, _settings.cancelable, _settings.detail); - return evt; - } -} \ No newline at end of file diff --git a/static/scss/answers/cards/document-standard.scss b/static/scss/answers/cards/document-standard.scss index 873aea869..f67464fe5 100644 --- a/static/scss/answers/cards/document-standard.scss +++ b/static/scss/answers/cards/document-standard.scss @@ -92,12 +92,4 @@ { display: none; } - - .HitchhikerCard-feedbackWrapper - { - @include bpgte(sm) - { - margin-right: calc(var(--yxt-base-spacing) / 2); - } - } } diff --git a/static/scss/answers/cards/event-standard.scss b/static/scss/answers/cards/event-standard.scss index 6b9d27eae..238b42a76 100644 --- a/static/scss/answers/cards/event-standard.scss +++ b/static/scss/answers/cards/event-standard.scss @@ -110,12 +110,4 @@ { display: none; } - - .HitchhikerCard-feedbackWrapper - { - @include bpgte(sm) - { - margin-left: 1.5rem; - } - } } diff --git a/static/scss/answers/cards/faq-accordion.scss b/static/scss/answers/cards/faq-accordion.scss index 32ab65e14..f5ca64522 100644 --- a/static/scss/answers/cards/faq-accordion.scss +++ b/static/scss/answers/cards/faq-accordion.scss @@ -146,23 +146,4 @@ { display: none; } - - .HitchhikerCard - { - &-actions - { - flex-direction: row; - } - - &-feedbackWrapper - { - margin: calc(var(--yxt-base-spacing) / 2) var(--yxt-base-spacing); - padding-bottom: calc(var(--yxt-base-spacing) / 2); - } - - &-feedbackContent - { - margin-top: 0; - } - } } diff --git a/static/scss/answers/cards/location-standard.scss b/static/scss/answers/cards/location-standard.scss index 8b9f6c722..71f0fd001 100644 --- a/static/scss/answers/cards/location-standard.scss +++ b/static/scss/answers/cards/location-standard.scss @@ -50,29 +50,6 @@ $location-standard-ordinal-dimensions: calc(var(--hh-location-standard-base-spac } } } - - .HitchhikerCard - { - &-actions - { - flex-direction: row; - - @include bpgte(lg) - { - flex-direction: column; - } - } - - &-feedbackWrapper - { - margin-left: 0; - - @include bpgte(lg) - { - margin-left: calc(var(--hh-location-standard-base-spacing) / 2); - } - } - } } .HitchhikerLocationStandard diff --git a/static/scss/answers/cards/product-prominentimage-clickable.scss b/static/scss/answers/cards/product-prominentimage-clickable.scss index 0d5b112b8..a91959837 100644 --- a/static/scss/answers/cards/product-prominentimage-clickable.scss +++ b/static/scss/answers/cards/product-prominentimage-clickable.scss @@ -115,22 +115,4 @@ @include rich_text_formatting; color: var(--yxt-color-text-primary); } - - .HitchhikerCard - { - &-actions - { - flex-direction: row; - } - - &-feedbackWrapper - { - margin-left: 0; - } - - &-feedbackContent - { - margin-top: calc(var(--yxt-base-spacing) / 2); - } - } } diff --git a/static/scss/answers/cards/product-prominentimage.scss b/static/scss/answers/cards/product-prominentimage.scss index b8b8cba44..c1a5331fd 100644 --- a/static/scss/answers/cards/product-prominentimage.scss +++ b/static/scss/answers/cards/product-prominentimage.scss @@ -116,22 +116,4 @@ { display: none; } - - .HitchhikerCard - { - &-actions - { - flex-direction: row; - } - - &-feedbackWrapper - { - margin-left: 0; - } - - &-feedbackContent - { - margin-top: calc(var(--yxt-base-spacing) / 2); - } - } } diff --git a/static/scss/answers/cards/product-prominentvideo.scss b/static/scss/answers/cards/product-prominentvideo.scss index a0178a0d7..b6f305198 100644 --- a/static/scss/answers/cards/product-prominentvideo.scss +++ b/static/scss/answers/cards/product-prominentvideo.scss @@ -87,22 +87,4 @@ { display: none; } - - .HitchhikerCard - { - &-actions - { - flex-direction: row; - } - - &-feedbackWrapper - { - margin-left: 0; - } - - &-feedbackContent - { - margin-top: calc(var(--yxt-base-spacing) / 2); - } - } } diff --git a/static/scss/answers/cards/standard.scss b/static/scss/answers/cards/standard.scss index c7e09a177..9b1a93d10 100644 --- a/static/scss/answers/cards/standard.scss +++ b/static/scss/answers/cards/standard.scss @@ -92,12 +92,4 @@ { display: none; } - - .HitchhikerCard-feedbackWrapper - { - @include bpgte(sm) - { - margin-right: calc(var(--yxt-base-spacing) / 2); - } - } } diff --git a/static/scss/answers/directanswercards/allfields-standard.scss b/static/scss/answers/directanswercards/allfields-standard.scss index 00e6448d2..24fdc39b1 100644 --- a/static/scss/answers/directanswercards/allfields-standard.scss +++ b/static/scss/answers/directanswercards/allfields-standard.scss @@ -97,13 +97,11 @@ } - &-feedbackWrapper, &-footerWrapper { background-color: var(--yxt-direct-answer-footer-background-color); } - &-feedbackContent, &-footer { display: flex; @@ -115,7 +113,6 @@ padding-bottom: 8px; } - &-feedbackText, &-footerText { display: inline; @@ -128,11 +125,6 @@ ); } - &-thumbsWrapper - { - display: flex; - } - &-thumbs { display: flex; diff --git a/static/scss/answers/directanswercards/documentsearch-standard.scss b/static/scss/answers/directanswercards/documentsearch-standard.scss index 665821450..cabdb173f 100644 --- a/static/scss/answers/directanswercards/documentsearch-standard.scss +++ b/static/scss/answers/directanswercards/documentsearch-standard.scss @@ -86,12 +86,6 @@ } - &-feedbackWrapper - { - background-color: var(--yxt-direct-answer-footer-background-color); - } - - &-feedbackContent, &-footer { display: flex; @@ -103,7 +97,6 @@ padding-bottom: 8px; } - &-feedbackText, &-footerText { display: inline; @@ -116,11 +109,6 @@ ); } - &-thumbsWrapper - { - display: flex; - } - &-thumbs { display: flex; diff --git a/static/scss/answers/interactive-map/VerticalFullPageMap.scss b/static/scss/answers/interactive-map/VerticalFullPageMap.scss index 71452a7a5..75ebd6b4e 100644 --- a/static/scss/answers/interactive-map/VerticalFullPageMap.scss +++ b/static/scss/answers/interactive-map/VerticalFullPageMap.scss @@ -551,10 +551,6 @@ &-ctasWrapper { margin-top: calc(var(--yxt-base-spacing) / 2); } - - .HitchhikerCard-actions { - flex-direction: row; - } } .HitchhikerLocationCard { @@ -596,10 +592,6 @@ font-weight: bold; justify-content: flex-end; } - - .HitchhikerCard-feedbackWrapper { - margin-left: 0; - } } .yxt-Card--isVisibleOnMobileMap { diff --git a/static/scss/answers/module.scss b/static/scss/answers/module.scss index ce1730493..762490075 100644 --- a/static/scss/answers/module.scss +++ b/static/scss/answers/module.scss @@ -17,113 +17,14 @@ @include sr-only-focusable(); } -.HitchhikerCard +.HitchhikerCard-detailsToggle { - &-detailsToggle - { - text-align: left; - margin-top: calc(var(--yxt-base-spacing) / 4); + text-align: left; + margin-top: calc(var(--yxt-base-spacing) / 4); - @include Text( - $color: var(--yxt-color-brand-primary), - $line-height: var(--yxt-line-height-md), - $style: italic); - @include TextButton($padding: 0); - } - - &-actions - { - display: flex; - align-items: flex-end; - - @include bpgte(sm) - { - flex-direction: column; - } - } - - &-feedbackWrapper - { - display: flex; - flex-grow: 1; - background-color: var(--yxt-color-background-highlight); - min-width: 55px; - @include bpgte(sm) - { - margin-left: calc(var(--yxt-base-spacing) / 2); - } - } - - &-feedbackContent - { - display: flex; - justify-content: flex-end; - align-items: flex-end; - flex-grow: 1; - @include bpgte(sm) - { - margin-top: calc(var(--yxt-base-spacing) / 2); - } - } - - &-feedbackText - { - display: inline; - @include Text( - $size: var(--yxt-font-size-md), - $line-height: var(--yxt-line-height-md), - $weight: var(--yxt-font-weight-normal), - $color: var(--yxt-color-text-secondary) - ); - text-align: right; - } - - &-thumbs - { - display: flex; - margin: 0; - } - - &-thumbUpIcon - { - transform: rotate(180deg); - } - - &-thumbUpIcon, - &-thumbDownIcon - { - display: inline-flex; - color: var(--yxt-color-text-secondary); - } - - &-thumb - { - display: inline; - flex-shrink: 0; - cursor: pointer; - font-size: 18px; - - & + & - { - margin-left: 8px; - } - } - - &-fieldset - { - display: inline; - margin-inline-start: 2px; - margin-inline-end: 2px; - line-height: 0; - min-inline-size: min-content; - } - - &-feedback - { @include Text( - $color: var(--yxt-color-text-neutral), - ); - background-color: var(--yxt-color-background-highlight); - display: none; - } -} \ No newline at end of file + $color: var(--yxt-color-brand-primary), + $line-height: var(--yxt-line-height-md), + $style: italic); + @include TextButton($padding: 0); +} diff --git a/test-site/config/global_config.json b/test-site/config/global_config.json index 9c505ad2b..ee59f998f 100644 --- a/test-site/config/global_config.json +++ b/test-site/config/global_config.json @@ -2,7 +2,7 @@ "sdkVersion": "develop", // 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": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system - "businessId": "3350634", // The business ID of the account. This will be provided automatically by the Yext CI system + // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system // "initializeManually": true, // If true, the experience must be started by calling AnswersExperience.init() or AnswersExperienceFrame.init() for iframe integrations. // "useJWT": true, // Whether or not to enable JWT. If true, the apiKey will be hidden from the build and the token must be specified through the runtime config. "sessionTrackingEnabled": true, // Whether or not session tracking is enabled for all pages diff --git a/translations/messages.pot b/translations/messages.pot index 9a1d7ac0e..16c7cee7d 100644 --- a/translations/messages.pot +++ b/translations/messages.pot @@ -88,7 +88,7 @@ msgstr "" msgid "Saturday" msgstr "" -#: cards/multilang-location-standard/template.hbs:145 +#: cards/multilang-location-standard/template.hbs:140 msgid "Services:" msgstr "" @@ -132,20 +132,6 @@ msgstr "" msgid "Sunday" msgstr "" -#: cards/multilang-event-standard/component.js:53 -#: cards/multilang-faq-accordion/component.js:51 -#: cards/multilang-financial-professional-location/component.js:69 -#: cards/multilang-job-standard/component.js:44 -#: cards/multilang-link-standard/component.js:32 -#: cards/multilang-location-standard/component.js:58 -#: cards/multilang-menuitem-standard/component.js:59 -#: cards/multilang-product-prominentimage-clickable/component.js:44 -#: cards/multilang-product-prominentimage/component.js:62 -#: cards/multilang-product-prominentvideo/component.js:57 -#: cards/multilang-product-standard/component.js:61 -#: cards/multilang-professional-location/component.js:69 -#: cards/multilang-professional-standard/component.js:59 -#: cards/multilang-standard/component.js:54 #: directanswercards/multilang-allfields-standard/component.js:188 msgid "Thank you for your feedback!" msgstr "" @@ -156,38 +142,10 @@ msgid_plural "The following search categories yielded results for Date: Wed, 13 Oct 2021 11:51:31 -0400 Subject: [PATCH 22/22] Fix DA cards feedback analytics (#978) Only show thumbs up/down feedback buttons on direct answer cards when user provides `businessId` and enables analytics. J=SLAP-1175 TEST=manual Smoke testing to check if feedback buttons only appear on DA cards when expected. --- directanswercards/allfields-standard/template.hbs | 4 +++- directanswercards/card_component.js | 1 + directanswercards/documentsearch-standard/template.hbs | 4 +++- directanswercards/multilang-allfields-standard/template.hbs | 4 +++- global_config.json | 2 +- test-site/config/global_config.json | 2 +- 6 files changed, 12 insertions(+), 5 deletions(-) diff --git a/directanswercards/allfields-standard/template.hbs b/directanswercards/allfields-standard/template.hbs index bc3210a53..22986058f 100644 --- a/directanswercards/allfields-standard/template.hbs +++ b/directanswercards/allfields-standard/template.hbs @@ -14,7 +14,9 @@ {{> cta CTA linkTarget=linkTarget}}
{{/if}} - {{> footer }} + {{#if feedbackEnabled}} + {{> footer }} + {{/if}} {{#*inline 'icon'}} diff --git a/directanswercards/card_component.js b/directanswercards/card_component.js index 851d27e95..c28b340dc 100644 --- a/directanswercards/card_component.js +++ b/directanswercards/card_component.js @@ -26,6 +26,7 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { return super.setState({ ...cardData, + feedbackEnabled: ANSWERS.getAnalyticsOptIn(), feedbackSubmitted: data.feedbackSubmitted, isArray: Array.isArray(this.answer.value), cardName: `{{componentName}}`, diff --git a/directanswercards/documentsearch-standard/template.hbs b/directanswercards/documentsearch-standard/template.hbs index 028de17c5..24585baac 100644 --- a/directanswercards/documentsearch-standard/template.hbs +++ b/directanswercards/documentsearch-standard/template.hbs @@ -9,7 +9,9 @@ {{> cta CTA linkTarget=linkTarget}} - {{> footer}} + {{#if feedbackEnabled}} + {{> footer }} + {{/if}} {{#*inline 'title'}} diff --git a/directanswercards/multilang-allfields-standard/template.hbs b/directanswercards/multilang-allfields-standard/template.hbs index 025addb96..475b72481 100644 --- a/directanswercards/multilang-allfields-standard/template.hbs +++ b/directanswercards/multilang-allfields-standard/template.hbs @@ -14,7 +14,9 @@ {{> cta CTA linkTarget=linkTarget}} {{/if}} - {{> footer }} + {{#if feedbackEnabled}} + {{> footer }} + {{/if}} {{#*inline 'icon'}} diff --git a/global_config.json b/global_config.json index 1e20400d6..7a37f27ca 100644 --- a/global_config.json +++ b/global_config.json @@ -1,5 +1,5 @@ { - "sdkVersion": "develop", // The version of the Answers SDK to use + "sdkVersion": "release/v1.11", // The version of the Answers SDK to use // "apiKey": "", // The answers api key found on the experiences page. This will be provided automatically by the Yext CI system // "experienceVersion": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system diff --git a/test-site/config/global_config.json b/test-site/config/global_config.json index ee59f998f..91bd5f242 100644 --- a/test-site/config/global_config.json +++ b/test-site/config/global_config.json @@ -1,5 +1,5 @@ { - "sdkVersion": "develop", // The version of the Answers SDK to use + "sdkVersion": "release/v1.11", // 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": "", // the Answers Experience version to use for API requests. This will be provided automatically by the Yext CI system // "businessId": "", // The business ID of the account. This will be provided automatically by the Yext CI system