Merge branch 'release-1.0.0' of https://github.com/bcgov/itvr into re…

…lease-1.0.0

frontend/.storybook/preview.js

@@ -2,6 +2,7 @@ import { ReactKeycloakProvider } from '@react-keycloak/web';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import keycloak from '../src/keycloak';
 import '../src/styles/index.scss';
+import { BrowserRouter } from 'react-router-dom';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -25,5 +26,10 @@ export const decorators = [
     <QueryClientProvider client={queryClient}>
       <Story />
     </QueryClientProvider>
+  ),
+  (Story) => (
+    <BrowserRouter>
+      <Story />
+    </BrowserRouter>
   )
 ];

frontend/src/components/ApplicationSummary.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useQuery } from 'react-query';
+import useAxios from '../utils/axiosHook';
+import Box from '@mui/material/Box';
+import DetailsTable from './DetailsTable';
+
+const ApplicationSummary = (props) => {
+  const { id } = props;
+  const axiosInstance = useAxios();
+  const queryFn = () =>
+    axiosInstance.current
+      .get(`/api/application-form/${id}`)
+      .then((response) => response.data);
+
+  const { data, isLoading, isError, error } = useQuery(
+    ['application', id],
+    queryFn
+  );
+
+  if (isLoading) {
+    <p>Loading...</p>;
+  }
+  if (isError) {
+    <p>{error.message}</p>;
+  }
+
+  return (
+    <Box>
+      <h3>Individual Application Confirmation</h3>
+      <p>
+        Print this page for your records. You will also receive an email
+        confirmation at {data.email}
+      </p>
+      <DetailsTable data={data} />
+    </Box>
+  );
+};
+export default ApplicationSummary;

frontend/src/components/DetailsTable.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+
+function createData(name, answer) {
+  return { name, answer };
+}
+
+const DetailsTable = ({ data }) => {
+  const rows = [
+    createData('Application ID:', data.id),
+    createData('Last name / surname:', data.last_name),
+    createData('First name / given name:', data.first_name),
+    createData('Middle name(s):', data.middle_names),
+    createData('Email address:', data.email),
+    createData('Date of birth:', data.date_of_birth),
+    createData('Street address:', data.address),
+    createData('City:', data.city),
+    createData('Postal Code:', data.postal_code),
+    createData('Social Insurance Number (SIN):', data.sin),
+    createData("B.C. Driver's Licence number:", data.drivers_licence),
+    createData('Tax Year:', data.tax_year),
+    createData(
+      'Consent to Disclosure and Storage of, and Access to, Personal Information:',
+      data.consentpersonal
+    ),
+    createData(
+      'Consent to Disclosure of Information from Income Tax Records:',
+      data.consenttax
+    )
+  ];
+  return (
+    <TableContainer component={Paper} sx={{ boxShadow: 0 }}>
+      <Table sx={{ minWidth: 650, border: 0 }} aria-label="simple table">
+        <TableBody>
+          {rows.map((row) => (
+            <TableRow key={row.name} sx={{ border: 0 }}>
+              <TableCell
+                component="th"
+                scope="row"
+                sx={{ border: 0, width: '25%' }}
+              >
+                <b>{row.name}</b>
+              </TableCell>
+              <TableCell
+                align="left"
+                sx={{ border: 0 }}
+                className="application-details-table-answer"
+                style={{ verticalAlign: 'top' }}
+              >
+                {row.answer}
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+export default DetailsTable;

frontend/src/components/Form.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormProvider, useForm, Controller } from 'react-hook-form';
-import { useMutation } from 'react-query';
+import { useNavigate } from 'react-router-dom';
+import { useMutation, useQueryClient } from 'react-query';
 import FormGroup from '@mui/material/FormGroup';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
@@ -37,13 +38,14 @@ export const defaultValues = {
 };
 
 const Form = () => {
+  const queryClient = useQueryClient();
   const methods = useForm({
     defaultValues
   });
   const { control, handleSubmit, register, watch } = methods;
   const axiosInstance = useAxios();
+  const navigate = useNavigate();
   const mutation = useMutation((data) => {
-    console.log(data);
     const formData = new FormData();
     for (const [key, value] of Object.entries(data)) {
       if (key === 'documents') {
@@ -61,8 +63,9 @@ const Form = () => {
   const onSubmit = (data) =>
     mutation.mutate(data, {
       onSuccess: (data, variables, context) => {
-        console.log('success!');
-        console.log(data.data);
+        const id = data.data.id;
+        queryClient.setQueryData(['application', id], data.data);
+        navigate(`/details/${id}`);
       }
     });
 

frontend/src/pages/ApplicationDetails.js → frontend/src/pages/ApplicationSummary.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import Layout from '../components/Layout';
-import ApplicationFormDetails from '../components/ApplicationFormDetails';
+import ApplicationSummary from '../components/ApplicationSummary';
 import { useParams } from 'react-router-dom';
 
-const ApplicationDetailsPage = () => {
+const ApplicationSummaryPage = () => {
   const { id } = useParams();
   return (
     <div>
       <Layout>
-        <ApplicationFormDetails id={id} />
+        <ApplicationSummary id={id} />
       </Layout>
     </div>
   );
 };
 
-export default ApplicationDetailsPage;
+export default ApplicationSummaryPage;

frontend/src/routes/index.js

@@ -5,7 +5,7 @@ import { useKeycloak } from '@react-keycloak/web';
 import HomePage from '../pages';
 import FormPage from '../pages/Form';
 import AdminPage from '../pages/admin';
-import ApplicationDetailsPage from '../pages/ApplicationDetails';
+import ApplicationSummaryPage from '../pages/ApplicationSummary';
 
 const RequireAuth = ({ children, redirectTo }) => {
   const { keycloak } = useKeycloak();
@@ -36,7 +36,7 @@ const AppRouter = () => (
         path="/details/:id"
         element={
           <RequireAuth redirectTo="/">
-            <ApplicationDetailsPage />
+            <ApplicationSummaryPage />
           </RequireAuth>
         }
       />

frontend/src/stories/DetailsTable.stories.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import DetailsTable from '../components/DetailsTable';
+
+export default {
+  title: 'ITVR/DetailsTable',
+  component: DetailsTable
+};
+
+const Template = (args) => <DetailsTable {...args} />;
+export const Default = Template.bind({});
+Default.args = {
+  data: {
+    id: '948b5f3d-f347-4d07-a46c-7907c3874d2f',
+    create_timestamp: '2022-04-05T18:53:53.647558Z',
+    create_user: 'SYSTEM',
+    update_timestamp: '2022-04-05T18:53:53.647608Z',
+    update_user: null,
+    sin: '234234234',
+    last_name: 'Aro',
+    first_name: 'Naomi',
+    middle_names: '',
+    email: '[email protected]',
+    address: '345 Fake St',
+    city: 'Victoria',
+    postal_code: 'V8P2N5',
+    drivers_licence: '1234567',
+    date_of_birth: '2022-04-15',
+    tax_year: 2021,
+    doc1: 'http://minio:9000/itvr/docs/275764713_370797044908674_1617869606850339037_n_5j2r2mn.jpg',
+    doc2: 'http://minio:9000/itvr/docs/275637215_462674682262245_3325277982481944110_n_kEk97ON.jpg',
+    verified: false
+  }
+};