[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

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

@@ -14,12 +14,8 @@ const usePaymentMethods = () => {
 
         return Object.keys(p2p_payment_methods).map(key => {
             const payment_method = p2p_payment_methods[key];
-            const fields = Object.keys(payment_method.fields).map(field_key => payment_method.fields[field_key]);
-
             return {
                 ...payment_method,
-                /** Payment method field definitions. */
-                fields,
                 /** Payment method id */
                 id: key,
             };

packages/p2p-v2/.stylelintrc.js

@@ -6,7 +6,8 @@ module.exports = {
         'declaration-no-important': true,
         'selector-class-pattern': [
             // selectors must be prefixed with "p2p-v2-" to avoid name conflicts in other packages
-            '^p2p-v2-[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$',
+            // derivs pattern is added to allow classname overrides for @deriv-com/ui components
+            '^(p2p-v2|derivs|deriv)-[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-]?[a-z0-9]+)*)?$',
             {
                 message: 'Expected selector to match BEM CSS pattern and to be prefixed with "p2p-v2-"',
             },

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

@@ -72,6 +72,7 @@
     label,
     &__field:focus ~ &__label {
         position: absolute;
+        top: -0.5rem;
         display: block;
         transition: 0.2s;
         font-size: 1rem;

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

@@ -1 +1,3 @@
+// TODO: Delete this component once @deriv-com/ui has it published
+
 export { default as Dropdown } from './Dropdown';

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

@@ -0,0 +1,35 @@
+.p2p-v2-flyout-menu {
+    &__list {
+        position: absolute;
+        top: 4.8rem;
+        right: 0;
+        min-width: 12.8rem;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        z-index: 2;
+        border-radius: 0.4rem;
+        background: #fff;
+        box-shadow: 0 3.2rem 6.4rem 0 rgba(14, 14, 14, 0.14);
+        overflow-y: auto;
+        & > li {
+            width: 100%;
+            & > * {
+                padding: 1rem 1.6rem;
+                width: 100%;
+                display: inline-block;
+                & > * {
+                    color: #0e0e0e;
+                    font-weight: 400;
+                }
+                &:hover {
+                    cursor: pointer;
+                    background-color: #e6e9e9;
+                    & > * {
+                        text-decoration: none;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,24 @@
+import React, { HTMLAttributes, ReactNode, useRef, useState } from 'react';
+import { useOnClickOutside } from 'usehooks-ts';
+import FlyoutMenuList from './FlyoutMenuList';
+import FlyoutMenuToggle from './FlyoutMenuToggle';
+import './FlyoutMenu.scss';
+
+type TFlyoutMenuProps = HTMLAttributes<HTMLDivElement> & {
+    listItems?: ReactNode[];
+    renderIcon?: () => React.ReactNode;
+};
+
+const FlyoutMenu = ({ listItems, renderIcon, ...props }: TFlyoutMenuProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const flyoutMenuRef = useRef<HTMLDivElement>(null);
+    useOnClickOutside(flyoutMenuRef, () => setIsOpen(false));
+    return (
+        <div ref={flyoutMenuRef} {...props}>
+            <FlyoutMenuToggle onClick={() => setIsOpen(!isOpen)} renderIcon={renderIcon} />
+            <FlyoutMenuList isOpen={isOpen} listItems={listItems} />
+        </div>
+    );
+};
+
+export default FlyoutMenu;

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

@@ -0,0 +1,18 @@
+import React, { isValidElement, ReactNode } from 'react';
+
+type TFlyoutListProps = {
+    isOpen?: boolean;
+    listItems?: ReactNode[];
+};
+
+const FlyoutList = ({ isOpen = false, listItems }: TFlyoutListProps) => {
+    return isOpen ? (
+        <ul className='p2p-v2-flyout-menu__list'>
+            {listItems?.map(listItem => {
+                return <li key={isValidElement(listItem) ? listItem.key : listItem?.toString()}>{listItem}</li>;
+            })}
+        </ul>
+    ) : null;
+};
+
+export default FlyoutList;

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

@@ -0,0 +1,11 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+
+type TFlyoutToggleProps = HTMLAttributes<HTMLDivElement> & {
+    renderIcon?: () => ReactNode;
+};
+
+const FlyoutToggle = ({ renderIcon, ...props }: TFlyoutToggleProps) => {
+    return <div {...props}>{renderIcon?.()}</div>;
+};
+
+export default FlyoutToggle;

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

@@ -0,0 +1 @@
+export { default as FlyoutMenu } from './FlyoutMenu';

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

@@ -2,7 +2,6 @@
     @include mobile {
         height: calc(100vh - 4rem);
         width: 100vw;
-        margin: 12rem 0 0;
         border-radius: 0;
         display: grid;
         grid-template-rows: 6rem auto;
@@ -15,7 +14,7 @@
             grid-template-rows: auto;
         }
 
-        &--no-header--fixed-footer {
+        &--no-header-fixed-footer {
             grid-template-rows: auto 7rem;
         }
 

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

@@ -20,6 +20,8 @@ const FullPageMobileWrapper = ({
             className={clsx('p2p-v2-mobile-wrapper', {
                 'p2p-v2-mobile-wrapper--fixed-footer': shouldFixedFooter,
                 'p2p-v2-mobile-wrapper--no-footer': !renderFooter,
+                'p2p-v2-mobile-wrapper--no-header': !renderHeader,
+                'p2p-v2-mobile-wrapper--no-header-fixed-footer': !renderHeader && shouldFixedFooter,
             })}
         >
             {renderHeader && (

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

@@ -6,7 +6,6 @@
     align-items: center;
     font-size: 1.6rem;
     font-weight: 800;
-    position: fixed;
     border-bottom: 2px solid #f2f3f4;
 
     &--icon {

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

@@ -0,0 +1,27 @@
+.p2p-v2-payment-method-error-modal {
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 2.4rem;
+        width: 44rem;
+        @include mobile {
+            width: 100%;
+        }
+    }
+    &__buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        width: 100%;
+        &--cancel {
+            background: transparent;
+            border: 2px solid #999999;
+
+            &:active:not([disabled]) {
+                border: 1px solid #999999;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+import React, { useEffect } from 'react';
+import ReactModal from 'react-modal';
+import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import { customStyles } from '../../helpers';
+import '../styles.scss';
+import './PaymentMethodErrorModal.scss';
+
+type TPaymentMethodErrorModalProps = {
+    errorMessage: string;
+    isModalOpen: boolean;
+    onConfirm: () => void;
+    title: string;
+};
+
+const PaymentMethodErrorModal = ({ errorMessage, isModalOpen, onConfirm, title }: TPaymentMethodErrorModalProps) => {
+    useEffect(() => {
+        ReactModal.setAppElement('#v2_modal_root');
+    }, []);
+    // TODO: Remember to translate these strings
+    return (
+        <ReactModal
+            className='p2p-v2-payment-method-modal__modal'
+            contentLabel={title}
+            isOpen={isModalOpen}
+            shouldCloseOnOverlayClick={false}
+            style={customStyles}
+        >
+            <div className='p2p-v2-payment-method-error-modal__wrapper'>
+                <Text color='prominent' weight='bold'>
+                    {title}
+                </Text>
+                <Text color='prominent'>{errorMessage}</Text>
+                <div className='p2p-v2-payment-method-error-modal__buttons'>
+                    <Button onClick={onConfirm} size='lg'>
+                        Ok
+                    </Button>
+                </div>
+            </div>
+        </ReactModal>
+    );
+};
+
+export default PaymentMethodErrorModal;

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

@@ -0,0 +1 @@
+export { default as PaymentMethodErrorModal } from './PaymentMethodErrorModal';

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

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react';
+import ReactModal from 'react-modal';
+import { Button } from '@deriv-com/ui/dist/components/Button';
+import { Text } from '@deriv-com/ui/dist/components/Text';
+import { customStyles } from '../../helpers';
+import '../styles.scss';
+
+type TPaymentMethodModalProps = {
+    description?: string;
+    isModalOpen: boolean;
+    onConfirm: () => void;
+    onReject: () => void;
+    primaryButtonLabel: string;
+    secondaryButtonLabel: string;
+    title?: string;
+};
+
+const PaymentMethodModal = ({
+    description,
+    isModalOpen,
+    onConfirm,
+    onReject,
+    primaryButtonLabel,
+    secondaryButtonLabel,
+    title,
+}: TPaymentMethodModalProps) => {
+    useEffect(() => {
+        ReactModal.setAppElement('#v2_modal_root');
+    }, []);
+    // TODO: Remember to translate these strings
+    return (
+        <ReactModal
+            className='p2p-v2-payment-method-modal__modal'
+            contentLabel={title}
+            isOpen={isModalOpen}
+            shouldCloseOnOverlayClick={false}
+            style={customStyles}
+        >
+            <div className='p2p-v2-payment-method-modal__wrapper'>
+                <Text color='prominent' weight='bold'>
+                    {title}
+                </Text>
+                <Text color='prominent'>{description}</Text>
+                <div className='p2p-v2-payment-method-modal__buttons'>
+                    <Button
+                        className='p2p-v2-payment-method-modal__buttons--cancel'
+                        onClick={e => {
+                            e.currentTarget.setAttribute('disabled', 'disabled');
+                            onConfirm();
+                        }}
+                        size='lg'
+                        variant='outlined'
+                    >
+                        {secondaryButtonLabel}
+                    </Button>
+                    <Button
+                        onClick={e => {
+                            e.currentTarget.setAttribute('disabled', 'disabled');
+                            onReject();
+                        }}
+                        size='lg'
+                    >
+                        {primaryButtonLabel}
+                    </Button>
+                </div>
+            </div>
+        </ReactModal>
+    );
+};
+
+export default PaymentMethodModal;

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

@@ -0,0 +1 @@
+export { default as PaymentMethodModal } from './PaymentMethodModal';

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

@@ -0,0 +1,2 @@
+export * from './PaymentMethodErrorModal';
+export * from './PaymentMethodModal';

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

@@ -0,0 +1,40 @@
+.p2p-v2-payment-method-modal {
+    &__modal {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        right: auto;
+        bottom: auto;
+        margin-right: -50%;
+        transform: translate(-50%, -50%);
+        padding: 2.4rem;
+        border-radius: 8px;
+        background: #fff;
+        box-shadow: 0px 32px 64px 0px rgba(14, 14, 14, 0.14);
+    }
+    &__wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        gap: 2.4rem;
+        width: 44rem;
+        @include mobile {
+            width: 100%;
+        }
+    }
+    &__buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        gap: 1.6rem;
+        width: 100%;
+        &--cancel {
+            background: transparent;
+            border: 2px solid #999999;
+
+            &:active:not([disabled]) {
+                border: 1px solid #999999;
+            }
+        }
+    }
+}

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

@@ -0,0 +1 @@
+export * from './PaymentMethods';

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

@@ -0,0 +1,22 @@
+.p2p-v2-payment-method-card {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    max-width: 67.2rem;
+    border: 1px solid #d6dadb;
+    border-radius: 8px;
+    margin: 1.6rem 1.6rem 1.6rem 0;
+    overflow-wrap: break-word;
+    min-height: 12.8rem;
+    padding: 1.6rem;
+    width: 20.8rem;
+    @include mobile {
+        margin-right: 0;
+    }
+
+    @include mobile {
+        min-height: 8.8rem;
+        padding: 0.9rem 1rem;
+        width: 15.4rem;
+    }
+}