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

refactor: ♻️ migrated code to TS #45

Merged
merged 5 commits into from
Aug 11, 2023
Merged

refactor: ♻️ migrated code to TS #45

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
78c3b9f
refactor: :recycle: migrated code to TS
likhith-deriv Jul 19, 2023
067e4a7
refactor: :recycle: incorporated review comments
likhith-deriv Aug 7, 2023
8c6103b
refactor: :recycle: incorporated review comments
likhith-deriv Aug 7, 2023
60d5901
Merge branch 'likhith/WEBREL-795/Refactor-real-account-signup-flow' i…
likhith-deriv Aug 10, 2023
149d91f
Update packages/account/src/Types/common-prop.type.ts
likhith-deriv Aug 11, 2023
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
4 changes: 2 additions & 2 deletions ...rms-of-use/__tests__/terms-of-use.spec.js → ...ms-of-use/__tests__/terms-of-use.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,8 @@ describe('<TermsOfUse/>', () => {
});

it('should render TermsOfUse component for maltainvest accounts and show "Add account" button for mobile', () => {
isMobile.mockReturnValue(true);
isDesktop.mockReturnValue(false);
(isMobile as jest.Mock).mockReturnValue(true);
(isDesktop as jest.Mock).mockReturnValue(false);

mock_props.real_account_signup_target = 'maltainvest';

Expand Down
10 changes: 9 additions & 1 deletion ...omponents/terms-of-use/checkbox-field.jsx → ...omponents/terms-of-use/checkbox-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
import React from 'react';
import { Checkbox } from '@deriv/components';
import { FieldInputProps } from 'formik';

type TCheckboxFieldProps = {
field: FieldInputProps<boolean>;
id: string;
className: string;
label: string;
};

/*
* This component is used with Formik's Field component.
*/
const CheckboxField = ({ field: { name, value, onChange }, id, label, className, ...props }) => {
const CheckboxField = ({ field: { name, value, onChange }, id, label, className, ...props }: TCheckboxFieldProps) => {
Copy link

Choose a reason for hiding this comment

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

If this component is being used with formik Field component, can we try wrapping this with Field directly and we'll be able to remove this field prop?

Copy link
Owner Author

@likhith-deriv likhith-deriv Aug 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

Can u please elaborate?
Checkbox field is passed as a component to Field
<Field component={CheckboxField}

return (
<div className={className}>
<Checkbox value={value} name={name} label={label} onChange={onChange} {...props} />
Expand Down
3 changes: 0 additions & 3 deletions packages/account/src/Components/terms-of-use/index.js
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions packages/account/src/Components/terms-of-use/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import TermsOfUse from './terms-of-use';

export default TermsOfUse;
2 changes: 1 addition & 1 deletion ...ts/terms-of-use/terms-of-use-messages.jsx → ...ts/terms-of-use/terms-of-use-messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { Text } from '@deriv/components';

export const Hr = () => <div className='terms-of-use__hr' />;

export const BrokerSpecificMessage = ({ target }) => (
export const BrokerSpecificMessage = ({ target }: { target: string }) => (
Copy link

Choose a reason for hiding this comment

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

as we know the possible values of target, can we try writing an enum for it with just these possible 5 values?

Copy link
Owner Author

Choose a reason for hiding this comment

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

Will get confirmation on the active broker codes then change to enum

<React.Fragment>
{target === 'svg' && <SVGDescription />}
{target === 'iom' && <IOMDescription />}
Expand Down
1 change: 1 addition & 0 deletions packages/account/src/Components/terms-of-use/terms-of-use.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
flex-grow: 1;
margin: 0 8rem !important;
width: 84% !important;
padding-bottom: unset;
Copy link

Choose a reason for hiding this comment

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

since we set the padding-bottom at the top level, isn't it available on mobile as well as there's no override?
Am I missing something?


@include mobile {
margin: unset !important;
Expand Down
34 changes: 26 additions & 8 deletions .../Components/terms-of-use/terms-of-use.jsx → .../Components/terms-of-use/terms-of-use.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,31 @@ import {
} from '@deriv/components';
import { isDesktop, isMobile, PlatformContext } from '@deriv/shared';
import { localize, Localize } from '@deriv/translations';
import CheckboxField from './checkbox-field.jsx';
import { SharedMessage, BrokerSpecificMessage, Hr } from './terms-of-use-messages.jsx';
import CheckboxField from './checkbox-field';
import { SharedMessage, BrokerSpecificMessage, Hr } from './terms-of-use-messages';
import './terms-of-use.scss';

type TTermsOfUseFormProps = {
agreed_tos: boolean;
agreed_tnc: boolean;
};

type TTermsOfUseProps = {
getCurrentStep: () => number;
Copy link
Collaborator

Choose a reason for hiding this comment

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

the list is not huge but anyway, wouldn’t it be better to sort all fields alphabetically? :)

onCancel: (current_step: number, goToPreviousStep: () => void) => void;
goToPreviousStep: () => void;
goToNextStep: () => void;
onSubmit: (
current_step: number | null,
values: TTermsOfUseFormProps,
action: (isSubmitting: boolean) => void,
next_step: () => void
) => void;
value: TTermsOfUseFormProps;
real_account_signup_target: string;
form_error?: string;
};

const TermsOfUse = ({
getCurrentStep,
onCancel,
Expand All @@ -24,7 +45,7 @@ const TermsOfUse = ({
value,
real_account_signup_target,
...props
}) => {
}: TTermsOfUseProps) => {
const { is_appstore } = React.useContext(PlatformContext);

const handleCancel = () => {
Expand All @@ -43,7 +64,7 @@ const TermsOfUse = ({
<Formik
initialValues={value}
onSubmit={(values, actions) => {
onSubmit(getCurrentStep() - 1, {}, actions.setSubmitting, goToNextStep);
onSubmit(getCurrentStep() - 1, values, actions.setSubmitting, goToNextStep);
}}
>
{({ handleSubmit, values, isSubmitting }) => (
Expand All @@ -56,10 +77,7 @@ const TermsOfUse = ({
is_disabled={isDesktop()}
>
<ThemedScrollbars>
<div
className={cn('details-form__elements', 'terms-of-use')}
style={{ paddingBottom: isDesktop() ? 'unset' : null }}
>
<div className={cn('details-form__elements', 'terms-of-use')}>
Copy link

@shahzaib-deriv shahzaib-deriv Jul 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

since we set the padding-bottom at the top level, isn't it available on mobile as well as there's no override?
Am I missing something?

Copy link
Owner Author

Choose a reason for hiding this comment

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

unset or null does the same as there is no override available

Copy link
Collaborator

Choose a reason for hiding this comment

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

can we change this classnames import to commonly used in our app? :)

<BrokerSpecificMessage target={real_account_signup_target} />
<Hr />
<SharedMessage />
Expand Down
3 changes: 1 addition & 2 deletions packages/account/src/Configs/terms-of-use-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { getDefaultFields, isDesktop } from '@deriv/shared';
import { getDefaultFields, isDesktop, TSchema } from '@deriv/shared';

import { localize } from '@deriv/translations';
import { TSchema } from 'Types';

const terms_of_use_config: TSchema = {
agreed_tos: {
Expand Down