Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nijil / WALL-4502 / Wallet upgrade banner UI fixes for Tablet screen sizes #16199

Merged
merged 6 commits into from
Aug 5, 2024
Merged

Nijil / WALL-4502 / Wallet upgrade banner UI fixes for Tablet screen sizes #16199

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7b8c167
fix: wallet upgrade banner ui fixes for tablet view
nijil-deriv Jul 25, 2024
cc3b17c
fix: wallet upgrade banner illustration fixes for tablet view
nijil-deriv Jul 25, 2024
ffac155
Merge branch 'master' into nijil/wall-4502/wallet-banner-tablet
nijil-deriv Jul 26, 2024
d9cbf66
Merge branch 'master' into nijil/wall-4502/wallet-banner-tablet
nijil-deriv Jul 30, 2024
4b36690
Merge branch 'master' into nijil/wall-4502/wallet-banner-tablet
nijil-deriv Aug 1, 2024
f4a3006
fix: make wallet upgrade modal scrollable in landscape view
nijil-deriv Aug 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions packages/appstore/src/components/banners/wallets-banner/__tests__/wallets-banner.spec.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading