Illia rudniev/fix/kyb demo UI fixes (#877)

* fix: css fixes & date picker crash bug & schema changes & bump

* feat: instead of 404 user now getting redirect to home page

* fix: fixed date picker error css & removed text capitalize from errors & ui bump

* fix: updated personal information schema & ui lib fixes & ui bump

* fix: updated schemaes

* fix: lock fix

.changeset/cuddly-ghosts-search.md

@@ -0,0 +1,5 @@
+---
+'@ballerine/ui': patch
+---
+
+Enabled search on phone number in DynamicForm & BooleanFieldAdapter fix

apps/backoffice-v2/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @ballerine/backoffice-v2
 
+## 0.4.13
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.2.12
+
+## 0.4.12
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.2.11
+
 ## 0.4.11
 
 ### Patch Changes

apps/backoffice-v2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ballerine/backoffice-v2",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "description": "Ballerine - Backoffice",
   "homepage": "https://github.com/ballerine-io/ballerine",
   "repository": {
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@ballerine/common": "0.5.19",
-    "@ballerine/ui": "0.2.10",
+    "@ballerine/ui": "0.2.12",
     "@ballerine/workflow-browser-sdk": "0.4.22",
     "@ballerine/workflow-node-sdk": "0.4.16",
     "@formkit/auto-animate": "1.0.0-beta.5",

examples/kyb-app/CHANGELOG.md

@@ -1,5 +1,12 @@
 # kyb-app
 
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies
+  - @ballerine/ui@0.2.12
+
 ## 0.0.18
 
 ### Patch Changes

examples/kyb-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/kyb-app",
   "private": true,
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ballerine/ui": "0.2.10",
+    "@ballerine/ui": "0.2.12",
     "@lukemorales/query-key-factory": "^1.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@rjsf/core": "^5.9.0",

examples/kyb-app/src/components/layouts/AppShell/AppShell.tsx

@@ -32,7 +32,7 @@ export const AppShell = ({ children, backButton, isLoading, onBackButtonClick }:
                 className="max-h-[78px] max-w-[186px]"
               />
             </div>
-            <div className="h-full">
+            <div className="h-full max-h-[440px]">
               {isLoading ? null : (
                 <Stepper>
                   <VerticalLayout>

examples/kyb-app/src/domains/workflows/default-flow-data.ts

@@ -43,7 +43,7 @@ export const defaultFlowData: WorkflowFlowData = {
       bankName: '',
       holder: '',
       account: '',
-      currency: '',
+      currency: 'usd',
     },
     ubos: {
       check: false,

examples/kyb-app/src/pages/CollectionFlow/components/organisms/KYBView/helpers/transform-errors.ts

@@ -24,6 +24,10 @@ export const transformRJSFErrors = (errors: RJSFValidationError[]): RJSFValidati
       error.message = '';
     }
 
+    if (error.params?.type === 'number') {
+      error.message = 'This field is required';
+    }
+
     return error;
   });
 };

examples/kyb-app/src/pages/CollectionFlow/components/organisms/KYBView/views/BankInformationView/bank-information.schema.ts

@@ -1,6 +1,6 @@
 import { getCountriesList } from '@app/pages/CollectionFlow/components/organisms/KYBView/helpers/get-countries-list';
 import { RJSFSchema } from '@rjsf/utils';
-// import currencyCodes from 'currency-codes';
+import currencyCodes from 'currency-codes';
 
 export const bankInformationSchema: RJSFSchema = {
   title: 'Bank Information',
@@ -32,8 +32,7 @@ export const bankInformationSchema: RJSFSchema = {
     currency: {
       title: 'Account Currency',
       type: 'string',
-      // oneOf: currencyCodes.codes().map(code => ({ title: code.toUpperCase(), const: code })),
-      oneOf: [{ title: 'USD', const: 'usd' }],
+      oneOf: currencyCodes.codes().map(code => ({ title: code.toUpperCase(), const: code })),
     },
   },
   required: ['country', 'holder', 'bankName'],

examples/kyb-app/src/pages/CollectionFlow/components/organisms/KYBView/views/CompanyInformationView/company-information.schema.ts

@@ -7,8 +7,7 @@ export const companyInformationSchema: RJSFSchema = {
   properties: {
     registrationNumber: {
       title: 'Company Registration Number',
-      type: 'string',
-      minLength: 1,
+      type: 'number',
     },
     companyCountry: {
       title: 'Registered Country',

examples/kyb-app/src/pages/CollectionFlow/components/organisms/KYBView/views/HeadquartersView/headquarters.schema.ts

@@ -6,19 +6,18 @@ export const headquartersSchema: RJSFSchema = {
   type: 'object',
   required: ['street', 'postalCode', 'city', 'country'],
   properties: {
-    address: {
-      title: 'Search Address',
-      type: 'string',
-    },
+    // address: {
+    //   title: 'Search Address',
+    //   type: 'string',
+    // },
     street: {
       title: 'Street',
       type: 'string',
       minLength: 1,
     },
     postalCode: {
       title: 'Postal code',
-      type: 'string',
-      minLength: 1,
+      type: 'number',
     },
     country: {
       title: 'Country',

examples/kyb-app/src/pages/CollectionFlow/components/organisms/KYBView/views/PersonalInformationView/PersonalInformationView.tsx

@@ -35,7 +35,7 @@ export const PersonalInformationView = () => {
         lastName: values.name.lastName,
         phone: values.phoneNumber,
         email: user.email,
-        dateOfBirth: new Date(+values.birthDate).toISOString(),
+        dateOfBirth: new Date(values.birthDate).toISOString(),
         additionalInformation: {
           role: values.title,
         },
@@ -56,7 +56,7 @@ export const PersonalInformationView = () => {
   );
 
   return (
-    <AppShell.FormContainer header={<ViewHeader progressBar={false} />}>
+    <AppShell.FormContainer header={<ViewHeader />}>
       <DynamicForm<PersonalInformationContext>
         className="max-w-[384px]"
         formData={context.flowData.personalInformation}

examples/kyb-app/src/pages/CollectionFlow/components/organisms/KYBView/views/PersonalInformationView/personal-information.schema.ts

@@ -30,17 +30,16 @@ export const personalInformationSchema: RJSFSchema = {
       type: 'string',
       title: 'Date of Birth',
       minLength: 1,
+      format: 'date-time',
     },
     phoneNumber: {
       type: 'string',
       title: 'Phone Number',
       minLength: 1,
     },
     companyCheck: {
-      title: 'dfrd',
+      title: 'I have the signing authority for this company',
       type: 'boolean',
-      description: 'I have the signing authority for this company',
-      enum: [null, true],
     },
   },
   required: ['name', 'title', 'birthDate', 'phoneNumber'],

examples/kyb-app/src/pages/CollectionFlow/components/organisms/KYBView/views/PersonalInformationView/personal-information.ui-schema.ts

@@ -7,6 +7,7 @@ export const personalInformationUISchema: UiSchema = {
   },
   birthDate: {
     'ui:field': 'DateInput',
+    'ui:label': true,
   },
   name: {
     firstName: {

examples/kyb-app/src/pages/CollectionFlow/components/organisms/KYBView/views/ShareholdersView/shareholders.schema.ts

@@ -6,7 +6,7 @@ export const shareholdersSchema: RJSFSchema = {
   properties: {
     check: {
       type: 'boolean',
-      description: 'I own 25% or more of the company',
+      title: 'I own 25% or more of the company',
       default: false,
     },
     shareholders: {

examples/kyb-app/src/router.tsx

@@ -4,7 +4,7 @@ import { Approved } from '@app/pages/CollectionFlow/components/pages/Approved';
 import { Rejected } from '@app/pages/CollectionFlow/components/pages/Rejected';
 import { Success } from '@app/pages/CollectionFlow/components/pages/Success';
 import { SignIn } from '@app/pages/SignIn';
-import { createBrowserRouter } from 'react-router-dom';
+import { Navigate, createBrowserRouter } from 'react-router-dom';
 
 export const router = createBrowserRouter([
   {
@@ -39,4 +39,8 @@ export const router = createBrowserRouter([
     path: 'approved',
     element: <Approved />,
   },
+  {
+    path: '*',
+    element: <Navigate to="/" />,
+  },
 ]);

packages/ui/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @ballerine/ui
 
+## 0.2.12
+
+### Patch Changes
+
+- Updated DatePicker error text styles & removed errors text capitalization from DynamicForm
+
+## 0.2.11
+
+### Patch Changes
+
+- Fixed date picker date serialization & added incorrect date hint & removed controls from number inputs
+
 ## 0.2.10
 
 ### Patch Changes

packages/ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ballerine/ui",
   "private": false,
-  "version": "0.2.10",
+  "version": "0.2.12",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/ui/src/components/molecules/inputs/DatePickerInput/DatePickerInput.stories.tsx

@@ -14,7 +14,7 @@ export const Disabled = {
 };
 
 const ControlledComponent = () => {
-  const [timestamp, setTimestamp] = useState(+new Date());
+  const [timestamp, setTimestamp] = useState<string | null>(new Date().toISOString());
 
   return <DatePickerInput value={timestamp} onChange={event => setTimestamp(event.target.value)} />;
 };

packages/ui/src/components/molecules/inputs/DatePickerInput/DatePickerInput.tsx

@@ -10,7 +10,7 @@ import { Paper } from '@components/atoms';
 
 export interface DatePickerChangeEvent {
   target: {
-    value: number | null;
+    value: string | null;
     name?: string;
   };
 }
@@ -30,25 +30,11 @@ export const DatePickerInput = ({
   disabled = false,
   onChange,
 }: DatePickerProps) => {
-  const serializeValue = useCallback((value: Dayjs): number => {
-    return +value.toDate();
+  const serializeValue = useCallback((value: Dayjs): string => {
+    return value.toDate().toISOString();
   }, []);
 
   const deserializeValue = useCallback((value: DatePickerValue) => {
-    if (value instanceof Date) {
-      return dayjs(value);
-    }
-
-    if (typeof value === 'string' && value) {
-      const timestamp = Number(value);
-
-      if (isNaN(timestamp)) {
-        return dayjs(value, ['YYYY-MM-DD', 'YYYY-DD-MM'], true);
-      }
-
-      return dayjs(+timestamp);
-    }
-
     return dayjs(value);
   }, []);
 
@@ -80,6 +66,13 @@ export const DatePickerInput = ({
           variant="standard"
           fullWidth
           size="small"
+          error={props.error}
+          FormHelperTextProps={{
+            classes: {
+              root: 'pl-2 text-destructive font-inter text-[0.8rem]',
+            },
+          }}
+          helperText={props.error ? 'Please enter valid date.' : undefined}
           InputProps={{
             ...props.InputProps,
             classes: {

packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/BooleanFieldAdapter/BooleanFieldAdapter.tsx

@@ -12,7 +12,7 @@ export const BooleanFieldAdapter: RJSVInputAdapter<boolean> = ({ formData, schem
           onChange(Boolean(e));
         }}
       />
-      <span>{schema.description}</span>
+      <span>{schema.title}</span>
     </div>
   );
 };

packages/ui/src/components/organisms/DynamicForm/components/RSJVInputAdaters/PhoneInputAdapter/PhoneInputAdapter.tsx

@@ -7,6 +7,7 @@ export const PhoneInputAdapter: RJSVInputAdapter = ({ formData, disabled, onChan
       country="us"
       value={formData}
       disabled={disabled}
+      enableSearch
       onChange={value => void onChange(value)}
     />
   );

packages/ui/src/components/organisms/DynamicForm/components/layouts/FieldLayout/FieldLayout.tsx

@@ -26,11 +26,11 @@ export const FieldLayout = ({
       {isLabelEnabled ? (
         <Label htmlFor={id}>
           {label}
-          {required ? '*' : ''}
+          {required ? '' : <span className="opacity-50">{' (optional) '}</span>}
         </Label>
       ) : null}
       {children}
-      {rawErrors ? <ErrorsList errors={errors} className="capitalize" /> : null}
+      {rawErrors ? <ErrorsList errors={errors} /> : null}
       {fieldWarnings ? (
         <ErrorsList
           errors={Array.isArray(fieldWarnings) ? fieldWarnings : [fieldWarnings]}

packages/ui/src/global.css

@@ -11,6 +11,14 @@
     @apply font-inter;
   }
 
+  input[type='number']::-webkit-outer-spin-button,
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number'] {
+    -webkit-appearance: none;
+    margin: 0;
+    -moz-appearance: textfield !important;
+  }
+
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 47.4% 11.2%;