Add handlers to RiskQuestionForm

Author: rsispal

src/__SEED__/risk_questions.json

@@ -45,12 +45,7 @@
         ]
       },
       "warnings": [],
-      "validation": [
-        {
-          "required": true,
-          "message": "You must select an option"
-        }
-      ],
+      "validation": [],
       "next": [
         {
           "equals": "YES",

src/components/QuestionForm/formik-v2/types/index.ts

@@ -1,8 +1,4 @@
-import {
-  FunctionComponent,
-  HTMLAttributeAnchorTarget,
-  ReactElement,
-} from "react";
+import { FunctionComponent, HTMLAttributeAnchorTarget } from "react";
 import { Rule } from "async-validator";
 
 import { DynamicTextParagraph } from "../../../DynamicText/DynamicText.types";
@@ -96,10 +92,7 @@ export enum SupportedFormField {
 export type QuestionFormSubmission = Record<string, string | undefined>;
 
 export interface QuestionFormProps extends QuestionSchema {
-  fields: Record<
-    SupportedFormField,
-    FunctionComponent<QuestionFieldWrapperProps<any>>
-  >;
+  fields: Record<SupportedFormField, FunctionComponent<QuestionFieldWrapperProps<any>>>;
   questionFieldUI?: FunctionComponent<any>;
   initialValues?: QuestionFormSubmission;
   className?: string;
@@ -131,8 +124,9 @@ export type QuestionFieldManagerProps = {
 export type QuestionFieldProps = {
   fields: QuestionFormProps["fields"];
   question: Question<QuestionFieldProperties>;
-  previousQuestion: Question<QuestionFieldProperties> | undefined;
-  nextQuestion: Question<QuestionFieldProperties> | undefined;
+  questions: Question<QuestionFieldProperties>[];
+  previousQuestion: Question<QuestionFieldProperties> | undefined; // TODO: determine if this prop is necessary?
+  nextQuestion: Question<QuestionFieldProperties> | undefined; // TODO: determine if this prop is necessary?
   questionFieldUI: QuestionFormProps["questionFieldUI"];
   onSubmitFormCallback: () => void;
   onEndFormCallback: () => void;
@@ -173,9 +167,7 @@ export type NextQuestionButtonProperties = {
 };
 
 export type ButtonGroupProperties = {
-  buttons: Question<
-    LinkButtonProperties | NextQuestionButtonProperties | SubmitButtonProperties
-  >[];
+  buttons: Question<LinkButtonProperties | NextQuestionButtonProperties | SubmitButtonProperties>[];
 };
 
 export type PromptProperties = {

src/components/RiskQuestionForm/RiskQuestionForm.component.tsx

@@ -17,7 +17,7 @@ import SubmitButtonFieldWrapper from "../fields/v2/field-wrappers/SubmitButton";
 import SectionBlockFieldWrapper from "components/fields/v2/field-wrappers/SectionBlock";
 
 /* Types */
-import { QuestionFormProps } from "../QuestionForm/formik-v2/types";
+import { QuestionFormProps, QuestionFormSubmission } from "../QuestionForm/formik-v2/types";
 
 import { RiskQuestionFormProps } from "./RiskQuestionForm.types";
 
@@ -33,36 +33,39 @@ const fields: QuestionFormProps["fields"] = {
   SectionBlock: SectionBlockFieldWrapper,
 };
 
-const QuestionFieldUI: FC<{ children: ReactElement | ReactElement[] }> = ({
-  children,
-}) => (
-  <Box
-    bg="white"
-    borderWidth="1px"
-    borderRadius="lg"
-    boxShadow="xl"
-    padding={6}
-    margin={6}
-    width={800}
-  >
+const QuestionFieldUI: FC<{ children: ReactElement | ReactElement[] }> = ({ children }) => (
+  <Box bg="white" borderWidth="1px" borderRadius="lg" boxShadow="xl" padding={6} margin={6} width={800}>
     {children}
   </Box>
 );
 
-export const RiskQuestionForm: FC<RiskQuestionFormProps> = ({
-  initialValues,
-  schema,
-  onSubmitCallback,
-  onEndFormCallback,
-}) => {
+export const RiskQuestionForm: FC<RiskQuestionFormProps> = ({ initialValues, schema, onSubmitCallback, onEndFormCallback }) => {
+  const handleSubmit = (values: QuestionFormSubmission) => {
+    console.log("*** SUBMITTED ***", {
+      source: "ONLINE",
+      guided_question: schema.miscellaneous.guided_question,
+      answers: Object.entries(values).map(([k, v]: [string, string | undefined]) => ({ name: k, answer: v })),
+    });
+    onSubmitCallback({
+      source: "ONLINE",
+      guided_question: schema.miscellaneous.guided_question,
+      answers: Object.entries(values).map(([k, v]: [string, string | undefined]) => ({ name: k, answer: v })),
+    });
+  };
+
+  const handleEndForm = () => {
+    console.log("*** ENDED ***");
+    onEndFormCallback();
+  };
+
   return (
     <Flex flex={1} flexDir="column" alignItems="center">
       <QuestionForm
         fields={fields}
         questionFieldUI={QuestionFieldUI}
         initialValues={initialValues}
-        onSubmitCallback={console.log}
-        onEndFormCallback={console.log}
+        onSubmitCallback={handleSubmit}
+        onEndFormCallback={handleEndForm}
         {...schema}
         questions={schema.questions.map((q) => ({ ...q, ui: true }))}
       />

src/components/RiskQuestionForm/RiskQuestionForm.types.ts

@@ -9,7 +9,7 @@ export interface RiskQuestionFormProps {
   schema: RiskQuestionFormSchema;
   initialValues?: Record<string, string | undefined>;
   onSubmitCallback: (results: RiskQuestionFormPayload) => void;
-  onEndFormCallback: (results: Record<string, string | undefined>) => void;
+  onEndFormCallback: () => void;
 }
 
 export type RiskQuestionFormPayload = {