Skip to content

Commit

Permalink
Reporting: Overview - improve mobile view of Balances card (#10040)
Browse files Browse the repository at this point in the history 
Co-authored-by: Nagesh Pai <[email protected]>
  • Loading branch information
@nagpai
nagpai and Nagesh Pai authored Dec 30, 2024
1 parent cd3e288 commit bacc8ed
Show file tree
Hide file tree
Showing 4 changed files with 189 additions and 124 deletions.
4 changes: 4 additions & 0 deletions changelog/fix-8599-balances-card-layout
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: fix

Improve the mobile rendering of the Balances box within Payment Overview
82 changes: 45 additions & 37 deletions client/components/account-balances/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import React, { useState } from 'react';
import { useDispatch } from '@wordpress/data';
import { Flex } from '@wordpress/components';
import { Card, CardBody, CardHeader, Flex } from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import interpolateComponents from '@automattic/interpolate-components';
import { Link } from '@woocommerce/components';
Expand Down Expand Up @@ -73,22 +73,25 @@ const AccountBalances: React.FC = () => {
};

return (
<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>
<Card className="wcpay-account-balances">
<CardHeader>Balance</CardHeader>
<CardBody 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
/>
</CardBody>
</Card>
);
}

Expand All @@ -115,26 +118,31 @@ const AccountBalances: React.FC = () => {

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>
<Card className="wcpay-account-balances">
<CardHeader>Balance</CardHeader>
<CardBody 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 }
/>
}
/>
</CardBody>
</Card>
{ selectedOverview.instantBalance &&
selectedOverview.instantBalance.amount > 0 && (
<Flex
Expand Down
34 changes: 29 additions & 5 deletions client/components/account-balances/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
.wcpay-account-balances__balances > * + * {
border-left: 1px solid $gray-200;
}

.wcpay-account-balances__balances__item {
flex-direction: column;
align-items: flex-start;
padding: 24px;
flex: 1;
padding-left: 16px;

&__title {
font-size: 12px;
Expand All @@ -23,6 +19,13 @@
margin: 0;
color: $gray-900;
}

@include breakpoint( '<660px' ) {
padding-left: 0;
&:not( :first-child ) {
padding-top: 16px;
}
}
}

.wcpay-account-balances__instant-deposit-notice .components-notice__content {
Expand All @@ -35,6 +38,13 @@
}

.wcpay-account-balances__balances {
display: flex;
margin-bottom: 0;

& > * + * {
border-left: 1px solid $gray-200;
}

.wcpay-account-balances__balances__item__tooltip {
line-height: 20px;
}
Expand All @@ -58,4 +68,18 @@
margin-right: 0;
}
}

@include breakpoint( '<660px' ) {
flex-direction: column;
gap: 16px;
& > * + * {
border-left: none;
border-top: 1px solid $gray-200;
}
}
}

.components-card.wcpay-account-balances {
margin-bottom: 0;
box-shadow: none;
}
193 changes: 111 additions & 82 deletions client/components/account-balances/test/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,102 +3,131 @@
exports[`AccountBalances renders the correct tooltip text for the total balance 1`] = `
<div>
<div
class="components-flex wcpay-account-balances__balances css-1ng0jhd-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
class="components-surface components-card wcpay-account-balances css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
data-wp-c16t="true"
data-wp-component="Flex"
data-wp-component="Card"
>
<div
class="wcpay-account-balances__balances__item"
class="css-mgwsf4-View-Content em57xhy0"
>
<p
class="wcpay-account-balances__balances__item__title"
id="wcpay-account-balances-usd-total"
<div
class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
data-wp-c16t="true"
data-wp-component="CardHeader"
>
<span>
Total balance
</span>
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
Balance
</div>
<div
class="components-card__body components-card-body wcpay-account-balances__balances css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
data-wp-c16t="true"
data-wp-component="CardBody"
>
<div
class="wcpay-account-balances__balances__item"
>
<div
class="wcpay-tooltip__content-wrapper"
<p
class="wcpay-account-balances__balances__item__title"
id="wcpay-account-balances-usd-total"
>
<div
aria-label="Total balance tooltip"
role="button"
tabindex="0"
<span>
Total balance
</span>
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
>
<svg
class="gridicon gridicons-help-outline"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
<div
class="wcpay-tooltip__content-wrapper"
>
<g>
<path
d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
/>
</g>
</svg>
</div>
</div>
</button>
</p>
<p
aria-labelledby="wcpay-account-balances-usd-total"
class="wcpay-account-balances__balances__item__amount"
>
$300.00
</p>
</div>
<div
class="wcpay-account-balances__balances__item"
>
<p
class="wcpay-account-balances__balances__item__title"
id="wcpay-account-balances-usd-available"
>
<span>
Available funds
</span>
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
<div
aria-label="Total balance tooltip"
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-help-outline"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
/>
</g>
</svg>
</div>
</div>
</button>
</p>
<p
aria-labelledby="wcpay-account-balances-usd-total"
class="wcpay-account-balances__balances__item__amount"
>
$300.00
</p>
</div>
<div
class="wcpay-account-balances__balances__item"
>
<div
class="wcpay-tooltip__content-wrapper"
<p
class="wcpay-account-balances__balances__item__title"
id="wcpay-account-balances-usd-available"
>
<div
aria-label="Available funds tooltip"
role="button"
tabindex="0"
<span>
Available funds
</span>
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
>
<svg
class="gridicon gridicons-help-outline"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
<div
class="wcpay-tooltip__content-wrapper"
>
<g>
<path
d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
/>
</g>
</svg>
</div>
</div>
</button>
</p>
<p
aria-labelledby="wcpay-account-balances-usd-available"
class="wcpay-account-balances__balances__item__amount"
>
$200.00
</p>
<div
aria-label="Available funds tooltip"
role="button"
tabindex="0"
>
<svg
class="gridicon gridicons-help-outline"
height="16"
viewBox="0 0 24 24"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M12 4c4.411 0 8 3.589 8 8s-3.589 8-8 8-8-3.589-8-8 3.589-8 8-8m0-2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4 8a4 4 0 00-8 0h2c0-1.103.897-2 2-2s2 .897 2 2-.897 2-2 2a1 1 0 00-1 1v2h2v-1.141A3.991 3.991 0 0016 10zm-3 6h-2v2h2v-2z"
/>
</g>
</svg>
</div>
</div>
</button>
</p>
<p
aria-labelledby="wcpay-account-balances-usd-available"
class="wcpay-account-balances__balances__item__amount"
>
$200.00
</p>
</div>
</div>
</div>
<div
aria-hidden="true"
class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
<div
aria-hidden="true"
class="components-elevation css-91yjwm-View-Elevation-sx-Base-elevationClassName em57xhy0"
data-wp-c16t="true"
data-wp-component="Elevation"
/>
</div>
</div>
`;

0 comments on commit bacc8ed

Please sign in to comment.