feat(tfi, poc): Provide Your Types of Financial Institutions - Skeleton; Point of Contact - Skeleton, Input Validation, Error Handling, Submission

ENV-GUIDE.md

@@ -10,6 +10,7 @@ SBL_OIDC_AUTHORITY="http://localhost:8880/realms/regtech"
 SBL_OIDC_CLIENT_ID="regtech-client"
 SBL_OIDC_REDIRECT_URI="http://localhost:${SBL_DEV_PORT}/filing"
 SBL_REGTECH_BASE_URL="http://localhost:8881"
+SBL_FILING_BASE_URL="http://localhost:8882"
 SBL_MAIL_BASE_URL="http://localhost:8765"
 ```
 

src/App.tsx

@@ -44,6 +44,10 @@ const PaperworkNotice = lazy(
   async () => import('pages/Filing/PaperworkNotice'),
 );
 const Summary = lazy(async () => import('pages/Summary/Summary'));
+const PointOfContact = lazy(async () => import('pages/PointOfContact'));
+const TypesFinancialInstitutions = lazy(
+  async () => import('pages/TypesFinancialInstitutions'),
+);
 
 // allow developers to toggle routing in development
 const isRoutingEnabled = getIsRoutingEnabled();
@@ -237,6 +241,22 @@ export default function App(): ReactElement {
                 </ProtectedRoute>
               }
             />
+            <Route
+              path='/point-of-contact'
+              element={
+                <ProtectedRoute {...ProtectedRouteAuthorizations}>
+                  <PointOfContact />
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path='/types-financial-institutions'
+              element={
+                <ProtectedRoute {...ProtectedRouteAuthorizations}>
+                  <TypesFinancialInstitutions />
+                </ProtectedRoute>
+              }
+            />
             <Route path='/privacy-act-notice' element={<PrivacyActNotice />} />
             <Route
               path='/paperwork-reduction-act-notice'

src/api/requests/submitPointOfContact.ts

@@ -0,0 +1,17 @@
+import { request } from 'api/axiosService';
+import type { SblAuthProperties } from 'api/useSblAuth';
+import type { FormattedPointOfContactShema } from 'types/formTypes';
+
+const submitPointOfContact = async (
+  auth: SblAuthProperties,
+  userProfileObject: FormattedPointOfContactShema,
+): Promise<null> => {
+  return request<null>({
+    url: `/v1/filing/institutions/{lei}/filings/{period_name}/contact-info`,
+    method: 'post',
+    body: userProfileObject,
+    headers: { Authorization: `Bearer ${auth.user?.access_token}` },
+  });
+};
+
+export default submitPointOfContact;

src/components/FieldGroup.tsx

@@ -6,7 +6,7 @@ interface FieldGroupProperties {
 
 function FieldGroup({ children }: FieldGroupProperties): JSX.Element {
   return (
-    <div className='field-group max-w-[48.125rem] !border !border-solid !border-cfpbBorderColor bg-[#F7F8F9] p-[1.875rem]'>
+    <div className='field-group box-border max-w-[48.125rem] !border !border-solid !border-cfpbBorderColor bg-[#F7F8F9] p-[1.875rem]'>
       {children}
     </div>
   );

src/components/FormMain.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+interface FormProperties {
+  children: ReactNode;
+}
+
+/**
+ *
+ * @returns FormParagraph
+ */
+function FormMain({
+  children,
+  className = '',
+}: FormProperties & React.ComponentPropsWithoutRef<'form'>): JSX.Element {
+  return <form className={`mb-[3.75rem] w-full ${className}`}>{children}</form>;
+}
+
+export default FormMain;

src/components/FormWrapper.tsx

@@ -1,10 +1,10 @@
 import type { ReactNode } from 'react';
 
-interface Properties {
+interface FormWrapperProperties {
   children: ReactNode;
 }
 
-function FormWrapper({ children }: Properties): JSX.Element {
+function FormWrapper({ children }: FormWrapperProperties): JSX.Element {
   return (
     <div className='ml-5 mr-5 mt-[2.813rem]'>
       <div className='mx-auto mb-12 max-w-[75rem]'>

src/components/InputEntry.tsx

@@ -4,8 +4,8 @@ import { forwardRef } from 'react';
 import { Element } from 'react-scroll';
 
 import InputErrorMessage from 'components/InputErrorMessage';
+import LabelOptional from 'components/LabelOptional';
 import { Heading, TextInput } from 'design-system-react';
-import LabelOptional from './LabelOptional';
 
 interface InputEntryProperties
   extends PropsWithoutRef<JSX.IntrinsicElements['input']> {
@@ -23,6 +23,7 @@ interface InputEntryProperties
 const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   (
     {
+      className = '',
       id,
       errorMessage,
       label,
@@ -38,7 +39,7 @@ const InputEntry = forwardRef<HTMLInputElement, InputEntryProperties>(
   ) => {
     const handleError = Boolean(showError && errorMessage);
     return (
-      <div className={`${isLast ? '' : 'mb-[0.9375rem]'}`}>
+      <div className={`${isLast ? '' : 'mb-[0.9375rem]'} ${className}`}>
         <Element name={id}>
           <label htmlFor={id}>
             <div>

src/pages/Filing/UpdateFinancialProfile/TypesFinancialInstitutionSection.tsx

@@ -0,0 +1,78 @@
+import FieldGroup from 'components/FieldGroup';
+import InputEntry from 'components/InputEntry';
+import { Checkbox, Heading, List, ListItem } from 'design-system-react';
+import type {
+  Control,
+  FieldErrors,
+  UseFormRegister,
+  UseFormSetValue,
+} from 'react-hook-form';
+import { Controller as FormController } from 'react-hook-form';
+import { Zero } from 'utils/constants';
+import type { CheckboxOption, UFPSchema } from './types';
+import { checkboxOptions } from './types';
+
+interface TypesFinancialInstitutionSectionProperties {
+  register: UseFormRegister<UFPSchema>;
+  setValue: UseFormSetValue<UFPSchema>;
+  formErrors: FieldErrors<UFPSchema>;
+  control: Control<UFPSchema>;
+}
+
+function TypesFinancialInstitutionSection({
+  register,
+  setValue,
+  formErrors,
+  control,
+}: TypesFinancialInstitutionSectionProperties): JSX.Element {
+  // const typeOtherData = data.sbl_institution_types.find(item => {
+  //   return item.sbl_type.id === sblInstitutionTypeMap.other;
+  // });
+  return (
+    <FieldGroup>
+      <Heading type='4'>Type(s) of financial institution</Heading>
+      <List isUnstyled>
+        {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
+          const optionId = `sbl_institution_types.${option.id}`;
+
+          const onCheckboxChange = (
+            event: React.ChangeEvent<HTMLInputElement>,
+          ): void => {
+            setValue(optionId, event.target.checked);
+          };
+
+          return (
+            <ListItem key={option.id}>
+              <FormController
+                render={({ field }) => {
+                  return (
+                    <Checkbox
+                      id={option.id}
+                      label={option.label}
+                      {...register(optionId)}
+                      checked={field.value}
+                      onChange={onCheckboxChange}
+                    />
+                  );
+                }}
+                control={control}
+                name={optionId}
+              />
+            </ListItem>
+          );
+        })}
+      </List>
+      <InputEntry
+        label=''
+        id='institutionTypeOther'
+        {...register('sbl_institution_types_other', {
+          // value: typeOtherData?.details,
+        })}
+        errorMessage={formErrors[Zero]}
+        showError
+      />
+    </FieldGroup>
+  );
+}
+
+export default TypesFinancialInstitutionSection;

src/pages/Filing/UpdateFinancialProfile/UpdateIdentifyingInformation.tsx

@@ -4,7 +4,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import CommonLinks from 'components/CommonLinks';
 import FieldGroup from 'components/FieldGroup';
+import FormMain from 'components/FormMain';
 import SectionIntro from 'components/SectionIntro';
+
 import {
   Checkbox,
   Heading,
@@ -107,9 +109,9 @@ function UpdateIdentifyingInformation({
         If you wish to provide additional types of financial institutions add
         them to “Other” and check the box.{' '}
       </Paragraph>
-      <form>
+      <FormMain>
         <FieldGroup>
-          <Heading type='4'>Type of financial institution</Heading>
+          <Heading type='4'>Types of financial institutions</Heading>
           <List isUnstyled>
             {checkboxOptions.map((option: CheckboxOption): JSX.Element => {
               const optionId = `sbl_institution_types.${option.id}`;
@@ -151,7 +153,7 @@ function UpdateIdentifyingInformation({
             showError
           />
         </FieldGroup>
-      </form>
+      </FormMain>
     </FormSectionWrapper>
   );
 }

src/pages/Filing/UpdateFinancialProfile/types.ts

@@ -118,32 +118,32 @@ export const ufpSchema = z.object({
   sbl_institution_types: z.object(checkboxOptionsZod),
 });
 
-// export type UFPSchema = z.infer<typeof ufpSchema>;
+export type UFPSchema = z.infer<typeof ufpSchema>;
 
-interface ExpectedObject {
-  sbl_institution_types?: Record<string, boolean>;
-  tax_id?: string;
-  hq_address_street_1?: string;
-  hq_address_street_2?: string;
-  hq_address_city?: string;
-  hq_address_state_code?: string;
-  hq_address_zip?: string;
-  parent_lei?: string;
-  parent_legal_name?: string;
-  parent_rssd_id?: string;
-  top_holder_lei?: string;
-  top_holder_legal_name?: string;
-  top_holder_rssd_id?: string;
-  lei?: string;
-  name?: string;
-  is_active?: boolean | string;
-  rssd_id?: string;
-  primary_federal_regulator_id?: string;
-  hmda_institution_type_id?: string;
-  hq_address_state?: string;
-  primary_federal_regulator?: string;
-  additional_details?: string;
-  domains?: string;
-}
+// interface ExpectedObject {
+//   sbl_institution_types?: Record<string, boolean>;
+//   tax_id?: string;
+//   hq_address_street_1?: string;
+//   hq_address_street_2?: string;
+//   hq_address_city?: string;
+//   hq_address_state_code?: string;
+//   hq_address_zip?: string;
+//   parent_lei?: string;
+//   parent_legal_name?: string;
+//   parent_rssd_id?: string;
+//   top_holder_lei?: string;
+//   top_holder_legal_name?: string;
+//   top_holder_rssd_id?: string;
+//   lei?: string;
+//   name?: string;
+//   is_active?: boolean | string;
+//   rssd_id?: string;
+//   primary_federal_regulator_id?: string;
+//   hmda_institution_type_id?: string;
+//   hq_address_state?: string;
+//   primary_federal_regulator?: string;
+//   additional_details?: string;
+//   domains?: string;
+// }
 
-export type UFPSchema = ExpectedObject;
+// export type UFPSchema = ExpectedObject;