Merge pull request #49 from shaheer-deriv/shaheer/90804/mt5-jurisdict…

…ion-layout Shaheer/90804/mt5 jurisdiction layout
shaheer-deriv · Apr 13, 2023 · 8e0e6af · 8e0e6af
2 parents e0ecd30 + 034aefd
commit 8e0e6af
Show file tree

Hide file tree

Showing 35 changed files with 1,205 additions and 486 deletions.
diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -1,19 +1,19 @@
 .cfd-jurisdiction-card--synthetic,
 .cfd-jurisdiction-card--financial {
-    border: solid 1px var(--border-normal);
-    border-radius: 0.8rem;
+    border: solid 2px var(--border-normal);
+    border-radius: 1.6rem;
     display: flex;
     justify-content: space-between;
     flex-direction: column;
-    min-height: 36rem;
-    width: 27.6em;
-    position: relative;
-    padding: 1.6rem;
+    min-height: 50rem;
+    width: 26rem;
+    cursor: pointer;
     @include mobile {
-        margin-bottom: 2rem;
+        height: 48rem;
+        width: 100%;
     }
 
-    &:hover {
+    &:not(.selected-card):hover {
         box-shadow: 0 2px 8px 0 var(--shadow-menu);
     }
 
@@ -23,28 +23,29 @@
 
     @include desktop {
         height: auto;
-        margin: 0 0.8rem;
     }
 
     &__wrapper {
-        padding: 0;
-        margin-top: 4.8rem;
+        margin: 4rem 6rem 0;
         display: flex;
         justify-content: center;
-
+        gap: 1.8rem;
         @include mobile {
+            margin: 0;
+            padding: 2rem 4rem;
             flex-direction: column;
             align-items: center;
+            overflow-y: scroll;
+            height: 60%;
         }
     }
     &--selected {
-        border: solid 1px $color-blue;
-        border-radius: 4px;
+        border: solid 2px $color-green;
+        box-shadow: 0 1.2rem 1.8rem 0.8rem var(--shadow-menu);
     }
 
     &__verification-status,
     &__verification-status--pending,
-    &__verification-status--failed,
     &__verification-status--account_added,
     &__verification-status--poi_verified,
     &__verification-status--not_submitted,
@@ -81,8 +82,58 @@
             border-radius: 0.5rem;
         }
     }
+
+    &__card {
+        &-content {
+            &-container {
+                display: flex;
+                flex-direction: column;
+                height: 100%;
+            }
+            &-over-header {
+                background: var(--text-info-blue-bg);
+                height: 4rem;
+                width: 100%;
+                padding: 0.5rem;
+                border-radius: 1.6rem 1.6rem 0 0;
+                &-blank {
+                    height: 4rem;
+                    border-radius: 1.6rem;
+                    @include mobile {
+                        height: 2rem;
+                    }
+                }
+            }
+        }
+        &-flipped-container {
+            gap: 2rem;
+            padding: 4rem 2rem;
+        }
+        &-section-container {
+            display: flex;
+            flex-direction: column;
+            gap: 1.2rem;
+            height: 100%;
+            margin: 0 2rem 2rem;
+        }
+    }
+
+    &__h2-header {
+        min-height: 5rem;
+        margin: 1rem 2rem;
+        @include mobile {
+            margin-bottom: 2rem;
+            min-height: auto;
+        }
+    }
+
     &__footer-wrapper {
+        min-height: 18.6rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
         @include mobile {
+            min-height: auto;
             background-color: var(--general-main-1);
             width: 100%;
             height: 100%;
@@ -91,17 +142,8 @@
             max-height: 20rem;
             z-index: 12;
         }
-        .dc-modal-footer {
-            @include desktop {
-                position: fixed;
-                bottom: 0;
-                width: 100%;
-            }
-        }
-    }
-    &__h2-header {
-        margin: 1.4rem 0 2.4rem;
     }
+
     &__footnote {
         display: flex;
         flex-direction: column;
@@ -122,40 +164,102 @@
     &__jurisdiction-checkbox {
         display: flex;
         justify-content: center;
+        margin-bottom: 2rem;
         @include mobile {
             padding: 0.8rem;
         }
     }
 
     &__over-header {
         background-color: #dfeaff;
-        top: -1rem;
+        top: -2rem;
         left: 1.4rem;
         z-index: 10;
         width: 90%;
         height: 4rem;
         position: absolute;
-        border-radius: 4px;
+        border-radius: $BORDER_RADIUS * 2;
         margin-bottom: 1rem;
-
+        border: 1px solid var(--text-info-blue);
         & > p {
             font-size: 16px;
             text-align: center;
         }
     }
+}
 
-    &__bullet-wrapper {
+.cfd-card {
+    &-section {
+        width: 100%;
         display: flex;
-        margin-bottom: 1rem;
-
-        &--checkmark {
-            margin-right: 1rem;
+        flex-direction: column;
+        gap: 0.8rem;
+        &-divider {
+            width: 100%;
+            border-bottom: 2px solid var(--border-divider);
+        }
+        &-title-indicator {
+            padding: 0.6rem 1.2rem;
+            border-radius: $BORDER_RADIUS;
+            &__red-darker {
+                background: $color-red-8;
+            }
+            &__red-dark {
+                background: $color-red-9;
+            }
+            &__red-light {
+                background: $color-red-10;
+            }
+            &__yellow-dark {
+                background: $color-yellow-1;
+            }
+            &__yellow-light {
+                background: $color-yellow-2;
+            }
+            &__violet-dark {
+                background: $color-violet;
+            }
+            &__brown-dark {
+                background: $color-brown;
+            }
         }
     }
-}
+    &-back-section {
+        &-items-container {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        &-main {
+            height: 100%;
+        }
+
+        &-items-sub-container {
+            display: flex;
+            align-items: flex-start;
+            gap: 1rem;
+        }
 
-.cfd-jurisdiction-card--synthetic {
-    padding: 2.4rem;
+        &-back-button {
+            transition: transform 0.25s linear;
+            &:hover {
+                transform: translateX(-4px);
+            }
+        }
+    }
+    &-clickable-description-link {
+        color: var(--text-red);
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+    &-title-container {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
 }
 
 .cfd-modal--custom-exit {
@@ -1808,9 +1912,8 @@
 }
 
 .dc-modal__container_jurisdiction-modal {
-    min-height: 664px;
     .dc-modal-header {
-        border-bottom: 1px solid var(--general-section-1);
+        border-bottom: 2px solid var(--general-section-1);
     }
 }
 

diff --git a/packages/cfd/src/Components/props.types.ts b/packages/cfd/src/Components/props.types.ts
@@ -68,6 +68,68 @@ export type TTradingPlatformAvailableAccount = {
     sub_account_type: string;
 };
 
+export type TCardFlipStatus = {
+    svg: boolean;
+    bvi: boolean;
+    labuan: boolean;
+    vanuatu: boolean;
+    maltainvest: boolean;
+};
+
+export type TClickableDescription = {
+    type: 'text' | 'link';
+    text: string;
+};
+
+export type TJurisdictionCardSectionTitleIndicators = {
+    type: 'displayText' | 'displayIcons';
+    display_text?: string;
+    display_text_skin_color?: string;
+    display_icons?: Array<string>;
+};
+
+export type TJurisdictionCardSection = {
+    key: string;
+    title: string;
+    title_indicators?: TJurisdictionCardSectionTitleIndicators;
+    description?: string;
+    clickable_description?: Array<TClickableDescription>;
+};
+
+export type TJurisdictionCardItemVerification = Array<
+    'document_number' | 'selfie' | 'identity_document' | 'name_and_address'
+>;
+
+export type TJurisdictionCardItems = {
+    header: string;
+    over_header?: string;
+    synthetic_contents: Array<TJurisdictionCardSection>;
+    financial_contents: Array<TJurisdictionCardSection>;
+    is_over_header_available: boolean;
+    synthetic_verification_docs?: TJurisdictionCardItemVerification;
+    financial_verification_docs?: TJurisdictionCardItemVerification;
+};
+
+export type TJurisdictionVerificationSection = {
+    icon: string;
+    text: string;
+};
+
+export type TJurisdictionVerificationItems = {
+    document_number?: TJurisdictionVerificationSection;
+    selfie?: TJurisdictionVerificationSection;
+    identity_document?: TJurisdictionVerificationSection;
+    name_and_address?: TJurisdictionVerificationSection;
+};
+
+type TJurisdictionVerificationColors = 'yellow' | 'red' | 'green';
+
+export type TJurisdictionVerificationStatus = {
+    icon: string;
+    text: string;
+    color: TJurisdictionVerificationColors;
+};
+
 export type TExistingData = DetailsOfEachMT5Loginid & DetailsOfEachMT5Loginid[];
 
 export type TCFDAccountCard = {