From 3a57859a165cfe91abfb3815965704e112b80da1 Mon Sep 17 00:00:00 2001
From: Eric Jinks <3147296+Jinksi@users.noreply.github.com>
Date: Tue, 2 Jan 2024 12:15:29 +1000
Subject: [PATCH] Update snapshots

---
 .../test/__snapshots__/index.test.tsx.snap    |   78 +-
 .../test/__snapshots__/index.test.tsx.snap    | 1208 +++++++++--------
 .../test/__snapshots__/index.test.tsx.snap    |  224 +--
 3 files changed, 797 insertions(+), 713 deletions(-)

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/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>