Merge pull request #12545 from linode/staging

Release v1.146.2 - staging → master

Author: coliu-akamai

packages/manager/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/) and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [2025-07-21] - v1.146.2
+
+### Fixed:
+
+- Resort to payment id for edit billing flow ([#12544](https://github.com/linode/manager/pull/12544))
+
 ## [2025-07-16] - v1.146.1
 
 

packages/manager/package.json

@@ -2,7 +2,7 @@
   "name": "linode-manager",
   "author": "Linode",
   "description": "The Linode Manager website",
-  "version": "1.146.1",
+  "version": "1.146.2",
   "private": true,
   "type": "module",
   "bugs": {

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.test.tsx

@@ -243,17 +243,7 @@ describe('Payment Method Row', () => {
 
     expect(navigate).toHaveBeenCalledWith({
       search: {
-        paymentMethod: {
-          created: '2021-05-21T14:27:51',
-          data: {
-            card_type: 'Visa',
-            expiry: '12/2022',
-            last_four: '1881',
-          },
-          id: 9,
-          is_default: false,
-          type: 'credit_card',
-        },
+        paymentMethodId: 9,
       },
       to: '/account/billing/make-payment',
     });

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx

@@ -61,7 +61,9 @@ export const PaymentMethodRow = (props: Props) => {
       onClick: () => {
         navigate({
           to: '/account/billing/make-payment',
-          search: { paymentMethod },
+          search: {
+            paymentMethodId: paymentMethod.id,
+          },
         });
       },
       title: 'Make a Payment',

packages/manager/src/features/Billing/BillingPanels/BillingSummary/BillingSummary.tsx

@@ -55,10 +55,12 @@ export const BillingSummary = (props: BillingSummaryProps) => {
 
   const navigate = useNavigate();
   const match = useMatch({ strict: false });
-  const { paymentMethod } = useSearch({
+  const search = useSearch({
     strict: false,
   });
 
+  const { paymentMethodId } = search;
+
   const routeForMakePayment = '/account/billing/make-payment';
   const makePaymentRouteMatch = match?.routeId === routeForMakePayment;
 
@@ -91,13 +93,17 @@ export const BillingSummary = (props: BillingSummaryProps) => {
       return;
     }
 
-    const selectedPaymentMethod =
-      paymentMethod ??
-      paymentMethods?.find((payment) => payment.is_default) ??
-      undefined;
+    const selectedPaymentMethod = paymentMethodId
+      ? paymentMethods?.find((payment) => payment.id === paymentMethodId)
+      : (paymentMethods?.find((payment) => payment.is_default) ?? undefined);
 
     openPaymentDrawer(selectedPaymentMethod);
-  }, [paymentMethods, openPaymentDrawer, makePaymentRouteMatch, paymentMethod]);
+  }, [
+    paymentMethods,
+    openPaymentDrawer,
+    makePaymentRouteMatch,
+    paymentMethodId,
+  ]);
 
   //
   // Account Balance logic

packages/manager/src/routes/account/index.ts

@@ -3,15 +3,13 @@ import { createRoute, redirect } from '@tanstack/react-router';
 import { rootRoute } from '../root';
 import { AccountRoute } from './AccountRoute';
 
-import type { PaymentMethod } from '@linode/api-v4';
-
 interface AccountBillingSearch {
   contactDrawerOpen?: boolean;
   focusEmail?: boolean;
 }
 
 interface AccountBillingMakePaymentSearch {
-  paymentMethod?: PaymentMethod;
+  paymentMethodId?: number;
 }
 
 const accountRoute = createRoute({