Skip to content

Commit

Permalink
Nijil / WALL-4502 / Wallet upgrade banner UI fixes for Tablet screen …
Browse files Browse the repository at this point in the history 
…sizes (#16199)

* fix: wallet upgrade banner ui fixes for tablet view

* fix: wallet upgrade banner illustration fixes for tablet view

* fix: make wallet upgrade modal scrollable in landscape view
  • Loading branch information
@nijil-deriv
nijil-deriv committed Aug 5, 2024
1 parent 08bde84 commit a120f83
Show file tree
Hide file tree
Showing 9 changed files with 176 additions and 71 deletions.
12 changes: 8 additions & 4 deletions packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,15 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { mockStore, StoreProvider } from '@deriv/stores';
import { useDevice } from '@deriv-com/ui';
import WalletsBannerUpgrade from '../wallets-banner-upgrade';
import WalletsBannerUpgrading from '../wallets-banner-upgrading';

jest.mock('@deriv-com/ui', () => ({
...jest.requireActual('@deriv-com/ui'),
useDevice: jest.fn(() => ({ isDesktop: true })),
}));

describe('<WalletsBanner />', () => {
const mockRootStore = mockStore({
traders_hub: {
Expand All @@ -25,7 +31,6 @@ describe('<WalletsBanner />', () => {
});

it('Should render image properly for desktop', () => {
mockRootStore.ui.is_mobile = false;
render(<WalletsBannerUpgrade is_upgrading={false} />, {
wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
});
Expand All @@ -37,7 +42,7 @@ describe('<WalletsBanner />', () => {
});

it('Should render image properly for mobile', () => {
mockRootStore.ui.is_mobile = true;
(useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true });
render(<WalletsBannerUpgrade is_upgrading={false} />, {
wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
});
Expand Down Expand Up @@ -81,7 +86,6 @@ describe('<WalletsBanner />', () => {
});

it('Should render image properly for desktop', () => {
mockRootStore.ui.is_mobile = false;
render(<WalletsBannerUpgrading />, {
wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
});
Expand All @@ -93,7 +97,7 @@ describe('<WalletsBanner />', () => {
});

it('Should render image properly for mobile', () => {
mockRootStore.ui.is_mobile = true;
(useDevice as jest.Mock).mockReturnValueOnce({ isMobile: true });
render(<WalletsBannerUpgrading />, {
wrapper: ({ children }) => <StoreProvider store={mockRootStore}>{children}</StoreProvider>,
});
Expand Down
38 changes: 26 additions & 12 deletions packages/appstore/src/components/banners/wallets-banner/wallets-banner-unsuccessful.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Analytics, TEvents } from '@deriv-com/analytics';
import { Icon, Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize } from '@deriv/translations';
import { useDevice } from '@deriv-com/ui';

const trackAnalyticsEvent = (
action: TEvents['ce_tradershub_banner']['action'],
Expand All @@ -18,10 +19,28 @@ const trackAnalyticsEvent = (
};

const WalletsBannerUnsuccessful = observer(() => {
const { traders_hub, ui } = useStore();
const { is_desktop } = ui;
const { traders_hub } = useStore();
const { isDesktop, isMobile, isTablet } = useDevice();
const { is_demo, toggleWalletsUpgrade } = traders_hub;
const account_mode = is_demo ? 'demo' : 'real';
let titleFontSize, descriptionFontSize, iconHeight, iconWidth;

if (isTablet) {
titleFontSize = 's';
descriptionFontSize = 'xxs';
iconHeight = 112;
iconWidth = 192;
} else if (isDesktop) {
titleFontSize = 'sm';
descriptionFontSize = 'xs';
iconHeight = 142;
iconWidth = 242;
} else {
titleFontSize = 'xs';
descriptionFontSize = 'xxxs';
iconHeight = 112;
iconWidth = 192;
}

React.useEffect(() => {
trackAnalyticsEvent('open', account_mode);
Expand All @@ -38,25 +57,20 @@ const WalletsBannerUnsuccessful = observer(() => {
<Localize
i18n_default_text='<0>Setup unsuccessful</0>'
components={[
<Text
key={0}
line_height={is_desktop ? 'm' : 's'}
size={is_desktop ? 'sm' : 'xs'}
weight='bold'
/>,
<Text key={0} line_height={!isMobile ? 'm' : 's'} size={titleFontSize} weight='bold' />,
]}
/>
<div>
<Localize
i18n_default_text='<0>We’re unable to upgrade you to Wallets at this time and are working to get this fixed as soon as we can. Please </0><1>try again</1><0>.</0>'
components={[
<Text key={0} line_height='s' size={is_desktop ? 'xs' : 'xxxs'} />,
<Text key={0} line_height='s' size={descriptionFontSize} />,
<Text
key={1}
className='wallets-banner-unsuccessful__clickable-text'
color='red'
line_height='s'
size={is_desktop ? 'xs' : 'xxxs'}
size={descriptionFontSize}
weight='bold'
onClick={onWalletsUpgradeHandler}
/>,
Expand All @@ -66,8 +80,8 @@ const WalletsBannerUnsuccessful = observer(() => {
</div>
<Icon
icon='IcAppstoreWalletsUpgradeUnsuccessful'
width={is_desktop ? 272 : 192}
height='100%'
width={iconWidth}
height={iconHeight}
className='wallets-banner-unsuccessful__image'
data_testid='dt_wallets_upgrade_unsuccessful'
/>
Expand Down
32 changes: 24 additions & 8 deletions packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrade.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Analytics, TEvents } from '@deriv-com/analytics';
import { Button, Icon, Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize, localize } from '@deriv/translations';
import { useDevice } from '@deriv-com/ui';

const trackAnalyticsEvent = (
action: TEvents['ce_tradershub_banner']['action'],
Expand All @@ -22,10 +23,25 @@ type TProps = {
};

const WalletsBannerUpgrade: React.FC<TProps> = observer(({ is_upgrading }) => {
const { traders_hub, ui } = useStore();
const { is_desktop, is_mobile } = ui;
const { traders_hub } = useStore();
const { isDesktop, isMobile, isTablet } = useDevice();
const { is_demo, toggleWalletsUpgrade } = traders_hub;
const account_mode = is_demo ? 'demo' : 'real';
let titleFontSize, iconHeight, iconWidth;

if (isTablet) {
titleFontSize = 'xsm';
iconHeight = 98;
iconWidth = 234;
} else if (isDesktop) {
titleFontSize = 'm';
iconHeight = 154;
iconWidth = 368;
} else {
titleFontSize = 'xs';
iconHeight = 138;
iconWidth = 156;
}

React.useEffect(() => {
trackAnalyticsEvent('open', account_mode);
Expand All @@ -43,8 +59,8 @@ const WalletsBannerUpgrade: React.FC<TProps> = observer(({ is_upgrading }) => {
<Localize
i18n_default_text='<0>Wallets</0><1> — A smarter way to manage your funds</1>'
components={[
<Text key={0} weight='bold' size={is_desktop ? 'm' : 'xs'} />,
<Text key={1} size={is_desktop ? 'm' : 'xs'} />,
<Text key={0} weight='bold' size={titleFontSize} />,
<Text key={1} size={titleFontSize} />,
]}
/>
</div>
Expand All @@ -58,11 +74,11 @@ const WalletsBannerUpgrade: React.FC<TProps> = observer(({ is_upgrading }) => {
/>
</div>
<Icon
icon={`IcAppstoreWalletsUpgradeCoins${is_desktop ? 'Horizontal' : ''}`}
width={is_desktop ? 448 : 220}
height={is_desktop ? '100%' : 220}
icon={`IcAppstoreWalletsUpgradeCoins${isMobile ? '' : 'Horizontal'}`}
width={iconWidth}
height={iconHeight}
className='wallets-banner-upgrade__image'
data_testid={`dt_wallets_upgrade_coins${is_mobile ? '' : '_horizontal'}`}
data_testid={`dt_wallets_upgrade_coins${isMobile ? '' : '_horizontal'}`}
/>
</div>
);
Expand Down
40 changes: 27 additions & 13 deletions packages/appstore/src/components/banners/wallets-banner/wallets-banner-upgrading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,30 @@ import { Analytics } from '@deriv-com/analytics';
import { Icon, Text } from '@deriv/components';
import { observer, useStore } from '@deriv/stores';
import { Localize } from '@deriv/translations';
import { useDevice } from '@deriv-com/ui';

const WalletsBannerUpgrading = observer(() => {
const { traders_hub, ui } = useStore();
const { traders_hub } = useStore();
const { is_demo } = traders_hub;
const { is_desktop, is_mobile } = ui;
const { isDesktop, isMobile, isTablet } = useDevice();
let titleFontSize, descriptionFontSize, iconHeight, iconWidth;

if (isTablet) {
titleFontSize = 's';
descriptionFontSize = 'xxs';
iconHeight = 98;
iconWidth = 234;
} else if (isDesktop) {
titleFontSize = 'sm';
descriptionFontSize = 'xs';
iconHeight = 154;
iconWidth = 368;
} else {
titleFontSize = 'xs';
descriptionFontSize = 'xxxs';
iconHeight = 138;
iconWidth = 156;
}

React.useEffect(() => {
Analytics.trackEvent('ce_tradershub_banner', {
Expand All @@ -30,12 +49,7 @@ const WalletsBannerUpgrading = observer(() => {
<Localize
i18n_default_text="<0>We're setting up your Wallets</0>"
components={[
<Text
key={0}
line_height={is_desktop ? 'm' : 's'}
size={is_desktop ? 'sm' : 'xs'}
weight='bold'
/>,
<Text key={0} line_height={!isMobile ? 'm' : 's'} size={titleFontSize} weight='bold' />,
]}
/>
<Localize
Expand All @@ -45,17 +59,17 @@ const WalletsBannerUpgrading = observer(() => {
className='wallets-banner-upgrading__description'
key={0}
line_height='s'
size={is_desktop ? 'xs' : 'xxxs'}
size={descriptionFontSize}
/>,
]}
/>
</div>
<Icon
icon={`IcAppstoreWalletsUpgradeCoins${is_desktop ? 'Horizontal' : ''}`}
width={is_desktop ? 448 : 220}
height={is_desktop ? '100%' : 220}
icon={`IcAppstoreWalletsUpgradeCoins${isMobile ? '' : 'Horizontal'}`}
width={iconWidth}
height={iconHeight}
className='wallets-banner-upgrading__image'
data_testid={`dt_wallets_upgrade_coins${is_mobile ? '' : '_horizontal'}`}
data_testid={`dt_wallets_upgrade_coins${isMobile ? '' : '_horizontal'}`}
/>
</div>
);
Expand Down
Loading

0 comments on commit a120f83

Please sign in to comment.