Thisyahlen/replace quill in modules accounts v2 (deriv-com#13800)

* chore: modules

* chore: remaining style fix

* chore: komen v3

Author: thisyahlen-deriv

packages/account-v2/src/components/FormFields/FormDropDownField.tsx

@@ -2,12 +2,13 @@ import React, { ComponentProps } from 'react';
 import { Field, FieldProps } from 'formik';
 import * as Yup from 'yup';
 import { useBreakpoint } from '@deriv/quill-design';
+import { LabelPairedChevronDownMdRegularIcon } from '@deriv/quill-icons';
+import { Dropdown } from '@deriv-com/ui';
 import { validateField } from '../../utils/validation';
-import { WalletDropdown as DropDown } from '../base/WalletDropdown';
 
 type FormDropDownFieldProps = Omit<
-    ComponentProps<typeof DropDown>,
-    'errorMessage' | 'isRequired' | 'onSelect' | 'variant'
+    ComponentProps<typeof Dropdown>,
+    'dropdownIcon' | 'errorMessage' | 'isRequired' | 'onSelect' | 'variant'
 > & {
     name: string;
     validationSchema?: Yup.AnySchema;
@@ -26,12 +27,13 @@ const FormDropDownField = ({ name, validationSchema, ...rest }: FormDropDownFiel
     return (
         <Field name={name} validate={validateField(validationSchema)}>
             {({ field, form, meta: { error, touched } }: FieldProps<string>) => (
-                <DropDown
+                <Dropdown
                     {...field}
                     {...rest}
+                    dropdownIcon={<LabelPairedChevronDownMdRegularIcon />}
                     errorMessage={error}
                     isRequired={touched && !!error}
-                    onSelect={(value: string) => form.setFieldValue(name, value)}
+                    onSelect={value => form.setFieldValue(name, value)}
                     variant={isMobile ? 'prompt' : 'comboBox'}
                 />
             )}

packages/account-v2/src/components/FormFields/FormInputField.tsx

@@ -1,10 +1,10 @@
 import React, { ComponentProps } from 'react';
 import { Field, FieldProps } from 'formik';
 import * as Yup from 'yup';
+import { Input } from '@deriv-com/ui';
 import { validateField } from '../../utils/validation';
-import { WalletTextField as TextField } from '../base/WalletTextField';
 
-type FormInputFieldProps = Omit<ComponentProps<typeof TextField>, 'errorMessage' | 'isInvalid' | 'showMessage'> & {
+type FormInputFieldProps = Omit<ComponentProps<typeof Input>, 'errorMessage' | 'isInvalid' | 'showMessage'> & {
     name: string;
     validationSchema?: Yup.AnySchema;
 };
@@ -20,14 +20,12 @@ type FormInputFieldProps = Omit<ComponentProps<typeof TextField>, 'errorMessage'
 const FormInputField = ({ name, validationSchema, ...rest }: FormInputFieldProps) => (
     <Field name={name} validate={validateField(validationSchema)}>
         {({ field, meta: { error, touched } }: FieldProps<string>) => (
-            <TextField
+            <Input
                 {...field}
                 {...rest}
                 autoComplete='off'
-                errorMessage={touched && error}
-                isInvalid={touched && !!error}
-                showMessage
-                type='text'
+                error={Boolean(error && touched)}
+                message={touched && error}
             />
         )}
     </Field>

packages/account-v2/src/modules/AddressFields/AddressFields.tsx

@@ -14,7 +14,7 @@ export const AddressFields = () => {
 
     const isSvg =
         landingCompanyName === LANDING_COMPANY.SVG || !!upgradableLandingCompanies?.includes(LANDING_COMPANY.SVG);
-    const { data: statesList, isFetched: statesListFetched } = useStatesList(settings.country_code || '', {
+    const { data: statesList, isFetched: statesListFetched } = useStatesList(settings.country_code ?? '', {
         enabled: !!settings.country_code,
     });
 
@@ -27,25 +27,10 @@ export const AddressFields = () => {
     } = addressDetailValidations(settings.country_code ?? '', isSvg);
 
     return (
-        <div className='space-y-600 pt-400'>
-            <FormInputField
-                label='First line of address*'
-                name='addressLine1'
-                placeholder='First line of address'
-                validationSchema={addressLine1Schema}
-            />
-            <FormInputField
-                label='Second line of address'
-                name='addressLine2'
-                placeholder='Second line of address'
-                validationSchema={addressLine2Schema}
-            />
-            <FormInputField
-                label='Town/City*'
-                name='addressCity'
-                placeholder='Town/City'
-                validationSchema={addressCitySchema}
-            />
+        <div className='pt-8 space-y-12'>
+            <FormInputField label='First line of address*' name='addressLine1' validationSchema={addressLine1Schema} />
+            <FormInputField label='Second line of address' name='addressLine2' validationSchema={addressLine2Schema} />
+            <FormInputField label='Town/City*' name='addressCity' validationSchema={addressCitySchema} />
             {statesListFetched && statesList.length ? (
                 <FormDropDownField
                     label='State/Province'
@@ -54,19 +39,9 @@ export const AddressFields = () => {
                     validationSchema={addressStateSchema}
                 />
             ) : (
-                <FormInputField
-                    label='State/Province'
-                    name='addressState'
-                    placeholder='State/Province'
-                    validationSchema={addressStateSchema}
-                />
+                <FormInputField label='State/Province' name='addressState' validationSchema={addressStateSchema} />
             )}
-            <FormInputField
-                label='Postal/ZIP Code'
-                name='addressPostcode'
-                placeholder='Postal/ZIP Code'
-                validationSchema={addressPostcodeSchema}
-            />
+            <FormInputField label='Postal/ZIP Code' name='addressPostcode' validationSchema={addressPostcodeSchema} />
         </div>
     );
 };

packages/account-v2/src/modules/Onfido/OnfidoContainer.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import clsx from 'clsx';
 import { useHistory } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
 import { useOnfido } from '@deriv/api';
-import { qtMerge } from '@deriv/quill-design';
 import { Button, Loader, Text } from '@deriv-com/ui';
 import IcAccountMissingDetails from '../../assets/proof-of-identity/ic-account-missing-details.svg';
 import { ErrorMessage } from '../../components/ErrorMessage';
@@ -58,7 +57,7 @@ export const OnfidoContainer = ({
     const hasPersonalDetailsValidationError = ['MissingPersonalDetails', 'InvalidPostalCode'].includes(
         serviceTokenError?.error.code ?? ''
     );
-    const showErrorMessage = onfidoInitializationError?.message || serviceTokenError?.error?.message;
+    const showErrorMessage = onfidoInitializationError?.message ?? serviceTokenError?.error?.message;
 
     if (isServiceTokenLoading) {
         return <Loader />;
@@ -98,16 +97,17 @@ export const OnfidoContainer = ({
     }
 
     return (
-        <div className={qtMerge('flex flex-col items-center gap-800 p-800 lg:p-50')}>
+        <div className={twMerge('flex flex-col items-center gap-16 p-16 lg:p-0')}>
             <div
-                className={clsx(
-                    '[transition:transform_0.35s_ease,_opacity_0.35s_linear]origin-top opacity-1300 p-800',
-                    { '[display:none]': transitionEnd, 'scale-y-0 opacity-50': isOnfidoEnabled }
+                className={twMerge(
+                    '[transition:transform_0.35s_ease,_opacity_0.35s_linear]origin-top opacity-24 p-16',
+                    transitionEnd && 'hidden',
+                    isOnfidoEnabled && 'scale-y-0 opacity-50'
                 )}
             >
-                {/* TODO: Dummy div here replace with PoiConfirmWithExample */}
+                {/* Do this: Dummy div here replace with PoiConfirmWithExample */}
                 <div
-                    className='border-75 border-solid border-solid-slate-300 rounded-500 w-[200px] sm:w-[638px] h-[384px]'
+                    className='border-1 border-solid border-solid-grey-2 rounded-lg w-[200px] sm:w-[638px] h-[384px]'
                     data-testid='dt_poi-confirm-with-example'
                     onClick={() => setIsOnfidoEnabled(true)}
                     onKeyDown={() => setIsOnfidoEnabled(true)}

packages/account-v2/src/modules/POAForm/POAFormContainer.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { useActiveAccount } from '@deriv/api';
+import { useActiveTradingAccount } from '@deriv/api';
 import { Button, Loader, Text } from '@deriv-com/ui';
 import IcPOAError from '../../assets/verification-status/ic-poa-error.svg';
 import IcPOAUpload from '../../assets/verification-status/ic-poa-upload.svg';
@@ -14,7 +14,7 @@ import { usePOAInfo } from '../../hooks/usePOAInfo';
 import { isNavigationFromDerivGO, isNavigationFromP2P } from '../../utils/platform';
 
 export const POAFormContainer = () => {
-    const { data: activeAccount } = useActiveAccount();
+    const { data: activeAccount } = useActiveTradingAccount();
     const { data: poaInfo, isLoading } = usePOAInfo();
     const [resubmitting, setResubmitting] = useState(false);
     const history = useHistory();

packages/account-v2/src/router/components/route-links/route-links.tsx

@@ -5,7 +5,7 @@ import { defaultRoute, routes } from '../../constants/routes-config';
 const RouteLinks = () => (
     <BrowserRouter>
         <div className='px-4 py-16 gap-6 grid grid-cols-1 sm:grid-cols-[1fr_4fr]'>
-            <div className='flex-col p-8 d-none sm:flex bg-solid-slate-1 rounded-xs'>
+            <div className='flex-col hidden p-8 sm:flex bg-solid-slate-1 rounded-xs'>
                 {routes.map(route => (
                     <NavLink
                         activeClassName='bg-solid-slate-2 border-solid border-l-4 border-l-solid-red-5 rounded-xs font-bold'

packages/account-v2/tailwind.config.ts

@@ -1,19 +1,7 @@
 import type { Config } from 'tailwindcss';
-const plugin = require('tailwindcss/plugin');
-import QuillTailwindConfig from '@deriv/quill-design/quill-tailwind/tailwind.config.cjs';
 
 export default {
     content: ['./src/**/*.{js,jsx,ts,tsx}'],
-    plugins: [
-        plugin(({ addUtilities }) => {
-            addUtilities({
-                '.d-none': {
-                    display: 'none',
-                },
-            });
-        }),
-    ],
-    presets: [QuillTailwindConfig],
     theme: {
         extend: {
             borderRadius: {
@@ -141,6 +129,25 @@ export default {
                 lg: { min: '1280px' },
                 xl: { min: '1440px' },
             },
+            opacity: {
+                0: '0',
+                4: '0.04',
+                8: '0.08',
+                16: '0.16',
+                24: '0.24',
+                32: '0.32',
+                40: '0.4',
+                48: '0.48',
+                56: '0.56',
+                64: '0.64',
+                72: '0.72',
+                80: '0.8',
+                88: '0.88',
+                96: '0.96',
+                100: '1',
+                overlay: '0.72',
+                disabled: ' 0.32',
+            },
             spacing: {
                 0: '0px',
                 1: '1px',