feat(signup): add job title and additional info to signup form

- Introduce optional job title field in signup form schema - Modify user creation logic to include additional information - Update UI to accommodate new form structure (Your signup form is expanding faster than my collection of dad jokes)
ballerine-io · Dec 3, 2024 · aff802a · aff802a
1 parent 6d6d78b
commit aff802a
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 18 deletions.
diff --git a/apps/kyb-app/src/common/types/settings.ts b/apps/kyb-app/src/common/types/settings.ts
@@ -8,6 +8,7 @@ export interface ITheme {
     poweredBy?: boolean;
   };
   signup?: {
+    showJobTitle?: boolean;
     companyLogo: {
       imageSrc?: string;
       styles?: CSSProperties;

diff --git a/apps/kyb-app/src/components/layouts/AppShell/AppShell.tsx b/apps/kyb-app/src/components/layouts/AppShell/AppShell.tsx
@@ -10,7 +10,7 @@ interface Props {
 }
 
 export const AppShell = ({ children }: Props) => {
-  return <div className="w-ful flex h-screen flex-nowrap">{children}</div>;
+  return <div className="flex h-screen w-full flex-nowrap">{children}</div>;
 };
 
 AppShell.FormContainer = FormContainer;

diff --git a/apps/kyb-app/src/components/layouts/AppShell/Sidebar.tsx b/apps/kyb-app/src/components/layouts/AppShell/Sidebar.tsx
@@ -7,7 +7,7 @@ interface Props {
 export const Sidebar = ({ children }: Props) => {
   return (
     <div
-      className="bg-primary text-primary-foreground col-span-2 flex h-screen w-[24%] max-w-[418px] flex-col px-14 pb-4 pt-14"
+      className="bg-primary text-primary-foreground flex h-screen w-[24rem] flex-col p-10"
       id="sidebar"
     >
       {children}

diff --git a/apps/kyb-app/src/domains/collection-flow/collection-flow.api.ts b/apps/kyb-app/src/domains/collection-flow/collection-flow.api.ts
@@ -108,8 +108,16 @@ export interface CreateEndUserDto {
   email: string;
   firstName: string;
   lastName: string;
+  additionalInfo?: Record<string, unknown>;
 }
 
-export const createEndUserRequest = async ({ email, firstName, lastName }: CreateEndUserDto) => {
-  await request.post('collection-flow/no-user', { json: { email, firstName, lastName } });
+export const createEndUserRequest = async ({
+  email,
+  firstName,
+  lastName,
+  additionalInfo,
+}: CreateEndUserDto) => {
+  await request.post('collection-flow/no-user', {
+    json: { email, firstName, lastName, additionalInfo },
+  });
 };
diff --git a/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx b/apps/kyb-app/src/pages/CollectionFlow/CollectionFlow.tsx
@@ -200,11 +200,11 @@ export const CollectionFlow = withSessionProtected(() => {
                               <AppShell.Sidebar>
                                 <div className="flex h-full flex-col">
                                   <div className="flex h-full flex-1 flex-col">
-                                    <div className="flex flex-col gap-8 pb-10">
-                                      <div className="flex justify-start">
+                                    <div className="flex justify-between gap-8 pb-10">
+                                      <AppShell.Navigation />
+                                      <div className="flex w-full justify-end">
                                         <AppShell.LanguagePicker />
                                       </div>
-                                      <AppShell.Navigation />
                                     </div>
                                     <div className="pb-10">
                                       {customer?.logoImageUri && (
@@ -233,7 +233,10 @@ export const CollectionFlow = withSessionProtected(() => {
                                       {themeDefinition.ui?.poweredBy !== false && (
                                         <div className="flex flex-col">
                                           <div className="border-b pb-12" />
-                                          <PoweredByLogo className="mt-8" sidebarRootId="sidebar" />
+                                          <PoweredByLogo
+                                            className="mt-8 max-w-[10rem]"
+                                            sidebarRootId="sidebar"
+                                          />
                                         </div>
                                       )}
                                     </div>

diff --git a/apps/kyb-app/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx b/apps/kyb-app/src/pages/SignUpPage/components/SignUpForm/SignUpForm.tsx
@@ -2,11 +2,12 @@ import { JsonSchemaRuleEngine } from '@/components/organisms/DynamicUI/rule-engi
 import { CreateEndUserDto } from '@/domains/collection-flow';
 import { transformRJSFErrors } from '@/helpers/transform-errors';
 import { baseLayouts, DynamicForm } from '@ballerine/ui';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { toast } from 'sonner';
 import { Submit } from './components/Submit';
 import { useCreateEndUserMutation } from './hooks/useCreateEndUserMutation';
 import { signupFormSchema, signupFormUiSchema } from './signup-form-schema';
+import { useSignupLayout } from '@/common/components/layouts/Signup';
 
 const layouts = {
   ...baseLayouts,
@@ -18,6 +19,12 @@ const layouts = {
 
 export const SignUpForm = () => {
   const { createEndUserRequest, isLoading } = useCreateEndUserMutation();
+  const { themeParams } = useSignupLayout();
+
+  const signupSchema = useMemo(
+    () => signupFormSchema({ jobTitle: themeParams?.showJobTitle }),
+    [themeParams?.showJobTitle],
+  );
 
   const handleSubmit = useCallback(
     (values: Record<string, any>) => {
@@ -26,7 +33,7 @@ export const SignUpForm = () => {
       const isValid = (values: unknown): values is CreateEndUserDto => {
         return jsonValidator.test(values, {
           type: 'json-schema',
-          value: signupFormSchema,
+          value: signupSchema,
         });
       };
 
@@ -36,12 +43,12 @@ export const SignUpForm = () => {
         toast.error('Invalid form values. Something went wrong.');
       }
     },
-    [createEndUserRequest],
+    [createEndUserRequest, signupSchema],
   );
 
   return (
     <DynamicForm
-      schema={signupFormSchema}
+      schema={signupSchema}
       uiSchema={signupFormUiSchema}
       onSubmit={handleSubmit}
       transformErrors={transformRJSFErrors}

diff --git a/apps/kyb-app/src/pages/SignUpPage/components/SignUpForm/signup-form-schema.ts b/apps/kyb-app/src/pages/SignUpPage/components/SignUpForm/signup-form-schema.ts
@@ -1,6 +1,8 @@
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 
-export const signupFormSchema: RJSFSchema = {
+export const signupFormSchema: (props: { jobTitle?: boolean }) => RJSFSchema = ({
+  jobTitle,
+} = {}) => ({
   type: 'object',
   required: ['firstName', 'lastName', 'email'],
   properties: {
@@ -20,7 +22,27 @@ export const signupFormSchema: RJSFSchema = {
       format: 'email',
       maxLength: 254,
     },
+    additionalInfo: {
+      type: 'object',
+      default: {},
+      required: [...[jobTitle ? 'jobTitle' : null]].filter(Boolean),
+      properties: {
+        ...(jobTitle
+          ? {
+              jobTitle: {
+                type: 'string',
+                title: 'Job Title',
+                maxLength: 50,
+              },
+            }
+          : {}),
+      },
+    },
   },
-};
+});
 
-export const signupFormUiSchema: UiSchema = {};
+export const signupFormUiSchema: UiSchema = {
+  additionalInfo: {
+    'ui:label': false,
+  },
+};
diff --git a/...s/workflows-service/src/collection-flow/controllers/collection-flow.no-user.controller.ts b/...s/workflows-service/src/collection-flow/controllers/collection-flow.no-user.controller.ts
@@ -50,7 +50,10 @@ export class CollectionFlowNoUserController {
   }
 
   @common.Post()
-  async signUp(@TokenScope() tokenScope: ITokenScope, @common.Body() payload: SignupDto) {
+  async signUp(
+    @TokenScope() tokenScope: ITokenScope,
+    @common.Body() { additionalInfo, ...payload }: SignupDto,
+  ) {
     try {
       const { workflowDefinitionId, context } =
         await this.workflowService.getWorkflowRuntimeDataById(
@@ -70,7 +73,12 @@ export class CollectionFlowNoUserController {
       await this.prismaService.$transaction(async transaction => {
         const endUser = await this.endUserService.create(
           {
-            data: { ...payload, projectId: tokenScope.projectId },
+            data: {
+              ...payload,
+              // @ts-ignore -- known issue with Prisma's JSON type
+              additionalInfo,
+              projectId: tokenScope.projectId,
+            },
           },
           transaction,
         );

diff --git a/services/workflows-service/src/collection-flow/dto/signup.dto.ts b/services/workflows-service/src/collection-flow/dto/signup.dto.ts
@@ -1,5 +1,5 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { IsEmail, IsNotEmpty, IsString, MaxLength } from 'class-validator';
+import { IsEmail, IsNotEmpty, IsOptional, IsString, MaxLength } from 'class-validator';
 
 export class SignupDto {
   @ApiProperty({ required: true, type: String })
@@ -19,4 +19,8 @@ export class SignupDto {
   @IsNotEmpty()
   @MaxLength(254)
   email!: string;
+
+  @ApiProperty({ required: false })
+  @IsOptional()
+  additionalInfo?: Record<string, unknown>;
 }