From 5fa499f9181d959e836e5466eb3cdac91a03158e Mon Sep 17 00:00:00 2001 From: Miguel Gasca Date: Tue, 12 Dec 2023 18:56:32 +0100 Subject: [PATCH 1/3] Use CardNotice component for authorization notification --- client/payment-details/summary/index.tsx | 133 +++++++++++------------ 1 file changed, 62 insertions(+), 71 deletions(-) diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx index 6112a27e86f..34887da95db 100644 --- a/client/payment-details/summary/index.tsx +++ b/client/payment-details/summary/index.tsx @@ -5,13 +5,7 @@ */ import { __ } from '@wordpress/i18n'; import { dateI18n } from '@wordpress/date'; -import { - Card, - CardBody, - CardFooter, - CardDivider, - Flex, -} from '@wordpress/components'; +import { Card, CardBody, CardDivider, Flex } from '@wordpress/components'; import moment from 'moment'; import React, { useContext } from 'react'; import { createInterpolateElement } from '@wordpress/element'; @@ -55,6 +49,7 @@ import MissingOrderNotice from 'wcpay/payment-details/summary/missing-order-noti import DisputeAwaitingResponseDetails from '../dispute-details/dispute-awaiting-response-details'; import DisputeResolutionFooter from '../dispute-details/dispute-resolution-footer'; import ErrorBoundary from 'components/error-boundary'; +import CardNotice from 'wcpay/components/card-notice'; declare const window: any; @@ -508,73 +503,69 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( { authorization && ! authorization.captured && ( - -
-
- { createInterpolateElement( - __( - 'You must capture this charge within the next', - 'woocommerce-payments' - ), - { - a: ( - // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-no-target-blank - - ), + - - { moment - .utc( authorization.created ) - .add( 7, 'days' ) - .fromNow( true ) } - - - { isFraudOutcomeReview && - `. ${ __( - 'Approving this transaction will capture the charge.', - 'woocommerce-payments' - ) }` } -
- - { ! isFraudOutcomeReview && ( -
- { - wcpayTracks.recordEvent( - 'payments_transactions_details_capture_charge_button_click', - { - payment_intent_id: - charge.payment_intent, - } - ); - } } + buttonIsPrimary={ true } + buttonIsSmall={ false } + onClick={ () => { + wcpayTracks.recordEvent( + 'payments_transactions_details_capture_charge_button_click', + { + payment_intent_id: + charge.payment_intent, + } + ); + } } + /> + ) : ( + <> + ) + } + > + { createInterpolateElement( + __( + 'You must capture this charge within the next', + 'woocommerce-payments' + ), + { + a: ( + // eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-no-target-blank + -
+ ), + } + ) }{ ' ' } + - + > + + { moment + .utc( authorization.created ) + .add( 7, 'days' ) + .fromNow( true ) } + + + { isFraudOutcomeReview && + `. ${ __( + 'Approving this transaction will capture the charge.', + 'woocommerce-payments' + ) }` } + ) } From fc2337105a1c6bc99ab136a1b1a1e2d7dd51e536 Mon Sep 17 00:00:00 2001 From: Miguel Gasca Date: Wed, 13 Dec 2023 14:03:22 +0100 Subject: [PATCH 2/3] Add changelog --- changelog/fix-7748-capture-notification-styles-are-broken | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/fix-7748-capture-notification-styles-are-broken diff --git a/changelog/fix-7748-capture-notification-styles-are-broken b/changelog/fix-7748-capture-notification-styles-are-broken new file mode 100644 index 00000000000..348106f98f8 --- /dev/null +++ b/changelog/fix-7748-capture-notification-styles-are-broken @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fixed broken styles in authorization capture notifications From 21c57d776ce4f57b1c611a2f7eb76e846450e5d4 Mon Sep 17 00:00:00 2001 From: Miguel Gasca Date: Wed, 13 Dec 2023 14:51:37 +0100 Subject: [PATCH 3/3] Update snapshots --- .../test/__snapshots__/index.test.tsx.snap | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap index 02f35f6c1db..30c5c237e49 100644 --- a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap +++ b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap @@ -244,15 +244,15 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca