From 4288f911db2b27e96acf29a3cb0a79132dfb5ab1 Mon Sep 17 00:00:00 2001
From: Tay Sui Sin <suisin@regentmarkets.com>
Date: Fri, 24 May 2024 13:39:56 +0800
Subject: [PATCH 1/3] chore: try to add InputGroupButton for phone-verification

---
 package-lock.json                                         | 8 ++++----
 packages/account/package.json                             | 2 +-
 .../Profile/PhoneVerification/otp-verification.tsx        | 3 ++-
 packages/core/package.json                                | 2 +-
 packages/trader/package.json                              | 2 +-
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9b18b86a66ff..f76384573afd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
                 "@datadog/browser-logs": "^5.11.0",
                 "@datadog/browser-rum": "^5.11.0",
                 "@deriv-com/analytics": "1.4.13",
-                "@deriv-com/quill-ui": "^1.10.1",
+                "@deriv-com/quill-ui": "^1.10.7",
                 "@deriv-com/ui": "^1.14.5",
                 "@deriv-com/utils": "^0.0.20",
                 "@deriv/api-types": "^1.0.172",
@@ -2963,9 +2963,9 @@
             }
         },
         "node_modules/@deriv-com/quill-ui": {
-            "version": "1.10.1",
-            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.1.tgz",
-            "integrity": "sha512-y5WJJv+Md/HCZlRpP+XQFYlyqwLeHWlr9iECL8XXW5YJGw8IuAwDRgGTpqcZOtcO9TNu1aEEU/Nzy3auS8AEfg==",
+            "version": "1.10.7",
+            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.7.tgz",
+            "integrity": "sha512-FiWbO3G9GMIt3qJPF0rz28+m2XTkWyfJFQuDoiLKG1noSUVy58NdI71R8/T8u4Wq10OpIwLBiD/jSY1fXk/dRQ==",
             "dependencies": {
                 "@deriv/quill-icons": "^1.19.20",
                 "@headlessui/react": "^1.7.18",
diff --git a/packages/account/package.json b/packages/account/package.json
index 6ce482dfabef..35e3cd113a11 100644
--- a/packages/account/package.json
+++ b/packages/account/package.json
@@ -33,7 +33,7 @@
         "@deriv-com/analytics": "1.4.13",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api": "^1.0.0",
-        "@deriv-com/quill-ui": "^1.10.1",
+        "@deriv-com/quill-ui": "^1.10.7",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx b/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
index 5aedcce1f9c8..1dc80bd2d251 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
+++ b/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PhoneVerificationCard from './phone-verification-card';
-import { Text } from '@deriv-com/quill-ui';
+import { Text, InputGroupButton } from '@deriv-com/quill-ui';
 import { Localize, localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
 import { Input } from '@deriv/components';
@@ -65,6 +65,7 @@ const OTPVerification = observer(({ phone_verification_type, setOtpVerification
                 )}
             </div>
             <div className='phone-verification__card--email-verification-otp-container'>
+                <InputGroupButton buttonLabel={localize('Verify')} label={localize('OTP code')} />
                 <Input id='otp_code' type='text' name='otp_code' label={localize('OTP code')} data-lpignore='true' />
                 <ResendCodeTimer
                     resend_code_text={should_show_phone_number_otp ? "Didn't get the code?" : 'Resend code'}
diff --git a/packages/core/package.json b/packages/core/package.json
index d88da56b3faa..8e616b0ffdec 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -96,7 +96,7 @@
         "@babel/polyfill": "^7.4.4",
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-ui": "^1.10.1",
+        "@deriv-com/quill-ui": "^1.10.7",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/account": "^1.0.0",
         "@deriv/account-v2": "^1.0.0",
diff --git a/packages/trader/package.json b/packages/trader/package.json
index ca45b25078d3..c1d6c60c651c 100644
--- a/packages/trader/package.json
+++ b/packages/trader/package.json
@@ -89,7 +89,7 @@
     "dependencies": {
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-ui": "^1.10.1",
+        "@deriv-com/quill-ui": "^1.10.7",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",

From aef1029e6000b28d588c86fd36fe0fb320d06e36 Mon Sep 17 00:00:00 2001
From: Tay Sui Sin <suisin@regentmarkets.com>
Date: Fri, 24 May 2024 16:04:02 +0800
Subject: [PATCH 2/3] chore: remove Input field from component and use quill-ui
 TextField and InputGroupButton

---
 package-lock.json                              |  8 ++++----
 packages/account/package.json                  |  2 +-
 .../PhoneVerification/confirm-phone-number.tsx |  6 ++++--
 .../PhoneVerification/otp-verification.tsx     | 18 +++++++++++++++---
 .../PhoneVerification/phone-verification.scss  | 16 +++++++++++++---
 packages/core/package.json                     |  2 +-
 packages/trader/package.json                   |  2 +-
 7 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f76384573afd..9e1e8273b8fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
                 "@datadog/browser-logs": "^5.11.0",
                 "@datadog/browser-rum": "^5.11.0",
                 "@deriv-com/analytics": "1.4.13",
-                "@deriv-com/quill-ui": "^1.10.7",
+                "@deriv-com/quill-ui": "^1.10.8",
                 "@deriv-com/ui": "^1.14.5",
                 "@deriv-com/utils": "^0.0.20",
                 "@deriv/api-types": "^1.0.172",
@@ -2963,9 +2963,9 @@
             }
         },
         "node_modules/@deriv-com/quill-ui": {
-            "version": "1.10.7",
-            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.7.tgz",
-            "integrity": "sha512-FiWbO3G9GMIt3qJPF0rz28+m2XTkWyfJFQuDoiLKG1noSUVy58NdI71R8/T8u4Wq10OpIwLBiD/jSY1fXk/dRQ==",
+            "version": "1.10.8",
+            "resolved": "https://registry.npmjs.org/@deriv-com/quill-ui/-/quill-ui-1.10.8.tgz",
+            "integrity": "sha512-Ke8YkLGokO8rH6qUN85ryXA3d9awVaRJnrxm6NVyBicgjnngqSsotVWO8FvHDgZwBQJjT+qEB7OxYuOxWITheA==",
             "dependencies": {
                 "@deriv/quill-icons": "^1.19.20",
                 "@headlessui/react": "^1.7.18",
diff --git a/packages/account/package.json b/packages/account/package.json
index 35e3cd113a11..6be662aed7ce 100644
--- a/packages/account/package.json
+++ b/packages/account/package.json
@@ -33,7 +33,7 @@
         "@deriv-com/analytics": "1.4.13",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api": "^1.0.0",
-        "@deriv-com/quill-ui": "^1.10.7",
+        "@deriv-com/quill-ui": "^1.10.8",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",
         "@deriv/hooks": "^1.0.0",
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx b/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx
index 77d0062dec99..7dc51d5479d5 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx
+++ b/packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PhoneVerificationCard from './phone-verification-card';
-import { Button, Text } from '@deriv-com/quill-ui';
+import { Button, Text, TextField } from '@deriv-com/quill-ui';
 import { Localize, localize } from '@deriv/translations';
 import { Input } from '@deriv/components';
 import { observer, useStore } from '@deriv/stores';
@@ -28,7 +28,9 @@ const ConfirmPhoneNumber = observer(({ setOtpVerification }: TConfirmPhoneNumber
             <Text bold>
                 <Localize i18n_default_text='Confirm your phone number' />
             </Text>
-            <Input label={localize('Phone number')} value={phone_number} />
+            <div className='phone-verification__card--inputfield'>
+                <TextField label={localize('Phone number')} value={phone_number} />
+            </div>
             <div className='phone-verification__card--buttons_container'>
                 <Button
                     variant='secondary'
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx b/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
index 1dc80bd2d251..56d038304eee 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
+++ b/packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
@@ -3,7 +3,6 @@ import PhoneVerificationCard from './phone-verification-card';
 import { Text, InputGroupButton } from '@deriv-com/quill-ui';
 import { Localize, localize } from '@deriv/translations';
 import { observer, useStore } from '@deriv/stores';
-import { Input } from '@deriv/components';
 import { convertPhoneTypeDisplay } from 'Helpers/utils';
 import ResendCodeTimer from './resend-code-timer';
 import DidntGetTheCodeModal from './didnt-get-the-code-modal';
@@ -19,9 +18,18 @@ const OTPVerification = observer(({ phone_verification_type, setOtpVerification
     const { email, phone } = account_settings;
     const [should_show_didnt_get_the_code_modal, setShouldShowDidntGetTheCodeModal] = React.useState(false);
     const [start_timer, setStartTimer] = React.useState(true);
+    const [otp, setOtp] = React.useState('');
     //TODO: this shall be replace by BE API call when it's ready
     const { should_show_phone_number_otp } = ui;
 
+    const handleGetOtpValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setOtp(e.target.value);
+    };
+
+    const handleVerifyOTP = () => {
+        //TODO: inplement function to verify OTP when BE API is ready
+    };
+
     return (
         <PhoneVerificationCard is_small_card>
             <DidntGetTheCodeModal
@@ -65,8 +73,12 @@ const OTPVerification = observer(({ phone_verification_type, setOtpVerification
                 )}
             </div>
             <div className='phone-verification__card--email-verification-otp-container'>
-                <InputGroupButton buttonLabel={localize('Verify')} label={localize('OTP code')} />
-                <Input id='otp_code' type='text' name='otp_code' label={localize('OTP code')} data-lpignore='true' />
+                <InputGroupButton
+                    buttonLabel={localize('Verify')}
+                    label={localize('OTP code')}
+                    buttonCallback={handleVerifyOTP}
+                    onChange={handleGetOtpValue}
+                />
                 <ResendCodeTimer
                     resend_code_text={should_show_phone_number_otp ? "Didn't get the code?" : 'Resend code'}
                     count_from={60}
diff --git a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
index 84c4041e492c..4ce0bce1773a 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
+++ b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
@@ -57,9 +57,14 @@
             height: 40rem;
         }
 
-        .dc-input {
+        &--inputfield {
             width: 60%;
-            margin-top: 2.4rem;
+            margin-block-start: 2.4rem;
+            margin-bottom: 4.4rem;
+            @include mobile {
+                width: 100%;
+                margin-block-start: 3.2rem;
+            }
         }
 
         &--buttons_container {
@@ -86,8 +91,13 @@
             }
 
             &-otp-container {
+                display: flex;
+                flex-direction: column;
+                gap: 1.6rem;
                 width: 60%;
-                .dc-input {
+                margin-block-start: 1.6rem;
+                align-items: flex-start;
+                @include mobile {
                     width: 100%;
                 }
             }
diff --git a/packages/core/package.json b/packages/core/package.json
index 8e616b0ffdec..4ce0939ec933 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -96,7 +96,7 @@
         "@babel/polyfill": "^7.4.4",
         "@datadog/browser-rum": "^5.11.0",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-ui": "^1.10.7",
+        "@deriv-com/quill-ui": "^1.10.8",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/account": "^1.0.0",
         "@deriv/account-v2": "^1.0.0",
diff --git a/packages/trader/package.json b/packages/trader/package.json
index c1d6c60c651c..e4e08c8b6e3e 100644
--- a/packages/trader/package.json
+++ b/packages/trader/package.json
@@ -89,7 +89,7 @@
     "dependencies": {
         "@cloudflare/stream-react": "^1.9.1",
         "@deriv-com/analytics": "1.4.13",
-        "@deriv-com/quill-ui": "^1.10.7",
+        "@deriv-com/quill-ui": "^1.10.8",
         "@deriv-com/utils": "^0.0.20",
         "@deriv/api-types": "^1.0.172",
         "@deriv/components": "^1.0.0",

From a641893d928dbad5194893ceea84092336db9b8d Mon Sep 17 00:00:00 2001
From: Tay Sui Sin <suisin@regentmarkets.com>
Date: Fri, 24 May 2024 16:11:00 +0800
Subject: [PATCH 3/3] chore: update scss

---
 .../Profile/PhoneVerification/phone-verification.scss       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
index 4ce0bce1773a..97b0dd852f89 100644
--- a/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
+++ b/packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
@@ -59,11 +59,11 @@
 
         &--inputfield {
             width: 60%;
-            margin-block-start: 2.4rem;
+            margin-top: 2.4rem;
             margin-bottom: 4.4rem;
             @include mobile {
                 width: 100%;
-                margin-block-start: 3.2rem;
+                margin-top: 3.2rem;
             }
         }
 
@@ -95,7 +95,7 @@
                 flex-direction: column;
                 gap: 1.6rem;
                 width: 60%;
-                margin-block-start: 1.6rem;
+                margin-top: 1.6rem;
                 align-items: flex-start;
                 @include mobile {
                     width: 100%;