Purchase section improvements (#685)

* chore: initial trade results dev * chore: results and error messages * chore: popup load * chore: contract end * chore: add login error * chore: hide popup * chore: ui fixes * chore: fix sell and audit clash * chore: language fixes * chore: audit and qa test fixes * chore: fixed all around issues
deriv-com · Jul 19, 2024 · 36bc4cf · 36bc4cf
1 parent d2ca4cd
commit 36bc4cf
Show file tree

Hide file tree

Showing 9 changed files with 951 additions and 614 deletions.
diff --git a/src/javascript/app/common/helpers.js b/src/javascript/app/common/helpers.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Tooltip } from '@deriv-com/quill-ui';
+import parse from 'html-react-parser';
+import { getLocalTime } from '../base/clock';
+
+const parseData = (rawData) => !rawData ?  '' :  parse(rawData);
+
+const triggerClick = (query) => document.querySelector(query)?.click();
+
+const TimeTooltipWrapper = (element, time) => {
+    const localTime = getLocalTime(`${time}` || '');
+    return (
+        <Tooltip
+            as='div'
+            tooltipContent={localTime}
+            tooltipPosition='left'
+            variant='base'
+        >
+            {element}
+        </Tooltip>
+    );
+};
+
+export {
+    parseData,
+    triggerClick,
+    TimeTooltipWrapper,
+};
+
diff --git a/src/javascript/app/pages/bottom/explanation.jsx b/src/javascript/app/pages/bottom/explanation.jsx
@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import parse from 'html-react-parser';
+import { Text } from '@deriv-com/quill-ui';
 import { contractExplanationData } from './data/explanation.js';
 import { useContractChange, useMarketChange } from '../../hooks/events';
 import Defaults, { PARAM_NAMES } from '../trade/defaults';
 import Language from '../../../_common/language';
 import Url from '../../../_common/url';
 import { localize } from '../../../_common/localize.js';
 
-export const Explanation = () => {
+export const Explanation = ({ explanationOnly = false }) => {
     const language = Language.get();
 
     const [formName,setFormName] = useState('');
@@ -93,57 +94,61 @@ export const Explanation = () => {
         return (
             <div className='tab-explanation'>
                 {/* ========== Winning ========== */}
-                <div id='explanation_winning'>
-                    <div id={`winning_${formName}`}>
-                        <h3>{localize('Winning the contract')}</h3>
-                        {contractExplanationData.winning[formName].content.map(
-                            (data, idx) => (
-                                <p key={idx}>{parse(data)}</p>
-                            )
-                        )}
-                    </div>
-                </div>
-
-                {/* ========== Image ========== */}
-                {images[formName] && (
-                    <div id='explanation_image'>
-                        <div className='gr-row'>
-                            <div className='gr-2 hide-mobile' />
-                            <div
-                                className='gr-4 gr-12-m padding-right'
-                                style={{ margin: 'auto' }}
-                            >
-                                <img
-                                    id='explanation_image_1'
-                                    className='responsive'
-                                    src={`${image_path}${images[formName].image1}?${process.env.BUILD_HASH}`}
-                                />
+                {!explanationOnly && (
+                    <>
+                        <div id='explanation_winning'>
+                            <div id={`winning_${formName}`}>
+                                <h3>{localize('Winning the contract')}</h3>
+                                {contractExplanationData.winning[formName].content.map(
+                                    (data, idx) => (
+                                        <p key={idx}>{parse(data)}</p>
+                                    )
+                                )}
                             </div>
-                            <div className='gr-4 gr-12-m padding-left'>
-                                <img
-                                    id='explanation_image_2'
-                                    className='responsive'
-                                    src={`${image_path}${images[formName].image2}?${process.env.BUILD_HASH}`}
-                                />
-                            </div>
-                            <div className='gr-2 hide-mobile' />
                         </div>
-                    </div>
+
+                        {/* ========== Image ========== */}
+                        {images[formName] && (
+                            <div id='explanation_image'>
+                                <div className='gr-row'>
+                                    <div className='gr-2 hide-mobile' />
+                                    <div
+                                        className='gr-4 gr-12-m padding-right'
+                                        style={{ margin: 'auto' }}
+                                    >
+                                        <img
+                                            id='explanation_image_1'
+                                            className='responsive'
+                                            src={`${image_path}${images[formName].image1}?${process.env.BUILD_HASH}`}
+                                        />
+                                    </div>
+                                    <div className='gr-4 gr-12-m padding-left'>
+                                        <img
+                                            id='explanation_image_2'
+                                            className='responsive'
+                                            src={`${image_path}${images[formName].image2}?${process.env.BUILD_HASH}`}
+                                        />
+                                    </div>
+                                    <div className='gr-2 hide-mobile' />
+                                </div>
+                            </div>
+                        )}
+                    </>
                 )}
 
                 {/* ========== Explain ========== */}
                 <div id='explanation_explain' className='gr-child'>
                     <div id={`explain_${formName}`}>
-                        <h3>{contractExplanationData.explain[formName].title}</h3>
+                        <Text size='lg' bold>{contractExplanationData.explain[formName].title}</Text>
                         {contractExplanationData.explain[formName].content.map(
                             (data, idx) => (
-                                <p key={idx}>{parse(data)}</p>
+                                <Text size='md' key={idx}>{parse(data)}</Text>
                             )
                         )}
                         {contractExplanationData.explain[formName].title_secondary && (
-                            <h3 className='secondary-title'>
+                            <Text size='lg' bold>
                                 {contractExplanationData.explain[formName].title_secondary}
-                            </h3>
+                            </Text>
                         )}
                         {contractExplanationData.explain[formName].content_secondary &&
             contractExplanationData.explain[formName].content_secondary.map(
@@ -153,13 +158,15 @@ export const Explanation = () => {
                 </div>
 
                 {/* ========== Note ========== */}
-                {contractExplanationData.note[formName] && (
-                    <p className='hint'>
-                        <strong>{localize('Note')}: </strong>
-                        {contractExplanationData.note[formName].content.map((data, idx) => (
-                            <span key={idx}>{parse(data)}</span>
-                        ))}
-                    </p>
+                {!explanationOnly && (
+                    contractExplanationData.note[formName] && (
+                        <p className='hint'>
+                            <strong>{localize('Note')}: </strong>
+                            {contractExplanationData.note[formName].content.map((data, idx) => (
+                                <span key={idx}>{parse(data)}</span>
+                            ))}
+                        </p>
+                    )
                 )}
             </div>
         );

diff --git a/src/javascript/app/pages/trade/common.js b/src/javascript/app/pages/trade/common.js
@@ -3,7 +3,7 @@ const Symbols                    = require('./symbols');
 const Tick                       = require('./tick');
 const marketsElement             = require('./markets.jsx');
 const GuideElement               = require('./guide.jsx');
-const PurchaseElement            = require('./purchase.jsx');
+const PurchaseElement            = require('./purchase/purchase.jsx');
 const MarketSelectorElement      = require('./markets/market-selector.jsx');
 const TabsElement                = require('../bottom/tabs.jsx');
 const formatMoney                = require('../../common/currency').formatMoney;