diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index c77bf373f9d..d7e3b07ed88 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -1,5 +1,5 @@ /* eslint-disable import/no-unresolved */ -import React, { Fragment, useEffect, useState } from 'react'; +import React, { Fragment, useEffect, useRef, 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'; @@ -15,7 +15,8 @@ import { parseData, triggerClick } from '../../../common/helpers'; const Purchase = () => { const has_purchase_change = usePurchaseChange(); - const has_contract_change = useContractChange(); + const has_contract_change = useContractChange(); + const amount_type = Defaults.get(PARAM_NAMES.AMOUNT_TYPE); const [data,setData] = useState({}); const [is_look_back, setIsLookBack] = useState(false); @@ -37,7 +38,6 @@ const Purchase = () => { useEffect(() => { const new_data = dataManager.getAllPurchases(); - setShowPopup(!!new_data?.show_contract_details_popup); setData(old_data => ({ @@ -85,6 +85,47 @@ const Purchase = () => { ); }; + const responsivePurchaser = useRef(null); + const responsiveSize = window.innerWidth < 763; + const scrollToPurchaseContainer = () => { + const purchaseContainer = document.getElementById('purchase_container'); + if (purchaseContainer) { + purchaseContainer.scrollIntoView({ block: 'center', behavior: 'smooth' }); + } + }; + + const scrollToContractsFormContainer = () => { + const contractsFormContainer = document.getElementById('trading_socket_container'); + if (contractsFormContainer) { + contractsFormContainer.scrollIntoView({ block: 'start', behavior: 'smooth' }); + } + }; + + const observer = new IntersectionObserver((entries) => { + const targetElement = responsivePurchaser.current; + entries.forEach(entry => { + if (entry.boundingClientRect.top < window.innerHeight || entry.isIntersecting) { + targetElement?.classList?.add('hide'); + } else { + targetElement?.classList?.remove('hide'); + } + }); + }); + + const purchaseSection = document.querySelectorAll('.purchase-footer'); + + useEffect(() => { + + if (purchaseSection.length) { + observer.observe(purchaseSection[0]); + + } + + return () => { + observer.disconnect(); + }; + }, [responsivePurchaser,purchaseSection]); + if (show_popup) { return ; } @@ -105,98 +146,152 @@ const Purchase = () => { if (!data?.show_purchase_results && !data?.error) { return ( -
- {data?.show_mid_purchase ? ( -
-
-
-
- {data?.middle_display_text} -
-
-
-
- {localize('Stake')}: - {data?.middle_amount} {displayCurrency(data?.middle_amount)} - + <> +
+ {data?.show_mid_purchase ? ( +
+
+
+
+ {data?.middle_display_text} +
+
+
+
+ {localize('Stake')}: + {data?.middle_amount} {displayCurrency(data?.middle_amount)} + +
+
+ {localize('Multiplier')}: + + {data?.middle_multiplier} {displayCurrency(data?.middle_multiplier)} + +
-
- {localize('Multiplier')}: - - {data?.middle_multiplier} {displayCurrency(data?.middle_multiplier)} - +
+ {ButtonTooltipWrapper(
-
- {ButtonTooltipWrapper(
+
+
+ {parseData(data.middle_comment)}
-
- {parseData(data.middle_comment)} -
-
- ) : ( - <> - {purchase_positions.map(position => { - const contract_type = data?.[`${position}_contract_type`]; - const display_text = data?.[`${position}_display_text`]; - const amount = data?.[`${position}_amount`]; - const amount_classname = data?.[`${position}_amount_classname`]; - const payout_amount_classname = data?.[`${position}_payout_amount_classname`]; - const payout_amount = data?.[`${position}_payout_amount`]; - const purchase_disabled = data?.[`${position}_purchase_disabled`]; - const description = data?.[`${position}_description`]; - const comment = data?.[`${position}_comment`]; + ) : ( + <> + {purchase_positions.map(position => { + const contract_type = data?.[`${position}_contract_type`]; + const display_text = data?.[`${position}_display_text`]; + const amount = data?.[`${position}_amount`]; + const amount_classname = data?.[`${position}_amount_classname`]; + const payout_amount_classname = data?.[`${position}_payout_amount_classname`]; + const payout_amount = data?.[`${position}_payout_amount`]; + const purchase_disabled = data?.[`${position}_purchase_disabled`]; + const description = data?.[`${position}_description`]; + const comment = data?.[`${position}_comment`]; - return ( - -
-
-
-
- {display_text} -
+ return ( + +
+
+
+
+ {display_text} +
-
-
-
- {localize('Stake')}: - {amount} {displayCurrency(amount)} - -
-
- {localize('Payout')}: - {payout_amount} {displayCurrency(payout_amount)} - +
+
+
+ {localize('Stake')}: + {amount} {displayCurrency(amount)} + +
+
+ {localize('Payout')}: + {payout_amount} {displayCurrency(payout_amount)} + +
-
-
- {ButtonTooltipWrapper(
-
-
- {parseData(comment)} +
+ {parseData(comment)} +
-
- - ); - })} - - )} -
+ + ); + })} + + )} +
+
+ {data?.show_mid_purchase ? ( +
{ + if (!data?.mid_purchase_disabled) { + triggerClick('#purchase_button_middle'); + scrollToPurchaseContainer(); + } + }} + > + {data?.middle_display_text} +
+ {localize('Stake')} + {data?.middle_amount} {displayCurrency(data?.middle_amount)} +
+
+ ) : ( + <> +
{ + if (!data?.top_purchase_disabled) { + triggerClick('#purchase_button_top'); + scrollToPurchaseContainer(); + } + }} + > + {data?.top_display_text} +
+ {amount_type === 'payout' ? localize('Stake') : localize('Payout')} + {amount_type === 'payout' ? data?.top_amount : data?.top_payout_amount } {displayCurrency(data?.top_payout_amount)} +
+
+
{ + if (!data?.bottom_purchase_disabled) { + triggerClick('#purchase_button_bottom'); + scrollToPurchaseContainer(); + } + }} + > + {data?.bottom_display_text} +
+ {amount_type === 'payout' ? localize('Stake') : localize('Payout')} + {amount_type === 'payout' ? data?.bottom_amount : data?.bottom_payout_amount } {displayCurrency(data?.top_payout_amount)} +
+
+ + )} +
+ ); } @@ -211,6 +306,8 @@ const Purchase = () => { onClick={() => { triggerClick('#close_confirmation_container'); hidePurchaseResults(); + if (responsiveSize) scrollToContractsFormContainer(); + }} > @@ -274,6 +371,7 @@ const Purchase = () => { onClick={() => { triggerClick('#close_confirmation_container'); hidePurchaseResults(); + if (responsiveSize) scrollToContractsFormContainer(); }} > diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss index 59a7fef506e..c442458ec5b 100644 --- a/src/sass/_common/reskin.scss +++ b/src/sass/_common/reskin.scss @@ -483,6 +483,96 @@ div#contract-injection-container { } } +.responsive-purchase-section { + display: flex; + position: fixed; + z-index: 99; + bottom: -100px; + left: 0px; + width: 100%; + justify-content: center; + background-color: var(--semantic-color-slate-solid-surface-frame-low); + padding: var(--core-spacing-400); + height: fit-content; + gap: var(--core-spacing-400); + transition: all var(--core-motion-ease-100) var(--core-motion-duration-200); + border-top: solid 1px var(--core-color-opacity-black-100); + + @media(max-width: 768px) { + bottom: 0px; + } + + &.hide { + bottom: -100px; + } + .purchase-button { + display: flex; + flex-direction: column; + padding: var(--core-spacing-200) var(--core-spacing-800); + cursor: pointer; + border-radius: var(--core-borderRadius-800); + width: 100%; + max-width: 300px; + height: 56px; + + .label { + display: flex; + width: 100%; + justify-content: flex-end; + font-size: 16px; + color: var(--core-color-solid-slate-50); + font-weight: 700; + line-height: 24px; + } + .content { + display: flex; + width: 100%; + justify-content: space-between; + + .text { + display: flex; + font-size: 12px; + color: var(--core-color-solid-slate-50); + line-height: 18px; + } + } + &.inverse { + .label { + justify-content: flex-start; + } + .content { + flex-direction: row-reverse; + } + } + &.buy { + background-color: var(--core-color-solid-emerald-700); + + &:hover { + background-color: var(--component-button-bg-buy-primary-hover) + } + &.disabled { + opacity: var(--opacity-disabled); + background: var(--component-button-bg-buy-primary-default); + cursor: not-allowed; + } + } + &.sell { + background-color: var(--core-color-solid-cherry-700); + + &:hover { + background-color: var(--component-button-bg-sell-primary-hover); + } + &.disabled { + opacity: var(--opacity-disabled); + background: var(--component-button-bg-sell-primary-default); + cursor: not-allowed; + } + } + + } + +} + .quill-purchase-popup, .quill-generic-popup { position: fixed;