fix: contact update mutation (#265) #271
Conversation
|
@lakshayMeghlan123 is attempting to deploy a commit to the kmkoushik's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdded a new exported React component, PlanDetails, in apps/web/src/components/payments/PlanDetails.tsx. It queries subscription details via api.billing.getSubscriptionDetails.useQuery and reads currentTeam from useTeam. If loading or no currentTeam, it returns null. It derives planKey from currentTeam.plan, maps it to PERKS via PLAN_PERKS, and defaults to an empty list if missing. It renders the current plan name (active planKey lowercase, otherwise “free”). If cancelAtPeriodEnd is set, it displays a secondary badge with the formatted “MMM dd” cancellation date. It lists plan perks with a CheckCircle2 icon. Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/components/payments/PlanDetails.tsx (1)
1-47: CRITICAL: PR objectives do not match the actual code changes.The PR title and objectives claim to fix a "contact update mutation" issue related to contactBookId Prisma errors and environment variable duplication. However, this file introduces an entirely new PlanDetails component for displaying subscription plans, which has no relation to contacts, mutations, or environment variables.
This is a severe mismatch that suggests:
- The wrong files were committed to this PR, or
- The PR description/objectives are incorrect
Please verify that:
- The correct files are included in this PR
- The PR description accurately reflects the changes
- If this is a separate feature, it should be in its own PR with appropriate objectives
🧹 Nitpick comments (5)
apps/web/src/components/payments/PlanDetails.tsx (5)
1-1: Remove unused import.The
Plantype is imported but never used in this component.-import { Plan } from "@prisma/client";
5-5: Remove unused import.The
Spinnercomponent is imported but never used. If you intend to show a loading spinner duringsubscriptionQuery.isLoading, consider using it; otherwise, remove this import.-import Spinner from "@usesend/ui/src/spinner";
15-17: Consider showing a loading indicator.Returning
nullduring loading provides no visual feedback to users. Since you've importedSpinner, consider displaying it during the loading state for better UX.if (subscriptionQuery.isLoading || !currentTeam) { - return null; + return ( + <div className="flex items-center justify-center p-4"> + <Spinner /> + </div> + ); }
12-17: Add error handling for subscription query.The component doesn't handle the error state of
subscriptionQuery. If the query fails, users see nothing without any indication of what went wrong.const subscriptionQuery = api.billing.getSubscriptionDetails.useQuery(); const { currentTeam } = useTeam(); - if (subscriptionQuery.isLoading || !currentTeam) { + if (subscriptionQuery.isLoading) { + return ( + <div className="flex items-center justify-center p-4"> + <Spinner /> + </div> + ); + } + + if (subscriptionQuery.isError) { + return ( + <div className="text-destructive text-sm"> + Failed to load subscription details + </div> + ); + } + + if (!currentTeam) { return null; }
38-43: Consider using perk content as key.Using array index as the key works for static lists, but using the perk text itself would be more robust and follows React best practices.
- {perks.map((perk, index) => ( - <li key={index} className="flex items-center gap-2"> + {perks.map((perk) => ( + <li key={perk} className="flex items-center gap-2"> <CheckCircle2 className="h-4 w-4 text-green flex-shrink-0" /> <span className="text-sm">{perk}</span> </li> ))}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/components/payments/PlanDetails.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/general.mdc)
Include all required imports, and ensure proper naming of key components.
Files:
apps/web/src/components/payments/PlanDetails.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Use TypeScript with 2-space indentation and semicolons (enforced by Prettier)
ESLint must pass with zero warnings using @usesend/eslint-config
Do not use dynamic imports (avoid import() and dynamic loading)
Files:
apps/web/src/components/payments/PlanDetails.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (AGENTS.md)
Format code and docs with Prettier 3
Files:
apps/web/src/components/payments/PlanDetails.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Name React component files in PascalCase (e.g., AppSideBar.tsx)
Files:
apps/web/src/components/payments/PlanDetails.tsx
apps/web/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/web/**/*.{ts,tsx}: In apps/web, use the "/" alias for src imports (e.g., import { x } from "/utils/x")
Prefer using tRPC for API calls unless explicitly instructed otherwise
Files:
apps/web/src/components/payments/PlanDetails.tsx
🔇 Additional comments (3)
apps/web/src/components/payments/PlanDetails.tsx (3)
40-40: No changes needed –text-greenis valid
The shared Tailwind config extendsgreenwith a DEFAULT value, which generates thetext-greenutility.
19-20: Verify Prisma Plan enum matches PLAN_PERKS keys
Theas keyof typeof PLAN_PERKSassertion bypasses TS checks—confirm that the PrismaPlanenum only includes the keys defined inPLAN_PERKS(FREE, BASIC). If you introduce new plans, updatePLAN_PERKSor add a runtime guard/log for unexpected values.
33-33:cancelAtPeriodEndis already a Date—no conversion needed.
Prisma returns it as a JSDateand tRPC’ssuperjsonpreserves it, so you can pass it directly toformat().Likely an incorrect or invalid review comment.
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
3 participants
fix #265
Next.js (apps/web) doesn’t see the root .env. Put the same vars into apps/web/.env.local
If this fixes it, problem solved. (Keep .env.local out of git — it’s for local secrets.)
Summary by cubic
Fixes the contact update mutation by ensuring Next.js loads required environment variables from apps/web/.env.local. This unblocks local development and prevents missing secret errors.