-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Reporting: Show bank reference ID on Payout details page (#9945)
Co-authored-by: Nagesh Pai <[email protected]> Co-authored-by: Rua Haszard <[email protected]> Co-authored-by: Shendy <[email protected]>
- Loading branch information
4 people
authored
Jan 28, 2025
1 parent
6bb24e1
commit 8b2b869
Showing
8 changed files
with
548 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: minor | ||
| Type: add | ||
|
|
||
| Show Bank reference key on top of the payout details page, whenever available. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import React, { useState } from 'react'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import './style.scss'; | ||
|
|
||
| interface CopyButtonProps { | ||
| /** | ||
| * The text to copy to the clipboard. | ||
| */ | ||
| textToCopy: string; | ||
|
|
||
| /** | ||
| * The label for the button. Also used as the aria-label. | ||
| */ | ||
| label: string; | ||
| } | ||
|
|
||
| export const CopyButton: React.FC< CopyButtonProps > = ( { | ||
| textToCopy, | ||
| label, | ||
| } ) => { | ||
| const [ copied, setCopied ] = useState( false ); | ||
|
|
||
| const copyToClipboard = () => { | ||
| navigator.clipboard.writeText( textToCopy ); | ||
| setCopied( true ); | ||
| }; | ||
|
|
||
| return ( | ||
| <button | ||
| type="button" | ||
| className={ classNames( 'woopayments-copy-button', { | ||
| 'state--copied': copied, | ||
| } ) } | ||
| aria-label={ label } | ||
| title={ __( 'Copy to clipboard', 'woocommerce-payments' ) } | ||
| onClick={ copyToClipboard } | ||
| onAnimationEnd={ () => setCopied( false ) } | ||
| > | ||
| <i></i> | ||
| </button> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| .woopayments-copy-button { | ||
| line-height: 1.2em; | ||
| display: inline-flex; | ||
| background: transparent; | ||
| border: none; | ||
| border-radius: 0; | ||
| vertical-align: middle; | ||
| font-weight: normal; | ||
| cursor: pointer; | ||
| color: inherit; | ||
| margin-left: 2px; | ||
| align-items: center; | ||
|
|
||
| i { | ||
| display: block; | ||
| width: 1.2em; | ||
| height: 1.2em; | ||
| mask-image: url( 'assets/images/icons/copy.svg?asset' ); | ||
| mask-size: contain; | ||
| mask-repeat: no-repeat; | ||
| mask-position: center; | ||
| background-color: currentColor; | ||
|
|
||
| &:hover { | ||
| opacity: 0.7; | ||
| } | ||
|
|
||
| &:active { | ||
| transform: scale( 0.9 ); | ||
| } | ||
| } | ||
|
|
||
| &.state--copied i { | ||
| mask-image: url( 'assets/images/icons/check-green.svg?asset' ); | ||
| background-color: $studio-green-50; | ||
| animation: copy-indicator 2s forwards; | ||
| } | ||
|
|
||
| @keyframes copy-indicator { | ||
| 0% { | ||
| opacity: 1; | ||
| } | ||
| 95% { | ||
| opacity: 1; | ||
| } | ||
| // a quick fade-out from 1%→0% at the end | ||
| 100% { | ||
| opacity: 0; | ||
| } | ||
| } | ||
| } |
14 changes: 14 additions & 0 deletions
14
client/components/copy-button/test/__snapshots__/index.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`CopyButton renders the button correctly 1`] = ` | ||
| <div> | ||
| <button | ||
| aria-label="Copy bank reference ID to clipboard" | ||
| class="woopayments-copy-button" | ||
| title="Copy to clipboard" | ||
| type="button" | ||
| > | ||
| <i /> | ||
| </button> | ||
| </div> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| /** @format **/ | ||
|
|
||
| /** | ||
| * External dependencies | ||
| */ | ||
| import React from 'react'; | ||
| import { act, fireEvent, render, screen } from '@testing-library/react'; | ||
| import '@testing-library/jest-dom/extend-expect'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { CopyButton } from '..'; | ||
|
|
||
| describe( 'CopyButton', () => { | ||
| it( 'renders the button correctly', () => { | ||
| const { container: copyButtonContainer } = render( | ||
| <CopyButton | ||
| textToCopy="test_bank_reference_id" | ||
| label="Copy bank reference ID to clipboard" | ||
| /> | ||
| ); | ||
|
|
||
| expect( copyButtonContainer ).toMatchSnapshot(); | ||
| } ); | ||
|
|
||
| describe( 'when the button is clicked', () => { | ||
| it( 'copies the text to the clipboard and shows copied state', async () => { | ||
| render( | ||
| <CopyButton | ||
| textToCopy="test_bank_reference_id" | ||
| label="Copy bank reference ID to clipboard" | ||
| /> | ||
| ); | ||
|
|
||
| const button = screen.queryByRole( 'button', { | ||
| name: /Copy bank reference ID to clipboard/i, | ||
| } ); | ||
|
|
||
| if ( ! button ) { | ||
| throw new Error( 'Button not found' ); | ||
| } | ||
|
|
||
| //Mock the clipboard API | ||
| Object.assign( navigator, { | ||
| clipboard: { | ||
| writeText: jest.fn().mockResolvedValueOnce( undefined ), | ||
| }, | ||
| } ); | ||
|
|
||
| await act( async () => { | ||
| fireEvent.click( button ); | ||
| } ); | ||
|
|
||
| expect( navigator.clipboard.writeText ).toHaveBeenCalledWith( | ||
| 'test_bank_reference_id' | ||
| ); | ||
| expect( button ).toHaveClass( 'state--copied' ); | ||
|
|
||
| act( () => { | ||
| fireEvent.animationEnd( button ); | ||
| } ); | ||
|
|
||
| expect( button ).not.toHaveClass( 'state--copied' ); | ||
| } ); | ||
| } ); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.