Niloofar / Popup message when partner first time log in to the account

packages/components/src/components/icon/icons.js

@@ -385,6 +385,9 @@ import './common/ic-windows.svg';
 import './common/ic-wip.svg';
 import './common/ic-zoom-in.svg';
 import './common/ic-zoom-out.svg';
+import './common/statement.svg';
+import './common/transfer.svg';
+import './common/withdrawal.svg';
 import './contract/ic-contract-barrier.svg';
 import './contract/ic-contract-buy-price.svg';
 import './contract/ic-contract-commission.svg';

packages/components/stories/icon/icons.js

@@ -392,6 +392,9 @@ export const icons =
         'IcWip',
         'IcZoomIn',
         'IcZoomOut',
+        'Statement',
+        'Transfer',
+        'Withdrawal',
     ],
     'contract': [
         'IcContractBarrier',

packages/core/src/App/Containers/AccountSwitcher/account-switcher.jsx

@@ -653,6 +653,12 @@ const AccountSwitcher = props => {
                             is_eu={props.is_eu}
                             redirectAccount={() => {
                                 // TODO add the redirect here
+                                const has_logged_in_before = localStorage.getItem('new_partner_logged_in');
+                                if (!has_logged_in_before) {
+                                    closeAccountsDialog();
+                                    localStorage.setItem('new_partner_logged_in', true);
+                                    props.toggleNewAffiliateAccountModal();
+                                }
                             }}
                             selected_loginid={props.account_loginid}
                         />
@@ -1005,6 +1011,7 @@ AccountSwitcher.propTypes = {
     switchAccount: PropTypes.func,
     resetVirtualBalance: PropTypes.func,
     toggleAccountsDialog: PropTypes.func,
+    toggleNewAffiliateAccountModal: PropTypes.func,
     togglePositionsDrawer: PropTypes.func,
     toggleSetCurrencyModal: PropTypes.func,
     trading_platform_available_accounts: PropTypes.array,
@@ -1069,6 +1076,7 @@ const account_switcher = withRouter(
         should_show_real_accounts_list: ui.should_show_real_accounts_list,
         toggleShouldShowRealAccountsList: ui.toggleShouldShowRealAccountsList,
         trading_platform_available_accounts: client.trading_platform_available_accounts,
+        toggleNewAffiliateAccountModal: client.toggleNewAffiliateAccountModal,
     }))(AccountSwitcher)
 );
 

packages/core/src/Stores/client-store.js

@@ -130,6 +130,7 @@ export default class ClientStore extends BaseStore {
 
     @observable mt5_trading_servers = [];
     @observable dxtrade_trading_servers = [];
+    @observable is_new_affiliate_account_modal_visible = false;
 
     is_mt5_account_list_updated = false;
 
@@ -972,6 +973,11 @@ export default class ClientStore extends BaseStore {
         this.selectCurrency('');
     }
 
+    @action.bound
+    toggleNewAffiliateAccountModal() {
+        this.is_new_affiliate_account_modal_visible = !this.is_new_affiliate_account_modal_visible;
+    }
+
     @action.bound
     responseAuthorize(response) {
         this.accounts[this.loginid].email = response.authorize.email;

packages/reports/src/Components/new-affiliate-account-modal.jsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Icon, Modal, Text, Button } from '@deriv/components';
+import { localize } from '@deriv/translations';
+import { connect } from 'Stores/connect';
+import PropTypes from 'prop-types';
+import '../sass/app/_common/components/new-affiliate-account-modal.scss';
+
+const affiliateAccountOptions = [
+    { icon: 'withdrawal', title: localize('Withdrawals') },
+    { icon: 'transfer', title: localize(`Inter-account transfers`) },
+    { icon: 'statement', title: localize('View statement') },
+];
+
+const NewAffiliateAccountModal = ({ is_new_affiliate_account_modal_visible, toggleNewAffiliateAccountModal }) => {
+    return (
+        <Modal
+            is_open={is_new_affiliate_account_modal_visible}
+            toggleModal={toggleNewAffiliateAccountModal}
+            width='44rem'
+        >
+            <Modal.Body>
+                <Text as='h2' weight='bold'>
+                    {localize('Here’s what you can do with your new Affiliate account')}
+                </Text>
+
+                <div className='new-affiliate-account-modal__body'>
+                    {affiliateAccountOptions.map(({ icon, title }, idx) => (
+                        <div key={idx} className='new-affiliate-account-modal__option'>
+                            <Icon icon={icon} size={48} />
+                            <Text as='p' size='xs' align='center'>
+                                {title}
+                            </Text>
+                        </div>
+                    ))}
+                </div>
+            </Modal.Body>
+
+            <Modal.Footer className='new-affiliate-account-modal__footer'>
+                <Button
+                    className='new-affiliate-account-modal__button'
+                    text={localize('OK')}
+                    primary
+                    onClick={toggleNewAffiliateAccountModal}
+                />
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+NewAffiliateAccountModal.propTypes = {
+    is_new_affiliate_account_modal_visible: PropTypes.bool,
+    toggleNewAffiliateAccountModal: PropTypes.func,
+};
+
+export default connect(({ client }) => ({
+    is_new_affiliate_account_modal_visible: client.is_new_affiliate_account_modal_visible,
+    toggleNewAffiliateAccountModal: client.toggleNewAffiliateAccountModal,
+}))(NewAffiliateAccountModal);

packages/reports/src/Containers/reports.jsx

@@ -16,6 +16,7 @@ import { getSelectedRoute, getStaticUrl } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { connect } from 'Stores/connect';
 import 'Sass/app/modules/reports.scss';
+import NewAffiliateAccountModal from 'Components/new-affiliate-account-modal';
 
 const Reports = ({
     history,
@@ -121,6 +122,7 @@ const Reports = ({
                     </MobileWrapper>
                 </PageOverlay>
             </div>
+            <NewAffiliateAccountModal />
         </FadeWrapper>
     );
 };