Prince/no error for demo no balance (#742)

* fix: no error for demo no balance

* fix: formatting

* fix: formatting

scripts/js_texts/extracted_strings_app.js

@@ -98,6 +98,7 @@ module.exports = [
     'Digit Over',
     'Digit Under',
     'Digit contracts will be refunded at the purchase price if the contract doesn\'t end within 5 minutes.',
+    'Do you want to top up for another [_1]? If not, you can do this later on the [_2]Cashier page[_3], too.',
     'Does Not Touch',
     'Duration',
     'End Time',
@@ -437,6 +438,8 @@ module.exports = [
     'Time out must be after today.',
     'Timed out until',
     'Today',
+    'Top up',
+    'Top up Virtual Account?',
     'Top up error',
     'Top-up successful',
     'Total Cost',

src/javascript/app/pages/portal.jsx

@@ -2,18 +2,23 @@ import { useEffect, useRef } from 'react';
 import ReactDOM from 'react-dom';
 
 const Portal = ({ children }) => {
-    const elRef = useRef(document.createElement('div'));
-
+    const elRef = useRef(null);
+
+    if (!elRef.current) {
+        elRef.current = document.createElement('div');
+    }
+
     useEffect(() => {
         const el = elRef.current;
-
-        document.body?.appendChild(el);
+        document.body.appendChild(el);
+
         return () => {
-            document.body?.removeChild(el);
+            if (document.body.contains(el)) {
+                document.body.removeChild(el);
+            }
         };
-
     }, []);
-  
+
     return ReactDOM.createPortal(
         children,
         elRef.current

src/javascript/app/pages/trade/purchase.js

@@ -93,6 +93,16 @@ const Purchase = (() => {
                 hidePriceOverlay();
                 processPriceRequest();
                 TopUpVirtualPopup.show(error.message);
+
+                purchaseManager.set({
+                    error: {
+                        showPurchaseResults: true,
+                        ...error,
+                        action             : TopUpVirtualPopup.doTopUp,
+                        title              : localize('Top up Virtual Account?'),
+                        isCustom           : true,
+                    },
+                });
             } else {
                 contracts_list.style.display = 'none';
                 container.style.display = 'block';

src/javascript/app/pages/trade/purchase/purchase.jsx

@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import {  Button, CaptionText,  Skeleton, Text, Tooltip } from '@deriv-com/quill-ui';
 import {  LabelPairedXmarkMdRegularIcon } from '@deriv/quill-icons/LabelPaired';
+import parse from 'html-react-parser';
 import ContractDetails from './contract-details';
 import Defaults, { PARAM_NAMES } from '../defaults';
 import { getElementById } from '../../../../_common/common_functions';
@@ -22,6 +23,12 @@ const Purchase = () => {
     const [showPopup,setShowPopup] = useState(false);
 
     const isloading = () => !data?.topAmount && !data?.middleAmount && !data?.bottomAmount;
+
+    const hidePurchaseResults = () =>
+        purchaseManager.set({
+            showPurchaseResults: false,
+            error              : null,
+        });
 
     useEffect(() => {
         const newData = purchaseManager.getAll();
@@ -93,7 +100,7 @@ const Purchase = () => {
             </div>);
     }
 
-    if (!data?.showPurchaseResults){
+    if (!data?.showPurchaseResults && !data?.error){
         return (
             <div className={`quill-purchase-section ${data?.isPurchaseFormDisabled && 'disabled'}`}>
                 {data?.showMidPurchase ? (
@@ -195,9 +202,7 @@ const Purchase = () => {
                             className='close-btn'
                             onClick={() => {
                                 triggerClick('#close_confirmation_container');
-                                purchaseManager.set({
-                                    showPurchaseResults: false,
-                                });
+                                hidePurchaseResults();
                             }}
                         >
                             <LabelPairedXmarkMdRegularIcon />
@@ -220,6 +225,25 @@ const Purchase = () => {
                                             <Button variant='tertiary' size='lg' label={localize('Log in here')} onClick={() => triggerClick('#authorization_error_btn_login')} />
                                         </>
                                     )}
+                                    {data?.error.code === 'InsufficientBalance' && (
+                                        <>
+                                            <Text size='sm'>{data?.error?.message}</Text>
+                                            <Text size='sm'>{
+                                                parse(
+                                                    localize('Do you want to top up for another [_1]? If not, you can do this later on the [_2]Cashier page[_3], too.',['$10,000.00', '<a id=\'top_up_cashier_redirect\' href=\'\'>', '</a>'])
+                                                )}
+                                            </Text>
+                                            <Button
+                                                variant='primary'
+                                                size='lg'
+                                                label={localize('Top up')}
+                                                onClick={() => {
+                                                    data?.error?.action?.();
+                                                    hidePurchaseResults();
+                                                }}
+                                            />
+                                        </>
+                                    )}
                                 </>
                             ) : (
                                 <span className='error-message'>
@@ -241,9 +265,7 @@ const Purchase = () => {
                         className='close-btn'
                         onClick={() => {
                             triggerClick('#close_confirmation_container');
-                            purchaseManager.set({
-                                showPurchaseResults: false,
-                            });
+                            hidePurchaseResults();
                         }}
                     >
                         <LabelPairedXmarkMdRegularIcon />

src/translations/messages.pot

@@ -166,15 +166,6 @@ msgstr ""
 msgid "By purchasing the %1\"High-Low\"%2 contract, you'll win the multiplier times the difference between the %1high%2 and %1low%2 over the duration of the contract."
 msgstr ""
 
-msgid "By purchasing the <strong>\"Close-Low\"</strong> contract, you'll win the multiplier times the difference between the <strong>close</strong> and <strong>low</strong> over the duration of the contract."
-msgstr ""
-
-msgid "By purchasing the <strong>\"High-Close\"</strong> contract, you'll win the multiplier times the difference between the <strong>high</strong> and <strong>close</strong> over the duration of the contract."
-msgstr ""
-
-msgid "By purchasing the <strong>\"High-Low\"</strong> contract, you'll win the multiplier times the difference between the <strong>high</strong> and <strong>low</strong> over the duration of the contract."
-msgstr ""
-
 msgid "Call Spread"
 msgstr ""
 
@@ -376,6 +367,9 @@ msgstr ""
 msgid "Digits"
 msgstr ""
 
+msgid "Do you want to top up for another %1? If not, you can do this later on the %2Cashier page%3, too."
+msgstr ""
+
 msgid "Does Not Touch"
 msgstr ""
 
@@ -667,18 +661,6 @@ msgstr ""
 msgid "If you select %1\"Only Ups\"%2, you win the payout if consecutive ticks rise successively after the %1entry spot%2.%3No payout if any tick falls or is equal to any of the previous ticks."
 msgstr ""
 
-msgid "If you select <strong>\"High Tick\"</strong>, you win the payout if the selected tick is the <strong>highest among the next five ticks</strong>."
-msgstr ""
-
-msgid "If you select <strong>\"Low Tick\"</strong>, you win the payout if the selected tick is the <strong>lowest among the next five ticks</strong>."
-msgstr ""
-
-msgid "If you select <strong>\"Only Downs\"</strong>, you win the payout if consecutive ticks fall successively after the <strong>entry spot</strong>.<br />No payout if any tick rises or is equal to any of the previous ticks."
-msgstr ""
-
-msgid "If you select <strong>\"Only Ups\"</strong>, you win the payout if consecutive ticks rise successively after the <strong>entry spot</strong>.<br />No payout if any tick falls or is equal to any of the previous ticks."
-msgstr ""
-
 msgid "If you select a <strong>start time</strong> in the future, the <strong>start time</strong> is that which is selected and the <strong>entry spot</strong> is the price in effect at that time."
 msgstr ""
 
@@ -700,6 +682,9 @@ msgstr ""
 msgid "Indicative"
 msgstr ""
 
+msgid "Indicative barrier"
+msgstr ""
+
 msgid "Invalid app id"
 msgstr ""
 
@@ -1426,12 +1411,6 @@ msgstr ""
 msgid "The %1start time%2 is when the contract has been processed by our servers and the %1entry spot%2 is the %1next tick%2 thereafter."
 msgstr ""
 
-msgid "The <strong>close</strong> is the latest tick at or before the <strong>end time</strong>. If you selected a specific <strong>end time,</strong> the <strong>end time</strong> is the selected time."
-msgstr ""
-
-msgid "The <strong>contract period</strong> is the period between the <strong>first tick</strong> (after start time) and the <strong>end time</strong>."
-msgstr ""
-
 msgid "The <strong>contract period</strong> is the period between the <strong>next tick</strong> after the <strong>start time</strong> and the <strong>end time</strong>."
 msgstr ""
 
@@ -1444,24 +1423,9 @@ msgstr ""
 msgid "The <strong>entry spot</strong> is the first tick after the contract is processed by our servers."
 msgstr ""
 
-msgid "The <strong>exit spot</strong> is the last tick when the contract ends. Contract ends when all ticks rise or fall successively, or when a single tick breaks the predicted pattern."
-msgstr ""
-
 msgid "The <strong>exit spot</strong> is the latest tick at or before the <strong>end time</strong>."
 msgstr ""
 
-msgid "The <strong>high</strong> is the highest point ever reached by the market during the contract period."
-msgstr ""
-
-msgid "The <strong>low</strong> is the lowest point ever reached by the market during the contract period."
-msgstr ""
-
-msgid "The <strong>start time</strong> begins when the contract is processed by our servers."
-msgstr ""
-
-msgid "The <strong>start time</strong> is when the contract has been processed by our servers and the <strong>entry spot</strong> is the <strong>next tick</strong> thereafter."
-msgstr ""
-
 msgid "The <strong>start time</strong> is when the contract is processed by our servers and the <strong>entry spot</strong> is the <strong>next tick</strong> thereafter."
 msgstr ""
 
@@ -1585,6 +1549,12 @@ msgstr ""
 msgid "Today"
 msgstr ""
 
+msgid "Top up"
+msgstr ""
+
+msgid "Top up Virtual Account?"
+msgstr ""
+
 msgid "Top up error"
 msgstr ""