MWPW-138822: Quiz debugging features; bug fixes (#1524)

* MWPW-132437: [Q] Mirror margins for RTL locales (#1480) MWPW-132437: Mirror margins for RTL locales * Quiz Results Debugging (#1476) * MWPW-125561 - UAR Results Block (#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 (#682) * Initial commit for question flow in UAR * Refactoring v1 * Refactoring v2 * Refactoring CSS * Mwpw 125561 uar results block - data model updates (#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 (#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 (#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 (#800) Co-authored-by: Honwai Wong <honstar.wong@gmail.com> * [UAR] cards responsive (#844) * [UAR] Card refinement (#873) * spacing fixes, flex for leftover cards, selected card fix * spacing tweak, dot indicator adjustment * MWPW-125274 - UAR Analytics (#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 (#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 (#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 <borges@Laines-Mac-Pro.local> Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com> * MWPW-133738: Use a different comparison to process question values (#949) * MWPW-133759 - Adding logic to account for single products grouped together (#941) * Adding logic to account for single product grouped together * Refactoring * MWPW-133268 - Rename uar-results to quiz-results (#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 (#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 (#1071) * Adding nested fragments based on primary and secondary products * Refactoring * Refactoring - v2 --------- Co-authored-by: Erich Champion <echampio@adobe.com> * MWPW-134131 - Fixing issue when there are more than one rule with same number of grouping (#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 (#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 (#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 <borges@laines-mac-pro.eur.adobe.com> Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local> Co-authored-by: Narcis Radu <github@narcisradu.ro> * MWPW-135125 Quiz button fix (#1153) * button responsive fix * height setting to min-height --------- Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com> Co-authored-by: Erich Champion <echampio@adobe.com> * [UAR] Quiz URL States (#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 <echampio@adobe.com> * MWPW-134986 - Rendering nested fragments in the order of products (#1186) Rendering nested fragments in the order of products * MWPW-134823 - QUIZ - Fix Acessibility warning (#1192) clean up lorems Co-authored-by: Elaine Borges <borges@laines-mac-pro.home> * MWPW-135442 - Fixing the issue of NOT operator when the order of selection is changed (#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 (#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 (#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 (#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) (#1254) * Adding unit tests for quiz * Refactoring * Refactoring again * Quiz tests (#1260) * MWPW-134984, tests. * cleanup * Remove file * MWPW-136619: Update CODEOWNERS for quiz and quiz-results (#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 <chrischrischris@users.noreply.github.com> * PR 1264 quiz.js feedback refactor (#1289) * PR 1264 quiz.js feedback refactor * Clarifying const naming * MWPW-136688 Added quiz and quiz results to MILO_BLOCKS (#1299) Added quiz and quiz results to MILO_BLOCKS * PR 1264 quiz_results.js feedback (#1298) Resolves quiz-results.js feedback in PR #1264 * PR 1264 utils.js feedback refactor (#1329) * Addressing review comments for the main PR * Refactoring --------- Co-authored-by: Erich Champion <echampio@adobe.com> * MWPW-135730 - Results card-list alignment correction (#1349) results card-list alignment correction Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local> Co-authored-by: Erich Champion <echampio@adobe.com> * MWPW-115213 - Addressing review comments (#1356) * MWPW-136165 - Background reset for quiz footer (#1379) * Allow section metadata dark with static links style without background Resolves: [MWPW-136165](https://jira.corp.adobe.com/browse/MWPW-136165) * MWPW-136162 [UAR] Refactored last step signal to dot indicators (#1369) * MWPW-136162 Refactored last step signal to dot indicators * MWPW-136162 refactored empty array --------- Co-authored-by: Erich Champion <echampio@adobe.com> * MWPW-135119: redirect to result page if next is valid URL * Revert "MWPW-135119: redirect to result page if next is valid URL" This reverts commit 9d43c15. * MWPW-137456 refactored for last step detection (#1400) * Quiz property name updates (#1413) * MWPW-137651 - Quiz property name adjustments * Renamed properties to make them more author friendly Resolves: [MWPW-137651](https://jira.corp.adobe.com/browse/MWPW-137651) * pr feedback fixes for storage * MWPW-135119: Redirect to result pages without loading results.json (#1403) * update divider-inherit css to support different color divider * MWPW-135119: redirect to result page if next is valid URL * fix eslint error * update code according to feedback * fix eslint --------- Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local> Co-authored-by: Erich Champion <echampio@adobe.com> * MWPW-136372 - Fixing stuffs to make performance great again.. (#1429) * Fixing stuffs to make performance great again.. * Refactoring * Fixing tests --------- Co-authored-by: Erich Champion <echampio@adobe.com> * MWPW-137193 quiz-result validation improvements (#1451) MWPW-137193 - Quiz results validation improvements * checks for an empty basic fragment object Resolves: [MWPW-137193](https://jira.corp.adobe.com/browse/MWPW-137193) Co-authored-by: Erich Champion <echampio@adobe.com> * MWPW-125569 Adds debugging functionality, cleans code * removed handlePopState and cleaned up eslint messages. * Cleaned up URL better * Console.log support for paper trail * added promise to prevent race condition not copying * Update quiz.js --------- Co-authored-by: Cody Lloyd <119891065+colloyd@users.noreply.github.com> Co-authored-by: Erich Champion <echampio@adobe.com> Co-authored-by: Sabya <sabyasachi.exe@gmail.com> Co-authored-by: Honwai Wong <honstar.wong@gmail.com> Co-authored-by: Elaine Borges <62952234+elaineskpt@users.noreply.github.com> Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local> Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com> Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local> Co-authored-by: Narcis Radu <github@narcisradu.ro> Co-authored-by: Elaine Borges <borges@laines-mac-pro.home> Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> Co-authored-by: Jacky Sun <67350368+JackySun9@users.noreply.github.com> * MWPW-138713: [Q] Bogus dependency of step indicator on background (#1482) --------- Co-authored-by: Brad Johnson <fullcolorcoder@gmail.com> Co-authored-by: Cody Lloyd <119891065+colloyd@users.noreply.github.com> Co-authored-by: Sabya <sabyasachi.exe@gmail.com> Co-authored-by: Honwai Wong <honstar.wong@gmail.com> Co-authored-by: Elaine Borges <62952234+elaineskpt@users.noreply.github.com> Co-authored-by: Elaine Borges <borges@Laines-Mac-Pro.local> Co-authored-by: Elaine Borges <borges@laines-mac-pro.eur.adobe.com> Co-authored-by: xiasun <xiasun@xiasuns-MacBook-Pro-2.local> Co-authored-by: Narcis Radu <github@narcisradu.ro> Co-authored-by: Elaine Borges <borges@laines-mac-pro.home> Co-authored-by: Chris Peyer <chrischrischris@users.noreply.github.com> Co-authored-by: Jacky Sun <67350368+JackySun9@users.noreply.github.com>
adobecom · Nov 14, 2023 · 19eb173 · 19eb173
1 parent 4d8dbb3
commit 19eb173
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 59 deletions.
diff --git a/libs/blocks/quiz/quiz.css b/libs/blocks/quiz/quiz.css
@@ -80,6 +80,10 @@
   margin-right: 16px;
 }
 
+html[dir="rtl"] .quiz-option-icon {
+  margin-left: 16px;
+}
+
 .quiz-option-icon img {
   height: var(--icon-size-m);
   width: var(--icon-size-m);
@@ -94,6 +98,10 @@
   width: 46px;
 }
 
+html[dir="rtl"] .quiz-option-image {
+  margin-left: 16px;
+}
+
 .quiz-option-title {
   color: var(--text-color);
   display: none;
@@ -213,6 +221,10 @@
   width: calc(100% - 23px) /* width of .quiz-step minus the width of a single dot */;
 }
 
+html[dir="rtl"] .quiz-step::after {
+  margin-right: 20px;
+}
+
 .quiz-step.current::before {
   background-color: var(--color-black);
   border-color: var(--color-black);
@@ -315,6 +327,10 @@
     min-height: 126px;
   }
 
+  html[dir="rtl"] .quiz-option-icon {
+    margin-left: 0;
+  }
+
   .quiz-option-icon img {
     height: var(--icon-size-xl);
     width: var(--icon-size-xl);

diff --git a/libs/blocks/quiz/quiz.js b/libs/blocks/quiz/quiz.js
@@ -23,7 +23,6 @@ const App = ({
   preQuestions = {}, initialStrings = {},
 }) => {
   const [btnAnalytics, setBtnAnalytics] = useState(null);
-  const [isBtnClicked, setIsBtnClicked] = useState(false);
   const [countSelectedCards, setCountOfSelectedCards] = useState(0);
   const [currentStep, setCurrentStep] = useState(0);
   const [isDataLoaded, setDataLoaded] = useState(initialIsDataLoaded);
@@ -37,11 +36,10 @@ const App = ({
   const [stringQList, setStringQList] = useState(preQuestions.stringQList || {});
   const [totalSteps, setTotalSteps] = useState(3);
   const initialUrlParams = getUrlParams();
-  const [urlParam, setUrlParam] = useState(initialUrlParams);
   const [userSelection, updateUserSelection] = useState([]);
   const [userFlow, setUserFlow] = useState([]);
   const validQuestions = useMemo(() => [], []);
-  const knownParams = useMemo(() => ['martech', 'milolibs', 'quiz-data'], []);
+  const [debugBuild, setDebugBuild] = useState(null);
 
   useEffect(() => {
     (async () => {
@@ -70,17 +68,25 @@ const App = ({
   }, [setQuestionData, setStringData, setStringQList, setQuestionList]);
 
   useEffect(() => {
-    function handlePopState() {
-      window.location.reload();
-    }
+    const quizDebugValue = initialUrlParams['debug-results'];
+    const handleDebugResults = () => {
+      if (quizDebugValue && quizDebugValue.length > 1) {
+        const quizDebugValueDecodedJSON = JSON.parse(decodeURIComponent(quizDebugValue));
+        if (userSelection.length > 0) {
+          setNextQuizViewsExist(false);
+        } else {
+          updateUserSelection(quizDebugValueDecodedJSON);
+        }
+      }
+    };
     if (isDataLoaded) {
-      window.addEventListener('popstate', handlePopState);
-      return () => {
-        window.removeEventListener('popstate', handlePopState);
-      };
+      if (debugBuild === false) {
+        handleDebugResults();
+      }
     }
     return () => {};
-  }, [knownParams, isDataLoaded]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDataLoaded, debugBuild, userSelection]);
 
   useEffect(() => {
     if (userFlow && userFlow.length) {
@@ -119,60 +125,38 @@ const App = ({
    */
   useEffect(() => {
     if (!nextQuizViewsExist && userSelection.length) {
+      const debugParam = initialUrlParams['debug-results'];
+      if (debugParam) {
+        const userSelectionString = JSON.stringify(userSelection);
+        const userSelectionStringEncoded = encodeURIComponent(userSelectionString);
+        const cleanURL = window.location.href.split('?')[0];
+        const debugURL = `${cleanURL}?debug-results=${userSelectionStringEncoded}`;
+        window.history.replaceState('', '', debugURL);
+        navigator.clipboard.writeText(debugURL).then(() => {
+          // eslint-disable-next-line no-console
+          console.log(debugURL);
+        }).catch((err) => {
+          // eslint-disable-next-line no-console
+          console.log(`Error copying URL: ${err} URL: ${debugURL}`);
+        });
+      }
       handleResultFlow(transformToFlowData(userSelection));
     }
-  }, [userSelection, nextQuizViewsExist]);
-
-  /**
-   *  Updates the url param when user selects the options.
-   *  Happens with each option click/tap.
-   */
-  useEffect(() => {
-    if (!selectedQuestion) return;
-    const { questions } = selectedQuestion;
-    const cardValues = Object.getOwnPropertyNames(selectedCards);
-    setUrlParam((prevUrlParam) => {
-      const newParam = { ...prevUrlParam };
-      if (selectedQuestion && cardValues.length === 0) {
-        delete newParam[questions];
-      } else if (!urlParam[questions]) {
-        newParam[questions] = new Set(
-          [...(urlParam[questions] || []), ...cardValues],
-        );
-      } else {
-        newParam[questions] = new Set(cardValues);
-      }
-      return newParam;
-    });
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedQuestion, selectedCards, JSON.stringify(urlParam)]);
+  }, [userSelection, nextQuizViewsExist]);
 
   /**
    * Updates the url when the url param is updated as part of the option click.
    */
   useLayoutEffect(() => {
-    if (Object.keys(urlParam).length > 0 && isBtnClicked === true) {
-      let urlParamList = Object.keys(urlParam).map((key) => {
-        const paramList = [...urlParam[key]];
-        if (paramList.length) {
-          return `${key}=${paramList.join(',')}`;
-        }
-        return null; // Explicitly return null if the condition is not met
-      }).filter((item) => !!item && !knownParams.includes(item.split('=')[0]));
-      const knownParamsList = knownParams
-        .filter((key) => key in urlParam)
-        .map((key) => `${key}=${urlParam[key].join(',')}`);
-      urlParamList = [...urlParamList, ...knownParamsList];
-      if (knownParamsList.length === 1 && isBtnClicked === false) {
-        const newURL = knownParamsList && knownParamsList.length > 0 ? `?${knownParamsList.join('&')}` : '';
-        window.history.pushState('', '', newURL);
-      } else {
-        window.history.pushState('', '', `?${urlParamList.join('&')}`);
-      }
-      setIsBtnClicked(false);
+    const quizDebug = initialUrlParams['debug-results'];
+    if (quizDebug && quizDebug.length < 1) {
+      setDebugBuild(true);
+    } else {
+      setDebugBuild(false);
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [urlParam]);
+  }, [initialUrlParams]);
 
   /**
    * Updates the prevStepIndicator when user selects the options.
@@ -202,7 +186,6 @@ const App = ({
    * @returns {void}
    */
   const handleOnNextClick = (selCards) => {
-    setIsBtnClicked(true);
     const { nextQuizViews } = handleNext(
       questionData,
       selectedQuestion,
@@ -249,7 +232,6 @@ const App = ({
    *  @returns {void}
    * */
   const onOptionClick = (option) => () => {
-    setIsBtnClicked(true);
     const newState = { ...selectedCards };
 
     if (Object.keys(newState).length >= maxSelections && !newState[option.options]) {
@@ -295,14 +277,14 @@ const App = ({
   };
 
   return html`<div class="quiz-container">
-                  ${selectedQuestion.questions && getStringValue('background') !== '' && html`<${StepIndicator}
+                  ${selectedQuestion.questions && html`<${StepIndicator}
                     currentStep=${currentStep} 
                     totalSteps=${totalSteps} 
                     prevStepIndicator=${prevStepIndicator}
                     top="${true}" />
                   `}
 
-                  ${selectedQuestion.questions && html`<div class="quiz-background">
+                  ${selectedQuestion.questions && getStringValue('background') !== '' && html`<div class="quiz-background">
                       ${DecorateBlockBackground(getStringValue)}
                   </div>`}