MWPW-115213 - Uber App Recommender a.k.a. Quiz (adobecom#1264)

* MWPW-125561 - UAR Results Block (adobecom#636) * Initial commit * Basic UAR results * Nested UAR results * Style support Resolves: [MWPW-NUMBER](MWPW-URL) **Test URLs:** - Before: https://main--milo--adobecom.hlx.page/?martech=off - After: https://uar-integration--milo--adobecom.hlx.page/?martech=off * UAR Quiz Block Initial Commit (adobecom#682) * Initial commit for question flow in UAR * Refactoring v1 * Refactoring v2 * Refactoring CSS * Mwpw 125561 uar results block - data model updates (adobecom#680) * MWPW-125561 - UAR Results Block * Initial commit * Basic UAR results * Nested UAR results * Style support Resolves: [MWPW-NUMBER](MWPW-URL) **Test URLs:** - Before: https://main--milo--adobecom.hlx.page/?martech=off - After: https://uar-integration--milo--adobecom.hlx.page/?martech=off * Adjustments to match data structure from quizzes * Finalized UAR Results (adobecom#729) * Finalized UAR Results * Lana logging and a debug param to stop redirects (MWPW-125185) * Set a value for pageload analytics (MWPW-128939) * Unit tests (MWPW-130870) Resolves: [MWPW-125185](https://jira.corp.adobe.com/browse/MWPW-125185) Resolves: [MWPW-128939](https://jira.corp.adobe.com/browse/MWPW-128939) Resolves: [MWPW-130870](https://jira.corp.adobe.com/browse/MWPW-130870) **Test URLs:** - Before: https://main--milo--adobecom.hlx.page/?martech=off - After: https://<branch>--milo--adobecom.hlx.page/?martech=off * Set error strings as an exported variable. Used the exported variable in unit tests. * [MWPW-125908] [UAR] Step indicator addition to quiz (adobecom#714) * Step indicator addition to quiz * Refactored to use visibility for performance * Hiding stray data * Refactored quiz js/css to not be hard coded and add padding on mobile * css refactor for colors, spacing, better selectors * class naming refactor * Adding the current locale code to the local storage key (adobecom#800) Co-authored-by: Honwai Wong <[email protected]> * [UAR] cards responsive (adobecom#844) * [UAR] Card refinement (adobecom#873) * spacing fixes, flex for leftover cards, selected card fix * spacing tweak, dot indicator adjustment * MWPW-125274 - UAR Analytics (adobecom#871) * Refactoring question flow and adding analytics data * Adding button analytics data * Setting pageLoadHash in local storage * Refactoring * Adding guardrail around result parsing * MWPW-133219: Hide default content before the preact app loads (adobecom#898) * Hide the original, classless div elements within the quiz block by default. Then use a specific selector to restore the wrapper div added by the preact app. * Hide div elements within the quiz that aren't marked with a specific class of their own * Removing code to hide siblings of .quiz-container since they will already be hidden * MWPW-127110 - Quiz footer fragment based on string.json (adobecom#895) * quiz footer fragment Loader * quiz footer fragment * quiz footer fragment * quiz footer fragment * quiz footer fragment * test * test * stepIndicator correction --------- Co-authored-by: Elaine Borges <[email protected]> Co-authored-by: Elaine Borges <[email protected]> * MWPW-133738: Use a different comparison to process question values (adobecom#949) * MWPW-133759 - Adding logic to account for single products grouped together (adobecom#941) * Adding logic to account for single product grouped together * Refactoring * MWPW-133268 - Rename uar-results to quiz-results (adobecom#962) * renamed all block files and references * updated unit tests * updated debug query params Resolves: [MWPW-133268](https://jira.corp.adobe.com/browse/MWPW-133268) **Test URLs:** - Before: https://main--milo--adobecom.hlx.page/?martech=off - After: https://<branch>--milo--adobecom.hlx.page/?martech=off * [UAR] - Alternate quiz data (adobecom#953) * MWPW-126143 added alternate path for JSON data via search params * empty * Fixed step indicator * Changed to use layouteffect, tests * Reverted slash in query param scenario * Refactored tests and quiz url sourcing * MWPW-134269 - Adding nested fragments based upon the primary product as well as secondary (adobecom#1071) * Adding nested fragments based on primary and secondary products * Refactoring * Refactoring - v2 --------- Co-authored-by: Erich Champion <[email protected]> * MWPW-134131 - Fixing issue when there are more than one rule with same number of grouping (adobecom#1112) * Fixing issue when there are more than one rule with same number of grouping * Addressing review comments * MWPW-135198 - Optimizes quiz-results DOM handling (adobecom#1117) * Removed a querySelectorAll * Removed iteration through metadata divs * Add lana logging if the block has been misconfigured Resolves: [MWPW-135198](https://jira.corp.adobe.com/browse/MWPW-135198) * MWPW-132277 - Breakpoint content for Quiz Results (adobecom#1128) * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * MWPW-132277 work in progress * setting phone-only as default --------- Co-authored-by: Elaine Borges <[email protected]> Co-authored-by: Elaine Borges <[email protected]> Co-authored-by: Narcis Radu <[email protected]> * MWPW-135125 Quiz button fix (adobecom#1153) * button responsive fix * height setting to min-height --------- Co-authored-by: Elaine Borges <[email protected]> Co-authored-by: Erich Champion <[email protected]> * [UAR] Quiz URL States (adobecom#1149) * Managing state via url, support back button, hydrate state with params * Refactored url management & handled existing redirect params from results.json * added handler for back button with known params present * Defered popstate * Refactored to fix errors * Fixed back button click new option bug --------- Co-authored-by: Erich Champion <[email protected]> * MWPW-134986 - Rendering nested fragments in the order of products (adobecom#1186) Rendering nested fragments in the order of products * MWPW-134823 - QUIZ - Fix Acessibility warning (adobecom#1192) clean up lorems Co-authored-by: Elaine Borges <[email protected]> * MWPW-135442 - Fixing the issue of NOT operator when the order of selection is changed (adobecom#1200) * Fixing the issue of NOT operator when the order of selection is changed * Refactoring * MWPW-135903: If nestedObject[fragKey] exists, append to it instead of replacing (adobecom#1208) * MWPW-135903: If nestedObject[fragKey] exists, append to it instead of replacing * MWPW-135903: Feedback from Okan * MWPW-135296 - Quiz css and related markup cleanup (adobecom#1219) * MWPW-135296 - Quiz css and related markup cleanup * Drastically simplifies quiz css, removing unused css * Simplified markup, removing unused classes and standardizing the rest * Remove caas related css and classes that were creating linting errors * add icon and cover-image types to cards * add top and bottom classes to progress indicators * set all styling to match the comps from consonant for all devices Resolves: [MWPW-135296](https://jira.corp.adobe.com/browse/MWPW-135296) * fix word breaking on card text * pr feedback adjustments * MWPW-125774 - Quiz block accessibility (adobecom#1243) * MWPW-125774 - Quiz block accessibility * Quiz options can now be tabbed to with the keyboard * Quiz options can be activated with space or enter keys * Focus is reset to the top of the quiz when moving to the next question Resolves: [MWPW-125774](https://jira.corp.adobe.com/browse/MWPW-125774) * PR feedback to adjust mobile quiz-option width * fix for icons shrinking on mobile longer text * MWPW-133119 - Adding Unit Tests for Quiz (Utils.js) (adobecom#1254) * Adding unit tests for quiz * Refactoring * Refactoring again * Quiz tests (adobecom#1260) * MWPW-134984, tests. * cleanup * Remove file * MWPW-136619: Update CODEOWNERS for quiz and quiz-results (adobecom#1280) * MWPW-136619: Update CODEOWNERS for quiz and quiz-results * MWPW-136619: Removing extra @ * Update libs/blocks/quiz-results/quiz-results.js adjust logged message for analytics when in debug Co-authored-by: Chris Peyer <[email protected]> * PR 1264 quiz.js feedback refactor (adobecom#1289) * PR 1264 quiz.js feedback refactor * Clarifying const naming * MWPW-136688 Added quiz and quiz results to MILO_BLOCKS (adobecom#1299) Added quiz and quiz results to MILO_BLOCKS * PR 1264 quiz_results.js feedback (adobecom#1298) Resolves quiz-results.js feedback in PR adobecom#1264 * PR 1264 utils.js feedback refactor (adobecom#1329) * Addressing review comments for the main PR * Refactoring --------- Co-authored-by: Erich Champion <[email protected]> * MWPW-135730 - Results card-list alignment correction (adobecom#1349) results card-list alignment correction Co-authored-by: Elaine Borges <[email protected]> Co-authored-by: Erich Champion <[email protected]> * MWPW-115213 - Addressing review comments (adobecom#1356) --------- Co-authored-by: Cody Lloyd <[email protected]> Co-authored-by: Erich Champion <[email protected]> Co-authored-by: Brad Johnson <[email protected]> Co-authored-by: Honwai Wong <[email protected]> Co-authored-by: Elaine Borges <[email protected]> Co-authored-by: Elaine Borges <[email protected]> Co-authored-by: Elaine Borges <[email protected]> Co-authored-by: xiasun <[email protected]> Co-authored-by: Narcis Radu <[email protected]> Co-authored-by: Elaine Borges <[email protected]> Co-authored-by: Chris Peyer <[email protected]>
Ruchika4 · Sep 27, 2023 · 4bf541a · 4bf541a
1 parent d59a069
commit 4bf541a
Show file tree

Hide file tree

Showing 25 changed files with 4,024 additions and 0 deletions.
diff --git a/CODEOWNERS b/CODEOWNERS
@@ -35,6 +35,8 @@
 /libs/blocks/merch-card/ @VKniaz @Axelcureno @ryanmparrish
 /libs/blocks/ost/ @Axelcureno @3ch023 @honstar @VKniaz @vladen @yesil @npeltier
 /libs/blocks/pdf-vewer/ @sanjayms01
+/libs/blocks/quiz/ @colloyd @sabyamon @fullcolorcoder @JackySun9 @elaineskpt @echampio-at-adobe
+/libs/blocks/quiz-results/ @colloyd @sabyamon @fullcolorcoder @JackySun9 @elaineskpt @echampio-at-adobe
 /libs/blocks/quote/ @ryanmparrish
 /libs/blocks/table-of-contents/ @Brandon32
 /libs/blocks/tabs/ @ryanmparrish

diff --git a/libs/blocks/quiz-results/quiz-results.css b/libs/blocks/quiz-results/quiz-results.css
@@ -0,0 +1,76 @@
+@import url("../section-metadata/section-metadata.css");
+
+.quiz-results {
+  visibility: hidden;
+}
+
+.quiz-results.show {
+  visibility: unset;
+}
+
+.quiz-results .tablet-portrait-up,
+.quiz-results .tablet-landscape-up,
+.quiz-results .section.desktop-up,
+.quiz-results .big-desktop-up {
+  display: none;
+}
+
+.quiz-results .quiz-card-list {
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-s);
+  justify-content: center;
+  margin: 0 auto;
+  padding: var(--spacing-s) 0;
+  position: relative;
+  flex-wrap: wrap;
+}
+
+@media screen and (min-width: 600px) {
+  .quiz-results .tablet-portrait-up {
+    display: block;
+  }
+
+  .quiz-results .phone-only,
+  .quiz-results .tablet-landscape-up,
+  .quiz-results .desktop-up,
+  .quiz-results .big-desktop-up {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .quiz-results .tablet-landscape-up {
+    display: block;
+  }
+
+  .quiz-results .tablet-portrait-up,
+  .quiz-results .desktop-up,
+  .quiz-results .big-desktop-up {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .quiz-results .desktop-up {
+    display: block;
+  }
+
+  .quiz-results .tablet-portrait-up,
+  .quiz-results .tablet-landscape-up,
+  .quiz-results .big-desktop-up {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 1440px) {
+  .quiz-results .big-desktop-up {
+    display: block;
+  }
+
+  .quiz-results .tablet-portrait-up,
+  .quiz-results .tablet-landscape-up,
+  .quiz-results .desktop-up {
+    display: none;
+  }
+}
diff --git a/libs/blocks/quiz-results/quiz-results.js b/libs/blocks/quiz-results/quiz-results.js
@@ -0,0 +1,101 @@
+import { createTag } from '../../utils/utils.js';
+import { getMetadata, handleStyle } from '../section-metadata/section-metadata.js';
+
+export const LOADING_ERROR = 'Could not load quiz results:';
+
+async function loadFragments(el, experiences) {
+  const { default: createFragment } = await import('../fragment/fragment.js');
+  // eslint-disable-next-line no-restricted-syntax
+  for (const href of experiences) {
+    /* eslint-disable no-await-in-loop */
+    const a = createTag('a', { href });
+    el.append(a);
+    await createFragment(a);
+  }
+}
+
+function redirectPage(quizUrl, debug, message) {
+  const url = (quizUrl) ? quizUrl.text : 'https://adobe.com';
+  window.lana.log(message);
+
+  if (debug === 'quiz-results') {
+    // eslint-disable-next-line no-console
+    console.log(`${message}, redirecting to: ${url}`);
+  } else {
+    window.location = url;
+  }
+}
+
+function setAnalytics(hashValue, debug) {
+  /* eslint-disable no-underscore-dangle */
+  window.alloy_load ??= {};
+  window.alloy_load.data ??= {};
+  window.alloy_all ??= {};
+  window.alloy_all.data ??= {};
+  window.alloy_all.data._adobe_corpnew ??= {};
+  window.alloy_all.data._adobe_corpnew.digitalData ??= {};
+  window.alloy_all.data._adobe_corpnew.digitalData.page ??= {};
+  window.alloy_all.data._adobe_corpnew.digitalData.page.pageInfo ??= {};
+  window.alloy_all.data._adobe_corpnew.digitalData.page.pageInfo.customHash = hashValue;
+  if (debug === 'quiz-results') {
+    // eslint-disable-next-line no-console
+    console.log('Setting a custom hash for pageload to: ', hashValue);
+  }
+}
+
+export default async function init(el, debug = null, localStoreKey = null) {
+  const data = getMetadata(el);
+  const params = new URL(document.location).searchParams;
+  const quizUrl = data['quiz-url'];
+  const BASIC_KEY = 'basicFragments';
+  const NESTED_KEY = 'nestedFragments';
+  const HASH_KEY = 'pageloadHash';
+
+  /* eslint-disable no-param-reassign */
+  // handle these two query param values in this way to facilitate unit tests
+  localStoreKey ??= params.get('quizKey');
+  debug ??= params.get('debug');
+
+  el.replaceChildren();
+
+  let results = localStorage.getItem(localStoreKey);
+  if (!results) {
+    redirectPage(quizUrl, debug, `${LOADING_ERROR} local storage missing`);
+    return;
+  }
+
+  try {
+    results = JSON.parse(results);
+  } catch (e) {
+    redirectPage(quizUrl, debug, `${LOADING_ERROR} invalid JSON in local storage`);
+    return;
+  }
+
+  if (data['nested-fragments'] && el.classList.contains('nested')) {
+    const nested = results[NESTED_KEY][data['nested-fragments'].text];
+    if (nested) loadFragments(el, nested);
+  } else if (el.classList.contains('basic')) {
+    const basic = results[BASIC_KEY];
+    const pageloadHash = results[HASH_KEY];
+
+    if (!basic) {
+      redirectPage(quizUrl, debug, `${LOADING_ERROR} Basic fragments are missing`);
+      return;
+    }
+
+    if (pageloadHash) {
+      setAnalytics(pageloadHash, debug);
+    }
+
+    loadFragments(el, basic);
+  } else {
+    window.lana.log(`${LOADING_ERROR} The quiz-results block is misconfigured`);
+    return;
+  }
+
+  if (data.style) {
+    el.classList.add('section');
+    handleStyle(data.style.text, el);
+  }
+  el.classList.add('show');
+}