From 2e5b4a59e6f1dbbeef75a4a79951210ec6e318a9 Mon Sep 17 00:00:00 2001 From: prince-deriv Date: Fri, 23 Aug 2024 16:38:05 +0400 Subject: [PATCH 1/4] chore: added responsive purchase buttons --- .../app/pages/trade/purchase/purchase.jsx | 233 ++++++++++++------ src/sass/_common/reskin.scss | 90 +++++++ 2 files changed, 242 insertions(+), 81 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index c77bf373f9d..b1256f16cce 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,7 @@ const Purchase = () => { useEffect(() => { const new_data = dataManager.getAllPurchases(); - + setShowPopup(!!new_data?.show_contract_details_popup); setData(old_data => ({ @@ -85,6 +85,38 @@ 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; + + console.log({ + purchaseSectionTop, + bodyScrollTop, + condition: bodyScrollTop >= purchaseSectionTop, + elem : targetElement, + }); + 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 +137,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('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 ? ( +
!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 59a7fef506e..a36f4f81b93 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-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; From 9de750e0899bab65fc6e95a784649a2b5324d1d9 Mon Sep 17 00:00:00 2001 From: prince-deriv Date: Fri, 23 Aug 2024 16:39:28 +0400 Subject: [PATCH 2/4] fix:spacing issue --- src/javascript/app/pages/trade/purchase/purchase.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index b1256f16cce..8cdacacfc1b 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -36,8 +36,7 @@ const Purchase = () => { }); useEffect(() => { - const new_data = dataManager.getAllPurchases(); - + const new_data = dataManager.getAllPurchases();d; setShowPopup(!!new_data?.show_contract_details_popup); setData(old_data => ({ From 654166cb52c571a39c9eb504458be700f064f9ef Mon Sep 17 00:00:00 2001 From: prince-deriv Date: Fri, 23 Aug 2024 16:43:27 +0400 Subject: [PATCH 3/4] fix:spacing issue --- src/javascript/app/pages/trade/purchase/purchase.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index 8cdacacfc1b..9b63a0ca8ee 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -36,7 +36,7 @@ const Purchase = () => { }); useEffect(() => { - const new_data = dataManager.getAllPurchases();d; + const new_data = dataManager.getAllPurchases(); setShowPopup(!!new_data?.show_contract_details_popup); setData(old_data => ({ From 025bf64bc7be249fc548e4b164ef1dafe079ac0d Mon Sep 17 00:00:00 2001 From: prince-deriv Date: Fri, 23 Aug 2024 16:48:40 +0400 Subject: [PATCH 4/4] fix: lint errors --- src/javascript/app/pages/trade/purchase/purchase.jsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index 9b63a0ca8ee..8086f45c249 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -94,13 +94,7 @@ const Purchase = () => { if (purchaseSection && targetElement) { const purchaseSectionTop = purchaseSection.offsetTop; const bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop; - - console.log({ - purchaseSectionTop, - bodyScrollTop, - condition: bodyScrollTop >= purchaseSectionTop, - elem : targetElement, - }); + if ((bodyScrollTop + window.innerHeight) >= purchaseSectionTop) { targetElement.classList.add('hide'); } else {