diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index c77bf373f9d..8086f45c249 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'; @@ -37,7 +37,6 @@ const Purchase = () => { useEffect(() => { const new_data = dataManager.getAllPurchases(); - setShowPopup(!!new_data?.show_contract_details_popup); setData(old_data => ({ @@ -85,6 +84,32 @@ const Purchase = () => { ); }; + const responsivePurchaser = useRef(null); + + useEffect(() => { + const handleScroll = () => { + const purchaseSection = document.querySelector('.quill-purchase-section'); + const targetElement = responsivePurchaser.current; + + if (purchaseSection && targetElement) { + const purchaseSectionTop = purchaseSection.offsetTop; + const bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; + + if ((bodyScrollTop + window.innerHeight) >= purchaseSectionTop) { + targetElement.classList.add('hide'); + } else { + targetElement.classList.remove('hide'); + } + } + }; + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + }, [responsivePurchaser]); + if (show_popup) { return ; } @@ -105,98 +130,137 @@ 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('Stake')}: + {amount} {displayCurrency(amount)} + +
+
+ {localize('Payout')}: + {payout_amount} {displayCurrency(payout_amount)} + +
-
- {localize('Payout')}: - {payout_amount} {displayCurrency(payout_amount)} - -
-
-
- {ButtonTooltipWrapper(
-
-
- {parseData(comment)} +
+ {parseData(comment)} +
-
- - ); - })} - - )} -
+ + ); + })} + + )} +
+
+ {data?.show_mid_purchase ? ( +
!data?.mid_purchase_disabled && triggerClick('#purchase_button_mid') } + > + {data?.middle_display_text} +
+ {localize('Stake')} + {data?.middle_amount} {displayCurrency(data?.middle_amount)} +
+
+ ) : ( + <> +
!data?.top_purchase_disabled && triggerClick('#purchase_button_top') } + > + {data?.top_display_text} +
+ {localize('Payout')} + {data?.top_payout_amount} {displayCurrency(data?.top_payout_amount)} +
+
+
!data?.bottom_purchase_disabled && triggerClick('#purchase_button_bottom') } + > + {data?.bottom_display_text} +
+ {localize('Payout')} + {data?.bottom_payout_amount} {displayCurrency(data?.bottom_payout_amount)} +
+
+ + )} +
+ ); } diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss index dbff3295cf5..15372f19efe 100644 --- a/src/sass/_common/reskin.scss +++ b/src/sass/_common/reskin.scss @@ -493,6 +493,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-800); + cursor: pointer; + border-radius: var(--core-borderRadius-800); + width: 100%; + max-width: 300px; + height: fit-content; + + .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;