Skip to content

Commit

Permalink
Merge pull request #17 from amina-deriv/amina/feature/90115/update_ju…
Browse files Browse the repository at this point in the history 
…risdiction

Amina/feature/90115/update jurisdiction
  • Loading branch information
@shaheer-deriv
shaheer-deriv committed Apr 25, 2023
2 parents 9658700 + 22dd454 commit ee7b488
Show file tree
Hide file tree
Showing 42 changed files with 834 additions and 538 deletions.
157 changes: 90 additions & 67 deletions packages/appstore/src/components/cfds-listing/cfds-listing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,10 @@
display: flex;
justify-content: space-between;
flex-direction: column;
min-height: 50rem;
width: 26rem;
height: 100%;
width: 100%;
cursor: pointer;
@include mobile {
height: 48rem;
width: 100%;
}
transition: all 0.1s ease-in;

&:not(.selected-card):hover {
box-shadow: 0 2px 8px 0 var(--shadow-menu);
Expand All @@ -21,18 +18,15 @@
border: solid 1px var(--border-disabled);
}

@include desktop {
height: auto;
}

&__wrapper {
margin: 4rem 6rem 0;
margin: 4rem 6rem 2rem;
display: flex;
justify-content: center;
gap: 1.8rem;
gap: 2rem;
@include mobile {
margin: 0;
padding: 2rem 4rem;
padding: 4rem;
gap: 4rem;
flex-direction: column;
align-items: center;
overflow-y: scroll;
Expand All @@ -44,45 +38,6 @@
box-shadow: 0 1.2rem 1.8rem 0.8rem var(--shadow-menu);
}

&__verification-status,
&__verification-status--pending,
&__verification-status--account_added,
&__verification-status--poi_verified,
&__verification-status--not_submitted,
&__verification-status--hint {
width: 100%;
min-height: 2.4rem;
display: flex;

* {
margin: auto;
}

&--pending {
background-color: $color-yellow;
border-radius: 0.5rem;
}

&--poi_verified {
background: var(--text-status-info-blue);
border-radius: 0.5rem;
}
&--account_added {
background-color: $color-green-1;
border-radius: 0.5rem;
}

&--failed {
background-color: $color-red-1;
border-radius: 0.5rem;
}
&--not_submitted {
background-color: var(--general-section-1);
padding: 0.3rem;
border-radius: 0.5rem;
}
}

&__card {
&-content {
&-container {
Expand All @@ -95,15 +50,30 @@
height: 4rem;
width: 100%;
padding: 0.5rem;
border-radius: 1.6rem 1.6rem 0 0;
border-radius: 1.4rem 1.4rem 0 0;
&-blank {
height: 4rem;
border-radius: 1.6rem;
border-radius: 1.4rem;
@include mobile {
height: 2rem;
}
}
}
&-footer {
position: absolute;
bottom: 0;
width: 100%;
&-gradient {
height: 12rem;
background: linear-gradient(transparent, var(--general-main-2));
}
&-text {
background: var(--brand-secondary);
height: 4rem;
padding: 1rem;
border-radius: 0 0 1.4rem 1.4rem;
}
}
}
&-flipped-container {
gap: 2rem;
Expand All @@ -128,7 +98,6 @@
}

&__footer-wrapper {
min-height: 18.6rem;
display: flex;
flex-direction: column;
justify-content: space-between;
Expand All @@ -144,18 +113,22 @@
}
}

&__footnote {
&__footnotes-container {
display: flex;
flex-direction: column;
justify-content: center;
margin: 1.6rem 2.4rem;
min-height: 6rem;
gap: 2rem;
margin: 2rem;
}

&__footnote {
display: flex;
justify-content: center;
@include mobile {
margin: unset;
padding: 1.6rem 0.8rem;
box-shadow: 0px -4px 4px rgba(0, 0, 0, 0.08);
}

&--pending {
color: $color-yellow;
}
Expand All @@ -164,7 +137,6 @@
&__jurisdiction-checkbox {
display: flex;
justify-content: center;
margin-bottom: 2rem;
@include mobile {
padding: 0.8rem;
}
Expand All @@ -189,6 +161,39 @@
}

.cfd-card {
&-perspective {
perspective: 100rem;
@include mobile {
width: 100%;
}
}
&-container {
transform-style: preserve-3d;
transition: all 0.25s ease-in;
width: 28rem;
&.synthetic {
min-height: 46rem;
}
&.financial {
min-height: 50rem;
}
@include mobile {
height: 48rem;
width: 100%;
}
}
&-flipped {
transform: rotateY(180deg);
}
&-front,
&-back {
position: absolute;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
&-back {
transform: rotateY(180deg);
}
&-section {
width: 100%;
display: flex;
Expand All @@ -201,6 +206,10 @@
&-title-indicator {
padding: 0.6rem 1.2rem;
border-radius: $BORDER_RADIUS;
&-icon-container {
display: flex;
gap: 0.5rem;
}
&__red-darker {
background: $color-red-8;
}
Expand All @@ -223,30 +232,38 @@
background: $color-brown;
}
}
&-description-height {
@include desktop {
&-assets {
min-height: 3.4rem;
}
&-verifications,
&-regulator {
min-height: 4rem;
}
}
}
}
&-back-section {
&-items-container {
display: flex;
flex-direction: column;
gap: 1rem;
}

&-main {
height: 100%;
gap: 1.2rem;
}

&-items-sub-container {
display: flex;
align-items: flex-start;
gap: 1rem;
}

&-back-button {
transition: transform 0.25s linear;
&:hover {
transform: translateX(-4px);
}
}
&-text-icon-aligned {
margin-top: -0.3rem;
}
}
&-clickable-description-link {
color: var(--text-red);
Expand All @@ -260,6 +277,12 @@
justify-content: space-between;
align-items: center;
}
&-disabled {
pointer-events: none;
&-flat {
border: solid 1px var(--border-normal);
}
}
}

.cfd-modal--custom-exit {
Expand Down
14 changes: 10 additions & 4 deletions packages/cfd/src/Components/props.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ export type TJurisdictionCardSectionTitleIndicators = {
type: 'displayText' | 'displayIcons';
display_text?: string;
display_text_skin_color?: string;
display_icons?: Array<string>;
};

export type TJurisdictionCardSection = {
Expand All @@ -96,9 +95,15 @@ export type TJurisdictionCardSection = {
clickable_description?: Array<TClickableDescription>;
};

export type TJurisdictionCardItemVerification = Array<
'document_number' | 'selfie' | 'identity_document' | 'name_and_address'
>;
export type TJurisdictionCardVerificationStatus = 'Pending' | 'Verified' | 'Failed' | 'Default';

export type TJurisdictionCardItemVerificationItem =
| 'document_number'
| 'selfie'
| 'identity_document'
| 'name_and_address'
| 'not_applicable';
export type TJurisdictionCardItemVerification = Array<TJurisdictionCardItemVerificationItem>;

export type TJurisdictionCardItems = {
header: string;
Expand All @@ -120,6 +125,7 @@ export type TJurisdictionVerificationItems = {
selfie?: TJurisdictionVerificationSection;
identity_document?: TJurisdictionVerificationSection;
name_and_address?: TJurisdictionVerificationSection;
not_applicable?: TJurisdictionVerificationSection;
};

type TJurisdictionVerificationColors = 'yellow' | 'red' | 'green';
Expand Down
2 changes: 2 additions & 0 deletions packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-bvi-contents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const jurisdictionBviContents = (): TJurisdictionCardItems => ({
{
key: 'verifications',
title: `${localize('Verifications')}`,
title_indicators: { type: 'displayIcons' },
clickable_description: [
{ type: 'link', text: `${localize('Learn more')}` },
{ type: 'text', text: `${localize('about verifications needed.')}` },
Expand Down Expand Up @@ -72,6 +73,7 @@ export const jurisdictionBviContents = (): TJurisdictionCardItems => ({
{
key: 'verifications',
title: `${localize('Verifications')}`,
title_indicators: { type: 'displayIcons' },
clickable_description: [
{ type: 'link', text: `${localize('Learn more')}` },
{ type: 'text', text: `${localize('about verifications needed.')}` },
Expand Down
2 changes: 2 additions & 0 deletions packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-labuan-contents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const jurisdictionLabuanContents = (): TJurisdictionCardItems => ({
{
key: 'verifications',
title: `${localize('Verifications')}`,
title_indicators: { type: 'displayIcons' },
clickable_description: [
{ type: 'link', text: `${localize('Learn more')}` },
{ type: 'text', text: `${localize('about verifications needed.')}` },
Expand Down Expand Up @@ -58,6 +59,7 @@ export const jurisdictionLabuanContents = (): TJurisdictionCardItems => ({
{
key: 'verifications',
title: `${localize('Verifications')}`,
title_indicators: { type: 'displayIcons' },
clickable_description: [
{ type: 'link', text: `${localize('Learn more')}` },
{ type: 'text', text: `${localize('about verifications needed.')}` },
Expand Down
4 changes: 4 additions & 0 deletions packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-svg-contents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({
{
key: 'verifications',
title: `${localize('Verifications')}`,
title_indicators: { type: 'displayIcons' },
description: `${localize(
'You will need to submit proof of identity and address once you reach certain thresholds.'
)}`,
Expand Down Expand Up @@ -69,6 +70,7 @@ export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({
{
key: 'verifications',
title: `${localize('Verifications')}`,
title_indicators: { type: 'displayIcons' },
description: `${localize(
'You will need to submit proof of identity and address once you reach certain thresholds.'
)}`,
Expand All @@ -79,4 +81,6 @@ export const jurisdictionSvgContents = (): TJurisdictionCardItems => ({
description: `${localize('Deriv (SVG) LLC (company no. 273 LLC 2020)')}`,
},
],
synthetic_verification_docs: ['not_applicable'],
financial_verification_docs: ['not_applicable'],
});
2 changes: 2 additions & 0 deletions packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-vanuatu-contents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ export const jurisdictionVanuatuContents = (): TJurisdictionCardItems => ({
{
key: 'verifications',
title: `${localize('Verifications')}`,
title_indicators: { type: 'displayIcons' },
clickable_description: [
{ type: 'link', text: `${localize('Learn more')}` },
{ type: 'text', text: `${localize('about verifications needed.')}` },
Expand Down Expand Up @@ -70,6 +71,7 @@ export const jurisdictionVanuatuContents = (): TJurisdictionCardItems => ({
{
key: 'verifications',
title: `${localize('Verifications')}`,
title_indicators: { type: 'displayIcons' },
clickable_description: [
{ type: 'link', text: `${localize('Learn more')}` },
{ type: 'text', text: `${localize('about verifications needed.')}` },
Expand Down
4 changes: 4 additions & 0 deletions packages/cfd/src/Constants/jurisdiction-contents/jurisdiction-verification-contents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,10 @@ export const jurisdictionVerificationContents = (): TJurisdictionVerificationCon
'A recent utility bill (electricity, water or gas) or recent bank statement or government-issued letter with your name and address.'
)}`,
},
not_applicable: {
icon: 'IcNotApplicableVerification',
text: '',
},
},
status_references: [
{
Expand Down
1 change: 1 addition & 0 deletions packages/cfd/src/Constants/jurisdiction-contents/jurisdiction_maltainvest_contents.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ export const jurisdictionMaltainvestContents = (): TJurisdictionCardItems => ({
{
key: 'verifications',
title: `${localize('Verifications')}`,
title_indicators: { type: 'displayIcons' },
clickable_description: [
{ type: 'link', text: `${localize('Learn more')}` },
{ type: 'text', text: `${localize('about verifications needed.')}` },
Expand Down
Loading

0 comments on commit ee7b488

Please sign in to comment.