Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Prince/ added responsive purchase buttons #806

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
+235 −81
Open

Prince/ added responsive purchase buttons #806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2e5b4a5
chore: added responsive purchase buttons
prince-deriv Aug 23, 2024
9de750e
fix:spacing issue
prince-deriv Aug 23, 2024
654166c
fix:spacing issue
prince-deriv Aug 23, 2024
025bf64
fix: lint errors
prince-deriv Aug 23, 2024
1739d5b
Merge branch 'master' into purchase-responsive-fix
prince-deriv Sep 4, 2024
75caa72
Merge branch 'master' into purchase-responsive-fix
prince-deriv Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
226 changes: 145 additions & 81 deletions src/javascript/app/pages/trade/purchase/purchase.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -37,7 +37,6 @@ const Purchase = () => {

useEffect(() => {
const new_data = dataManager.getAllPurchases();

setShowPopup(!!new_data?.show_contract_details_popup);

setData(old_data => ({
Expand Down Expand Up @@ -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 <ContractDetails />;
}
Expand All @@ -105,98 +130,137 @@ const Purchase = () => {

if (!data?.show_purchase_results && !data?.error) {
return (
<div className={`quill-purchase-section ${data?.is_purchase_form_disabled && 'disabled'}`}>
{data?.show_mid_purchase ? (
<div className='purchase-box'>
<div className='purchase-header'>
<div className='purchase-icon-box'>
<div className={`contract_heading ${data?.middle_contract_type}`} />
<Text centered bold> {data?.middle_display_text}</Text>
</div>
<div className='purchase-body-box'>
<div className='purchase-amount-box'>
<div className='purchase-amount-info-box'>
<Text>{localize('Stake')}:</Text>
<Text
className={data.middle_amount_classname}
bold
>{data?.middle_amount} {displayCurrency(data?.middle_amount)}
</Text>
<>
<div className={`quill-purchase-section ${data?.is_purchase_form_disabled && 'disabled'}`}>
{data?.show_mid_purchase ? (
<div className='purchase-box'>
<div className='purchase-header'>
<div className='purchase-icon-box'>
<div className={`contract_heading ${data?.middle_contract_type}`} />
<Text centered bold> {data?.middle_display_text}</Text>
</div>
<div className='purchase-body-box'>
<div className='purchase-amount-box'>
<div className='purchase-amount-info-box'>
<Text>{localize('Stake')}:</Text>
<Text
className={data.middle_amount_classname}
bold
>{data?.middle_amount} {displayCurrency(data?.middle_amount)}
</Text>
</div>
<div className='purchase-amount-info-box'>
<Text>{localize('Multiplier')}:</Text>
<Text bold>
{data?.middle_multiplier} {displayCurrency(data?.middle_multiplier)}
</Text>
</div>
</div>
<div className='purchase-amount-info-box'>
<Text>{localize('Multiplier')}:</Text>
<Text bold>
{data?.middle_multiplier} {displayCurrency(data?.middle_multiplier)}
</Text>
<div className='purchase-btn-box'>
{ButtonTooltipWrapper(<Button onClick={() => triggerClick('#purchase_button_middle')} color='purchase' size='lg' label={localize('Purchase')} fullWidth disabled={data?.middle_purchase_disabled} />,data?.middle_description)}
</div>
</div>
<div className='purchase-btn-box'>
{ButtonTooltipWrapper(<Button onClick={() => triggerClick('#purchase_button_middle')} color='purchase' size='lg' label={localize('Purchase')} fullWidth disabled={data?.middle_purchase_disabled} />,data?.middle_description)}
</div>
</div>
<div className='purchase-footer'>
<CaptionText centered>{parseData(data.middle_comment)}</CaptionText>
</div>
</div>
<div className='purchase-footer'>
<CaptionText centered>{parseData(data.middle_comment)}</CaptionText>
</div>
</div>
) : (
<>
{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 (
<Fragment key={`purchase-action-${position}`}>
<div className='purchase-box'>
<div className='purchase-header'>
<div className='purchase-icon-box'>
<div className={`contract_heading ${contract_type}`} />
<Text centered bold> {display_text}</Text>
</div>
return (
<Fragment key={`purchase-action-${position}`}>
<div className='purchase-box'>
<div className='purchase-header'>
<div className='purchase-icon-box'>
<div className={`contract_heading ${contract_type}`} />
<Text centered bold> {display_text}</Text>
</div>

<div className='purchase-body-box'>
<div className='purchase-amount-box'>
<div className='purchase-amount-info-box'>
<Text>{localize('Stake')}:</Text>
<Text
className={amount_classname}
bold
>{amount} {displayCurrency(amount)}
</Text>
<div className='purchase-body-box'>
<div className='purchase-amount-box'>
<div className='purchase-amount-info-box'>
<Text>{localize('Stake')}:</Text>
<Text
className={amount_classname}
bold
>{amount} {displayCurrency(amount)}
</Text>
</div>
<div className='purchase-amount-info-box'>
<Text>{localize('Payout')}:</Text>
<Text
className={payout_amount_classname}
bold
>{payout_amount} {displayCurrency(payout_amount)}
</Text>
</div>
</div>
<div className='purchase-amount-info-box'>
<Text>{localize('Payout')}:</Text>
<Text
className={payout_amount_classname}
bold
>{payout_amount} {displayCurrency(payout_amount)}
</Text>
</div>
</div>

<div className='purchase-btn-box'>
{ButtonTooltipWrapper(<Button onClick={() => triggerClick(`#purchase_button_${position}`)} color={position === 'top' ? 'purchase' : 'sell'} size='lg' label={localize('Purchase')} fullWidth disabled={purchase_disabled} />,description)}
<div className='purchase-btn-box'>
{ButtonTooltipWrapper(<Button onClick={() => triggerClick(`#purchase_button_${position}`)} color={position === 'top' ? 'purchase' : 'sell'} size='lg' label={localize('Purchase')} fullWidth disabled={purchase_disabled} />,description)}
</div>
</div>
</div>
</div>

<div className='purchase-footer'>
<CaptionText centered>{parseData(comment)}</CaptionText>
<div className='purchase-footer'>
<CaptionText centered>{parseData(comment)}</CaptionText>
</div>
</div>
</div>
</Fragment>
);
})}
</>
)}
</div>
</Fragment>
);
})}
</>
)}
</div>
<div className='responsive-purchase-section' ref={responsivePurchaser}>
{data?.show_mid_purchase ? (
<div
className={`purchase-button buy ${ data?.bottom_purchase_disabled ? 'disabled' : ''}`}
onClick={() => !data?.mid_purchase_disabled && triggerClick('#purchase_button_mid') }
>
<span className='label'>{data?.middle_display_text}</span>
<div className='content'>
<span className='text'>{localize('Stake')}</span>
<span className='text'>{data?.middle_amount} {displayCurrency(data?.middle_amount)}</span>
</div>
</div>
) : (
<>
<div
className={`purchase-button buy ${ data?.top_purchase_disabled ? 'disabled' : ''}`}
onClick={() => !data?.top_purchase_disabled && triggerClick('#purchase_button_top') }
>
<span className='label'>{data?.top_display_text}</span>
<div className='content'>
<span className='text'>{localize('Payout')}</span>
<span className='text'>{data?.top_payout_amount} {displayCurrency(data?.top_payout_amount)}</span>
</div>
</div>
<div
className={`purchase-button sell inverse ${ data?.bottom_purchase_disabled ? 'disabled' : ''}`}
onClick={() => !data?.bottom_purchase_disabled && triggerClick('#purchase_button_bottom') }
>
<span className='label'>{data?.bottom_display_text}</span>
<div className='content'>
<span className='text'>{localize('Payout')}</span>
<span className='text'>{data?.bottom_payout_amount} {displayCurrency(data?.bottom_payout_amount)}</span>
</div>
</div>
</>
)}
</div>
</>
);
}

Expand Down
90 changes: 90 additions & 0 deletions src/sass/_common/reskin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Loading