[P2PS] Ameerul /P2PS-675 Share my ads modal

packages/account/package.json

@@ -43,7 +43,7 @@
         "mobx-react": "^7.5.1",
         "onfido-sdk-ui": "^11.0.0",
         "prop-types": "^15.7.2",
-        "qrcode.react": "^1.0.0",
+        "qrcode.react": "^3.1.0",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-i18next": "^11.11.0",

packages/cashier/package.json

@@ -53,7 +53,7 @@
         "mobx": "^6.6.1",
         "moment": "^2.29.2",
         "prop-types": "^15.7.2",
-        "qrcode.react": "^1.0.0",
+        "qrcode.react": "^3.1.0",
         "react": "^17.0.2",
         "react-content-loader": "^6.2.0",
         "react-dom": "^17.0.2",

packages/cashier/src/components/error-dialog/error-dialog.tsx

@@ -13,9 +13,9 @@ type TErrorDialogProps = {
 
 type TSetDetails = {
     title: string;
-    cancel_button_text: undefined | string;
+    cancel_button_text?: string;
     confirm_button_text: undefined | string;
-    onConfirm: undefined | (() => void);
+    onConfirm?: () => void;
     message: undefined | string | TReactElement;
     has_close_icon?: boolean;
 };
@@ -107,6 +107,13 @@ const ErrorDialog = observer(({ className, error = {} }: TErrorDialogProps) => {
                     onConfirm: undefined,
                     message: error_message,
                 });
+            } else if (error_code === 'ShareMyAdsError') {
+                setDetails({
+                    title: localize('Deriv P2P unavailable'),
+                    confirm_button_text: localize('OK'),
+                    message: error_message,
+                    has_close_icon: true,
+                });
             } else {
                 setDetails({
                     title: localize('Cashier Error'),

packages/cashier/src/containers/cashier/cashier.tsx

@@ -68,8 +68,8 @@ 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_cashier_visible: is_visible, toggleCashier, toggleReadyToDepositModal } = ui;
+    const { currency, is_account_setting_loaded, is_logged_in, is_logging_in, is_svg, is_virtual } = client;
     const is_account_transfer_visible = useAccountTransferVisible();
     const is_onramp_visible = useOnrampVisible();
     const p2p_notification_count = useP2PNotificationCount();
@@ -200,9 +200,35 @@ const Cashier = observer(({ history, location, routes: routes_config }: TCashier
 
     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_virtual) {
+                    toggleReadyToDepositModal();
+                } else {
+                    error.setErrorMessage({
+                        code: 'ShareMyAdsError',
+                        message:
+                            currency !== 'USD' && is_svg
+                                ? localize('Deriv P2P is currently unavailable in this currency.')
+                                : localize('Deriv P2P is currently unavailable in your country.'),
+                    });
+                }
+            }
         }
-    }, [history, is_p2p_enabled, is_p2p_enabled_success]);
+    }, [
+        currency,
+        error,
+        history,
+        is_p2p_enabled,
+        is_p2p_enabled_success,
+        is_svg,
+        is_virtual,
+        toggleReadyToDepositModal,
+    ]);
 
     if (
         ((!is_logged_in || isMobile()) && is_logging_in) ||

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

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

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;
             }