From 0af42f558c730ee97a461931c06360026241f657 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 31 Dec 2023 12:07:35 +0000
Subject: [PATCH 1/7] Update version and add changelog entries for release
 7.0.0

---
 changelog.txt                                 | 56 ++++++++++++++++++
 changelog/7588-express-checkout-utilities     |  4 --
 .../add-334-test-mode-notice-order-details    |  4 --
 ...ancel-authorizations-if-order-is-cancelled |  4 --
 ...-7248-refund-transaction-from-details-page |  4 --
 changelog/add-7591-missing-columns-export-csv |  4 --
 changelog/add-7846-test-mode-confirm-modal    |  4 --
 changelog/add-thank-you-page-tracks           |  4 --
 changelog/cleanup-devtools-flags              |  4 --
 changelog/cleanup-is-upe-enabled-logic        |  4 --
 changelog/cleanup-redundant-script-enqueueing |  4 --
 changelog/cleanup-upe-checkout-class          |  4 --
 changelog/cleanup-upe-gateways-II             |  4 --
 changelog/cleanup-upe-gateways-part-1         |  4 --
 changelog/deferred-intent                     |  4 --
 .../dev-3468-allow-reset-account-management   |  4 --
 changelog/dev-bump-wc-version-8-4-0           |  4 --
 changelog/dev-fix-e2e-tests-on-wc-7-7         |  5 --
 changelog/dev-fix-multi-currency-e2e-tests    |  5 --
 changelog/dev-test-ci-without-3ds1            |  4 --
 changelog/e2e-7349-currency-switcher-widget   |  4 --
 ...2e-7382-spec-merchant-multi-currency-setup |  4 --
 changelog/fix-3693-qualitative-feedback-note  |  4 --
 ...700-remove-currency-sign-modification-code |  4 --
 changelog/fix-6782-support-phone-dev-mode     |  4 --
 ...ror-while-trying-to-capture-partial-amount |  4 --
 ...01-descriptive-error-message-on-invalid-pm |  4 --
 .../fix-7588-woopay-subscription-variation    |  5 --
 .../fix-7592-update-transaction-order-id      |  4 --
 changelog/fix-7595-reports-customers          |  4 --
 ...748-capture-notification-styles-are-broken |  4 --
 .../fix-7750-include-discount-in-tooltip      |  4 --
 changelog/fix-7834-zero-decimals-csv-export   |  4 --
 .../fix-7838-fraud-filters-html-encode-bug    |  4 --
 changelog/fix-7839-deposits-rest-api-docs     |  4 --
 ...3-woopay-automatewoo-referrals-integration |  4 --
 ...ect-account-overview-account-type-nullable |  5 --
 changelog/fix-account-currency-hook           |  4 --
 changelog/fix-apple-pay-including-tax         |  4 --
 changelog/fix-jstest-regression-pr-7851       |  5 --
 .../fix-jsx-account-status-error-messages     |  4 --
 ...r-order-and-first-party-auth-compatibility |  4 --
 ...erview-account-balances-on-instant-deposit |  4 --
 changelog/fix-test-support-phone              |  5 --
 changelog/fix-update-payment-assets           |  4 --
 .../partially-ccleanup-legacy-upe-and-card    |  4 --
 changelog/remove-flag-usage                   |  4 --
 .../revert-file-needed-for-plugin-update      |  5 --
 changelog/revert-prefetch-session-for-button  |  4 --
 changelog/subscriptions-6.6.0-1               |  4 --
 changelog/subscriptions-6.6.0-2               |  4 --
 changelog/subscriptions-core-6.6.0            |  4 --
 changelog/subscriptions-core-6.6.0-3          |  4 --
 changelog/subscriptions-core-6.6.0-4          |  4 --
 changelog/subscriptions-core-6.6.0-5          |  4 --
 changelog/subscriptions-core-6.6.0-6          |  4 --
 changelog/subscriptions-core-6.6.0-7          |  4 --
 changelog/subscriptions-core-6.6.0-8          |  4 --
 changelog/update-4163-compatibility-service   |  4 --
 ...-card-behavior-if-affected-by-other-config |  4 --
 ...date-6325-fraud-risk-link-text-in-settings |  4 --
 ...-change-setup-refund-policy-note-into-task |  4 --
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 readme.txt                                    | 58 ++++++++++++++++++-
 woocommerce-payments.php                      |  2 +-
 66 files changed, 117 insertions(+), 256 deletions(-)
 delete mode 100644 changelog/7588-express-checkout-utilities
 delete mode 100644 changelog/add-334-test-mode-notice-order-details
 delete mode 100644 changelog/add-5605-cancel-authorizations-if-order-is-cancelled
 delete mode 100644 changelog/add-7248-refund-transaction-from-details-page
 delete mode 100644 changelog/add-7591-missing-columns-export-csv
 delete mode 100644 changelog/add-7846-test-mode-confirm-modal
 delete mode 100644 changelog/add-thank-you-page-tracks
 delete mode 100644 changelog/cleanup-devtools-flags
 delete mode 100644 changelog/cleanup-is-upe-enabled-logic
 delete mode 100644 changelog/cleanup-redundant-script-enqueueing
 delete mode 100644 changelog/cleanup-upe-checkout-class
 delete mode 100644 changelog/cleanup-upe-gateways-II
 delete mode 100644 changelog/cleanup-upe-gateways-part-1
 delete mode 100644 changelog/deferred-intent
 delete mode 100644 changelog/dev-3468-allow-reset-account-management
 delete mode 100644 changelog/dev-bump-wc-version-8-4-0
 delete mode 100644 changelog/dev-fix-e2e-tests-on-wc-7-7
 delete mode 100644 changelog/dev-fix-multi-currency-e2e-tests
 delete mode 100644 changelog/dev-test-ci-without-3ds1
 delete mode 100644 changelog/e2e-7349-currency-switcher-widget
 delete mode 100644 changelog/e2e-7382-spec-merchant-multi-currency-setup
 delete mode 100644 changelog/fix-3693-qualitative-feedback-note
 delete mode 100644 changelog/fix-6700-remove-currency-sign-modification-code
 delete mode 100644 changelog/fix-6782-support-phone-dev-mode
 delete mode 100644 changelog/fix-6806-authorizations-level-3-data-error-while-trying-to-capture-partial-amount
 delete mode 100644 changelog/fix-7301-descriptive-error-message-on-invalid-pm
 delete mode 100644 changelog/fix-7588-woopay-subscription-variation
 delete mode 100644 changelog/fix-7592-update-transaction-order-id
 delete mode 100644 changelog/fix-7595-reports-customers
 delete mode 100644 changelog/fix-7748-capture-notification-styles-are-broken
 delete mode 100644 changelog/fix-7750-include-discount-in-tooltip
 delete mode 100644 changelog/fix-7834-zero-decimals-csv-export
 delete mode 100644 changelog/fix-7838-fraud-filters-html-encode-bug
 delete mode 100644 changelog/fix-7839-deposits-rest-api-docs
 delete mode 100644 changelog/fix-7913-woopay-automatewoo-referrals-integration
 delete mode 100644 changelog/fix-7920-correct-account-overview-account-type-nullable
 delete mode 100644 changelog/fix-account-currency-hook
 delete mode 100644 changelog/fix-apple-pay-including-tax
 delete mode 100644 changelog/fix-jstest-regression-pr-7851
 delete mode 100644 changelog/fix-jsx-account-status-error-messages
 delete mode 100644 changelog/fix-pay-for-order-and-first-party-auth-compatibility
 delete mode 100644 changelog/fix-refresh-payments-overview-account-balances-on-instant-deposit
 delete mode 100644 changelog/fix-test-support-phone
 delete mode 100644 changelog/fix-update-payment-assets
 delete mode 100644 changelog/partially-ccleanup-legacy-upe-and-card
 delete mode 100644 changelog/remove-flag-usage
 delete mode 100644 changelog/revert-file-needed-for-plugin-update
 delete mode 100644 changelog/revert-prefetch-session-for-button
 delete mode 100644 changelog/subscriptions-6.6.0-1
 delete mode 100644 changelog/subscriptions-6.6.0-2
 delete mode 100644 changelog/subscriptions-core-6.6.0
 delete mode 100644 changelog/subscriptions-core-6.6.0-3
 delete mode 100644 changelog/subscriptions-core-6.6.0-4
 delete mode 100644 changelog/subscriptions-core-6.6.0-5
 delete mode 100644 changelog/subscriptions-core-6.6.0-6
 delete mode 100644 changelog/subscriptions-core-6.6.0-7
 delete mode 100644 changelog/subscriptions-core-6.6.0-8
 delete mode 100644 changelog/update-4163-compatibility-service
 delete mode 100644 changelog/update-6320-rule-card-behavior-if-affected-by-other-config
 delete mode 100644 changelog/update-6325-fraud-risk-link-text-in-settings
 delete mode 100644 changelog/update-change-setup-refund-policy-note-into-task

diff --git a/changelog.txt b/changelog.txt
index 73e649d188e..68da1290131 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -1,5 +1,61 @@
 *** WooPayments Changelog ***
 
+= 7.0.0 - 2024-01-03 =
+* Add - Add Account Management tools with reset account functionality for partially onboarded accounts.
+* Add - Adding Compatibility Service to assist with flagging possible compatibility issues in the future.
+* Add - Add refund controls to transaction details view
+* Add - Add test mode notice in page order detail.
+* Add - Display a Confirmaton Modal on enabling Test Mode
+* Add - Introduce Customer currency, Deposit currency, Amount in Customer Currency and Deposit ID columns to the Transaction list UI and CSV export
+* Fix - Allow test phone number as Support Phone in Dev mode
+* Fix - Avoid using the removed deferred UPE flag
+* Fix - Ensure proper backfilling of subscription metadata (i.e. dates and cache) to the postmeta table when HPOS is enabled and compatibility mode (data syncing) is turned on.
+* Fix - Fetch and update the `_cancelled_email_sent` meta in a HPOS compatibile way.
+* Fix - fix: account currency hook return value
+* Fix - Fix account status error messages with links.
+* Fix - Fix country names with accents not showing correctly on international country fraud filter
+* Fix - Fix currency negative sign position on JS rendered amounts
+* Fix - Fixed a Level 3 error occurring during the capture of an authorization for amounts lower than the initial authorization amount.
+* Fix - Fixed Apple Pay Double Tax Calculation Issue
+* Fix - Fixed broken styles in authorization capture notifications
+* Fix - Fix incorrect amounts caused by zero-decimal currencies on Transactions, Deposits and Deposits CSV export
+* Fix - Fix missing customer data from transactions report
+* Fix - Fix missing order number in transaction reports CSV
+* Fix - Fix WooPay integration with AutomateWoo - Refer a Friend extension.
+* Fix - Improved error message for invalid payment method
+* Fix - Include discount fee in fees tooltip
+* Fix - Introduce WC_Payments_Express_Checkout_Button_Utils class.
+* Fix - Pass the pay-for-order params to get the pre-fetch session data
+* Fix - Prevents a PHP fatal error that occurs when the cart contains a renewal order item that no longer exists.
+* Fix - Resolved an issue that would cause undefined $current_page, $max_num_pages, and $paginate variable errors when viewing a page with the subscriptions-shortcode.
+* Fix - Revemoved pre-fretch session for button to prevent draft order creation
+* Fix - Update account balances on the Payments Overview screen when an instant deposit is requested
+* Fix - Update Qualitative Feedback note to have more efficient sql query.
+* Fix - When HPOS is enabled and data compatibility mode is turned on, make sure subscription date changes made to postmeta are synced to orders_meta table.
+* Fix - When using the checkout block to pay for renewal orders, ensure the order's cart hash is updated to make sure the existing order can be used.
+* Update - Actualized cards-related assets for settings and transactions pages.
+* Update - Cleanup the deprecated payment gateway processing - part II
+* Update - Cleanup the deprecated payment gateway processing - part III
+* Update - Confirmation when cancelling order with pending authorization. Automatic order changes submission if confirmed.
+* Update - Updates the anchor text for the fraud and risk tools documentation link on the Payments Settings page.
+* Update - Updates the behavior and display of the international IP address rule card if the rule is being affected by the WooCommerce core selling locations general option.
+* Dev - Add e2e tests for the currency switcher widget.
+* Dev - Added documentation for deposits REST API endpoints.
+* Dev - Bump WC tested up to version to 8.4.0.
+* Dev - Cleanup enqueueing of the scripts which were removed
+* Dev - Cleanup the deprecated payment gateway processing - part IV
+* Dev - Cleanup the deprecated payment gateway processing - part V
+* Dev - Cleanup the deprecated payment gateway processing - part VI
+* Dev - Comment: Fix declined 3DS card E2E test.
+* Dev - Deprecate the WC_Subscriptions_Synchroniser::add_to_recurring_cart_key(). Use WC_Subscriptions_Synchroniser::add_to_recurring_product_grouping_key() instead.
+* Dev - E2E test - Merchant facing: Multi-currency setup
+* Dev - Improve E2E checkout tests
+* Dev - Introduce a new wcs_get_subscription_grouping_key() function to generate a unique key for a subscription based on its billing schedule. This function uses the existing recurring cart key concept.
+* Dev - Remove "Set-up refund policy" Inbox note as superfluous.
+* Dev - remove unused factor flag for deferred UPE
+* Dev - Thank you page Tracks event
+* Dev - Updated subscriptions-core to version 6.6.0
+
 = 6.9.2 - 2023-12-14 =
 * Add - Notice is added when merchant has funds that are not yet available for deposit.
 * Add - Show a deposit schedule notice on the deposits list page to indicate that future deposits can be expected.
diff --git a/changelog/7588-express-checkout-utilities b/changelog/7588-express-checkout-utilities
deleted file mode 100644
index 143b670d60c..00000000000
--- a/changelog/7588-express-checkout-utilities
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Introduce WC_Payments_Express_Checkout_Button_Utils class.
diff --git a/changelog/add-334-test-mode-notice-order-details b/changelog/add-334-test-mode-notice-order-details
deleted file mode 100644
index de22a34c323..00000000000
--- a/changelog/add-334-test-mode-notice-order-details
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add test mode notice in page order detail.
diff --git a/changelog/add-5605-cancel-authorizations-if-order-is-cancelled b/changelog/add-5605-cancel-authorizations-if-order-is-cancelled
deleted file mode 100644
index 879ed83d30f..00000000000
--- a/changelog/add-5605-cancel-authorizations-if-order-is-cancelled
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Confirmation when cancelling order with pending authorization. Automatic order changes submission if confirmed.
diff --git a/changelog/add-7248-refund-transaction-from-details-page b/changelog/add-7248-refund-transaction-from-details-page
deleted file mode 100644
index bfd753860e8..00000000000
--- a/changelog/add-7248-refund-transaction-from-details-page
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add refund controls to transaction details view
diff --git a/changelog/add-7591-missing-columns-export-csv b/changelog/add-7591-missing-columns-export-csv
deleted file mode 100644
index 668644d2cfc..00000000000
--- a/changelog/add-7591-missing-columns-export-csv
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Introduce Customer currency, Deposit currency, Amount in Customer Currency and Deposit ID columns to the Transaction list UI and CSV export
diff --git a/changelog/add-7846-test-mode-confirm-modal b/changelog/add-7846-test-mode-confirm-modal
deleted file mode 100644
index 0725c55b1aa..00000000000
--- a/changelog/add-7846-test-mode-confirm-modal
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Display a Confirmaton Modal on enabling Test Mode
diff --git a/changelog/add-thank-you-page-tracks b/changelog/add-thank-you-page-tracks
deleted file mode 100644
index 31888d5d917..00000000000
--- a/changelog/add-thank-you-page-tracks
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Thank you page Tracks event
diff --git a/changelog/cleanup-devtools-flags b/changelog/cleanup-devtools-flags
deleted file mode 100644
index adbf7f71958..00000000000
--- a/changelog/cleanup-devtools-flags
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-remove unused factor flag for deferred UPE
diff --git a/changelog/cleanup-is-upe-enabled-logic b/changelog/cleanup-is-upe-enabled-logic
deleted file mode 100644
index 79bae6fa471..00000000000
--- a/changelog/cleanup-is-upe-enabled-logic
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Cleanup the deprecated payment gateway processing - part III
diff --git a/changelog/cleanup-redundant-script-enqueueing b/changelog/cleanup-redundant-script-enqueueing
deleted file mode 100644
index 20c952d459e..00000000000
--- a/changelog/cleanup-redundant-script-enqueueing
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Cleanup enqueueing of the scripts which were removed
diff --git a/changelog/cleanup-upe-checkout-class b/changelog/cleanup-upe-checkout-class
deleted file mode 100644
index 95cfa040bf5..00000000000
--- a/changelog/cleanup-upe-checkout-class
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Cleanup the deprecated payment gateway processing - part IV
diff --git a/changelog/cleanup-upe-gateways-II b/changelog/cleanup-upe-gateways-II
deleted file mode 100644
index 16f3e3cd17f..00000000000
--- a/changelog/cleanup-upe-gateways-II
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Cleanup the deprecated payment gateway processing - part VI
diff --git a/changelog/cleanup-upe-gateways-part-1 b/changelog/cleanup-upe-gateways-part-1
deleted file mode 100644
index d449f2047df..00000000000
--- a/changelog/cleanup-upe-gateways-part-1
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Cleanup the deprecated payment gateway processing - part V
diff --git a/changelog/deferred-intent b/changelog/deferred-intent
deleted file mode 100644
index ef5442b5f17..00000000000
--- a/changelog/deferred-intent
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Improve E2E checkout tests
diff --git a/changelog/dev-3468-allow-reset-account-management b/changelog/dev-3468-allow-reset-account-management
deleted file mode 100644
index ed030674f95..00000000000
--- a/changelog/dev-3468-allow-reset-account-management
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Add Account Management tools with reset account functionality for partially onboarded accounts.
diff --git a/changelog/dev-bump-wc-version-8-4-0 b/changelog/dev-bump-wc-version-8-4-0
deleted file mode 100644
index 5c00289cc5b..00000000000
--- a/changelog/dev-bump-wc-version-8-4-0
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Bump WC tested up to version to 8.4.0.
\ No newline at end of file
diff --git a/changelog/dev-fix-e2e-tests-on-wc-7-7 b/changelog/dev-fix-e2e-tests-on-wc-7-7
deleted file mode 100644
index 15b4d3b72e9..00000000000
--- a/changelog/dev-fix-e2e-tests-on-wc-7-7
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: dev
-Comment: Fix e2e tests on WC 7.7.
-
-
diff --git a/changelog/dev-fix-multi-currency-e2e-tests b/changelog/dev-fix-multi-currency-e2e-tests
deleted file mode 100644
index 45ac7deccc1..00000000000
--- a/changelog/dev-fix-multi-currency-e2e-tests
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: dev
-Comment: Fix multi-currency e2e tests.
-
-
diff --git a/changelog/dev-test-ci-without-3ds1 b/changelog/dev-test-ci-without-3ds1
deleted file mode 100644
index f2d4b778788..00000000000
--- a/changelog/dev-test-ci-without-3ds1
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Comment: Fix declined 3DS card E2E test.
diff --git a/changelog/e2e-7349-currency-switcher-widget b/changelog/e2e-7349-currency-switcher-widget
deleted file mode 100644
index 1bf9af1d6c3..00000000000
--- a/changelog/e2e-7349-currency-switcher-widget
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Add e2e tests for the currency switcher widget.
diff --git a/changelog/e2e-7382-spec-merchant-multi-currency-setup b/changelog/e2e-7382-spec-merchant-multi-currency-setup
deleted file mode 100644
index b079e3e6e8e..00000000000
--- a/changelog/e2e-7382-spec-merchant-multi-currency-setup
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-E2E test - Merchant facing: Multi-currency setup
diff --git a/changelog/fix-3693-qualitative-feedback-note b/changelog/fix-3693-qualitative-feedback-note
deleted file mode 100644
index 8862cc0c961..00000000000
--- a/changelog/fix-3693-qualitative-feedback-note
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Update Qualitative Feedback note to have more efficient sql query.
diff --git a/changelog/fix-6700-remove-currency-sign-modification-code b/changelog/fix-6700-remove-currency-sign-modification-code
deleted file mode 100644
index 74634338357..00000000000
--- a/changelog/fix-6700-remove-currency-sign-modification-code
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix currency negative sign position on JS rendered amounts
diff --git a/changelog/fix-6782-support-phone-dev-mode b/changelog/fix-6782-support-phone-dev-mode
deleted file mode 100644
index 42166e6419d..00000000000
--- a/changelog/fix-6782-support-phone-dev-mode
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Allow test phone number as Support Phone in Dev mode
diff --git a/changelog/fix-6806-authorizations-level-3-data-error-while-trying-to-capture-partial-amount b/changelog/fix-6806-authorizations-level-3-data-error-while-trying-to-capture-partial-amount
deleted file mode 100644
index 870c1de09f2..00000000000
--- a/changelog/fix-6806-authorizations-level-3-data-error-while-trying-to-capture-partial-amount
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fixed a Level 3 error occurring during the capture of an authorization for amounts lower than the initial authorization amount.
diff --git a/changelog/fix-7301-descriptive-error-message-on-invalid-pm b/changelog/fix-7301-descriptive-error-message-on-invalid-pm
deleted file mode 100644
index 798235980af..00000000000
--- a/changelog/fix-7301-descriptive-error-message-on-invalid-pm
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Improved error message for invalid payment method
diff --git a/changelog/fix-7588-woopay-subscription-variation b/changelog/fix-7588-woopay-subscription-variation
deleted file mode 100644
index 06f44dc9845..00000000000
--- a/changelog/fix-7588-woopay-subscription-variation
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: fix
-Comment: Edge case adding subscription_variation to WooPay button supported types
-
-
diff --git a/changelog/fix-7592-update-transaction-order-id b/changelog/fix-7592-update-transaction-order-id
deleted file mode 100644
index 0ef8cffd17f..00000000000
--- a/changelog/fix-7592-update-transaction-order-id
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix missing order number in transaction reports CSV
diff --git a/changelog/fix-7595-reports-customers b/changelog/fix-7595-reports-customers
deleted file mode 100644
index e4ab131cb21..00000000000
--- a/changelog/fix-7595-reports-customers
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix missing customer data from transactions report
diff --git a/changelog/fix-7748-capture-notification-styles-are-broken b/changelog/fix-7748-capture-notification-styles-are-broken
deleted file mode 100644
index 348106f98f8..00000000000
--- a/changelog/fix-7748-capture-notification-styles-are-broken
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fixed broken styles in authorization capture notifications
diff --git a/changelog/fix-7750-include-discount-in-tooltip b/changelog/fix-7750-include-discount-in-tooltip
deleted file mode 100644
index b600a611e92..00000000000
--- a/changelog/fix-7750-include-discount-in-tooltip
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Include discount fee in fees tooltip
diff --git a/changelog/fix-7834-zero-decimals-csv-export b/changelog/fix-7834-zero-decimals-csv-export
deleted file mode 100644
index 1e5b2a1cf87..00000000000
--- a/changelog/fix-7834-zero-decimals-csv-export
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix incorrect amounts caused by zero-decimal currencies on Transactions, Deposits and Deposits CSV export
diff --git a/changelog/fix-7838-fraud-filters-html-encode-bug b/changelog/fix-7838-fraud-filters-html-encode-bug
deleted file mode 100644
index 1b358176fe8..00000000000
--- a/changelog/fix-7838-fraud-filters-html-encode-bug
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix country names with accents not showing correctly on international country fraud filter
diff --git a/changelog/fix-7839-deposits-rest-api-docs b/changelog/fix-7839-deposits-rest-api-docs
deleted file mode 100644
index b50f1644a81..00000000000
--- a/changelog/fix-7839-deposits-rest-api-docs
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Added documentation for deposits REST API endpoints.
diff --git a/changelog/fix-7913-woopay-automatewoo-referrals-integration b/changelog/fix-7913-woopay-automatewoo-referrals-integration
deleted file mode 100644
index bace9a2cc9b..00000000000
--- a/changelog/fix-7913-woopay-automatewoo-referrals-integration
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix WooPay integration with AutomateWoo - Refer a Friend extension.
diff --git a/changelog/fix-7920-correct-account-overview-account-type-nullable b/changelog/fix-7920-correct-account-overview-account-type-nullable
deleted file mode 100644
index 5db6d1382f4..00000000000
--- a/changelog/fix-7920-correct-account-overview-account-type-nullable
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: dev
-Comment: No changelog entry required – minor TS interface fix with no user-facing changes
-
-
diff --git a/changelog/fix-account-currency-hook b/changelog/fix-account-currency-hook
deleted file mode 100644
index 23d9628b19f..00000000000
--- a/changelog/fix-account-currency-hook
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-fix: account currency hook return value
diff --git a/changelog/fix-apple-pay-including-tax b/changelog/fix-apple-pay-including-tax
deleted file mode 100644
index 59afc2bef4f..00000000000
--- a/changelog/fix-apple-pay-including-tax
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fixed Apple Pay Double Tax Calculation Issue
diff --git a/changelog/fix-jstest-regression-pr-7851 b/changelog/fix-jstest-regression-pr-7851
deleted file mode 100644
index 4308b603c02..00000000000
--- a/changelog/fix-jstest-regression-pr-7851
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: dev
-Comment: Fix JS regression test in PR 7851
-
-
diff --git a/changelog/fix-jsx-account-status-error-messages b/changelog/fix-jsx-account-status-error-messages
deleted file mode 100644
index a45adc8b5ab..00000000000
--- a/changelog/fix-jsx-account-status-error-messages
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Fix account status error messages with links.
diff --git a/changelog/fix-pay-for-order-and-first-party-auth-compatibility b/changelog/fix-pay-for-order-and-first-party-auth-compatibility
deleted file mode 100644
index 26182c064d4..00000000000
--- a/changelog/fix-pay-for-order-and-first-party-auth-compatibility
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Pass the pay-for-order params to get the pre-fetch session data
diff --git a/changelog/fix-refresh-payments-overview-account-balances-on-instant-deposit b/changelog/fix-refresh-payments-overview-account-balances-on-instant-deposit
deleted file mode 100644
index 59ba1fb0bdd..00000000000
--- a/changelog/fix-refresh-payments-overview-account-balances-on-instant-deposit
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Update account balances on the Payments Overview screen when an instant deposit is requested
diff --git a/changelog/fix-test-support-phone b/changelog/fix-test-support-phone
deleted file mode 100644
index 97abae072f7..00000000000
--- a/changelog/fix-test-support-phone
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: fix
-Comment: Modified the test phone numbers supported by Stripe.
-
-
diff --git a/changelog/fix-update-payment-assets b/changelog/fix-update-payment-assets
deleted file mode 100644
index 0b45545b774..00000000000
--- a/changelog/fix-update-payment-assets
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Actualized cards-related assets for settings and transactions pages.
diff --git a/changelog/partially-ccleanup-legacy-upe-and-card b/changelog/partially-ccleanup-legacy-upe-and-card
deleted file mode 100644
index 9e5386f594e..00000000000
--- a/changelog/partially-ccleanup-legacy-upe-and-card
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: update
-
-Cleanup the deprecated payment gateway processing - part II
diff --git a/changelog/remove-flag-usage b/changelog/remove-flag-usage
deleted file mode 100644
index cab11239829..00000000000
--- a/changelog/remove-flag-usage
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Avoid using the removed deferred UPE flag
diff --git a/changelog/revert-file-needed-for-plugin-update b/changelog/revert-file-needed-for-plugin-update
deleted file mode 100644
index f4e5d1e3224..00000000000
--- a/changelog/revert-file-needed-for-plugin-update
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: dev
-Comment: This is the file revert to avoid failures on plugin update. This is a temporary solution. Both removal & revert happen on develop meaning there is no change to the outside world.
-
-
diff --git a/changelog/revert-prefetch-session-for-button b/changelog/revert-prefetch-session-for-button
deleted file mode 100644
index bcb2e97e61e..00000000000
--- a/changelog/revert-prefetch-session-for-button
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: fix
-
-Revemoved pre-fretch session for button to prevent draft order creation
diff --git a/changelog/subscriptions-6.6.0-1 b/changelog/subscriptions-6.6.0-1
deleted file mode 100644
index 9c70ea3d4ce..00000000000
--- a/changelog/subscriptions-6.6.0-1
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Deprecate the WC_Subscriptions_Synchroniser::add_to_recurring_cart_key(). Use WC_Subscriptions_Synchroniser::add_to_recurring_product_grouping_key() instead.
diff --git a/changelog/subscriptions-6.6.0-2 b/changelog/subscriptions-6.6.0-2
deleted file mode 100644
index 98a24e2a8d8..00000000000
--- a/changelog/subscriptions-6.6.0-2
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Introduce a new wcs_get_subscription_grouping_key() function to generate a unique key for a subscription based on its billing schedule. This function uses the existing recurring cart key concept.
diff --git a/changelog/subscriptions-core-6.6.0 b/changelog/subscriptions-core-6.6.0
deleted file mode 100644
index 192de7697f3..00000000000
--- a/changelog/subscriptions-core-6.6.0
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: dev
-
-Updated subscriptions-core to version 6.6.0
diff --git a/changelog/subscriptions-core-6.6.0-3 b/changelog/subscriptions-core-6.6.0-3
deleted file mode 100644
index 39e3728713e..00000000000
--- a/changelog/subscriptions-core-6.6.0-3
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Fetch and update the `_cancelled_email_sent` meta in a HPOS compatibile way.
diff --git a/changelog/subscriptions-core-6.6.0-4 b/changelog/subscriptions-core-6.6.0-4
deleted file mode 100644
index adf5488ac54..00000000000
--- a/changelog/subscriptions-core-6.6.0-4
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Ensure proper backfilling of subscription metadata (i.e. dates and cache) to the postmeta table when HPOS is enabled and compatibility mode (data syncing) is turned on.
diff --git a/changelog/subscriptions-core-6.6.0-5 b/changelog/subscriptions-core-6.6.0-5
deleted file mode 100644
index fc15acdb576..00000000000
--- a/changelog/subscriptions-core-6.6.0-5
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Resolved an issue that would cause undefined $current_page, $max_num_pages, and $paginate variable errors when viewing a page with the subscriptions-shortcode.
diff --git a/changelog/subscriptions-core-6.6.0-6 b/changelog/subscriptions-core-6.6.0-6
deleted file mode 100644
index df965094736..00000000000
--- a/changelog/subscriptions-core-6.6.0-6
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-When HPOS is enabled and data compatibility mode is turned on, make sure subscription date changes made to postmeta are synced to orders_meta table.
diff --git a/changelog/subscriptions-core-6.6.0-7 b/changelog/subscriptions-core-6.6.0-7
deleted file mode 100644
index 96c2cae1f2c..00000000000
--- a/changelog/subscriptions-core-6.6.0-7
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-Prevents a PHP fatal error that occurs when the cart contains a renewal order item that no longer exists.
diff --git a/changelog/subscriptions-core-6.6.0-8 b/changelog/subscriptions-core-6.6.0-8
deleted file mode 100644
index a2ffa0feb0c..00000000000
--- a/changelog/subscriptions-core-6.6.0-8
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: fix
-
-When using the checkout block to pay for renewal orders, ensure the order's cart hash is updated to make sure the existing order can be used.
diff --git a/changelog/update-4163-compatibility-service b/changelog/update-4163-compatibility-service
deleted file mode 100644
index 3a524da05ae..00000000000
--- a/changelog/update-4163-compatibility-service
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: minor
-Type: add
-
-Adding Compatibility Service to assist with flagging possible compatibility issues in the future.
diff --git a/changelog/update-6320-rule-card-behavior-if-affected-by-other-config b/changelog/update-6320-rule-card-behavior-if-affected-by-other-config
deleted file mode 100644
index 3755be13f4f..00000000000
--- a/changelog/update-6320-rule-card-behavior-if-affected-by-other-config
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Updates the behavior and display of the international IP address rule card if the rule is being affected by the WooCommerce core selling locations general option.
diff --git a/changelog/update-6325-fraud-risk-link-text-in-settings b/changelog/update-6325-fraud-risk-link-text-in-settings
deleted file mode 100644
index 3f37d6371ca..00000000000
--- a/changelog/update-6325-fraud-risk-link-text-in-settings
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: update
-
-Updates the anchor text for the fraud and risk tools documentation link on the Payments Settings page.
diff --git a/changelog/update-change-setup-refund-policy-note-into-task b/changelog/update-change-setup-refund-policy-note-into-task
deleted file mode 100644
index 08cf0d142a9..00000000000
--- a/changelog/update-change-setup-refund-policy-note-into-task
+++ /dev/null
@@ -1,4 +0,0 @@
-Significance: patch
-Type: dev
-
-Remove "Set-up refund policy" Inbox note as superfluous.
diff --git a/package-lock.json b/package-lock.json
index 7e7375967b4..056a7547a52 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "woocommerce-payments",
-  "version": "6.9.2",
+  "version": "7.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "woocommerce-payments",
-      "version": "6.9.2",
+      "version": "7.0.0",
       "hasInstallScript": true,
       "license": "GPL-3.0-or-later",
       "dependencies": {
diff --git a/package.json b/package.json
index d80cfbe4bd0..32b6a95a35f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "woocommerce-payments",
-  "version": "6.9.2",
+  "version": "7.0.0",
   "main": "webpack.config.js",
   "author": "Automattic",
   "license": "GPL-3.0-or-later",
diff --git a/readme.txt b/readme.txt
index 8a57aead24b..0c4dc6d82e0 100644
--- a/readme.txt
+++ b/readme.txt
@@ -4,7 +4,7 @@ Tags: woocommerce payments, apple pay, credit card, google pay, payment, payment
 Requires at least: 6.0
 Tested up to: 6.4
 Requires PHP: 7.3
-Stable tag: 6.9.2
+Stable tag: 7.0.0
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -94,6 +94,62 @@ Please note that our support for the checkout block is still experimental and th
 
 == Changelog ==
 
+= 7.0.0 - 2024-01-03 =
+* Add - Add Account Management tools with reset account functionality for partially onboarded accounts.
+* Add - Adding Compatibility Service to assist with flagging possible compatibility issues in the future.
+* Add - Add refund controls to transaction details view
+* Add - Add test mode notice in page order detail.
+* Add - Display a Confirmaton Modal on enabling Test Mode
+* Add - Introduce Customer currency, Deposit currency, Amount in Customer Currency and Deposit ID columns to the Transaction list UI and CSV export
+* Fix - Allow test phone number as Support Phone in Dev mode
+* Fix - Avoid using the removed deferred UPE flag
+* Fix - Ensure proper backfilling of subscription metadata (i.e. dates and cache) to the postmeta table when HPOS is enabled and compatibility mode (data syncing) is turned on.
+* Fix - Fetch and update the `_cancelled_email_sent` meta in a HPOS compatibile way.
+* Fix - fix: account currency hook return value
+* Fix - Fix account status error messages with links.
+* Fix - Fix country names with accents not showing correctly on international country fraud filter
+* Fix - Fix currency negative sign position on JS rendered amounts
+* Fix - Fixed a Level 3 error occurring during the capture of an authorization for amounts lower than the initial authorization amount.
+* Fix - Fixed Apple Pay Double Tax Calculation Issue
+* Fix - Fixed broken styles in authorization capture notifications
+* Fix - Fix incorrect amounts caused by zero-decimal currencies on Transactions, Deposits and Deposits CSV export
+* Fix - Fix missing customer data from transactions report
+* Fix - Fix missing order number in transaction reports CSV
+* Fix - Fix WooPay integration with AutomateWoo - Refer a Friend extension.
+* Fix - Improved error message for invalid payment method
+* Fix - Include discount fee in fees tooltip
+* Fix - Introduce WC_Payments_Express_Checkout_Button_Utils class.
+* Fix - Pass the pay-for-order params to get the pre-fetch session data
+* Fix - Prevents a PHP fatal error that occurs when the cart contains a renewal order item that no longer exists.
+* Fix - Resolved an issue that would cause undefined $current_page, $max_num_pages, and $paginate variable errors when viewing a page with the subscriptions-shortcode.
+* Fix - Revemoved pre-fretch session for button to prevent draft order creation
+* Fix - Update account balances on the Payments Overview screen when an instant deposit is requested
+* Fix - Update Qualitative Feedback note to have more efficient sql query.
+* Fix - When HPOS is enabled and data compatibility mode is turned on, make sure subscription date changes made to postmeta are synced to orders_meta table.
+* Fix - When using the checkout block to pay for renewal orders, ensure the order's cart hash is updated to make sure the existing order can be used.
+* Update - Actualized cards-related assets for settings and transactions pages.
+* Update - Cleanup the deprecated payment gateway processing - part II
+* Update - Cleanup the deprecated payment gateway processing - part III
+* Update - Confirmation when cancelling order with pending authorization. Automatic order changes submission if confirmed.
+* Update - Updates the anchor text for the fraud and risk tools documentation link on the Payments Settings page.
+* Update - Updates the behavior and display of the international IP address rule card if the rule is being affected by the WooCommerce core selling locations general option.
+* Dev - Add e2e tests for the currency switcher widget.
+* Dev - Added documentation for deposits REST API endpoints.
+* Dev - Bump WC tested up to version to 8.4.0.
+* Dev - Cleanup enqueueing of the scripts which were removed
+* Dev - Cleanup the deprecated payment gateway processing - part IV
+* Dev - Cleanup the deprecated payment gateway processing - part V
+* Dev - Cleanup the deprecated payment gateway processing - part VI
+* Dev - Comment: Fix declined 3DS card E2E test.
+* Dev - Deprecate the WC_Subscriptions_Synchroniser::add_to_recurring_cart_key(). Use WC_Subscriptions_Synchroniser::add_to_recurring_product_grouping_key() instead.
+* Dev - E2E test - Merchant facing: Multi-currency setup
+* Dev - Improve E2E checkout tests
+* Dev - Introduce a new wcs_get_subscription_grouping_key() function to generate a unique key for a subscription based on its billing schedule. This function uses the existing recurring cart key concept.
+* Dev - Remove "Set-up refund policy" Inbox note as superfluous.
+* Dev - remove unused factor flag for deferred UPE
+* Dev - Thank you page Tracks event
+* Dev - Updated subscriptions-core to version 6.6.0
+
 = 6.9.2 - 2023-12-14 =
 * Add - Notice is added when merchant has funds that are not yet available for deposit.
 * Add - Show a deposit schedule notice on the deposits list page to indicate that future deposits can be expected.
diff --git a/woocommerce-payments.php b/woocommerce-payments.php
index df7afe47766..7f453eb5c35 100644
--- a/woocommerce-payments.php
+++ b/woocommerce-payments.php
@@ -12,7 +12,7 @@
  * WC tested up to: 8.4.0
  * Requires at least: 6.0
  * Requires PHP: 7.3
- * Version: 6.9.2
+ * Version: 7.0.0
  *
  * @package WooCommerce\Payments
  */

From c39d1afdf8a7147aca80e36004aacfdaad0880c3 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:40:26 +1000
Subject: [PATCH 2/7] Fix broken dispute details UI (#7959)

---
 ...nsaction-details-dispute-details-broken-ui |    5 +
 .../test/__snapshots__/index.test.tsx.snap    |   78 +-
 client/payment-details/summary/index.tsx      |  535 ++++----
 client/payment-details/summary/style.scss     |    6 +-
 .../test/__snapshots__/index.test.tsx.snap    | 1208 +++++++++--------
 .../test/__snapshots__/index.test.tsx.snap    |  224 +--
 6 files changed, 1074 insertions(+), 982 deletions(-)
 create mode 100644 changelog/fix-7958-transaction-details-dispute-details-broken-ui

diff --git a/changelog/fix-7958-transaction-details-dispute-details-broken-ui b/changelog/fix-7958-transaction-details-dispute-details-broken-ui
new file mode 100644
index 00000000000..b196bc9910c
--- /dev/null
+++ b/changelog/fix-7958-transaction-details-dispute-details-broken-ui
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Not user-facing: fixes styling bug introduced in develop branch
+
+
diff --git a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
index f28176053a7..ea41fb13ccb 100644
--- a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
@@ -20,55 +20,61 @@ exports[`Order details page should match the snapshot - Charge without payment i
           data-wp-component="CardBody"
         >
           <div
-            class="payment-details-summary"
+            class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="Flex"
           >
             <div
-              class="payment-details-summary__section"
+              class="payment-details-summary"
             >
-              <p
-                class="payment-details-summary__amount"
-              >
-                $15.00
-                <span
-                  class="payment-details-summary__amount-currency"
-                >
-                  USD
-                </span>
-                <span
-                  class="chip chip-light"
-                >
-                  Pending
-                </span>
-              </p>
               <div
-                class="payment-details-summary__breakdown"
+                class="payment-details-summary__section"
               >
-                
-                <p>
-                  Fees: 
-                  -$0.00
-                </p>
-                
-                <p>
-                  Net: 
+                <p
+                  class="payment-details-summary__amount"
+                >
                   $15.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    USD
+                  </span>
+                  <span
+                    class="chip chip-light"
+                  >
+                    Pending
+                  </span>
                 </p>
+                <div
+                  class="payment-details-summary__breakdown"
+                >
+                  
+                  <p>
+                    Fees: 
+                    -$0.00
+                  </p>
+                  
+                  <p>
+                    Net: 
+                    $15.00
+                  </p>
+                </div>
               </div>
-            </div>
-            <div
-              class="payment-details-summary__section"
-            >
               <div
-                class="payment-details-summary__id"
+                class="payment-details-summary__section"
               >
-                Payment ID: 
-                776
+                <div
+                  class="payment-details-summary__id"
+                >
+                  Payment ID: 
+                  776
+                </div>
               </div>
             </div>
+            <div
+              class="payment-details__refund-controls"
+            />
           </div>
-          <div
-            class="payment-details__refund-controls"
-          />
         </div>
         <hr
           aria-orientation="horizontal"
diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx
index c35a236f94a..607bacb5f0a 100644
--- a/client/payment-details/summary/index.tsx
+++ b/client/payment-details/summary/index.tsx
@@ -243,307 +243,314 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 	return (
 		<Card>
 			<CardBody>
-				<div className="payment-details-summary">
-					<div className="payment-details-summary__section">
-						<p className="payment-details-summary__amount">
-							<Loadable
-								isLoading={ isLoading }
-								placeholder="Amount placeholder"
-							>
-								{ formattedAmount }
-								<span className="payment-details-summary__amount-currency">
-									{ charge.currency || 'USD' }
-								</span>
-								{ charge.dispute ? (
-									<DisputeStatusChip
-										status={ charge.dispute.status }
-										dueBy={
-											charge.dispute.evidence_details
-												?.due_by
-										}
-										prefixDisputeType={ true }
-									/>
-								) : (
-									<PaymentStatusChip
-										status={ getChargeStatus(
-											charge,
-											paymentIntent
-										) }
-									/>
-								) }
-							</Loadable>
-						</p>
-						<div className="payment-details-summary__breakdown">
-							{ renderStorePrice ? (
-								<p>
-									{ formatExplicitCurrency(
-										balance.amount,
-										balance.currency
-									) }
-								</p>
-							) : null }
-							{ balance.refunded ? (
-								<p>
-									{ `${
-										disputeFee
-											? __(
-													'Deducted',
-													'woocommerce-payments'
-											  )
-											: __(
-													'Refunded',
-													'woocommerce-payments'
-											  )
-									}: ` }
-									{ formatExplicitCurrency(
-										-balance.refunded,
-										balance.currency
-									) }
-								</p>
-							) : (
-								''
-							) }
-							<p>
+				<Flex direction="row" align="start">
+					<div className="payment-details-summary">
+						<div className="payment-details-summary__section">
+							<p className="payment-details-summary__amount">
 								<Loadable
 									isLoading={ isLoading }
-									placeholder="Fee amount"
+									placeholder="Amount placeholder"
 								>
-									{ `${ __(
-										'Fees',
-										'woocommerce-payments'
-									) }: ` }
-									{ formatCurrency(
-										-balance.fee,
-										balance.currency
-									) }
-									{ disputeFee && (
-										<ClickTooltip
-											className="payment-details-summary__breakdown__fee-tooltip"
-											buttonIcon={ <HelpOutlineIcon /> }
-											buttonLabel={ __(
-												'Fee breakdown',
-												'woocommerce-payments'
-											) }
-											content={
-												<>
-													<Flex>
-														<label>
-															{ __(
-																'Transaction fee',
-																'woocommerce-payments'
-															) }
-														</label>
-														<span aria-label="Transaction fee">
-															{ formatCurrency(
-																transactionFee.fee,
-																transactionFee.currency
-															) }
-														</span>
-													</Flex>
-													<Flex>
-														<label>
-															{ __(
-																'Dispute fee',
-																'woocommerce-payments'
-															) }
-														</label>
-														<span aria-label="Dispute fee">
-															{ disputeFee }
-														</span>
-													</Flex>
-													<Flex>
-														<label>
-															{ __(
-																'Total fees',
-																'woocommerce-payments'
-															) }
-														</label>
-														<span aria-label="Total fees">
-															{ formatCurrency(
-																balance.fee,
-																balance.currency
-															) }
-														</span>
-													</Flex>
-												</>
+									{ formattedAmount }
+									<span className="payment-details-summary__amount-currency">
+										{ charge.currency || 'USD' }
+									</span>
+									{ charge.dispute ? (
+										<DisputeStatusChip
+											status={ charge.dispute.status }
+											dueBy={
+												charge.dispute.evidence_details
+													?.due_by
 											}
+											prefixDisputeType={ true }
+										/>
+									) : (
+										<PaymentStatusChip
+											status={ getChargeStatus(
+												charge,
+												paymentIntent
+											) }
 										/>
 									) }
 								</Loadable>
 							</p>
-							{ charge.paydown ? (
+							<div className="payment-details-summary__breakdown">
+								{ renderStorePrice ? (
+									<p>
+										{ formatExplicitCurrency(
+											balance.amount,
+											balance.currency
+										) }
+									</p>
+								) : null }
+								{ balance.refunded ? (
+									<p>
+										{ `${
+											disputeFee
+												? __(
+														'Deducted',
+														'woocommerce-payments'
+												  )
+												: __(
+														'Refunded',
+														'woocommerce-payments'
+												  )
+										}: ` }
+										{ formatExplicitCurrency(
+											-balance.refunded,
+											balance.currency
+										) }
+									</p>
+								) : (
+									''
+								) }
 								<p>
-									{ `${ __(
-										'Loan repayment',
-										'woocommerce-payments'
-									) }: ` }
-									{ formatExplicitCurrency(
-										charge.paydown.amount,
-										balance.currency
-									) }
+									<Loadable
+										isLoading={ isLoading }
+										placeholder="Fee amount"
+									>
+										{ `${ __(
+											'Fees',
+											'woocommerce-payments'
+										) }: ` }
+										{ formatCurrency(
+											-balance.fee,
+											balance.currency
+										) }
+										{ disputeFee && (
+											<ClickTooltip
+												className="payment-details-summary__breakdown__fee-tooltip"
+												buttonIcon={
+													<HelpOutlineIcon />
+												}
+												buttonLabel={ __(
+													'Fee breakdown',
+													'woocommerce-payments'
+												) }
+												content={
+													<>
+														<Flex>
+															<label>
+																{ __(
+																	'Transaction fee',
+																	'woocommerce-payments'
+																) }
+															</label>
+															<span aria-label="Transaction fee">
+																{ formatCurrency(
+																	transactionFee.fee,
+																	transactionFee.currency
+																) }
+															</span>
+														</Flex>
+														<Flex>
+															<label>
+																{ __(
+																	'Dispute fee',
+																	'woocommerce-payments'
+																) }
+															</label>
+															<span aria-label="Dispute fee">
+																{ disputeFee }
+															</span>
+														</Flex>
+														<Flex>
+															<label>
+																{ __(
+																	'Total fees',
+																	'woocommerce-payments'
+																) }
+															</label>
+															<span aria-label="Total fees">
+																{ formatCurrency(
+																	balance.fee,
+																	balance.currency
+																) }
+															</span>
+														</Flex>
+													</>
+												}
+											/>
+										) }
+									</Loadable>
+								</p>
+								{ charge.paydown ? (
+									<p>
+										{ `${ __(
+											'Loan repayment',
+											'woocommerce-payments'
+										) }: ` }
+										{ formatExplicitCurrency(
+											charge.paydown.amount,
+											balance.currency
+										) }
+									</p>
+								) : (
+									''
+								) }
+								<p>
+									<Loadable
+										isLoading={ isLoading }
+										placeholder="Net amount"
+									>
+										{ `${ __(
+											'Net',
+											'woocommerce-payments'
+										) }: ` }
+										{ formatExplicitCurrency(
+											charge.paydown
+												? balance.net -
+														Math.abs(
+															charge.paydown
+																.amount
+														)
+												: balance.net,
+											balance.currency
+										) }
+									</Loadable>
 								</p>
-							) : (
-								''
+							</div>
+						</div>
+						<div className="payment-details-summary__section">
+							{ ! isLoading && isFraudOutcomeReview && (
+								<div className="payment-details-summary__fraud-outcome-action">
+									<CancelAuthorizationButton
+										orderId={ charge.order?.number || 0 }
+										paymentIntentId={
+											charge.payment_intent || ''
+										}
+										onClick={ () => {
+											wcpayTracks.recordEvent(
+												'wcpay_fraud_protection_transaction_reviewed_merchant_blocked',
+												{
+													payment_intent_id:
+														charge.payment_intent,
+												}
+											);
+											wcpayTracks.recordEvent(
+												'payments_transactions_details_cancel_charge_button_click',
+												{
+													payment_intent_id:
+														charge.payment_intent,
+												}
+											);
+										} }
+									>
+										{ __( 'Block transaction' ) }
+									</CancelAuthorizationButton>
+
+									<CaptureAuthorizationButton
+										buttonIsPrimary
+										orderId={ charge.order?.number || 0 }
+										paymentIntentId={
+											charge.payment_intent || ''
+										}
+										buttonIsSmall={ false }
+										onClick={ () => {
+											wcpayTracks.recordEvent(
+												'wcpay_fraud_protection_transaction_reviewed_merchant_approved',
+												{
+													payment_intent_id:
+														charge.payment_intent,
+												}
+											);
+											wcpayTracks.recordEvent(
+												'payments_transactions_details_capture_charge_button_click',
+												{
+													payment_intent_id:
+														charge.payment_intent,
+												}
+											);
+										} }
+									>
+										{ __( 'Approve Transaction' ) }
+									</CaptureAuthorizationButton>
+								</div>
 							) }
-							<p>
+							<div className="payment-details-summary__id">
 								<Loadable
 									isLoading={ isLoading }
-									placeholder="Net amount"
+									placeholder="Payment ID: pi_xxxxxxxxxxxxxxxxxxxxxxxx"
 								>
 									{ `${ __(
-										'Net',
+										'Payment ID',
 										'woocommerce-payments'
 									) }: ` }
-									{ formatExplicitCurrency(
-										charge.paydown
-											? balance.net -
-													Math.abs(
-														charge.paydown.amount
-													)
-											: balance.net,
-										balance.currency
-									) }
+									{ charge.payment_intent
+										? charge.payment_intent
+										: charge.id }
 								</Loadable>
-							</p>
+							</div>
 						</div>
 					</div>
-					<div className="payment-details-summary__section">
-						{ ! isLoading && isFraudOutcomeReview && (
-							<div className="payment-details-summary__fraud-outcome-action">
-								<CancelAuthorizationButton
-									orderId={ charge.order?.number || 0 }
-									paymentIntentId={
-										charge.payment_intent || ''
-									}
-									onClick={ () => {
-										wcpayTracks.recordEvent(
-											'wcpay_fraud_protection_transaction_reviewed_merchant_blocked',
-											{
-												payment_intent_id:
-													charge.payment_intent,
-											}
-										);
-										wcpayTracks.recordEvent(
-											'payments_transactions_details_cancel_charge_button_click',
-											{
-												payment_intent_id:
-													charge.payment_intent,
-											}
-										);
-									} }
-								>
-									{ __( 'Block transaction' ) }
-								</CancelAuthorizationButton>
-
-								<CaptureAuthorizationButton
-									buttonIsPrimary
-									orderId={ charge.order?.number || 0 }
-									paymentIntentId={
-										charge.payment_intent || ''
-									}
-									buttonIsSmall={ false }
-									onClick={ () => {
-										wcpayTracks.recordEvent(
-											'wcpay_fraud_protection_transaction_reviewed_merchant_approved',
-											{
-												payment_intent_id:
-													charge.payment_intent,
-											}
-										);
-										wcpayTracks.recordEvent(
-											'payments_transactions_details_capture_charge_button_click',
-											{
-												payment_intent_id:
-													charge.payment_intent,
-											}
-										);
-									} }
-								>
-									{ __( 'Approve Transaction' ) }
-								</CaptureAuthorizationButton>
-							</div>
-						) }
-						<div className="payment-details-summary__id">
+					<div className="payment-details__refund-controls">
+						{ ! charge?.refunded && charge?.captured && (
 							<Loadable
 								isLoading={ isLoading }
-								placeholder="Payment ID: pi_xxxxxxxxxxxxxxxxxxxxxxxx"
+								placeholder={ moreVertical }
 							>
-								{ `${ __(
-									'Payment ID',
-									'woocommerce-payments'
-								) }: ` }
-								{ charge.payment_intent
-									? charge.payment_intent
-									: charge.id }
-							</Loadable>
-						</div>
-					</div>
-				</div>
-				<div className="payment-details__refund-controls">
-					{ ! charge?.refunded && charge?.captured && (
-						<Loadable
-							isLoading={ isLoading }
-							placeholder={ moreVertical }
-						>
-							<DropdownMenu
-								icon={ moreVertical }
-								label={ __(
-									'Translation actions',
-									'woocommerce-payments'
-								) }
-								popoverProps={ {
-									position: 'bottom left',
-								} }
-							>
-								{ ( { onClose } ) => (
-									<MenuGroup>
-										<MenuItem
-											onClick={ () => {
-												setIsRefundModalOpen( true );
-												wcpayTracks.recordEvent(
-													'payments_transactions_details_refund_modal_open',
-													{
-														payment_intent_id:
-															charge.payment_intent,
-													}
-												);
-												onClose();
-											} }
-										>
-											{ __(
-												'Refund in full',
-												'woocommerce-payments'
-											) }
-										</MenuItem>
-										{ charge.order && (
+								<DropdownMenu
+									icon={ moreVertical }
+									label={ __(
+										'Translation actions',
+										'woocommerce-payments'
+									) }
+									popoverProps={ {
+										position: 'bottom left',
+									} }
+								>
+									{ ( { onClose } ) => (
+										<MenuGroup>
 											<MenuItem
 												onClick={ () => {
+													setIsRefundModalOpen(
+														true
+													);
 													wcpayTracks.recordEvent(
-														'payments_transactions_details_partial_refund',
+														'payments_transactions_details_refund_modal_open',
 														{
 															payment_intent_id:
 																charge.payment_intent,
-															order_id:
-																charge.order
-																	?.number,
 														}
 													);
-													window.location =
-														charge.order?.url;
+													onClose();
 												} }
 											>
 												{ __(
-													'Partial refund',
+													'Refund in full',
 													'woocommerce-payments'
 												) }
 											</MenuItem>
-										) }
-									</MenuGroup>
-								) }
-							</DropdownMenu>
-						</Loadable>
-					) }
-				</div>
+											{ charge.order && (
+												<MenuItem
+													onClick={ () => {
+														wcpayTracks.recordEvent(
+															'payments_transactions_details_partial_refund',
+															{
+																payment_intent_id:
+																	charge.payment_intent,
+																order_id:
+																	charge.order
+																		?.number,
+															}
+														);
+														window.location =
+															charge.order?.url;
+													} }
+												>
+													{ __(
+														'Partial refund',
+														'woocommerce-payments'
+													) }
+												</MenuItem>
+											) }
+										</MenuGroup>
+									) }
+								</DropdownMenu>
+							</Loadable>
+						) }
+					</div>
+				</Flex>
 			</CardBody>
 			<CardDivider />
 			<CardBody>
diff --git a/client/payment-details/summary/style.scss b/client/payment-details/summary/style.scss
index 95df0d33edd..0ee051834fb 100755
--- a/client/payment-details/summary/style.scss
+++ b/client/payment-details/summary/style.scss
@@ -8,11 +8,6 @@
 	margin-bottom: 24px;
 }
 
-.components-card__body:first-of-type {
-	display: flex;
-	flex-direction: row;
-}
-
 .payment-details-summary {
 	display: flex;
 	flex: 1;
@@ -30,6 +25,7 @@
 		padding: 0;
 		margin: 0;
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
 
 		.payment-details-summary__amount-currency {
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 b719e25c342..4d582a000c7 100644
--- a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
@@ -16,55 +16,61 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-primary"
-              >
-                Payment authorized
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-primary"
+                >
+                  Payment authorized
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          />
         </div>
-        <div
-          class="payment-details__refund-controls"
-        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -320,71 +326,77 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-warning"
-              >
-                Needs review
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-warning"
+                >
+                  Needs review
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__fraud-outcome-action"
+              class="payment-details-summary__section"
             >
-              <button
-                class="components-button is-destructive"
-                type="button"
+              <div
+                class="payment-details-summary__fraud-outcome-action"
               >
-                Block transaction
-              </button>
-              <button
-                class="components-button is-primary"
-                type="button"
+                <button
+                  class="components-button is-destructive"
+                  type="button"
+                >
+                  Block transaction
+                </button>
+                <button
+                  class="components-button is-primary"
+                  type="button"
+                >
+                  Approve Transaction
+                </button>
+              </div>
+              <div
+                class="payment-details-summary__id"
               >
-                Approve Transaction
-              </button>
-            </div>
-            <div
-              class="payment-details-summary__id"
-            >
-              Payment ID: 
-              ch_38jdHA39KKA
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          />
         </div>
-        <div
-          class="payment-details__refund-controls"
-        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -634,79 +646,85 @@ exports[`PaymentDetailsSummary correctly renders a charge 1`] = `
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -923,79 +941,85 @@ exports[`PaymentDetailsSummary order missing notice does not render notice if or
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1212,79 +1236,85 @@ exports[`PaymentDetailsSummary order missing notice renders notice if order miss
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1524,79 +1554,85 @@ exports[`PaymentDetailsSummary renders a charge with subscriptions 1`] = `
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1840,58 +1876,64 @@ exports[`PaymentDetailsSummary renders fully refunded information for a charge 1
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-light"
-              >
-                Refunded
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              <p>
-                Refunded: 
-                -$20.00
-              </p>
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                -$0.70
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-light"
+                >
+                  Refunded
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                <p>
+                  Refunded: 
+                  -$20.00
+                </p>
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  -$0.70
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          />
         </div>
-        <div
-          class="payment-details__refund-controls"
-        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -2106,52 +2148,58 @@ exports[`PaymentDetailsSummary renders loading state 1`] = `
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                USD
-              </span>
-              <span
-                class="chip chip-light"
-              />
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                $0.00
-              </p>
-              
-              <p>
-                Net: 
-                $0.00
+              <p
+                class="payment-details-summary__amount"
+              >
+                
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  USD
+                </span>
+                <span
+                  class="chip chip-light"
+                />
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  $0.00
+                </p>
+                
+                <p>
+                  Net: 
+                  $0.00
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+              </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          />
         </div>
-        <div
-          class="payment-details__refund-controls"
-        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -2342,82 +2390,88 @@ exports[`PaymentDetailsSummary renders partially refunded information for a char
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-light"
-              >
-                Partial refund
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              <p>
-                Refunded: 
-                -$12.00
-              </p>
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $7.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-light"
+                >
+                  Partial refund
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                <p>
+                  Refunded: 
+                  -$12.00
+                </p>
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $7.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -2634,79 +2688,85 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata 1`]
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -2923,79 +2983,85 @@ exports[`PaymentDetailsSummary renders the information of a dispute-reversal cha
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Disputed: Won
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Disputed: Won
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/client/payment-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/test/__snapshots__/index.test.tsx.snap
index 7a3274751bf..ebe9d418a92 100644
--- a/client/payment-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/test/__snapshots__/index.test.tsx.snap
@@ -20,78 +20,84 @@ exports[`Payment details page should match the snapshot - Charge query param 1`]
           data-wp-component="CardBody"
         >
           <div
-            class="payment-details-summary"
+            class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="Flex"
           >
             <div
-              class="payment-details-summary__section"
+              class="payment-details-summary"
             >
-              <p
-                class="payment-details-summary__amount"
-              >
-                <span
-                  aria-busy="true"
-                  class="is-loadable-placeholder"
-                >
-                  Amount placeholder
-                </span>
-              </p>
               <div
-                class="payment-details-summary__breakdown"
+                class="payment-details-summary__section"
               >
-                
-                <p>
+                <p
+                  class="payment-details-summary__amount"
+                >
                   <span
                     aria-busy="true"
                     class="is-loadable-placeholder"
                   >
-                    Fee amount
+                    Amount placeholder
                   </span>
                 </p>
-                
-                <p>
+                <div
+                  class="payment-details-summary__breakdown"
+                >
+                  
+                  <p>
+                    <span
+                      aria-busy="true"
+                      class="is-loadable-placeholder"
+                    >
+                      Fee amount
+                    </span>
+                  </p>
+                  
+                  <p>
+                    <span
+                      aria-busy="true"
+                      class="is-loadable-placeholder"
+                    >
+                      Net amount
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div
+                class="payment-details-summary__section"
+              >
+                <div
+                  class="payment-details-summary__id"
+                >
                   <span
                     aria-busy="true"
                     class="is-loadable-placeholder"
                   >
-                    Net amount
+                    Payment ID: pi_xxxxxxxxxxxxxxxxxxxxxxxx
                   </span>
-                </p>
+                </div>
               </div>
             </div>
             <div
-              class="payment-details-summary__section"
+              class="payment-details__refund-controls"
             >
-              <div
-                class="payment-details-summary__id"
+              <span
+                aria-busy="true"
+                class="is-loadable-placeholder"
               >
-                <span
-                  aria-busy="true"
-                  class="is-loadable-placeholder"
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  Payment ID: pi_xxxxxxxxxxxxxxxxxxxxxxxx
-                </span>
-              </div>
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </span>
             </div>
           </div>
-          <div
-            class="payment-details__refund-controls"
-          >
-            <span
-              aria-busy="true"
-              class="is-loadable-placeholder"
-            >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </span>
-          </div>
         </div>
         <hr
           aria-orientation="horizontal"
@@ -477,79 +483,85 @@ exports[`Payment details page should match the snapshot - Payment Intent query p
           data-wp-component="CardBody"
         >
           <div
-            class="payment-details-summary"
+            class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="Flex"
           >
             <div
-              class="payment-details-summary__section"
+              class="payment-details-summary"
             >
-              <p
-                class="payment-details-summary__amount"
-              >
-                $1,500.00
-                <span
-                  class="payment-details-summary__amount-currency"
-                >
-                  usd
-                </span>
-                <span
-                  class="chip chip-success"
-                >
-                  Paid
-                </span>
-              </p>
               <div
-                class="payment-details-summary__breakdown"
+                class="payment-details-summary__section"
               >
-                
-                <p>
-                  Fees: 
-                  -$74.00
-                </p>
-                
-                <p>
-                  Net: 
-                  $1,426.00
+                <p
+                  class="payment-details-summary__amount"
+                >
+                  $1,500.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                  <span
+                    class="chip chip-success"
+                  >
+                    Paid
+                  </span>
                 </p>
+                <div
+                  class="payment-details-summary__breakdown"
+                >
+                  
+                  <p>
+                    Fees: 
+                    -$74.00
+                  </p>
+                  
+                  <p>
+                    Net: 
+                    $1,426.00
+                  </p>
+                </div>
               </div>
-            </div>
-            <div
-              class="payment-details-summary__section"
-            >
               <div
-                class="payment-details-summary__id"
+                class="payment-details-summary__section"
               >
-                Payment ID: 
-                pi_mock
+                <div
+                  class="payment-details-summary__id"
+                >
+                  Payment ID: 
+                  pi_mock
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            class="payment-details__refund-controls"
-          >
             <div
-              class="components-dropdown components-dropdown-menu"
-              tabindex="-1"
+              class="payment-details__refund-controls"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Translation actions"
-                class="components-button components-dropdown-menu__toggle has-icon"
-                type="button"
+              <div
+                class="components-dropdown components-dropdown-menu"
+                tabindex="-1"
               >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  aria-label="Translation actions"
+                  class="components-button components-dropdown-menu__toggle has-icon"
+                  type="button"
                 >
-                  <path
-                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                  />
-                </svg>
-              </button>
+                  <svg
+                    aria-hidden="true"
+                    focusable="false"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                    />
+                  </svg>
+                </button>
+              </div>
             </div>
           </div>
         </div>

From 3c9c94d72056eabbe2e93906aed5d212dcb7741f Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Tue, 2 Jan 2024 16:40:26 +1000
Subject: [PATCH 3/7] Fix broken dispute details UI (#7959)

---
 ...nsaction-details-dispute-details-broken-ui |    5 +
 .../test/__snapshots__/index.test.tsx.snap    |   78 +-
 client/payment-details/summary/index.tsx      |  535 ++++----
 client/payment-details/summary/style.scss     |    6 +-
 .../test/__snapshots__/index.test.tsx.snap    | 1208 +++++++++--------
 .../test/__snapshots__/index.test.tsx.snap    |  224 +--
 6 files changed, 1074 insertions(+), 982 deletions(-)
 create mode 100644 changelog/fix-7958-transaction-details-dispute-details-broken-ui

diff --git a/changelog/fix-7958-transaction-details-dispute-details-broken-ui b/changelog/fix-7958-transaction-details-dispute-details-broken-ui
new file mode 100644
index 00000000000..b196bc9910c
--- /dev/null
+++ b/changelog/fix-7958-transaction-details-dispute-details-broken-ui
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Not user-facing: fixes styling bug introduced in develop branch
+
+
diff --git a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
index f28176053a7..ea41fb13ccb 100644
--- a/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/order-details/test/__snapshots__/index.test.tsx.snap
@@ -20,55 +20,61 @@ exports[`Order details page should match the snapshot - Charge without payment i
           data-wp-component="CardBody"
         >
           <div
-            class="payment-details-summary"
+            class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="Flex"
           >
             <div
-              class="payment-details-summary__section"
+              class="payment-details-summary"
             >
-              <p
-                class="payment-details-summary__amount"
-              >
-                $15.00
-                <span
-                  class="payment-details-summary__amount-currency"
-                >
-                  USD
-                </span>
-                <span
-                  class="chip chip-light"
-                >
-                  Pending
-                </span>
-              </p>
               <div
-                class="payment-details-summary__breakdown"
+                class="payment-details-summary__section"
               >
-                
-                <p>
-                  Fees: 
-                  -$0.00
-                </p>
-                
-                <p>
-                  Net: 
+                <p
+                  class="payment-details-summary__amount"
+                >
                   $15.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    USD
+                  </span>
+                  <span
+                    class="chip chip-light"
+                  >
+                    Pending
+                  </span>
                 </p>
+                <div
+                  class="payment-details-summary__breakdown"
+                >
+                  
+                  <p>
+                    Fees: 
+                    -$0.00
+                  </p>
+                  
+                  <p>
+                    Net: 
+                    $15.00
+                  </p>
+                </div>
               </div>
-            </div>
-            <div
-              class="payment-details-summary__section"
-            >
               <div
-                class="payment-details-summary__id"
+                class="payment-details-summary__section"
               >
-                Payment ID: 
-                776
+                <div
+                  class="payment-details-summary__id"
+                >
+                  Payment ID: 
+                  776
+                </div>
               </div>
             </div>
+            <div
+              class="payment-details__refund-controls"
+            />
           </div>
-          <div
-            class="payment-details__refund-controls"
-          />
         </div>
         <hr
           aria-orientation="horizontal"
diff --git a/client/payment-details/summary/index.tsx b/client/payment-details/summary/index.tsx
index c35a236f94a..607bacb5f0a 100644
--- a/client/payment-details/summary/index.tsx
+++ b/client/payment-details/summary/index.tsx
@@ -243,307 +243,314 @@ const PaymentDetailsSummary: React.FC< PaymentDetailsSummaryProps > = ( {
 	return (
 		<Card>
 			<CardBody>
-				<div className="payment-details-summary">
-					<div className="payment-details-summary__section">
-						<p className="payment-details-summary__amount">
-							<Loadable
-								isLoading={ isLoading }
-								placeholder="Amount placeholder"
-							>
-								{ formattedAmount }
-								<span className="payment-details-summary__amount-currency">
-									{ charge.currency || 'USD' }
-								</span>
-								{ charge.dispute ? (
-									<DisputeStatusChip
-										status={ charge.dispute.status }
-										dueBy={
-											charge.dispute.evidence_details
-												?.due_by
-										}
-										prefixDisputeType={ true }
-									/>
-								) : (
-									<PaymentStatusChip
-										status={ getChargeStatus(
-											charge,
-											paymentIntent
-										) }
-									/>
-								) }
-							</Loadable>
-						</p>
-						<div className="payment-details-summary__breakdown">
-							{ renderStorePrice ? (
-								<p>
-									{ formatExplicitCurrency(
-										balance.amount,
-										balance.currency
-									) }
-								</p>
-							) : null }
-							{ balance.refunded ? (
-								<p>
-									{ `${
-										disputeFee
-											? __(
-													'Deducted',
-													'woocommerce-payments'
-											  )
-											: __(
-													'Refunded',
-													'woocommerce-payments'
-											  )
-									}: ` }
-									{ formatExplicitCurrency(
-										-balance.refunded,
-										balance.currency
-									) }
-								</p>
-							) : (
-								''
-							) }
-							<p>
+				<Flex direction="row" align="start">
+					<div className="payment-details-summary">
+						<div className="payment-details-summary__section">
+							<p className="payment-details-summary__amount">
 								<Loadable
 									isLoading={ isLoading }
-									placeholder="Fee amount"
+									placeholder="Amount placeholder"
 								>
-									{ `${ __(
-										'Fees',
-										'woocommerce-payments'
-									) }: ` }
-									{ formatCurrency(
-										-balance.fee,
-										balance.currency
-									) }
-									{ disputeFee && (
-										<ClickTooltip
-											className="payment-details-summary__breakdown__fee-tooltip"
-											buttonIcon={ <HelpOutlineIcon /> }
-											buttonLabel={ __(
-												'Fee breakdown',
-												'woocommerce-payments'
-											) }
-											content={
-												<>
-													<Flex>
-														<label>
-															{ __(
-																'Transaction fee',
-																'woocommerce-payments'
-															) }
-														</label>
-														<span aria-label="Transaction fee">
-															{ formatCurrency(
-																transactionFee.fee,
-																transactionFee.currency
-															) }
-														</span>
-													</Flex>
-													<Flex>
-														<label>
-															{ __(
-																'Dispute fee',
-																'woocommerce-payments'
-															) }
-														</label>
-														<span aria-label="Dispute fee">
-															{ disputeFee }
-														</span>
-													</Flex>
-													<Flex>
-														<label>
-															{ __(
-																'Total fees',
-																'woocommerce-payments'
-															) }
-														</label>
-														<span aria-label="Total fees">
-															{ formatCurrency(
-																balance.fee,
-																balance.currency
-															) }
-														</span>
-													</Flex>
-												</>
+									{ formattedAmount }
+									<span className="payment-details-summary__amount-currency">
+										{ charge.currency || 'USD' }
+									</span>
+									{ charge.dispute ? (
+										<DisputeStatusChip
+											status={ charge.dispute.status }
+											dueBy={
+												charge.dispute.evidence_details
+													?.due_by
 											}
+											prefixDisputeType={ true }
+										/>
+									) : (
+										<PaymentStatusChip
+											status={ getChargeStatus(
+												charge,
+												paymentIntent
+											) }
 										/>
 									) }
 								</Loadable>
 							</p>
-							{ charge.paydown ? (
+							<div className="payment-details-summary__breakdown">
+								{ renderStorePrice ? (
+									<p>
+										{ formatExplicitCurrency(
+											balance.amount,
+											balance.currency
+										) }
+									</p>
+								) : null }
+								{ balance.refunded ? (
+									<p>
+										{ `${
+											disputeFee
+												? __(
+														'Deducted',
+														'woocommerce-payments'
+												  )
+												: __(
+														'Refunded',
+														'woocommerce-payments'
+												  )
+										}: ` }
+										{ formatExplicitCurrency(
+											-balance.refunded,
+											balance.currency
+										) }
+									</p>
+								) : (
+									''
+								) }
 								<p>
-									{ `${ __(
-										'Loan repayment',
-										'woocommerce-payments'
-									) }: ` }
-									{ formatExplicitCurrency(
-										charge.paydown.amount,
-										balance.currency
-									) }
+									<Loadable
+										isLoading={ isLoading }
+										placeholder="Fee amount"
+									>
+										{ `${ __(
+											'Fees',
+											'woocommerce-payments'
+										) }: ` }
+										{ formatCurrency(
+											-balance.fee,
+											balance.currency
+										) }
+										{ disputeFee && (
+											<ClickTooltip
+												className="payment-details-summary__breakdown__fee-tooltip"
+												buttonIcon={
+													<HelpOutlineIcon />
+												}
+												buttonLabel={ __(
+													'Fee breakdown',
+													'woocommerce-payments'
+												) }
+												content={
+													<>
+														<Flex>
+															<label>
+																{ __(
+																	'Transaction fee',
+																	'woocommerce-payments'
+																) }
+															</label>
+															<span aria-label="Transaction fee">
+																{ formatCurrency(
+																	transactionFee.fee,
+																	transactionFee.currency
+																) }
+															</span>
+														</Flex>
+														<Flex>
+															<label>
+																{ __(
+																	'Dispute fee',
+																	'woocommerce-payments'
+																) }
+															</label>
+															<span aria-label="Dispute fee">
+																{ disputeFee }
+															</span>
+														</Flex>
+														<Flex>
+															<label>
+																{ __(
+																	'Total fees',
+																	'woocommerce-payments'
+																) }
+															</label>
+															<span aria-label="Total fees">
+																{ formatCurrency(
+																	balance.fee,
+																	balance.currency
+																) }
+															</span>
+														</Flex>
+													</>
+												}
+											/>
+										) }
+									</Loadable>
+								</p>
+								{ charge.paydown ? (
+									<p>
+										{ `${ __(
+											'Loan repayment',
+											'woocommerce-payments'
+										) }: ` }
+										{ formatExplicitCurrency(
+											charge.paydown.amount,
+											balance.currency
+										) }
+									</p>
+								) : (
+									''
+								) }
+								<p>
+									<Loadable
+										isLoading={ isLoading }
+										placeholder="Net amount"
+									>
+										{ `${ __(
+											'Net',
+											'woocommerce-payments'
+										) }: ` }
+										{ formatExplicitCurrency(
+											charge.paydown
+												? balance.net -
+														Math.abs(
+															charge.paydown
+																.amount
+														)
+												: balance.net,
+											balance.currency
+										) }
+									</Loadable>
 								</p>
-							) : (
-								''
+							</div>
+						</div>
+						<div className="payment-details-summary__section">
+							{ ! isLoading && isFraudOutcomeReview && (
+								<div className="payment-details-summary__fraud-outcome-action">
+									<CancelAuthorizationButton
+										orderId={ charge.order?.number || 0 }
+										paymentIntentId={
+											charge.payment_intent || ''
+										}
+										onClick={ () => {
+											wcpayTracks.recordEvent(
+												'wcpay_fraud_protection_transaction_reviewed_merchant_blocked',
+												{
+													payment_intent_id:
+														charge.payment_intent,
+												}
+											);
+											wcpayTracks.recordEvent(
+												'payments_transactions_details_cancel_charge_button_click',
+												{
+													payment_intent_id:
+														charge.payment_intent,
+												}
+											);
+										} }
+									>
+										{ __( 'Block transaction' ) }
+									</CancelAuthorizationButton>
+
+									<CaptureAuthorizationButton
+										buttonIsPrimary
+										orderId={ charge.order?.number || 0 }
+										paymentIntentId={
+											charge.payment_intent || ''
+										}
+										buttonIsSmall={ false }
+										onClick={ () => {
+											wcpayTracks.recordEvent(
+												'wcpay_fraud_protection_transaction_reviewed_merchant_approved',
+												{
+													payment_intent_id:
+														charge.payment_intent,
+												}
+											);
+											wcpayTracks.recordEvent(
+												'payments_transactions_details_capture_charge_button_click',
+												{
+													payment_intent_id:
+														charge.payment_intent,
+												}
+											);
+										} }
+									>
+										{ __( 'Approve Transaction' ) }
+									</CaptureAuthorizationButton>
+								</div>
 							) }
-							<p>
+							<div className="payment-details-summary__id">
 								<Loadable
 									isLoading={ isLoading }
-									placeholder="Net amount"
+									placeholder="Payment ID: pi_xxxxxxxxxxxxxxxxxxxxxxxx"
 								>
 									{ `${ __(
-										'Net',
+										'Payment ID',
 										'woocommerce-payments'
 									) }: ` }
-									{ formatExplicitCurrency(
-										charge.paydown
-											? balance.net -
-													Math.abs(
-														charge.paydown.amount
-													)
-											: balance.net,
-										balance.currency
-									) }
+									{ charge.payment_intent
+										? charge.payment_intent
+										: charge.id }
 								</Loadable>
-							</p>
+							</div>
 						</div>
 					</div>
-					<div className="payment-details-summary__section">
-						{ ! isLoading && isFraudOutcomeReview && (
-							<div className="payment-details-summary__fraud-outcome-action">
-								<CancelAuthorizationButton
-									orderId={ charge.order?.number || 0 }
-									paymentIntentId={
-										charge.payment_intent || ''
-									}
-									onClick={ () => {
-										wcpayTracks.recordEvent(
-											'wcpay_fraud_protection_transaction_reviewed_merchant_blocked',
-											{
-												payment_intent_id:
-													charge.payment_intent,
-											}
-										);
-										wcpayTracks.recordEvent(
-											'payments_transactions_details_cancel_charge_button_click',
-											{
-												payment_intent_id:
-													charge.payment_intent,
-											}
-										);
-									} }
-								>
-									{ __( 'Block transaction' ) }
-								</CancelAuthorizationButton>
-
-								<CaptureAuthorizationButton
-									buttonIsPrimary
-									orderId={ charge.order?.number || 0 }
-									paymentIntentId={
-										charge.payment_intent || ''
-									}
-									buttonIsSmall={ false }
-									onClick={ () => {
-										wcpayTracks.recordEvent(
-											'wcpay_fraud_protection_transaction_reviewed_merchant_approved',
-											{
-												payment_intent_id:
-													charge.payment_intent,
-											}
-										);
-										wcpayTracks.recordEvent(
-											'payments_transactions_details_capture_charge_button_click',
-											{
-												payment_intent_id:
-													charge.payment_intent,
-											}
-										);
-									} }
-								>
-									{ __( 'Approve Transaction' ) }
-								</CaptureAuthorizationButton>
-							</div>
-						) }
-						<div className="payment-details-summary__id">
+					<div className="payment-details__refund-controls">
+						{ ! charge?.refunded && charge?.captured && (
 							<Loadable
 								isLoading={ isLoading }
-								placeholder="Payment ID: pi_xxxxxxxxxxxxxxxxxxxxxxxx"
+								placeholder={ moreVertical }
 							>
-								{ `${ __(
-									'Payment ID',
-									'woocommerce-payments'
-								) }: ` }
-								{ charge.payment_intent
-									? charge.payment_intent
-									: charge.id }
-							</Loadable>
-						</div>
-					</div>
-				</div>
-				<div className="payment-details__refund-controls">
-					{ ! charge?.refunded && charge?.captured && (
-						<Loadable
-							isLoading={ isLoading }
-							placeholder={ moreVertical }
-						>
-							<DropdownMenu
-								icon={ moreVertical }
-								label={ __(
-									'Translation actions',
-									'woocommerce-payments'
-								) }
-								popoverProps={ {
-									position: 'bottom left',
-								} }
-							>
-								{ ( { onClose } ) => (
-									<MenuGroup>
-										<MenuItem
-											onClick={ () => {
-												setIsRefundModalOpen( true );
-												wcpayTracks.recordEvent(
-													'payments_transactions_details_refund_modal_open',
-													{
-														payment_intent_id:
-															charge.payment_intent,
-													}
-												);
-												onClose();
-											} }
-										>
-											{ __(
-												'Refund in full',
-												'woocommerce-payments'
-											) }
-										</MenuItem>
-										{ charge.order && (
+								<DropdownMenu
+									icon={ moreVertical }
+									label={ __(
+										'Translation actions',
+										'woocommerce-payments'
+									) }
+									popoverProps={ {
+										position: 'bottom left',
+									} }
+								>
+									{ ( { onClose } ) => (
+										<MenuGroup>
 											<MenuItem
 												onClick={ () => {
+													setIsRefundModalOpen(
+														true
+													);
 													wcpayTracks.recordEvent(
-														'payments_transactions_details_partial_refund',
+														'payments_transactions_details_refund_modal_open',
 														{
 															payment_intent_id:
 																charge.payment_intent,
-															order_id:
-																charge.order
-																	?.number,
 														}
 													);
-													window.location =
-														charge.order?.url;
+													onClose();
 												} }
 											>
 												{ __(
-													'Partial refund',
+													'Refund in full',
 													'woocommerce-payments'
 												) }
 											</MenuItem>
-										) }
-									</MenuGroup>
-								) }
-							</DropdownMenu>
-						</Loadable>
-					) }
-				</div>
+											{ charge.order && (
+												<MenuItem
+													onClick={ () => {
+														wcpayTracks.recordEvent(
+															'payments_transactions_details_partial_refund',
+															{
+																payment_intent_id:
+																	charge.payment_intent,
+																order_id:
+																	charge.order
+																		?.number,
+															}
+														);
+														window.location =
+															charge.order?.url;
+													} }
+												>
+													{ __(
+														'Partial refund',
+														'woocommerce-payments'
+													) }
+												</MenuItem>
+											) }
+										</MenuGroup>
+									) }
+								</DropdownMenu>
+							</Loadable>
+						) }
+					</div>
+				</Flex>
 			</CardBody>
 			<CardDivider />
 			<CardBody>
diff --git a/client/payment-details/summary/style.scss b/client/payment-details/summary/style.scss
index 95df0d33edd..0ee051834fb 100755
--- a/client/payment-details/summary/style.scss
+++ b/client/payment-details/summary/style.scss
@@ -8,11 +8,6 @@
 	margin-bottom: 24px;
 }
 
-.components-card__body:first-of-type {
-	display: flex;
-	flex-direction: row;
-}
-
 .payment-details-summary {
 	display: flex;
 	flex: 1;
@@ -30,6 +25,7 @@
 		padding: 0;
 		margin: 0;
 		display: flex;
+		flex-wrap: wrap;
 		align-items: center;
 
 		.payment-details-summary__amount-currency {
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 b719e25c342..4d582a000c7 100644
--- a/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/summary/test/__snapshots__/index.test.tsx.snap
@@ -16,55 +16,61 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders ca
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-primary"
-              >
-                Payment authorized
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-primary"
+                >
+                  Payment authorized
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          />
         </div>
-        <div
-          class="payment-details__refund-controls"
-        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -320,71 +326,77 @@ exports[`PaymentDetailsSummary capture notification and fraud buttons renders th
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-warning"
-              >
-                Needs review
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-warning"
+                >
+                  Needs review
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__fraud-outcome-action"
+              class="payment-details-summary__section"
             >
-              <button
-                class="components-button is-destructive"
-                type="button"
+              <div
+                class="payment-details-summary__fraud-outcome-action"
               >
-                Block transaction
-              </button>
-              <button
-                class="components-button is-primary"
-                type="button"
+                <button
+                  class="components-button is-destructive"
+                  type="button"
+                >
+                  Block transaction
+                </button>
+                <button
+                  class="components-button is-primary"
+                  type="button"
+                >
+                  Approve Transaction
+                </button>
+              </div>
+              <div
+                class="payment-details-summary__id"
               >
-                Approve Transaction
-              </button>
-            </div>
-            <div
-              class="payment-details-summary__id"
-            >
-              Payment ID: 
-              ch_38jdHA39KKA
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          />
         </div>
-        <div
-          class="payment-details__refund-controls"
-        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -634,79 +646,85 @@ exports[`PaymentDetailsSummary correctly renders a charge 1`] = `
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -923,79 +941,85 @@ exports[`PaymentDetailsSummary order missing notice does not render notice if or
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1212,79 +1236,85 @@ exports[`PaymentDetailsSummary order missing notice renders notice if order miss
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1524,79 +1554,85 @@ exports[`PaymentDetailsSummary renders a charge with subscriptions 1`] = `
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -1840,58 +1876,64 @@ exports[`PaymentDetailsSummary renders fully refunded information for a charge 1
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-light"
-              >
-                Refunded
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              <p>
-                Refunded: 
-                -$20.00
-              </p>
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                -$0.70
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-light"
+                >
+                  Refunded
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                <p>
+                  Refunded: 
+                  -$20.00
+                </p>
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  -$0.70
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          />
         </div>
-        <div
-          class="payment-details__refund-controls"
-        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -2106,52 +2148,58 @@ exports[`PaymentDetailsSummary renders loading state 1`] = `
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                USD
-              </span>
-              <span
-                class="chip chip-light"
-              />
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                $0.00
-              </p>
-              
-              <p>
-                Net: 
-                $0.00
+              <p
+                class="payment-details-summary__amount"
+              >
+                
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  USD
+                </span>
+                <span
+                  class="chip chip-light"
+                />
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  $0.00
+                </p>
+                
+                <p>
+                  Net: 
+                  $0.00
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+              </div>
             </div>
           </div>
+          <div
+            class="payment-details__refund-controls"
+          />
         </div>
-        <div
-          class="payment-details__refund-controls"
-        />
       </div>
       <hr
         aria-orientation="horizontal"
@@ -2342,82 +2390,88 @@ exports[`PaymentDetailsSummary renders partially refunded information for a char
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-light"
-              >
-                Partial refund
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              <p>
-                Refunded: 
-                -$12.00
-              </p>
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $7.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-light"
+                >
+                  Partial refund
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                <p>
+                  Refunded: 
+                  -$12.00
+                </p>
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $7.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -2634,79 +2688,85 @@ exports[`PaymentDetailsSummary renders the Tap to Pay channel from metadata 1`]
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Paid
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Paid
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -2923,79 +2983,85 @@ exports[`PaymentDetailsSummary renders the information of a dispute-reversal cha
         data-wp-component="CardBody"
       >
         <div
-          class="payment-details-summary"
+          class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+          data-wp-c16t="true"
+          data-wp-component="Flex"
         >
           <div
-            class="payment-details-summary__section"
+            class="payment-details-summary"
           >
-            <p
-              class="payment-details-summary__amount"
-            >
-              $20.00
-              <span
-                class="payment-details-summary__amount-currency"
-              >
-                usd
-              </span>
-              <span
-                class="chip chip-success"
-              >
-                Disputed: Won
-              </span>
-            </p>
             <div
-              class="payment-details-summary__breakdown"
+              class="payment-details-summary__section"
             >
-              
-              <p>
-                Fees: 
-                -$0.70
-              </p>
-              
-              <p>
-                Net: 
-                $19.30
+              <p
+                class="payment-details-summary__amount"
+              >
+                $20.00
+                <span
+                  class="payment-details-summary__amount-currency"
+                >
+                  usd
+                </span>
+                <span
+                  class="chip chip-success"
+                >
+                  Disputed: Won
+                </span>
               </p>
+              <div
+                class="payment-details-summary__breakdown"
+              >
+                
+                <p>
+                  Fees: 
+                  -$0.70
+                </p>
+                
+                <p>
+                  Net: 
+                  $19.30
+                </p>
+              </div>
             </div>
-          </div>
-          <div
-            class="payment-details-summary__section"
-          >
             <div
-              class="payment-details-summary__id"
+              class="payment-details-summary__section"
             >
-              Payment ID: 
-              ch_38jdHA39KKA
+              <div
+                class="payment-details-summary__id"
+              >
+                Payment ID: 
+                ch_38jdHA39KKA
+              </div>
             </div>
           </div>
-        </div>
-        <div
-          class="payment-details__refund-controls"
-        >
           <div
-            class="components-dropdown components-dropdown-menu"
-            tabindex="-1"
+            class="payment-details__refund-controls"
           >
-            <button
-              aria-expanded="false"
-              aria-haspopup="true"
-              aria-label="Translation actions"
-              class="components-button components-dropdown-menu__toggle has-icon"
-              type="button"
+            <div
+              class="components-dropdown components-dropdown-menu"
+              tabindex="-1"
             >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+              <button
+                aria-expanded="false"
+                aria-haspopup="true"
+                aria-label="Translation actions"
+                class="components-button components-dropdown-menu__toggle has-icon"
+                type="button"
               >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </button>
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/client/payment-details/test/__snapshots__/index.test.tsx.snap b/client/payment-details/test/__snapshots__/index.test.tsx.snap
index 7a3274751bf..ebe9d418a92 100644
--- a/client/payment-details/test/__snapshots__/index.test.tsx.snap
+++ b/client/payment-details/test/__snapshots__/index.test.tsx.snap
@@ -20,78 +20,84 @@ exports[`Payment details page should match the snapshot - Charge query param 1`]
           data-wp-component="CardBody"
         >
           <div
-            class="payment-details-summary"
+            class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="Flex"
           >
             <div
-              class="payment-details-summary__section"
+              class="payment-details-summary"
             >
-              <p
-                class="payment-details-summary__amount"
-              >
-                <span
-                  aria-busy="true"
-                  class="is-loadable-placeholder"
-                >
-                  Amount placeholder
-                </span>
-              </p>
               <div
-                class="payment-details-summary__breakdown"
+                class="payment-details-summary__section"
               >
-                
-                <p>
+                <p
+                  class="payment-details-summary__amount"
+                >
                   <span
                     aria-busy="true"
                     class="is-loadable-placeholder"
                   >
-                    Fee amount
+                    Amount placeholder
                   </span>
                 </p>
-                
-                <p>
+                <div
+                  class="payment-details-summary__breakdown"
+                >
+                  
+                  <p>
+                    <span
+                      aria-busy="true"
+                      class="is-loadable-placeholder"
+                    >
+                      Fee amount
+                    </span>
+                  </p>
+                  
+                  <p>
+                    <span
+                      aria-busy="true"
+                      class="is-loadable-placeholder"
+                    >
+                      Net amount
+                    </span>
+                  </p>
+                </div>
+              </div>
+              <div
+                class="payment-details-summary__section"
+              >
+                <div
+                  class="payment-details-summary__id"
+                >
                   <span
                     aria-busy="true"
                     class="is-loadable-placeholder"
                   >
-                    Net amount
+                    Payment ID: pi_xxxxxxxxxxxxxxxxxxxxxxxx
                   </span>
-                </p>
+                </div>
               </div>
             </div>
             <div
-              class="payment-details-summary__section"
+              class="payment-details__refund-controls"
             >
-              <div
-                class="payment-details-summary__id"
+              <span
+                aria-busy="true"
+                class="is-loadable-placeholder"
               >
-                <span
-                  aria-busy="true"
-                  class="is-loadable-placeholder"
+                <svg
+                  aria-hidden="true"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  Payment ID: pi_xxxxxxxxxxxxxxxxxxxxxxxx
-                </span>
-              </div>
+                  <path
+                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                  />
+                </svg>
+              </span>
             </div>
           </div>
-          <div
-            class="payment-details__refund-controls"
-          >
-            <span
-              aria-busy="true"
-              class="is-loadable-placeholder"
-            >
-              <svg
-                aria-hidden="true"
-                focusable="false"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                />
-              </svg>
-            </span>
-          </div>
         </div>
         <hr
           aria-orientation="horizontal"
@@ -477,79 +483,85 @@ exports[`Payment details page should match the snapshot - Payment Intent query p
           data-wp-component="CardBody"
         >
           <div
-            class="payment-details-summary"
+            class="components-flex css-175m5nr-View-Flex-sx-Base-sx-Items-ItemsRow em57xhy0"
+            data-wp-c16t="true"
+            data-wp-component="Flex"
           >
             <div
-              class="payment-details-summary__section"
+              class="payment-details-summary"
             >
-              <p
-                class="payment-details-summary__amount"
-              >
-                $1,500.00
-                <span
-                  class="payment-details-summary__amount-currency"
-                >
-                  usd
-                </span>
-                <span
-                  class="chip chip-success"
-                >
-                  Paid
-                </span>
-              </p>
               <div
-                class="payment-details-summary__breakdown"
+                class="payment-details-summary__section"
               >
-                
-                <p>
-                  Fees: 
-                  -$74.00
-                </p>
-                
-                <p>
-                  Net: 
-                  $1,426.00
+                <p
+                  class="payment-details-summary__amount"
+                >
+                  $1,500.00
+                  <span
+                    class="payment-details-summary__amount-currency"
+                  >
+                    usd
+                  </span>
+                  <span
+                    class="chip chip-success"
+                  >
+                    Paid
+                  </span>
                 </p>
+                <div
+                  class="payment-details-summary__breakdown"
+                >
+                  
+                  <p>
+                    Fees: 
+                    -$74.00
+                  </p>
+                  
+                  <p>
+                    Net: 
+                    $1,426.00
+                  </p>
+                </div>
               </div>
-            </div>
-            <div
-              class="payment-details-summary__section"
-            >
               <div
-                class="payment-details-summary__id"
+                class="payment-details-summary__section"
               >
-                Payment ID: 
-                pi_mock
+                <div
+                  class="payment-details-summary__id"
+                >
+                  Payment ID: 
+                  pi_mock
+                </div>
               </div>
             </div>
-          </div>
-          <div
-            class="payment-details__refund-controls"
-          >
             <div
-              class="components-dropdown components-dropdown-menu"
-              tabindex="-1"
+              class="payment-details__refund-controls"
             >
-              <button
-                aria-expanded="false"
-                aria-haspopup="true"
-                aria-label="Translation actions"
-                class="components-button components-dropdown-menu__toggle has-icon"
-                type="button"
+              <div
+                class="components-dropdown components-dropdown-menu"
+                tabindex="-1"
               >
-                <svg
-                  aria-hidden="true"
-                  focusable="false"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  aria-label="Translation actions"
+                  class="components-button components-dropdown-menu__toggle has-icon"
+                  type="button"
                 >
-                  <path
-                    d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-                  />
-                </svg>
-              </button>
+                  <svg
+                    aria-hidden="true"
+                    focusable="false"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    width="24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
+                    />
+                  </svg>
+                </button>
+              </div>
             </div>
           </div>
         </div>

From 5ee80a640b2360292e55e37e1331316b89f1d30e Mon Sep 17 00:00:00 2001
From: botwoo <botwoo@users.noreply.github.com>
Date: Tue, 2 Jan 2024 08:44:39 +0000
Subject: [PATCH 4/7] Amend changelog entries for release 7.0.0

---
 .../fix-7958-transaction-details-dispute-details-broken-ui   | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 changelog/fix-7958-transaction-details-dispute-details-broken-ui

diff --git a/changelog/fix-7958-transaction-details-dispute-details-broken-ui b/changelog/fix-7958-transaction-details-dispute-details-broken-ui
deleted file mode 100644
index b196bc9910c..00000000000
--- a/changelog/fix-7958-transaction-details-dispute-details-broken-ui
+++ /dev/null
@@ -1,5 +0,0 @@
-Significance: patch
-Type: fix
-Comment: Not user-facing: fixes styling bug introduced in develop branch
-
-

From 8af9441403234dd72b8b7b110352ae6ca7b109c0 Mon Sep 17 00:00:00 2001
From: Malith Senaweera <6216000+malithsen@users.noreply.github.com>
Date: Tue, 2 Jan 2024 09:25:04 -0600
Subject: [PATCH 5/7] Remove URL params from woopay_source_url (#7924)

---
 changelog/fix-trim-woopay-source-url                       | 4 ++++
 client/checkout/woopay/email-input-iframe.js               | 5 ++++-
 .../components/woopay/save-user/checkout-page-save-user.js | 7 +++++--
 tests/js/jest-test-file-setup.js                           | 5 +++++
 4 files changed, 18 insertions(+), 3 deletions(-)
 create mode 100644 changelog/fix-trim-woopay-source-url

diff --git a/changelog/fix-trim-woopay-source-url b/changelog/fix-trim-woopay-source-url
new file mode 100644
index 00000000000..d0542cc8201
--- /dev/null
+++ b/changelog/fix-trim-woopay-source-url
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Checkout error when page URL is too long
diff --git a/client/checkout/woopay/email-input-iframe.js b/client/checkout/woopay/email-input-iframe.js
index f57c3b4e90f..4a2efe861e5 100644
--- a/client/checkout/woopay/email-input-iframe.js
+++ b/client/checkout/woopay/email-input-iframe.js
@@ -263,7 +263,10 @@ export const handleWooPayEmailInput = async (
 		);
 		urlParams.append( 'wcpayVersion', getConfig( 'wcpayVersionNumber' ) );
 		urlParams.append( 'is_blocks', isBlocksCheckout ? 'true' : 'false' );
-		urlParams.append( 'source_url', window.location.href );
+		urlParams.append(
+			'source_url',
+			wcSettings?.storePages?.checkout?.permalink
+		);
 		urlParams.append(
 			'viewport',
 			`${ viewportWidth }x${ viewportHeight }`
diff --git a/client/components/woopay/save-user/checkout-page-save-user.js b/client/components/woopay/save-user/checkout-page-save-user.js
index 8edd7c583d4..c38bcae2929 100644
--- a/client/components/woopay/save-user/checkout-page-save-user.js
+++ b/client/components/woopay/save-user/checkout-page-save-user.js
@@ -73,7 +73,8 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 				? {}
 				: {
 						save_user_in_woopay: isSaveDetailsChecked,
-						woopay_source_url: window.location.href,
+						woopay_source_url:
+							wcSettings?.storePages?.checkout?.permalink,
 						woopay_is_blocks: true,
 						woopay_viewport: `${ viewportWidth }x${ viewportHeight }`,
 						woopay_user_phone_field: {
@@ -291,7 +292,9 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 						<input
 							type="hidden"
 							name="woopay_source_url"
-							value={ window.location.href }
+							value={
+								wcSettings?.storePages?.checkout?.permalink
+							}
 						/>
 						<input
 							type="hidden"
diff --git a/tests/js/jest-test-file-setup.js b/tests/js/jest-test-file-setup.js
index 5956c6c748e..c4d9395a9a1 100644
--- a/tests/js/jest-test-file-setup.js
+++ b/tests/js/jest-test-file-setup.js
@@ -89,6 +89,11 @@ global.wcSettings = {
 		CA: 'Canada',
 		UK: 'United Kingdom',
 	},
+	storePages: {
+		checkout: {
+			permalink: 'http://localhost/',
+		},
+	},
 };
 
 global.wpApiSettings = {

From b59d3d2f4f48b32c0367be9a20bca05e5f129ee6 Mon Sep 17 00:00:00 2001
From: Malith Senaweera <6216000+malithsen@users.noreply.github.com>
Date: Tue, 2 Jan 2024 11:30:15 -0600
Subject: [PATCH 6/7] Track payment request button load events (#7919)

---
 changelog/add-prb-load-tracks                 |  4 ++
 .../blocks/payment-request-express.js         | 38 ++++++++++++++++++-
 client/payment-request/index.js               | 18 +++++++++
 client/tracks/index.js                        |  2 +
 4 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 changelog/add-prb-load-tracks

diff --git a/changelog/add-prb-load-tracks b/changelog/add-prb-load-tracks
new file mode 100644
index 00000000000..5109e5ce0ca
--- /dev/null
+++ b/changelog/add-prb-load-tracks
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Track payment-request-button loads
diff --git a/client/payment-request/blocks/payment-request-express.js b/client/payment-request/blocks/payment-request-express.js
index a44cc527b16..01e32444050 100644
--- a/client/payment-request/blocks/payment-request-express.js
+++ b/client/payment-request/blocks/payment-request-express.js
@@ -1,3 +1,5 @@
+/* global wcpayPaymentRequestParams */
+
 /**
  * External dependencies
  */
@@ -9,6 +11,7 @@ import { Elements, PaymentRequestButtonElement } from '@stripe/react-stripe-js';
 import { useInitialization } from './use-initialization';
 import { getPaymentRequestData } from '../utils';
 import wcpayTracks from 'tracks';
+import { useEffect, useState } from 'react';
 
 /**
  * PaymentRequestExpressComponent
@@ -24,6 +27,7 @@ const PaymentRequestExpressComponent = ( {
 	setExpressPaymentError,
 	onClick,
 	onClose,
+	onPaymentRequestAvailable,
 } ) => {
 	// TODO: Don't display custom button when result.requestType
 	// is `apple_pay` or `google_pay`.
@@ -68,6 +72,7 @@ const PaymentRequestExpressComponent = ( {
 		} else if ( result.googlePay ) {
 			paymentRequestType = 'google_pay';
 		}
+		onPaymentRequestAvailable( paymentRequestType );
 	} );
 
 	const onPaymentRequestButtonClick = () => {
@@ -80,7 +85,9 @@ const PaymentRequestExpressComponent = ( {
 
 		if ( paymentRequestTypeEvents.hasOwnProperty( paymentRequestType ) ) {
 			const event = paymentRequestTypeEvents[ paymentRequestType ];
-			wcpayTracks.recordUserEvent( event, { source: 'checkout' } );
+			wcpayTracks.recordUserEvent( event, {
+				source: wcpayPaymentRequestParams?.button_context,
+			} );
 		}
 	};
 
@@ -104,9 +111,36 @@ const PaymentRequestExpressComponent = ( {
  */
 export const PaymentRequestExpress = ( props ) => {
 	const { stripe } = props;
+	const [ paymentRequestType, setPaymentRequestType ] = useState( false );
+
+	const handlePaymentRequestAvailability = ( paymentType ) => {
+		setPaymentRequestType( paymentType );
+	};
+
+	useEffect( () => {
+		if ( paymentRequestType ) {
+			const paymentRequestTypeEvents = {
+				google_pay: wcpayTracks.events.GOOGLEPAY_BUTTON_LOAD,
+				apple_pay: wcpayTracks.events.APPLEPAY_BUTTON_LOAD,
+			};
+
+			if (
+				paymentRequestTypeEvents.hasOwnProperty( paymentRequestType )
+			) {
+				const event = paymentRequestTypeEvents[ paymentRequestType ];
+				wcpayTracks.recordUserEvent( event, {
+					source: wcpayPaymentRequestParams?.button_context,
+				} );
+			}
+		}
+	}, [ paymentRequestType ] );
+
 	return (
 		<Elements stripe={ stripe }>
-			<PaymentRequestExpressComponent { ...props } />
+			<PaymentRequestExpressComponent
+				{ ...props }
+				onPaymentRequestAvailable={ handlePaymentRequestAvailability }
+			/>
 		</Elements>
 	);
 };
diff --git a/client/payment-request/index.js b/client/payment-request/index.js
index 9578b42517c..fc4b6f6853a 100644
--- a/client/payment-request/index.js
+++ b/client/payment-request/index.js
@@ -4,6 +4,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { doAction } from '@wordpress/hooks';
+import { debounce } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -65,6 +66,19 @@ jQuery( ( $ ) => {
 		}
 	};
 
+	// Track the payment request button load event.
+	const trackPaymentRequestButtonLoad = debounce( ( source ) => {
+		const paymentRequestTypeEvents = {
+			google_pay: wcpayTracks.events.GOOGLEPAY_BUTTON_LOAD,
+			apple_pay: wcpayTracks.events.APPLEPAY_BUTTON_LOAD,
+		};
+
+		if ( paymentRequestTypeEvents.hasOwnProperty( paymentRequestType ) ) {
+			const event = paymentRequestTypeEvents[ paymentRequestType ];
+			wcpayTracks.recordUserEvent( event, { source } );
+		}
+	}, 1000 );
+
 	/**
 	 * Object to handle Stripe payment forms.
 	 */
@@ -236,6 +250,10 @@ jQuery( ( $ ) => {
 					paymentRequestType: paymentRequestType,
 				} );
 
+				trackPaymentRequestButtonLoad(
+					wcpayPaymentRequestParams.button_context
+				);
+
 				wcpayPaymentRequest.attachPaymentRequestButtonEventListeners(
 					prButton,
 					paymentRequest
diff --git a/client/tracks/index.js b/client/tracks/index.js
index c862f189954..fa94e5d32bc 100644
--- a/client/tracks/index.js
+++ b/client/tracks/index.js
@@ -61,6 +61,7 @@ function recordUserEvent( eventName, eventProperties, isLegacy = false ) {
 
 const events = {
 	APPLEPAY_BUTTON_CLICK: 'applepay_button_click',
+	APPLEPAY_BUTTON_LOAD: 'applepay_button_load',
 	CONNECT_ACCOUNT_CLICKED: 'wcpay_connect_account_clicked',
 	CONNECT_ACCOUNT_VIEW: 'page_view',
 	CONNECT_ACCOUNT_LEARN_MORE: 'wcpay_welcome_learn_more',
@@ -76,6 +77,7 @@ const events = {
 	DISPUTE_INQUIRY_REFUND_MODAL_VIEW:
 		'wcpay_dispute_inquiry_refund_modal_view',
 	GOOGLEPAY_BUTTON_CLICK: 'gpay_button_click',
+	GOOGLEPAY_BUTTON_LOAD: 'gpay_button_load',
 	OVERVIEW_BALANCES_CURRENCY_CLICK:
 		'wcpay_overview_balances_currency_tab_click',
 	OVERVIEW_DEPOSITS_VIEW_HISTORY_CLICK:

From 08a145b8166949329701160eac83cbe66d6ca1d7 Mon Sep 17 00:00:00 2001
From: Malith Senaweera <6216000+malithsen@users.noreply.github.com>
Date: Wed, 3 Jan 2024 11:33:13 -0600
Subject: [PATCH 7/7] Add Tracks to Place Order button (#7854)

---
 changelog/add-place-order-tracks          |  4 ++++
 client/checkout/blocks/index.js           | 20 ++++++++++++++++++++
 client/checkout/classic/event-handlers.js | 13 +++++++++++++
 client/tracks/index.js                    |  1 +
 4 files changed, 38 insertions(+)
 create mode 100644 changelog/add-place-order-tracks

diff --git a/changelog/add-place-order-tracks b/changelog/add-place-order-tracks
new file mode 100644
index 00000000000..450859bad49
--- /dev/null
+++ b/changelog/add-place-order-tracks
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Place order button Tracks
diff --git a/client/checkout/blocks/index.js b/client/checkout/blocks/index.js
index deed017c0d9..0ce235a0086 100644
--- a/client/checkout/blocks/index.js
+++ b/client/checkout/blocks/index.js
@@ -34,6 +34,7 @@ import {
 } from '../constants.js';
 import { getDeferredIntentCreationUPEFields } from './payment-elements';
 import { handleWooPayEmailInput } from '../woopay/email-input-iframe';
+import wcpayTracks from 'tracks';
 import wooPayExpressCheckoutPaymentMethod from '../woopay/express-button/woopay-express-checkout-payment-method';
 import { isPreviewing } from '../preview';
 
@@ -113,6 +114,24 @@ Object.entries( enabledPaymentMethodsConfig )
 		} );
 	} );
 
+const addCheckoutTracking = () => {
+	const placeOrderButton = document.getElementsByClassName(
+		'wc-block-components-checkout-place-order-button'
+	);
+	if ( placeOrderButton.length ) {
+		placeOrderButton[ 0 ].addEventListener( 'click', () => {
+			const blocksCheckbox = document.getElementById(
+				'radio-control-wc-payment-method-options-woocommerce_payments'
+			);
+			if ( ! blocksCheckbox?.checked ) {
+				return;
+			}
+
+			wcpayTracks.recordUserEvent( wcpayTracks.events.PLACE_ORDER_CLICK );
+		} );
+	}
+};
+
 // Call handleWooPayEmailInput if woopay is enabled and this is the checkout page.
 if ( getUPEConfig( 'isWooPayEnabled' ) ) {
 	if (
@@ -131,4 +150,5 @@ if ( getUPEConfig( 'isWooPayEnabled' ) ) {
 registerExpressPaymentMethod( paymentRequestPaymentMethod( api ) );
 window.addEventListener( 'load', () => {
 	enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );
+	addCheckoutTracking();
 } );
diff --git a/client/checkout/classic/event-handlers.js b/client/checkout/classic/event-handlers.js
index 00a2581b8a9..584495518be 100644
--- a/client/checkout/classic/event-handlers.js
+++ b/client/checkout/classic/event-handlers.js
@@ -26,6 +26,7 @@ import WCPayAPI from 'wcpay/checkout/api';
 import apiRequest from '../utils/request';
 import { handleWooPayEmailInput } from 'wcpay/checkout/woopay/email-input-iframe';
 import { isPreviewing } from 'wcpay/checkout/preview';
+import wcpayTracks from 'tracks';
 
 jQuery( function ( $ ) {
 	enqueueFraudScripts( getUPEConfig( 'fraudServices' ) );
@@ -58,6 +59,18 @@ jQuery( function ( $ ) {
 		return processPaymentIfNotUsingSavedMethod( $( this ) );
 	} );
 
+	$( 'form.checkout' ).on( 'click', '#place_order', function () {
+		const isWCPay = document.getElementById(
+			'payment_method_woocommerce_payments'
+		).checked;
+
+		if ( ! isWCPay ) {
+			return;
+		}
+
+		wcpayTracks.recordUserEvent( wcpayTracks.events.PLACE_ORDER_CLICK );
+	} );
+
 	window.addEventListener( 'hashchange', () => {
 		if ( window.location.hash.startsWith( '#wcpay-confirm-' ) ) {
 			showAuthenticationModalIfRequired( api );
diff --git a/client/tracks/index.js b/client/tracks/index.js
index fa94e5d32bc..4690919650d 100644
--- a/client/tracks/index.js
+++ b/client/tracks/index.js
@@ -92,6 +92,7 @@ const events = {
 	MULTI_CURRENCY_ENABLED_CURRENCIES_UPDATED:
 		'wcpay_multi_currency_enabled_currencies_updated',
 	PAYMENT_REQUEST_SETTINGS_CHANGE: 'wcpay_payment_request_settings_change',
+	PLACE_ORDER_CLICK: 'checkout_place_order_button_click',
 	// WCPay Subscriptions empty state - prompts to connect to WCPay or create product.
 	SUBSCRIPTIONS_EMPTY_STATE_VIEW: 'wcpay_subscriptions_empty_state_view',
 	SUBSCRIPTIONS_EMPTY_STATE_FINISH_SETUP: