Use CardNotice component for authorization notification in transaction details page

[mgascam]

Fixes #7748

Changes proposed in this Pull Request

• Use recently added CardNotice component for authorization notification in transaction details page.

Before

After

Testing instructions

1. As a merchant, go to Payments > Settings and enable Issue an authorization on checkout, and capture later
2. As a shopper, purchase an order. Take note of the order to use it in the next step.
3. As a merchant, navigate to Payments > Transactions > Uncaptured tab
4. Find the Authorization that matches your order and enter its details

To test an authorization that is blocked by fraud rules you can force isFraudOutcomeReview flag. In client/payment-details/summary/index.tsx:

const isFraudOutcomeReview = true;

5. Refresh the page.
6. The capture button should not be present and the UI should match the following screenshot:

Authorization blocked by fraud rules

---

• Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
• Covered with tests (or have a good reason not to test in description ☝️)
• Tested on mobile (or does not apply)

Post merge

• Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
• Add or update critical flows and testing instructions for critical flows, if applicable.
• Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

[botwoo]

Test the build

Option 1. Jetpack Beta

• Install and activate Jetpack Beta.
• Use this build by searching for PR number 7891 or branch name fix/7748-capture-notification-styles-are-broken in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.

---

Build info:

• Latest commit: b381cb6
• Build time: 2023-12-14 16:15:41 UTC

Note: the build is updated when a new commit is pushed to this PR.

[github-actions]

Size Change: -42 B (0%)

Total Size: 1.26 MB

Filename	Size	Change
release/woocommerce-payments/dist/index.js	287 kB	-42 B (0%)

ℹ️ View Unchanged

Filename	Size
release/woocommerce-payments/assets/css/admin.css	1.06 kB
release/woocommerce-payments/assets/css/success.css	158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css	1.8 kB
release/woocommerce-payments/dist/blocks-checkout.css	1.8 kB
release/woocommerce-payments/dist/blocks-checkout.js	85.5 kB
release/woocommerce-payments/dist/checkout-rtl.css	318 B
release/woocommerce-payments/dist/checkout.css	319 B
release/woocommerce-payments/dist/checkout.js	37.1 kB
release/woocommerce-payments/dist/index-rtl.css	36.8 kB
release/woocommerce-payments/dist/index.css	36.8 kB
release/woocommerce-payments/dist/multi-currency-analytics.js	1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css	3.4 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js	60.5 kB
release/woocommerce-payments/dist/multi-currency.css	3.4 kB
release/woocommerce-payments/dist/multi-currency.js	55.7 kB
release/woocommerce-payments/dist/order-rtl.css	676 B
release/woocommerce-payments/dist/order.css	679 B
release/woocommerce-payments/dist/order.js	41.7 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css	1.31 kB
release/woocommerce-payments/dist/payment-gateways.css	1.31 kB
release/woocommerce-payments/dist/payment-gateways.js	39.3 kB
release/woocommerce-payments/dist/payment-request-rtl.css	153 B
release/woocommerce-payments/dist/payment-request.css	153 B
release/woocommerce-payments/dist/payment-request.js	13.6 kB
release/woocommerce-payments/dist/product-details.js	919 B
release/woocommerce-payments/dist/settings-rtl.css	10.4 kB
release/woocommerce-payments/dist/settings.css	10.4 kB
release/woocommerce-payments/dist/settings.js	233 kB
release/woocommerce-payments/dist/subscription-edit-page.js	669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css	519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css	519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js	20.4 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js	710 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css	117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css	117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js	19.5 kB
release/woocommerce-payments/dist/tos-rtl.css	230 B
release/woocommerce-payments/dist/tos.css	231 B
release/woocommerce-payments/dist/tos.js	22 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css	153 B
release/woocommerce-payments/dist/woopay-express-button.css	153 B
release/woocommerce-payments/dist/woopay-express-button.js	52.6 kB
release/woocommerce-payments/dist/woopay-rtl.css	4.18 kB
release/woocommerce-payments/dist/woopay.css	4.19 kB
release/woocommerce-payments/dist/woopay.js	71.8 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css	622 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js	812 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js	2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js	1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js	522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js	581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js	160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css	2.32 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js	13.8 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css	2.32 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css	1.03 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css	291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css	403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css	3.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css	299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css	742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css	572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css	411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js	544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js	9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js	6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js	3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js	544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js	2.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js	22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js	11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js	1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js	502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js	355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js	429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js	1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js	781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js	1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js	1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css	392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js	3.05 kB

_{compressed-size-action}

[kalessil]

I miss a few things in this PR:

• changelog
• testing instruction for fraud prevention case

[mgascam]

I miss a few things in this PR:

• changelog
• testing instruction for fraud prevention case

Thanks @kalessil. Changelog added. I also tried to add testing instructions for fraud prevention rules as explained in this PR #5888, but no luck. The thing is that the payment lands in the blocked state after I set up the fraud prevention rule. So I updated the testing instructions to explain how to force the flag that controls the fraud prevention case.

[kalessil]

LGTM and tests well.