Merge branch 'master' into P2PS-828-refactor-my-profile-page

ameerul-deriv · Jun 27, 2023 · 14f7e56 · 14f7e56
2 parents 590dc5d + 53c7150
commit 14f7e56
Show file tree

Hide file tree

Showing 136 changed files with 2,621 additions and 920 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -251,7 +251,7 @@ jobs:
   build_and_test:
     docker:
       - image: cimg/node:18.16.0
-    resource_class: xlarge
+    resource_class: large
     steps:
       - git_checkout_from_cache
       - npm_install_from_cache

diff --git a/packages/account/src/Components/forms/personal-details-form.jsx b/packages/account/src/Components/forms/personal-details-form.jsx
@@ -221,9 +221,7 @@ const PersonalDetailsForm = ({
                                     <DesktopWrapper>
                                         <Autocomplete
                                             {...field}
-                                            disabled={
-                                                isFieldImmutable('place_of_birth', editable_fields)
-                                            }
+                                            disabled={isFieldImmutable('place_of_birth', editable_fields)}
                                             data-lpignore='true'
                                             autoComplete={autocomplete_value} // prevent chrome autocomplete
                                             type='text'
@@ -241,9 +239,7 @@ const PersonalDetailsForm = ({
                                         <SelectNative
                                             placeholder={localize('Place of birth')}
                                             name={field.name}
-                                            disabled={
-                                                isFieldImmutable('place_of_birth', editable_fields)
-                                            }
+                                            disabled={isFieldImmutable('place_of_birth', editable_fields)}
                                             label={is_mf ? localize('Place of birth*') : localize('Place of birth')}
                                             list_items={residence_list}
                                             value={values.place_of_birth}
@@ -428,7 +424,7 @@ const PersonalDetailsForm = ({
                                         onClick={e => {
                                             setIsTaxResidencePopoverOpen(false);
                                             setIsTinPopoverOpen(true);
-                                            e.stopPropagation();
+                                            if (e.target.tagName !== 'A') e.stopPropagation();
                                         }}
                                     >
                                         <Popover

diff --git a/...s/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx b/...s/poi/poi-confirm-with-example-form-container/poi-confirm-with-example-form-container.tsx
@@ -158,6 +158,7 @@ const PoiConfirmWithExampleFormContainer = ({
                             setFieldTouched={setFieldTouched}
                             editable_fields={rest_state.changeable_fields}
                             is_rendered_for_onfido
+                            warning_items={undefined}
                         />
                         <button
                             type='submit'

diff --git a/...ore/src/assets/svgs/trading-platform/branding/ic-branding-derivez-dashboard.svg b/...ore/src/assets/svgs/trading-platform/branding/ic-branding-derivez-dashboard.svg
diff --git a/...branding/ic-branding-derivx-dashboard.svg → ...randing/ic-branding-dxtrade-dashboard.svg b/...branding/ic-branding-derivx-dashboard.svg → ...randing/ic-branding-dxtrade-dashboard.svg
diff --git a/packages/appstore/src/assets/svgs/trading-platform/index.tsx b/packages/appstore/src/assets/svgs/trading-platform/index.tsx
@@ -5,11 +5,12 @@ import CFDs from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-cfds.svg
 import DBot from 'Assets/svgs/trading-platform/branding/ic-branding-dbot-dashboard.svg';
 import Demo from 'Assets/svgs/trading-platform/ic-brand-demo.svg';
 import Derived from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-derived-dashboard.svg';
+import DerivEz from 'Assets/svgs/trading-platform/branding/ic-branding-derivez-dashboard.svg';
 import DerivGo from 'Assets/svgs/trading-platform/branding/ic-branding-derivgo-dashboard.svg';
 import DerivGoBlack from 'Assets/svgs/trading-platform/ic-appstore-derivgo-black.svg';
 import DerivLogo from 'Assets/svgs/trading-platform/branding/ic-branding-deriv-logo.svg';
 import DerivTradingLogo from 'Assets/svgs/trading-platform/ic-appstore-deriv-trading-logo.svg';
-import DerivX from 'Assets/svgs/trading-platform/branding/ic-branding-derivx-dashboard.svg';
+import DerivX from 'Assets/svgs/trading-platform/branding/ic-branding-dxtrade-dashboard.svg';
 import DropDown from 'Assets/svgs/trading-platform/drop-down.svg';
 import DTrader from 'Assets/svgs/trading-platform/branding/ic-branding-dtrader-dashboard.svg';
 import Financial from 'Assets/svgs/trading-platform/branding/ic-branding-mt5-financial-dashboard.svg';
@@ -26,6 +27,7 @@ export const PlatformIcons = {
     DBot,
     Demo,
     Derived,
+    DerivEz,
     DerivGo,
     DerivGoBlack,
     DerivLogo,

diff --git a/packages/appstore/src/components/cfds-listing/cfds-listing.scss b/packages/appstore/src/components/cfds-listing/cfds-listing.scss
@@ -391,7 +391,6 @@
         background: var(--brand-dark-grey);
         align-items: center;
         text-decoration: none;
-        padding: 0.2rem;
         border-radius: $BORDER_RADIUS;
 
         &-text {
@@ -402,6 +401,9 @@
                 white-space: nowrap;
             }
         }
+        &-icon {
+            margin-left: 0.6rem;
+        }
     }
     &__specs {
         padding: 1.6rem;
@@ -453,6 +455,12 @@
         padding-top: 2rem;
         padding-bottom: 5.8rem;
 
+        &-description {
+            display: flex;
+            justify-content: center;
+            margin-top: 1.4rem;
+        }
+
         &-app {
             display: flex;
             flex-direction: column;
@@ -524,7 +532,7 @@
                 display: flex;
                 flex-direction: column;
                 width: 13.6rem;
-                height: 14rem;
+                height: auto;
                 padding: 0.8rem;
                 align-items: center;
                 border: 1px solid var(--border-disabled);
@@ -1324,11 +1332,18 @@
 
     @for $column_count from 1 through 7 {
         .cfd-accounts-compare-modal__row-with-columns-count-#{$column_count} {
-            grid-template-columns: repeat($column_count, 1fr);
+            @if $column_count != 5 {
+                grid-template-columns: repeat($column_count, 1fr);
+            } @else if $column_count == 5 {
+                grid-template-columns: repeat($column_count - 1, 1fr);
+                @include mobile {
+                    grid-template-columns: repeat($column_count, 1fr);
+                }
+            }
         }
     }
     &__table-header {
-        grid-template-columns: 0.9fr 1.39fr 2.74fr;
+        grid-template-columns: 1fr 2fr;
         &__pre-appstore {
             grid-template-columns: 11rem 36rem 46rem 13.5rem;
         }
@@ -1527,6 +1542,9 @@
                 width: unset;
                 height: unset;
             }
+            &__table-header {
+                width: calc(250vw / 7 * 3);
+            }
         }
         @for $column_count from 1 through 7 {
             .cfd-accounts-compare-modal__row-with-columns-count-#{$column_count} {

diff --git a/packages/appstore/src/components/cfds-listing/index.tsx b/packages/appstore/src/components/cfds-listing/index.tsx
@@ -30,6 +30,7 @@ const CFDsListing = () => {
     } = useStores();
     const {
         available_dxtrade_accounts,
+        available_derivez_accounts,
         combined_cfd_mt5_accounts,
         selected_region,
         has_any_real_account,
@@ -206,16 +207,17 @@ const CFDsListing = () => {
                 <PlatformLoader />
             )}
             {!is_eu_user && !CFDs_restricted_countries && !financial_restricted_countries && (
-                <div className='cfd-full-row'>
-                    <hr className='divider' />
-                </div>
-            )}
-            {available_dxtrade_accounts?.length > 0 && (
-                <div className='cfd-full-row'>
-                    <Text line_height='m' weight='bold' color='prominent'>
-                        {localize('Other CFD Platforms')}
-                    </Text>
-                </div>
+                <React.Fragment>
+                    <div className='cfd-full-row'>
+                        <hr className='divider' />
+                    </div>
+
+                    <div className='cfd-full-row'>
+                        <Text line_height='m' weight='bold' color='prominent'>
+                            {localize('Other CFD Platforms')}
+                        </Text>
+                    </div>
+                </React.Fragment>
             )}
             {is_landing_company_loaded ? (
                 available_dxtrade_accounts?.map((account: AvailableAccount) => {
@@ -279,6 +281,68 @@ const CFDsListing = () => {
             ) : (
                 <PlatformLoader />
             )}
+
+            {/* TODO: remove is_real flag to unblock the flow for derivez real account creation */}
+            {is_landing_company_loaded && !is_real
+                ? available_derivez_accounts?.map((account: AvailableAccount) => {
+                      const existing_accounts = getExistingAccounts(account.platform, account.market_type);
+                      const has_existing_accounts = existing_accounts.length > 0;
+                      return has_existing_accounts ? (
+                          existing_accounts.map((existing_account: TDetailsOfEachMT5Loginid) => (
+                              <TradingAppCard
+                                  action_type='multi-action'
+                                  availability={selected_region}
+                                  clickable_icon
+                                  icon={account.icon}
+                                  sub_title={account.name}
+                                  name={`${formatMoney(
+                                      existing_account.currency,
+                                      existing_account.display_balance,
+                                      true
+                                  )} ${existing_account.currency}`}
+                                  description={existing_account.display_login}
+                                  platform={account.platform}
+                                  key={`trading_app_card_${existing_account.display_login}`}
+                                  onAction={(e?: React.MouseEvent<HTMLButtonElement>) => {
+                                      const button_name = e?.currentTarget?.name;
+                                      if (button_name === 'transfer-btn') {
+                                          toggleAccountTransferModal();
+                                          setSelectedAccount(existing_account);
+                                      } else if (button_name === 'topup-btn') {
+                                          showTopUpModal(existing_account);
+                                          setAppstorePlatform(account.platform);
+                                      } else {
+                                          startTrade(account.platform, existing_account);
+                                      }
+                                  }}
+                              />
+                          ))
+                      ) : (
+                          <TradingAppCard
+                              action_type='get'
+                              availability={selected_region}
+                              clickable_icon
+                              icon={account.icon}
+                              name={account.name}
+                              platform={account.platform}
+                              description={account.description}
+                              onAction={() => {
+                                  if ((has_no_real_account || no_CR_account) && is_real) {
+                                      openDerivRealAccountNeededModal();
+                                  } else {
+                                      setAccountType({
+                                          category: selected_account_type,
+                                          type: account.market_type,
+                                      });
+                                      setAppstorePlatform(account.platform);
+                                      getAccount();
+                                  }
+                              }}
+                              key={`trading_app_card_${account.name}`}
+                          />
+                      );
+                  })
+                : !is_real && <PlatformLoader />}
         </ListingContainer>
     );
 };

diff --git a/packages/appstore/src/components/containers/trading-app-card-actions.tsx b/packages/appstore/src/components/containers/trading-app-card-actions.tsx
@@ -14,6 +14,7 @@ export type Actions = {
     is_external?: boolean;
     new_tab?: boolean;
     is_buttons_disabled?: boolean;
+    is_account_being_created?: boolean;
     is_real?: boolean;
 };
 
@@ -23,13 +24,14 @@ const TradingAppCardActions = ({
     onAction,
     is_external,
     new_tab,
+    is_account_being_created,
     is_buttons_disabled,
     is_real,
 }: Actions) => {
     switch (action_type) {
         case 'get':
             return (
-                <Button primary_light onClick={() => onAction?.()}>
+                <Button disabled={is_account_being_created} primary_light onClick={() => onAction?.()}>
                     {localize('Get')}
                 </Button>
             );

diff --git a/packages/appstore/src/components/containers/trading-app-card.tsx b/packages/appstore/src/components/containers/trading-app-card.tsx
@@ -29,9 +29,14 @@ const TradingAppCard = ({
     selected_mt5_jurisdiction,
     openFailedVerificationModal,
 }: Actions & BrandConfig & AvailableAccount & TDetailsOfEachMT5Loginid) => {
-    const { common, traders_hub } = useStores();
+    const {
+        common,
+        traders_hub,
+        modules: { cfd },
+    } = useStores();
     const { is_eu_user, is_demo_low_risk, content_flag, is_real } = traders_hub;
     const { current_language } = common;
+    const { is_account_being_created } = cfd;
 
     const low_risk_cr_non_eu = content_flag === ContentFlag.LOW_RISK_CR_NON_EU;
 
@@ -54,6 +59,7 @@ const TradingAppCard = ({
             window.open(getStaticUrl(`/dmt5`, {}, false, true));
         else if (platform === CFD_PLATFORMS.MT5 && availability !== 'EU') window.open(getStaticUrl(`/dmt5`));
         else if (platform === CFD_PLATFORMS.DXTRADE) window.open(getStaticUrl(`/derivx`));
+        else if (platform === CFD_PLATFORMS.DERIVEZ) window.open(getStaticUrl(`/derivez`));
         else if (icon === 'Options' && !is_eu_user) window.open(getStaticUrl(`/trade-types/options/`));
         else;
     };
@@ -113,6 +119,7 @@ const TradingAppCard = ({
                         is_external={is_external}
                         new_tab={new_tab}
                         is_buttons_disabled={!!mt5_acc_auth_status}
+                        is_account_being_created={!!is_account_being_created}
                         is_real={is_real}
                     />
                 </div>

diff --git a/packages/appstore/src/components/modals/account-type-modal/account-type-modal.tsx b/packages/appstore/src/components/modals/account-type-modal/account-type-modal.tsx
@@ -109,19 +109,21 @@ const MT5AccountTypeModal = () => {
     const is_swapfree_available = useHasSwapFreeAccount();
 
     const set_account_type = () => {
-        switch (account_type_card) {
-            case 'Derived':
+        const localizedAccountType = localize(account_type_card);
+
+        switch (localizedAccountType) {
+            case localize('Derived'):
                 setAccountType({ category: 'real', type: 'synthetic' });
                 break;
-            case 'Swap-Free':
-                setAccountType({ category: 'real', type: 'all' });
+            case localize('Financial'):
+                setAccountType({ category: 'real', type: 'financial' });
                 break;
-            case 'Financial':
             default:
-                setAccountType({ category: 'real', type: 'financial' });
+                setAccountType({ category: 'real', type: 'all' });
                 break;
         }
     };
+
     return (
         <div>
             <React.Suspense fallback={<UILoader />}>

diff --git a/packages/appstore/src/components/modals/modal-manager.tsx b/packages/appstore/src/components/modals/modal-manager.tsx
@@ -49,6 +49,7 @@ const ModalManager = () => {
         getRealSwapfreeAccountsExistingData,
         current_account,
         dxtrade_companies,
+        derivez_companies,
         mt5_companies,
         topUpVirtual,
     } = modules.cfd;
@@ -137,6 +138,7 @@ const ModalManager = () => {
             <CFDTopUpDemoModal
                 context={store}
                 dxtrade_companies={dxtrade_companies}
+                derivez_companies={derivez_companies}
                 mt5_companies={mt5_companies}
                 current_account={current_account}
                 closeSuccessTopUpModal={closeSuccessTopUpModal}