SelectQuoteLabs · 20BBrown14 · Jan 21, 2022 · Jan 20, 2022
diff --git a/src/components/SQFormGuidedWorkflow/AdditionalInformationSection.js b/src/components/SQFormGuidedWorkflow/AdditionalInformationSection.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import {Section, SectionBody} from 'scplus-shared-components';
+import {AdditionalInformationPropTypes} from './PropTypes';
+import Header from './Header';
+
+function AdditionalInformationSection({
+  actionButton,
+  title,
+  infoText,
+  warningText,
+  errorText,
+  successText,
+  isFailedState,
+  Elements,
+}) {
+  return (
+    <Section>
+      <Header
+        actionButton={actionButton}
+        title={title}
+        infoText={infoText}
+        warningText={warningText}
+        errorText={errorText}
+        successText={successText}
+        isFailedState={isFailedState}
+      />
+      <SectionBody>{Elements}</SectionBody>
+    </Section>
+  );
+}
+
+AdditionalInformationSection.propTypes = AdditionalInformationPropTypes;
+
+export default AdditionalInformationSection;
diff --git a/src/components/SQFormGuidedWorkflow/PropTypes.js b/src/components/SQFormGuidedWorkflow/PropTypes.js
@@ -24,6 +24,14 @@ export const HeaderPropTypes = {
   isFailedState: PropTypes.bool,
 };
 
+export const AdditionalInformationPropTypes = {
+  Elements: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]).isRequired,
+  ...HeaderPropTypes,
+};
+
 export const AgentScriptPropTypes = {
   /** Scripted Text for the user to read */
   text: PropTypes.string.isRequired,
@@ -83,6 +91,10 @@ export const TaskModuleProps = {
   isSubmitButtonDisabled: PropTypes.bool,
   /** The props used to configure SQForm */
   formikProps: PropTypes.shape(FormikProps).isRequired,
+  /** The props used to configure the Additional Information section */
+  additionalInformationSectionProps: PropTypes.shape(
+    AdditionalInformationPropTypes
+  ),
   /** The props used to configure the Scripted Text section */
   scriptedTextProps: PropTypes.shape(AgentScriptPropTypes).isRequired,
   /** The props used to configure the Outcome form section */

diff --git a/src/components/SQFormGuidedWorkflow/SQFormGuidedWorkflow.js b/src/components/SQFormGuidedWorkflow/SQFormGuidedWorkflow.js
@@ -12,6 +12,7 @@ import {
 import SQFormButton from '../SQForm/SQFormButton';
 import AgentScript from './AgentScript';
 import OutcomeForm from './OutcomeForm';
+import AdditionalInformationSection from './AdditionalInformationSection';
 import {useManageTaskModules} from './useManageTaskModules';
 import {useGuidedWorkflowContext} from './useGuidedWorkflowContext';
 import {GuidedWorkflowProps} from './PropTypes';
@@ -138,6 +139,12 @@ function SQFormGuidedWorkflow({
                   </div>
                 ) : (
                   <>
+                    {taskModule.additionalInformationSectionProps && (
+                      <AdditionalInformationSection
+                        {...taskModule.additionalInformationSectionProps}
+                        isFailedState={taskModule.isFailedState}
+                      />
+                    )}
                     <AgentScript
                       {...taskModule.scriptedTextProps}
                       isFailedState={taskModule.isFailedState}

diff --git a/stories/SQFormGuidedWorkflow.stories.js b/stories/SQFormGuidedWorkflow.stories.js
@@ -4,31 +4,32 @@ import {
   ExpandingCardList,
   ExpandingCard,
   RoundedButton,
-  TextButton
+  TextButton,
 } from 'scplus-shared-components';
 import {
   SQFormGuidedWorkflow,
   SQFormDropdown,
   SQFormTextarea,
-  SQFormTextField
+  SQFormTextField,
 } from '../src';
+import {Grid, Typography} from '@material-ui/core';
 
-const sleep = milliseconds => {
-  return new Promise(resolve => setTimeout(resolve, milliseconds));
+const sleep = (milliseconds) => {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds));
 };
 
 export default {
   title: 'Forms/SQFormGuidedWorkflow',
   component: SQFormGuidedWorkflow,
   argTypes: {
     onError: {action: 'error', table: {disable: true}},
-    taskModules: {table: {disable: true}}
-  }
+    taskModules: {table: {disable: true}},
+  },
 };
 
 const outcomeDropdownOptions = [
   {label: 'Not Interested', value: 'not-interested'},
-  {label: 'Interested', value: 'interested'}
+  {label: 'Interested', value: 'interested'},
 ];
 
 const Template = () => {
@@ -37,7 +38,7 @@ const Template = () => {
   const scriptedTextMap = {
     customerName: 'Bob Smith',
     agentName: 'Jane Doe',
-    planName: 'Super Cheap Med+'
+    planName: 'Super Cheap Med+',
   };
   const taskModules = [
     {
@@ -46,7 +47,7 @@ const Template = () => {
       formikProps: {
         initialValues: {
           outcome: '',
-          notes: ''
+          notes: '',
         },
         onSubmit: async (values, _formikBag, _context) => {
           await sleep(3000); // Simulate API call to see loading spinner
@@ -58,12 +59,33 @@ const Template = () => {
         },
         validationSchema: {
           outcome: Yup.string().required(),
-          notes: Yup.string()
-        }
+          notes: Yup.string(),
+        },
+      },
+      additionalInformationSectionProps: {
+        Elements: (
+          <>
+            <Grid container={true}>
+              <Grid item={true} sm={4}>
+                <Typography variant="body2">Name: Bob Smith</Typography>
+              </Grid>
+              <Grid item={true} sm={4}>
+                <Typography variant="body2">Age: 76</Typography>
+              </Grid>
+              <Grid item={true} sm={4}>
+                <Typography variant="body2">
+                  Occupation: Dream Engineer
+                </Typography>
+              </Grid>
+            </Grid>
+          </>
+        ),
+        title: 'Customer Information',
+        infoText: 'This is suplmental information for the agent only.',
       },
       scriptedTextProps: {
         text: `Hi, ${scriptedTextMap.customerName}, my name is ${scriptedTextMap.agentName}, and I am calling to discuss ${scriptedTextMap.planName}.\n Are you available right now to talk through some things with me, today?`,
-        title: 'Agent Script'
+        title: 'Agent Script',
       },
       outcomeProps: {
         FormElements: (
@@ -74,8 +96,8 @@ const Template = () => {
             <SQFormTextarea name="notes" label="Notes" />
           </>
         ),
-        title: 'Confirm Info'
-      }
+        title: 'Confirm Info',
+      },
     },
     {
       name: 'cancellation',
@@ -88,18 +110,18 @@ const Template = () => {
       formikProps: {
         initialValues: {
           outcome: '',
-          notes: ''
+          notes: '',
         },
         onSubmit: async (_values, _formikBag, _context) => {},
         validationSchema: {
           outcome: Yup.string().required(),
-          notes: Yup.string()
-        }
+          notes: Yup.string(),
+        },
       },
       scriptedTextProps: {
         text: `Stuff about policy cancellation documents`,
         title: 'Agent Script',
-        actionButton: <TextButton tooltip="View">View Doc</TextButton>
+        actionButton: <TextButton tooltip="View">View Doc</TextButton>,
       },
       outcomeProps: {
         FormElements: (
@@ -121,8 +143,8 @@ const Template = () => {
           'Interact with the form to see me change colors based on form state',
         warningText: 'Form needs your attention',
         successText: 'Form is ready to submit',
-        errorText: 'Do not pass go, do not collect $200'
-      }
+        errorText: 'Do not pass go, do not collect $200',
+      },
     },
     {
       name: 'providers',
@@ -132,19 +154,55 @@ const Template = () => {
       formikProps: {
         initialValues: {
           outcome: '',
-          notes: ''
+          notes: '',
         },
         onSubmit: async (_values, _formikBag, _context) => {},
         validationSchema: {
           outcome: Yup.string().required(),
-          notes: Yup.string()
-        }
+          notes: Yup.string(),
+        },
+      },
+      additionalInformationSectionProps: {
+        Elements: (
+          <>
+            <ul>
+              <li>
+                <div>
+                  <b>Name</b>: Dr. Cassidy Cole,&nbsp;
+                  <b>State</b>: Alaska,&nbsp;
+                  <b>Primary</b>: Yes,&nbsp;
+                </div>
+              </li>
+              <li>
+                <div>
+                  <b>Name</b>: Dr. Ana Amari,&nbsp;
+                  <b>State</b>: Hawaii,&nbsp;
+                  <b>Primary</b>: No,&nbsp;
+                </div>
+              </li>
+              <li>
+                <div>
+                  <b>Name</b>: Dr. Hana Song,&nbsp;
+                  <b>State</b>: Wisconsin,&nbsp;
+                  <b>Primary</b>: No,&nbsp;
+                </div>
+              </li>
+            </ul>
+          </>
+        ),
+        title: 'Providers',
+        actionButton: (
+          <TextButton
+            tooltip="View"
+            onClick={() => window.alert('Awesome list here')}
+          >
+            View Full Providers List
+          </TextButton>
+        ),
       },
       scriptedTextProps: {
-        text:
-          'Before proceeding, please verify the list of providers is correct',
+        text: 'Before proceeding, please verify the list of providers is correct',
         title: 'Agent Script',
-        actionButton: <TextButton tooltip="View">View Providers</TextButton>
       },
       outcomeProps: {
         FormElements: (
@@ -155,9 +213,9 @@ const Template = () => {
             <SQFormTextarea name="notes" label="Notes" />
           </>
         ),
-        title: 'Confirm Info'
-      }
-    }
+        title: 'Confirm Info',
+      },
+    },
   ];
 
   return (
@@ -170,7 +228,7 @@ const Template = () => {
             initialCompletedTasks={0}
             isStrictMode={false}
             taskModules={taskModules}
-            onError={error => {
+            onError={(error) => {
               window.alert(error);
             }}
           />
@@ -182,7 +240,7 @@ const Template = () => {
 
 export const Default = Template.bind({});
 
-const TestTemplate = args => {
+const TestTemplate = (args) => {
   const {mainTitle, ...rest} = args;
 
   const taskModules = [
@@ -192,17 +250,17 @@ const TestTemplate = args => {
       formikProps: {
         initialValues: {
           firstText: '',
-          secondText: ''
+          secondText: '',
         },
-        onSubmit: async _values => {},
+        onSubmit: async (_values) => {},
         validationSchema: {
           firstText: Yup.string().required(),
-          secondText: Yup.string()
-        }
+          secondText: Yup.string(),
+        },
       },
       scriptedTextProps: {
         text: 'This is some text',
-        title: 'Script Title'
+        title: 'Script Title',
       },
       outcomeProps: {
         FormElements: (
@@ -211,8 +269,8 @@ const TestTemplate = args => {
             <SQFormTextField name="secondText" label="Second Text" />
           </>
         ),
-        title: 'Outcome Test'
-      }
+        title: 'Outcome Test',
+      },
     },
     {
       name: 'secondSection',
@@ -221,13 +279,13 @@ const TestTemplate = args => {
         initialValues: {
           testText: '',
           outcome: '',
-          notes: ''
+          notes: '',
         },
-        onSubmit: async _values => {}
+        onSubmit: async (_values) => {},
       },
       scriptedTextProps: {
         text: 'This is some more text',
-        title: 'Another Script Title'
+        title: 'Another Script Title',
       },
       outcomeProps: {
         FormElements: (
@@ -236,9 +294,9 @@ const TestTemplate = args => {
             <SQFormTextarea name="notes" label="Notes" />
           </>
         ),
-        title: 'Outcome Test'
-      }
-    }
+        title: 'Outcome Test',
+      },
+    },
   ];
 
   return (
@@ -248,7 +306,7 @@ const TestTemplate = args => {
           <SQFormGuidedWorkflow
             {...rest}
             mainTitle={mainTitle}
-            onError={error => {
+            onError={(error) => {
               window.alert(error);
             }}
             taskModules={taskModules}
@@ -264,5 +322,5 @@ Testing.args = {
   mainTitle: 'CCA Guided Workflow',
   mainSubtitle:
     'Please review these Services with your client, then confirm their responses.',
-  isStrictMode: false
+  isStrictMode: false,
 };