feat: require state for existing US payment methods #2804
Conversation
Console (appwrite/console)Project ID: Tip Our Discord community has grown to 24K developers, and counting |
WalkthroughAdds a new Svelte component src/lib/components/billing/updateStateModal.svelte (UpdateStateModal) with public props Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.svelteshould beUpdateStateModal.svelteundersrc/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$libaliases 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';
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
| onSubmit={handleSubmit} | ||
| bind:show | ||
| title="Update payment method state"> | ||
| <svelte:fragment slot="description"> |
There was a problem hiding this comment.
Maybe move the desc below the separator
its too close to the title
lohanidamodar
left a comment
lohanidamodar
left a comment
There was a problem hiding this comment.
Rest looks good, let's fix the description of the modal and merge.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/lib/components/billing/updateStateModal.svelte`:
- Around line 10-12: Update the imports in updateStateModal.svelte to use the
$lib alias instead of relative paths: replace the import of states (currently
from './state') and CreditCardBrandImage (currently from '../index.js') to
import from '$lib/...' equivalents so they resolve from src/lib; ensure the
module names (states and CreditCardBrandImage) remain unchanged and update any
other src/lib relative imports in this file to use the $lib alias for
consistency with repo conventions.
🧹 Nitpick comments (1)
src/lib/components/billing/updateStateModal.svelte (1)
1-1: Rename the component file to PascalCase.The component lives under
src/lib/components/**and should use PascalCase file naming (e.g.,UpdateStateModal.svelte). As per coding guidelines, ...
| import { states } from './state'; | ||
| import { Alert, Card, Layout, Typography } from '@appwrite.io/pink-svelte'; | ||
| import { CreditCardBrandImage } from '../index.js'; |
There was a problem hiding this comment.
Use $lib alias for src/lib imports.
Relative imports from src/lib should use the $lib alias. This keeps paths consistent and matches the repo conventions.
🔧 Suggested change
-import { states } from './state';
+import { states } from '$lib/components/billing/state';
@@
-import { CreditCardBrandImage } from '../index.js';
+import { CreditCardBrandImage } from '$lib/components';As per coding guidelines, ...
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { states } from './state'; | |
| import { Alert, Card, Layout, Typography } from '@appwrite.io/pink-svelte'; | |
| import { CreditCardBrandImage } from '../index.js'; | |
| import { states } from '$lib/components/billing/state'; | |
| import { Alert, Card, Layout, Typography } from '@appwrite.io/pink-svelte'; | |
| import { CreditCardBrandImage } from '$lib/components'; |
🤖 Prompt for AI Agents
In `@src/lib/components/billing/updateStateModal.svelte` around lines 10 - 12,
Update the imports in updateStateModal.svelte to use the $lib alias instead of
relative paths: replace the import of states (currently from './state') and
CreditCardBrandImage (currently from '../index.js') to import from '$lib/...'
equivalents so they resolve from src/lib; ensure the module names (states and
CreditCardBrandImage) remain unchanged and update any other src/lib relative
imports in this file to use the $lib alias for consistency with repo
conventions.
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
✏️ Tip: You can customize this high-level summary in your review settings.