diff --git a/frontend/packages/vkt/public/i18n/fi-FI/public.json b/frontend/packages/vkt/public/i18n/fi-FI/public.json index e8cb368dc..5ea2f2570 100644 --- a/frontend/packages/vkt/public/i18n/fi-FI/public.json +++ b/frontend/packages/vkt/public/i18n/fi-FI/public.json @@ -321,6 +321,21 @@ } } }, + "confirmContactDetails": { + "buttons": { + "no": "Ei, muokkaa tietoja", + "yes": "Kyllä, jatka" + }, + "labels": { + "email": "Sähköpostiosoite:", + "firstName": "Etunimi:", + "lastName": "Sukunimi:", + "phoneNumber": "Puhelinnumero:" + }, + "information": "Jotta voit jatkaa aiemmin täyttämilläsi tiedoilla, vahvista, että olet alla oleva henkilö.", + "heading": "Vahvista yhteystietosi", + "prompt": "Oletko tämä henkilö?" + }, "fillContactDetails": { "heading": "Täytä yhteystietosi", "email": { diff --git a/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactControlButtons.tsx b/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactControlButtons.tsx index 803316a4b..5a8ca69fa 100644 --- a/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactControlButtons.tsx +++ b/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactControlButtons.tsx @@ -8,7 +8,7 @@ import { CustomButton, LoadingProgressIndicator } from 'shared/components'; import { APIResponseStatus, Color, Variant } from 'shared/enums'; import { useCommonTranslation, usePublicTranslation } from 'configs/i18n'; -import { useAppDispatch } from 'configs/redux'; +import { useAppDispatch, useAppSelector } from 'configs/redux'; import { AppRoutes } from 'enums/app'; import { PublicEnrollmentContactFormStep } from 'enums/publicEnrollment'; import { PublicEnrollmentContact } from 'interfaces/publicEnrollment'; @@ -16,6 +16,7 @@ import { loadPublicEnrollmentSave, resetPublicEnrollmentContact, } from 'redux/reducers/publicEnrollmentContact'; +import { publicEnrollmentContactSelector } from 'redux/selectors/publicEnrollmentContact'; import { RouteUtils } from 'utils/routes'; export const PublicEnrollmentContactControlButtons = ({ @@ -38,7 +39,9 @@ export const PublicEnrollmentContactControlButtons = ({ }); const translateCommon = useCommonTranslation(); const [isSubmitLoading, setIsSubmitLoading] = useState(false); - + const { contactDetailsNeedConfirmation } = useAppSelector( + publicEnrollmentContactSelector, + ); const dispatch = useAppDispatch(); const navigate = useNavigate(); @@ -143,18 +146,27 @@ export const PublicEnrollmentContactControlButtons = ({ ); - const renderBack = true; - const renderNext = - activeStep === PublicEnrollmentContactFormStep.FillContactDetails; - const renderSubmit = - activeStep === PublicEnrollmentContactFormStep.SelectExam; + if ( + activeStep === PublicEnrollmentContactFormStep.FillContactDetails && + contactDetailsNeedConfirmation + ) { + return ( +
{CancelButton()}
+ ); + } else { + const renderBack = true; + const renderNext = + activeStep === PublicEnrollmentContactFormStep.FillContactDetails; + const renderSubmit = + activeStep === PublicEnrollmentContactFormStep.SelectExam; - return ( -
- {CancelButton()} - {renderBack && BackButton()} - {renderNext && NextButton()} - {renderSubmit && SubmitButton()} -
- ); + return ( +
+ {CancelButton()} + {renderBack && BackButton()} + {renderNext && NextButton()} + {renderSubmit && SubmitButton()} +
+ ); + } }; diff --git a/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactDesktopGrid.tsx b/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactDesktopGrid.tsx index 6f25f5bfb..419a81e9a 100644 --- a/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactDesktopGrid.tsx +++ b/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactDesktopGrid.tsx @@ -34,11 +34,14 @@ export const PublicEnrollmentContactDesktopGrid = ({ }) => { const translateCommon = useCommonTranslation(); - const { enrollmentSubmitStatus } = useAppSelector( - publicEnrollmentContactSelector, - ); + const { enrollmentSubmitStatus, contactDetailsNeedConfirmation } = + useAppSelector(publicEnrollmentContactSelector); const showControlButtons = activeStep < PublicEnrollmentContactFormStep.Done; + const hideRequiredFieldsInfoText = + (activeStep === PublicEnrollmentContactFormStep.FillContactDetails && + contactDetailsNeedConfirmation) || + activeStep === PublicEnrollmentContactFormStep.Done; return ( <> @@ -52,7 +55,7 @@ export const PublicEnrollmentContactDesktopGrid = ({ - {activeStep !== PublicEnrollmentContactFormStep.Done && ( + {!hideRequiredFieldsInfoText && ( {translateCommon('requiredFieldsInfo')} diff --git a/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactStepContents.tsx b/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactStepContents.tsx index 42ef4f7f7..72252f745 100644 --- a/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactStepContents.tsx +++ b/frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactStepContents.tsx @@ -1,9 +1,12 @@ +import { ConfirmContactDetails } from 'components/publicEnrollmentContact/steps/ConfirmContactDetails'; import { Done } from 'components/publicEnrollmentContact/steps/Done'; import { FillContactDetails } from 'components/publicEnrollmentContact/steps/FillContactDetails'; import { SelectExam } from 'components/publicEnrollmentContact/steps/SelectExam'; +import { useAppSelector } from 'configs/redux'; import { PublicEnrollmentContactFormStep } from 'enums/publicEnrollment'; import { PublicEnrollmentContact } from 'interfaces/publicEnrollment'; import { updatePublicEnrollmentContact } from 'redux/reducers/publicEnrollmentContact'; +import { publicEnrollmentContactSelector } from 'redux/selectors/publicEnrollmentContact'; export const PublicEnrollmentContactStepContents = ({ activeStep, @@ -16,17 +19,26 @@ export const PublicEnrollmentContactStepContents = ({ setIsStepValid: (isValid: boolean) => void; showValidation: boolean; }) => { + const { contactDetailsNeedConfirmation } = useAppSelector( + publicEnrollmentContactSelector, + ); + switch (activeStep) { case PublicEnrollmentContactFormStep.FillContactDetails: - return ( - - ); + if (contactDetailsNeedConfirmation) { + return ; + } else { + return ( + + ); + } + case PublicEnrollmentContactFormStep.SelectExam: return ( { + const { t } = usePublicTranslation({ + keyPrefix: + 'vkt.component.publicEnrollmentContact.steps.confirmContactDetails', + }); + const dispatch = useAppDispatch(); + const onConfirm = () => { + dispatch(confirmContactDetails()); + }; + const onReject = () => { + dispatch(rejectPreviousContactDetails()); + }; + + return ( +
+

{t('heading')}

+ {t('information')} +
+ + {t('labels.firstName')} +
+ {enrollment.firstName} + + + {t('labels.lastName')} +
+ {enrollment.lastName} + + + {t('labels.email')} +
+ {enrollment.email} + + + {t('labels.phoneNumber')} +
+ {enrollment.phoneNumber} + +
+ + {t('prompt')} + +
+ + {t('buttons.no')} + + } + variant={Variant.Contained} + color={Color.Secondary} + onClick={onConfirm} + > + {t('buttons.yes')} + +
+
+ ); +}; diff --git a/frontend/packages/vkt/src/redux/persist/transforms/PublicEnrollmentContactTransform.ts b/frontend/packages/vkt/src/redux/persist/transforms/PublicEnrollmentContactTransform.ts index ec70c3cff..6e78b008e 100644 --- a/frontend/packages/vkt/src/redux/persist/transforms/PublicEnrollmentContactTransform.ts +++ b/frontend/packages/vkt/src/redux/persist/transforms/PublicEnrollmentContactTransform.ts @@ -9,15 +9,13 @@ type OutboundState = PublicEnrollmentContactState; export const PublicEnrollmentContactTransform = createTransform( // transform state on its way to being serialized and persisted: - // retain details provided by user (enrollment details) as well as important inferred details (contacted examiners), - // discard rest - ( - inboundState: PublicEnrollmentContactState, - ): Partial => { - return { - enrollment: inboundState.enrollment, - contactedExaminers: inboundState.contactedExaminers, - }; + // retain details relevant for user experience, discard others + ({ + enrollment, + contactedExaminers, + contactDetailsNeedConfirmation, + }: PublicEnrollmentContactState): Partial => { + return { enrollment, contactedExaminers, contactDetailsNeedConfirmation }; }, // transform state being rehydrated (outboundState: OutboundState) => { diff --git a/frontend/packages/vkt/src/redux/reducers/publicEnrollmentContact.ts b/frontend/packages/vkt/src/redux/reducers/publicEnrollmentContact.ts index 531b07c32..4cc088e4d 100644 --- a/frontend/packages/vkt/src/redux/reducers/publicEnrollmentContact.ts +++ b/frontend/packages/vkt/src/redux/reducers/publicEnrollmentContact.ts @@ -11,6 +11,7 @@ export interface PublicEnrollmentContactState { paymentLoadingStatus: APIResponseStatus; cancelStatus: APIResponseStatus; enrollment: PublicEnrollmentContact; + contactDetailsNeedConfirmation: boolean; examiner?: PublicExaminer; contactedExaminers: Array; } @@ -34,6 +35,7 @@ export const initialState: PublicEnrollmentContactState = { status: undefined, message: '', }, + contactDetailsNeedConfirmation: false, examiner: undefined, contactedExaminers: [], }; @@ -83,8 +85,17 @@ const publicEnrollmentContactSlice = createSlice({ ...initialState, contactedExaminers, enrollment: enrollmentDetails, + contactDetailsNeedConfirmation: true, }; }, + confirmContactDetails(state) { + state.contactDetailsNeedConfirmation = false; + }, + rejectPreviousContactDetails(state) { + state.contactDetailsNeedConfirmation = false; + state.contactedExaminers = initialState.contactedExaminers; + state.enrollment = initialState.enrollment; + }, resetPublicEnrollmentContact() { return initialState; }, @@ -104,4 +115,6 @@ export const { resetPublicEnrollmentContact, markExaminerAsContacted, continueWithEnrollmentDetails, + confirmContactDetails, + rejectPreviousContactDetails, } = publicEnrollmentContactSlice.actions;