From 2e5b4a59e6f1dbbeef75a4a79951210ec6e318a9 Mon Sep 17 00:00:00 2001 From: prince-deriv Date: Fri, 23 Aug 2024 16:38:05 +0400 Subject: [PATCH 01/18] 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 02/18] 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 03/18] 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 04/18] 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 { From 58ffc649be9dce68b428716ea156063ee76e87e8 Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Mon, 26 Aug 2024 10:32:15 +0400 Subject: [PATCH 05/18] fix: fixed height --- src/sass/_common/reskin.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/sass/_common/reskin.scss b/src/sass/_common/reskin.scss index a36f4f81b93..c442458ec5b 100644 --- a/src/sass/_common/reskin.scss +++ b/src/sass/_common/reskin.scss @@ -508,12 +508,12 @@ div#contract-injection-container { .purchase-button { display: flex; flex-direction: column; - padding: var(--core-spacing-800); + padding: var(--core-spacing-200) var(--core-spacing-800); cursor: pointer; border-radius: var(--core-borderRadius-800); width: 100%; max-width: 300px; - height: fit-content; + height: 56px; .label { display: flex; From c0a01eca85371b72299070b1e815819cee5853a9 Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Wed, 28 Aug 2024 12:08:34 +0400 Subject: [PATCH 06/18] fix: added scroll to purchase section --- .../app/pages/trade/purchase/purchase.jsx | 31 ++++++++++++++++--- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index 8086f45c249..5ce9d1d3d3d 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -85,6 +85,12 @@ const Purchase = () => { }; const responsivePurchaser = useRef(null); + const scrollToPurchaseContainer = () => { + const purchaseContainer = document.getElementById('purchase_container'); + if (purchaseContainer) { + purchaseContainer.scrollIntoView({ block: 'center', behavior: 'smooth' }); + } + }; useEffect(() => { const handleScroll = () => { @@ -226,8 +232,13 @@ const Purchase = () => {
{data?.show_mid_purchase ? (
!data?.mid_purchase_disabled && triggerClick('#purchase_button_mid') } + className={`purchase-button buy ${data?.bottom_purchase_disabled ? 'disabled' : ''}`} + onClick={() => { + if (!data?.mid_purchase_disabled) { + triggerClick('#purchase_button_mid'); + scrollToPurchaseContainer(); + } + }} > {data?.middle_display_text}
@@ -239,7 +250,12 @@ const Purchase = () => { <>
!data?.top_purchase_disabled && triggerClick('#purchase_button_top') } + onClick={() => { + if (!data?.top_purchase_disabled) { + triggerClick('#purchase_button_top'); + scrollToPurchaseContainer(); + } + }} > {data?.top_display_text}
@@ -248,8 +264,13 @@ const Purchase = () => {
!data?.bottom_purchase_disabled && triggerClick('#purchase_button_bottom') } + className={`purchase-button sell inverse ${data?.bottom_purchase_disabled ? 'disabled' : ''}`} + onClick={() => { + if (!data?.bottom_purchase_disabled) { + triggerClick('#purchase_button_bottom'); + scrollToPurchaseContainer(); + } + }} > {data?.bottom_display_text}
From d7d5fc56b133a88b14b0f5b77a31c03690171fa3 Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Wed, 28 Aug 2024 12:15:43 +0400 Subject: [PATCH 07/18] empty: empty commit From 5b5ffdd92ea1ff2b384475ba8d706c9d3b89f94b Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Wed, 28 Aug 2024 14:21:23 +0400 Subject: [PATCH 08/18] fix: updated scroll behavior --- src/javascript/app/pages/trade/purchase/purchase.jsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index 5ce9d1d3d3d..3965e86d200 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -85,6 +85,7 @@ const Purchase = () => { }; const responsivePurchaser = useRef(null); + const responsiveSize = window.innerWidth < 763; const scrollToPurchaseContainer = () => { const purchaseContainer = document.getElementById('purchase_container'); if (purchaseContainer) { @@ -92,6 +93,13 @@ const Purchase = () => { } }; + const scrollToContractsFormContainer = () => { + const contractsFormContainer = document.getElementById('trading_socket_container'); + if (contractsFormContainer) { + contractsFormContainer.scrollIntoView({ block: 'start', behavior: 'smooth' }); + } + }; + useEffect(() => { const handleScroll = () => { const purchaseSection = document.querySelector('.quill-purchase-section'); @@ -296,6 +304,8 @@ const Purchase = () => { onClick={() => { triggerClick('#close_confirmation_container'); hidePurchaseResults(); + if (responsiveSize) scrollToContractsFormContainer(); + }} > @@ -359,6 +369,7 @@ const Purchase = () => { onClick={() => { triggerClick('#close_confirmation_container'); hidePurchaseResults(); + if (responsiveSize) scrollToContractsFormContainer(); }} > From a653faa7a6d7257b19ecbf539d994b62af8127fe Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Fri, 30 Aug 2024 11:13:24 +0400 Subject: [PATCH 09/18] fix: fixed buttton not appearing --- src/javascript/app/pages/trade/purchase/purchase.jsx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index 3965e86d200..5e7a8e59eed 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -104,12 +104,14 @@ const Purchase = () => { 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) { + const purchaseSectionRect = purchaseSection.getBoundingClientRect(); + const bodyScrollTop = window.scrollY; + + const targetElementVisible = (purchaseSectionRect.top <= window.innerHeight); + + if (bodyScrollTop > 0 && targetElementVisible) { targetElement.classList.add('hide'); } else { targetElement.classList.remove('hide'); From 6e8d2d0345122521c7c72a9d00706b582df8976f Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Fri, 30 Aug 2024 12:07:20 +0400 Subject: [PATCH 10/18] fix: fix buttons appearing on other parts --- .../app/pages/trade/purchase/purchase.jsx | 30 +++++++++++++------ 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index 5e7a8e59eed..d7278fbecee 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -102,27 +102,39 @@ const Purchase = () => { useEffect(() => { const handleScroll = () => { - const purchaseSection = document.querySelector('.quill-purchase-section'); const targetElement = responsivePurchaser.current; - - if (purchaseSection && targetElement) { - const purchaseSectionRect = purchaseSection.getBoundingClientRect(); + + if (targetElement) { const bodyScrollTop = window.scrollY; - - const targetElementVisible = (purchaseSectionRect.top <= window.innerHeight); - - if (bodyScrollTop > 0 && targetElementVisible) { + + if (bodyScrollTop === 0) { + targetElement.classList.remove('hide'); + } else { targetElement.classList.add('hide'); + } + } + }; + + const checkScrollOnActivation = () => { + const bodyScrollTop = window.scrollY; + + if (responsivePurchaser.current) { + if (bodyScrollTop === 0) { + responsivePurchaser.current.classList.remove('hide'); } else { - targetElement.classList.remove('hide'); + responsivePurchaser.current.classList.add('hide'); } } }; window.addEventListener('scroll', handleScroll); + document.addEventListener('visibilitychange', checkScrollOnActivation); + + checkScrollOnActivation(); return () => { window.removeEventListener('scroll', handleScroll); + document.removeEventListener('visibilitychange', checkScrollOnActivation); }; }, [responsivePurchaser]); From 3db746f6cd2f563c378046fb27bcd1f673b0e688 Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Fri, 30 Aug 2024 12:32:58 +0400 Subject: [PATCH 11/18] fix: fix button --- src/javascript/app/pages/trade/purchase/purchase.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index d7278fbecee..e055c727265 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -99,13 +99,15 @@ const Purchase = () => { contractsFormContainer.scrollIntoView({ block: 'start', behavior: 'smooth' }); } }; - + const bodyScrollTop = window.scrollY; + useEffect(() => { const handleScroll = () => { const targetElement = responsivePurchaser.current; if (targetElement) { - const bodyScrollTop = window.scrollY; + + console.log(bodyScrollTop); if (bodyScrollTop === 0) { targetElement.classList.remove('hide'); @@ -116,8 +118,7 @@ const Purchase = () => { }; const checkScrollOnActivation = () => { - const bodyScrollTop = window.scrollY; - + if (responsivePurchaser.current) { if (bodyScrollTop === 0) { responsivePurchaser.current.classList.remove('hide'); @@ -136,7 +137,7 @@ const Purchase = () => { window.removeEventListener('scroll', handleScroll); document.removeEventListener('visibilitychange', checkScrollOnActivation); }; - }, [responsivePurchaser]); + }, [responsivePurchaser, bodyScrollTop]); if (show_popup) { return ; From 32a5f3dec69f2cf56cea7f16519156e47ce14a81 Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Fri, 30 Aug 2024 12:33:41 +0400 Subject: [PATCH 12/18] fix: removed console log --- src/javascript/app/pages/trade/purchase/purchase.jsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index e055c727265..e6f6fd63490 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -106,9 +106,7 @@ const Purchase = () => { const targetElement = responsivePurchaser.current; if (targetElement) { - - console.log(bodyScrollTop); - + if (bodyScrollTop === 0) { targetElement.classList.remove('hide'); } else { From 27316ae6ab8db65f988d7964a7807075e0a1ca57 Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Fri, 30 Aug 2024 15:36:45 +0400 Subject: [PATCH 13/18] fix: added IntersectionObserver --- .../app/pages/trade/purchase/purchase.jsx | 50 ++++++------------- 1 file changed, 16 insertions(+), 34 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index e6f6fd63490..a3fa4d2a738 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -99,43 +99,25 @@ const Purchase = () => { contractsFormContainer.scrollIntoView({ block: 'start', behavior: 'smooth' }); } }; - const bodyScrollTop = window.scrollY; + + const observer = new IntersectionObserver((entries) => { + const targetElement = responsivePurchaser.current; + entries.forEach(entry => { + if (entry.isIntersecting) { + targetElement?.classList?.add('hide'); + } else { + targetElement?.classList?.remove('hide'); + } + }); + }); + const purchaseSection = document.querySelectorAll('.purchase-footer') ; useEffect(() => { - const handleScroll = () => { - const targetElement = responsivePurchaser.current; - - if (targetElement) { - - if (bodyScrollTop === 0) { - targetElement.classList.remove('hide'); - } else { - targetElement.classList.add('hide'); - } - } - }; - - const checkScrollOnActivation = () => { - - if (responsivePurchaser.current) { - if (bodyScrollTop === 0) { - responsivePurchaser.current.classList.remove('hide'); - } else { - responsivePurchaser.current.classList.add('hide'); - } - } - }; - - window.addEventListener('scroll', handleScroll); - document.addEventListener('visibilitychange', checkScrollOnActivation); - checkScrollOnActivation(); - - return () => { - window.removeEventListener('scroll', handleScroll); - document.removeEventListener('visibilitychange', checkScrollOnActivation); - }; - }, [responsivePurchaser, bodyScrollTop]); + if (purchaseSection.length) { + observer.observe(purchaseSection[0]); + } + }, [responsivePurchaser,purchaseSection]); if (show_popup) { return ; From 6288ba9be5c3bc20d75fd572ed76da05eb76f5d7 Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Fri, 30 Aug 2024 16:13:05 +0400 Subject: [PATCH 14/18] fix: hide button on first --- src/javascript/app/pages/trade/purchase/purchase.jsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index a3fa4d2a738..5e865bb6e04 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -103,6 +103,7 @@ const Purchase = () => { const observer = new IntersectionObserver((entries) => { const targetElement = responsivePurchaser.current; entries.forEach(entry => { + if (entry.isIntersecting) { targetElement?.classList?.add('hide'); } else { @@ -111,12 +112,18 @@ const Purchase = () => { }); }); - const purchaseSection = document.querySelectorAll('.purchase-footer') ; + const purchaseSection = document.querySelectorAll('.purchase-footer'); + useEffect(() => { if (purchaseSection.length) { observer.observe(purchaseSection[0]); + } + + return () => { + observer.disconnect(); + }; }, [responsivePurchaser,purchaseSection]); if (show_popup) { @@ -232,7 +239,7 @@ const Purchase = () => { )}
-
+
{data?.show_mid_purchase ? (
Date: Fri, 30 Aug 2024 16:49:16 +0400 Subject: [PATCH 15/18] fix: fixed stake and payout --- src/javascript/app/pages/trade/purchase/purchase.jsx | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/javascript/app/pages/trade/purchase/purchase.jsx b/src/javascript/app/pages/trade/purchase/purchase.jsx index 5e865bb6e04..0508e91ff24 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -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); @@ -269,8 +270,8 @@ const Purchase = () => { > {data?.top_display_text}
- {localize('Payout')} - {data?.top_payout_amount} {displayCurrency(data?.top_payout_amount)} + {amount_type === 'payout' ? localize('Stake') : localize('Payout')} + {amount_type === 'payout' ? data?.top_amount : data?.top_payout_amount } {displayCurrency(data?.top_payout_amount)}
{ > {data?.bottom_display_text}
- {localize('Payout')} - {data?.bottom_payout_amount} {displayCurrency(data?.bottom_payout_amount)} + {amount_type === 'payout' ? localize('Stake') : localize('Payout')} + {amount_type === 'payout' ? data?.top_amount : data?.top_payout_amount } {displayCurrency(data?.top_payout_amount)}
From 4dfb4f44cdd6bb2b20758ebfbd68fe94ebc8e46b Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Mon, 2 Sep 2024 10:47:15 +0400 Subject: [PATCH 16/18] fix: fixed wrong payout --- 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 0508e91ff24..a1580910ea2 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -286,7 +286,7 @@ const Purchase = () => { {data?.bottom_display_text}
{amount_type === 'payout' ? localize('Stake') : localize('Payout')} - {amount_type === 'payout' ? data?.top_amount : data?.top_payout_amount } {displayCurrency(data?.top_payout_amount)} + {amount_type === 'payout' ? data?.bottom_amount : data?.bottom_payout_amount } {displayCurrency(data?.top_payout_amount)}
From 1eff5ceb8480cb764f9cd1ed6004ce145bc37aec Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Mon, 2 Sep 2024 16:21:57 +0400 Subject: [PATCH 17/18] fix: fixed button appearing on purchase section --- 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 a1580910ea2..47714232133 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -104,8 +104,7 @@ const Purchase = () => { const observer = new IntersectionObserver((entries) => { const targetElement = responsivePurchaser.current; entries.forEach(entry => { - - if (entry.isIntersecting) { + if (entry.boundingClientRect.top < window.innerHeight || entry.isIntersecting) { targetElement?.classList?.add('hide'); } else { targetElement?.classList?.remove('hide'); From 11364b420132456ba2190e472c2f84d05c3efe44 Mon Sep 17 00:00:00 2001 From: meenakshi-deriv Date: Tue, 3 Sep 2024 09:29:08 +0400 Subject: [PATCH 18/18] fix: fixed mid purchase --- 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 47714232133..d7e3b07ed88 100644 --- a/src/javascript/app/pages/trade/purchase/purchase.jsx +++ b/src/javascript/app/pages/trade/purchase/purchase.jsx @@ -245,7 +245,7 @@ const Purchase = () => { className={`purchase-button buy ${data?.bottom_purchase_disabled ? 'disabled' : ''}`} onClick={() => { if (!data?.mid_purchase_disabled) { - triggerClick('#purchase_button_mid'); + triggerClick('#purchase_button_middle'); scrollToPurchaseContainer(); } }}