Skip to content

Commit 1708a7e

Browse files
jim-derivjim-deriv
authored
[FEQ] Jim/FEQ-1388/payment methods (#12967)
* chore: remove fields transformation logic from usepaymentmethods hook * chore: update config * chore: temporarily add wallets components * feat: add flyout component * feat: add payment method card * chore: replace classnames with clsx * chore: fix style issues * chore: rename files * chore: update fullwidthmobilewrapper margin * chore: revert changes to fullpagemobilewrapper * chore: shift styles to respective component files * chore: add comment to show that the wallets related components should be deleted * chore: remove unnecessary commented code * chore: delete test cases for temporary components * chore: fix spacing issue for payment methods card * chore: add floating label to textarea component * chore: disable charater counter by default * chore: add react-modal * chore: add package-lock * chore: update styles * chore: correct typo * chore: update package and add isDirty and isSubmitting checks * chore: restore value to currentValue * chore: downgrade ui library version * chore: add modals * feat: add reducer and provider for advertiserpaymentmethods * chore: fix placeholder issue on textarea * chore: upgrade ui package * chore: update deriv-com/ui package * chore: add package-lock * chore: style lable for textarea with a value * chore: delete file with wrong name * chore: rename files * chore: remmove duplicate files * chore: remove duplicate files * Delete packages/p2p-v2/src/components/FlyOut directory * Delete packages/p2p-v2/src/components/Dropdown/dropdown.scss * chore: add app element * chore: remove div * chore: remove unnecessary attributes * chore: remove unnecessary attributes * chore: address reviews and fix self identified issues * chore: adress reviews * chore: use the text component from @deriv-com/ui * chore: change alignment * chore: update color based on the textarea status * chore: seperate component into sub-components * chore: rename file * chore: add tsdoc * refactor: extract reducer into its own file * chore: remove redandunt css attribute * chore: rename component to a more meaningful name * refactor: move form and header components to components folder * refactor: drop provider pattern * chore: change name to a shorter one * chore: add tsdoc and update names and folders * refactor: combine modals into one * chore: address comments * chore: update object property * chore: remove duplicate modal * chore: extract footer component and address review comments * chore: address code reviews * chore: use button instead of text * chore: address sonarcloud * chore: use input from @deriv-com/ui
1 parent 2e05635 commit 1708a7e

File tree

75 files changed

+1552
-43
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+1552
-43
lines changed

‎packages/api/src/hooks/p2p/entity/payment-method/p2p-payment-methods/usePaymentMethods.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,8 @@ const usePaymentMethods = () => {
1414

1515
return Object.keys(p2p_payment_methods).map(key => {
1616
const payment_method = p2p_payment_methods[key];
17-
const fields = Object.keys(payment_method.fields).map(field_key => payment_method.fields[field_key]);
18-
1917
return {
2018
...payment_method,
21-
/** Payment method field definitions. */
22-
fields,
2319
/** Payment method id */
2420
id: key,
2521
};

‎packages/p2p-v2/.stylelintrc.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ module.exports = {
66
'declaration-no-important': true,
77
'selector-class-pattern': [
88
// selectors must be prefixed with "p2p-v2-" to avoid name conflicts in other packages
9-
'^p2p-v2-[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$',
9+
// derivs pattern is added to allow classname overrides for @deriv-com/ui components
10+
'^(p2p-v2|derivs|deriv)-[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$',
1011
{
1112
message: 'Expected selector to match BEM CSS pattern and to be prefixed with "p2p-v2-"',
1213
},

‎packages/p2p-v2/src/components/Dropdown/Dropdown.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
label,
7373
&__field:focus ~ &__label {
7474
position: absolute;
75+
top: -0.5rem;
7576
display: block;
7677
transition: 0.2s;
7778
font-size: 1rem;

‎packages/p2p-v2/src/components/Dropdown/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
// TODO: Delete this component once @deriv-com/ui has it published
2+
13
export { default as Dropdown } from './Dropdown';

‎packages/p2p-v2/src/components/FlyoutMenu/FlyoutMenu.scss

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.p2p-v2-flyout-menu {
2+
&__list {
3+
position: absolute;
4+
top: 4.8rem;
5+
right: 0;
6+
min-width: 12.8rem;
7+
display: flex;
8+
flex-direction: column;
9+
align-items: flex-start;
10+
z-index: 2;
11+
border-radius: 0.4rem;
12+
background: #fff;
13+
box-shadow: 0 3.2rem 6.4rem 0 rgba(14, 14, 14, 0.14);
14+
overflow-y: auto;
15+
& > li {
16+
width: 100%;
17+
& > * {
18+
padding: 1rem 1.6rem;
19+
width: 100%;
20+
display: inline-block;
21+
& > * {
22+
color: #0e0e0e;
23+
font-weight: 400;
24+
}
25+
&:hover {
26+
cursor: pointer;
27+
background-color: #e6e9e9;
28+
& > * {
29+
text-decoration: none;
30+
}
31+
}
32+
}
33+
}
34+
}
35+
}

‎packages/p2p-v2/src/components/FlyoutMenu/FlyoutMenu.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { HTMLAttributes, ReactNode, useRef, useState } from 'react';
2+
import { useOnClickOutside } from 'usehooks-ts';
3+
import FlyoutMenuList from './FlyoutMenuList';
4+
import FlyoutMenuToggle from './FlyoutMenuToggle';
5+
import './FlyoutMenu.scss';
6+
7+
type TFlyoutMenuProps = HTMLAttributes<HTMLDivElement> & {
8+
listItems?: ReactNode[];
9+
renderIcon?: () => React.ReactNode;
10+
};
11+
12+
const FlyoutMenu = ({ listItems, renderIcon, ...props }: TFlyoutMenuProps) => {
13+
const [isOpen, setIsOpen] = useState(false);
14+
const flyoutMenuRef = useRef<HTMLDivElement>(null);
15+
useOnClickOutside(flyoutMenuRef, () => setIsOpen(false));
16+
return (
17+
<div ref={flyoutMenuRef} {...props}>
18+
<FlyoutMenuToggle onClick={() => setIsOpen(!isOpen)} renderIcon={renderIcon} />
19+
<FlyoutMenuList isOpen={isOpen} listItems={listItems} />
20+
</div>
21+
);
22+
};
23+
24+
export default FlyoutMenu;

‎packages/p2p-v2/src/components/FlyoutMenu/FlyoutMenuList.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { isValidElement, ReactNode } from 'react';
2+
3+
type TFlyoutListProps = {
4+
isOpen?: boolean;
5+
listItems?: ReactNode[];
6+
};
7+
8+
const FlyoutList = ({ isOpen = false, listItems }: TFlyoutListProps) => {
9+
return isOpen ? (
10+
<ul className='p2p-v2-flyout-menu__list'>
11+
{listItems?.map(listItem => {
12+
return <li key={isValidElement(listItem) ? listItem.key : listItem?.toString()}>{listItem}</li>;
13+
})}
14+
</ul>
15+
) : null;
16+
};
17+
18+
export default FlyoutList;

‎packages/p2p-v2/src/components/FlyoutMenu/FlyoutMenuToggle.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React, { HTMLAttributes, ReactNode } from 'react';
2+
3+
type TFlyoutToggleProps = HTMLAttributes<HTMLDivElement> & {
4+
renderIcon?: () => ReactNode;
5+
};
6+
7+
const FlyoutToggle = ({ renderIcon, ...props }: TFlyoutToggleProps) => {
8+
return <div {...props}>{renderIcon?.()}</div>;
9+
};
10+
11+
export default FlyoutToggle;

‎packages/p2p-v2/src/components/FlyoutMenu/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as FlyoutMenu } from './FlyoutMenu';

‎packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
@include mobile {
33
height: calc(100vh - 4rem);
44
width: 100vw;
5-
margin: 12rem 0 0;
65
border-radius: 0;
76
display: grid;
87
grid-template-rows: 6rem auto;
@@ -15,7 +14,7 @@
1514
grid-template-rows: auto;
1615
}
1716

18-
&--no-header--fixed-footer {
17+
&--no-header-fixed-footer {
1918
grid-template-rows: auto 7rem;
2019
}
2120

‎packages/p2p-v2/src/components/FullPageMobileWrapper/FullPageMobileWrapper.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ const FullPageMobileWrapper = ({
2020
className={clsx('p2p-v2-mobile-wrapper', {
2121
'p2p-v2-mobile-wrapper--fixed-footer': shouldFixedFooter,
2222
'p2p-v2-mobile-wrapper--no-footer': !renderFooter,
23+
'p2p-v2-mobile-wrapper--no-header': !renderHeader,
24+
'p2p-v2-mobile-wrapper--no-header-fixed-footer': !renderHeader && shouldFixedFooter,
2325
})}
2426
>
2527
{renderHeader && (

‎packages/p2p-v2/src/components/MobileCloseHeader/MobileCloseHeader.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
align-items: center;
77
font-size: 1.6rem;
88
font-weight: 800;
9-
position: fixed;
109
border-bottom: 2px solid #f2f3f4;
1110

1211
&--icon {

‎packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
.p2p-v2-payment-method-error-modal {
2+
&__wrapper {
3+
display: flex;
4+
flex-direction: column;
5+
justify-content: center;
6+
align-items: center;
7+
gap: 2.4rem;
8+
width: 44rem;
9+
@include mobile {
10+
width: 100%;
11+
}
12+
}
13+
&__buttons {
14+
display: flex;
15+
flex-direction: row;
16+
justify-content: center;
17+
width: 100%;
18+
&--cancel {
19+
background: transparent;
20+
border: 2px solid #999999;
21+
22+
&:active:not([disabled]) {
23+
border: 1px solid #999999;
24+
}
25+
}
26+
}
27+
}

‎packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/PaymentMethodErrorModal.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useEffect } from 'react';
2+
import ReactModal from 'react-modal';
3+
import { Button } from '@deriv-com/ui/dist/components/Button';
4+
import { Text } from '@deriv-com/ui/dist/components/Text';
5+
import { customStyles } from '../../helpers';
6+
import '../styles.scss';
7+
import './PaymentMethodErrorModal.scss';
8+
9+
type TPaymentMethodErrorModalProps = {
10+
errorMessage: string;
11+
isModalOpen: boolean;
12+
onConfirm: () => void;
13+
title: string;
14+
};
15+
16+
const PaymentMethodErrorModal = ({ errorMessage, isModalOpen, onConfirm, title }: TPaymentMethodErrorModalProps) => {
17+
useEffect(() => {
18+
ReactModal.setAppElement('#v2_modal_root');
19+
}, []);
20+
// TODO: Remember to translate these strings
21+
return (
22+
<ReactModal
23+
className='p2p-v2-payment-method-modal__modal'
24+
contentLabel={title}
25+
isOpen={isModalOpen}
26+
shouldCloseOnOverlayClick={false}
27+
style={customStyles}
28+
>
29+
<div className='p2p-v2-payment-method-error-modal__wrapper'>
30+
<Text color='prominent' weight='bold'>
31+
{title}
32+
</Text>
33+
<Text color='prominent'>{errorMessage}</Text>
34+
<div className='p2p-v2-payment-method-error-modal__buttons'>
35+
<Button onClick={onConfirm} size='lg'>
36+
Ok
37+
</Button>
38+
</div>
39+
</div>
40+
</ReactModal>
41+
);
42+
};
43+
44+
export default PaymentMethodErrorModal;

‎packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodErrorModal/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as PaymentMethodErrorModal } from './PaymentMethodErrorModal';

‎packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/PaymentMethodModal.tsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React, { useEffect } from 'react';
2+
import ReactModal from 'react-modal';
3+
import { Button } from '@deriv-com/ui/dist/components/Button';
4+
import { Text } from '@deriv-com/ui/dist/components/Text';
5+
import { customStyles } from '../../helpers';
6+
import '../styles.scss';
7+
8+
type TPaymentMethodModalProps = {
9+
description?: string;
10+
isModalOpen: boolean;
11+
onConfirm: () => void;
12+
onReject: () => void;
13+
primaryButtonLabel: string;
14+
secondaryButtonLabel: string;
15+
title?: string;
16+
};
17+
18+
const PaymentMethodModal = ({
19+
description,
20+
isModalOpen,
21+
onConfirm,
22+
onReject,
23+
primaryButtonLabel,
24+
secondaryButtonLabel,
25+
title,
26+
}: TPaymentMethodModalProps) => {
27+
useEffect(() => {
28+
ReactModal.setAppElement('#v2_modal_root');
29+
}, []);
30+
// TODO: Remember to translate these strings
31+
return (
32+
<ReactModal
33+
className='p2p-v2-payment-method-modal__modal'
34+
contentLabel={title}
35+
isOpen={isModalOpen}
36+
shouldCloseOnOverlayClick={false}
37+
style={customStyles}
38+
>
39+
<div className='p2p-v2-payment-method-modal__wrapper'>
40+
<Text color='prominent' weight='bold'>
41+
{title}
42+
</Text>
43+
<Text color='prominent'>{description}</Text>
44+
<div className='p2p-v2-payment-method-modal__buttons'>
45+
<Button
46+
className='p2p-v2-payment-method-modal__buttons--cancel'
47+
onClick={e => {
48+
e.currentTarget.setAttribute('disabled', 'disabled');
49+
onConfirm();
50+
}}
51+
size='lg'
52+
variant='outlined'
53+
>
54+
{secondaryButtonLabel}
55+
</Button>
56+
<Button
57+
onClick={e => {
58+
e.currentTarget.setAttribute('disabled', 'disabled');
59+
onReject();
60+
}}
61+
size='lg'
62+
>
63+
{primaryButtonLabel}
64+
</Button>
65+
</div>
66+
</div>
67+
</ReactModal>
68+
);
69+
};
70+
71+
export default PaymentMethodModal;

‎packages/p2p-v2/src/components/Modals/PaymentMethods/PaymentMethodModal/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default as PaymentMethodModal } from './PaymentMethodModal';

‎packages/p2p-v2/src/components/Modals/PaymentMethods/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './PaymentMethodErrorModal';
2+
export * from './PaymentMethodModal';

‎packages/p2p-v2/src/components/Modals/PaymentMethods/styles.scss

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
.p2p-v2-payment-method-modal {
2+
&__modal {
3+
position: absolute;
4+
top: 50%;
5+
left: 50%;
6+
right: auto;
7+
bottom: auto;
8+
margin-right: -50%;
9+
transform: translate(-50%, -50%);
10+
padding: 2.4rem;
11+
border-radius: 8px;
12+
background: #fff;
13+
box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
14+
}
15+
&__wrapper {
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: flex-start;
19+
gap: 2.4rem;
20+
width: 44rem;
21+
@include mobile {
22+
width: 100%;
23+
}
24+
}
25+
&__buttons {
26+
display: flex;
27+
flex-direction: row;
28+
justify-content: flex-end;
29+
gap: 1.6rem;
30+
width: 100%;
31+
&--cancel {
32+
background: transparent;
33+
border: 2px solid #999999;
34+
35+
&:active:not([disabled]) {
36+
border: 1px solid #999999;
37+
}
38+
}
39+
}
40+
}

‎packages/p2p-v2/src/components/Modals/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './PaymentMethods';

‎packages/p2p-v2/src/components/PaymentMethodCard/PaymentMethodCard.scss

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.p2p-v2-payment-method-card {
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
max-width: 67.2rem;
6+
border: 1px solid #d6dadb;
7+
border-radius: 8px;
8+
margin: 1.6rem 1.6rem 1.6rem 0;
9+
overflow-wrap: break-word;
10+
min-height: 12.8rem;
11+
padding: 1.6rem;
12+
width: 20.8rem;
13+
@include mobile {
14+
margin-right: 0;
15+
}
16+
17+
@include mobile {
18+
min-height: 8.8rem;
19+
padding: 0.9rem 1rem;
20+
width: 15.4rem;
21+
}
22+
}

0 commit comments

Comments
 (0)