Purchase section improvements (#675)

* chore: initial trade results dev * chore: results and error messages * chore: popup load * chore: contract end * chore: add login error
deriv-com · Jul 17, 2024 · cb052f2 · cb052f2
1 parent e850770
commit cb052f2
Show file tree

Hide file tree

Showing 16 changed files with 1,038 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -106,7 +106,7 @@
     "@binary-com/binary-document-uploader": "^2.4.4",
     "@binary-com/binary-style": "^0.2.26",
     "@binary-com/webtrader-charts": "^0.6.1",
-    "@deriv-com/quill-ui": "^1.13.12",
+    "@deriv-com/quill-ui": "^1.13.15",
     "@deriv/quill-icons": "^1.23.1",
     "@livechat/customer-sdk": "4.0.2",
     "canvas-toBlob": "1.0.0",

diff --git a/src/javascript/app/base/clock.js b/src/javascript/app/base/clock.js
@@ -35,9 +35,17 @@ const Clock = (() => {
         });
     };
 
+    const getLocalTime = (time) => {
+        const gmt_time_str = time.replace('\n', ' ');
+        const local_time   = moment.utc(gmt_time_str, 'YYYY-MM-DD HH:mm:ss').local();
+
+        return local_time.format('YYYY-MM-DD HH:mm:ss Z');
+    };
+
     return {
         startClock,
         showLocalTimeOnHover,
+        getLocalTime,
         setExternalTimer: (func) => { fncExternalTimer = func; },
     };
 })();

diff --git a/src/javascript/app/common/guide.js b/src/javascript/app/common/guide.js
@@ -120,7 +120,7 @@ const Guide = (() => {
                 nextButton : btn_next,
             },
             {
-                selector   : '#contract_prices_container',
+                selector   : '.quill-purchase-section',
                 description: `<h1>${localize('Step')} 4</h1>${localize('Predict the direction<br />and purchase')}`,
                 event_type : 'next',
                 nextButton : btn_finish,

diff --git a/src/javascript/app/pages/trade/charts/highchart.js b/src/javascript/app/pages/trade/charts/highchart.js
@@ -139,7 +139,8 @@ const Highchart = (() => {
             entry_time: (entry_tick_time || start_time) * 1000,
             exit_time : getExitTime(),
             has_zone  : true,
-            height    : Math.max(el.parentElement.offsetHeight, 450),
+            // height    : Math.max(el.parentElement.offsetHeight, 450),
+            height    : 450,
             radius    : 2,
             title     : init_options.title,
             tooltip   : {

diff --git a/src/javascript/app/pages/trade/common.js b/src/javascript/app/pages/trade/common.js
@@ -157,6 +157,9 @@ const commonTrading = (() => {
         showHideOverlay('contract_confirmation_container', 'none');
         showHideOverlay('contracts_list', 'flex');
         $('.purchase_button').text(localize('Purchase'));
+        purchaseManager.set({
+            showPurchaseResults: false,
+        });
     };
 
     const getContractCategoryTree = (elements) => {

diff --git a/src/javascript/app/pages/trade/portal.jsx b/src/javascript/app/pages/trade/portal.jsx
@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+
+const Portal = ({ children }) => {
+    const elRef = useRef(document.createElement('div'));
+
+    useEffect(() => {
+        const el = elRef.current;
+        document.body.appendChild(el);
+        return () => {
+            document.body.removeChild(el);
+        };
+    }, []);
+
+    return ReactDOM.createPortal(
+        children,
+        elRef.current
+    );
+};
+
+export default Portal;
diff --git a/src/javascript/app/pages/trade/price.js b/src/javascript/app/pages/trade/price.js
@@ -248,6 +248,7 @@ const Price = (() => {
             purchaseManager.set({
                 [`${position}Amount`]      : data.display_value ? formatMoney(currentCurrency, data.display_value,true) : '-',
                 [`${position}PayoutAmount`]: data.payout ? formatMoney(currentCurrency, data.payout,true) : '-',
+                [`${position}Multiplier`]  : data.multiplier ? formatMoney(currentCurrency, data.multiplier, true, 0, 2) : '-',
                 currency                   : getCurrencyDisplayCode(currentCurrency),
             });
 
@@ -460,8 +461,18 @@ const Price = (() => {
         Object.keys(position_is_visible).forEach(position => {
             const container = CommonFunctions.getElementById(`price_container_${position}`);
             if (position_is_visible[position]) {
+                if (position === 'middle'){
+                    purchaseManager.set({
+                        showMidPurchase: true,
+                    });
+                }
                 $(container).fadeIn(0);
             } else {
+                if (position === 'middle'){
+                    purchaseManager.set({
+                        showMidPurchase: false,
+                    });
+                }
                 $(container).fadeOut(0);
             }
         });

diff --git a/src/javascript/app/pages/trade/process.js b/src/javascript/app/pages/trade/process.js
@@ -14,6 +14,7 @@ const StartDates        = require('./starttime').StartDates;
 const Symbols           = require('./symbols');
 const Tick              = require('./tick');
 const BinarySocket      = require('../../base/socket');
+const purchaseManager   = require('../../common/purchase_manager').default;
 const getMinPayout      = require('../../common/currency').getMinPayout;
 const isCryptocurrency  = require('../../common/currency').isCryptocurrency;
 const isEuCountry       = require('../../common/country_base').isEuCountry;
@@ -146,7 +147,10 @@ const Process = (() => {
     const processContract = (contracts) => {
         if (getPropertyValue(contracts, ['error', 'code']) === 'InvalidSymbol') {
             Price.processForgetProposals();
-            getElementById('contract_confirmation_container').style.display      = 'block';
+            purchaseManager.set({
+                showPurchaseResults: true,
+            });
+            getElementById('contract_confirmation_container').style.display = 'block';
             getElementById('contracts_list').style.display = 'none';
             getElementById('confirmation_message').hide();
             const confirmation_error = getElementById('confirmation_error');

diff --git a/src/javascript/app/pages/trade/purchase.js b/src/javascript/app/pages/trade/purchase.js
@@ -19,6 +19,7 @@ const CommonFunctions          = require('../../../_common/common_functions');
 const localize                 = require('../../../_common/localize').localize;
 const State                    = require('../../../_common/storage').State;
 const Url                      = require('../../../_common/url');
+const purchaseManager          = require('../../common/purchase_manager').default;
 const createElement            = require('../../../_common/utility').createElement;
 const getPropertyValue         = require('../../../_common/utility').getPropertyValue;
 
@@ -95,6 +96,10 @@ const Purchase = (() => {
             } else {
                 contracts_list.style.display = 'none';
                 container.style.display = 'block';
+                purchaseManager.set({
+                    showPurchaseResults: true,
+                });
+
                 message_container.hide();
                 if (/AuthorizationRequired/.test(error.code)) {
                     authorization_error.setVisibility(1);
@@ -105,10 +110,21 @@ const Purchase = (() => {
 
                     const signup_url = `${Url.getStaticUrl()}/signup/`;
                     authorization_error_btn_signup.href = signup_url;
+
+                    purchaseManager.set({
+                        error: {
+                            ...error,
+                            signupUrl: signup_url,
+                            title    : localize('Already have an account?'),
+                            isCustom : true,
+                        },
+                    });
+
                 } else {
                     BinarySocket.wait('get_account_status').then(response => {
                         confirmation_error.setVisibility(1);
                         let message = error.message;
+
                         if (/NoMFProfessionalClient/.test(error.code)) {
                             const account_status = getPropertyValue(response, ['get_account_status', 'status']) || [];
                             const has_professional_requested = account_status.includes('professional_requested');
@@ -145,6 +161,10 @@ const Purchase = (() => {
                             }
                         }
 
+                        purchaseManager.set({
+                            error: { ...error,message },
+                        });
+
                         CommonFunctions.elementInnerHtml(confirmation_error, message);
                     });
                 }
@@ -155,12 +175,24 @@ const Purchase = (() => {
             message_container.show();
             authorization_error.setVisibility(0);
             confirmation_error.setVisibility(0);
+            purchaseManager.set({
+                error: null,
+            });
 
             CommonFunctions.elementTextContent(heading, localize('Contract Confirmation'));
             CommonFunctions.elementTextContent(descr, receipt.longcode);
             CommonFunctions.elementTextContent(barrier_element, '');
             CommonFunctions.elementTextContent(reference, `${localize('Your transaction reference is')} ${receipt.transaction_id}`);
 
+            purchaseManager.set({
+                showPurchaseResults: true,
+                pr_heading         : localize('Contract Confirmation'),
+                pr_description     : receipt.longcode,
+                pr_barrier         : '',
+                pr_reference       : `${localize('Your transaction reference is')} ${receipt.transaction_id}`,
+
+            });
+
             const currency = Client.get('currency');
             let formula, multiplier;
             const { contract_type } = passthrough;
@@ -175,13 +207,30 @@ const Purchase = (() => {
             const potential_profit_value = payout_value ? formatMoney(currency, payout_value - cost_value) : undefined;
 
             CommonFunctions.elementInnerHtml(cost,   `${localize('Total Cost')} <p>${formatMoney(currency, cost_value)}</p>`);
+            purchaseManager.set({
+                pr_tableCost     : localize('Total Cost'),
+                pr_tableCostValue: formatMoney(currency, cost_value),
+            });
+
             if (isLookback(contract_type)) {
                 CommonFunctions.elementInnerHtml(payout, `${localize('Potential Payout')} <p>${formula}</p>`);
+                purchaseManager.set({
+                    pr_tablePayout     : localize('Potential Payout'),
+                    pr_tablePayoutValue: formula,
+                });
                 profit.setVisibility(0);
             } else {
                 profit.setVisibility(1);
                 CommonFunctions.elementInnerHtml(payout, `${localize('Potential Payout')} <p>${formatMoney(currency, payout_value)}</p>`);
                 CommonFunctions.elementInnerHtml(profit, `${localize('Potential Profit')} <p>${potential_profit_value}</p>`);
+
+                purchaseManager.set({
+                    pr_tablePayout     : localize('Potential Payout'),
+                    pr_tablePayoutValue: formatMoney(currency, payout_value),
+                    pr_tableProfit     : localize('Potential Profit'),
+                    pr_tableProfitValue: potential_profit_value,
+
+                });
             }
 
             updateValues.updateContractBalance(receipt.balance_after);
@@ -205,9 +254,15 @@ const Purchase = (() => {
                 CommonFunctions.elementTextContent(button, localize('View'));
                 button.setAttribute('contract_id', receipt.contract_id);
                 button.show();
+                purchaseManager.set({
+                    pr_showBtn: true,
+                });
                 $('#confirmation_message_container .open_contract_details').attr('contract_id', receipt.contract_id).setVisibility(1);
             } else {
                 button.hide();
+                purchaseManager.set({
+                    pr_showBtn: false,
+                });
                 $('#confirmation_message_container .open_contract_details').setVisibility(0);
             }
         }