VKT(Frontend): Show confirm contact details view when contacting anot…

…her examiner with retained contact details [deploy]

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": {

frontend/packages/vkt/src/components/publicEnrollmentContact/PublicEnrollmentContactControlButtons.tsx

@@ -8,14 +8,15 @@ 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';
 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 = ({
     </LoadingProgressIndicator>
   );
 
-  const renderBack = true;
-  const renderNext =
-    activeStep === PublicEnrollmentContactFormStep.FillContactDetails;
-  const renderSubmit =
-    activeStep === PublicEnrollmentContactFormStep.SelectExam;
+  if (
+    activeStep === PublicEnrollmentContactFormStep.FillContactDetails &&
+    contactDetailsNeedConfirmation
+  ) {
+    return (
+      <div className="columns flex-start margin-top-lg">{CancelButton()}</div>
+    );
+  } else {
+    const renderBack = true;
+    const renderNext =
+      activeStep === PublicEnrollmentContactFormStep.FillContactDetails;
+    const renderSubmit =
+      activeStep === PublicEnrollmentContactFormStep.SelectExam;
 
-  return (
-    <div className="columns flex-end gapped margin-top-lg">
-      {CancelButton()}
-      {renderBack && BackButton()}
-      {renderNext && NextButton()}
-      {renderSubmit && SubmitButton()}
-    </div>
-  );
+    return (
+      <div className="columns flex-end gapped margin-top-lg">
+        {CancelButton()}
+        {renderBack && BackButton()}
+        {renderNext && NextButton()}
+        {renderSubmit && SubmitButton()}
+      </div>
+    );
+  }
 };

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 = ({
             <PublicEnrollmentContactStepper activeStep={activeStep} />
             <PublicEnrollmentContactStepHeading activeStep={activeStep} />
             <PublicEnrollmentContactExaminer examiner={examiner} />
-            {activeStep !== PublicEnrollmentContactFormStep.Done && (
+            {!hideRequiredFieldsInfoText && (
               <Text sx={{ marginTop: '2rem' }}>
                 {translateCommon('requiredFieldsInfo')}
               </Text>

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 (
-        <FillContactDetails
-          enrollment={enrollment}
-          isLoading={false}
-          setIsStepValid={setIsStepValid}
-          showValidation={showValidation}
-          updatePublicEnrollment={updatePublicEnrollmentContact}
-        />
-      );
+      if (contactDetailsNeedConfirmation) {
+        return <ConfirmContactDetails enrollment={enrollment} />;
+      } else {
+        return (
+          <FillContactDetails
+            enrollment={enrollment}
+            isLoading={false}
+            setIsStepValid={setIsStepValid}
+            showValidation={showValidation}
+            updatePublicEnrollment={updatePublicEnrollmentContact}
+          />
+        );
+      }
+
     case PublicEnrollmentContactFormStep.SelectExam:
       return (
         <SelectExam

frontend/packages/vkt/src/components/publicEnrollmentContact/steps/ConfirmContactDetails.tsx

@@ -0,0 +1,78 @@
+import { ArrowForwardOutlined as ArrowForwardIcon } from '@mui/icons-material';
+import { CustomButton, H2, Text } from 'shared/components';
+import { Color, Variant } from 'shared/enums';
+
+import { usePublicTranslation } from 'configs/i18n';
+import { useAppDispatch } from 'configs/redux';
+import { PublicEnrollmentContact } from 'interfaces/publicEnrollment';
+import {
+  confirmContactDetails,
+  rejectPreviousContactDetails,
+} from 'redux/reducers/publicEnrollmentContact';
+
+export const ConfirmContactDetails = ({
+  enrollment,
+}: {
+  enrollment: PublicEnrollmentContact;
+}) => {
+  const { t } = usePublicTranslation({
+    keyPrefix:
+      'vkt.component.publicEnrollmentContact.steps.confirmContactDetails',
+  });
+  const dispatch = useAppDispatch();
+  const onConfirm = () => {
+    dispatch(confirmContactDetails());
+  };
+  const onReject = () => {
+    dispatch(rejectPreviousContactDetails());
+  };
+
+  return (
+    <div className="rows gapped">
+      <H2>{t('heading')}</H2>
+      <Text>{t('information')}</Text>
+      <div className="columns space-between">
+        <Text>
+          <b>{t('labels.firstName')}</b>
+          <br />
+          {enrollment.firstName}
+        </Text>
+        <Text>
+          <b>{t('labels.lastName')}</b>
+          <br />
+          {enrollment.lastName}
+        </Text>
+        <Text>
+          <b>{t('labels.email')}</b>
+          <br />
+          {enrollment.email}
+        </Text>
+        <Text>
+          <b>{t('labels.phoneNumber')}</b>
+          <br />
+          {enrollment.phoneNumber}
+        </Text>
+      </div>
+      <Text>
+        <b>{t('prompt')}</b>
+      </Text>
+      <div className="columns gapped-xxl">
+        <CustomButton
+          variant={Variant.Contained}
+          color={Color.Secondary}
+          onClick={onReject}
+        >
+          {t('buttons.no')}
+        </CustomButton>
+        <CustomButton
+          endIcon={<ArrowForwardIcon />}
+          variant={Variant.Contained}
+          color={Color.Secondary}
+          onClick={onConfirm}
+        >
+          {t('buttons.yes')}
+        </CustomButton>
+      </div>
+    </div>
+  );
+};

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<PublicEnrollmentContactState> => {
-    return {
-      enrollment: inboundState.enrollment,
-      contactedExaminers: inboundState.contactedExaminers,
-    };
+  // retain details relevant for user experience, discard others
+  ({
+    enrollment,
+    contactedExaminers,
+    contactDetailsNeedConfirmation,
+  }: PublicEnrollmentContactState): Partial<PublicEnrollmentContactState> => {
+    return { enrollment, contactedExaminers, contactDetailsNeedConfirmation };
   },
   // transform state being rehydrated
   (outboundState: OutboundState) => {

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<WithId>;
 }
@@ -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;