Async contact info collect for reviewer

src/api/apiClient.ts

@@ -2,7 +2,13 @@ import { Auth } from 'aws-amplify';
 import axios, { AxiosInstance } from 'axios';
 import { Letter } from './dtos/letter';
 import Role from './dtos/role';
-import { Response, Survey, SurveyData, surveysSchema } from './dtos/survey-assignment.dto';
+import {
+  Response,
+  Reviewer,
+  Survey,
+  SurveyData,
+  surveysSchema,
+} from './dtos/survey-assignment.dto';
 import User from './dtos/user.dto';
 
 const defaultBaseUrl = process.env.REACT_APP_API_BASE_URL ?? 'http://localhost:5000';
@@ -96,6 +102,11 @@ export class ApiClient {
       responses,
     }) as Promise<Letter>;
   }
+
+  public async updateReviewer(reviewer: Reviewer): Promise<Reviewer> {
+    const { secondaryEmail, phone, reviewerUuid } = reviewer;
+    return this.patch(`/reviewer/${reviewerUuid}`, { secondaryEmail, phone }) as Promise<Reviewer>;
+  }
 }
 
 export default new ApiClient();

src/api/dtos/survey-assignment.dto.ts

@@ -42,7 +42,11 @@ export interface Youth extends PersonInfo {
   assignmentUuid: string;
 }
 
-export type Reviewer = PersonInfo;
+export interface Reviewer extends PersonInfo {
+  reviewerUuid: string;
+  secondaryEmail: string;
+  phone: string;
+}
 
 interface PersonInfo {
   email: string;

src/components/survey/CollectContactPage.tsx

@@ -1,19 +1,26 @@
 import React from 'react';
 import { Box, Center, Text, VStack } from '@chakra-ui/react';
 import ContactInfoCollect from './ContactInfoCollect';
+import { Reviewer } from '../../api/dtos/survey-assignment.dto';
 
 interface CollectContactPageProps {
+  reviewer: Reviewer;
+  reviewerUuid: string | undefined;
   confirm: () => void;
 }
 
-const CollectContactPage: React.FC<CollectContactPageProps> = ({ confirm }) => (
+const CollectContactPage: React.FC<CollectContactPageProps> = ({
+  reviewer,
+  reviewerUuid,
+  confirm,
+}) => (
   <Center mt={20}>
     <VStack justify="center" height="full">
       <Box padding="4" W="md">
         <Text fontWeight={600} mb={6}>
           Please provide additional contact information if you desire
         </Text>
-        <ContactInfoCollect onSubmit={confirm} />
+        <ContactInfoCollect reviewer={reviewer} reviewerUuid={reviewerUuid} confirm={confirm} />
       </Box>
     </VStack>
   </Center>

src/components/survey/ContactInfoCollect.tsx

@@ -10,14 +10,18 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import React, { useState } from 'react';
+import apiClient from '../../api/apiClient';
+import { Reviewer } from '../../api/dtos/survey-assignment.dto';
 
 export interface ContactFormValues {
   email: string;
   phoneNumber: string;
 }
 
 interface ContactFormProps {
-  onSubmit: () => void;
+  reviewer: Reviewer;
+  reviewerUuid: string | undefined;
+  confirm: () => void;
 }
 
 const validateEmail = (value: string) => {
@@ -38,7 +42,7 @@ const validatePhoneNumber = (value: string) => {
   return error;
 };
 
-const ContactInfoCollect: React.FC<ContactFormProps> = ({ onSubmit }) => {
+const ContactInfoCollect: React.FC<ContactFormProps> = ({ reviewer, reviewerUuid, confirm }) => {
   const [email, setEmail] = useState('');
   const [phoneNumber, setPhoneNumber] = useState('');
   const toast = useToast();
@@ -69,8 +73,19 @@ const ContactInfoCollect: React.FC<ContactFormProps> = ({ onSubmit }) => {
       });
       return;
     }
-    // TODO: Send email and phone number to the backend
-    onSubmit();
+    if (reviewerUuid) {
+      const updateReviewer = {
+        email: reviewer.email,
+        firstName: reviewer.firstName,
+        lastName: reviewer.lastName,
+        reviewerUuid,
+        secondaryEmail: email,
+        phone: phoneNumber,
+      };
+      // TODO: Send email and phone number to the backend
+      await apiClient.updateReviewer(updateReviewer);
+      confirm();
+    }
   };
 
   // eslint-disable-next-line no-alert

src/components/survey/SurveyViewController.tsx

@@ -16,6 +16,7 @@ import CollectContactPage from './CollectContactPage';
 
 interface SurveyViewControllerProps extends SurveyData {
   completeAssignment: (assignmentUuid: string, responses: Response[]) => Promise<void>;
+  reviewerUuid: string | undefined;
 }
 
 /**
@@ -32,6 +33,7 @@ const SurveyViewController: React.FC<SurveyViewControllerProps> = ({
   completeAssignment,
   reviewer,
   questions,
+  reviewerUuid,
 }) => {
   // See state machine visualization in `stateMachine.ts` for the entire state machine flow.
   const [state, send] = useMachine(createSurveyViewMachine(treatmentYouth, controlYouth));
@@ -73,7 +75,11 @@ const SurveyViewController: React.FC<SurveyViewControllerProps> = ({
       )}
 
       {state.matches('provideContactInfo') && (
-        <CollectContactPage confirm={() => send('CONFIRM')} />
+        <CollectContactPage
+          reviewerUuid={reviewerUuid}
+          reviewer={reviewer}
+          confirm={() => send('CONFIRM')}
+        />
       )}
 
       {state.matches('confirmAssignments') && (

src/pages/survey/SurveyPage.tsx

@@ -39,6 +39,7 @@ const SurveyPage: React.FC = () => {
       {isLoading && <LoadingSpinner />}
       {data && (
         <SurveyViewController
+          reviewerUuid={reviewerUuid}
           reviewer={data.reviewer}
           questions={data.questions}
           treatmentYouth={data.treatmentYouth}