Implement new confirmation page on form 21P-0847 (#33658)

src/applications/simple-forms/21P-0847/containers/ConfirmationPage.jsx

@@ -1,14 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect, useSelector } from 'react-redux';
-
-import { ConfirmationPageView } from '../../shared/components/ConfirmationPageView';
-
-const content = {
-  headlineText: 'You’ve submitted your request to be a substitute claimant',
-  nextStepsText:
-    'We’ll mail you a letter to tell you our decision on your request.',
-};
+import { ConfirmationView } from 'platform/forms-system/src/js/components/ConfirmationView';
 
 const childContent = (
   <>
@@ -65,42 +58,52 @@ const childContent = (
   </>
 );
 
-export const ConfirmationPage = () => {
+export const ConfirmationPage = props => {
   const form = useSelector(state => state.form || {});
-  const { submission, data } = form;
-  const fullName = data.preparerName;
+  const { submission } = form;
   const submitDate = submission.timestamp;
   const confirmationNumber = submission.response?.confirmationNumber;
 
   return (
-    <ConfirmationPageView
-      submitterName={fullName}
-      submitterHeader="Who submitted this form"
-      formType="submission"
+    <ConfirmationView
+      formConfig={props.route?.formConfig}
       submitDate={submitDate}
       confirmationNumber={confirmationNumber}
-      content={content}
-      childContent={childContent}
-    />
+      pdfUrl={submission.response?.pdfUrl}
+      devOnly={{
+        showButtons: true,
+      }}
+    >
+      <ConfirmationView.SubmissionAlert />
+      <ConfirmationView.SavePdfDownload />
+      <ConfirmationView.ChapterSectionCollection />
+      <ConfirmationView.PrintThisPage />
+      <ConfirmationView.WhatsNextProcessList />
+      {childContent}
+      <ConfirmationView.HowToContact />
+      <ConfirmationView.GoBackLink />
+      <ConfirmationView.NeedHelp />
+    </ConfirmationView>
   );
 };
 
 ConfirmationPage.propTypes = {
   form: PropTypes.shape({
-    data: PropTypes.shape({
-      fullName: {
-        first: PropTypes.string,
-        middle: PropTypes.string,
-        last: PropTypes.string,
-        suffix: PropTypes.string,
-      },
-    }),
+    data: PropTypes.object,
     formId: PropTypes.string,
     submission: PropTypes.shape({
+      response: PropTypes.shape({
+        attributes: PropTypes.shape({
+          confirmationNumber: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
       timestamp: PropTypes.string,
     }),
   }),
   name: PropTypes.string,
+  route: PropTypes.shape({
+    formConfig: PropTypes.object,
+  }),
 };
 
 function mapStateToProps(state) {

src/applications/simple-forms/21P-0847/tests/containers/ConfirmationPage.unit.spec.jsx

@@ -1,45 +1,105 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import { render } from '@testing-library/react';
-import configureStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
+
 import { expect } from 'chai';
+import { mount } from 'enzyme';
+import { createStore } from 'redux';
+import configureMockStore from 'redux-mock-store';
+import { Provider } from 'react-redux';
+import { cleanup } from '@testing-library/react';
+import { format } from 'date-fns';
+import { createInitialState } from '@department-of-veterans-affairs/platform-forms-system/state/helpers';
 import formConfig from '../../config/form';
 import ConfirmationPage from '../../containers/ConfirmationPage';
+import testData from '../e2e/fixtures/data/maximal-test.json';
 
-const storeBase = {
-  form: {
-    formId: formConfig.formId,
-    submission: {
-      response: {
-        confirmationNumber: '123456',
+describe('ConfirmationPage', () => {
+  let wrapper;
+  let store;
+  const mockStore = configureMockStore();
+  const initialState = {
+    form: {
+      data: {
+        ...createInitialState(formConfig),
+        ...testData.data,
       },
-      timestamp: Date.now(),
-    },
-    data: {
-      preparerName: {
-        first: 'Jack',
-        middle: 'W',
-        last: 'Witness',
+      submission: {
+        response: {
+          confirmationNumber: '1234567890',
+        },
+        timestamp: '2022-01-01T00:00:00Z',
       },
     },
-  },
-};
+  };
 
-describe('Confirmation page', () => {
-  const middleware = [thunk];
-  const mockStore = configureStore(middleware);
+  beforeEach(() => {
+    store = mockStore(initialState);
+    wrapper = mount(
+      <Provider store={store}>
+        <ConfirmationPage route={{ formConfig }} />
+      </Provider>,
+    );
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.unmount();
+    }
+    cleanup();
+  });
 
-  it('it should show status success and the correct name of person', () => {
-    const { container, getByText } = render(
-      <Provider store={mockStore(storeBase)}>
-        <ConfirmationPage />
+  it('passes the correct props to ConfirmationPageView', () => {
+    const confirmationViewProps = wrapper.find('ConfirmationView').props();
+
+    expect(confirmationViewProps.submitDate).to.equal('2022-01-01T00:00:00Z');
+    expect(confirmationViewProps.confirmationNumber).to.equal('1234567890');
+  });
+
+  it('should select form from state when state.form is defined', () => {
+    const submitDate = new Date();
+    const mockInitialState = {
+      form: {
+        submission: {
+          timestamp: submitDate,
+          response: { confirmationNumber: '1234' },
+        },
+        data: {
+          ...createInitialState(formConfig),
+          ...testData.data,
+        },
+      },
+    };
+    const mockDefinedState = createStore(() => mockInitialState);
+
+    const definedWrapper = mount(
+      <Provider store={mockDefinedState}>
+        <ConfirmationPage route={{ formConfig }} />
       </Provider>,
     );
-    expect(container.querySelector('va-alert')).to.have.attr(
-      'status',
-      'success',
+
+    expect(definedWrapper.text()).to.include(
+      format(submitDate, 'MMMM d, yyyy'),
     );
-    getByText(/Jack W Witness/);
+    expect(definedWrapper.text()).to.include('1234');
+
+    definedWrapper.unmount();
+  });
+
+  it('should throw error when state.form is undefined', () => {
+    const mockEmptyState = {};
+    const mockEmptyStore = createStore(() => mockEmptyState);
+
+    let errorWrapper;
+
+    expect(() => {
+      errorWrapper = mount(
+        <Provider store={mockEmptyStore}>
+          <ConfirmationPage route={{ formConfig }} />
+        </Provider>,
+      );
+    }).to.throw();
+
+    if (errorWrapper) {
+      errorWrapper.unmount();
+    }
   });
 });