From cef5692759699ee66dd9413cd8eed4fc555a2d15 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 26 Jul 2023 10:28:37 +0800 Subject: [PATCH 1/4] chore: create share my ads modal --- .../src/components/clipboard/clipboard.tsx | 3 + .../src/components/icon/common/ic-edit.svg | 2 +- .../components/icon/common/ic-facebook.svg | 1 + .../components/icon/common/ic-share-link.svg | 1 + .../src/components/icon/common/ic-share.svg | 1 + .../components/icon/common/ic-telegram.svg | 1 + .../icon/common/ic-whatsapp-filled.svg | 1 + .../components/src/components/icon/icons.js | 5 + packages/p2p/jest.config.js | 1 + packages/p2p/package.json | 3 + .../__tests__/share-my-ads-modal.spec.tsx | 0 .../modals/share-my-ads-modal/index.ts | 4 + .../share-my-ads-icons/index.ts | 4 + .../share-my-ads-icons.scss | 52 ++++ .../share-my-ads-icons/share-my-ads-icons.tsx | 62 +++++ .../share-my-ads-modal.scss | 169 +++++++++++++ .../share-my-ads-modal/share-my-ads-modal.tsx | 222 ++++++++++++++++++ .../share-my-ads-popup/index.ts | 4 + .../share-my-ads-popup.scss | 41 ++++ .../share-my-ads-popup/share-my-ads-popup.tsx | 34 +++ .../components/my-ads/my-ads-row-renderer.jsx | 21 +- .../p2p/src/components/my-ads/my-ads.scss | 19 ++ packages/p2p/src/constants/base64-images.js | 6 + packages/p2p/src/constants/modals.js | 3 + packages/p2p/src/types/adverts.types.ts | 54 +++++ packages/p2p/src/types/index.ts | 1 + packages/p2p/tsconfig.json | 2 + packages/p2p/webpack.config.js | 1 + 28 files changed, 715 insertions(+), 3 deletions(-) create mode 100644 packages/components/src/components/icon/common/ic-facebook.svg create mode 100644 packages/components/src/components/icon/common/ic-share-link.svg create mode 100644 packages/components/src/components/icon/common/ic-share.svg create mode 100644 packages/components/src/components/icon/common/ic-telegram.svg create mode 100644 packages/components/src/components/icon/common/ic-whatsapp-filled.svg create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/__tests__/share-my-ads-modal.spec.tsx create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/index.ts create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/index.ts create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.scss create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.tsx create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/index.ts create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx create mode 100644 packages/p2p/src/constants/base64-images.js create mode 100644 packages/p2p/src/types/adverts.types.ts create mode 100644 packages/p2p/src/types/index.ts diff --git a/packages/components/src/components/clipboard/clipboard.tsx b/packages/components/src/components/clipboard/clipboard.tsx index b8c19660c87d..8da2d6e50333 100644 --- a/packages/components/src/components/clipboard/clipboard.tsx +++ b/packages/components/src/components/clipboard/clipboard.tsx @@ -15,6 +15,7 @@ type TClipboard = { popoverClassName?: string; popoverAlignment?: 'top' | 'right' | 'bottom' | 'left'; popover_props?: Partial; + 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(); @@ -65,6 +67,7 @@ const Clipboard = ({ custom_color='var(--text-less-prominent)' className={classNames('dc-clipboard', className)} onClick={onClick} + size={size ?? '16'} /> )} diff --git a/packages/components/src/components/icon/common/ic-edit.svg b/packages/components/src/components/icon/common/ic-edit.svg index 56f9c6fcd1a3..44037311b337 100644 --- a/packages/components/src/components/icon/common/ic-edit.svg +++ b/packages/components/src/components/icon/common/ic-edit.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-facebook.svg b/packages/components/src/components/icon/common/ic-facebook.svg new file mode 100644 index 000000000000..544308a9ff95 --- /dev/null +++ b/packages/components/src/components/icon/common/ic-facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-share-link.svg b/packages/components/src/components/icon/common/ic-share-link.svg new file mode 100644 index 000000000000..ead94f302fbf --- /dev/null +++ b/packages/components/src/components/icon/common/ic-share-link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-share.svg b/packages/components/src/components/icon/common/ic-share.svg new file mode 100644 index 000000000000..8c19276ccddc --- /dev/null +++ b/packages/components/src/components/icon/common/ic-share.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-telegram.svg b/packages/components/src/components/icon/common/ic-telegram.svg new file mode 100644 index 000000000000..7b8c4b9b844c --- /dev/null +++ b/packages/components/src/components/icon/common/ic-telegram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/common/ic-whatsapp-filled.svg b/packages/components/src/components/icon/common/ic-whatsapp-filled.svg new file mode 100644 index 000000000000..91ee10a1ce3f --- /dev/null +++ b/packages/components/src/components/icon/common/ic-whatsapp-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/components/src/components/icon/icons.js b/packages/components/src/components/icon/icons.js index 9269474c823a..2c2e47504c03 100644 --- a/packages/components/src/components/icon/icons.js +++ b/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'; diff --git a/packages/p2p/jest.config.js b/packages/p2p/jest.config.js index 6d193b80edd3..b41efece1607 100644 --- a/packages/p2p/jest.config.js +++ b/packages/p2p/jest.config.js @@ -12,6 +12,7 @@ module.exports = { '^Stores/(.*)$': '/src/stores/$1', '^Stores$': '/src/stores/index', '^Translations/(.*)$': '/src/translations/$1', + '^Types/(.*)$': '/src/types/$1', '^Utils/(.*)$': '/src/utils/$1', }, testPathIgnorePatterns: [ diff --git a/packages/p2p/package.json b/packages/p2p/package.json index 4ec6634f43cc..8b733329a8fb 100644 --- a/packages/p2p/package.json +++ b/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", diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/__tests__/share-my-ads-modal.spec.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/__tests__/share-my-ads-modal.spec.tsx new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/index.ts b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/index.ts new file mode 100644 index 000000000000..a36e1751404e --- /dev/null +++ b/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; diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/index.ts b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/index.ts new file mode 100644 index 000000000000..b706eb64b2ff --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/index.ts @@ -0,0 +1,4 @@ +import ShareMyAdsIcons from './share-my-ads-icons'; +import './share-my-ads-icons.scss'; + +export default ShareMyAdsIcons; diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.scss b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.scss new file mode 100644 index 000000000000..53841b1ac03b --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.scss @@ -0,0 +1,52 @@ +.share-my-ads-icons { + display: flex; + flex-direction: row; + justify-content: space-around; + margin: 2.5rem 0; + + @include mobile { + display: grid; + grid-template-columns: repeat(4, 1fr); + grid-row-gap: 2rem; + margin: 1rem 2.5rem; + } + + .react-share__ShareButton { + @include mobile { + display: flex; + flex-direction: column; + align-items: center; + } + } + + &__container { + display: flex; + flex-direction: column; + align-items: center; + + &-link { + margin-bottom: 0.4rem; + } + } + + &__circle { + align-items: center; + background: var(--icon-grey-background); + border-radius: 50%; + display: flex; + justify-content: center; + margin-bottom: 0.5rem; + + @include mobile { + width: fit-content; + } + + &-icon { + margin: 0.5rem; + + &--small { + margin: 0.8rem; + } + } + } +} diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.tsx new file mode 100644 index 000000000000..7fa1317629e9 --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { FacebookShareButton, TelegramShareButton, TwitterShareButton, WhatsappShareButton } from 'react-share'; +import { Icon, Text } from '@deriv/components'; +import { Localize } from 'Components/i18next'; + +const ShareMyAdsIcons = () => { + const advert_url = window.location.href; + + return ( +
+ +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + + +
+ +
+ + + + +
+ +
+ +
+ + + + +
+
+ ); +}; + +export default ShareMyAdsIcons; diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss new file mode 100644 index 000000000000..debc9c529af2 --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss @@ -0,0 +1,169 @@ +.share-my-ads-modal { + &__body { + padding-top: 1rem; + + @include mobile { + padding-top: 0; + padding-bottom: 2rem; + } + } + + &__container { + display: flex; + flex-direction: row; + margin-top: 2.4rem; + + @include mobile { + align-items: center; + justify-content: center; + margin-top: 0; + } + + &__card { + display: flex; + flex-direction: column; + width: 50%; + + @include mobile { + align-items: center; + width: 100%; + } + + &__button-group { + display: flex; + justify-content: space-between; + margin-top: 1.5rem; + width: 100%; + + .dc-btn { + width: 50%; + } + } + + &-details { + 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; + } + } + } + + &-title { + margin-bottom: 2rem; + } + } + + &__download-button { + @include mobile { + width: 100%; + } + } + + &-qr { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + margin-top: 2rem; + + @include mobile { + margin-top: 1rem; + } + + &__background { + 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; + } + } + } + } + } + + &__copy { + align-items: center; + border-radius: 0.3rem; + border: 0.1em solid var(--general-active); + display: flex; + flex-direction: row; + margin-top: 2.5rem; + padding: 0.8rem; + + &-clipboard { + align-items: center; + background: var(--general-section-5); + border-radius: 0.3rem; + display: flex; + justify-content: center; + margin-left: 1rem; + + &--icon { + display: flex; + margin: 1.5rem 1rem; + } + } + + &-link { + display: -webkit-box; + white-space: pre-wrap; + word-break: break-all; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + } + } + + &__line { + margin: 0 0 2.5rem; + } + + &__share { + padding-left: 2.4rem; + width: 50%; + } +} diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx new file mode 100644 index 000000000000..173e833a078d --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx @@ -0,0 +1,222 @@ +import React from 'react'; +import { toPng } from 'html-to-image'; +import { QRCode } from 'react-qrcode-logo'; +import { + Button, + Clipboard, + DesktopWrapper, + Icon, + MobileWrapper, + Modal, + Text, + useCopyToClipboard, +} from '@deriv/components'; +import { isMobile, useIsMounted } from '@deriv/shared'; +import { observer } from '@deriv/stores'; +import { Localize, localize } from 'Components/i18next'; +import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; +import MyProfileSeparatorContainer from 'Components/my-profile/my-profile-separator-container'; +import { base64_images } from 'Constants/base64-images'; +import { TAdvertProps } from 'Types'; +import ShareMyAdsIcons from './share-my-ads-icons'; +import ShareMyAdsPopup from './share-my-ads-popup'; + +const ShareMyAdsModal = ({ advert }: TAdvertProps) => { + const [show_popup, setShowPopup] = React.useState(false); + const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard(); + + const isMounted = useIsMounted(); + const divRef = React.useRef(null); + const advert_url = window.location.href; + + const { hideModal, is_modal_open } = useModalManagerContext(); + const { id, min_order_amount_limit_display, max_order_amount_limit_display, account_currency, type, rate_display } = + advert; + + const options = { + enableCORS: true, + size: isMobile() ? 120 : 150, + removeQrCodeBehindLogo: true, + logoPadding: 4, + logoImage: base64_images.dp2p_logo, + logoWidth: isMobile() ? 30 : 40, + logoHeight: isMobile() ? 30 : 40, + logoOpacity: 1, + }; + + let timeout_clipboard: ReturnType; + + const onCopy = (event: { stopPropagation: () => void }) => { + copyToClipboard(advert_url); + timeout_clipboard = setTimeout(() => { + if (isMounted()) { + setIsCopied(false); + } + }, 2000); + event.stopPropagation(); + }; + + const handleGenerateImage = () => { + if (divRef.current) { + toPng(divRef.current) + .then(dataUrl => { + const link = document.createElement('a'); + link.download = 'test.png'; + link.href = dataUrl; + link.click(); + }) + .catch(error => { + throw new Error(error); + }); + } + }; + + React.useEffect(() => { + return () => { + clearTimeout(timeout_clipboard); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + (show_popup ? {} : hideModal())} + width='71rem' + > + + + {show_popup && setShowPopup(false)} />} + + + + + + +
+
+
+ + + + +
+
+ + + + + + + + + +
+
+ + + + + + + + + +
+
+
+
+ +
+ + + +
+
+ + + + + + + +
+ +
+ + + + + + + + +
+ + + +
+ +
+
+
+ +
+ + + + ); +}; + +export default observer(ShareMyAdsModal); diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/index.ts b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/index.ts new file mode 100644 index 000000000000..200565034119 --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/index.ts @@ -0,0 +1,4 @@ +import ShareMyAdsPopup from './share-my-ads-popup'; +import './share-my-ads-popup.scss'; + +export default ShareMyAdsPopup; diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss new file mode 100644 index 000000000000..df9f3a139ce1 --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss @@ -0,0 +1,41 @@ +.share-my-ads-popup { + position: absolute; + background: var(--overlay-outside-dialog); + height: 100%; + width: 100%; + display: flex; + align-items: end; + + &__container { + background: #fff; + height: 45%; + width: 100%; + border-radius: 5% 5% 0 0; + animation: popup 0.5s ease-in; + animation-fill-mode: forwards; + + @keyframes popup { + 0% { + transform: translateY(70%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } + } + + &-header { + padding: 2rem 1rem; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + } + + &-icon { + position: absolute; + right: 2rem; + } + } +} diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx new file mode 100644 index 000000000000..968eb8ebb0a9 --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { createPortal } from 'react-dom'; +import { Icon, Text } from '@deriv/components'; +import { Localize } from 'Components/i18next'; +import ShareMyAdsIcons from '../share-my-ads-icons'; + +type TShareMyAdsPopupProps = { + onClose: () => void; +}; + +const ShareMyAdsPopup = ({ onClose }: TShareMyAdsPopupProps) => { + const popup = document.getElementById('modal_root'); + + if (popup) { + return createPortal( +
+
+
+ + + + +
+ +
+
, + popup + ); + } + + return null; +}; + +export default ShareMyAdsPopup; diff --git a/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx b/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx index b2f812ffcc22..b33469406c27 100644 --- a/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx +++ b/packages/p2p/src/components/my-ads/my-ads-row-renderer.jsx @@ -8,12 +8,14 @@ import { Localize, localize } from 'Components/i18next'; import { buy_sell } from 'Constants/buy-sell'; import { ad_type } from 'Constants/floating-rate'; import AdStatus from 'Components/my-ads/ad-status.jsx'; +import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; import { useStores } from 'Stores'; import { generateEffectiveRate } from 'Utils/format-value'; import AdType from './ad-type.jsx'; const MyAdsRowRenderer = observer(({ row: advert }) => { const { floating_rate_store, general_store, my_ads_store, my_profile_store } = useStores(); + const { showModal } = useModalManagerContext(); const { account_currency, @@ -69,6 +71,7 @@ const MyAdsRowRenderer = observer(({ row: advert }) => { }; const onClickDelete = () => !general_store.is_barred && my_ads_store.onClickDelete(id); const onClickEdit = () => !general_store.is_barred && my_ads_store.onClickEdit(id, rate_type); + const onClickShare = () => showModal({ key: 'ShareMyAdsModal', props: { advert } }); const onClickSwitchAd = () => { if (!general_store.is_barred) { general_store.showModal({ key: 'MyAdsFloatingRateSwitchModal', props: {} }); @@ -107,13 +110,15 @@ const MyAdsRowRenderer = observer(({ row: advert }) => { > -
+
+ +
} right_hidden_component_width='18rem' @@ -350,6 +355,18 @@ const MyAdsRowRenderer = observer(({ row: advert }) => { /> +
+ + + +
)} diff --git a/packages/p2p/src/components/my-ads/my-ads.scss b/packages/p2p/src/components/my-ads/my-ads.scss index 3a4e4da4a951..0bb826fcdc76 100644 --- a/packages/p2p/src/components/my-ads/my-ads.scss +++ b/packages/p2p/src/components/my-ads/my-ads.scss @@ -376,6 +376,7 @@ @include desktop { &:hover { background-color: var(--general-hover); + border-radius: 0.5rem; } } @@ -390,6 +391,7 @@ @include desktop { &:hover { background-color: var(--general-hover); + border-radius: 0.5rem; } } @@ -404,6 +406,7 @@ @include desktop { &:hover { background-color: var(--general-hover); + border-radius: 0.5rem; } } @@ -418,6 +421,7 @@ @include desktop { &:hover { background-color: var(--general-hover); + border-radius: 0.5rem; } } @@ -425,6 +429,21 @@ @include popoverIcons(var(--status-info), 100%, 6rem); } } + + &__share { + @include popoverIcons(none, 3.2rem, 3.2rem); + + @include desktop { + &:hover { + background-color: var(--general-hover); + border-radius: 0.5rem; + } + } + + @include mobile { + @include popoverIcons($color-green-1, 100%, 6rem); + } + } } &-available { align-items: flex-start; diff --git a/packages/p2p/src/constants/base64-images.js b/packages/p2p/src/constants/base64-images.js new file mode 100644 index 000000000000..a6a27469eb7f --- /dev/null +++ b/packages/p2p/src/constants/base64-images.js @@ -0,0 +1,6 @@ +export const base64_images = Object.freeze({ + deriv_p2p: + 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4NSIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtOS4yMTguNDgyLS43ODcgNC40NjdINS42OTZDMy4xNDUgNC45NS43MTMgNy4wMTYuMjYyIDkuNTY3bC0uMTkgMS4wODZjLS40NDkgMi41NTEgMS4yNTMgNC42MTggMy44MDQgNC42MThoMi4yODFjMS44NiAwIDMuNjMtMS41MDUgMy45NTgtMy4zNjRMMTIuMjE1IDAgOS4yMTguNDgyWm0tMS45NCAxMS4wMDNjLS4xLjU3NS0uNjE4IDEuMDQyLTEuMTkyIDEuMDQySDQuN2MtMS4xNDYgMC0xLjkxNC0uOTMtMS43MTItMi4wOGwuMTItLjY3NkMzLjMxIDguNjI0IDQuNDA0IDcuNjkgNS41NSA3LjY5aDIuMzk2bC0uNjY5IDMuNzk1WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTMwLjI3OCAxNS4yNzJoMi44MzhsMS43OTQtMTAuMThoLTIuODM4bC0xLjc5NCAxMC4xOFpNMzAuMzcyIDYuNDJ2LS4wMDNsLjIxNC0xLjIwN2E5LjYwMSA5LjYwMSAwIDAgMC02LjEwNS40MDhsLTEuNzAzIDkuNjU3aDIuODRMMjcgNy40MzJjLjQyNi0uMDg1IDEuODE0LS4yMTggMy4xNTguMmwuMjE0LTEuMjEyWiIvPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTE5LjA3NSA0Ljk0OGgtMi4yMDhjLTIuMTUzIDAtNC4yMDUgMS43NDQtNC41ODQgMy44OTdsLS40NDcgMi41M2MtLjM3OSAyLjE1MyAxLjA1NyAzLjg5OCAzLjIxIDMuODk4aDQuN2wuNDgyLTIuNzM2SDE1LjgxYy0uNzE3IDAtMS4xOTctLjU4LTEuMDctMS4zbC4wMTYtLjA4Nmg3LjEybC40MDctMi4zMDZjLjM4LTIuMTUzLTEuMDU2LTMuODk3LTMuMjEtMy44OTdabS4zNiAzLjY4LS4wMTYuMTQ2aC00LjIzNWwuMDIzLS4xM2MuMTI4LS43MTcuNzgyLTEuMzQ4IDEuNTAxLTEuMzQ4aDEuNjU0Yy43MSAwIDEuMTkuNjIgMS4wNzMgMS4zMzFaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMzkuODQzIDExLjgwN2MxLjI5LTIuMzE5IDIuNzEtNS4zNiAzLjMwMi02LjcxNGgyLjg0M2MtLjk2OCAyLjU3Mi0zLjE4NSA2Ljk0OC01LjMzMyAxMC4xOGgtMi44NGMtLjk4Ny0zLjA3Ni0xLjYyMy03LjM2LTEuNzQ1LTEwLjE4aDIuODRjLjA1Mi45Mi40NjQgNC4zMy45MzQgNi43MTRaTTU0LjA1My45MTZjMi4xNyAwIDMuODM3LjM4NSA0Ljk5OSAxLjE1NSAxLjE2Mi43NTYgMS43NDMgMi4wMDIgMS43NDMgMy43MzggMCAxLjc1LS41ODggMy4wMTctMS43NjQgMy44MDEtMS4xNzYuNzctMi44NTYgMS4xNTYtNS4wNCAxLjE1NmgtMS4wM3Y0Ljg3MmgtMy4yNzZWMS4yOTRjLjcxNC0uMTQgMS40Ny0uMjM4IDIuMjY4LS4yOTRhMzAuNDU1IDMwLjQ1NSAwIDAgMSAyLjEtLjA4NFptLjIxIDIuNzkzYy0uMjM4IDAtLjQ3Ni4wMDctLjcxNC4wMi0uMjI0LjAxNS0uNDIuMDI5LS41ODguMDQzdjQuMmgxLjAzYzEuMTMzIDAgMS45ODctLjE1NCAyLjU2Mi0uNDYyLjU3NC0uMzA4Ljg2LS44ODIuODYtMS43MjIgMC0uNDA2LS4wNzYtLjc0Mi0uMjMtMS4wMDhhMS41MTggMS41MTggMCAwIDAtLjYzLS42M2MtLjI2Ny0uMTY4LS41OTUtLjI4LS45ODctLjMzNmE3LjQzMyA3LjQzMyAwIDAgMC0xLjMwMy0uMTA1Wk03MC44ODggNC45MDZjMCAuNTMyLS4xMDUgMS4wNDMtLjMxNSAxLjUzMy0uMjEuNDktLjQ4My45NjYtLjgyIDEuNDI4LS4zMzUuNDQ4LS43MTMuODgyLTEuMTMzIDEuMzAyLS40Mi40Mi0uODM0LjgyLTEuMjQgMS4xOTgtLjIxLjE5Ni0uNDQuNDItLjY5My42NzItLjIzOC4yMzgtLjQ2OS40ODMtLjY5My43MzUtLjIyNC4yNTItLjQyNy40OS0uNjA5LjcxNC0uMTY4LjIxLS4yNzMuMzg1LS4zMTUuNTI1aDYuMjU5djIuNjI1aC05LjcwM2EzLjM4NSAzLjM4NSAwIDAgMS0uMDQyLS41ODh2LS41MDRjMC0uNjcyLjEwNS0xLjI4OC4zMTUtMS44NDguMjI0LS41Ni41MS0xLjA3OC44Ni0xLjU1NC4zNS0uNDkuNzQzLS45NDUgMS4xNzctMS4zNjUuNDQ4LS40Mi44OS0uODQgMS4zMjMtMS4yNi4zMzYtLjMyMy42NTEtLjYyNC45NDUtLjkwNC4yOTQtLjI5NC41NTMtLjU3NC43NzctLjg0LjIyNC0uMjguNC0uNTUzLjUyNS0uODE5LjEyNi0uMjguMTktLjU2LjE5LS44NCAwLS42MTYtLjE3Ni0xLjA1LS41MjYtMS4zMDItLjM1LS4yNTItLjc4NC0uMzc4LTEuMzAyLS4zNzgtLjM3OCAwLS43MzUuMDYzLTEuMDcuMTg5YTQuODM3IDQuODM3IDAgMCAwLS45MDQuNDIgNC42MTUgNC42MTUgMCAwIDAtLjY5My40ODNjLS4xOTYuMTU0LS4zNDMuMjgtLjQ0MS4zNzhsLTEuNTU0LTIuMTg0YTcuNzg1IDcuNzg1IDAgMCAxIDIuMTQyLTEuNDA3IDYuMjg0IDYuMjg0IDAgMCAxIDIuNjQ2LS41NjdjLjg1NCAwIDEuNTkuMDk4IDIuMjA1LjI5NC42MTcuMTk2IDEuMTIuNDc2IDEuNTEzLjg0YTMgMyAwIDAgMSAuODgyIDEuMzAyYy4xOTYuNTA0LjI5NCAxLjA3OC4yOTQgMS43MjJaTTc3LjQwNi45MTZjMi4xNyAwIDMuODM2LjM4NSA0Ljk5OCAxLjE1NSAxLjE2My43NTYgMS43NDQgMi4wMDIgMS43NDQgMy43MzggMCAxLjc1LS41ODggMy4wMTctMS43NjQgMy44MDEtMS4xNzcuNzctMi44NTcgMS4xNTYtNS4wNDEgMS4xNTZoLTEuMDN2NC44NzJoLTMuMjc2VjEuMjk0Yy43MTUtLjE0IDEuNDctLjIzOCAyLjI2OS0uMjk0YTMwLjQ1NyAzMC40NTcgMCAwIDEgMi4xLS4wODRabS4yMSAyLjc5M2MtLjIzOCAwLS40NzYuMDA3LS43MTQuMDItLjIyNC4wMTUtLjQyLjAyOS0uNTg4LjA0M3Y0LjJoMS4wMjljMS4xMzQgMCAxLjk4OC0uMTU0IDIuNTYyLS40NjIuNTc0LS4zMDguODYxLS44ODIuODYxLTEuNzIyIDAtLjQwNi0uMDc3LS43NDItLjIzLTEuMDA4YTEuNTE4IDEuNTE4IDAgMCAwLS42My0uNjNjLS4yNjctLjE2OC0uNTk2LS4yOC0uOTg4LS4zMzZhNy40MzIgNy40MzIgMCAwIDAtMS4zMDItLjEwNVoiLz48L3N2Zz4=', + dp2p_logo: + 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjUiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NSA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzE2MDJfMTI4NjgpIj4KPHJlY3QgeD0iMC4wMDE5NTMxMiIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRTAzNjQwIi8+CjxwYXRoIGQ9Ik02MS4zMzY4IDIuNjY2MDJMLTIuNjYzMTUgMTIuNzY3N0wtMTQuMzk2NSA2Ni42NjZINDkuNjAzNUw2MS4zMzY4IDIuNjY2MDJaIiBmaWxsPSIjRkY0NDRGIi8+CjxnIGZpbHRlcj0idXJsKCNmaWx0ZXIwX2RfMTYwMl8xMjg2OCkiPgo8cGF0aCBkPSJNMTYuNjY4OSAyMy43NzRDMTkuMzU1NSAyMy43NzQgMjEuNDE4MiAyNC4yNTA3IDIyLjg1NjkgMjUuMjA0QzI0LjI5NTUgMjYuMTQgMjUuMDE0OSAyNy42ODI3IDI1LjAxNDkgMjkuODMyQzI1LjAxNDkgMzEuOTk4NyAyNC4yODY5IDMzLjU2NzMgMjIuODMwOSAzNC41MzhDMjEuMzc0OSAzNS40OTEzIDE5LjI5NDkgMzUuOTY4IDE2LjU5MDkgMzUuOTY4SDE1LjMxNjlWNDJIMTEuMjYwOVYyNC4yNDJDMTIuMTQ0OSAyNC4wNjg3IDEzLjA4MDkgMjMuOTQ3MyAxNC4wNjg5IDIzLjg3OEMxNS4wNTY5IDIzLjgwODcgMTUuOTIzNSAyMy43NzQgMTYuNjY4OSAyMy43NzRaTTE2LjkyODkgMjcuMjMyQzE2LjYzNDIgMjcuMjMyIDE2LjMzOTUgMjcuMjQwNyAxNi4wNDQ5IDI3LjI1OEMxNS43Njc1IDI3LjI3NTMgMTUuNTI0OSAyNy4yOTI3IDE1LjMxNjkgMjcuMzFWMzIuNTFIMTYuNTkwOUMxNy45OTQ5IDMyLjUxIDE5LjA1MjIgMzIuMzE5MyAxOS43NjI5IDMxLjkzOEMyMC40NzM1IDMxLjU1NjcgMjAuODI4OSAzMC44NDYgMjAuODI4OSAyOS44MDZDMjAuODI4OSAyOS4zMDMzIDIwLjczMzUgMjguODg3MyAyMC41NDI5IDI4LjU1OEMyMC4zNjk1IDI4LjIyODcgMjAuMTA5NSAyNy45Njg3IDE5Ljc2MjkgMjcuNzc4QzE5LjQzMzUgMjcuNTcgMTkuMDI2MiAyNy40MzEzIDE4LjU0MDkgMjcuMzYyQzE4LjA1NTUgMjcuMjc1MyAxNy41MTgyIDI3LjIzMiAxNi45Mjg5IDI3LjIzMlpNMzcuNTA5MyAyOC43MTRDMzcuNTA5MyAyOS4zNzI3IDM3LjM3OTMgMzAuMDA1MyAzNy4xMTkzIDMwLjYxMkMzNi44NTkzIDMxLjIxODcgMzYuNTIxMyAzMS44MDggMzYuMTA1MyAzMi4zOEMzNS42ODkzIDMyLjkzNDcgMzUuMjIxMyAzMy40NzIgMzQuNzAxMyAzMy45OTJDMzQuMTgxMyAzNC41MTIgMzMuNjY5OSAzNS4wMDYgMzMuMTY3MyAzNS40NzRDMzIuOTA3MyAzNS43MTY3IDMyLjYyMTMgMzUuOTk0IDMyLjMwOTMgMzYuMzA2QzMyLjAxNDYgMzYuNjAwNyAzMS43Mjg2IDM2LjkwNCAzMS40NTEzIDM3LjIxNkMzMS4xNzM5IDM3LjUyOCAzMC45MjI2IDM3LjgyMjcgMzAuNjk3MyAzOC4xQzMwLjQ4OTMgMzguMzYgMzAuMzU5MyAzOC41NzY3IDMwLjMwNzMgMzguNzVIMzguMDU1M1Y0MkgyNi4wNDMzQzI2LjAwODYgNDEuODA5MyAyNS45OTEzIDQxLjU2NjcgMjUuOTkxMyA0MS4yNzJDMjUuOTkxMyA0MC45NzczIDI1Ljk5MTMgNDAuNzY5MyAyNS45OTEzIDQwLjY0OEMyNS45OTEzIDM5LjgxNiAyNi4xMjEzIDM5LjA1MzMgMjYuMzgxMyAzOC4zNkMyNi42NTg2IDM3LjY2NjcgMjcuMDEzOSAzNy4wMjUzIDI3LjQ0NzMgMzYuNDM2QzI3Ljg4MDYgMzUuODI5MyAyOC4zNjU5IDM1LjI2NiAyOC45MDMzIDM0Ljc0NkMyOS40NTc5IDM0LjIyNiAzMC4wMDM5IDMzLjcwNiAzMC41NDEzIDMzLjE4NkMzMC45NTczIDMyLjc4NzMgMzEuMzQ3MyAzMi40MTQ3IDMxLjcxMTMgMzIuMDY4QzMyLjA3NTMgMzEuNzA0IDMyLjM5NTkgMzEuMzU3MyAzMi42NzMzIDMxLjAyOEMzMi45NTA2IDMwLjY4MTMgMzMuMTY3MyAzMC4zNDMzIDMzLjMyMzMgMzAuMDE0QzMzLjQ3OTMgMjkuNjY3MyAzMy41NTczIDI5LjMyMDcgMzMuNTU3MyAyOC45NzRDMzMuNTU3MyAyOC4yMTEzIDMzLjM0MDYgMjcuNjc0IDMyLjkwNzMgMjcuMzYyQzMyLjQ3MzkgMjcuMDUgMzEuOTM2NiAyNi44OTQgMzEuMjk1MyAyNi44OTRDMzAuODI3MyAyNi44OTQgMzAuMzg1MyAyNi45NzIgMjkuOTY5MyAyNy4xMjhDMjkuNTcwNiAyNy4yNjY3IDI5LjE5NzkgMjcuNDQgMjguODUxMyAyNy42NDhDMjguNTIxOSAyNy44Mzg3IDI4LjIzNTkgMjguMDM4IDI3Ljk5MzMgMjguMjQ2QzI3Ljc1MDYgMjguNDM2NyAyNy41Njg2IDI4LjU5MjcgMjcuNDQ3MyAyOC43MTRMMjUuNTIzMyAyNi4wMUMyNi4yODU5IDI1LjI5OTMgMjcuMTY5OSAyNC43MTg3IDI4LjE3NTMgMjQuMjY4QzI5LjE5NzkgMjMuOCAzMC4yODk5IDIzLjU2NiAzMS40NTEzIDIzLjU2NkMzMi41MDg2IDIzLjU2NiAzMy40MTg2IDIzLjY4NzMgMzQuMTgxMyAyMy45M0MzNC45NDM5IDI0LjE3MjcgMzUuNTY3OSAyNC41MTkzIDM2LjA1MzMgMjQuOTdDMzYuNTU1OSAyNS40MDMzIDM2LjkxOTkgMjUuOTQwNyAzNy4xNDUzIDI2LjU4MkMzNy4zODc5IDI3LjIwNiAzNy41MDkzIDI3LjkxNjcgMzcuNTA5MyAyOC43MTRaTTQ1LjU3ODYgMjMuNzc0QzQ4LjI2NTMgMjMuNzc0IDUwLjMyOCAyNC4yNTA3IDUxLjc2NjYgMjUuMjA0QzUzLjIwNTMgMjYuMTQgNTMuOTI0NiAyNy42ODI3IDUzLjkyNDYgMjkuODMyQzUzLjkyNDYgMzEuOTk4NyA1My4xOTY2IDMzLjU2NzMgNTEuNzQwNiAzNC41MzhDNTAuMjg0NiAzNS40OTEzIDQ4LjIwNDYgMzUuOTY4IDQ1LjUwMDYgMzUuOTY4SDQ0LjIyNjZWNDJINDAuMTcwNlYyNC4yNDJDNDEuMDU0NiAyNC4wNjg3IDQxLjk5MDYgMjMuOTQ3MyA0Mi45Nzg2IDIzLjg3OEM0My45NjY2IDIzLjgwODcgNDQuODMzMyAyMy43NzQgNDUuNTc4NiAyMy43NzRaTTQ1LjgzODYgMjcuMjMyQzQ1LjU0NCAyNy4yMzIgNDUuMjQ5MyAyNy4yNDA3IDQ0Ljk1NDYgMjcuMjU4QzQ0LjY3NzMgMjcuMjc1MyA0NC40MzQ2IDI3LjI5MjcgNDQuMjI2NiAyNy4zMVYzMi41MUg0NS41MDA2QzQ2LjkwNDYgMzIuNTEgNDcuOTYyIDMyLjMxOTMgNDguNjcyNiAzMS45MzhDNDkuMzgzMyAzMS41NTY3IDQ5LjczODYgMzAuODQ2IDQ5LjczODYgMjkuODA2QzQ5LjczODYgMjkuMzAzMyA0OS42NDMzIDI4Ljg4NzMgNDkuNDUyNiAyOC41NThDNDkuMjc5MyAyOC4yMjg3IDQ5LjAxOTMgMjcuOTY4NyA0OC42NzI2IDI3Ljc3OEM0OC4zNDMzIDI3LjU3IDQ3LjkzNiAyNy40MzEzIDQ3LjQ1MDYgMjcuMzYyQzQ2Ljk2NTMgMjcuMjc1MyA0Ni40MjggMjcuMjMyIDQ1LjgzODYgMjcuMjMyWiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8L2c+CjxkZWZzPgo8ZmlsdGVyIGlkPSJmaWx0ZXIwX2RfMTYwMl8xMjg2OCIgeD0iOS4yNjE3MiIgeT0iMjIuNTY2NCIgd2lkdGg9IjQ2LjY2MjEiIGhlaWdodD0iMjIuNDMzNiIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPgo8ZmVGbG9vZCBmbG9vZC1vcGFjaXR5PSIwIiByZXN1bHQ9IkJhY2tncm91bmRJbWFnZUZpeCIvPgo8ZmVDb2xvck1hdHJpeCBpbj0iU291cmNlQWxwaGEiIHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAxMjcgMCIgcmVzdWx0PSJoYXJkQWxwaGEiLz4KPGZlT2Zmc2V0IGR5PSIxIi8+CjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEiLz4KPGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAgMCAwIDAgMC4wNTQ5MDIgMCAwIDAgMCAwLjA1NDkwMiAwIDAgMCAwIDAuMDU0OTAyIDAgMCAwIDAuMDUgMCIvPgo8ZmVCbGVuZCBtb2RlPSJub3JtYWwiIGluMj0iQmFja2dyb3VuZEltYWdlRml4IiByZXN1bHQ9ImVmZmVjdDFfZHJvcFNoYWRvd18xNjAyXzEyODY4Ii8+CjxmZUJsZW5kIG1vZGU9Im5vcm1hbCIgaW49IlNvdXJjZUdyYXBoaWMiIGluMj0iZWZmZWN0MV9kcm9wU2hhZG93XzE2MDJfMTI4NjgiIHJlc3VsdD0ic2hhcGUiLz4KPC9maWx0ZXI+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTYwMl8xMjg2OCI+CjxyZWN0IHg9IjAuMDAxOTUzMTIiIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCIgcng9IjEyIiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=', +}); diff --git a/packages/p2p/src/constants/modals.js b/packages/p2p/src/constants/modals.js index 4f7d2dd9dbf8..4d3bf5499516 100644 --- a/packages/p2p/src/constants/modals.js +++ b/packages/p2p/src/constants/modals.js @@ -127,4 +127,7 @@ export const modals = { RecommendedModal: React.lazy(() => import(/* webpackChunkName: "recommended-modal" */ 'Components/modal-manager/modals/recommended-modal') ), + ShareMyAdsModal: React.lazy(() => + import(/* webpackChunkName: "share-ad-modal" */ 'Components/modal-manager/modals/share-my-ads-modal') + ), }; diff --git a/packages/p2p/src/types/adverts.types.ts b/packages/p2p/src/types/adverts.types.ts new file mode 100644 index 000000000000..7fae92ede41f --- /dev/null +++ b/packages/p2p/src/types/adverts.types.ts @@ -0,0 +1,54 @@ +export type TAdvertProps = { + advert: { + account_currency?: string; + active_orders?: number; + advertiser_details?: { + completed_orders_count?: number; + first_name?: string; + id?: string; + is_online?: number; + last_name?: string; + last_online_time?: number; + name?: string; + rating_average?: number; + rating_count?: number; + recommended_average?: number; + recommended_count?: number; + total_completion_rate?: number; + }; + amount?: number; + amount_display?: string; + block_trade?: number; + contact_info?: string; + counterparty_type?: string; + country?: string; + created_time?: number; + description?: string; + effective_rate?: number; + effective_rate_display?: string; + id?: string; + is_active?: number; + is_visible?: number; + local_currency?: string; + max_order_amount?: number; + max_order_amount_display?: string; + max_order_amount_limit?: number; + max_order_amount_limit_display?: string; + min_order_amount?: number; + min_order_amount_display?: string; + min_order_amount_limit?: number; + min_order_amount_limit_display?: string; + payment_info?: string; + payment_method?: null | string; + payment_method_names?: string[]; + price?: number; + price_display?: string; + rate?: number; + rate_display?: string; + rate_type?: string; + remaining_amount?: number; + remaining_amount_display?: string; + type?: string; + visibility_status?: string[]; + }; +}; diff --git a/packages/p2p/src/types/index.ts b/packages/p2p/src/types/index.ts new file mode 100644 index 000000000000..11819e1e24d2 --- /dev/null +++ b/packages/p2p/src/types/index.ts @@ -0,0 +1 @@ +export * from './adverts.types'; diff --git a/packages/p2p/tsconfig.json b/packages/p2p/tsconfig.json index b1dc30054dc3..0d2e4c0987f9 100644 --- a/packages/p2p/tsconfig.json +++ b/packages/p2p/tsconfig.json @@ -8,6 +8,8 @@ "Constants/*": ["src/constants/*"], "Stores/*": ["src/stores/*"], "Translations/*": ["src/translations/*"], + "Types": ["src/types"], + "Types/*": ["src/types/*"], "Utils/*": ["src/utils/*"], "@deriv/*": ["../*/src"] }, diff --git a/packages/p2p/webpack.config.js b/packages/p2p/webpack.config.js index 511dd3a646e0..ec73e3fe5d31 100644 --- a/packages/p2p/webpack.config.js +++ b/packages/p2p/webpack.config.js @@ -33,6 +33,7 @@ module.exports = function (env) { Translations: path.resolve(__dirname, 'src/translations'), Utils: path.resolve(__dirname, 'src/utils'), Stores: path.resolve(__dirname, 'src/stores'), + Types: path.resolve(__dirname, 'src/types'), ...publisher_utils.getLocalDerivPackageAliases(__dirname, is_publishing), }, extensions: ['.js', '.jsx', '.ts', '.tsx'], From 9aa35e480663a5016710207c737c83134c561971 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 26 Jul 2023 13:37:35 +0800 Subject: [PATCH 2/4] chore: fixed animation for closing popup --- .../share-my-ads-popup/share-my-ads-popup.scss | 16 ++++++++++++++++ .../share-my-ads-popup/share-my-ads-popup.tsx | 15 +++++++++++++-- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss index df9f3a139ce1..c4e6c2fe78be 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss @@ -37,5 +37,21 @@ position: absolute; right: 2rem; } + + &.closing { + animation: close 0.5s ease-in; + animation-fill-mode: forwards; + + @keyframes close { + 0% { + transform: translateY(0); + opacity: 1; + } + 100% { + transform: translateY(70%); + opacity: 0; + } + } + } } } diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx index 968eb8ebb0a9..ba44092a9159 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import classNames from 'classnames'; import { createPortal } from 'react-dom'; import { Icon, Text } from '@deriv/components'; import { Localize } from 'Components/i18next'; @@ -9,17 +10,27 @@ type TShareMyAdsPopupProps = { }; const ShareMyAdsPopup = ({ onClose }: TShareMyAdsPopupProps) => { + const [is_closing, setIsClosing] = React.useState(false); const popup = document.getElementById('modal_root'); + const closePopup = () => { + setIsClosing(true); + setTimeout(() => onClose(), 500); + }; + if (popup) { return createPortal(
-
+
- +
From faec3f1024175cddfefb25bb9312f6308f1e3cf5 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 27 Jul 2023 14:15:07 +0800 Subject: [PATCH 3/4] chore: added test cases, fixed clipboard issue, refactored icons to socials --- .../src/components/clipboard/clipboard.tsx | 7 +- .../components/src/components/modal/modal.tsx | 2 +- .../__tests__/share-my-ads-modal.spec.tsx | 115 ++++++++++++++++++ .../share-my-ads-icons/index.ts | 4 - .../share-my-ads-modal.scss | 11 ++ .../share-my-ads-modal/share-my-ads-modal.tsx | 32 +++-- .../__tests__/share-my-ads-popup.spec.tsx | 32 +++++ .../share-my-ads-popup.scss | 2 +- .../share-my-ads-popup/share-my-ads-popup.tsx | 16 ++- .../__tests__/share-my-ads-icons.spec.tsx | 15 +++ .../share-my-ads-socials/index.ts | 4 + .../share-my-ads-socials.scss} | 5 +- .../share-my-ads-socials.tsx} | 17 +-- 13 files changed, 218 insertions(+), 44 deletions(-) delete mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/index.ts create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/__tests__/share-my-ads-popup.spec.tsx create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/__tests__/share-my-ads-icons.spec.tsx create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/index.ts rename packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/{share-my-ads-icons/share-my-ads-icons.scss => share-my-ads-socials/share-my-ads-socials.scss} (87%) rename packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/{share-my-ads-icons/share-my-ads-icons.tsx => share-my-ads-socials/share-my-ads-socials.tsx} (98%) diff --git a/packages/components/src/components/clipboard/clipboard.tsx b/packages/components/src/components/clipboard/clipboard.tsx index 8da2d6e50333..95f442ea44f9 100644 --- a/packages/components/src/components/clipboard/clipboard.tsx +++ b/packages/components/src/components/clipboard/clipboard.tsx @@ -51,17 +51,16 @@ 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 ? ( - )} - {!is_copied && ( + ) : ( - +
)}
diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/__tests__/share-my-ads-modal.spec.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/__tests__/share-my-ads-modal.spec.tsx index e69de29bb2d1..4e0e9a38db7b 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/__tests__/share-my-ads-modal.spec.tsx +++ b/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: () =>
QR code
})); + +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('', () => { + beforeAll(() => { + el_modal.setAttribute('id', 'modal_root'); + document.body.appendChild(el_modal); + }); + + afterAll(() => { + document.body.removeChild(el_modal); + }); + + it('should render the ShareMyAdsModal', () => { + render(); + + 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(); + + 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(); + + 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(); + + 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).mockResolvedValueOnce(dataUrl); + + render(); + + const download_button = screen.getByRole('button', { name: 'Download this QR code' }); + userEvent.click(download_button); + + expect(toPng).toHaveBeenCalled(); + }); +}); diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/index.ts b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/index.ts deleted file mode 100644 index b706eb64b2ff..000000000000 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -import ShareMyAdsIcons from './share-my-ads-icons'; -import './share-my-ads-icons.scss'; - -export default ShareMyAdsIcons; diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss index debc9c529af2..8f116e96576f 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss @@ -38,6 +38,11 @@ .dc-btn { width: 50%; } + + &--bubble { + top: 31px; + left: -70px; + } } &-details { @@ -146,6 +151,12 @@ display: flex; margin: 1.5rem 1rem; } + + &--popover { + display: flex; + right: 0; + top: 0; + } } &-link { diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx index 173e833a078d..85e4f200c231 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx @@ -18,7 +18,7 @@ import { useModalManagerContext } from 'Components/modal-manager/modal-manager-c import MyProfileSeparatorContainer from 'Components/my-profile/my-profile-separator-container'; import { base64_images } from 'Constants/base64-images'; import { TAdvertProps } from 'Types'; -import ShareMyAdsIcons from './share-my-ads-icons'; +import ShareMyAdsIcons from './share-my-ads-socials'; import ShareMyAdsPopup from './share-my-ads-popup'; const ShareMyAdsModal = ({ advert }: TAdvertProps) => { @@ -27,10 +27,11 @@ const ShareMyAdsModal = ({ advert }: TAdvertProps) => { const isMounted = useIsMounted(); const divRef = React.useRef(null); + // TODO: replace with proper url when available const advert_url = window.location.href; const { hideModal, is_modal_open } = useModalManagerContext(); - const { id, min_order_amount_limit_display, max_order_amount_limit_display, account_currency, type, rate_display } = + const { account_currency, id, max_order_amount_limit_display, min_order_amount_limit_display, rate_display, type } = advert; const options = { @@ -58,16 +59,12 @@ const ShareMyAdsModal = ({ advert }: TAdvertProps) => { const handleGenerateImage = () => { if (divRef.current) { - toPng(divRef.current) - .then(dataUrl => { - const link = document.createElement('a'); - link.download = 'test.png'; - link.href = dataUrl; - link.click(); - }) - .catch(error => { - throw new Error(error); - }); + toPng(divRef.current).then(dataUrl => { + const link = document.createElement('a'); + link.download = 'test.png'; + link.href = dataUrl; + link.click(); + }); } }; @@ -88,9 +85,7 @@ const ShareMyAdsModal = ({ advert }: TAdvertProps) => { width='71rem' > - - {show_popup && setShowPopup(false)} />} - + {show_popup && } @@ -174,7 +169,7 @@ const ShareMyAdsModal = ({ advert }: TAdvertProps) => { is_copied ? ( ) : ( - + ) } secondary @@ -205,8 +200,11 @@ const ShareMyAdsModal = ({ advert }: TAdvertProps) => {
diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/__tests__/share-my-ads-popup.spec.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/__tests__/share-my-ads-popup.spec.tsx new file mode 100644 index 000000000000..43111de8c6ab --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/__tests__/share-my-ads-popup.spec.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import ShareMyAdsPopup from '../share-my-ads-popup'; + +const mock_on_close = jest.fn(); + +describe('', () => { + it('should call closePopup function when clicking on cross icon', () => { + jest.useFakeTimers(); + + const el_modal = document.createElement('div'); + el_modal.setAttribute('id', 'modal_root'); + document.body.appendChild(el_modal); + + render(); + + const close_icon = screen.getByTestId('dt-close-popup-icon'); + userEvent.click(close_icon); + + jest.runAllTimers(); + + expect(mock_on_close).toHaveBeenCalled(); + document.body.removeChild(el_modal); + }); + + it('should return null if modal_root is not found', () => { + render(); + + expect(screen.queryByText('Share my ads')).not.toBeInTheDocument(); + }); +}); diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss index c4e6c2fe78be..50b614846a04 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.scss @@ -8,7 +8,7 @@ &__container { background: #fff; - height: 45%; + height: 33%; width: 100%; border-radius: 5% 5% 0 0; animation: popup 0.5s ease-in; diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx index ba44092a9159..d9c83ebdcb71 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-popup/share-my-ads-popup.tsx @@ -3,10 +3,10 @@ import classNames from 'classnames'; import { createPortal } from 'react-dom'; import { Icon, Text } from '@deriv/components'; import { Localize } from 'Components/i18next'; -import ShareMyAdsIcons from '../share-my-ads-icons'; +import ShareMyAdsIcons from '../share-my-ads-socials'; type TShareMyAdsPopupProps = { - onClose: () => void; + onClose: (value: boolean) => void; }; const ShareMyAdsPopup = ({ onClose }: TShareMyAdsPopupProps) => { @@ -15,12 +15,12 @@ const ShareMyAdsPopup = ({ onClose }: TShareMyAdsPopupProps) => { const closePopup = () => { setIsClosing(true); - setTimeout(() => onClose(), 500); + setTimeout(() => onClose(false), 500); }; if (popup) { return createPortal( -
+
{ - +
diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/__tests__/share-my-ads-icons.spec.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/__tests__/share-my-ads-icons.spec.tsx new file mode 100644 index 000000000000..712801887d3c --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/__tests__/share-my-ads-icons.spec.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { screen, render } from '@testing-library/react'; +import ShareMyAdsSocials from '../share-my-ads-socials'; + +describe('', () => { + it('should render all the social media platforms', () => { + render(); + + expect(screen.getByText('WhatsApp')).toBeInTheDocument(); + expect(screen.getByText('Facebook')).toBeInTheDocument(); + expect(screen.getByText('Telegram')).toBeInTheDocument(); + expect(screen.getByText('Twitter')).toBeInTheDocument(); + expect(screen.getByText('Gmail')).toBeInTheDocument(); + }); +}); diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/index.ts b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/index.ts new file mode 100644 index 000000000000..a1583231dd38 --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/index.ts @@ -0,0 +1,4 @@ +import ShareMyAdsSocials from './share-my-ads-socials'; +import './share-my-ads-socials.scss'; + +export default ShareMyAdsSocials; diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.scss b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/share-my-ads-socials.scss similarity index 87% rename from packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.scss rename to packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/share-my-ads-socials.scss index 53841b1ac03b..16b6f7dda141 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.scss +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/share-my-ads-socials.scss @@ -5,10 +5,7 @@ margin: 2.5rem 0; @include mobile { - display: grid; - grid-template-columns: repeat(4, 1fr); - grid-row-gap: 2rem; - margin: 1rem 2.5rem; + margin: 2rem; } .react-share__ShareButton { diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/share-my-ads-socials.tsx similarity index 98% rename from packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.tsx rename to packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/share-my-ads-socials.tsx index 7fa1317629e9..463e8bfe5982 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-icons/share-my-ads-icons.tsx +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/share-my-ads-socials.tsx @@ -4,6 +4,7 @@ import { Icon, Text } from '@deriv/components'; import { Localize } from 'Components/i18next'; const ShareMyAdsIcons = () => { + // TODO: replace with proper url when available const advert_url = window.location.href; return ( @@ -24,14 +25,6 @@ const ShareMyAdsIcons = () => { - -
- -
- - - -
@@ -40,6 +33,14 @@ const ShareMyAdsIcons = () => { + +
+ +
+ + + +
Date: Thu, 27 Jul 2023 14:48:29 +0800 Subject: [PATCH 4/4] chore: separated card component out, removed test case --- .../share-my-ads-card/index.ts | 4 + .../share-my-ads-card/share-my-ads-card.scss | 76 +++++++++++++ .../share-my-ads-card/share-my-ads-card.tsx | 79 ++++++++++++++ .../share-my-ads-modal.scss | 77 ------------- .../share-my-ads-modal/share-my-ads-modal.tsx | 82 +------------- .../__tests__/share-my-ads-icons.spec.tsx | 15 --- packages/p2p/src/types/adverts.types.ts | 102 +++++++++--------- 7 files changed, 216 insertions(+), 219 deletions(-) create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/index.ts create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/share-my-ads-card.scss create mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/share-my-ads-card.tsx delete mode 100644 packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-socials/__tests__/share-my-ads-icons.spec.tsx diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/index.ts b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/index.ts new file mode 100644 index 000000000000..188d03007ebb --- /dev/null +++ b/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; diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/share-my-ads-card.scss b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/share-my-ads-card.scss new file mode 100644 index 000000000000..a2468f04a8fe --- /dev/null +++ b/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; + } +} diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/share-my-ads-card.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/share-my-ads-card.tsx new file mode 100644 index 000000000000..8ae5a540650b --- /dev/null +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-card/share-my-ads-card.tsx @@ -0,0 +1,79 @@ +import React from 'react'; +import { QRCode } from 'react-qrcode-logo'; +import { Text } from '@deriv/components'; +import { isMobile } from '@deriv/shared'; +import { Localize } from 'Components/i18next'; +import { base64_images } from 'Constants/base64-images'; +import { TAdvertProps } from 'Types'; + +type TShareMyAdsPopupProps = { + advert: TAdvertProps; + advert_url: string; + divRef: React.MutableRefObject; +}; + +const ShareMyAdsCard = ({ advert, advert_url, divRef }: TShareMyAdsPopupProps) => { + const { account_currency, id, max_order_amount_limit_display, min_order_amount_limit_display, rate_display, type } = + advert; + + const options = { + enableCORS: true, + size: isMobile() ? 120 : 150, + removeQrCodeBehindLogo: true, + logoPadding: 4, + logoImage: base64_images.dp2p_logo, + logoWidth: isMobile() ? 30 : 40, + logoHeight: isMobile() ? 30 : 40, + logoOpacity: 1, + }; + + return ( +
+ + + + +
+
+ + + + + + + + + +
+
+ + + + + + + + + +
+
+
+
+ +
+ + + +
+
+ ); +}; + +export default ShareMyAdsCard; diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss index 8f116e96576f..9b8db4ba7697 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.scss @@ -45,88 +45,11 @@ } } - &-details { - 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; - } - } - } - - &-title { - margin-bottom: 2rem; - } - } - &__download-button { @include mobile { width: 100%; } } - - &-qr { - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - margin-top: 2rem; - - @include mobile { - margin-top: 1rem; - } - - &__background { - 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; - } - } - } } } diff --git a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx index 85e4f200c231..5a381a7742e7 100644 --- a/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx +++ b/packages/p2p/src/components/modal-manager/modals/share-my-ads-modal/share-my-ads-modal.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { toPng } from 'html-to-image'; -import { QRCode } from 'react-qrcode-logo'; import { Button, Clipboard, @@ -11,17 +10,17 @@ import { Text, useCopyToClipboard, } from '@deriv/components'; -import { isMobile, useIsMounted } from '@deriv/shared'; +import { useIsMounted } from '@deriv/shared'; import { observer } from '@deriv/stores'; import { Localize, localize } from 'Components/i18next'; import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; import MyProfileSeparatorContainer from 'Components/my-profile/my-profile-separator-container'; -import { base64_images } from 'Constants/base64-images'; -import { TAdvertProps } from 'Types'; +import { TAdvert } from 'Types'; import ShareMyAdsIcons from './share-my-ads-socials'; import ShareMyAdsPopup from './share-my-ads-popup'; +import ShareMyAdsCard from './share-my-ads-card'; -const ShareMyAdsModal = ({ advert }: TAdvertProps) => { +const ShareMyAdsModal = ({ advert }: TAdvert) => { const [show_popup, setShowPopup] = React.useState(false); const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard(); @@ -31,19 +30,6 @@ const ShareMyAdsModal = ({ advert }: TAdvertProps) => { const advert_url = window.location.href; const { hideModal, is_modal_open } = useModalManagerContext(); - const { account_currency, id, max_order_amount_limit_display, min_order_amount_limit_display, rate_display, type } = - advert; - - const options = { - enableCORS: true, - size: isMobile() ? 120 : 150, - removeQrCodeBehindLogo: true, - logoPadding: 4, - logoImage: base64_images.dp2p_logo, - logoWidth: isMobile() ? 30 : 40, - logoHeight: isMobile() ? 30 : 40, - logoOpacity: 1, - }; let timeout_clipboard: ReturnType; @@ -93,65 +79,7 @@ const ShareMyAdsModal = ({ advert }: TAdvertProps) => {
-
- - - - -
-
- - - - - - - - - -
-
- - - - - - - - - -
-
-
-
- -
- - - -
-
+