diff --git a/products/statement-generator/public/locales/en/translation.json b/products/statement-generator/public/locales/en/translation.json index 09c50a93..70e584a6 100644 --- 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 new file mode 100644 index 00000000..c51a7e11 --- /dev/null +++ b/products/statement-generator/src/assets/done-img.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/products/statement-generator/src/components-layout/Affirmation.tsx b/products/statement-generator/src/components-layout/Affirmation.tsx index 6440087b..3c7c35f6 100644 --- 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,20 +24,40 @@ const useStyles = makeStyles(({ 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', @@ -42,12 +65,20 @@ const Affirmation = () => { const classes = useStyles({ isActive: affirmationData.isActive }); const image = affirmationData.image || AffirmationImage; + const backBtnTheme = + appTheme === 'dark' ? 'transparent-on-dark' : 'transparent-on-light'; return ( { > affirmation illustration -
+

{t(affirmationData.titleText)}

{t(affirmationData.description)}

+ {AppUrl.FinalizePreview === currentStep && ( +
diff --git a/products/statement-generator/src/contexts/AffirmationContext.tsx b/products/statement-generator/src/contexts/AffirmationContext.tsx index 1a98f913..ec1d322a 100644 --- 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 index 05d9ef49..498ce30e 100644 --- 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 ( @@ -90,7 +91,16 @@ function FinalizeStep() { 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" /> diff --git a/products/statement-generator/src/styles/utilityStyles.ts b/products/statement-generator/src/styles/utilityStyles.ts index 70f6b630..7612489f 100644 --- a/products/statement-generator/src/styles/utilityStyles.ts +++ b/products/statement-generator/src/styles/utilityStyles.ts @@ -84,6 +84,10 @@ const useUtilityStyles = makeStyles( justifyRight: { justifyContent: 'flex-end', }, + spaceBetween: { + justifyContent: 'space-between', + }, + flexGrow: { flex: '1 1 auto', },