Merge branch 'master' into TD-2435-generic-assessment-ui

Author: prd-duy-huynh

package-lock.json

@@ -23,7 +23,7 @@ function Instructions({
   surveyID,
   translate
 }) {
-  const {allow: allowSkip, trigger: onSkip} = useSkipAssessment();
+  const {allow: allowSkip, dismiss: dismissSkip, trigger: onSkip} = useSkipAssessment();
   const [width] = useWindowSize();
   const [disability, setDisability] = useState(initialLearningDisability || false);
   const [step, setStep] = useState(1);
@@ -40,6 +40,10 @@ function Instructions({
 
   const example = practiceExamples[step - 1];
   const instructionOptions = {id: surveyID, minimal, timeTrial, timed, translate, type};
+  const onContinue = () => {
+    dismissSkip();
+    setStep(step + 1);
+  };
 
   if(showAccommodation) {
     return (
@@ -70,7 +74,7 @@ function Instructions({
           {step === 1 && allowSkip && (
             <button className={style.btnBack} onClick={() => setShowAccommodation(true)} type="button">{translate("survey.accommodation.request")}</button>
           )}
-          <button className={`traitify--response-button ${style.btnBlue}`} onClick={() => setStep(step + 1)} type="button">{button}</button>
+          <button className={`traitify--response-button ${style.btnBlue}`} onClick={onContinue} type="button">{button}</button>
         </div>
       </div>
     );

src/components/survey/cognitive/instructions.js

@@ -11,7 +11,7 @@ function Instructions({
   instructionsHTML = null,
   onNext
 }) {
-  const {allow: allowSkip, trigger: onSkip} = useSkipAssessment();
+  const {allow: allowSkip, dismiss: dismissSkip, trigger: onSkip} = useSkipAssessment();
   const [showAccommodation, setShowAccommodation] = useState(false);
   const translate = useTranslate();
 
@@ -34,6 +34,11 @@ function Instructions({
     );
   }
 
+  const onContinue = () => {
+    dismissSkip();
+    onNext();
+  };
+
   return (
     <>
       {instructionsHTML ? (
@@ -47,7 +52,7 @@ function Instructions({
             {translate("survey.accommodation.request")}
           </button>
         )}
-        <button className={style.btnNext} onClick={onNext} type="button">
+        <button className={style.btnNext} onClick={onContinue} type="button">
           {translate("get_started")}
         </button>
       </div>

src/components/survey/personality/instructions.js

@@ -1,24 +1,26 @@
 import {useCallback} from "react";
-import {useSetRecoilState} from "recoil";
+import {useRecoilState, useSetRecoilState} from "recoil";
 import useActive from "lib/hooks/use-active";
 import useCache from "lib/hooks/use-cache";
 import useCacheKey from "lib/hooks/use-cache-key";
 import useGraphql from "lib/hooks/use-graphql";
 import useHttp from "lib/hooks/use-http";
 import useOrder from "lib/hooks/use-order";
 import useSetting from "lib/hooks/use-setting";
-import {orderState} from "lib/recoil";
+import {orderState, skipDismissedState} from "lib/recoil";
 
 export default function useSkipAssessment() {
   const active = useActive();
   const assessmentCacheKey = useCacheKey("assessment");
   const cache = useCache();
+  const [dismissed, setDismissed] = useRecoilState(skipDismissedState);
   const graphQL = useGraphql();
   const http = useHttp();
   const order = useOrder();
   const setOrder = useSetRecoilState(orderState);
 
   const allow = useSetting("skipAssessmentAccommodation", {fallback: false});
+  const dismiss = () => { setDismissed(true); };
   const trigger = useCallback(async() => {
     if(!active) { return; }
     if(!order) { return; }
@@ -79,5 +81,5 @@ export default function useSkipAssessment() {
     setOrder((_order) => ({..._order, completed: true, status: "skipped"}));
   }, [active, order]);
 
-  return {allow, trigger};
+  return {allow: dismissed ? false : allow, dismiss, trigger};
 }

src/lib/hooks/use-skip-assessment.js

@@ -24,6 +24,7 @@ export const optionsState = atom({default: null, key: "options"});
 export const orderIDState = atom({default: null, key: "order-id"});
 export const packageIDState = atom({default: null, key: "package-id"});
 export const profileIDState = atom({default: null, key: "profile-id"});
+export const skipDismissedState = atom({default: false, key: "skip-dismissed"});
 
 // NOTE: Breaking up state prevents over-triggering selectors
 export const activeIDState = selector({