fix: [M3-10497], [M3-10495], [M3-10493], [M3-10494] - Fix Invoice pagination, unwanted hyphen in service transfers breadcrumb, restricted message in quotas and open make a payment drawer when IAM nav is enabled

[cpathipa]

Description 📝

This PR address the bugs

1. Cannot navigate invoice pagination when IAM nav is enabled
2. Cannot open payment method "Make a Payment" drawer when IAM nav is enabled.
3. Redirect does not occur when IAM navigation is enabled and Quotas is disabled.
4. Service transfers details page breadcrumb contains hyphen.

Changes 🔄

List any change(s) relevant to the reviewer.

• Updatee route in PaymentMethodRow
• Updated route in CreditCardExpiredBanner
• Updated route in EmailBounce
• Updated route in TaxCollectionBanner
• Updated page title in BillingLanding
• Added restricted notice in Quotas.

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

8/26

Preview 📷

How to test 🧪

Reproduction steps

M3-10497 Reproduction steps

(How to reproduce the issue, if applicable)

• Enable IAM navigation feature flag
• Navigate to billing page at "/billing"
• Under "Billing & Payment History", click any of the pagination buttons
• Observe that no navigation occurs

Verification steps

• Verify upon clicking pagination buttons in the billing invoice list, users should navigate to the desired page. (M3-1049)
• Verify clicking "Make a Payment" should open the "Make a Payment" drawer. (M3-10495)
• Verify service transfers details page breadcrumb contains now hyphen when Iam nav flag is enabled. (M3-10494)
• Verify when navigating to the Quotas page while the feature is disabled (limitsEvolution), the user should not be able to see restricted message in Quotas page. (M3-10493)

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[mjac0bs]

@cpathipa Can you add the Urgent label if this is needed for 8/26?

[jdamore-linode]

Thanks Chandra! Aside from the Quotas feature flag behavior, everything is looking good to me 👍 I'm hoping you can take a second look at the Quotas change because I don't think showing a banner in that case makes much UX sense or is consistent with how we gate other feature flags

[mjac0bs]

With the IAM Primary Nav changes flag on:
✅ Verified upon clicking pagination buttons in the billing invoice list, users should navigate to the desired page. (M3-1049)
✅ Verify clicking "Make a Payment" should open the "Make a Payment" drawer. (M3-10495)

• Also verified the Add Payment and Edit Billing Contact Info drawers

✅ Verified service transfers details page breadcrumb contains now hyphen when Iam nav flag is enabled. (M3-10494)

✅ Verified when navigating to the Quotas page while the feature is disabled (limitsEvolution), the user should not be able to see restricted message in Quotas page. (M3-10493)

• Left one comment about the copy, but otherwise this looked good.

Thanks @cpathipa, approving pending tests pass.

[linode-gh-bot]

Cloud Manager UI test results

🔺 2 failing tests on test run #10 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
2 Failing	727 Passing	5 Skipped	124m 17s

Details

Failing Tests
	Spec	Test
❌	access-key.e2e.spec.ts	Cloud Manager Cypress Tests→object storage access key end-to-end tests » "before all" hook for "can create an access key with unlimited access - e2e"
❌	events-fetching.spec.ts	Cloud Manager Cypress Tests→Event fetching and polling » Makes initial fetch to events endpoint

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/objectStorage/access-key.e2e.spec.ts,cypress/e2e/core/notificationsAndEvents/events-fetching.spec.ts"