From dc93b68ad7f878f1b2f760a919b3e2573096e825 Mon Sep 17 00:00:00 2001 From: Adam Whitlock <8332986+adamwhitlock1@users.noreply.github.com> Date: Mon, 28 Oct 2024 13:43:26 -0600 Subject: [PATCH 1/8] work with query params for return, add custom ContactInfoEditReroute component WIP --- .../pattern2/TaskOrange/config/form.js | 36 +++---------- .../pages/ContactInfoEditReroute.jsx | 54 +++++++++++++++++++ .../TaskOrange/pages/PersonalInformation.jsx | 22 ++++---- 3 files changed, 73 insertions(+), 39 deletions(-) create mode 100644 src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/ContactInfoEditReroute.jsx diff --git a/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/config/form.js b/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/config/form.js index 7f15e6cad4f1..65a22f3faa1c 100644 --- a/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/config/form.js +++ b/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/config/form.js @@ -36,6 +36,7 @@ import { } from '../pages/ApplicantInformation'; import ReviewPage from '../pages/ReviewPage'; import { EditNavigationWithRouter } from '../components/EditNavigation'; +import { ContactInfoEditReroute } from '../pages/ContactInfoEditReroute'; const { date, @@ -70,6 +71,9 @@ const formConfig = { noAuth: 'Please sign in again to resume your application for education benefits.', }, + dev: { + showNavLinks: true, + }, prefillEnabled: true, prefillTransformer, transformForSubmit: transform, @@ -173,7 +177,6 @@ const formConfig = { hideOnReview: true, // We're using the `ReveiwDescription`, so don't show this page forceDivWrapper: true, // It's all info and links, so we don't need a fieldset or legend }, - 'ui:reviewId': 'other-contact-information', 'ui:title': '', 'ui:description': '', 'ui:widget': props => { @@ -209,33 +212,16 @@ const formConfig = { }, contactInformation: merge({}, contactInformationPage(fullSchema1990)), contactInformationEdit: { - hideNavButtons: true, - title: 'Edit mailing address', + title: 'Edit contact information', taskListHide: true, - path: 'personal-information/edit-mailing-address', + path: 'personal-information/edit-veteran-address', + CustomPage: ContactInfoEditReroute, + CustomPageReview: null, uiSchema: { ...descriptionUI(PrefillAlert, { hideOnReview: true }), veteranAddress: addressFormDefinition.uiSchema( 'Edit mailing address', ), - 'view:editNavigation': { - 'ui:options': { - hideOnReview: true, // We're using the `ReveiwDescription`, so don't show this page - forceDivWrapper: true, // It's all info and links, so we don't need a fieldset or legend - }, - 'ui:reviewId': 'veteranAddress', - 'ui:title': '', - 'ui:description': '', - 'ui:widget': props => { - return ( - - ); - }, - }, }, schema: { type: 'object', @@ -245,15 +231,9 @@ const formConfig = { fullSchema1990, true, ), - 'view:editNavigation': { - type: 'string', - }, }, - required: ['email'], }, - scrollAndFocusTarget, depends: () => false, - review: null, }, }, }, diff --git a/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/ContactInfoEditReroute.jsx b/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/ContactInfoEditReroute.jsx new file mode 100644 index 000000000000..df1ed53aed7c --- /dev/null +++ b/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/ContactInfoEditReroute.jsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { SchemaForm, setData } from 'platform/forms-system/exportsFile'; +import { useDispatch } from 'react-redux'; +import { VaButton } from '@department-of-veterans-affairs/component-library/dist/react-bindings'; +import { withRouter } from 'react-router'; + +export const ContactInfoEditBase = props => { + const dispatch = useDispatch(); + + const { location } = props; + const fromReviewPage = location?.query?.review; + + const setFormData = data => { + dispatch(setData(data)); + }; + + const { schema, uiSchema, data, goBack, goToPath } = props; + const handlers = { + onInput: inputData => { + setFormData(inputData); + }, + onSubmit: () => { + if (fromReviewPage) { + goToPath( + '/2/task-orange/review-then-submit?updatedSection=veteranAddress&success=true', + ); + return; + } + goBack(); + }, + onCancel: () => { + goBack(); + }, + }; + return ( + + + + + ); +}; + +export const ContactInfoEditReroute = withRouter(ContactInfoEditBase); diff --git a/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/PersonalInformation.jsx b/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/PersonalInformation.jsx index 92c619d1dd41..1a6847ca2ce9 100644 --- a/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/PersonalInformation.jsx +++ b/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/pages/PersonalInformation.jsx @@ -35,20 +35,19 @@ export const PersonalInformationContact = ({ }) => { const config = useContext(PatternConfigContext); - const reviewId = location?.state?.reviewId; - const success = location?.state?.success; + const updatedSection = location?.query?.updatedSection; + const success = location?.query?.success; useEffect( () => { - if (reviewId) { + if (updatedSection) { setTimeout(() => { - waitForRenderThenFocus(`#${reviewId}`); - scrollToElement(reviewId); - window.history.replaceState({}, ''); + waitForRenderThenFocus(`#${updatedSection}`); + scrollToElement(updatedSection); }, 100); } }, - [reviewId], + [updatedSection], ); const { homePhone, mobilePhone, email } = data; @@ -79,12 +78,12 @@ export const PersonalInformationContact = ({ {success && - reviewId === 'veteranAddress' && ( + updatedSection === 'veteranAddress' && ( )} {success && - reviewId === 'other-contact-information' && ( + updatedSection === 'otherContactInformation' && ( )} From b660e0f91fa702860b61d8fe75fcaba971b31802 Mon Sep 17 00:00:00 2001 From: Adam Whitlock <8332986+adamwhitlock1@users.noreply.github.com> Date: Mon, 28 Oct 2024 20:13:37 -0600 Subject: [PATCH 2/8] add dev nav links, adjust intro heading levels, use location in contact info depends, --- .../TaskOrange/components/SaveInProgressInfo.jsx | 4 ++-- .../patterns/pattern2/TaskOrange/config/form.js | 4 ++-- .../TaskOrange/containers/IntroductionPage.jsx | 14 +++++++------- .../TaskOrange/pages/PersonalInformation.jsx | 11 +++++++---- .../pattern2/TaskOrange/pages/ReviewPage.jsx | 10 ++++++++-- .../TaskOrange/pages/contactInformation.js | 7 +++++++ 6 files changed, 33 insertions(+), 17 deletions(-) diff --git a/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/components/SaveInProgressInfo.jsx b/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/components/SaveInProgressInfo.jsx index 8428086dcecf..9959d115eb7c 100644 --- a/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/components/SaveInProgressInfo.jsx +++ b/src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/components/SaveInProgressInfo.jsx @@ -64,9 +64,9 @@ const SaveInProgressInfo = ({ formConfig, pageList }) => { data-testid="ezr-login-alert" uswds > -

+

Sign in now to save time and save your work in progress -

+

Here’s how signing in now helps you: