Merge branch 'main' into main

TsayAdobe · Nov 14, 2023 · e407e3d · e407e3d
2 parents c0ae052 + 61217dc
commit e407e3d
Show file tree

Hide file tree

Showing 12 changed files with 637 additions and 68 deletions.
diff --git a/libs/blocks/aside/aside.css b/libs/blocks/aside/aside.css
@@ -997,15 +997,16 @@
     flex-direction: row;
   }
 
+  .aside.promobar .foreground.container .icon-area,
+  .aside.promobar .foreground.container .icon-area img {
+    height: var(--icon-size-xxl);
+  }
+
   .aside.promobar.popup .promo-text .icon-area,
   .aside.promobar.popup .promo-text .icon-area img {
     height: var(--icon-size-m);
   }
 
-  .aside.promobar .foreground.container .icon-area img {
-    height: var(--icon-size-xxl);
-  }
-
   .aside.center:not(.notification) .foreground.container .text .icon-area img {
     max-width: 400px;
   }
@@ -1065,10 +1066,6 @@
     margin-right: 0;
   }
 
-  .aside.promobar .foreground.container .icon-area {
-    height: var(--icon-size-xxl);
-  }
-
   .aside.promobar .promo-text .content-area {
     gap: var(--spacing-m);
   }

diff --git a/libs/blocks/global-navigation/utilities/keyboard/utils.js b/libs/blocks/global-navigation/utilities/keyboard/utils.js
@@ -49,6 +49,7 @@ selectors.popupItems = `
   ${selectors.privacyLink}
 `;
 
+// This method covers focusable elements only, so we aren’t interested in SVGs for example.
 const isElementVisible = (elem) => !!(
   elem
     && elem instanceof HTMLElement

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>`}