diff --git a/src/javascript/app/common/helpers.js b/src/javascript/app/common/helpers.js new file mode 100644 index 00000000000..977b0d9642c --- /dev/null +++ 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 ( + + {element} + + ); +}; + +export { + parseData, + triggerClick, + TimeTooltipWrapper, +}; + diff --git a/src/javascript/app/pages/bottom/explanation.jsx b/src/javascript/app/pages/bottom/explanation.jsx index 6e31c38dac4..a3e97dafead 100644 --- a/src/javascript/app/pages/bottom/explanation.jsx +++ b/src/javascript/app/pages/bottom/explanation.jsx @@ -1,5 +1,6 @@ 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'; @@ -7,7 +8,7 @@ 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 (
{/* ========== Winning ========== */} -
-
-

{localize('Winning the contract')}

- {contractExplanationData.winning[formName].content.map( - (data, idx) => ( -

{parse(data)}

- ) - )} -
-
- - {/* ========== Image ========== */} - {images[formName] && ( -
-
-
-
- + {!explanationOnly && ( + <> +
+
+

{localize('Winning the contract')}

+ {contractExplanationData.winning[formName].content.map( + (data, idx) => ( +

{parse(data)}

+ ) + )}
-
- -
-
-
+ + {/* ========== Image ========== */} + {images[formName] && ( +
+
+
+
+ +
+
+ +
+
+
+
+ )} + )} {/* ========== Explain ========== */}
-

{contractExplanationData.explain[formName].title}

+ {contractExplanationData.explain[formName].title} {contractExplanationData.explain[formName].content.map( (data, idx) => ( -

{parse(data)}

+ {parse(data)} ) )} {contractExplanationData.explain[formName].title_secondary && ( -

+ {contractExplanationData.explain[formName].title_secondary} -

+ )} {contractExplanationData.explain[formName].content_secondary && contractExplanationData.explain[formName].content_secondary.map( @@ -153,13 +158,15 @@ export const Explanation = () => {
{/* ========== Note ========== */} - {contractExplanationData.note[formName] && ( -

- {localize('Note')}: - {contractExplanationData.note[formName].content.map((data, idx) => ( - {parse(data)} - ))} -

+ {!explanationOnly && ( + contractExplanationData.note[formName] && ( +

+ {localize('Note')}: + {contractExplanationData.note[formName].content.map((data, idx) => ( + {parse(data)} + ))} +

+ ) )}
); diff --git a/src/javascript/app/pages/trade/common.js b/src/javascript/app/pages/trade/common.js index 958f184cedf..02849581485 100644 --- 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; diff --git a/src/javascript/app/pages/trade/purchase.jsx b/src/javascript/app/pages/trade/purchase.jsx deleted file mode 100644 index ca4380884bc..00000000000 --- a/src/javascript/app/pages/trade/purchase.jsx +++ /dev/null @@ -1,549 +0,0 @@ -/* eslint-disable import/no-unresolved */ -/* eslint-disable no-console */ -import React, { useEffect, useState } from 'react'; -import ReactDOM from 'react-dom'; -import parse from 'html-react-parser'; -import { Button, CaptionText, SectionMessage, Skeleton, Text, Tooltip } from '@deriv-com/quill-ui'; -import { LabelPairedArrowLeftMdRegularIcon, LabelPairedXmarkMdRegularIcon } from '@deriv/quill-icons/LabelPaired'; -import { StandaloneCircleInfoRegularIcon } from '@deriv/quill-icons/Standalone'; -import Defaults, { PARAM_NAMES } from './defaults'; -import Portal from './portal'; -import { getElementById } from '../../../_common/common_functions'; -import { useContractChange, usePurchaseChange } from '../../hooks/events'; -import purchaseManager from '../../common/purchase_manager'; -import { localize } from '../../../_common/localize'; -import { getLocalTime } from '../../base/clock'; - -const Purchase = () => { - const hasPurchaseChange = usePurchaseChange(); - const hasContractChange = useContractChange(); - - const [data,setData] = useState({}); - const [isLookBack,setIsLookBack] = useState(false); - const [showPopup,setShowPopup] = useState(false); - - const isloading = () => !data?.topAmount && !data?.middleAmount && !data?.bottomAmount; - - useEffect(() => { - const newData = purchaseManager.getAll(); - - setShowPopup(!!newData?.showContractDetailsPopup); - setData(oldData => ({ - ...oldData, - ...newData, - })); - }, [hasPurchaseChange]); - - useEffect(() => { - const formName = Defaults.get(PARAM_NAMES.FORM_NAME); - - const lookbacks = ['lookbacklow','lookbackhigh','lookbackhighlow']; - - setIsLookBack(lookbacks.includes(formName)); - - },[hasContractChange]); - - useEffect(() => { - if (showPopup) { - document.body.style.overflow = 'hidden'; - } else { - document.body.style.overflow = ''; - } - - return () => { - document.body.style.overflow = ''; - }; - }, [showPopup]); - - const displayCurrency = (referenceField) => referenceField !== '-' ? data?.currency : ''; - - const ButtonTooltipWrapper = (button,description) => { - if (!description || description === '' || data?.isPurchaseFormDisabled){ - return button; - } - return ( - {description} - } - tooltipPosition='top' - variant='base' - > - {button} - - ); - }; - - const TimeTooltipWrapper = (element,time) => { - const localTime = getLocalTime(time || ''); - return ( - - {element} - - ); - }; - - const parseData = (rawData) => !rawData ? '' : parse(rawData); - - const triggerClick = (id) => document.getElementById(id).click(); - - if (showPopup){ - return ( - -
- {!data?.cd_description ? ( -
-
- -
- - -
-
-
- ) : ( - <> -
-
-
-
-
- {data?.cd_description} -
-
-
-
-
- - {localize('Contract Information')} - -
-
-
- {localize('Contract type')} -
-
- {data?.cd_contractType} -
-
-
-
- {localize('Transaction ID')} -
-
- {data?.cd_transaction_ids && - Object.keys(data?.cd_transaction_ids).map(tik => { - const transactionName = (tik === 'buy') ? localize('Buy') : localize('Sell'); - return ( - {data?.cd_transaction_ids[tik]} ({transactionName}) - ); - })} -
-
-
-
- {localize('Start time')} -
-
- {TimeTooltipWrapper({data?.cd_startTime},data?.cd_startTime)} -
-
-
-
- {localize('Remaining time')} -
-
- {data?.cd_remainingTime} -
-
- {data?.cd_showEntrySpot && ( -
-
- {localize('Entry spot')} -
-
- {data?.cd_entrySpot} -
-
- )} -
-
- {data?.cd_barrierLabel} -
-
- {data?.cd_barrier} -
-
- {data?.cd_showBarrierReset && ( -
-
- {localize('Reset barrier')} -
-
- {data?.cd_barrierReset} -
-
- )} -
-
- {data?.cd_payoutLabel} -
-
- {parseData(data.cd_payout)} -
-
-
-
- {localize('Purchase price')} -
-
- {parseData(data.cd_purchasePrice)} -
-
-
- - {data?.cd_currentLabel} - -
- {!data?.cd_contractEnded && ( -
-
- {data?.cd_spotLabel} -
-
- {data?.cd_currentSpot} -
-
- )} -
-
- {data?.cd_endLabel || data?.cd_spotTimeLabel} -
-
- {TimeTooltipWrapper({data?.cd_endDate || data?.cd_currentDate},data?.cd_endDate || data?.cd_currentDate)} -
-
- {!data?.cd_contractEnded && ( -
-
- {localize('Current time')} -
-
- {TimeTooltipWrapper({data?.cd_currentTime},data?.cd_currentTime)} -
-
- )} -
-
- {data?.cd_indicativeLabel} -
-
- {parseData(data.cd_indicativePrice)} -
-
-
-
- {data?.cd_profitLossLabel} -
-
- {parseData(data.cd_profitLoss)} -
-
- - {data?.cd_contractEnded ? ( - <> -
-
- {data?.cd_sellMsg && ( -
- } /> -
- )} - - ) : ( - data?.cd_infoMsg && ( -
- } /> -
- ) - )} - - {data?.cd_showSell && ( - <> -
-
-
- } /> -
- - )} -
-
-
-
- - )} -
- - ); - } - - if (isloading() || (!data?.showPurchaseResults && data?.isPurchaseFormDisabled)){ - return ( -
- - - {!isLookBack && ( - <> - - - - )} -
); - } - - if (!data?.showPurchaseResults){ - return ( -
- {data?.showMidPurchase ? ( -
-
-
-
- {data?.middleDisplayText} -
-
-
-
- {localize('Stake')}: - {data?.middleAmount} {displayCurrency(data?.middleAmount)} -
-
- {localize('Multiplier')}: - {data?.middleMultiplier} {displayCurrency(data?.middleMultiplier)} -
-
-
- {ButtonTooltipWrapper(
-
-
-
- {parseData(data.middleComment)} -
-
- ) : ( - <> -
-
-
-
- {data?.topDisplayText} -
-
-
-
- {localize('Stake')}: - {data?.topAmount} {displayCurrency(data?.topAmount)} -
-
- {localize('Payout')}: - {data?.topPayoutAmount} {displayCurrency(data?.topPayoutAmount)} -
-
-
- {ButtonTooltipWrapper(
-
-
-
- {parseData(data.topComment)} -
-
-
-
-
-
- {data?.bottomDisplayText} -
-
-
-
- {localize('Stake')}: - {data?.bottomAmount} {displayCurrency(data?.bottomAmount)} -
-
- {localize('Payout')}: - {data?.bottomPayoutAmount} {displayCurrency(data?.bottomPayoutAmount)} -
-
-
- {ButtonTooltipWrapper(
-
-
- -
- {parseData(data.bottomComment)} -
- -
- - )} -
- ); - } - - if (data?.error){ - return ( -
-
-
- {data?.error?.title} - { - triggerClick('close_confirmation_container'); - purchaseManager.set({ - showPurchaseResults: false, - }); - }} - > - - -
- -
-
- {data?.error?.isCustom ? ( - <> - {data?.error.code === 'AuthorizationRequired' && ( - <> -
-
-
-
); - } - - return ( -
-
-
- {data?.pr_heading} - { - triggerClick('close_confirmation_container'); - purchaseManager.set({ - showPurchaseResults: false, - }); - }} - > - - -
- -
-
- {data?.pr_description} -
-
- {data?.pr_tablePayoutValue && ( -
- {data?.pr_tablePayout} - {parseData(data.pr_tablePayoutValue)} -
- )} - { data.pr_tableCostValue && ( -
- {data?.pr_tableCost} - {parseData(data.pr_tableCostValue)} -
- )} - { data.pr_tableProfitValue && ( -
- {data?.pr_tableProfit} - {parseData(data.pr_tableProfitValue)} -
- )} -
-
- {data?.pr_barrier && {parseData(data.pr_barrier)}} - {data?.pr_reference && {parseData(data.pr_reference)}} - {data?.pr_showBtn &&
-
- -
-
-
-
-
-
-
- {data?.pr_balance} - {parseData(data.pr_balanceValue)} -
-
- ); -}; - -export const init = () => { - ReactDOM.render( - , - getElementById('purchase_container') - ); -}; - -export default init; diff --git a/src/javascript/app/pages/trade/purchase/contract-details.jsx b/src/javascript/app/pages/trade/purchase/contract-details.jsx new file mode 100644 index 00000000000..e849c96d81f --- /dev/null +++ b/src/javascript/app/pages/trade/purchase/contract-details.jsx @@ -0,0 +1,203 @@ +/* eslint-disable import/no-unresolved */ +import React, { useEffect, useState } from 'react'; +import { Button, Skeleton, Text } from '@deriv-com/quill-ui'; +import { LabelPairedArrowLeftMdRegularIcon } from '@deriv/quill-icons/LabelPaired'; +import ContractTable from './contract-table'; +import Portal from '../portal'; +import purchaseManager from '../../../common/purchase_manager'; +import { usePurchaseChange } from '../../../hooks/events'; +import { localize } from '../../../../_common/localize'; +import { Explanation } from '../../bottom/explanation'; +import { TimeTooltipWrapper, triggerClick } from '../../../common/helpers'; + +const AuditSection = ({ data }) => { + const auditData = { + start: { + title : localize('Contract starts'), + content: data?.auditDataStart, + }, + end: { + title : localize('Contract ends'), + content: data?.auditDataEnd, + }, + details: { + title : localize('Contract details'), + content: data?.auditDataDetails, + }, + }; + + return ( + <> +
+
+
+
+
+
+ {data?.cd_description} +
+
+
+ {Object.keys(auditData).map(adk =>{ + const { title,content } = auditData[adk]; + + if (content){ + return ( + +
+ + {title} + +
+
+
+
+
+ + { localize('Spot')} + + + {localize('Spot time (GMT)') } + +
+
+ {content?.map((audit,ak) => + +
+
+ { audit?.name} +
+
+ + { audit?.tick} + + + {TimeTooltipWrapper( + {audit?.date}, + audit?.date + )} + +
+
+ + )} +
+ + ); + } + + return false; + })} +
+ +
+
+ +
+
+
+
+ + ); +}; + +const DetailsSection = ({ data }) => ( + <> +
+
+
+
+
+
+ {data?.cd_description} +
+
+
+ +
+
+
+
+ +); + +const Contents = ({ data }) => { + if (data?.cd_showAudit) { + return ( + + ); + } + + return ( + + ); +}; + +const ContractDetails = () => { + const hasPurchaseChange = usePurchaseChange(); + const [data, setData] = useState({}); + + useEffect(() => { + const newData = purchaseManager.getAll(); + + setData((oldData) => ({ + ...oldData, + ...newData, + })); + }, [hasPurchaseChange]); + + return ( + +
+ {!data?.cd_description ? ( +
+
+ +
+ + +
+
+
+ ) : } +
+ + ); +}; + +export default ContractDetails; diff --git a/src/javascript/app/pages/trade/purchase/contract-table.jsx b/src/javascript/app/pages/trade/purchase/contract-table.jsx new file mode 100644 index 00000000000..86e2c2c8f3c --- /dev/null +++ b/src/javascript/app/pages/trade/purchase/contract-table.jsx @@ -0,0 +1,239 @@ +/* eslint-disable import/no-unresolved */ +import React from 'react'; +import { Button, SectionMessage, Text } from '@deriv-com/quill-ui'; +import { StandaloneCircleInfoRegularIcon } from '@deriv/quill-icons/Standalone'; +import { localize } from '../../../../_common/localize'; +import { parseData, TimeTooltipWrapper, triggerClick } from '../../../common/helpers'; + +const ContractTable = ({ data }) => ( +
+
+ + {localize('Contract information')} + +
+
+
+ {localize('Contract type')} +
+
+ {data?.cd_contractType} +
+
+
+
+ {localize('Transaction ID')} +
+
+ {data?.cd_transaction_ids && + Object.keys(data?.cd_transaction_ids).map((tik) => { + const transactionName = + tik === 'buy' ? localize('Buy') : localize('Sell'); + return ( + + {data?.cd_transaction_ids[tik]} ({transactionName}) + + ); + })} +
+
+
+
+ {localize('Start time')} +
+
+ {TimeTooltipWrapper( + {data?.cd_startTime}, + data?.cd_startTime + )} +
+
+
+
+ {localize('Remaining time')} +
+
+ {data?.cd_remainingTime} +
+
+ {data?.cd_showEntrySpot && ( +
+
+ {localize('Entry spot')} +
+
+ {data?.cd_entrySpot} +
+
+ )} +
+
+ {data?.cd_barrierLabel} +
+
+ {data?.cd_barrier} +
+
+ {data?.cd_showBarrierLow && ( +
+
+ {localize('Low barrier')} +
+
+ {data?.cd_barrierLow} +
+
+ )} + {data?.cd_showBarrierReset && ( +
+
+ {localize('Reset barrier')} +
+
+ {data?.cd_barrierReset} +
+
+ )} +
+
+ {data?.cd_payoutLabel} +
+
+ {parseData(data.cd_payout)} +
+
+
+
+ {localize('Purchase price')} +
+
+ {parseData(data.cd_purchasePrice)} +
+
+
+ + {data?.cd_currentLabel} + +
+ {data?.cd_showCurrentSpot && ( +
+
+ {data?.cd_spotLabel} +
+
+ {data?.cd_currentSpot} +
+
+ )} +
+
+ {data?.cd_endLabel || data?.cd_spotTimeLabel} +
+
+ {TimeTooltipWrapper( + {data?.cd_endDate || data?.cd_currentDate}, + data?.cd_endDate || data?.cd_currentDate + )} +
+
+ {!data?.cd_contractEnded && ( +
+
+ {localize('Current time')} +
+
+ {TimeTooltipWrapper( + {data?.cd_currentTime}, + data?.cd_currentTime + )} +
+
+ )} +
+
+ {data?.cd_indicativeLabel} +
+
+ {parseData(data.cd_indicativePrice)} +
+
+
+
+ {data?.cd_profitLossLabel} +
+
+ + {parseData(data.cd_profitLoss)} + +
+
+ + {data?.cd_contractEnded ? ( + <> + {(data?.cd_showAuditBtn && !data?.cd_showAudit) && ( +
+
+ )} + {data?.cd_sellMsg && ( +
+ +
+ )} + + ) : ( + data?.cd_infoMsg && ( +
+ +
+ ) + )} + + {data?.cd_showSell && ( + <> +
+
+ + )} +
+); + +export default ContractTable; diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx new file mode 100644 index 00000000000..feb3fa60393 --- /dev/null +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -0,0 +1,315 @@ +/* eslint-disable import/no-unresolved */ +/* eslint-disable no-console */ +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 ContractDetails from './contract-details'; +import Defaults, { PARAM_NAMES } from '../defaults'; +import { getElementById } from '../../../../_common/common_functions'; +import { useContractChange, usePurchaseChange } from '../../../hooks/events'; +import purchaseManager from '../../../common/purchase_manager'; +import { localize } from '../../../../_common/localize'; + +import { parseData, triggerClick } from '../../../common/helpers'; + +const Purchase = () => { + const hasPurchaseChange = usePurchaseChange(); + const hasContractChange = useContractChange(); + + const [data,setData] = useState({}); + const [isLookBack,setIsLookBack] = useState(false); + const [showPopup,setShowPopup] = useState(false); + + const isloading = () => !data?.topAmount && !data?.middleAmount && !data?.bottomAmount; + + useEffect(() => { + const newData = purchaseManager.getAll(); + + setShowPopup(!!newData?.showContractDetailsPopup); + setData(oldData => ({ + ...oldData, + ...newData, + })); + }, [hasPurchaseChange]); + + useEffect(() => { + const formName = Defaults.get(PARAM_NAMES.FORM_NAME); + + const lookbacks = ['lookbacklow','lookbackhigh','lookbackhighlow']; + + setIsLookBack(lookbacks.includes(formName)); + + },[hasContractChange]); + + useEffect(() => { + if (showPopup) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = ''; + } + + return () => { + document.body.style.overflow = ''; + }; + }, [showPopup]); + + const displayCurrency = (referenceField) => referenceField !== '-' ? data?.currency : ''; + + const ButtonTooltipWrapper = (button,description) => { + if (!description || description === '' || data?.isPurchaseFormDisabled){ + return button; + } + return ( + {description} + } + tooltipPosition='top' + variant='base' + > + {button} + + ); + }; + + if (showPopup){ + return ; + } + + if (isloading() || (!data?.showPurchaseResults && data?.isPurchaseFormDisabled)){ + return ( +
+ + + {!isLookBack && ( + <> + + + + )} +
); + } + + if (!data?.showPurchaseResults){ + return ( +
+ {data?.showMidPurchase ? ( +
+
+
+
+ {data?.middleDisplayText} +
+
+
+
+ {localize('Stake')}: + {data?.middleAmount} {displayCurrency(data?.middleAmount)} +
+
+ {localize('Multiplier')}: + {data?.middleMultiplier} {displayCurrency(data?.middleMultiplier)} +
+
+
+ {ButtonTooltipWrapper(
+
+
+
+ {parseData(data.middleComment)} +
+
+ ) : ( + <> +
+
+
+
+ {data?.topDisplayText} +
+
+
+
+ {localize('Stake')}: + {data?.topAmount} {displayCurrency(data?.topAmount)} +
+
+ {localize('Payout')}: + {data?.topPayoutAmount} {displayCurrency(data?.topPayoutAmount)} +
+
+
+ {ButtonTooltipWrapper(
+
+
+
+ {parseData(data.topComment)} +
+
+
+
+
+
+ {data?.bottomDisplayText} +
+
+
+
+ {localize('Stake')}: + {data?.bottomAmount} {displayCurrency(data?.bottomAmount)} +
+
+ {localize('Payout')}: + {data?.bottomPayoutAmount} {displayCurrency(data?.bottomPayoutAmount)} +
+
+
+ {ButtonTooltipWrapper(
+
+
+ +
+ {parseData(data.bottomComment)} +
+ +
+ + )} +
+ ); + } + + if (data?.error){ + return ( +
+
+
+ {data?.error?.title} + { + triggerClick('#close_confirmation_container'); + purchaseManager.set({ + showPurchaseResults: false, + }); + }} + > + + +
+ +
+
+ {data?.error?.isCustom ? ( + <> + {data?.error.code === 'AuthorizationRequired' && ( + <> +
+
+
+
); + } + + return ( +
+
+
+ {data?.pr_heading} + { + triggerClick('#close_confirmation_container'); + purchaseManager.set({ + showPurchaseResults: false, + }); + }} + > + + +
+ +
+
+ {data?.pr_description} +
+
+ {data?.pr_tablePayoutValue && ( +
+ {data?.pr_tablePayout} + {parseData(data.pr_tablePayoutValue)} +
+ )} + { data.pr_tableCostValue && ( +
+ {data?.pr_tableCost} + {parseData(data.pr_tableCostValue)} +
+ )} + { data.pr_tableProfitValue && ( +
+ {data?.pr_tableProfit} + {parseData(data.pr_tableProfitValue)} +
+ )} +
+
+ {data?.pr_barrier && {parseData(data.pr_barrier)}} + {data?.pr_reference && {parseData(data.pr_reference)}} + {data?.pr_showBtn &&
+
+ +
+
+
+
+
+
+
+ {data?.pr_balance} + {parseData(data.pr_balanceValue)} +
+
+ ); +}; + +export const init = () => { + ReactDOM.render( + , + getElementById('purchase_container') + ); +}; + +export default init; diff --git a/src/javascript/app/pages/user/view_popup/view_popup.js b/src/javascript/app/pages/user/view_popup/view_popup.js index 3060793ee06..7e6eff46446 100644 --- a/src/javascript/app/pages/user/view_popup/view_popup.js +++ b/src/javascript/app/pages/user/view_popup/view_popup.js @@ -246,12 +246,16 @@ const ViewPopup = (() => { if (current_spot) { containerSetText('trade_details_current_spot > span', current_spot); purchaseManager.set({ - cd_currentSpot: current_spot, + cd_currentSpot : current_spot, + cd_showCurrentSpot: true, }); $('#trade_details_current_spot').parent().setVisibility(1); } else { $('#trade_details_current_spot').parent().setVisibility(0); + purchaseManager.set({ + cd_showCurrentSpot: false, + }); } if (current_spot_time) { @@ -529,8 +533,14 @@ const ViewPopup = (() => { if (document.getElementById('sell_details_audit')) { if (show) { setAuditVisibility(1); + purchaseManager.set({ + cd_showAudit: true, + }); } else { setAuditButtonsVisibility(1); + purchaseManager.set({ + cd_showAudit: false, + }); } return; } @@ -597,16 +607,21 @@ const ViewPopup = (() => { xhttp.send(); }; - const parseAuditResponse = (table, array_audit_data) => ( + const parseAuditResponse = (table, array_audit_data,type) => ( new Promise((resolve) => { const primary_classes = ['secondary-bg-color', 'content-inverse-color']; const secondary_classes = ['fill-bg-color', 'secondary-time']; + + const auditData = []; array_audit_data.forEach((audit_data) => { - let color; + let color, + colorClass; if (audit_data.flag === 'highlight_tick') { color = primary_classes; + colorClass = 'selected'; } else if (audit_data.flag === 'highlight_time') { color = secondary_classes; + colorClass = 'highlighted'; } createAuditRow( @@ -617,7 +632,19 @@ const ViewPopup = (() => { audit_data.name, color ); + + auditData.push({ + ...audit_data, + tick : audit_data.tick_display_value, + color: colorClass, + date : audit_data.epoch && !isNaN(audit_data.epoch) ? moment.unix(audit_data.epoch).utc().format('YYYY-MM-DD HH:mm:ss') : (audit_data.epoch || ''), + }); + }); + + purchaseManager.set({ + [`auditData${type}`]: auditData, }); + resolve(); }) ); @@ -686,7 +713,7 @@ const ViewPopup = (() => { const populateAuditTable = (show_audit_table) => { if (!contract.tick_count) { const contract_starts = createAuditTable(localize('Contract starts')); - parseAuditResponse(contract_starts.table, contract.audit_details.contract_start).then(() => { + parseAuditResponse(contract_starts.table, contract.audit_details.contract_start,'Start').then(() => { if (contract.audit_details.contract_start) { createAuditHeader(contract_starts.table); appendAuditLink('trade_details_entry_spot'); @@ -699,7 +726,7 @@ const ViewPopup = (() => { // don't show exit tick information if missing or manual sold if (contract.audit_details.contract_end && contract.status !== 'sold') { const contract_ends = createAuditTable(localize('Contract ends')); - parseAuditResponse(contract_ends.table, contract.audit_details.contract_end).then(() => { + parseAuditResponse(contract_ends.table, contract.audit_details.contract_end,'End').then(() => { if (contract.audit_details.contract_end) { createAuditHeader(contract_ends.table); appendAuditLink('trade_details_current_spot'); @@ -717,7 +744,7 @@ const ViewPopup = (() => { }); } else { const contract_details = createAuditTable(localize('Contract details')); - parseAuditResponse(contract_details.table, contract.audit_details.all_ticks).then(() => { + parseAuditResponse(contract_details.table, contract.audit_details.all_ticks,'Details').then(() => { if (contract.audit_details.all_ticks) { createAuditHeader(contract_details.table); appendAuditLink('trade_details_entry_spot'); @@ -807,7 +834,7 @@ const ViewPopup = (() => { purchaseManager.set({ cd_description : longcode, cd_showEntrySpot : should_show_entry_spot, - cd_ShowBarrier : should_show_barrier, + cd_showBarrier : should_show_barrier, cd_showBarrierReset: Reset.isReset(contract.contract_type), cd_showBarrierLow : contract.barrier_count > 1 , cd_barrierLabel : barrier_text, @@ -963,6 +990,9 @@ const ViewPopup = (() => { getContract(); } else { $container.find('#errMsg').text(response.error.message).setVisibility(1); + purchaseManager.set({ + cd_errorMsg: response.error.message, + }); } sellSetVisibility(true); is_sell_clicked = false; diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss index 000e6d0039e..e3c19070cdf 100644 --- a/src/sass/_common/reskin.scss +++ b/src/sass/_common/reskin.scss @@ -63,6 +63,7 @@ div#underlying_details { display: flex; flex-direction: column; + transform: scale(0.88); #spot{ margin-top: 5px; @@ -395,12 +396,15 @@ div#purchase_container { display: flex; flex-direction: column; align-items: center; - overflow-y: auto; - // transform: scale(.8); - // top: -135px; - // left: -86px; - // width: 950px; - + + .popup-scroller { + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; + height: calc(100% - 48px); + width: 100%; + } .header-box { display: flex; width: 100%; @@ -466,12 +470,16 @@ div#purchase_container { border-radius: 8px; height: fit-content; + &.full { + max-width: none; + } .table-box { width: 100%; height: fit-content; display: flex; padding: 8px 16px; border-bottom: solid 1px var(--core-color-opacity-slate-100); + gap: var(--core-spacing-400); &.lg { flex-direction: column; @@ -480,8 +488,9 @@ div#purchase_container { padding: var(--core-spacing-800); margin: var(--core-spacing-800) 0 0 0; } - p, .info-msg{ + p, .info-msg { width: 100%; + white-space: normal; } .table-item { display: flex; @@ -490,6 +499,9 @@ div#purchase_container { min-width: 140px; width: fit-content; + &:first-child { + max-width: 140px; + } &.profit-loss { p { font-weight: bold; @@ -510,15 +522,66 @@ div#purchase_container { } } } + .table-container { + display: flex; + flex-direction: column; + padding: var(--core-spacing-800); + gap: var(--core-spacing-400); + border-bottom: solid 1px var(--core-color-opacity-slate-100); + + .table-item { + display: flex; + gap: var(--core-spacing-800); + + .item-header { + display: flex; + width: 100%; + max-width: 120px; + padding: var(--core-spacing-400); + } + .item-content { + display: flex; + padding: var(--core-spacing-400); + width: 100%; + text-align: center; + + &.highlighted { + background: var(--core-color-solid-slate-100); + } + &.selected { + background: var(--core-color-solid-slate-700); + + p { + color: var(--core-color-solid-slate-50); + } + } + .item-inner { + display: flex; + width: 100%; + align-items: center; + justify-content: center; + } + } + } + } } } } } -// Hide old containers -#contract_prices_container, .popup_page_overlay, .inpage_popup_container { - position: absolute !important; - top: -999px !important; +// Hide old containers +// This is to allow QA to disable this quickly +html:not(.test) { + #contract_prices_container, .popup_page_overlay, .inpage_popup_container { + position: absolute !important; + top: -999px !important; + } +} + +html.test { + .inpage_popup_container { + z-index: 9999 !important; + } } .purchase-tooltip {