Skip to content

Add Payment Overview Widget data highlight components #8303

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

Closed
wants to merge 19 commits into from
Closed

Add Payment Overview Widget data highlight components #8303

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
47db45b
Add payment data highlight component
mordeth Mar 1, 2024
234e111
Add view report section to payment data highlight
mordeth Mar 1, 2024
52c6158
Add payment data highlight overview component
mordeth Mar 1, 2024
5dd3a47
Add data highlight responsive styles
mordeth Mar 1, 2024
5155e8c
Add event tracking to view report click event
mordeth Mar 4, 2024
e2941c0
Merge branch 'develop' into add/8196-payments-data-higlights
mordeth Mar 4, 2024
9c949eb
Add changelog
mordeth Mar 4, 2024
dd85e31
Merge branch 'develop' into add/8196-payments-data-higlights
mordeth Mar 5, 2024
1894e38
Merge branch 'develop' into add/8196-payments-data-higlights
mordeth Mar 6, 2024
208ad3d
Merge branch 'develop' into add/8196-payments-data-higlights
mordeth Mar 6, 2024
7fc2c11
Add PaymentDataHighlight unit tests
mordeth Mar 6, 2024
8a199e1
Remove obsolete i18n import
mordeth Mar 6, 2024
8ca4931
Merge branch 'develop' into add/8196-payments-data-higlights
mordeth Mar 6, 2024
25e8c6c
Merge branch 'develop' into add/8196-payments-data-higlights
dmallory42 Mar 6, 2024
c97f28d
Merge branch 'develop' into add/8196-payments-data-higlights
mordeth Mar 7, 2024
865eea9
Use gap-large prop instead of hardcoded number
mordeth Mar 7, 2024
f9f641b
Improve duplicated markup
mordeth Mar 7, 2024
91d89f8
Merge branch 'develop' into add/8196-payments-data-higlights
mordeth Mar 7, 2024
c7151cd
Merge branch 'develop' into add/8196-payments-data-higlights
mordeth Mar 11, 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
4 changes: 4 additions & 0 deletions changelog/add-8196-payments-data-higlights
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: minor
Type: add

Implement Payment overview widget data highlight components
99 changes: 99 additions & 0 deletions client/components/payment-data-highlight/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/** @format */
/**
* External dependencies
*/
import React from 'react';
import HelpOutlineIcon from 'gridicons/dist/help-outline';
import ArrowUpIcon from 'gridicons/dist/arrow-up';
import ArrowDownIcon from 'gridicons/dist/arrow-down';
import { __ } from '@wordpress/i18n';
import { VisuallyHidden } from '@wordpress/components';
import { Link } from '@woocommerce/components';
import { recordEvent } from 'tracks';

/**
* Internal dependencies
*/
import { ClickTooltip } from 'components/tooltip';
import './styles.scss';

const PaymentChangeFlow: React.FunctionComponent< {
change: number;
} > = ( { change } ): JSX.Element => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since both cases look pretty similar (only some minor class name changes), I wonder if we can just set some variables representing the class names which need to change based on if change < 0 to avoid having to write the markup twice. 🙂

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, @dmallory42! Indeed, that block could be enhanced to avoid duplicate markup. Improved with f9f641b.

if ( change < 0 ) {
return (
<div className="payment-data-highlight__amount-change-arrow-down">
<span className="payment-data-highlight__amount-change-icon">
<ArrowDownIcon size={ 12 } />
</span>
<span className="payment-data-highlight__amount-change-percentage">
{ Math.abs( change ) }%
</span>
</div>
);
}

return (
<div className="payment-data-highlight__amount-change-arrow-up">
<span className="payment-data-highlight__amount-change-icon">
<ArrowUpIcon size={ 12 } />
</span>
<span className="payment-data-highlight__amount-change-arrow-up-percentage">
{ Math.abs( change ) }%
</span>
</div>
);
};

const PaymentDataHighlight: React.FunctionComponent< {
label: string;
amount: string;
change: number;
reportUrl: string;
tooltip?: string;
} > = ( { label, amount, change, reportUrl, tooltip } ): JSX.Element => {
return (
<div className="payment-data-highlight__wrapper">
<div className="payment-data-highlight__visible">
<div className="payment-data-highlight__label">
<span>{ label }</span>

{ tooltip && (
<ClickTooltip
buttonIcon={ <HelpOutlineIcon /> }
isVisible={ false }
content={ tooltip }
>
<VisuallyHidden>{ tooltip }</VisuallyHidden>
</ClickTooltip>
) }
</div>
<div className="payment-data-highlight__amount">
<div className="payment-data-highlight__amount-number">
{ amount }
</div>
<div className="payment-data-highlight__amount-change">
<PaymentChangeFlow change={ change } />
</div>
</div>
</div>
<div className="payment-data-highlight__view-report">
<Link
href={ reportUrl }
onClick={ () =>
recordEvent(
'wcpay_overview_widget_data_highlight_view_report_click',
{
url: reportUrl,
}
)
}
>
{ __( 'View report', 'woocommerce-paymnets' ) }
</Link>
</div>
</div>
);
};

export default PaymentDataHighlight;
79 changes: 79 additions & 0 deletions client/components/payment-data-highlight/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
.payment-data-highlight {
&__wrapper {
position: relative;
}

&__label {
font-size: 12px;
line-height: 16px;
color: $gray-600;

.wcpay-tooltip__content-wrapper {
position: relative;
top: 1px;
}
}

&__amount {
display: flex;
padding-top: 8px;

&-number {
font-size: 16px;
line-height: 16px;
color: $gray-900;
font-weight: 500;
}

&-change {
margin-left: 10px;
font-size: 12px;
line-height: 16px;
padding-top: 1px;

&-icon {
position: relative;
top: 2px;
right: 2px;
}

&-arrow-up {
color: #005c12;
}

&-arrow-down {
color: #50575e;
}
}
}

&__view-report {
position: relative;
padding-top: 8px;
visibility: hidden;

a {
color: var( --wp-admin-theme-color );
text-decoration: none;
}
}

&__wrapper:hover .payment-data-highlight__view-report {
visibility: visible;
}

@include breakpoint( '<800px' ) {
&__wrapper {
display: flex;
justify-content: space-between;
padding: 8px 0;
}

&__view-report {
width: 30%;
float: right;
visibility: visible;
top: 15px;
}
}
}
168 changes: 168 additions & 0 deletions client/components/payment-data-highlight/test/__snapshots__/index.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`PaymentDataHighlight renders PaymentDataHighlight with tooltip 1`] = `
<div>
<div
class="payment-data-highlight__wrapper"
>
<div
class="payment-data-highlight__visible"
>
<div
class="payment-data-highlight__label"
>
<span>
Deposits
</span>
<button
class="wcpay-tooltip__content-wrapper wcpay-tooltip--click__content-wrapper"
type="button"
>
<div
class="wcpay-tooltip__content-wrapper"
>
<div
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>
</div>
<div
class="payment-data-highlight__amount"
>
<div
class="payment-data-highlight__amount-number"
>
€3,143.00
</div>
<div
class="payment-data-highlight__amount-change"
>
<div
class="payment-data-highlight__amount-change-arrow-up"
>
<span
class="payment-data-highlight__amount-change-icon"
>
<svg
class="gridicon gridicons-arrow-up"
height="12"
viewBox="0 0 24 24"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M13 20V7.83l5.59 5.59L20 12l-8-8-8 8 1.41 1.41L11 7.83V20h2z"
/>
</g>
</svg>
</span>
<span
class="payment-data-highlight__amount-change-arrow-up-percentage"
>
22
%
</span>
</div>
</div>
</div>
</div>
<div
class="payment-data-highlight__view-report"
>
<a
data-link-type="wc-admin"
href="#"
>
View report
</a>
</div>
</div>
</div>
`;

exports[`PaymentDataHighlight renders PaymentDataHighlight without tooltip 1`] = `
<div>
<div
class="payment-data-highlight__wrapper"
>
<div
class="payment-data-highlight__visible"
>
<div
class="payment-data-highlight__label"
>
<span>
Transactions
</span>
</div>
<div
class="payment-data-highlight__amount"
>
<div
class="payment-data-highlight__amount-number"
>
€2,143.00
</div>
<div
class="payment-data-highlight__amount-change"
>
<div
class="payment-data-highlight__amount-change-arrow-up"
>
<span
class="payment-data-highlight__amount-change-icon"
>
<svg
class="gridicon gridicons-arrow-up"
height="12"
viewBox="0 0 24 24"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
d="M13 20V7.83l5.59 5.59L20 12l-8-8-8 8 1.41 1.41L11 7.83V20h2z"
/>
</g>
</svg>
</span>
<span
class="payment-data-highlight__amount-change-arrow-up-percentage"
>
22
%
</span>
</div>
</div>
</div>
</div>
<div
class="payment-data-highlight__view-report"
>
<a
data-link-type="wc-admin"
href="#"
>
View report
</a>
</div>
</div>
</div>
`;
Loading