[P2PS] farrah/P2PS-1953/feat: ad terms

packages/p2p/src/components/block-selector/block-selector.scss

@@ -0,0 +1,26 @@
+.block-selector {
+    margin: 2rem 0;
+
+    &__label {
+        display: flex;
+        align-items: center;
+        column-gap: 1rem;
+    }
+
+    &__options {
+        display: flex;
+        column-gap: 1rem;
+    }
+
+    &__option {
+        background-color: transparent;
+        border: 1px solid var(--border-normal);
+        border-radius: 0.4rem;
+        padding: 0.7rem 1.6rem;
+        width: 12.4rem;
+
+        &--selected {
+            background-color: var(--general-main-3);
+        }
+    }
+}

packages/p2p/src/components/block-selector/block-selector.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Icon, Popover, Text } from '@deriv/components';
+import { Localize } from 'Components/i18next';
+
+type TBlockSelectorOptionProps = {
+    is_selected?: boolean;
+    name: string;
+    value: number;
+};
+type TBlockSelectorProps = {
+    label: string;
+    onSelect: (value: number) => void;
+    options: TBlockSelectorOptionProps[];
+    tooltip_info: string;
+    value: number;
+};
+
+const BlockSelector = ({ label, onSelect, options, tooltip_info, value }: TBlockSelectorProps) => {
+    const [selectors, setSelectors] = React.useState(options);
+    const [selected_value, setSelectedValue] = React.useState(value);
+    const onClick = e => {
+        const selected_value = e.target.getAttribute('data-value');
+        onSelect?.(0);
+        setSelectedValue(0);
+
+        const updated_selectors = selectors.map(selector => {
+            const is_selected = !selector.is_selected && selector.value == selected_value;
+
+            if (is_selected) {
+                onSelect?.(selector.value);
+                setSelectedValue(selector.value);
+            }
+
+            return { ...selector, is_selected };
+        });
+
+        setSelectors(updated_selectors);
+    };
+
+    return (
+        <div className='block-selector'>
+            <div className='block-selector__label'>
+                <Text color='less-prominent' size='xs' line_height='xl'>
+                    <Localize i18n_default_text={label} />
+                </Text>
+                <Popover alignment='top' message={<Localize i18n_default_text={tooltip_info} />}>
+                    <Icon color='disabled' icon='IcInfoOutline' />
+                </Popover>
+            </div>
+            <div className='block-selector__options'>
+                {selectors.map(option => (
+                    <Text
+                        as='div'
+                        align='center'
+                        color={option.value === selected_value ? 'colored-background' : 'less-prominent'}
+                        data-value={option.value}
+                        key={option.name}
+                        onClick={onClick}
+                        className={classNames('block-selector__option', {
+                            'block-selector__option--selected': option.value === selected_value,
+                        })}
+                    >
+                        {option.name}
+                    </Text>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default BlockSelector;

packages/p2p/src/components/block-selector/index.ts

@@ -0,0 +1,4 @@
+import BlockSelector from './block-selector';
+import './block-selector.scss';
+
+export default BlockSelector;

packages/p2p/src/components/modal-manager/modals/ad-cancel-modal/__tests__/ad-cancel-modal.spec.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import AdCancelModal from '../ad-cancel-modal';
+
+const mock_modal_manager = {
+    hideModal: jest.fn(),
+    is_modal_open: true,
+};
+
+jest.mock('Components/modal-manager/modal-manager-context');
+const mocked_useModalManagerContext = useModalManagerContext as jest.MockedFunction<
+    () => Partial<ReturnType<typeof useModalManagerContext>>
+>;
+
+mocked_useModalManagerContext.mockImplementation(() => mock_modal_manager);
+
+describe('<AdCancelModal/>', () => {
+    let modal_root_el: HTMLElement;
+    beforeAll(() => {
+        modal_root_el = document.createElement('div');
+        modal_root_el.setAttribute('id', 'modal_root');
+        document.body.appendChild(modal_root_el);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(modal_root_el);
+    });
+    it('should render the AdCancelModal', () => {
+        const message = "If you choose to cancel, the details you've entered will be lost.";
+        const onConfirm = jest.fn();
+        const title = 'Cancel ad creation?';
+        render(<AdCancelModal message={message} onConfirm={onConfirm} title={title} />);
+
+        expect(
+            screen.getByText("If you choose to cancel, the details you've entered will be lost.")
+        ).toBeInTheDocument();
+        expect(screen.getByText('Cancel ad creation?')).toBeInTheDocument();
+    });
+    it("should close modal on clicking Don't cancel button", () => {
+        const message = 'If you choose to cancel, the edited details will be lost.';
+        const title = 'Cancel your edits?';
+
+        render(<AdCancelModal message={message} title={title} />);
+
+        const dont_cancel_button = screen.getByText("Don't cancel");
+        userEvent.click(dont_cancel_button);
+        expect(mock_modal_manager.hideModal).toHaveBeenCalled();
+    });
+    it('should call onConfirm on clicking Cancel button', () => {
+        const message = 'If you choose to cancel, the edited details will be lost.';
+        const onConfirm = jest.fn();
+        const title = 'Cancel your edits?';
+
+        render(<AdCancelModal message={message} onConfirm={onConfirm} title={title} />);
+
+        const cancel_button = screen.getByText('Cancel');
+        userEvent.click(cancel_button);
+        expect(onConfirm).toHaveBeenCalled();
+    });
+});

packages/p2p/src/components/modal-manager/modals/edit-ad-cancel-modal/edit-ad-cancel-modal.tsx → packages/p2p/src/components/modal-manager/modals/ad-cancel-modal/ad-cancel-modal.tsx

@@ -2,18 +2,21 @@ import React from 'react';
 import { Button, Modal, Text } from '@deriv/components';
 import { localize, Localize } from 'Components/i18next';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
-import { useStores } from 'Stores';
 
-const EditAdCancelModal = () => {
-    const { my_ads_store } = useStores();
+type TAdCancelModalProps = {
+    message: string;
+    onConfirm?: () => void;
+    title: string;
+};
+
+const AdCancelModal = ({ message, onConfirm, title }: TAdCancelModalProps) => {
     const { hideModal, is_modal_open } = useModalManagerContext();
-    const { setShowEditAdForm } = my_ads_store;
 
     return (
-        <Modal has_close_icon={false} is_open={is_modal_open} small title={localize('Cancel your edits?')}>
+        <Modal has_close_icon={false} is_open={is_modal_open} small title={localize(title)}>
             <Modal.Body>
                 <Text as='p' size='xs' color='prominent'>
-                    <Localize i18n_default_text='If you choose to cancel, the edited details will be lost.' />
+                    <Localize i18n_default_text={message} />
                 </Text>
             </Modal.Body>
             <Modal.Footer>
@@ -22,7 +25,7 @@ const EditAdCancelModal = () => {
                     text={localize('Cancel')}
                     onClick={() => {
                         hideModal();
-                        setShowEditAdForm(false);
+                        onConfirm?.();
                     }}
                     secondary
                     large
@@ -33,4 +36,4 @@ const EditAdCancelModal = () => {
     );
 };
 
-export default EditAdCancelModal;
+export default AdCancelModal;

packages/p2p/src/components/modal-manager/modals/ad-cancel-modal/index.ts

@@ -0,0 +1,3 @@
+import AdCancelModal from './ad-cancel-modal';
+
+export default AdCancelModal;

packages/p2p/src/components/modal-manager/modals/preferred-countries-modal/index.ts

@@ -0,0 +1,4 @@
+import PreferredCountriesModal from './preferred-countries-modal';
+import './preferred-countries-modal.scss';
+
+export default PreferredCountriesModal;

packages/p2p/src/components/modal-manager/modals/preferred-countries-modal/preferred-countries-modal.scss

@@ -0,0 +1,25 @@
+.preferred-countries-modal {
+    &__search-field {
+        margin-bottom: 0;
+
+        input {
+            margin-left: 2.5rem;
+        }
+    }
+
+    &__checkbox {
+        padding: 1.6rem 1rem;
+    }
+}
+
+.dc-modal__container_preferred-countries-modal {
+    .dc-modal-body {
+        padding: 0;
+    }
+
+    .dc-modal-footer {
+        > button {
+            flex: 1;
+        }
+    }
+}

packages/p2p/src/components/modal-manager/modals/preferred-countries-modal/preferred-countries-modal.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Field, Form, Formik, FormikValues } from 'formik';
+import { Button, Icon, Input, Modal } from '@deriv/components';
+import { localize, Localize } from 'Components/i18next';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+
+type tPreferredCountriesModal = {
+    onApply?: () => void;
+};
+
+const PreferredCountriesModal = ({ onApply }: tPreferredCountriesModal) => {
+    const { hideModal, is_modal_open } = useModalManagerContext();
+
+    return (
+        <Modal
+            className='preferred-countries-modal'
+            is_open={is_modal_open}
+            small
+            title={localize('Preferred countries')}
+            toggleModal={() => hideModal()}
+        >
+            <Modal.Body>
+                <Formik initialValues={{ search: '' }}>
+                    {({ submitForm, values: { search } }) => (
+                        <Form>
+                            <Field name='search'>
+                                {({ field }: FormikValues) => (
+                                    <Input
+                                        {...field}
+                                        className='preferred-countries-modal__search-field'
+                                        data-lpignore='true'
+                                        leading_icon={<Icon icon='IcSearch' />}
+                                        name='search'
+                                        onFocus={submitForm}
+                                        placeholder={localize('Search countries')}
+                                        trailing_icon={search ? <Icon color='secondary' icon='IcCloseCircle' /> : null}
+                                        type='text'
+                                    />
+                                )}
+                            </Field>
+                        </Form>
+                    )}
+                </Formik>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button large onClick={hideModal} secondary>
+                    <Localize i18n_default_text='Clear' />
+                </Button>
+                <Button primary large onClick={onApply}>
+                    <Localize i18n_default_text='Apply' />
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+export default PreferredCountriesModal;

packages/p2p/src/constants/modals.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 
 export const Modals = {
+    AdCancelModal: React.lazy(
+        () => import(/* webpackChunkName: "ad-cancel-modal" */ 'Components/modal-manager/modals/ad-cancel-modal')
+    ),
     AdCreateEditErrorModal: React.lazy(
         () =>
             import(
@@ -85,12 +88,6 @@ export const Modals = {
     DisclaimerModal: React.lazy(
         () => import(/* webpackChunkName: "disclaimer-modal" */ 'Components/modal-manager/modals/disclaimer-modal')
     ),
-    EditAdCancelModal: React.lazy(
-        () =>
-            import(
-                /* webpackChunkName: "edit-ad-cancel-modal" */ 'Components/modal-manager/modals/edit-ad-cancel-modal'
-            )
-    ),
     EmailLinkBlockedModal: React.lazy(
         () =>
             import(
@@ -182,6 +179,12 @@ export const Modals = {
                 /* webpackChunkName: "order-time-tooltip-modal" */ 'Components/modal-manager/modals/order-time-tooltip-modal'
             )
     ),
+    PreferredCountriesModal: React.lazy(
+        () =>
+            import(
+                /* webpackChunkName: "preferred-countries-modal" */ 'Components/modal-manager/modals/preferred-countries-modal'
+            )
+    ),
     QuickAddModal: React.lazy(
         () => import(/* webpackChunkName: "quick-add-modal" */ 'Components/modal-manager/modals/quick-add-modal')
     ),