Skip to content

Commit

Permalink
Reorganise payments overview currency switcher, welcome message and b…
Browse files Browse the repository at this point in the history 
…alances card (#8791)

Co-authored-by: Jessy Pappachan <32092402+jessy-p@users.noreply.github.com>
  • Loading branch information
@Jinksi @jessy-p
Jinksi and jessy-p committed Jun 7, 2024
1 parent 597aea4 commit a719ace
Show file tree
Hide file tree
Showing 12 changed files with 488 additions and 419 deletions.
4 changes: 4 additions & 0 deletions changelog/update-8765-payments-overview-currency-select
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: update

Update the Payments Overview screen with a new currency selection UI for stores with multiple deposit currencies
200 changes: 69 additions & 131 deletions client/components/account-balances/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,114 +2,69 @@
* External dependencies
*/
import * as React from 'react';
import { Flex, TabPanel } from '@wordpress/components';
import { Flex } from '@wordpress/components';

/**
* Internal dependencies
*/
import { useAllDepositsOverviews } from 'wcpay/data';
import { useSelectedCurrency } from 'wcpay/overview/hooks';
import { getCurrencyTabTitle } from './utils';
import BalanceBlock from './balance-block';
import {
TotalBalanceTooltip,
AvailableBalanceTooltip,
} from './balance-tooltip';
import { fundLabelStrings } from './strings';
import InstantDepositButton from 'deposits/instant-deposits';
import { recordEvent } from 'tracks';
import type * as AccountOverview from 'wcpay/types/account-overview';
import './style.scss';

/**
* BalanceTabProps
*
* @typedef {Object} BalanceTab
*
* @param {string} name Name of the tab.
* @param {string} title Title of the tab.
* @param {string} currencyCode Currency code of the tab.
* @param {number} availableFunds Available funds of the tab.
* @param {number} pendingFunds Pending funds of the tab.
* @param {number} delayDays The account's pending period in days.
*/
type BalanceTabProps = {
name: string;
title: string;
currencyCode: string;
availableFunds: number;
pendingFunds: number;
delayDays: number;
instantBalance?: AccountOverview.InstantBalance;
};

/**
* Renders an account balances panel with tab navigation for each deposit currency.
*
* @return {JSX.Element} Rendered balances panel with tab navigation for each currency.
* Renders account balances for the selected currency.
*/
const AccountBalances: React.FC = () => {
const { overviews, isLoading } = useAllDepositsOverviews();
const { selectedCurrency, setSelectedCurrency } = useSelectedCurrency();
const { selectedCurrency } = useSelectedCurrency();

if ( ! isLoading && overviews.currencies.length === 0 ) {
return null;
}

const onTabSelect = ( tabName: BalanceTabProps[ 'name' ] ) => {
setSelectedCurrency( tabName );
recordEvent( 'wcpay_overview_balances_currency_tab_click', {
selected_currency: tabName,
} );
};

if ( isLoading ) {
// While the data is loading, we show a loading currency tab.
const loadingTabs: BalanceTabProps[] = [
{
name: 'loading',
title: getCurrencyTabTitle(
wcpaySettings.accountDefaultCurrency
),
currencyCode: wcpaySettings.accountDefaultCurrency,
availableFunds: 0,
pendingFunds: 0,
delayDays: 0,
},
];
// While the data is loading, we show a loading state for the balances.
const loadingData = {
name: 'loading',
currencyCode: wcpaySettings.accountDefaultCurrency,
availableFunds: 0,
pendingFunds: 0,
delayDays: 0,
};

return (
<TabPanel tabs={ loadingTabs }>
{ ( tab: BalanceTabProps ) => (
<Flex
gap={ 0 }
className="wcpay-account-balances__balances"
>
<BalanceBlock
id={ `wcpay-account-balances-${ tab.currencyCode }-total` }
title={ fundLabelStrings.total }
amount={ 0 }
currencyCode={ tab.currencyCode }
isLoading
/>
<BalanceBlock
id={ `wcpay-account-balances-${ tab.currencyCode }-available` }
title={ fundLabelStrings.available }
amount={ 0 }
currencyCode={ tab.currencyCode }
isLoading
/>
</Flex>
) }
</TabPanel>
<Flex gap={ 0 } className="wcpay-account-balances__balances">
<BalanceBlock
id={ `wcpay-account-balances-${ loadingData.currencyCode }-total` }
title={ fundLabelStrings.total }
amount={ 0 }
currencyCode={ loadingData.currencyCode }
isLoading
/>
<BalanceBlock
id={ `wcpay-account-balances-${ loadingData.currencyCode }-available` }
title={ fundLabelStrings.available }
amount={ 0 }
currencyCode={ loadingData.currencyCode }
isLoading
/>
</Flex>
);
}

const { currencies, account } = overviews;

const depositCurrencyTabs = currencies.map(
const depositCurrencyOverviews = currencies.map(
( overview: AccountOverview.Overview ) => ( {
name: overview.currency,
title: getCurrencyTabTitle( overview.currency ),
currencyCode: overview.currency,
availableFunds: overview.available?.amount ?? 0,
pendingFunds: overview.pending?.amount ?? 0,
Expand All @@ -118,65 +73,48 @@ const AccountBalances: React.FC = () => {
} )
);

// Selected currency is not valid if it is not in the list of deposit currencies.
const isSelectedCurrencyValid =
selectedCurrency &&
depositCurrencyTabs.some( ( tab ) => tab.name === selectedCurrency );
const selectedOverview =
depositCurrencyOverviews.find(
( overview ) => overview.name === selectedCurrency
) || depositCurrencyOverviews[ 0 ];

return (
<TabPanel
tabs={ depositCurrencyTabs }
onSelect={ onTabSelect }
initialTabName={
isSelectedCurrencyValid ? selectedCurrency : undefined
}
>
{ ( tab: BalanceTabProps ) => {
const totalBalance = tab.availableFunds + tab.pendingFunds;
const totalBalance =
selectedOverview.availableFunds + selectedOverview.pendingFunds;

return (
<>
<Flex
gap={ 0 }
className="wcpay-account-balances__balances"
>
<BalanceBlock
id={ `wcpay-account-balances-${ tab.currencyCode }-total` }
title={ fundLabelStrings.total }
amount={ totalBalance }
currencyCode={ tab.currencyCode }
tooltip={
<TotalBalanceTooltip
balance={ totalBalance }
/>
}
/>
<BalanceBlock
id={ `wcpay-account-balances-${ tab.currencyCode }-available` }
title={ fundLabelStrings.available }
amount={ tab.availableFunds }
currencyCode={ tab.currencyCode }
tooltip={
<AvailableBalanceTooltip
balance={ tab.availableFunds }
/>
}
/>
</Flex>
{ tab.instantBalance && tab.instantBalance.amount > 0 && (
<Flex
gap={ 0 }
className="wcpay-account-balances__instant-deposit"
>
<InstantDepositButton
instantBalance={ tab.instantBalance }
/>
</Flex>
) }
</>
);
} }
</TabPanel>
return (
<>
<Flex gap={ 0 } className="wcpay-account-balances__balances">
<BalanceBlock
id={ `wcpay-account-balances-${ selectedOverview.currencyCode }-total` }
title={ fundLabelStrings.total }
amount={ totalBalance }
currencyCode={ selectedOverview.currencyCode }
tooltip={ <TotalBalanceTooltip balance={ totalBalance } /> }
/>
<BalanceBlock
id={ `wcpay-account-balances-${ selectedOverview.currencyCode }-available` }
title={ fundLabelStrings.available }
amount={ selectedOverview.availableFunds }
currencyCode={ selectedOverview.currencyCode }
tooltip={
<AvailableBalanceTooltip
balance={ selectedOverview.availableFunds }
/>
}
/>
</Flex>
{ selectedOverview.instantBalance &&
selectedOverview.instantBalance.amount > 0 && (
<Flex
gap={ 0 }
className="wcpay-account-balances__instant-deposit"
>
<InstantDepositButton
instantBalance={ selectedOverview.instantBalance }
/>
</Flex>
) }
</>
);
};

Expand Down
7 changes: 2 additions & 5 deletions client/components/account-balances/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.wcpay-account-balances__balances {
border-top: 1px solid $gray-200;
}

.wcpay-account-balances__balances > * + * {
border-left: 1px solid $gray-200;
}
Expand All @@ -21,14 +17,15 @@
&__amount {
font-weight: 500;
font-size: 20px;
line-height: 0px;
margin: 0;
color: $gray-900;
}
}

.wcpay-account-balances__balances__item__title {
display: flex;
align-items: center;
margin-top: 0;
}

.wcpay-account-balances__instant-deposit {
Expand Down
Loading

0 comments on commit a719ace

Please sign in to comment.