Amina/ 82842/regulators compare modal

packages/appstore/src/components/main-title-bar/regulators-switcher.tsx

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { Text } from '@deriv/components';
+import { Icon, Text } from '@deriv/components';
 import './regulators-switcher.scss';
 import { useStores } from 'Stores/index';
 import { region_availability } from 'Constants/platform-config';
@@ -23,10 +23,14 @@ const SwitcherItem = ({ children, is_selected, ...props }: SwitcherItemProps & H
 
 const RegulatorSwitcher = () => {
     const { tradinghub } = useStores();
+    const { toggleRegulatorsCompareModal } = tradinghub;
 
     return (
         <div className='regulators-switcher'>
             <Text>Regulators:</Text>
+            <div onClick={() => toggleRegulatorsCompareModal()}>
+                <Icon icon='IcInfoOutline' />
+            </div>
             <div className='regulators-switcher__switch'>
                 {region_availability.map(region => {
                     return (

packages/appstore/src/components/modals/modal-manager.tsx

@@ -12,6 +12,7 @@ import {
     MT5TradeModal,
     CFDPasswordManagerModal,
 } from '@deriv/cfd';
+import RegulatorsCompareModal from './regulators-compare-modal';
 import { useStores } from 'Stores';
 import { TOpenAccountTransferMeta } from 'Types';
 
@@ -53,6 +54,7 @@ const ModalManager = () => {
             />
             <CFDPasswordManagerModal context={store} platform={platform} toggleModal={togglePasswordManagerModal} />
             <ResetTradingPasswordModal context={store} />
+            <RegulatorsCompareModal />
         </React.Fragment>
     );
 };

packages/appstore/src/components/modals/regulators-compare-modal/index.ts

@@ -0,0 +1,4 @@
+import RegulatorsCompareModal from './regulators-compare-modal';
+import './regulators-compare-modal.scss';
+
+export default RegulatorsCompareModal;

packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal-content.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Table, Div100vhContainer, Text, ThemedScrollbars } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { isDesktop, isMobile } from '@deriv/shared';
+import { cfd_content, options_content, TRegulatorsContentProps, TRowItem } from 'Constants/regulators-modal-content';
+
+const Row = ({ attribute, content }: TRegulatorsContentProps) => {
+    return (
+        <Table.Row className='regulators-compare-table__table-row'>
+            <Table.Cell fixed>
+                <Text as='p' weight='bold' align='left' color='prominent' size={isMobile() ? 'xxxs' : 'xxs'}>
+                    {attribute}
+                </Text>
+            </Table.Cell>
+            {Object.keys(content).map(rowKey => (
+                <Table.Cell key={rowKey} className='regulators-compare-table__table-row-item'>
+                    {Array.isArray(content[rowKey]) ? (
+                        (content[rowKey] as TRowItem[])?.map((item, index) => (
+                            <Text
+                                key={index}
+                                as='p'
+                                color={item?.options?.color ?? 'prominent'}
+                                weight={item?.options?.weight ?? 'normal'}
+                                align={item?.options?.align ?? 'center'}
+                                size={isMobile() ? 'xxxxs' : 'xxxs'}
+                            >
+                                {item?.text}
+                                {item?.options?.should_show_asterick_at_end && (
+                                    <Text color={'loss-danger'} size={'xxxs'}>
+                                        *
+                                    </Text>
+                                )}
+                            </Text>
+                        ))
+                    ) : (
+                        <Text
+                            as='p'
+                            align={(content[rowKey] as TRowItem)?.options?.align ?? 'center'}
+                            size={isMobile() ? 'xxxxs' : 'xxxs'}
+                            color={(content[rowKey] as TRowItem)?.options?.color ?? 'prominent'}
+                            weight={(content[rowKey] as TRowItem)?.options?.weight ?? 'normal'}
+                        >
+                            {(content[rowKey] as TRowItem)?.text}
+                        </Text>
+                    )}
+                </Table.Cell>
+            ))}
+        </Table.Row>
+    );
+};
+
+const RegulatorsCompareModalContent = () => {
+    return (
+        <Div100vhContainer height_offset='40px' is_bypassed={isDesktop()}>
+            <ThemedScrollbars is_bypassed={isMobile()}>
+                <div className='regulators-compare-table'>
+                    <Table className='regulators-compare-table__table'>
+                        <Table.Header>
+                            <Table.Row className={'regulators-compare-table__table-header'}>
+                                <Table.Head fixed className='regulators-compare-table__table-empty-cell' />
+                                <Table.Head className='regulators-compare-table__table-header-item'>
+                                    {localize('Non-EU regulators')}
+                                </Table.Head>
+                                <Table.Head className='regulators-compare-table__table-header-item'>
+                                    {localize('EU regulators')}
+                                </Table.Head>
+                            </Table.Row>
+                        </Table.Header>
+
+                        <Table.Body>
+                            <div className='regulators-compare-table__table-row-wrapper'>
+                                {cfd_content.map(row => (
+                                    <Row key={row.id} {...row} />
+                                ))}
+                            </div>
+                            <div className='regulators-compare-table__table-row-wrapper'>
+                                {options_content.map(row => (
+                                    <Row key={row.id} {...row} />
+                                ))}
+                            </div>
+                        </Table.Body>
+                    </Table>
+                </div>
+            </ThemedScrollbars>
+        </Div100vhContainer>
+    );
+};
+
+export default RegulatorsCompareModalContent;

packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.scss

@@ -0,0 +1,104 @@
+.regulators-compare-table {
+    display: flex;
+    flex-flow: column nowrap;
+    background: inherit;
+    position: relative;
+
+    &__table-header,
+    &__table-row {
+        grid-template-columns: 1.58fr 2.3fr 2.3fr;
+        border-bottom: none;
+        min-height: 4rem;
+    }
+
+    &__table-row-wrapper {
+        .regulators-compare-table__table-row {
+            &:first-child {
+                background-color: var(--button-primary-light-default);
+            }
+        }
+    }
+
+    &__table-header-item,
+    &__table-row-item {
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .dc-table {
+        margin: 2.5rem 4.9rem;
+        &__header {
+            border: none;
+            height: 4rem;
+        }
+        &__cell:not(.regulators-compare-table__table-empty-cell),
+        &__head:not(.regulators-compare-table__table-empty-cell) {
+            border: 1px solid var(--general-active);
+            margin-left: -1px;
+            margin-bottom: -1px;
+        }
+        &__cell {
+            padding: 1rem 0.8rem;
+        }
+    }
+    @include mobile {
+        .dc-table {
+            height: 100%;
+            margin: 1.6rem 1.7rem;
+            overflow-x: auto;
+            &__cell {
+                &--fixed {
+                    background-color: var(--general-main-1);
+                }
+            }
+        }
+        &__table {
+            &-header,
+            &-row {
+                width: 120vw;
+                grid-template-columns: 0.36fr 1fr 1fr;
+            }
+        }
+
+        .regulators-compare-table {
+            &__table-empty-cell.dc-table {
+                &__cell--fixed {
+                    margin-left: -1px;
+                    border-right: 1px solid var(--general-active);
+                    background-color: var(--general-main-1);
+                }
+            }
+            &__table-row {
+                .dc-table__cell {
+                    background-color: var(--general-main-1);
+                }
+
+                &:first-child {
+                    background-color: var(--button-primary-light-default);
+
+                    .dc-table__cell {
+                        background-color: unset;
+
+                        &--fixed {
+                            background-color: var(--general-main-1);
+
+                            &:before {
+                                content: '';
+                                position: absolute;
+                                top: 0;
+                                bottom: 0;
+                                right: 0;
+                                left: 0;
+                                z-index: -1;
+                                background-color: var(--button-primary-light-default);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+.dc-modal-header--regulator-modal {
+    border-bottom: 1px solid var(--border-normal);
+}

packages/appstore/src/components/modals/regulators-compare-modal/regulators-compare-modal.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { useStores } from 'Stores';
+import { localize } from '@deriv/translations';
+import RegulatorsCompareModalContent from './regulators-compare-modal-content';
+import { Modal, DesktopWrapper, MobileDialog, MobileWrapper, UILoader } from '@deriv/components';
+
+const RegulatorsCompareModal = () => {
+    const { tradinghub, ui } = useStores();
+    const { is_regulators_compare_modal_visible, toggleRegulatorsCompareModal } = tradinghub;
+    const { disableApp, enableApp } = ui;
+    const closeModal = () => {
+        toggleRegulatorsCompareModal();
+    };
+
+    return (
+        <React.Suspense fallback={<UILoader />}>
+            <DesktopWrapper>
+                <Modal
+                    disableApp={disableApp}
+                    enableApp={enableApp}
+                    is_open={is_regulators_compare_modal_visible}
+                    title={localize('Non-EU and EU regulator')}
+                    toggleModal={closeModal}
+                    type='button'
+                    height='792px'
+                    width='792px'
+                >
+                    <RegulatorsCompareModalContent />
+                </Modal>
+            </DesktopWrapper>
+            <MobileWrapper>
+                <MobileDialog
+                    portal_element_id='deriv_app'
+                    title={localize('Non-EU and EU regulator')}
+                    visible={is_regulators_compare_modal_visible}
+                    onClose={closeModal}
+                >
+                    <RegulatorsCompareModalContent />
+                </MobileDialog>
+            </MobileWrapper>
+        </React.Suspense>
+    );
+};
+
+export default observer(RegulatorsCompareModal);