refs 116536: use localStorage to save guest user questionnaire answer status

packages/app/src/components/Questionnaire/QuestionnaireModal.tsx

@@ -6,6 +6,7 @@ import { Modal, ModalBody } from 'reactstrap';
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { toastSuccess, toastError } from '~/client/util/toastr';
 import { IAnswer } from '~/interfaces/questionnaire/answer';
+import { StatusType } from '~/interfaces/questionnaire/questionnaire-answer-status';
 import { IQuestionnaireOrderHasId } from '~/interfaces/questionnaire/questionnaire-order';
 import { useCurrentUser } from '~/stores/context';
 import { useQuestionnaireModal } from '~/stores/modal';
@@ -36,6 +37,9 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
         questionnaireOrderId: questionnaireOrder._id,
         answers,
       });
+      if (!currentUser) {
+        localStorage.setItem(questionnaireOrder._id, StatusType.answered);
+      }
       toastSuccess(
         <>
           <div className="font-weight-bold">{t('questionnaire.thank_you_for_answering')}</div>
@@ -51,7 +55,7 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
       logger.error(e);
       toastError(t('questionnaire.failed_to_send'));
     }
-  }, [questionnaireOrder._id, t]);
+  }, [questionnaireOrder._id, t, currentUser]);
 
   const submitHandler = useCallback(async(event) => {
     event.preventDefault();
@@ -63,8 +67,8 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
 
     sendAnswer(answers);
 
-    const shouldCloseToastor = true;
-    closeQuestionnaireModal(shouldCloseToastor);
+    const shouldCloseToast = true;
+    closeQuestionnaireModal(shouldCloseToast);
   }, [closeQuestionnaireModal, questionnaireOrder.questions, sendAnswer]);
 
   const denyBtnClickHandler = useCallback(async() => {
@@ -72,30 +76,36 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
       apiv3Put('/questionnaire/deny', {
         questionnaireOrderId: questionnaireOrder._id,
       });
+      if (!currentUser) {
+        localStorage.setItem(questionnaireOrder._id, StatusType.denied);
+      }
       toastSuccess(t('questionnaire.denied'));
     }
     catch (e) {
       logger.error(e);
     }
-    const shouldCloseToastor = true;
-    closeQuestionnaireModal(shouldCloseToastor);
-  }, [closeQuestionnaireModal, questionnaireOrder._id, t]);
+    const shouldCloseToast = true;
+    closeQuestionnaireModal(shouldCloseToast);
+  }, [closeQuestionnaireModal, questionnaireOrder._id, t, currentUser]);
 
   // No showing toasts since not important
-  const closeBtnClickHandler = useCallback(async(shouldCloseToastor: boolean) => {
-    closeQuestionnaireModal(shouldCloseToastor);
+  const closeBtnClickHandler = useCallback(async(shouldCloseToast: boolean) => {
+    closeQuestionnaireModal(shouldCloseToast);
 
     try {
       await apiv3Put('/questionnaire/skip', {
         questionnaireOrderId: questionnaireOrder._id,
       });
+      if (!currentUser) {
+        localStorage.setItem(questionnaireOrder._id, StatusType.skipped);
+      }
     }
     catch (e) {
       logger.error(e);
     }
-  }, [closeQuestionnaireModal, questionnaireOrder._id]);
+  }, [closeQuestionnaireModal, questionnaireOrder._id, currentUser]);
 
-  const closeBtnClickHandlerClosingToastor = useCallback(async() => {
+  const closeBtnClickHandlerClosingToast = useCallback(async() => {
     closeBtnClickHandler(true);
   }, [closeBtnClickHandler]);
 
@@ -104,7 +114,7 @@ const QuestionnaireModal = ({ questionnaireOrder }: QuestionnaireModalProps): JS
   return (<Modal
     size="lg"
     isOpen={isOpened}
-    toggle={closeBtnClickHandlerClosingToastor}
+    toggle={closeBtnClickHandlerClosingToast}
     centered
   >
     <form onSubmit={submitHandler}>

packages/app/src/components/Questionnaire/QuestionnaireModalManager.tsx

@@ -1,3 +1,6 @@
+import { StatusType } from '~/interfaces/questionnaire/questionnaire-answer-status';
+import { IQuestionnaireOrderHasId } from '~/interfaces/questionnaire/questionnaire-order';
+import { useCurrentUser } from '~/stores/context';
 import { useSWRxQuestionnaireOrders } from '~/stores/questionnaire';
 
 import QuestionnaireModal from './QuestionnaireModal';
@@ -7,6 +10,17 @@ import styles from './QuestionnaireModalManager.module.scss';
 
 const QuestionnaireModalManager = ():JSX.Element => {
   const { data: questionnaireOrders } = useSWRxQuestionnaireOrders();
+  const { data: currentUser } = useCurrentUser();
+
+  const questionnaireOrdersToShow = (questionnaireOrders: IQuestionnaireOrderHasId[] | undefined) => {
+    if (currentUser) {
+      return questionnaireOrders;
+    }
+    return questionnaireOrders?.filter((questionnaireOrder) => {
+      const localAnswerStatus = localStorage.getItem(questionnaireOrder._id);
+      return !localAnswerStatus || localAnswerStatus === StatusType.not_answered;
+    });
+  };
 
   return <>
     {questionnaireOrders?.map((questionnaireOrder) => {
@@ -15,7 +29,7 @@ const QuestionnaireModalManager = ():JSX.Element => {
         key={questionnaireOrder._id} />;
     })}
     <div className={styles['grw-questionnaire-toasts']}>
-      {questionnaireOrders?.map((questionnaireOrder) => {
+      {questionnaireOrdersToShow(questionnaireOrders)?.map((questionnaireOrder) => {
         return <QuestionnaireToast questionnaireOrder={questionnaireOrder} key={questionnaireOrder._id}/>;
       })}
     </div>

packages/app/src/components/Questionnaire/QuestionnaireToast.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
 import { toastSuccess } from '~/client/util/toastr';
+import { StatusType } from '~/interfaces/questionnaire/questionnaire-answer-status';
 import { IQuestionnaireOrderHasId } from '~/interfaces/questionnaire/questionnaire-order';
 import { useCurrentUser } from '~/stores/context';
 import { useQuestionnaireModal } from '~/stores/modal';
@@ -36,12 +37,15 @@ const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JS
       await apiv3Put('/questionnaire/deny', {
         questionnaireOrderId: questionnaireOrder._id,
       });
+      if (!currentUser) {
+        localStorage.setItem(questionnaireOrder._id, StatusType.denied);
+      }
       toastSuccess(t('questionnaire.denied'));
     }
     catch (e) {
       logger.error(e);
     }
-  }, [questionnaireOrder._id, t]);
+  }, [questionnaireOrder._id, t, currentUser]);
 
   // No showing toasts since not important
   const closeBtnClickHandler = useCallback(async() => {
@@ -51,11 +55,14 @@ const QuestionnaireToast = ({ questionnaireOrder }: QuestionnaireToastProps): JS
       await apiv3Put('/questionnaire/skip', {
         questionnaireOrderId: questionnaireOrder._id,
       });
+      if (!currentUser) {
+        localStorage.setItem(questionnaireOrder._id, StatusType.skipped);
+      }
     }
     catch (e) {
       logger.error(e);
     }
-  }, [questionnaireOrder._id]);
+  }, [questionnaireOrder._id, currentUser]);
 
   const questionnaireOrderShortTitle = lang === 'en_US' ? questionnaireOrder.shortTitle.en_US : questionnaireOrder.shortTitle.ja_JP;
 

packages/app/src/stores/modal.tsx

@@ -589,12 +589,12 @@ export const useConflictDiffModal = (): SWRResponse<ConflictDiffModalStatus, Err
 */
 type QuestionnaireModalStatuses = {
   openedQuestionnaireId: string | null,
-  closeToastor?: () => void | Promise<void>,
+  closeToast?: () => void | Promise<void>,
 }
 
 type QuestionnaireModalStatusUtils = {
-  open(string: string, closeToastor: () => void | Promise<void>): Promise<QuestionnaireModalStatuses | undefined>
-  close(shouldCloseToastor?: boolean): Promise<QuestionnaireModalStatuses | undefined>
+  open(string: string, closeToast: () => void | Promise<void>): Promise<QuestionnaireModalStatuses | undefined>
+  close(shouldCloseToast?: boolean): Promise<QuestionnaireModalStatuses | undefined>
 }
 
 export const useQuestionnaireModal = (status?: QuestionnaireModalStatuses): SWRResponse<QuestionnaireModalStatuses, Error> & QuestionnaireModalStatusUtils => {
@@ -603,14 +603,14 @@ export const useQuestionnaireModal = (status?: QuestionnaireModalStatuses): SWRR
 
   return {
     ...swrResponse,
-    open: (questionnaireOrderId: string, closeToastor: () => void | Promise<void>) => swrResponse.mutate({
+    open: (questionnaireOrderId: string, closeToast: () => void | Promise<void>) => swrResponse.mutate({
       openedQuestionnaireId: questionnaireOrderId,
-      closeToastor,
+      closeToast,
     }),
-    close: (shouldCloseToastor?: boolean) => {
-      if (shouldCloseToastor) {
-        swrResponse.data?.closeToastor?.();
-        if (swrResponse.data?.closeToastor === undefined) logger.debug('Tried to run `swrResponse.data?.closeToastor` but it was `undefined`');
+    close: (shouldCloseToast?: boolean) => {
+      if (shouldCloseToast) {
+        swrResponse.data?.closeToast?.();
+        if (swrResponse.data?.closeToast === undefined) logger.debug('Tried to run `swrResponse.data?.closeToast` but it was `undefined`');
       }
 
       return swrResponse.mutate({ openedQuestionnaireId: null });