feat: require state for existing US payment methods

[HarshMN2345]

What does this PR do?

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

(Write your answer here.)

Summary by CodeRabbit

• New Features
  • Added a modal allowing users to update the state for their payment methods.
  • Automatically prompts users to provide state information for US payment methods missing it.
  • Payment methods can now store an optional state value; US-based methods require selecting a state before saving.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[appwrite]

Console (appwrite/console)

Project ID: 688b7bf400350cbd60e9

Sites (1)

Site	Status	Logs	Preview	QR
console-stage 688b7cf6003b1842c9dc	Ready	View Logs	Preview URL

Tip

Sites support three domain rule types: Active deployment, Git branch, and Redirect

[coderabbitai]

Walkthrough

Adds a new Svelte component UpdateStateModal to allow setting a US state on a payment method. Extends PaymentMethodData with an optional state?: string. Integrates the modal into two payment-method pages (routes/(console)/account/payments/paymentMethods.svelte and routes/(console)/organization-[organization]/billing/paymentMethods.svelte) by introducing showUpdateState and paymentMethodNeedingState, adding reactive detection of US payment methods missing state, and wiring modal open/close and selection reset behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: introducing a requirement for state information on existing US payment methods.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/lib/components/billing/updateStateModal.svelte`:
- Around line 22-24: selectedState currently persists between modal opens
causing stale selections; update the component to reset selectedState when the
modal closes (or reinitialize it from paymentMethod when the modal opens).
Specifically, add logic that listens for the modal close/open state (e.g., an
on:close handler or a reactive watcher on the modal `open` prop) and set
selectedState = '' (or selectedState = paymentMethod?.state) and clear
isSubmitting/error as appropriate; reference the existing selectedState,
isSubmitting, error and paymentMethod symbols when adding the reset logic so the
selection is cleared on close or correctly initialized on open.

🧹 Nitpick comments (2)

src/lib/components/billing/updateStateModal.svelte (2)

1-1: Rename component file to PascalCase.

updateStateModal.svelte should be UpdateStateModal.svelte under src/lib/components/billing/ to match the component naming guideline; update imports accordingly. As per coding guidelines.

---

10-12: Use $lib alias for local imports.

Avoid relative imports from src/lib; use $lib aliases for both the state list and component index. As per coding guidelines.

♻️ Suggested import cleanup

-    import { states } from './state';
-    import { CreditCardBrandImage } from '../index.js';
+    import { states } from '$lib/components/billing/state';
+    import { CreditCardBrandImage } from '$lib/components';