Merge pull request #1126 from hackforla/dev

Dev
hackforla · Jan 29, 2024 · df0f885 · df0f885
2 parents ea3c318 + f461880
commit df0f885
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 11 deletions.
diff --git a/products/statement-generator/public/locales/en/translation.json b/products/statement-generator/public/locales/en/translation.json
@@ -4,6 +4,8 @@
     "begin": "Begin",
     "next": "Next",
     "letsContinue": "Let's Continue",
+    "returnHome": "RETURN HOME",
+    "back": "BACK",
     "cancel": "Cancel",
     "save": "Save",
     "yes": "Yes",
@@ -93,6 +95,10 @@
     "step5": {
       "titleText": "Almost done",
       "description": "Just one more step. Next, you can preview your entire letter and make changes.\n\nWhen you are done, email or download a copy of your letter."
+    },
+    "done": {
+      "titleText": "Done",
+      "description": "You have downloaded your declaration letter. Select \"Back\" to reuse the tool or \"Return Home\" to exit and erase your data."
     }
   },
   "sections": {

diff --git a/products/statement-generator/src/assets/done-img.svg b/products/statement-generator/src/assets/done-img.svg
diff --git a/products/statement-generator/src/components-layout/Affirmation.tsx b/products/statement-generator/src/components-layout/Affirmation.tsx
@@ -2,14 +2,17 @@ import React, { useContext } from 'react';
 import { Theme, createStyles, makeStyles } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import Dialog from '@material-ui/core/Dialog';
-
+import { useHistory } from 'react-router-dom';
 import AffirmationImage from 'assets/affirmation-img.svg';
-
+import { defaultStepState } from 'contexts/FormStateProps';
 import Button from 'components/Button';
 
 import { AffirmationContext } from 'contexts/AffirmationContext';
 
 import useUtilityStyles from 'styles/utilityStyles';
+import RoutingContext from 'contexts/RoutingContext';
+import { AppUrl } from 'contexts/RoutingProps';
+import FormStateContext from 'contexts/FormStateContext';
 
 interface CustomStyleProps {
   isActive: boolean;
@@ -21,33 +24,61 @@ const useStyles = makeStyles<Theme, CustomStyleProps>(({ palette, spacing }) =>
       background: palette.primary.lighter,
       padding: spacing(2),
     },
+    doneAffirmationContainer: {
+      background: palette.primary.lighter,
+      borderRadius: '23px',
+      maxWidth: '35rem',
+    },
     messageContainer: {
       marginTop: spacing(2),
     },
+    doneMessageContainer: {
+      margin: spacing(2),
+    },
     titleText: {
       fontSize: '2rem',
     },
+    buttonSpacing: {
+      padding: spacing(2),
+    },
   })
 );
 
 const Affirmation = () => {
+  const { currentStep, appTheme } = useContext(RoutingContext);
+  const { updateStepToForm } = useContext(FormStateContext);
+  const history = useHistory();
   const { t } = useTranslation();
   const { affirmationData, updateAffirmationData } = useContext(
     AffirmationContext
   );
+  const returnHome = () => {
+    const path = AppUrl.Landing;
+    updateAffirmationData({ isActive: false });
+    updateStepToForm(defaultStepState);
+    history.push(path);
+  };
 
   const utilityClasses = useUtilityStyles({
     pageTheme: 'transparent',
   });
   const classes = useStyles({ isActive: affirmationData.isActive });
 
   const image = affirmationData.image || AffirmationImage;
+  const backBtnTheme =
+    appTheme === 'dark' ? 'transparent-on-dark' : 'transparent-on-light';
 
   return (
     <Dialog
-      classes={{
-        paper: classes.affirmationContainer,
-      }}
+      classes={
+        AppUrl.FinalizePreview === currentStep
+          ? {
+              paper: classes.doneAffirmationContainer,
+            }
+          : {
+              paper: classes.affirmationContainer,
+            }
+      }
       fullWidth
       disableScrollLock
       open={affirmationData.isActive}
@@ -57,17 +88,39 @@ const Affirmation = () => {
     >
       <img src={image} alt="affirmation illustration" />
 
-      <div className={classes.messageContainer}>
+      <div
+        className={
+          AppUrl.FinalizePreview === currentStep
+            ? classes.doneMessageContainer
+            : classes.messageContainer
+        }
+      >
         <h2 className={classes.titleText}>{t(affirmationData.titleText)}</h2>
         <p>{t(affirmationData.description)}</p>
       </div>
 
       <div
-        className={`${utilityClasses.buttonContainer} ${utilityClasses.justifyRight}`}
+        className={`${utilityClasses.buttonContainer} ${
+          utilityClasses.justifyRight
+        } ${
+          AppUrl.FinalizePreview === currentStep && utilityClasses.spaceBetween
+        } ${classes.buttonSpacing}`}
       >
+        {AppUrl.FinalizePreview === currentStep && (
+          <Button
+            hasBackArrow
+            theme={backBtnTheme}
+            onClick={() => updateAffirmationData({ isActive: false })}
+            buttonText={t(affirmationData.backButtonText)}
+          />
+        )}
         <Button
           hasForwardArrow
-          onClick={() => updateAffirmationData({ isActive: false })}
+          onClick={() =>
+            AppUrl.FinalizePreview === currentStep
+              ? returnHome()
+              : updateAffirmationData({ isActive: false })
+          }
           buttonText={t(affirmationData.buttonText)}
         />
       </div>

diff --git a/products/statement-generator/src/contexts/AffirmationContext.tsx b/products/statement-generator/src/contexts/AffirmationContext.tsx
@@ -45,6 +45,7 @@ interface AffirmationProps {
   isActive: boolean;
   titleText: string;
   buttonText: string;
+  backButtonText?: string;
   description: string;
   image?: string;
 }

diff --git a/products/statement-generator/src/pages-form/FinalizePreview.tsx b/products/statement-generator/src/pages-form/FinalizePreview.tsx
@@ -1,10 +1,10 @@
 import React, { useContext, useState } from 'react';
-import { useHistory } from 'react-router-dom';
 import { makeStyles, createStyles } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 
 import FormStateContext from 'contexts/FormStateContext';
 import { AppUrl } from 'contexts/RoutingProps';
+import { AffirmationContext } from 'contexts/AffirmationContext';
 
 import VisibilityIcon from '@material-ui/icons/Visibility';
 
@@ -13,6 +13,7 @@ import InfoBlock from 'components/InfoBlock';
 import ContentContainer from 'components-layout/ContentContainer';
 import FlowNavigation from 'components-layout/FlowNavigation';
 import Download from 'pages-form/Download';
+import DoneImg from 'assets/done-img.svg';
 
 import { getPreviewStatement, PREVIEW_KEYS } from 'helpers/previewHelper';
 
@@ -48,8 +49,8 @@ function FinalizeStep() {
   const { t } = useTranslation();
   const classes = useStyles();
   const { formState } = useContext(FormStateContext);
-  const history = useHistory();
   const [disableNext, setDisableNext] = useState(true);
+  const { updateAffirmationData } = useContext(AffirmationContext);
 
   return (
     <ContentContainer>
@@ -90,7 +91,16 @@ function FinalizeStep() {
 
       <FlowNavigation
         isNextDisabled={disableNext}
-        onNext={() => history.push('/')}
+        onNext={() =>
+          updateAffirmationData({
+            isActive: true,
+            titleText: 'affirmation_popup.done.titleText',
+            description: 'affirmation_popup.done.description',
+            buttonText: 'button.returnHome',
+            backButtonText: 'button.back',
+            image: DoneImg,
+          })
+        }
         nextButtonLabel="RETURN HOME"
       />
     </ContentContainer>

diff --git a/products/statement-generator/src/styles/utilityStyles.ts b/products/statement-generator/src/styles/utilityStyles.ts
@@ -84,6 +84,10 @@ const useUtilityStyles = makeStyles<Theme>(
       justifyRight: {
         justifyContent: 'flex-end',
       },
+      spaceBetween: {
+        justifyContent: 'space-between',
+      },
+
       flexGrow: {
         flex: '1 1 auto',
       },