Skip to content

Commit

Permalink
WALL-2700/chore: fix jurisdiction tnc section and add proper terms an…
Browse files Browse the repository at this point in the history
…d condition links (binary-com#11643)

* chore: fix jurisdiction tnc section and add proper terms and condition links

* fix: style repetition

* fix: sonarcloud and komen
  • Loading branch information
thisyahlen-deriv committed Nov 22, 2023
1 parent 49ef74f commit bc09647
Show file tree
Hide file tree
Showing 8 changed files with 134 additions and 47 deletions.
14 changes: 12 additions & 2 deletions packages/wallets/src/features/cfd/constants.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import CTraderIcon from '../../public/images/ctrader.svg';
import DerivXIcon from '../../public/images/derivx.svg';
import DerivedMT5Icon from '../../public/images/mt5-derived.svg';
import FinancialMT5Icon from '../../public/images/mt5-financial.svg';
import SwapFreeMT5Icon from '../../public/images/mt5-swap-free.svg';
import DerivXIcon from '../../public/images/derivx.svg';
import CTraderIcon from '../../public/images/ctrader.svg';

export const MarketTypeDetails = {
all: {
Expand Down Expand Up @@ -41,3 +41,13 @@ export const PlatformDetails = {
title: 'Deriv MT5',
},
};

export const companyNamesAndUrls = {
bvi: { name: 'Deriv (BVI) Ltd', tncUrl: 'tnc/deriv-(bvi)-ltd.pdf' },
labuan: { name: 'Deriv (FX) Ltd', tncUrl: 'tnc/deriv-(fx)-ltd.pdf' },
maltainvest: {
name: 'Deriv Investments (Europe) Limited',
tncUrl: 'tnc/deriv-investments-(europe)-limited.pdf',
},
vanuatu: { name: 'Deriv (V) Ltd', tncUrl: 'tnc/general-terms.pdf' },
} as const;
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const JurisdictionFootNoteTitle: FC<TJurisdictionFootNoteTitle> = ({ marketType,
}

return (
<WalletText size='sm' weight='bold'>
<WalletText align='center' size='sm' weight='bold'>
{footnoteText}
</WalletText>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,25 +54,4 @@
padding: 2rem 0;
}
}

&__tnc {
display: flex;
flex-direction: column;
gap: 1.2rem;
height: 8%;
justify-content: center;
margin-top: 2rem;

&-checkbox {
align-items: center;
display: flex;
gap: 0.4rem;
justify-content: center;

&-input,
&-label {
cursor: pointer;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { THooks } from '../../../../types';
import { useDynamicLeverageModalState } from '../../components/DynamicLeverageContext';
import { MarketTypeDetails } from '../../constants';
import { JurisdictionCard } from './JurisdictionCard';
import { JurisdictionFootNoteTitle } from './JurisdictionFootNoteTitle';
import { JurisdictionTncSection } from './JurisdictionTncSection';
import './JurisdictionScreen.scss';

type TJurisdictionScreenProps = {
Expand Down Expand Up @@ -70,28 +70,11 @@ const JurisdictionScreen: FC<TJurisdictionScreenProps> = ({
/>
))}
</div>

<div className='wallets-jurisdiction-screen__tnc'>
{selectedJurisdiction && (
<JurisdictionFootNoteTitle marketType={marketType} selectedJurisdiction={selectedJurisdiction} />
)}
{selectedJurisdiction && selectedJurisdiction !== 'svg' && (
<div className='wallets-jurisdiction-screen__tnc-checkbox'>
<input
checked={isCheckBoxChecked}
className='wallets-jurisdiction-screen__tnc-checkbox-input'
id='tnc-checkbox'
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setIsCheckBoxChecked(event.target.checked)
}
type='checkbox'
/>
<label className='wallets-jurisdiction-screen__tnc-checkbox-label' htmlFor='tnc-checkbox'>
<WalletText>I confirm and accept Deriv (V) Ltd&lsquo;s Terms and Conditions</WalletText>
</label>
</div>
)}
</div>
<JurisdictionTncSection
isCheckBoxChecked={isCheckBoxChecked}
selectedJurisdiction={selectedJurisdiction}
setIsCheckBoxChecked={setIsCheckBoxChecked}
/>
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.wallets-jurisdiction-tnc {
display: flex;
flex-direction: column;
gap: 1.2rem;
justify-content: center;
margin-top: 3rem;

@include mobile {
position: sticky;
bottom: 0;
background: var(--system-light-8-primary-background, #fff);
justify-content: center;
padding: 1.5rem 2rem 1rem;
width: 100vw;
}

&-checkbox {
align-items: center;
display: flex;
gap: 0.8rem;
justify-content: center;

&__link {
color: var(--brand-coral, #ff444f);
}

&__link,
&-input,
&-label {
cursor: pointer;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import React from 'react';
import { WalletText } from '../../../../../components/Base';
import { useModal } from '../../../../../components/ModalProvider';
import { getStaticUrl } from '../../../../../helpers/urls';
import useDevice from '../../../../../hooks/useDevice';
import { THooks } from '../../../../../types';
import { companyNamesAndUrls } from '../../../constants';
import { JurisdictionFootNoteTitle } from '../JurisdictionFootNoteTitle';
import './JurisdictionTncSection.scss';

type TProps = {
isCheckBoxChecked: boolean;
selectedJurisdiction: THooks.AvailableMT5Accounts['shortcode'];
setIsCheckBoxChecked: React.Dispatch<React.SetStateAction<boolean>>;
};

const JurisdictionTncSection: React.FC<TProps> = ({
isCheckBoxChecked,
selectedJurisdiction,
setIsCheckBoxChecked,
}) => {
const { isMobile } = useDevice();
const { getModalState } = useModal();
const marketType = getModalState('marketType') || 'all';
return (
<div className='wallets-jurisdiction-tnc'>
{selectedJurisdiction && (
<JurisdictionFootNoteTitle marketType={marketType} selectedJurisdiction={selectedJurisdiction} />
)}
{selectedJurisdiction && selectedJurisdiction !== 'svg' && (
<div className='wallets-jurisdiction-tnc-checkbox'>
<input
checked={isCheckBoxChecked}
className='wallets-jurisdiction-tnc-checkbox-input'
id='tnc-checkbox'
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setIsCheckBoxChecked(event.target.checked)
}
type='checkbox'
/>
<label className='wallets-jurisdiction-tnc-checkbox-label' htmlFor='tnc-checkbox'>
<WalletText size={isMobile ? 'sm' : 'md'}>
I confirm and accept Deriv (V) Ltd&lsquo;s{' '}
<a
className='wallets-jurisdiction-tnc-checkbox__link'
onClick={() => {
window.open(
getStaticUrl(
companyNamesAndUrls[
selectedJurisdiction as keyof typeof companyNamesAndUrls
].tncUrl
),
'_blank'
);
}}
// Reason: To fix sonarcloud issue
onKeyDown={(event: React.KeyboardEvent<HTMLAnchorElement>) => {
if (event.key === 'Enter') {
window.open(
getStaticUrl(
companyNamesAndUrls[
selectedJurisdiction as keyof typeof companyNamesAndUrls
].tncUrl
),
'_blank'
);
}
}}
>
Terms and Conditions
</a>
</WalletText>
</label>
</div>
)}
</div>
);
};

export default JurisdictionTncSection;
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as JurisdictionTncSection } from './JurisdictionTncSection';
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { default as JurisdictionScreen } from './JurisdictionScreen';
export * from './JurisdictionTncSection';

0 comments on commit bc09647

Please sign in to comment.