Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Suisin/upm1109/replace input component with quill UI textfields #94

Merged
merged 4 commits into from
May 27, 2024
Merged

Suisin/upm1109/replace input component with quill UI textfields #94

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4288f91
chore: try to add InputGroupButton for phone-verification
suisin-deriv May 24, 2024
aef1029
chore: remove Input field from component and use quill-ui TextField a…
suisin-deriv May 24, 2024
a641893
chore: update scss
suisin-deriv May 24, 2024
a8cf9e4
Merge branch 'suisin/utkarsha/UPM819/phone_verification_flow' of gith…
suisin-deriv May 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/account/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.8",
"@deriv/api-types": "^1.0.172",
"@deriv/components": "^1.0.0",
"@deriv/hooks": "^1.0.0",
Expand Down
6 changes: 4 additions & 2 deletions packages/account/src/Sections/Profile/PhoneVerification/confirm-phone-number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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'
Expand Down
19 changes: 16 additions & 3 deletions packages/account/src/Sections/Profile/PhoneVerification/otp-verification.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
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';
import { convertPhoneTypeDisplay } from 'Helpers/utils';
import ResendCodeTimer from './resend-code-timer';
import DidntGetTheCodeModal from './didnt-get-the-code-modal';
Expand All @@ -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
Expand Down Expand Up @@ -65,7 +73,12 @@ const OTPVerification = observer(({ phone_verification_type, setOtpVerification
)}
</div>
<div className='phone-verification__card--email-verification-otp-container'>
<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}
Expand Down
14 changes: 12 additions & 2 deletions packages/account/src/Sections/Profile/PhoneVerification/phone-verification.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,14 @@
height: 40rem;
}

.dc-input {
&--inputfield {
width: 60%;
margin-top: 2.4rem;
margin-bottom: 4.4rem;
@include mobile {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will need to update the css to mobile-screen / whichever suited once tablet design breakpoints in master 🙏

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeappp will update it once tablet design is here 👌

width: 100%;
margin-top: 3.2rem;
}
}

&--buttons_container {
Expand All @@ -86,8 +91,13 @@
}

&-otp-container {
display: flex;
flex-direction: column;
gap: 1.6rem;
width: 60%;
.dc-input {
margin-top: 1.6rem;
align-items: flex-start;
@include mobile {
width: 100%;
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.8",
"@deriv-com/utils": "^0.0.20",
"@deriv/account": "^1.0.0",
"@deriv/account-v2": "^1.0.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/trader/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.8",
"@deriv-com/utils": "^0.0.20",
"@deriv/api-types": "^1.0.172",
"@deriv/components": "^1.0.0",
Expand Down
Loading