[account-v2]/lkhith/[FEQ-1112]/Incorporated IDV Form for V2 account p…

…ackage (#12910)

* feat: added base components

* feat: incorporated IDV form

* feat: display the form values

* feat: display the form values

* fix: missing type

* fix: removed testcases for dummy component

* fix: disabled stylelint for dummy CSS

* feat: incorporated deriv-com/ui

* feat: added validation

* fix: resolve sonar clod issue

* fix: resolved type issue

* fix: updated package version

* fix: idv types

* fix: idv types

* fix: disable CSS lint rules

* fix: disable CSS lint rules

* feat: added testcases

* feat: incorporated review comments

* Merge branch 'master' into likhith/FEQ-1112/idv-form-for-account-v2

jest.config.js

@@ -10,7 +10,7 @@ module.exports = {
     coverageReporters: ['lcov'],
     coverageDirectory: './coverage/',
     clearMocks: true,
-    projects: ['<rootDir>/packages/*/jest.config.js'],
+    projects: ['<rootDir>/packages/*/jest.config.js', '<rootDir>/packages/*/jest.config.ts'],
     transform: {
         '^.+\\.jsx?$': 'babel-jest',
         '^.+/es/^.+$': 'babel-jest',

packages/account-v2/.eslintrc.js

@@ -38,7 +38,23 @@ module.exports = {
         '@typescript-eslint/no-explicit-any': 'error',
         '@typescript-eslint/no-unused-vars': 'error',
         '@typescript-eslint/sort-type-constituents': 'error',
-        camelcase: 'error',
+        '@typescript-eslint/naming-convention': [
+            'error',
+            {
+                selector: 'variable',
+                modifiers: ['destructured'],
+                format: ['camelCase', 'snake_case'],
+            },
+            {
+                selector: 'variable',
+                format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+                leadingUnderscore: 'allow',
+            },
+            {
+                selector: 'function',
+                format: ['camelCase', 'PascalCase'],
+            },
+        ],
         'import/first': 'error',
         'import/newline-after-import': 'error',
         'import/no-duplicates': 'error',

packages/account-v2/package.json

@@ -11,6 +11,7 @@
         "start": "rimraf dist && npm run test && npm run serve"
     },
     "dependencies": {
+        "@deriv-com/ui": "0.0.1-beta.4",
         "@deriv/api": "^1.0.0",
         "@deriv/library": "^1.0.0",
         "@deriv/quill-design": "^1.3.2",

packages/account-v2/src/App.tsx

@@ -1,10 +1,16 @@
+// TODO - Remove this once the IDV form is moved out
+/* eslint-disable @typescript-eslint/no-empty-function */
 import React from 'react';
+import { Formik } from 'formik';
 import { APIProvider } from '@deriv/api';
 import { BreakpointProvider } from '@deriv/quill-design';
 import { FormProgress } from './components/form-progress';
 import SignupWizard from './components/SignupWizard';
 import { SignupWizardProvider, useSignupWizardContext } from './context/SignupWizardContext';
 import { stepProgress } from './mocks/form-progress.mock';
+import { DOCUMENT_LIST, INITIAL_VALUES, SELECTED_COUNTRY } from './mocks/idv-form.mock';
+import { IDVForm } from './modules/IDVForm';
+import { getIDVFormValidationSchema } from './modules/IDVForm/utils';
 import RouteLinks from './router/components/route-links/route-links';
 import './index.scss';
 
@@ -15,6 +21,9 @@ const TriggerSignupWizardModal: React.FC = () => {
 };
 
 const App: React.FC = () => {
+    // TODO - Remove this once the IDV form is moved out
+    const getValidationSchema = getIDVFormValidationSchema(DOCUMENT_LIST);
+
     return (
         <APIProvider standalone>
             <BreakpointProvider>
@@ -25,6 +34,10 @@ const App: React.FC = () => {
                     {/* [TODO]:Mock - Remove hardcoded initial value once isActive comes from Modal */}
                     <FormProgress activeStep={1} steps={stepProgress} />
                 </SignupWizardProvider>
+                {/* [TODO]:Mock - Remove Mock values */}
+                <Formik initialValues={INITIAL_VALUES} onSubmit={() => {}} validationSchema={getValidationSchema}>
+                    <IDVForm selectedCountry={SELECTED_COUNTRY} />
+                </Formik>
                 <RouteLinks />
             </BreakpointProvider>
         </APIProvider>

packages/account-v2/src/components/base/WalletDropdown/WalletDropdown.scss

@@ -0,0 +1,146 @@
+/* stylelint-disable color-no-hex */
+
+.wallets-dropdown {
+    width: 100%;
+    position: relative;
+    cursor: pointer;
+
+    &--disabled {
+        pointer-events: none;
+
+        & label {
+            color: var(--system-light-5-active-background, #999);
+        }
+    }
+
+    &__button {
+        all: unset;
+        right: 1.6rem;
+        transform: rotate(0);
+        transform-origin: 50% 45%;
+        transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
+
+        &--active {
+            transform: rotate(180deg);
+        }
+    }
+
+    &__content {
+        width: 100%;
+        background: var(--system-light-8-primary-background, #fff);
+        display: flex;
+        align-items: center;
+
+        .wallets-textfield__field {
+            cursor: pointer;
+        }
+    }
+
+    &__field {
+        position: absolute;
+        inset: 0;
+        min-width: 0; /* this is required to reset input's default width */
+        padding-left: 2rem;
+        display: flex;
+        flex-grow: 1;
+        font-family: inherit;
+        outline: 0;
+        font-size: 1.4rem;
+        background-color: transparent;
+        color: var(--system-light-2-general-text, #333);
+        transition: border-color 0.2s;
+        cursor: unset;
+        user-select: none;
+        &::selection {
+            background-color: transparent;
+        }
+
+        &::placeholder {
+            color: transparent;
+        }
+    }
+
+    &__field:placeholder-shown ~ &__label {
+        font-size: 1.4rem;
+        cursor: text;
+        top: 30%;
+        padding: 0;
+    }
+
+    &__field:placeholder-shown ~ &__label--with-icon {
+        left: 4.4rem;
+    }
+
+    label,
+    &__field:focus ~ &__label {
+        position: absolute;
+        top: -0.5rem;
+        display: block;
+        transition: 0.2s;
+        font-size: 1rem;
+        color: var(--system-light-3-less-prominent-text, #999);
+        background: var(--system-light-8-primary-background, #fff);
+        padding-inline: 0.4rem;
+        left: 1.6rem;
+    }
+
+    &__field:focus ~ &__label {
+        color: var(--brand-blue, #85acb0);
+    }
+
+    &__items {
+        position: absolute;
+        top: 4.8rem;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        z-index: 2;
+        border-radius: 0.4rem;
+        background: var(--system-light-8-primary-background, #fff);
+        box-shadow: 0 3.2rem 6.4rem 0 rgba(14, 14, 14, 0.14);
+        overflow-y: auto;
+
+        & > :first-child {
+            border-radius: 0.4rem 0.4rem 0 0;
+        }
+
+        & > :last-child {
+            border-radius: 0 0 0.4rem 0.4rem;
+        }
+
+        &--sm {
+            max-height: 22rem;
+        }
+
+        &--md {
+            max-height: 42rem;
+        }
+
+        &--lg {
+            max-height: 66rem;
+        }
+    }
+
+    &__icon {
+        position: absolute;
+        left: 1.6rem;
+        width: 1.6rem;
+        height: 1.6rem;
+    }
+
+    &__item {
+        padding: 10px 16px;
+        width: 100%;
+        z-index: 2;
+
+        &:hover:not(&--active) {
+            cursor: pointer;
+            background: var(--system-light-6-hover-background, #e6e9e9);
+        }
+
+        &--active {
+            background: var(--system-light-5-active-background, #d6dadb);
+        }
+    }
+}