Merge pull request #10 from ameerul-deriv/P2PS-1303-create-modal-comp…

…onent

Ameerul /P2PS 1303 Create modal component + P2PS 1304 implement functionality

packages/components/src/components/clipboard/clipboard.tsx

@@ -15,6 +15,7 @@ type TClipboard = {
     popoverClassName?: string;
     popoverAlignment?: 'top' | 'right' | 'bottom' | 'left';
     popover_props?: Partial<TPopoverProps>;
+    size?: string;
 };
 const Clipboard = ({
     text_copy,
@@ -25,6 +26,7 @@ const Clipboard = ({
     popoverClassName,
     popover_props = {},
     popoverAlignment = 'bottom',
+    size,
 }: TClipboard) => {
     const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard();
     const isMounted = useIsMounted();
@@ -49,22 +51,22 @@ const Clipboard = ({
             alignment={popoverAlignment}
             classNameBubble={classNames('dc-clipboard__popover', popoverClassName)}
             message={is_copied ? success_message : info_message}
-            relative_render
             {...popover_props}
+            zIndex='9999'
         >
-            {is_copied && (
+            {is_copied ? (
                 <Icon
                     icon='IcCheckmarkCircle'
                     custom_color='var(--status-success)'
                     className={classNames('dc-clipboard', className)}
                 />
-            )}
-            {!is_copied && (
+            ) : (
                 <Icon
                     icon={icon || 'IcClipboard'}
                     custom_color='var(--text-less-prominent)'
                     className={classNames('dc-clipboard', className)}
                     onClick={onClick}
+                    size={size ?? '16'}
                 />
             )}
         </Popover>

packages/components/src/components/icon/icons.js

@@ -385,6 +385,7 @@ import './common/ic-empty-folder.svg';
 import './common/ic-empty-star.svg';
 import './common/ic-ewallet.svg';
 import './common/ic-eye.svg';
+import './common/ic-facebook.svg';
 import './common/ic-filter.svg';
 import './common/ic-folder-open-filled.svg';
 import './common/ic-folder-open.svg';
@@ -548,6 +549,8 @@ import './common/ic-selfie-verification-verified.svg';
 import './common/ic-selfie-verification.svg';
 import './common/ic-selfie.svg';
 import './common/ic-send-message.svg';
+import './common/ic-share-link.svg';
+import './common/ic-share.svg';
 import './common/ic-skrill-dark.svg';
 import './common/ic-skrill-light.svg';
 import './common/ic-sort.svg';
@@ -561,6 +564,7 @@ import './common/ic-sticpay-light.svg';
 import './common/ic-stop.svg';
 import './common/ic-success-reset-trading-password.svg';
 import './common/ic-success.svg';
+import './common/ic-telegram.svg';
 import './common/ic-theme.svg';
 import './common/ic-thumbs-down.svg';
 import './common/ic-thumbs-up.svg';
@@ -595,6 +599,7 @@ import './common/ic-web-money-light.svg';
 import './common/ic-web-terminal.svg';
 import './common/ic-website.svg';
 import './common/ic-whats-app.svg';
+import './common/ic-whatsapp-filled.svg';
 import './common/ic-windows-logo.svg';
 import './common/ic-windows.svg';
 import './common/ic-wip.svg';

packages/components/src/components/modal/modal.tsx

@@ -194,7 +194,7 @@ const ModalElement = ({
                     )}
                     {has_close_icon && (
                         <div onClick={toggleModal} className='dc-modal-header__close' role='button'>
-                            <Icon icon='IcCross' color={close_icon_color} />
+                            <Icon icon='IcCross' color={close_icon_color} data_testid='dt-close-modal-icon' />
                         </div>
                     )}
                 </div>

packages/p2p/jest.config.js

@@ -12,6 +12,7 @@ module.exports = {
         '^Stores/(.*)$': '<rootDir>/src/stores/$1',
         '^Stores$': '<rootDir>/src/stores/index',
         '^Translations/(.*)$': '<rootDir>/src/translations/$1',
+        '^Types/(.*)$': '<rootDir>/src/types/$1',
         '^Utils/(.*)$': '<rootDir>/src/utils/$1',
     },
     testPathIgnorePatterns: [

packages/p2p/package.json

@@ -41,6 +41,7 @@
         "crc-32": "^1.2.0",
         "formik": "^2.1.4",
         "glob": "^7.1.5",
+        "html-to-image": "^1.11.11",
         "i18next": "^22.4.6",
         "lodash.debounce": "^4.0.8",
         "mobx": "^6.6.1",
@@ -50,8 +51,10 @@
         "react-content-loader": "^6.2.0",
         "react-dom": "^17.0.2",
         "react-i18next": "^11.11.0",
+        "react-qrcode-logo": "^2.9.0",
         "react-router": "^5.2.0",
         "react-router-dom": "^5.2.0",
+        "react-share": "^4.4.1",
         "react-simple-star-rating": "4.0.4",
         "react-svg-loader": "^3.0.3",
         "react-transition-group": "4.4.2",

packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/__tests__/share-my-ads-modal.spec.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { toPng } from 'html-to-image';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { base64_images } from 'Constants/base64-images';
+import ShareMyAdsModal from '../share-my-ads-modal';
+
+const el_modal = document.createElement('div');
+
+const mock_advert = {
+    account_currency: 'USD',
+    id: '128812781',
+    max_order_amount_limit_display: '2.00',
+    min_order_amount_limit_display: '1.00',
+    rate_display: '+0.16',
+    type: 'buy',
+};
+
+const mock_modal_manager = {
+    hideModal: jest.fn(),
+    is_modal_open: true,
+};
+
+jest.mock('html-to-image', () => ({
+    toPng: jest.fn(),
+}));
+
+jest.mock('react-qrcode-logo', () => ({ QRCode: () => <div>QR code</div> }));
+
+jest.mock('@deriv/components', () => ({
+    ...jest.requireActual('@deriv/components'),
+    DesktopWrapper: jest.fn(({ children }) => children),
+    MobileWrapper: jest.fn(({ children }) => children),
+}));
+
+jest.mock('Components/modal-manager/modal-manager-context', () => ({
+    ...jest.requireActual('Components/modal-manager/modal-manager-context'),
+    useModalManagerContext: jest.fn(() => mock_modal_manager),
+}));
+
+describe('<ShareMyAdsModal />', () => {
+    beforeAll(() => {
+        el_modal.setAttribute('id', 'modal_root');
+        document.body.appendChild(el_modal);
+    });
+
+    afterAll(() => {
+        document.body.removeChild(el_modal);
+    });
+
+    it('should render the ShareMyAdsModal', () => {
+        render(<ShareMyAdsModal advert={mock_advert} />);
+
+        expect(screen.getByText('Share this ad')).toBeInTheDocument();
+        expect(screen.getByText('Promote your ad by sharing the QR code and link.')).toBeInTheDocument();
+        expect(screen.getByText('QR code')).toBeInTheDocument();
+    });
+
+    it('should toggle the modal', () => {
+        render(<ShareMyAdsModal advert={mock_advert} />);
+
+        const close_icon = screen.getByTestId('dt-close-modal-icon');
+        userEvent.click(close_icon);
+
+        expect(mock_modal_manager.hideModal).toHaveBeenCalled();
+    });
+
+    it('should call setShowPopup when clicking on Share link', () => {
+        render(<ShareMyAdsModal advert={mock_advert} />);
+
+        const share_link_button = screen.getByRole('button', { name: 'Share link' });
+
+        userEvent.click(share_link_button);
+
+        expect(screen.getByTestId('dt_share_my-ads_popup')).toBeInTheDocument();
+    });
+
+    it('should call onCopy function when clicking on copy icon', async () => {
+        const writeText = jest.fn();
+
+        Object.assign(navigator, {
+            clipboard: {
+                writeText,
+            },
+        });
+
+        jest.useFakeTimers();
+
+        render(<ShareMyAdsModal advert={mock_advert} />);
+
+        const copy_button = screen.getByRole('button', { name: 'Copy link' });
+
+        userEvent.click(copy_button);
+
+        await act(async () => {
+            jest.runAllTimers();
+            await Promise.resolve();
+        });
+
+        expect(navigator.clipboard.writeText).toHaveBeenCalledWith(window.location.href);
+    });
+
+    it('should call handleGenerateImage function when clicking on Download this QR code button', async () => {
+        const dataUrl = base64_images.dp2p_logo;
+
+        (toPng as jest.MockedFunction<typeof toPng>).mockResolvedValueOnce(dataUrl);
+
+        render(<ShareMyAdsModal advert={mock_advert} />);
+
+        const download_button = screen.getByRole('button', { name: 'Download this QR code' });
+        userEvent.click(download_button);
+
+        expect(toPng).toHaveBeenCalled();
+    });
+});

packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/index.ts

@@ -0,0 +1,4 @@
+import ShareMyAdsModal from './share-my-ads-modal';
+import './share-my-ads-modal.scss';
+
+export default ShareMyAdsModal;

packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/index.ts

@@ -0,0 +1,4 @@
+import ShareMyAdsCard from './share-my-ads-card';
+import './share-my-ads-card.scss';
+
+export default ShareMyAdsCard;

packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/share-my-ads-card.scss

@@ -0,0 +1,76 @@
+.share-my-ads-card {
+    background: linear-gradient(349deg, var(--general-section-1) 36%, var(--brand-red-coral) 25%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    padding: 2rem;
+    position: relative;
+
+    @include mobile {
+        width: 90%;
+    }
+
+    &__icon {
+        height: 16px;
+        width: max-content;
+        margin: 1rem 0 3rem;
+
+        @include mobile {
+            margin-top: 0;
+        }
+    }
+
+    &__numbers {
+        display: flex;
+        flex-direction: row;
+
+        &-text {
+            display: flex;
+            flex-direction: column;
+            margin-bottom: 1rem;
+
+            &:first-child {
+                margin-right: 1rem;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &__qr {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-top: 2rem;
+
+        @include mobile {
+            margin-top: 1rem;
+        }
+
+        &-container {
+            background-color: #fff;
+            display: flex;
+            padding: 0.4rem;
+            border: 0.1rem solid var(--general-active);
+            border-radius: 1rem;
+            position: relative;
+            width: fit-content;
+        }
+
+        &-text {
+            margin: 1.5rem 0 2rem;
+
+            @include mobile {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    &__title {
+        margin-bottom: 2rem;
+    }
+}