From c75faef160815e71de974d36cc85740d744d33f1 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 1 Aug 2023 11:41:36 +0800 Subject: [PATCH 01/43] chore: added functions for sharing image --- .../share-my-ads-modal/share-my-ads-modal.tsx | 38 +++++++++++++++++-- 1 file changed, 34 insertions(+), 4 deletions(-) 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 426ac6e0c119..d43bab2d2335 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 @@ -17,6 +17,7 @@ import MyProfileSeparatorContainer from 'Components/my-profile/my-profile-separa import { TAdvert } from 'Types'; import ShareMyAdsIcons from './share-my-ads-socials'; import ShareMyAdsCard from './share-my-ads-card'; +import { isDesktop } from '@deriv/shared'; const ShareMyAdsModal = ({ advert }: TAdvert) => { const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard(); @@ -33,13 +34,42 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { event.stopPropagation(); }; + const dataURLtoFile = (dataurl: string, filename: string): File => { + const arr = dataurl.split(','); + const mimeType = arr[0].match(/:(.*?);/)[1]; + const decodedData = atob(arr[1]); + let lengthOfDecodedData = decodedData.length; + const u8array = new Uint8Array(lengthOfDecodedData); + + while (lengthOfDecodedData--) { + u8array[lengthOfDecodedData] = decodedData.charCodeAt(lengthOfDecodedData); + } + return new File([u8array], filename, { type: mimeType }); + }; + + const shareFile = (file: File, title: string, text: string) => { + if (navigator.canShare && navigator.canShare({ files: [file] })) { + navigator.share({ + files: [file], + title, + text, + }); + } + }; + const handleGenerateImage = () => { if (divRef.current) { toPng(divRef.current).then(dataUrl => { - const link = document.createElement('a'); - link.download = `${advert.type}_${advert.id}.png`; - link.href = dataUrl; - link.click(); + const file_name = `${advert.type}_${advert.id}.png`; + if (isDesktop()) { + const link = document.createElement('a'); + link.download = file_name; + link.href = dataUrl; + link.click(); + } else { + const file = dataURLtoFile(dataUrl, file_name); + shareFile(file, 'This is my advert!', advert_url); + } }); } }; From 41f25e62a3d5a57ef1522757f445589cf64d7473 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 1 Aug 2023 11:56:51 +0800 Subject: [PATCH 02/43] chore: converted file to blob instead --- .../share-my-ads-modal/share-my-ads-modal.tsx | 71 ++++++++++--------- 1 file changed, 38 insertions(+), 33 deletions(-) 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 d43bab2d2335..cf51f792b42e 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 @@ -34,43 +34,48 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { event.stopPropagation(); }; - const dataURLtoFile = (dataurl: string, filename: string): File => { - const arr = dataurl.split(','); - const mimeType = arr[0].match(/:(.*?);/)[1]; - const decodedData = atob(arr[1]); - let lengthOfDecodedData = decodedData.length; - const u8array = new Uint8Array(lengthOfDecodedData); + // const dataURLtoFile = (dataurl: string, filename: string): File => { + // const arr = dataurl.split(','); + // const mimeType = arr[0].match(/:(.*?);/)[1]; + // const decodedData = atob(arr[1]); + // let lengthOfDecodedData = decodedData.length; + // const u8array = new Uint8Array(lengthOfDecodedData); - while (lengthOfDecodedData--) { - u8array[lengthOfDecodedData] = decodedData.charCodeAt(lengthOfDecodedData); - } - return new File([u8array], filename, { type: mimeType }); - }; + // while (lengthOfDecodedData--) { + // u8array[lengthOfDecodedData] = decodedData.charCodeAt(lengthOfDecodedData); + // } + // return new File([u8array], filename, { type: mimeType }); + // }; - const shareFile = (file: File, title: string, text: string) => { - if (navigator.canShare && navigator.canShare({ files: [file] })) { - navigator.share({ - files: [file], - title, - text, - }); - } - }; + // const shareFile = (file: File, title: string, text: string) => { + // if (navigator.canShare && navigator.canShare({ files: [file] })) { + // navigator.share({ + // files: [file], + // title, + // text, + // }); + // } + // }; - const handleGenerateImage = () => { + const handleGenerateImage = async () => { if (divRef.current) { - toPng(divRef.current).then(dataUrl => { - const file_name = `${advert.type}_${advert.id}.png`; - if (isDesktop()) { - const link = document.createElement('a'); - link.download = file_name; - link.href = dataUrl; - link.click(); - } else { - const file = dataURLtoFile(dataUrl, file_name); - shareFile(file, 'This is my advert!', advert_url); - } - }); + const dataUrl = await toPng(divRef.current); + const file_name = `${advert.type}_${advert.id}.png`; + + if (isDesktop()) { + const link = document.createElement('a'); + link.download = file_name; + link.href = dataUrl; + link.click(); + } else { + const blob = await fetch(dataUrl).then(res => res.blob()); + const file = new File([blob], file_name, { type: 'image/png' }); + navigator.share({ + files: [file], + title: 'This is my advert!', + text: advert_url, + }); + } } }; From e1ccfc63de54e32836605b06ee61dc798116ad12 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 1 Aug 2023 12:40:58 +0800 Subject: [PATCH 03/43] chore: added if check if they can share the file --- .../share-my-ads-modal/share-my-ads-modal.tsx | 39 ++++--------------- 1 file changed, 8 insertions(+), 31 deletions(-) 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 cf51f792b42e..98df9850a13b 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 @@ -34,47 +34,24 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { event.stopPropagation(); }; - // const dataURLtoFile = (dataurl: string, filename: string): File => { - // const arr = dataurl.split(','); - // const mimeType = arr[0].match(/:(.*?);/)[1]; - // const decodedData = atob(arr[1]); - // let lengthOfDecodedData = decodedData.length; - // const u8array = new Uint8Array(lengthOfDecodedData); - - // while (lengthOfDecodedData--) { - // u8array[lengthOfDecodedData] = decodedData.charCodeAt(lengthOfDecodedData); - // } - // return new File([u8array], filename, { type: mimeType }); - // }; - - // const shareFile = (file: File, title: string, text: string) => { - // if (navigator.canShare && navigator.canShare({ files: [file] })) { - // navigator.share({ - // files: [file], - // title, - // text, - // }); - // } - // }; - const handleGenerateImage = async () => { if (divRef.current) { const dataUrl = await toPng(divRef.current); const file_name = `${advert.type}_${advert.id}.png`; - if (isDesktop()) { - const link = document.createElement('a'); - link.download = file_name; - link.href = dataUrl; - link.click(); - } else { + if (navigator.canShare && navigator.canShare({ files: [new File([], '')] })) { const blob = await fetch(dataUrl).then(res => res.blob()); const file = new File([blob], file_name, { type: 'image/png' }); navigator.share({ + url: advert_url, files: [file], - title: 'This is my advert!', - text: advert_url, + text: 'This is my advert!', }); + } else { + const link = document.createElement('a'); + link.download = file_name; + link.href = dataUrl; + link.click(); } } }; From b79c25af85149a726aff2c2097a52dccedef29fc Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 1 Aug 2023 14:43:51 +0800 Subject: [PATCH 04/43] chore: check if canshare file --- .../modals/share-my-ads-modal/share-my-ads-modal.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) 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 98df9850a13b..3ffd0f78684f 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 @@ -38,14 +38,12 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { if (divRef.current) { const dataUrl = await toPng(divRef.current); const file_name = `${advert.type}_${advert.id}.png`; + const blob = await fetch(dataUrl).then(res => res.blob()); + const file = new File([blob], file_name, { type: 'image/png' }); - if (navigator.canShare && navigator.canShare({ files: [new File([], '')] })) { - const blob = await fetch(dataUrl).then(res => res.blob()); - const file = new File([blob], file_name, { type: 'image/png' }); + if (navigator.canShare && navigator.canShare({ files: [file] })) { navigator.share({ - url: advert_url, files: [file], - text: 'This is my advert!', }); } else { const link = document.createElement('a'); From 12fa4cb2b3d28a18c3044170c711f5f17b1e8acf Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 3 Aug 2023 15:57:58 +0800 Subject: [PATCH 05/43] chore: added custom message --- .../share-my-ads-modal/share-my-ads-modal.tsx | 15 +++++++++------ .../share-my-ads-socials/share-my-ads-socials.tsx | 15 ++++++++------- 2 files changed, 17 insertions(+), 13 deletions(-) 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 3ffd0f78684f..589c0a36c1c0 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 @@ -14,17 +14,22 @@ 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 { ad_type } from 'Constants/floating-rate'; import { TAdvert } from 'Types'; -import ShareMyAdsIcons from './share-my-ads-socials'; +import ShareMyAdsSocials from './share-my-ads-socials'; import ShareMyAdsCard from './share-my-ads-card'; -import { isDesktop } from '@deriv/shared'; const ShareMyAdsModal = ({ advert }: TAdvert) => { const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard(); + const { account_currency, local_currency, rate_display, rate_type } = advert; const divRef = React.useRef(null); // TODO: replace with proper url when available const advert_url = window.location.href; + const custom_message = + rate_type === ad_type.FLOAT + ? `Hello! I'd like to exchange ${local_currency} for ${account_currency} at ${rate_display}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n${advert_url}\n\nThanks!` + : `Hello! I'd like to exchange ${local_currency} for ${account_currency} at ${rate_display} ${local_currency} on Deriv P2P.\n\nIf you're interested, check out my ad ${advert_url}\n\nThanks!`; const { hideModal, is_modal_open } = useModalManagerContext(); @@ -57,9 +62,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { // TODO: Replace with proper message and url when available const handleShareLink = () => { navigator.share({ - url: advert_url, - title: 'P2P Advert', - text: 'This is my advert!', + text: custom_message, }); }; @@ -127,7 +130,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { - + { - // TODO: replace with proper url and message when available - const advert_url = window.location.href; - const custom_message = 'This is my advert!'; +type TShareMyAdsSocialsProps = { + custom_message: string; +}; +const ShareMyAdsSocials = ({ custom_message }: TShareMyAdsSocialsProps) => { + const advert_url = window.location.href; const share_buttons = [ { ShareButton: WhatsappShareButton, @@ -22,14 +23,14 @@ const ShareMyAdsSocials = () => { { ShareButton: TwitterShareButton, icon: 'IcStockTwitter', - messagePropName: 'quote', + messagePropName: 'title', size: 28, small_icon: true, text: 'Twitter', }, { ShareButton: 'a', - href: `https://mail.google.com/mail/?view=cm&fs=1&body=${advert_url}`, + href: `https://mail.google.com/mail/?view=cm&fs=1&body=${custom_message}`, icon: 'IcStockGoogle', rel: 'noreferrer', size: 28, @@ -44,7 +45,7 @@ const ShareMyAdsSocials = () => { {share_buttons.map(({ ShareButton, href, icon, messagePropName, rel, size, small_icon, target, text }) => ( Date: Thu, 3 Aug 2023 16:18:57 +0800 Subject: [PATCH 06/43] chore: added emoji --- .../modals/share-my-ads-modal/share-my-ads-modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 589c0a36c1c0..ed798b34ebef 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 @@ -29,7 +29,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { const custom_message = rate_type === ad_type.FLOAT ? `Hello! I'd like to exchange ${local_currency} for ${account_currency} at ${rate_display}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n${advert_url}\n\nThanks!` - : `Hello! I'd like to exchange ${local_currency} for ${account_currency} at ${rate_display} ${local_currency} on Deriv P2P.\n\nIf you're interested, check out my ad ${advert_url}\n\nThanks!`; + : `Hello! I'd like to exchange ${local_currency} for ${account_currency} at ${rate_display} ${local_currency} on Deriv P2P.\n\nIf you're interested, check out my ad 👉${advert_url}\n\nThanks!`; const { hideModal, is_modal_open } = useModalManagerContext(); From 4631886771e91bba07711e12a1521b7fa38db91a Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 10 Aug 2023 11:43:06 +0800 Subject: [PATCH 07/43] chore: added routing to advert modal --- packages/p2p/src/components/app.jsx | 18 ++++++++++++++---- .../share-my-ads-modal/share-my-ads-modal.tsx | 8 ++++---- .../share-my-ads-socials.tsx | 4 ++-- .../p2p/src/stores/advertiser-page-store.js | 12 ++++++++++++ 4 files changed, 32 insertions(+), 10 deletions(-) diff --git a/packages/p2p/src/components/app.jsx b/packages/p2p/src/components/app.jsx index 310ed5ad9019..0a79824cec79 100644 --- a/packages/p2p/src/components/app.jsx +++ b/packages/p2p/src/components/app.jsx @@ -25,7 +25,7 @@ const App = () => { const history = useHistory(); const location = useLocation(); - const { buy_sell_store, general_store, order_store } = useStores(); + const { advertiser_page_store, buy_sell_store, general_store, order_store } = useStores(); const lang = getLanguage(); @@ -102,11 +102,21 @@ const App = () => { } else if (/\/advertiser$/.test(location.pathname)) { if (location.search || general_store.counterparty_advertiser_id) { const url_params = new URLSearchParams(location.search); + const advert_id = url_params.get('advert_id'); + general_store.setCounterpartyAdvertiserId(url_params.get('id')); - // DO NOT REMOVE. This will prevent the page from redirecting to buy sell on reload from advertiser page - // as it resets the URL search params - history.replace({ pathname: routes.p2p_advertiser_page, search: `?id=${url_params.get('id')}` }); + if (advert_id) { + advertiser_page_store.getAdvertInfo(advert_id); + history.replace({ + pathname: routes.p2p_advertiser_page, + search: `?id=${url_params.get('id')}&advert_id=${advert_id}`, + }); + } else { + // DO NOT REMOVE. This will prevent the page from redirecting to buy sell on reload from advertiser page + // as it resets the URL search params + history.replace({ pathname: routes.p2p_advertiser_page, search: `?id=${url_params.get('id')}` }); + } } else { history.push(routes.p2p_buy_sell); } 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 ed798b34ebef..ae5744b4a130 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 @@ -21,11 +21,11 @@ import ShareMyAdsCard from './share-my-ads-card'; const ShareMyAdsModal = ({ advert }: TAdvert) => { const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard(); - const { account_currency, local_currency, rate_display, rate_type } = advert; + const { account_currency, advertiser_details, id, local_currency, rate_display, rate_type } = advert; + const { id: advertiser_id } = advertiser_details; const divRef = React.useRef(null); - // TODO: replace with proper url when available - const advert_url = window.location.href; + const advert_url = `${window.location.origin}/cashier/p2p/advertiser?id=${advertiser_id}&advert_id=${id}`; const custom_message = rate_type === ad_type.FLOAT ? `Hello! I'd like to exchange ${local_currency} for ${account_currency} at ${rate_display}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n${advert_url}\n\nThanks!` @@ -130,7 +130,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { - + { - const advert_url = window.location.href; +const ShareMyAdsSocials = ({ advert_url, custom_message }: TShareMyAdsSocialsProps) => { const share_buttons = [ { ShareButton: WhatsappShareButton, diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js index 973c18d6c178..46388fd76ee7 100644 --- a/packages/p2p/src/stores/advertiser-page-store.js +++ b/packages/p2p/src/stores/advertiser-page-store.js @@ -41,6 +41,7 @@ export default class AdvertiserPageStore extends BaseStore { advertiser_details: computed, advertiser_details_id: computed, advertiser_details_name: computed, + getAdvertInfo: action.bound, getCounterpartyAdvertiserList: action.bound, handleTabItemClick: action.bound, onAdvertiserIdUpdate: action.bound, @@ -147,6 +148,17 @@ export default class AdvertiserPageStore extends BaseStore { this.setIsLoading(false); } + getAdvertInfo(advert_id) { + requestWS({ p2p_advert_info: 1, id: advert_id }).then(response => { + if (response) { + const { p2p_advert_info } = response; + this.setActiveIndex(p2p_advert_info.type === buy_sell.BUY ? 0 : 1); + this.root_store.buy_sell_store.setSelectedAdState(p2p_advert_info); + this.root_store.general_store.showModal({ key: 'BuySellModal' }); + } + }); + } + getCounterpartyAdvertiserList(advertiser_id) { this.setIsLoading(true); requestWS({ From c497f5b75a7e682f5e482f5020d3965af8ef75e4 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Fri, 11 Aug 2023 14:13:49 +0800 Subject: [PATCH 08/43] chore: check if qr code has loaded --- .../share-my-ads-card/share-my-ads-card.tsx | 5 +-- .../share-my-ads-modal/share-my-ads-modal.tsx | 36 ++++++++++++++----- .../share-my-ads-socials.tsx | 3 +- 3 files changed, 33 insertions(+), 11 deletions(-) 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 index b31f50bfc710..5f54ac1159ed 100644 --- 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 @@ -10,9 +10,10 @@ type TShareMyAdsCardProps = { advert: Partial; advert_url: string; divRef: React.MutableRefObject | React.MutableRefObject; + setHasQrLoaded: React.Dispatch>; }; -const ShareMyAdsCard = ({ advert, advert_url, divRef }: TShareMyAdsCardProps) => { +const ShareMyAdsCard = ({ advert, advert_url, divRef, setHasQrLoaded }: TShareMyAdsCardProps) => { const { account_currency, id, max_order_amount_limit_display, min_order_amount_limit_display, rate_display, type } = advert; @@ -58,7 +59,7 @@ const ShareMyAdsCard = ({ advert, advert_url, divRef }: TShareMyAdsCardProps) =>
- + setHasQrLoaded(true)} />
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 ae5744b4a130..51109f2ef1b1 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 @@ -20,18 +20,34 @@ import ShareMyAdsSocials from './share-my-ads-socials'; import ShareMyAdsCard from './share-my-ads-card'; const ShareMyAdsModal = ({ advert }: TAdvert) => { + const [has_qr_loaded, setHasQrLoaded] = React.useState(false); const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard(); const { account_currency, advertiser_details, id, local_currency, rate_display, rate_type } = advert; const { id: advertiser_id } = advertiser_details; + const { hideModal, is_modal_open } = useModalManagerContext(); const divRef = React.useRef(null); const advert_url = `${window.location.origin}/cashier/p2p/advertiser?id=${advertiser_id}&advert_id=${id}`; const custom_message = rate_type === ad_type.FLOAT - ? `Hello! I'd like to exchange ${local_currency} for ${account_currency} at ${rate_display}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n${advert_url}\n\nThanks!` - : `Hello! I'd like to exchange ${local_currency} for ${account_currency} at ${rate_display} ${local_currency} on Deriv P2P.\n\nIf you're interested, check out my ad 👉${advert_url}\n\nThanks!`; - - const { hideModal, is_modal_open } = useModalManagerContext(); + ? localize( + "Hello! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n{{advert_url}}\n\nThanks!", + { + local_currency, + account_currency, + rate_display, + advert_url, + } + ) + : localize( + "Hello! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n{{advert_url}}\n\nThanks!", + { + local_currency, + account_currency, + rate_display, + advert_url, + } + ); const onCopy = (event: { stopPropagation: () => void }) => { copyToClipboard(advert_url); @@ -46,7 +62,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { const blob = await fetch(dataUrl).then(res => res.blob()); const file = new File([blob], file_name, { type: 'image/png' }); - if (navigator.canShare && navigator.canShare({ files: [file] })) { + if (navigator.canShare && navigator.canShare({ files: [file] }) && has_qr_loaded) { navigator.share({ files: [file], }); @@ -59,10 +75,9 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { } }; - // TODO: Replace with proper message and url when available const handleShareLink = () => { navigator.share({ - text: custom_message, + text: custom_message as string, }); }; @@ -96,7 +111,12 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => {
- +
- setHasQrLoaded(true)} /> + {/* setHasQrLoaded(true)} /> */} + setHasQrLoaded(true)} />
From 834619f959b7440bad6b55724225f790a7149fe7 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 15 Aug 2023 13:40:15 +0800 Subject: [PATCH 12/43] chore: fixed sharing qr code --- .../share-my-ads-modal/share-my-ads-card/share-my-ads-card.tsx | 2 +- .../modals/share-my-ads-modal/share-my-ads-modal.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 index c8ca4daea6f5..1a88128def14 100644 --- 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 @@ -61,7 +61,7 @@ const ShareMyAdsCard = ({ advert, advert_url, divRef, setHasQrLoaded }: TShareMy
{/* setHasQrLoaded(true)} /> */} - setHasQrLoaded(true)} /> +
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 3850d00709b6..7b6baa2dee14 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 @@ -64,7 +64,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { const blob = new Blob([dataUrlBlob], { type: 'image/png' }); const file = new File([blob], file_name, { type: 'image/png' }); - if (navigator.canShare && navigator.canShare({ files: [file] }) && has_qr_loaded) { + if (navigator.canShare && navigator.canShare({ files: [file] })) { navigator.share({ files: [file], }); From 41cf2fd434d9a102cec1e1cd28eab7a65a89a2fe Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 15 Aug 2023 15:23:44 +0800 Subject: [PATCH 13/43] chore: fixed qr code styling --- .../share-my-ads-card/share-my-ads-card.scss | 25 ++++++++++++++++++- .../share-my-ads-card/share-my-ads-card.tsx | 5 +++- 2 files changed, 28 insertions(+), 2 deletions(-) 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 index e70d77dc906b..9bb6b8f8fd7e 100644 --- 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 @@ -52,13 +52,36 @@ } &-container { + align-items: center; background-color: $color-white; display: flex; - padding: 0.4rem; + padding: 1.5rem; border: 0.1rem solid $color-grey-5; border-radius: 1rem; + justify-content: center; position: relative; width: fit-content; + + &__logo { + background: #fff; + display: flex; + padding: 0.5rem; + position: absolute; + + @include mobile { + padding: 0.3rem; + } + + &-image { + height: 3.6rem; + width: 3.6rem; + + @include mobile { + height: 3rem; + width: 3rem; + } + } + } } &-text { 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 index 1a88128def14..fe8284186f24 100644 --- 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 @@ -61,7 +61,10 @@ const ShareMyAdsCard = ({ advert, advert_url, divRef, setHasQrLoaded }: TShareMy
{/* setHasQrLoaded(true)} /> */} - +
+ +
+
From dbb974b64d2cd964783534e6d663201a7b08f017 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 15 Aug 2023 15:43:16 +0800 Subject: [PATCH 14/43] chore: fixed logo size --- packages/p2p/package.json | 1 - .../share-my-ads-card/share-my-ads-card.scss | 10 +++------- .../share-my-ads-card/share-my-ads-card.tsx | 5 +---- .../modals/share-my-ads-modal/share-my-ads-modal.tsx | 9 +-------- 4 files changed, 5 insertions(+), 20 deletions(-) diff --git a/packages/p2p/package.json b/packages/p2p/package.json index 843fa553a031..7df7b0394004 100644 --- a/packages/p2p/package.json +++ b/packages/p2p/package.json @@ -52,7 +52,6 @@ "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", 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 index 9bb6b8f8fd7e..de5c43c03195 100644 --- 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 @@ -65,16 +65,12 @@ &__logo { background: #fff; display: flex; - padding: 0.5rem; + padding: 0.3rem; position: absolute; - @include mobile { - padding: 0.3rem; - } - &-image { - height: 3.6rem; - width: 3.6rem; + height: 3.4rem; + width: 3.4rem; @include mobile { height: 3rem; 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 index fe8284186f24..cca280150065 100644 --- 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 @@ -1,5 +1,4 @@ import React from 'react'; -// import { QRCode } from 'react-qrcode-logo'; import { QRCodeSVG } from 'qrcode.react'; import { Text } from '@deriv/components'; import { isMobile } from '@deriv/shared'; @@ -11,10 +10,9 @@ type TShareMyAdsCardProps = { advert: Partial; advert_url: string; divRef: React.MutableRefObject | React.MutableRefObject; - setHasQrLoaded: React.Dispatch>; }; -const ShareMyAdsCard = ({ advert, advert_url, divRef, setHasQrLoaded }: TShareMyAdsCardProps) => { +const ShareMyAdsCard = ({ advert, advert_url, divRef }: TShareMyAdsCardProps) => { const { account_currency, id, max_order_amount_limit_display, min_order_amount_limit_display, rate_display, type } = advert; @@ -60,7 +58,6 @@ const ShareMyAdsCard = ({ advert, advert_url, divRef, setHasQrLoaded }: TShareMy
- {/* setHasQrLoaded(true)} /> */}
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 7b6baa2dee14..21bfa67bef1f 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 @@ -20,7 +20,6 @@ import ShareMyAdsSocials from './share-my-ads-socials'; import ShareMyAdsCard from './share-my-ads-card'; const ShareMyAdsModal = ({ advert }: TAdvert) => { - const [has_qr_loaded, setHasQrLoaded] = React.useState(false); const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard(); const { account_currency, advertiser_details, id, local_currency, rate_display, rate_type } = advert; const { id: advertiser_id } = advertiser_details; @@ -60,7 +59,6 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { const dataUrl = await toPng(divRef.current); const dataUrlBlob = await toBlob(divRef.current); const file_name = `${advert.type}_${advert.id}.png`; - // const blob = await fetch(dataUrl).then(res => res.blob()); const blob = new Blob([dataUrlBlob], { type: 'image/png' }); const file = new File([blob], file_name, { type: 'image/png' }); @@ -113,12 +111,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => {
- + - - - - - - -
+ + + {is_sharing ? ( + + ) : ( + -
- - - - - - - - -
- - + + + + +
+
+ + + + + + + + +
+ +
+ + + + + + + -
- +
+ + + +
+ +
-
- -
- - - + +
+ + )} + + ); }; From c6d56ed5842fcd3cae398dd4e8fbc7c83a3c8d6b Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 15 Aug 2023 16:47:59 +0800 Subject: [PATCH 16/43] chore: fixed setting the loading if is mobile --- .../modals/share-my-ads-modal/share-my-ads-modal.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 f96f0b45c35d..f871e6d0ef5b 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 @@ -19,6 +19,7 @@ import { ad_type } from 'Constants/floating-rate'; import { TAdvert } from 'Types'; import ShareMyAdsSocials from './share-my-ads-socials'; import ShareMyAdsCard from './share-my-ads-card'; +import { isMobile } from '@deriv/shared'; const ShareMyAdsModal = ({ advert }: TAdvert) => { const [is_sharing, setIsSharing] = React.useState(false); @@ -64,8 +65,9 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { const blob = new Blob([dataUrlBlob], { type: 'image/png' }); const file = new File([blob], file_name, { type: 'image/png' }); + if (isMobile()) setIsSharing(true); + if (navigator.canShare && navigator.canShare({ files: [file] })) { - setIsSharing(true); navigator .share({ files: [file], From 514b98cbd0ec07a924095b7d2c4ba62f90d9c5ac Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 22 Aug 2023 15:51:14 +0800 Subject: [PATCH 17/43] chore: added navigation to advert and checked for edge cases when navigating --- .../components/error-dialog/error-dialog.tsx | 9 + .../src/containers/cashier/cashier.tsx | 26 ++- .../src/components/dialog/dialog.scss | 1 - .../src/sass/app/modules/reset-password.scss | 1 + packages/hooks/src/useIsP2PEnabled.ts | 1 + .../advertiser-page/advertiser-page.jsx | 25 ++- packages/p2p/src/components/app.jsx | 12 +- .../modals/buy-sell-modal/buy-sell-modal.jsx | 14 +- .../modals/error-modal/error-modal.jsx | 1 + .../modals/error-modal/error-modal.scss | 2 +- .../share-my-ads-card/share-my-ads-card.scss | 17 -- .../share-my-ads-card/share-my-ads-card.tsx | 40 ++-- .../share-my-ads-modal/share-my-ads-modal.tsx | 184 ++++++++---------- 13 files changed, 180 insertions(+), 153 deletions(-) diff --git a/packages/cashier/src/components/error-dialog/error-dialog.tsx b/packages/cashier/src/components/error-dialog/error-dialog.tsx index 58102d2fb5d0..9a080a027c3e 100644 --- a/packages/cashier/src/components/error-dialog/error-dialog.tsx +++ b/packages/cashier/src/components/error-dialog/error-dialog.tsx @@ -107,6 +107,15 @@ const ErrorDialog = observer(({ className, error = {} }: TErrorDialogProps) => { onConfirm: undefined, message: error_message, }); + } else if (error_code === 'ShareMyAdsError') { + setDetails({ + title: localize('Deriv P2P unavailable'), + cancel_button_text: undefined, + confirm_button_text: localize('OK'), + onConfirm: undefined, + message: error_message, + has_close_icon: true, + }); } else { setDetails({ title: localize('Cashier Error'), diff --git a/packages/cashier/src/containers/cashier/cashier.tsx b/packages/cashier/src/containers/cashier/cashier.tsx index edf8586a0cb8..a622ea4aa535 100644 --- a/packages/cashier/src/containers/cashier/cashier.tsx +++ b/packages/cashier/src/containers/cashier/cashier.tsx @@ -49,7 +49,7 @@ type TCashierOptions = { }; const Cashier = observer(({ history, location, routes: routes_config }: TCashierProps) => { - const { common, ui, client } = useStore(); + const { common, ui, client, traders_hub } = useStore(); const { withdraw, general_store, payment_agent } = useCashierStore(); const { error } = withdraw; const { @@ -68,8 +68,9 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier } = usePaymentAgentTransferVisible(); const { is_payment_agent_visible } = payment_agent; const { is_from_derivgo } = common; - const { is_cashier_visible: is_visible, toggleCashier } = ui; - const { is_account_setting_loaded, is_logged_in, is_logging_in } = client; + const { is_demo } = traders_hub; + const { is_cashier_visible: is_visible, toggleCashier, toggleReadyToDepositModal } = ui; + const { is_account_setting_loaded, is_logged_in, is_logging_in, is_svg } = client; const is_account_transfer_visible = useAccountTransferVisible(); const is_onramp_visible = useOnrampVisible(); const p2p_notification_count = useP2PNotificationCount(); @@ -77,6 +78,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier data: is_p2p_enabled, isSuccess: is_p2p_enabled_success, isLoading: is_p2p_enabled_loading, + is_p2p_supported_currency, } = useIsP2PEnabled(); React.useEffect(() => { @@ -109,8 +111,26 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier React.useEffect(() => { if (is_p2p_enabled_success && !is_p2p_enabled && history.location.pathname.startsWith(routes.cashier_p2p)) { + const url_params = new URLSearchParams(history.location.search); + const advert_id = url_params.get('advert_id'); + history.push(routes.cashier_deposit); + + if (advert_id) { + if (is_demo) { + toggleReadyToDepositModal(); + } else { + error.setErrorMessage({ + code: 'ShareMyAdsError', + message: + !is_p2p_supported_currency && is_svg + ? localize('Deriv P2P is currently unavailable in this currency.') + : localize('Deriv P2P is currently unavailable in your country.'), + }); + } + } } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [history, is_p2p_enabled, is_p2p_enabled_success]); const onClickClose = () => history.push(routes.traders_hub); diff --git a/packages/components/src/components/dialog/dialog.scss b/packages/components/src/components/dialog/dialog.scss index 11b61a95fb2d..6d64b09827d8 100644 --- a/packages/components/src/components/dialog/dialog.scss +++ b/packages/components/src/components/dialog/dialog.scss @@ -73,7 +73,6 @@ justify-content: space-between; align-items: center; margin-bottom: 1rem; - margin-top: 1.4rem; &--end { justify-content: flex-end; } diff --git a/packages/core/src/sass/app/modules/reset-password.scss b/packages/core/src/sass/app/modules/reset-password.scss index 0ba5b87950e5..b4a125111710 100644 --- a/packages/core/src/sass/app/modules/reset-password.scss +++ b/packages/core/src/sass/app/modules/reset-password.scss @@ -71,6 +71,7 @@ &__header { &-wrapper { margin: 0; + margin-top: 1.4rem; } } &__content { diff --git a/packages/hooks/src/useIsP2PEnabled.ts b/packages/hooks/src/useIsP2PEnabled.ts index 2c877c0d0a5a..65440cc4ee99 100644 --- a/packages/hooks/src/useIsP2PEnabled.ts +++ b/packages/hooks/src/useIsP2PEnabled.ts @@ -25,6 +25,7 @@ const useIsP2PEnabled = () => { return { ...rest, data: is_p2p_enabled, + is_p2p_supported_currency, }; }; diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx index f236851cee9c..679b0df76acd 100644 --- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx +++ b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { DesktopWrapper, Loading, MobileWrapper, Text } from '@deriv/components'; -import { daysSince, isMobile } from '@deriv/shared'; +import { daysSince, isMobile, routes } from '@deriv/shared'; import { reaction } from 'mobx'; import { observer } from 'mobx-react-lite'; import { useHistory } from 'react-router-dom'; @@ -72,8 +72,26 @@ const AdvertiserPage = () => { const disposeCounterpartyAdvertiserIdReaction = reaction( () => [general_store.counterparty_advertiser_id, general_store.is_advertiser_info_subscribed], () => { - // DO NOT REMOVE. This fixes reload on advertiser page routing issue - advertiser_page_store.onAdvertiserIdUpdate(); + if (general_store.counterparty_advertiser_id) { + // DO NOT REMOVE. This fixes reloading issue when user navigates to advertiser page via URL + advertiser_page_store.onAdvertiserIdUpdate(); + + if ( + general_store.counterparty_advert_id && + !general_store.is_barred && + general_store.is_advertiser + ) { + advertiser_page_store.getAdvertInfo(); + } else if (general_store.is_barred) { + history.push(routes.p2p_buy_sell); + } else if (!general_store.is_advertiser) { + history.push(routes.p2p_my_ads); + } + + // Need to set active index to 0 when users navigate to advertiser page via url, + // and when user clicks the back button, it will navigate back to the buy/sell tab + general_store.setActiveIndex(0); + } }, { fireImmediately: true } ); @@ -158,6 +176,7 @@ const AdvertiserPage = () => { if (general_store.active_index === general_store.path.my_profile) my_profile_store.setActiveTab(my_profile_tabs.MY_COUNTERPARTIES); history.push(general_store.active_tab_route); + general_store.setCounterpartyAdvertiserId(null); }} page_title={localize("Advertiser's page")} /> diff --git a/packages/p2p/src/components/app.jsx b/packages/p2p/src/components/app.jsx index e1b94a08fe6b..f07f5f51b14d 100644 --- a/packages/p2p/src/components/app.jsx +++ b/packages/p2p/src/components/app.jsx @@ -26,7 +26,7 @@ const App = () => { const history = useHistory(); const location = useLocation(); - const { advertiser_page_store, buy_sell_store, general_store, order_store } = useStores(); + const { buy_sell_store, general_store, order_store } = useStores(); const lang = getLanguage(); @@ -105,20 +105,21 @@ const App = () => { } else if (/\/advertiser$/.test(location.pathname)) { if (location.search || general_store.counterparty_advertiser_id) { const url_params = new URLSearchParams(location.search); + const id = url_params.get('id'); const advert_id = url_params.get('advert_id'); - general_store.setCounterpartyAdvertiserId(url_params.get('id')); + general_store.setCounterpartyAdvertiserId(id); if (advert_id) { - advertiser_page_store.getAdvertInfo(advert_id); + general_store.setCounterpartyAdvertId(advert_id); history.replace({ pathname: routes.p2p_advertiser_page, - search: `?id=${url_params.get('id')}&advert_id=${advert_id}`, + search: `?id=${id}&advert_id=${advert_id}`, }); } else { // DO NOT REMOVE. This will prevent the page from redirecting to buy sell on reload from advertiser page // as it resets the URL search params - history.replace({ pathname: routes.p2p_advertiser_page, search: `?id=${url_params.get('id')}` }); + history.replace({ pathname: routes.p2p_advertiser_page, search: `?id=${id}` }); } } else { history.push(routes.p2p_buy_sell); @@ -128,6 +129,7 @@ const App = () => { return () => { general_store.onUnmount(); disposeAdvertiserInfoSubscribedReaction(); + // disposeHandleShareAdsErrorReaction(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.jsx b/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.jsx index bb503dc00fcf..dd61e61bc025 100644 --- a/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.jsx +++ b/packages/p2p/src/components/modal-manager/modals/buy-sell-modal/buy-sell-modal.jsx @@ -109,7 +109,8 @@ const BuySellModalTitle = () => { }; const BuySellModal = () => { - const { buy_sell_store, floating_rate_store, general_store, my_profile_store, order_store } = useStores(); + const { advertiser_page_store, buy_sell_store, floating_rate_store, general_store, my_profile_store, order_store } = + useStores(); const submitForm = React.useRef(() => {}); const [error_message, setErrorMessage] = useSafeState(null); const [is_submit_disabled, setIsSubmitDisabled] = useSafeState(true); @@ -120,6 +121,10 @@ const BuySellModal = () => { const history = useHistory(); const location = useLocation(); + const table_type = buy_sell_store.show_advertiser_page + ? advertiser_page_store.counterparty_type + : buy_sell_store.table_type; + React.useEffect(() => { const disposeHasRateChangedReaction = reaction( () => buy_sell_store.advert, @@ -207,6 +212,7 @@ const BuySellModal = () => { buy_sell_store.fetchAdvertiserAdverts(); } floating_rate_store.setIsMarketRateChanged(false); + general_store.setCounterpartyAdvertId(null); }; const onConfirmClick = order_info => { @@ -259,7 +265,7 @@ const BuySellModal = () => { page_header_text={} pageHeaderReturnFn={onCancel} > - {buy_sell_store.table_type === buy_sell.SELL && is_account_balance_low && } + {table_type === buy_sell.SELL && is_account_balance_low && } {!!error_message && } {my_profile_store.should_show_add_payment_method_form ? ( @@ -304,9 +310,7 @@ const BuySellModal = () => { height={buy_sell_store.table_type === buy_sell.BUY ? '100%' : 'calc(100% - 5.8rem - 7.4rem)'} > - {buy_sell_store.table_type === buy_sell.SELL && is_account_balance_low && ( - - )} + {table_type === buy_sell.SELL && is_account_balance_low && } {my_profile_store.should_show_add_payment_method_form ? ( diff --git a/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx b/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx index b3a2ef3d2bf4..0c981fb62d4d 100644 --- a/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx +++ b/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx @@ -21,6 +21,7 @@ const ErrorModal = ({ has_close_icon={has_close_icon} is_open={is_modal_open} title={error_modal_title} + toggleModal={onClose ?? hideModal} width={width} > {error_message} diff --git a/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.scss b/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.scss index 5e521fcc3fa4..499d04f0317f 100644 --- a/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.scss +++ b/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.scss @@ -1,6 +1,6 @@ .error-modal { &__body { - padding: 0 2.4rem; + padding: 1rem 2.4rem; @include mobile { padding: 0 1.6rem; 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 index de5c43c03195..ca47be4c3faf 100644 --- 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 @@ -61,23 +61,6 @@ justify-content: center; position: relative; width: fit-content; - - &__logo { - background: #fff; - display: flex; - padding: 0.3rem; - position: absolute; - - &-image { - height: 3.4rem; - width: 3.4rem; - - @include mobile { - height: 3rem; - width: 3rem; - } - } - } } &-text { 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 index cca280150065..18fbd84173b0 100644 --- 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 @@ -5,6 +5,7 @@ import { isMobile } from '@deriv/shared'; import { Localize } from 'Components/i18next'; import { base64_images } from 'Constants/base64-images'; import { TAdvertProps } from 'Types'; +import { ad_type } from 'Constants/floating-rate'; type TShareMyAdsCardProps = { advert: Partial; @@ -13,18 +14,16 @@ type TShareMyAdsCardProps = { }; const ShareMyAdsCard = ({ advert, advert_url, divRef }: TShareMyAdsCardProps) => { - 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, - }; + const { + account_currency, + id, + local_currency, + max_order_amount_limit_display, + min_order_amount_limit_display, + rate_display, + rate_type, + type, + } = advert; return (
@@ -52,16 +51,23 @@ const ShareMyAdsCard = ({ advert, advert_url, divRef }: TShareMyAdsCardProps) => {min_order_amount_limit_display} - {max_order_amount_limit_display} {account_currency} - {rate_display}% + {rate_display} + {rate_type === ad_type.FIXED ? ` ${local_currency}` : '%'}
-
- -
- +
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 f871e6d0ef5b..f77191425222 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,11 +1,10 @@ import React from 'react'; -import { toBlob, toPng } from 'html-to-image'; +import { toPng } from 'html-to-image'; import { Button, Clipboard, DesktopWrapper, Icon, - Loading, MobileWrapper, Modal, Text, @@ -19,10 +18,8 @@ import { ad_type } from 'Constants/floating-rate'; import { TAdvert } from 'Types'; import ShareMyAdsSocials from './share-my-ads-socials'; import ShareMyAdsCard from './share-my-ads-card'; -import { isMobile } from '@deriv/shared'; const ShareMyAdsModal = ({ advert }: TAdvert) => { - const [is_sharing, setIsSharing] = React.useState(false); const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard(); const { account_currency, advertiser_details, id, local_currency, rate_display, rate_type } = advert; const { id: advertiser_id } = advertiser_details; @@ -33,7 +30,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { const custom_message = rate_type === ad_type.FLOAT ? localize( - "Hello! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n{{- advert_url}}\n\nThanks!", + "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", { local_currency, account_currency, @@ -42,7 +39,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { } ) : localize( - "Hello! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n{{- advert_url}}\n\nThanks!", + "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", { local_currency, account_currency, @@ -57,30 +54,25 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { event.stopPropagation(); }; + // TODO: uncomment share image functionality during the second phase of share my ads const handleGenerateImage = async () => { if (divRef.current) { - const dataUrl = await toPng(divRef.current); - const dataUrlBlob = await toBlob(divRef.current); const file_name = `${advert.type}_${advert.id}.png`; - const blob = new Blob([dataUrlBlob], { type: 'image/png' }); - const file = new File([blob], file_name, { type: 'image/png' }); - - if (isMobile()) setIsSharing(true); + const dataUrl = await toPng(divRef.current); + // const dataUrlBlob = await toBlob(divRef.current); + // const blob = new Blob([dataUrlBlob as Blob], { type: 'image/png' }); + // const file = new File([blob], file_name, { type: 'image/png' }); - if (navigator.canShare && navigator.canShare({ files: [file] })) { - navigator - .share({ - files: [file], - }) - .then(() => { - setIsSharing(false); - }); - } else { - const link = document.createElement('a'); - link.download = file_name; - link.href = dataUrl; - link.click(); - } + // if (navigator.canShare && navigator.canShare({ files: [file] })) { + // navigator.share({ + // files: [file], + // }); + // } else { + const link = document.createElement('a'); + link.download = file_name; + link.href = dataUrl; + link.click(); + // } } }; @@ -112,85 +104,75 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { width='71rem' > - {is_sharing ? ( - - ) : ( - + + + + + + +
+
+ + + + + + + + +
- - - - -
-
- - - - - - - - -
- -
- - - - - - - +
+ + + + + + + + +
+ + -
- - - -
- -
+
+
- -
- - )} +
+ +
+ ); From 58a5bc2416cfd8dd8ab1ba6bf7366ee4e23a0655 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Tue, 22 Aug 2023 15:52:18 +0800 Subject: [PATCH 18/43] chore: updated stores --- .../p2p/src/stores/advertiser-page-store.js | 55 +++++++++++++++---- packages/p2p/src/stores/general-store.js | 7 +++ 2 files changed, 50 insertions(+), 12 deletions(-) diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js index 46388fd76ee7..c7698dafc398 100644 --- a/packages/p2p/src/stores/advertiser-page-store.js +++ b/packages/p2p/src/stores/advertiser-page-store.js @@ -1,7 +1,9 @@ import { action, computed, makeObservable, observable } from 'mobx'; +import { localize } from 'Components/i18next'; import { buy_sell } from 'Constants/buy-sell'; import { requestWS, subscribeWS } from 'Utils/websocket'; import BaseStore from 'Stores/base_store'; +import { isMobile } from '@deriv/shared'; export default class AdvertiserPageStore extends BaseStore { active_index = 0; @@ -108,13 +110,15 @@ export default class AdvertiserPageStore extends BaseStore { ? { local_currency: buy_sell_store.selected_local_currency } : {}), }).then(response => { - if (response.error) { - this.setErrorMessage(response.error); - } else { - const { list } = response.p2p_advert_list; - - this.setAdverts(list); - this.setHasMoreAdvertsToLoad(list.length >= general_store.list_item_limit); + if (response) { + if (response.error) { + this.setErrorMessage(response.error); + } else { + const { list } = response.p2p_advert_list; + + this.setAdverts(list); + this.setHasMoreAdvertsToLoad(list.length >= general_store.list_item_limit); + } } this.setIsLoadingAdverts(false); resolve(); @@ -148,13 +152,40 @@ export default class AdvertiserPageStore extends BaseStore { this.setIsLoading(false); } - getAdvertInfo(advert_id) { - requestWS({ p2p_advert_info: 1, id: advert_id }).then(response => { + async getAdvertInfo() { + const { buy_sell_store, general_store } = this.root_store; + let advert_list; + + // Need to get the list of all adverts first to check if the shared advert is still active + await requestWS({ p2p_advert_list: 1 }).then(response => { + if (response) advert_list = response.p2p_advert_list.list; + }); + + await requestWS({ p2p_advert_info: 1, id: general_store.counterparty_advert_id }).then(response => { if (response) { const { p2p_advert_info } = response; - this.setActiveIndex(p2p_advert_info.type === buy_sell.BUY ? 0 : 1); - this.root_store.buy_sell_store.setSelectedAdState(p2p_advert_info); - this.root_store.general_store.showModal({ key: 'BuySellModal' }); + const advert_type = p2p_advert_info?.type === buy_sell.BUY ? 1 : 0; + const contains_advert_id = advert_list.some( + advert => advert.id === general_store.counterparty_advert_id + ); + + if (contains_advert_id) { + this.setActiveIndex(advert_type); + this.handleTabItemClick(advert_type); + buy_sell_store.setSelectedAdState(p2p_advert_info); + this.loadMoreAdvertiserAdverts({ startIndex: 0 }); + general_store.showModal({ key: 'BuySellModal' }); + } else { + general_store.showModal({ + key: 'ErrorModal', + props: { + error_message: localize("It's either deleted or no longer active."), + error_modal_button_text: localize('OK'), + error_modal_title: localize('This ad is unavailable'), + width: isMobile() ? '90vw' : '', + }, + }); + } } }); } diff --git a/packages/p2p/src/stores/general-store.js b/packages/p2p/src/stores/general-store.js index 71a0aa613a68..e747a49f0363 100644 --- a/packages/p2p/src/stores/general-store.js +++ b/packages/p2p/src/stores/general-store.js @@ -23,6 +23,7 @@ export default class GeneralStore extends BaseStore { balance; cancels_remaining = null; contact_info = ''; + counterparty_advert_id = null; counterparty_advertiser_id = null; error_code = ''; external_stores = {}; @@ -86,6 +87,7 @@ export default class GeneralStore extends BaseStore { advertiser_relations_response: observable, //TODO: Remove this when backend has fixed is_blocked flag issue block_unblock_user_error: observable, balance: observable, + counterparty_advert_id: observable, counterparty_advertiser_id: observable, external_stores: observable, feature_level: observable, @@ -143,6 +145,7 @@ export default class GeneralStore extends BaseStore { setAdvertiserBuyLimit: action.bound, setAdvertiserSellLimit: action.bound, setAdvertiserRelationsResponse: action.bound, //TODO: Remove this when backend has fixed is_blocked flag issue + setCounterpartyAdvertId: action.bound, setErrorCode: action.bound, setExternalStores: action.bound, setFeatureLevel: action.bound, @@ -638,6 +641,10 @@ export default class GeneralStore extends BaseStore { this.contact_info = contact_info; } + setCounterpartyAdvertId(counterparty_advert_id) { + this.counterparty_advert_id = counterparty_advert_id; + } + setCounterpartyAdvertiserId(counterparty_advertiser_id) { this.counterparty_advertiser_id = counterparty_advertiser_id; } From 845cfd43537c9fe5c0513081568fe14ab0f03c88 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 23 Aug 2023 14:26:59 +0800 Subject: [PATCH 19/43] chore: fixed getting advertiser list error issue, update styles and custom_message --- .../src/sass/app/modules/reset-password.scss | 1 - .../share-my-ads-card/share-my-ads-card.tsx | 8 +-- .../share-my-ads-modal.scss | 4 +- .../share-my-ads-modal/share-my-ads-modal.tsx | 49 ++++++++++++++----- .../{base64-images.js => base64-images.ts} | 0 .../p2p/src/stores/advertiser-page-store.js | 12 ++--- 6 files changed, 48 insertions(+), 26 deletions(-) rename packages/p2p/src/constants/{base64-images.js => base64-images.ts} (100%) diff --git a/packages/core/src/sass/app/modules/reset-password.scss b/packages/core/src/sass/app/modules/reset-password.scss index b4a125111710..0ba5b87950e5 100644 --- a/packages/core/src/sass/app/modules/reset-password.scss +++ b/packages/core/src/sass/app/modules/reset-password.scss @@ -71,7 +71,6 @@ &__header { &-wrapper { margin: 0; - margin-top: 1.4rem; } } &__content { 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 index 18fbd84173b0..4637b4f933ce 100644 --- 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 @@ -4,8 +4,8 @@ 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'; import { ad_type } from 'Constants/floating-rate'; +import { TAdvertProps } from 'Types'; type TShareMyAdsCardProps = { advert: Partial; @@ -63,9 +63,9 @@ const ShareMyAdsCard = ({ advert, advert_url, divRef }: TShareMyAdsCardProps) => size={isMobile() ? 120 : 140} imageSettings={{ src: base64_images.dp2p_logo, - height: isMobile() ? 30 : 34, - width: isMobile() ? 30 : 34, - excavate: false, + height: 25, + width: 25, + excavate: true, }} />
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 78f92a1501da..7aa8ef97f722 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 @@ -21,7 +21,7 @@ &__card { display: flex; flex-direction: column; - width: 50%; + width: 45%; @include mobile { align-items: center; @@ -97,6 +97,6 @@ &__share { padding-left: 2.4rem; - width: 50%; + width: 55%; } } 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 f77191425222..d81e616f1cae 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 @@ -14,39 +14,62 @@ 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 { buy_sell } from 'Constants/buy-sell'; import { ad_type } from 'Constants/floating-rate'; import { TAdvert } from 'Types'; -import ShareMyAdsSocials from './share-my-ads-socials'; import ShareMyAdsCard from './share-my-ads-card'; +import ShareMyAdsSocials from './share-my-ads-socials'; const ShareMyAdsModal = ({ advert }: TAdvert) => { const [is_copied, copyToClipboard, setIsCopied] = useCopyToClipboard(); - const { account_currency, advertiser_details, id, local_currency, rate_display, rate_type } = advert; + const { account_currency, advertiser_details, id, local_currency, rate_display, rate_type, type } = advert; const { id: advertiser_id } = advertiser_details; const { hideModal, is_modal_open } = useModalManagerContext(); const divRef = React.useRef(null); const advert_url = `${window.location.origin}/cashier/p2p/advertiser?id=${advertiser_id}&advert_id=${id}`; - const custom_message = - rate_type === ad_type.FLOAT + const getCustomMessage = () => { + if (rate_type === ad_type.FLOAT) { + return type === buy_sell.BUY + ? localize( + "Hi! I'd like to exchange {{account_currency}} for {{local_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", + { + account_currency, + advert_url, + local_currency, + rate_display, + } + ) + : localize( + "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", + { + account_currency, + advert_url, + local_currency, + rate_display, + } + ); + } + return type === buy_sell.BUY ? localize( - "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", + "Hi! I'd like to exchange {{account_currency}} for {{local_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", { - local_currency, account_currency, - rate_display, advert_url, + local_currency, + rate_display, } ) : localize( "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", { - local_currency, account_currency, - rate_display, advert_url, + local_currency, + rate_display, } ); + }; const onCopy = (event: { stopPropagation: () => void }) => { copyToClipboard(advert_url); @@ -78,7 +101,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { const handleShareLink = () => { navigator.share({ - text: custom_message as string, + text: getCustomMessage() as string, }); }; @@ -101,7 +124,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { is_open={is_modal_open} title={localize('Share this ad')} toggleModal={hideModal} - width='71rem' + width='74rem' > @@ -146,7 +169,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { - + {
- +
{ + // Need to get the list of all adverts from counterparty to check if the shared advert is still active + await requestWS({ p2p_advert_list: 1, advertiser_id: counterparty_advertiser_id }).then(response => { if (response) advert_list = response.p2p_advert_list.list; }); - await requestWS({ p2p_advert_info: 1, id: general_store.counterparty_advert_id }).then(response => { + await requestWS({ p2p_advert_info: 1, id: counterparty_advert_id }).then(response => { if (response) { const { p2p_advert_info } = response; const advert_type = p2p_advert_info?.type === buy_sell.BUY ? 1 : 0; - const contains_advert_id = advert_list.some( - advert => advert.id === general_store.counterparty_advert_id - ); + const contains_advert_id = advert_list.some(advert => advert.id === counterparty_advert_id); if (contains_advert_id) { this.setActiveIndex(advert_type); From 53ba66ff286512665d39a5157eed3b2a99f81b2b Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 23 Aug 2023 15:03:07 +0800 Subject: [PATCH 20/43] chore: changed meta tags for link preview --- packages/core/src/index.html | 7 +++++-- .../src/public/images/app/common/deriv_rebranded_logo.svg | 1 + packages/p2p/src/components/app.jsx | 1 - 3 files changed, 6 insertions(+), 3 deletions(-) create mode 100644 packages/core/src/public/images/app/common/deriv_rebranded_logo.svg diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 99cbc7010d2d..5c3206a89686 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -175,10 +175,13 @@ - + - + diff --git a/packages/core/src/public/images/app/common/deriv_rebranded_logo.svg b/packages/core/src/public/images/app/common/deriv_rebranded_logo.svg new file mode 100644 index 000000000000..cc9d3a755655 --- /dev/null +++ b/packages/core/src/public/images/app/common/deriv_rebranded_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/p2p/src/components/app.jsx b/packages/p2p/src/components/app.jsx index f07f5f51b14d..4126fd018ed7 100644 --- a/packages/p2p/src/components/app.jsx +++ b/packages/p2p/src/components/app.jsx @@ -129,7 +129,6 @@ const App = () => { return () => { general_store.onUnmount(); disposeAdvertiserInfoSubscribedReaction(); - // disposeHandleShareAdsErrorReaction(); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); From 6f0c0b76aa741339e63d64d1294b5b5ec443391c Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 23 Aug 2023 15:21:27 +0800 Subject: [PATCH 21/43] chore: fixed custom ad message --- .../modals/share-my-ads-modal/share-my-ads-modal.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 d81e616f1cae..076cc6af42c8 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 @@ -32,7 +32,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { if (rate_type === ad_type.FLOAT) { return type === buy_sell.BUY ? localize( - "Hi! I'd like to exchange {{account_currency}} for {{local_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", + "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", { account_currency, advert_url, @@ -41,7 +41,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { } ) : localize( - "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", + "Hi! I'd like to exchange {{account_currency}} for {{local_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", { account_currency, advert_url, @@ -52,7 +52,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { } return type === buy_sell.BUY ? localize( - "Hi! I'd like to exchange {{account_currency}} for {{local_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", + "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", { account_currency, advert_url, @@ -61,7 +61,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { } ) : localize( - "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", + "Hi! I'd like to exchange {{account_currency}} for {{local_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", { account_currency, advert_url, From 7efce05e44347462f0c2fcef1d8b515d7dfb5c25 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 23 Aug 2023 15:37:05 +0800 Subject: [PATCH 22/43] chore: added const for localize message values --- .../share-my-ads-modal/share-my-ads-modal.tsx | 29 ++++--------------- 1 file changed, 5 insertions(+), 24 deletions(-) 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 076cc6af42c8..bc401b27e0ce 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 @@ -28,46 +28,27 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { const divRef = React.useRef(null); const advert_url = `${window.location.origin}/cashier/p2p/advertiser?id=${advertiser_id}&advert_id=${id}`; + const custom_message_values = { account_currency, advert_url, local_currency, rate_display }; const getCustomMessage = () => { if (rate_type === ad_type.FLOAT) { return type === buy_sell.BUY ? localize( "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", - { - account_currency, - advert_url, - local_currency, - rate_display, - } + custom_message_values ) : localize( "Hi! I'd like to exchange {{account_currency}} for {{local_currency}} at {{rate_display}}% on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", - { - account_currency, - advert_url, - local_currency, - rate_display, - } + custom_message_values ); } return type === buy_sell.BUY ? localize( "Hi! I'd like to exchange {{local_currency}} for {{account_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", - { - account_currency, - advert_url, - local_currency, - rate_display, - } + custom_message_values ) : localize( "Hi! I'd like to exchange {{account_currency}} for {{local_currency}} at {{rate_display}} {{local_currency}} on Deriv P2P.\n\nIf you're interested, check out my ad 👉\n\n{{- advert_url}}\n\nThanks!", - { - account_currency, - advert_url, - local_currency, - rate_display, - } + custom_message_values ); }; From 2ddefb0fcf18ed4796c5f512c8cfd049967d204f Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 23 Aug 2023 16:11:11 +0800 Subject: [PATCH 23/43] chore: fixed failing test cases --- .../__tests__/share-my-ads-modal.spec.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) 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 d078c20324ea..f0990378de80 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 @@ -9,9 +9,13 @@ const el_modal = document.createElement('div'); const mock_advert = { account_currency: 'USD', - id: '128812781', + advertiser_details: { + id: '123', + }, + id: '1234', max_order_amount_limit_display: '2.00', min_order_amount_limit_display: '1.00', + local_currency: 'IDR', rate_display: '+0.16', type: 'buy', }; @@ -25,7 +29,7 @@ jest.mock('html-to-image', () => ({ toPng: jest.fn(), })); -jest.mock('react-qrcode-logo', () => ({ QRCode: () =>
QR code
})); +jest.mock('qrcode.react', () => ({ QRCodeSVG: () =>
QR code
})); jest.mock('@deriv/components', () => ({ ...jest.requireActual('@deriv/components'), @@ -100,7 +104,9 @@ describe('', () => { await Promise.resolve(); }); - expect(navigator.clipboard.writeText).toHaveBeenCalledWith(window.location.href); + expect(navigator.clipboard.writeText).toHaveBeenCalledWith( + `${window.location.href}cashier/p2p/advertiser?id=${mock_advert.advertiser_details.id}&advert_id=${mock_advert.id}` + ); }); it('should call handleGenerateImage function when clicking on Download this QR code button', async () => { From 09936d0085e20c6f8b78e0527e428e3102c3931d Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 23 Aug 2023 16:28:43 +0800 Subject: [PATCH 24/43] chore: changed width of modal --- .../modals/share-my-ads-modal/share-my-ads-modal.scss | 4 ++-- .../modals/share-my-ads-modal/share-my-ads-modal.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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 7aa8ef97f722..be1099c39618 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 @@ -21,7 +21,7 @@ &__card { display: flex; flex-direction: column; - width: 45%; + width: 48%; @include mobile { align-items: center; @@ -97,6 +97,6 @@ &__share { padding-left: 2.4rem; - width: 55%; + width: 52%; } } 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 bc401b27e0ce..96d1194317f0 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 @@ -105,7 +105,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { is_open={is_modal_open} title={localize('Share this ad')} toggleModal={hideModal} - width='74rem' + width='71rem' > From a5a89e59768f2a3ab11f9ef9d531f7745d859cb1 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 23 Aug 2023 16:36:01 +0800 Subject: [PATCH 25/43] chore: updated relative path --- packages/core/src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 5c3206a89686..1fe442c6a7c5 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -181,7 +181,7 @@ /> - + From 9847778ca323592702d984f95b6a6462a59d3524 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Wed, 23 Aug 2023 17:30:33 +0800 Subject: [PATCH 26/43] chore: fixed switching to demo error and added base64 image --- .../components/src/components/vertical-tab/vertical-tab.tsx | 2 +- packages/core/src/index.html | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/components/src/components/vertical-tab/vertical-tab.tsx b/packages/components/src/components/vertical-tab/vertical-tab.tsx index c134f0523eec..14722e85f493 100644 --- a/packages/components/src/components/vertical-tab/vertical-tab.tsx +++ b/packages/components/src/components/vertical-tab/vertical-tab.tsx @@ -160,7 +160,7 @@ const VerticalTab = ({ is_routed={is_routed} header_title={header_title} /> - {is_floating && tab_headers_note && list[curr_tab_index].has_side_note && ( + {is_floating && tab_headers_note && list[curr_tab_index]?.has_side_note && (
{tab_headers_note}
)} {extra_content} diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 1fe442c6a7c5..19108c5d0a25 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -181,8 +181,10 @@ /> - - + From 63fca7f524421a650457f3634339f700fde99577 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 24 Aug 2023 10:53:56 +0800 Subject: [PATCH 27/43] chore: fixed rounded blurry logo for whatsapp preview --- packages/core/src/index.html | 2 +- .../core/src/public/images/app/common/deriv_rebranded_logo.svg | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) delete mode 100644 packages/core/src/public/images/app/common/deriv_rebranded_logo.svg diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 19108c5d0a25..7cdd84ae6d91 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -183,7 +183,7 @@ diff --git a/packages/core/src/public/images/app/common/deriv_rebranded_logo.svg b/packages/core/src/public/images/app/common/deriv_rebranded_logo.svg deleted file mode 100644 index cc9d3a755655..000000000000 --- a/packages/core/src/public/images/app/common/deriv_rebranded_logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file From 2ebbe4ecc7df99e0629cd0b3ac31caaac23b3953 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 24 Aug 2023 11:39:15 +0800 Subject: [PATCH 28/43] chore: fixed base64 image --- packages/core/src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 7cdd84ae6d91..34c846d0c822 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -183,7 +183,7 @@ From cb9caaee759881277a13ec6ed58339bcea82d7e1 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 24 Aug 2023 12:13:42 +0800 Subject: [PATCH 29/43] chore: changed image --- packages/core/src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 34c846d0c822..55331d46e5a0 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -183,7 +183,7 @@ From c0c617a43cc3ab841d2b3d199bf16a9d4175b011 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 24 Aug 2023 12:40:15 +0800 Subject: [PATCH 30/43] chore: converted svg to jpg base64 --- packages/core/src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 55331d46e5a0..9b1d9c486c92 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -183,7 +183,7 @@ From 6d36bdd094c827227fe2c8ede425f744bf306ee0 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 24 Aug 2023 12:41:29 +0800 Subject: [PATCH 31/43] chore: fixed base64 image loading issues --- packages/core/src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 9b1d9c486c92..385f79253122 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -183,7 +183,7 @@ From 787f874583ec143bb462e07066d33e2e6c1840ea Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 24 Aug 2023 13:25:33 +0800 Subject: [PATCH 32/43] chore: replaced with url --- packages/core/src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/index.html b/packages/core/src/index.html index 385f79253122..55331d46e5a0 100644 --- a/packages/core/src/index.html +++ b/packages/core/src/index.html @@ -183,7 +183,7 @@ From 95ca081f833b6c65cef6cedbbfd277aa6f63058b Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 24 Aug 2023 14:08:22 +0800 Subject: [PATCH 33/43] chore: removed unused file, and todo --- .../share-my-ads-modal/share-my-ads-modal.tsx | 13 +------------ packages/p2p/src/constants/base64-images.js | 6 ------ 2 files changed, 1 insertion(+), 18 deletions(-) delete mode 100644 packages/p2p/src/constants/base64-images.js 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 69e10fdad5d3..52644fc29dde 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 @@ -58,25 +58,14 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => { event.stopPropagation(); }; - // TODO: uncomment share image functionality during the second phase of share my ads const handleGenerateImage = async () => { if (divRef.current) { const file_name = `${advert.type}_${advert.id}.png`; const dataUrl = await toPng(divRef.current); - // const dataUrlBlob = await toBlob(divRef.current); - // const blob = new Blob([dataUrlBlob as Blob], { type: 'image/png' }); - // const file = new File([blob], file_name, { type: 'image/png' }); - - // if (navigator.canShare && navigator.canShare({ files: [file] })) { - // navigator.share({ - // files: [file], - // }); - // } else { const link = document.createElement('a'); link.download = file_name; link.href = dataUrl; link.click(); - // } } }; @@ -178,7 +167,7 @@ const ShareMyAdsModal = ({ advert }: TAdvert) => {
- ); }; diff --git a/packages/p2p/src/constants/base64-images.js b/packages/p2p/src/constants/base64-images.js deleted file mode 100644 index a6a27469eb7f..000000000000 --- a/packages/p2p/src/constants/base64-images.js +++ /dev/null @@ -1,6 +0,0 @@ -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=', -}); From 0c6926dd1efae1f4bb6bf4c5ae1aae64c3557dea Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Thu, 24 Aug 2023 16:15:46 +0800 Subject: [PATCH 34/43] chore: fixed missing { --- .../share-my-ads-modal/share-my-ads-card/share-my-ads-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index a46bdc1d5920..4637b4f933ce 100644 --- 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 @@ -13,7 +13,7 @@ type TShareMyAdsCardProps = { divRef: React.MutableRefObject | React.MutableRefObject; }; -const ShareMyAdsCard = ({ advert, advert_url, divRef }: TShareMyAdsCardProps) => +const ShareMyAdsCard = ({ advert, advert_url, divRef }: TShareMyAdsCardProps) => { const { account_currency, id, From 1bf3e8733dd17d8d397822c43f1fb7449e3161d5 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Fri, 25 Aug 2023 11:05:06 +0800 Subject: [PATCH 35/43] chore: refactored getAdvertInfo and removed return value from hook, used currency from store --- .../cashier/src/containers/cashier/cashier.tsx | 5 ++--- packages/hooks/src/useIsP2PEnabled.ts | 1 - .../p2p/src/stores/advertiser-page-store.js | 17 +++++------------ 3 files changed, 7 insertions(+), 16 deletions(-) diff --git a/packages/cashier/src/containers/cashier/cashier.tsx b/packages/cashier/src/containers/cashier/cashier.tsx index 6db5c2a1a96b..ed3c4c6e3c73 100644 --- a/packages/cashier/src/containers/cashier/cashier.tsx +++ b/packages/cashier/src/containers/cashier/cashier.tsx @@ -71,7 +71,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier const { is_from_derivgo } = common; const { is_demo } = traders_hub; const { is_cashier_visible: is_visible, toggleCashier, toggleReadyToDepositModal } = ui; - const { is_account_setting_loaded, is_logged_in, is_logging_in, is_svg } = client; + const { currency, is_account_setting_loaded, is_logged_in, is_logging_in, is_svg } = client; const is_account_transfer_visible = useAccountTransferVisible(); const is_onramp_visible = useOnrampVisible(); const p2p_notification_count = useP2PNotificationCount(); @@ -79,7 +79,6 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier data: is_p2p_enabled, isSuccess: is_p2p_enabled_success, isLoading: is_p2p_enabled_loading, - is_p2p_supported_currency, } = useIsP2PEnabled(); React.useEffect(() => { @@ -124,7 +123,7 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier error.setErrorMessage({ code: 'ShareMyAdsError', message: - !is_p2p_supported_currency && is_svg + currency !== 'USD' && is_svg ? localize('Deriv P2P is currently unavailable in this currency.') : localize('Deriv P2P is currently unavailable in your country.'), }); diff --git a/packages/hooks/src/useIsP2PEnabled.ts b/packages/hooks/src/useIsP2PEnabled.ts index 65440cc4ee99..2c877c0d0a5a 100644 --- a/packages/hooks/src/useIsP2PEnabled.ts +++ b/packages/hooks/src/useIsP2PEnabled.ts @@ -25,7 +25,6 @@ const useIsP2PEnabled = () => { return { ...rest, data: is_p2p_enabled, - is_p2p_supported_currency, }; }; diff --git a/packages/p2p/src/stores/advertiser-page-store.js b/packages/p2p/src/stores/advertiser-page-store.js index db7912870759..01b351b6b654 100644 --- a/packages/p2p/src/stores/advertiser-page-store.js +++ b/packages/p2p/src/stores/advertiser-page-store.js @@ -152,24 +152,17 @@ export default class AdvertiserPageStore extends BaseStore { this.setIsLoading(false); } - /** This function is used to get the advert info from the counterparty when user wants to view a shared advert */ - async getAdvertInfo() { + /** This function gets the advert info from the counterparty when user wants to view a shared advert */ + getAdvertInfo() { const { buy_sell_store, general_store } = this.root_store; - const { counterparty_advert_id, counterparty_advertiser_id } = general_store; - let advert_list; - // Need to get the list of all adverts from counterparty to check if the shared advert is still active - await requestWS({ p2p_advert_list: 1, advertiser_id: counterparty_advertiser_id }).then(response => { - if (response) advert_list = response.p2p_advert_list.list; - }); - - await requestWS({ p2p_advert_info: 1, id: counterparty_advert_id }).then(response => { + requestWS({ p2p_advert_info: 1, id: general_store.counterparty_advert_id }).then(response => { if (response) { const { p2p_advert_info } = response; + const { is_active, is_visible } = p2p_advert_info || {}; const advert_type = p2p_advert_info?.type === buy_sell.BUY ? 1 : 0; - const contains_advert_id = advert_list.some(advert => advert.id === counterparty_advert_id); - if (contains_advert_id) { + if (!response.error && is_active && is_visible) { this.setActiveIndex(advert_type); this.handleTabItemClick(advert_type); buy_sell_store.setSelectedAdState(p2p_advert_info); From 32ff17f19b265485e6d2bd78a0710c1dbd61fe13 Mon Sep 17 00:00:00 2001 From: ameerul hady Date: Mon, 28 Aug 2023 11:35:00 +0800 Subject: [PATCH 36/43] chore: added custom hook for p2p advert info, refactored component to use hook, added suggestions --- packages/hooks/src/index.ts | 1 + packages/hooks/src/useP2PAdvertInfo.ts | 26 ++++++++++ .../advertiser-page/advertiser-page.jsx | 52 ++++++++++++++++--- .../components/i18next/{index.js => index.ts} | 8 +-- .../modals/error-modal/error-modal.jsx | 8 ++- .../share-my-ads-modal/share-my-ads-modal.tsx | 13 ++--- .../share-my-ads-socials.tsx | 3 +- .../p2p/src/stores/advertiser-page-store.js | 34 ------------ packages/p2p/src/stores/general-store.js | 2 +- 9 files changed, 87 insertions(+), 60 deletions(-) create mode 100644 packages/hooks/src/useP2PAdvertInfo.ts rename packages/p2p/src/components/i18next/{index.js => index.ts} (89%) diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 917ca2362286..dee18122d81e 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -44,4 +44,5 @@ export { default as useRealSTPAccount } from './useRealSTPAccount'; export { default as useTotalAccountBalance } from './useTotalAccountBalance'; export { default as useVerifyEmail } from './useVerifyEmail'; export { default as useP2PAdvertList } from './useP2PAdvertList'; +export { default as useP2PAdvertInfo } from './useP2PAdvertInfo'; export { useIsAccountStatusPresent } from './useIsAccountStatusPresent'; diff --git a/packages/hooks/src/useP2PAdvertInfo.ts b/packages/hooks/src/useP2PAdvertInfo.ts new file mode 100644 index 000000000000..14e5ba0aa788 --- /dev/null +++ b/packages/hooks/src/useP2PAdvertInfo.ts @@ -0,0 +1,26 @@ +import React from 'react'; +import { useFetch } from '@deriv/api'; +import { TSocketRequestQueryOptions } from '@deriv/api/types'; + +/** + * This custom hook returns the advert info for a specific advert by calling 'p2p_advert_info' endpoint + */ +const useP2PAdvertInfo = (id: string, options: TSocketRequestQueryOptions<'p2p_advert_info'>) => { + const { data, ...rest } = useFetch('p2p_advert_info', { payload: { id }, options }); + + const modified_data = React.useMemo(() => { + const p2p_advert_info = data?.p2p_advert_info; + + if (!p2p_advert_info) return undefined; + + return p2p_advert_info; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [data?.p2p_advert_info]); + + return { + data: modified_data, + ...rest, + }; +}; + +export default useP2PAdvertInfo; diff --git a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx index 679b0df76acd..e838881b21e4 100644 --- a/packages/p2p/src/components/advertiser-page/advertiser-page.jsx +++ b/packages/p2p/src/components/advertiser-page/advertiser-page.jsx @@ -1,5 +1,6 @@ import React from 'react'; import { DesktopWrapper, Loading, MobileWrapper, Text } from '@deriv/components'; +import { useP2PAdvertInfo } from '@deriv/hooks'; import { daysSince, isMobile, routes } from '@deriv/shared'; import { reaction } from 'mobx'; import { observer } from 'mobx-react-lite'; @@ -20,10 +21,12 @@ import BlockUserOverlay from './block-user/block-user-overlay'; import classNames from 'classnames'; import { OnlineStatusIcon, OnlineStatusLabel } from 'Components/online-status'; import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; +import { buy_sell } from 'Constants/buy-sell'; import './advertiser-page.scss'; const AdvertiserPage = () => { const { advertiser_page_store, buy_sell_store, general_store, my_profile_store } = useStores(); + const { counterparty_advert_id, is_advertiser, is_barred } = general_store; const { hideModal, showModal, useRegisterModalProps } = useModalManagerContext(); const is_my_advert = advertiser_page_store.advertiser_details_id === general_store.advertiser_id; @@ -63,6 +66,45 @@ const AdvertiserPage = () => { name: nickname, }); }; + const { data: p2p_advert_info, isSuccess: has_p2p_advert_info } = useP2PAdvertInfo(counterparty_advert_id, { + enabled: !!counterparty_advert_id, + }); + + const setShowAdvertInfo = React.useCallback( + () => { + if (has_p2p_advert_info && is_advertiser && !is_barred) { + const { is_active, is_visible } = p2p_advert_info || {}; + const advert_type = p2p_advert_info?.type === buy_sell.BUY ? 1 : 0; + + if (is_active && is_visible) { + advertiser_page_store.setActiveIndex(advert_type); + advertiser_page_store.handleTabItemClick(advert_type); + buy_sell_store.setSelectedAdState(p2p_advert_info); + advertiser_page_store.loadMoreAdvertiserAdverts({ startIndex: 0 }); + showModal({ key: 'BuySellModal' }); + } else { + showModal({ + key: 'ErrorModal', + props: { + error_message: "It's either deleted or no longer active.", + error_modal_button_text: 'OK', + error_modal_title: 'This ad is unavailable', + width: isMobile() ? '90vw' : '', + }, + }); + } + } + }, + + // eslint-disable-next-line react-hooks/exhaustive-deps + [has_p2p_advert_info, p2p_advert_info] + ); + + React.useEffect(() => { + if (counterparty_advert_id) { + setShowAdvertInfo(); + } + }, [counterparty_advert_id, setShowAdvertInfo]); React.useEffect(() => { buy_sell_store.setShowAdvertiserPage(true); @@ -76,15 +118,9 @@ const AdvertiserPage = () => { // DO NOT REMOVE. This fixes reloading issue when user navigates to advertiser page via URL advertiser_page_store.onAdvertiserIdUpdate(); - if ( - general_store.counterparty_advert_id && - !general_store.is_barred && - general_store.is_advertiser - ) { - advertiser_page_store.getAdvertInfo(); - } else if (general_store.is_barred) { + if (is_barred) { history.push(routes.p2p_buy_sell); - } else if (!general_store.is_advertiser) { + } else if (!is_advertiser) { history.push(routes.p2p_my_ads); } diff --git a/packages/p2p/src/components/i18next/index.js b/packages/p2p/src/components/i18next/index.ts similarity index 89% rename from packages/p2p/src/components/i18next/index.js rename to packages/p2p/src/components/i18next/index.ts index 61c01e0dc4e8..61a7e83dfac7 100644 --- a/packages/p2p/src/components/i18next/index.js +++ b/packages/p2p/src/components/i18next/index.ts @@ -22,7 +22,7 @@ import zh_tw from 'Translations/zh_tw.json'; const DEFAULT_LANGUAGE = 'EN'; let CURRENT_LANGUAGE = 'EN'; -export const setLanguage = lang => { +export const setLanguage = (lang: string) => { CURRENT_LANGUAGE = lang || DEFAULT_LANGUAGE; i18n.changeLanguage(lang); }; @@ -49,7 +49,7 @@ const i18n_config = { ZH_TW: { translations: { ...zh_tw } }, }, react: { - hashTransKey(defaultValue) { + hashTransKey(defaultValue: string) { return crc32(defaultValue); }, }, @@ -65,9 +65,9 @@ i18n.use(initReactI18next) // passes i18n down to react-i18next // component wrapped with i18n export const Localize = withI18n(i18n); -export const localize = (string, values) => { +export const localize = (string: string, values?: T) => { if (!string) return ''; - return i18n.t(crc32(string), { defaultValue: string, ...values }); + return i18n.t(crc32(string).toString(), { defaultValue: string, ...values }); }; export default i18n; diff --git a/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx b/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx index 0c981fb62d4d..25dee029f870 100644 --- a/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx +++ b/packages/p2p/src/components/modal-manager/modals/error-modal/error-modal.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { observer } from 'mobx-react-lite'; -import { Button, Modal } from '@deriv/components'; +import { Button, Modal, Text } from '@deriv/components'; import { Localize } from 'Components/i18next'; import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context'; @@ -24,7 +24,11 @@ const ErrorModal = ({ toggleModal={onClose ?? hideModal} width={width} > - {error_message} + + + + +