EditableDetailsV2 added ability to override input type (#2892)

* refactor(*): changed handling of date inputs * ci(*): testing path change * temporarily disabled test * updated hook name * fix(backoffice-v2): no longer looking at form value for input type * feat(backoffice-v2): added a way to override input type --------- Co-authored-by: Tomer Shvadron <[email protected]>
ballerine-io · Dec 12, 2024 · a885d7e · a885d7e
1 parent 5e94853
commit a885d7e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/apps/backoffice-v2/src/common/components/organisms/EditableDetailsV2/EditableDetailsV2.tsx b/apps/backoffice-v2/src/common/components/organisms/EditableDetailsV2/EditableDetailsV2.tsx
@@ -65,6 +65,11 @@ export const EditableDetailsV2: FunctionComponent<IEditableDetailsV2Props> = ({
                       <EditableDetailV2
                         name={field.name}
                         type={props.type}
+                        inputType={
+                          config.inputTypes?.[
+                            path.split('.').at(-1) as keyof typeof config.inputTypes
+                          ]
+                        }
                         format={props.format}
                         minimum={props.minimum}
                         maximum={props.maximum}

diff --git a/...n/components/organisms/EditableDetailsV2/components/EditableDetailV2/EditableDetailV2.tsx b/...n/components/organisms/EditableDetailsV2/components/EditableDetailV2/EditableDetailV2.tsx
@@ -33,6 +33,7 @@ export const EditableDetailV2 = ({
   minimum,
   maximum,
   pattern,
+  inputType,
   parse,
 }: {
   isEditable: boolean;
@@ -52,6 +53,7 @@ export const EditableDetailV2 = ({
   minimum?: number;
   maximum?: number;
   pattern?: string;
+  inputType?: string;
   parse?: {
     date?: boolean;
     isoDate?: boolean;
@@ -131,7 +133,10 @@ export const EditableDetailV2 = ({
     );
   }
 
-  if (parse?.boolean && (typeof value === 'boolean' || type === 'boolean')) {
+  if (
+    parse?.boolean &&
+    (typeof value === 'boolean' || type === 'boolean' || inputType === 'checkbox')
+  ) {
     return (
       <FormControl>
         <Checkbox_
@@ -145,16 +150,16 @@ export const EditableDetailV2 = ({
   }
 
   if (isEditable) {
-    const inputType = getInputType({ format, type, value });
+    const computedInputType = inputType ?? getInputType({ format, type, value });
 
     return (
       <FormControl>
         <Input
           {...(typeof minimum === 'number' && { min: minimum })}
           {...(typeof maximum === 'number' && { max: maximum })}
           {...(pattern && { pattern })}
-          {...(inputType === 'datetime-local' && { step: '1' })}
-          type={inputType}
+          {...(computedInputType === 'datetime-local' && { step: '1' })}
+          type={computedInputType}
           value={displayValue}
           onChange={handleInputChange}
           autoComplete={'off'}

diff --git a/apps/backoffice-v2/src/common/components/organisms/EditableDetailsV2/types.ts b/apps/backoffice-v2/src/common/components/organisms/EditableDetailsV2/types.ts
@@ -30,6 +30,7 @@ export interface IBaseEditableDetailsV2Config {
       disabled: boolean;
     };
   };
+  inputTypes?: Record<string, HTMLInputElement['type']>;
 }
 
 export interface IEditableDetailsV2ConfigWithBlacklist extends IBaseEditableDetailsV2Config {

diff --git a/apps/backoffice-v2/src/lib/blocks/components/KycBlock/hooks/useKycBlock/useKycBlock.tsx b/apps/backoffice-v2/src/lib/blocks/components/KycBlock/hooks/useKycBlock/useKycBlock.tsx
@@ -414,6 +414,9 @@ export const useKycBlock = ({
                   disabled: !caseState.writeEnabled,
                 },
               },
+              inputTypes: {
+                dateOfBirth: 'date',
+              },
             },
           },
         })
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,7 @@ export interface IBaseEditableDetailsV2Config { @@
           disabled: boolean;
         };
       };
+      inputTypes?: Record<string, HTMLInputElement['type']>;
     }
     export interface IEditableDetailsV2ConfigWithBlacklist extends IBaseEditableDetailsV2Config {
@@ Expand Down @@