From 33208a52cbd0a092424b0730c5a06375ff26b1a0 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Thu, 5 Dec 2024 22:17:11 +0530 Subject: [PATCH 01/20] Add bank reference key to the deposit details header --- client/deposits/details/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 2176b079377..5e42e51b75a 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -70,7 +70,7 @@ interface SummaryItemProps { label: string; value: string | JSX.Element; valueClass?: string | false; - detail?: string; + detail?: string | JSX.Element; } /** @@ -142,7 +142,12 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { ) } value={ } - detail={ deposit.bankAccount } + detail={ + <> + { deposit.bankAccount }
+ Bank reference key: { deposit.bank_reference_key } + + } /> ); From 1939d4e2939e62065ac237bdd87921547afc7a0b Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Thu, 5 Dec 2024 22:43:16 +0530 Subject: [PATCH 02/20] Add conditional --- client/deposits/details/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 5e42e51b75a..b5be33aee1a 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -144,8 +144,13 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { value={ } detail={ <> - { deposit.bankAccount }
- Bank reference key: { deposit.bank_reference_key } + { deposit.bankAccount } + { deposit.bank_reference_key && ( + <> +
+ Bank reference key: { deposit.bank_reference_key } + + ) } } /> From 2d5a129355b09ff49a26b21581c9eaf0b1372a97 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Thu, 5 Dec 2024 23:03:35 +0530 Subject: [PATCH 03/20] Changelog --- changelog/add-9878-bank-ref-key-payout-details | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/add-9878-bank-ref-key-payout-details diff --git a/changelog/add-9878-bank-ref-key-payout-details b/changelog/add-9878-bank-ref-key-payout-details new file mode 100644 index 00000000000..8d88b5cef46 --- /dev/null +++ b/changelog/add-9878-bank-ref-key-payout-details @@ -0,0 +1,4 @@ +Significance: minor +Type: add + +Show Bank reference key on top of the payout details page, whenever available. From e0f0dd63b502446f4c1e9bf4948af310beb8057b Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Thu, 5 Dec 2024 23:47:15 +0530 Subject: [PATCH 04/20] CSS adjustments for mobile view --- client/deposits/details/style.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/client/deposits/details/style.scss b/client/deposits/details/style.scss index 0031184d4cf..ca63111c3b4 100644 --- a/client/deposits/details/style.scss +++ b/client/deposits/details/style.scss @@ -52,6 +52,10 @@ margin: 0; list-style-type: none; + @include breakpoint( '<660px' ) { + flex-direction: column; + } + .woocommerce-summary__item { border-bottom: 0; background-color: inherit; @@ -67,6 +71,13 @@ text-align: right; font-size: 36px; line-height: 82px; + + @include breakpoint( '<660px' ) { + padding: 24px; + line-height: 36px; + text-align: left; + border-top: 1px solid $studio-gray-5; + } } } From aea1f351c6d100443d949cd6c14be9bb2dbb7db7 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Fri, 6 Dec 2024 00:03:45 +0530 Subject: [PATCH 05/20] Css tweak --- client/deposits/details/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/deposits/details/style.scss b/client/deposits/details/style.scss index ca63111c3b4..6f816b82397 100644 --- a/client/deposits/details/style.scss +++ b/client/deposits/details/style.scss @@ -37,6 +37,14 @@ font-size: 20px; line-height: 28px; } + + .wcpay-summary__item-detail { + color: $dark-gray-500; + + @include breakpoint( '<480px' ) { + word-wrap: break-word; + } + } } .wcpay-deposit-fee { From 6386ab818b8f2e9cda1b8e1770a8446ba43d675a Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Fri, 6 Dec 2024 11:35:15 +0530 Subject: [PATCH 06/20] show n/a when ref key not available --- client/deposits/details/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index b5be33aee1a..4b043e7115c 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -145,12 +145,8 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { detail={ <> { deposit.bankAccount } - { deposit.bank_reference_key && ( - <> -
- Bank reference key: { deposit.bank_reference_key } - - ) } +
+ Bank reference key: { deposit.bank_reference_key ?? 'N/A' } } /> From 3ace18a0a4804b24ea581fe4cd0f1aa110e7ab5a Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Fri, 6 Dec 2024 12:00:27 +0530 Subject: [PATCH 07/20] Update test snapshots --- .../deposits/details/test/__snapshots__/index.tsx.snap | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/deposits/details/test/__snapshots__/index.tsx.snap b/client/deposits/details/test/__snapshots__/index.tsx.snap index fecce68ae08..bfe6b081630 100644 --- a/client/deposits/details/test/__snapshots__/index.tsx.snap +++ b/client/deposits/details/test/__snapshots__/index.tsx.snap @@ -45,6 +45,9 @@ exports[`Deposit overview renders automatic payout correctly 1`] = ` class="wcpay-summary__item-detail" > MOCK BANK •••• 1234 (USD) +
+ Bank reference key: + N/A @@ -117,6 +120,9 @@ exports[`Deposit overview renders automatic withdrawal correctly 1`] = ` class="wcpay-summary__item-detail" > MOCK BANK •••• 1234 (USD) +
+ Bank reference key: + N/A @@ -195,6 +201,9 @@ exports[`Deposit overview renders instant deposit correctly 1`] = ` class="wcpay-summary__item-detail" > MOCK BANK •••• 1234 (USD) +
+ Bank reference key: + N/A From 735fe947289cb6be3581ec059170d3daee0383dc Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Fri, 6 Dec 2024 18:04:21 +0530 Subject: [PATCH 08/20] Add copy button --- client/deposits/details/index.tsx | 88 ++++++++++++++++++++++-------- client/deposits/details/style.scss | 41 ++++++++++++++ 2 files changed, 106 insertions(+), 23 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 4b043e7115c..19e905b9462 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -3,7 +3,7 @@ /** * External dependencies */ -import React from 'react'; +import React, { useEffect } from 'react'; import { dateI18n } from '@wordpress/date'; import { __, sprintf } from '@wordpress/i18n'; import moment from 'moment'; @@ -130,34 +130,76 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { depositDateLabel = __( 'Withdrawal date', 'woocommerce-payments' ); } - const depositDateItem = ( - } - detail={ - <> - { deposit.bankAccount } -
- Bank reference key: { deposit.bank_reference_key ?? 'N/A' } - + const DepositDateItem = () => { + useEffect( () => { + const copyButton = document.querySelector( + '.woopayments-copy-bank-reference-key' + ); + + if ( copyButton ) { + copyButton.addEventListener( 'click', () => { + const bankReferenceKey = document.querySelector( + '.woopayments-payout-bank-reference-key' + )?.textContent; + + if ( bankReferenceKey ) { + navigator.clipboard.writeText( bankReferenceKey ); + + copyButton.classList.add( 'state--copied' ); + setTimeout( () => { + copyButton.classList.remove( 'state--copied' ); + }, 2000 ); + } + } ); } - /> - ); + }, [] ); + + return ( + } + detail={ + <> + { deposit.bankAccount } +
+ Bank reference key:{ ' ' } + + { deposit.bank_reference_key ?? 'N/A' } + + + + } + /> + ); + }; return (
{ deposit.automatic ? (
    - { depositDateItem } + { DepositDateItem() }
  • { formatExplicitCurrency( deposit.amount, @@ -178,7 +220,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { } > { () => [ - depositDateItem, + DepositDateItem(), Date: Fri, 6 Dec 2024 18:20:20 +0530 Subject: [PATCH 09/20] Tweak appearance of button and snapshots --- client/deposits/details/index.tsx | 40 +++++++++++-------- .../details/test/__snapshots__/index.tsx.snap | 9 +++-- 2 files changed, 29 insertions(+), 20 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 19e905b9462..e654b8e2cdb 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -171,23 +171,29 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { { deposit.bankAccount }
    Bank reference key:{ ' ' } - - { deposit.bank_reference_key ?? 'N/A' } - - + { deposit.bank_reference_key ? ( + <> + + { deposit.bank_reference_key } + + + + ) : ( + 'N/A' + ) } } /> diff --git a/client/deposits/details/test/__snapshots__/index.tsx.snap b/client/deposits/details/test/__snapshots__/index.tsx.snap index bfe6b081630..2908e86b4f9 100644 --- a/client/deposits/details/test/__snapshots__/index.tsx.snap +++ b/client/deposits/details/test/__snapshots__/index.tsx.snap @@ -46,7 +46,8 @@ exports[`Deposit overview renders automatic payout correctly 1`] = ` > MOCK BANK •••• 1234 (USD)
    - Bank reference key: + Bank reference key: + N/A
@@ -121,7 +122,8 @@ exports[`Deposit overview renders automatic withdrawal correctly 1`] = ` > MOCK BANK •••• 1234 (USD)
- Bank reference key: + Bank reference key: + N/A @@ -202,7 +204,8 @@ exports[`Deposit overview renders instant deposit correctly 1`] = ` > MOCK BANK •••• 1234 (USD)
- Bank reference key: + Bank reference key: + N/A From 292bfd9669748b3f0912a9ca34161236704e478e Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Fri, 6 Dec 2024 20:52:20 +0530 Subject: [PATCH 10/20] Change Ref ID font to monospace --- client/deposits/details/index.tsx | 2 +- client/deposits/details/style.scss | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index e654b8e2cdb..a1e031d7380 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -178,7 +178,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { + + ) : ( + 'N/A' + ) } + + } + /> + ); +}; interface DepositOverviewProps { deposit: CachedDeposit | undefined; } @@ -122,90 +191,12 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( { const isWithdrawal = deposit.type === 'withdrawal'; - let depositDateLabel = __( 'Payout date', 'woocommerce-payments' ); - if ( ! deposit.automatic ) { - depositDateLabel = __( 'Instant payout date', 'woocommerce-payments' ); - } - if ( isWithdrawal ) { - depositDateLabel = __( 'Withdrawal date', 'woocommerce-payments' ); - } - - const DepositDateItem = () => { - useEffect( () => { - const copyButton = document.querySelector( - '.woopayments-copy-bank-reference-key' - ); - - if ( copyButton ) { - copyButton.addEventListener( 'click', () => { - const bankReferenceKey = document.querySelector( - '.woopayments-payout-bank-reference-key' - )?.textContent; - - if ( bankReferenceKey ) { - navigator.clipboard.writeText( bankReferenceKey ); - - copyButton.classList.add( 'state--copied' ); - setTimeout( () => { - copyButton.classList.remove( 'state--copied' ); - }, 2000 ); - } - } ); - } - }, [] ); - - return ( - } - detail={ - <> - { deposit.bankAccount } -
- Bank reference key:{ ' ' } - { deposit.bank_reference_key ? ( - <> - - { deposit.bank_reference_key } - - - - ) : ( - 'N/A' - ) } - - } - /> - ); - }; - return (
{ deposit.automatic ? (
    - { DepositDateItem() } +
  • { formatExplicitCurrency( deposit.amount, @@ -215,7 +206,7 @@ export const DepositOverview: React.FC< DepositOverviewProps > = ( {
) : ( - = ( { } > { () => [ - DepositDateItem(), + , Date: Wed, 11 Dec 2024 18:24:17 +0530 Subject: [PATCH 13/20] WIP changes --- client/deposits/details/index.tsx | 29 ++++-- client/deposits/details/style.scss | 139 +++++++++++++++-------------- 2 files changed, 90 insertions(+), 78 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 0f868916532..e1889ced557 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -3,7 +3,7 @@ /** * External dependencies */ -import React, { useEffect } from 'react'; +import React, { useState } from 'react'; import { dateI18n } from '@wordpress/date'; import { __, sprintf } from '@wordpress/i18n'; import moment from 'moment'; @@ -115,6 +115,8 @@ const DepositDateItem: React.FC< DepositDateItemProps > = ( { deposit } ) => { depositDateLabel = __( 'Withdrawal date', 'woocommerce-payments' ); } + const [ isCopied, setIsCopied ] = useState( false ); + return ( = ( { deposit } ) => { <> { deposit.bankAccount }
- Bank reference key:{ ' ' } + Bank reference ID:{ ' ' } { deposit.bank_reference_key ? ( <> - + { deposit.bank_reference_key }
@@ -122,7 +122,7 @@ exports[`Deposit overview renders automatic withdrawal correctly 1`] = ` > MOCK BANK •••• 1234 (USD)
- Bank reference key: + Bank reference ID: N/A @@ -204,7 +204,7 @@ exports[`Deposit overview renders instant deposit correctly 1`] = ` > MOCK BANK •••• 1234 (USD)
- Bank reference key: + Bank reference ID: N/A From af176bd9a1f5bcb52689c0f9d8b13ded513b792f Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Thu, 12 Dec 2024 17:04:46 +0530 Subject: [PATCH 16/20] Simplify click handler --- client/deposits/details/index.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index e1889ced557..ba66b578117 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -153,13 +153,9 @@ const DepositDateItem: React.FC< DepositDateItemProps > = ( { deposit } ) => { 'woocommerce-payments' ) } onClick={ () => { - const bankReferenceId = document.querySelector( - '.woopayments-payout-bank-reference-id' - )?.textContent; - - if ( bankReferenceId ) { + if ( deposit.bank_reference_key ) { navigator.clipboard.writeText( - bankReferenceId + deposit.bank_reference_key ); } From 0d26f7634a87f47cf6945b0b35abebcd21c98160 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Thu, 12 Dec 2024 21:02:47 +0530 Subject: [PATCH 17/20] Move copy button to component --- client/components/copy-button/index.tsx | 56 ++++++++++++++++++++++++ client/components/copy-button/style.scss | 37 ++++++++++++++++ client/deposits/details/index.tsx | 38 +++------------- client/deposits/details/style.scss | 38 ---------------- 4 files changed, 98 insertions(+), 71 deletions(-) create mode 100644 client/components/copy-button/index.tsx create mode 100644 client/components/copy-button/style.scss diff --git a/client/components/copy-button/index.tsx b/client/components/copy-button/index.tsx new file mode 100644 index 00000000000..4aa066b072f --- /dev/null +++ b/client/components/copy-button/index.tsx @@ -0,0 +1,56 @@ +/** + * External dependencies + */ +import React, { useState, useEffect, useRef } from 'react'; +import { __ } from '@wordpress/i18n'; +import classNames from 'classnames'; + +/** + * Internal dependencies + */ +import './style.scss'; + +const CopyButton: React.FC< { + textToCopy: string; +} > = ( { textToCopy } ) => { + // useRef() is used to store the timer reference for the setTimeout() function. + const timerRef = useRef< NodeJS.Timeout | null >( null ); + + // useEffect() is used to clear the timer reference when the component is unmounted. + useEffect( () => { + return () => { + if ( timerRef.current ) { + clearTimeout( timerRef.current ); + } + }; + }, [] ); + + const [ copied, setCopied ] = useState( false ); + + const copyToClipboard = () => { + navigator.clipboard.writeText( textToCopy ); + setCopied( true ); + timerRef.current = setTimeout( () => { + setCopied( false ); + }, 2000 ); + }; + + return ( + + ); +}; + +export default CopyButton; diff --git a/client/components/copy-button/style.scss b/client/components/copy-button/style.scss new file mode 100644 index 00000000000..bac8c2b6edd --- /dev/null +++ b/client/components/copy-button/style.scss @@ -0,0 +1,37 @@ +.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; + } +} diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index ba66b578117..5efbac48d1d 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -3,7 +3,7 @@ /** * External dependencies */ -import React, { useState } from 'react'; +import React from 'react'; import { dateI18n } from '@wordpress/date'; import { __, sprintf } from '@wordpress/i18n'; import moment from 'moment'; @@ -30,6 +30,7 @@ import classNames from 'classnames'; import type { CachedDeposit } from 'types/deposits'; import { useDeposit } from 'data'; import TransactionsList from 'transactions/list'; +import CopyButton from 'components/copy-button'; import Page from 'components/page'; import ErrorBoundary from 'components/error-boundary'; import { TestModeNotice } from 'components/test-mode-notice'; @@ -115,8 +116,6 @@ const DepositDateItem: React.FC< DepositDateItemProps > = ( { deposit } ) => { depositDateLabel = __( 'Withdrawal date', 'woocommerce-payments' ); } - const [ isCopied, setIsCopied ] = useState( false ); - return ( = ( { deposit } ) => { { deposit.bank_reference_key } - + ) : ( 'N/A' diff --git a/client/deposits/details/style.scss b/client/deposits/details/style.scss index 2a35454c20e..793481acb70 100644 --- a/client/deposits/details/style.scss +++ b/client/deposits/details/style.scss @@ -45,44 +45,6 @@ .woopayments-payout-bank-reference-id { font-family: monospace; } - - .woopayments-payout-bank-reference-id-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; - } - } } } From 5c3c6aad42ebea90934dadb112601443ea2e45a1 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Thu, 12 Dec 2024 22:44:22 +0530 Subject: [PATCH 18/20] Add test and label prop --- client/components/copy-button/index.tsx | 12 ++-- .../test/__snapshots__/index.test.tsx.snap | 14 ++++ .../copy-button/test/index.test.tsx | 70 +++++++++++++++++++ client/deposits/details/index.tsx | 4 ++ 4 files changed, 94 insertions(+), 6 deletions(-) create mode 100644 client/components/copy-button/test/__snapshots__/index.test.tsx.snap create mode 100644 client/components/copy-button/test/index.test.tsx diff --git a/client/components/copy-button/index.tsx b/client/components/copy-button/index.tsx index 4aa066b072f..207a6767770 100644 --- a/client/components/copy-button/index.tsx +++ b/client/components/copy-button/index.tsx @@ -10,9 +10,12 @@ import classNames from 'classnames'; */ import './style.scss'; -const CopyButton: React.FC< { +interface CopyButtonProps { textToCopy: string; -} > = ( { textToCopy } ) => { + label: string; +} + +const CopyButton: React.FC< CopyButtonProps > = ( { textToCopy, label } ) => { // useRef() is used to store the timer reference for the setTimeout() function. const timerRef = useRef< NodeJS.Timeout | null >( null ); @@ -41,10 +44,7 @@ const CopyButton: React.FC< { className={ classNames( 'woopayments-copy-button', { 'state--copied': copied, } ) } - aria-label={ __( - 'Copy bank reference ID to clipboard', - 'woocommerce-payments' - ) } + aria-label={ label } title={ __( 'Copy to clipboard', 'woocommerce-payments' ) } onClick={ copyToClipboard } > diff --git a/client/components/copy-button/test/__snapshots__/index.test.tsx.snap b/client/components/copy-button/test/__snapshots__/index.test.tsx.snap new file mode 100644 index 00000000000..44cd5831dc5 --- /dev/null +++ b/client/components/copy-button/test/__snapshots__/index.test.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CopyButton renders the button correctly 1`] = ` +
+ +
+`; diff --git a/client/components/copy-button/test/index.test.tsx b/client/components/copy-button/test/index.test.tsx new file mode 100644 index 00000000000..06c7170de1e --- /dev/null +++ b/client/components/copy-button/test/index.test.tsx @@ -0,0 +1,70 @@ +/** @format **/ + +/** + * External dependencies + */ +import React from 'react'; +import { act, render, screen } from '@testing-library/react'; + +/** + * Internal dependencies + */ +import CopyButton from '..'; + +describe( 'CopyButton', () => { + it( 'renders the button correctly', () => { + const { container: copyButtonContainer } = render( + + ); + + expect( copyButtonContainer ).toMatchSnapshot(); + } ); + + describe( 'when the button is clicked', () => { + beforeAll( () => { + jest.useFakeTimers(); + } ); + + afterAll( () => { + jest.useRealTimers(); + } ); + + it( 'copies the text to the clipboard and shows copied state', () => { + render( + + ); + + const button = screen.queryByRole( 'button', { + name: /Copy bank reference ID to clipboard/i, + } ); + + //Mock the clipboard API + Object.assign( navigator, { + clipboard: { + writeText: jest.fn(), + }, + } ); + + act( () => { + button?.click(); + } ); + + expect( navigator.clipboard.writeText ).toHaveBeenCalledWith( + 'test_bank_reference_id' + ); + expect( button ).toHaveClass( 'state--copied' ); + + act( () => { + jest.advanceTimersByTime( 2000 ); + } ); + + expect( button ).not.toHaveClass( 'state--copied' ); + } ); + } ); +} ); diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 5efbac48d1d..7d7714a6851 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -140,6 +140,10 @@ const DepositDateItem: React.FC< DepositDateItemProps > = ( { deposit } ) => { ) : ( From 3b4bcc9c18a1501392efadb2bd652a92053ade99 Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Fri, 13 Dec 2024 13:02:55 +0530 Subject: [PATCH 19/20] Use named exports as per TS guidelines --- client/components/copy-button/index.tsx | 7 ++++--- client/components/copy-button/test/index.test.tsx | 2 +- client/deposits/details/index.tsx | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/client/components/copy-button/index.tsx b/client/components/copy-button/index.tsx index 207a6767770..9bff44f5355 100644 --- a/client/components/copy-button/index.tsx +++ b/client/components/copy-button/index.tsx @@ -15,7 +15,10 @@ interface CopyButtonProps { label: string; } -const CopyButton: React.FC< CopyButtonProps > = ( { textToCopy, label } ) => { +export const CopyButton: React.FC< CopyButtonProps > = ( { + textToCopy, + label, +} ) => { // useRef() is used to store the timer reference for the setTimeout() function. const timerRef = useRef< NodeJS.Timeout | null >( null ); @@ -52,5 +55,3 @@ const CopyButton: React.FC< CopyButtonProps > = ( { textToCopy, label } ) => { ); }; - -export default CopyButton; diff --git a/client/components/copy-button/test/index.test.tsx b/client/components/copy-button/test/index.test.tsx index 06c7170de1e..eaaf7844e50 100644 --- a/client/components/copy-button/test/index.test.tsx +++ b/client/components/copy-button/test/index.test.tsx @@ -9,7 +9,7 @@ import { act, render, screen } from '@testing-library/react'; /** * Internal dependencies */ -import CopyButton from '..'; +import { CopyButton } from '..'; describe( 'CopyButton', () => { it( 'renders the button correctly', () => { diff --git a/client/deposits/details/index.tsx b/client/deposits/details/index.tsx index 7d7714a6851..e87af290938 100644 --- a/client/deposits/details/index.tsx +++ b/client/deposits/details/index.tsx @@ -30,7 +30,7 @@ import classNames from 'classnames'; import type { CachedDeposit } from 'types/deposits'; import { useDeposit } from 'data'; import TransactionsList from 'transactions/list'; -import CopyButton from 'components/copy-button'; +import { CopyButton } from 'components/copy-button'; import Page from 'components/page'; import ErrorBoundary from 'components/error-boundary'; import { TestModeNotice } from 'components/test-mode-notice'; From 8a4f35e2dae37b459378d242fe29be2a32771e5b Mon Sep 17 00:00:00 2001 From: Nagesh Pai Date: Fri, 13 Dec 2024 13:08:50 +0530 Subject: [PATCH 20/20] Add comments for props --- client/components/copy-button/index.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/client/components/copy-button/index.tsx b/client/components/copy-button/index.tsx index 9bff44f5355..0ec1fc3f76f 100644 --- a/client/components/copy-button/index.tsx +++ b/client/components/copy-button/index.tsx @@ -11,7 +11,14 @@ import classNames from 'classnames'; 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; }