Feat/revamp pricing page#416
Conversation
|
@Aryan-205 is attempting to deploy a commit to the AJEET PRATAP SINGH's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughAdds a ChangesPlan Duration Field and Pricing Page Revamp
Sequence DiagramsequenceDiagram
participant Browser
participant PricingPage
participant PricingComparison
participant PlanColumnHeader
participant PaymentFlow
participant PaymentService
Browser->>PricingPage: visit /pricing
PricingPage->>PricingComparison: tiers + callbackUrl
PricingComparison->>PlanColumnHeader: render per tier
PlanColumnHeader-->>Browser: free CTA → /dashboard/home
PlanColumnHeader->>PaymentFlow: paid CTA with planId + callbackUrl
PaymentFlow->>PaymentService: initiate subscription
PaymentService->>PaymentService: resolvePlanDurationMonths(plan)
PaymentService-->>PaymentFlow: endDate (month-offset clamped)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
apps/web/src/app/(main)/(landing)/pricing/page.tsxOops! Something went wrong! :( ESLint: 8.57.1 TypeError: Converting circular structure to JSON apps/web/src/components/ui/custom-button.tsxOops! Something went wrong! :( ESLint: 8.57.1 TypeError: Converting circular structure to JSON apps/web/tailwind.config.tsOops! Something went wrong! :( ESLint: 8.57.1 TypeError: Converting circular structure to JSON 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: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In
`@apps/api/prisma/migrations/20260621140000_add_plan_duration_months/migration.sql`:
- Line 2: The migration adds the durationMonths column with a default of 12
months, but this will incorrectly set all existing Plan rows to 12 months if
they previously had different durations. Add an UPDATE statement in the
migration to backfill the durationMonths column for existing Plan records with
their correct duration values based on legacy data or plan type logic before the
column is enforced as NOT NULL, ensuring that resolvePlanDurationMonths in
apps/api/src/services/payment.service.ts uses accurate historical durations for
existing plans rather than defaulting everything to 12 months.
In `@apps/api/prisma/seed.ts`:
- Around line 21-29: The upsert operations in the seed file only update the
durationMonths field, which means if these plan IDs already exist with stale
values, rerunning the seed won't normalize them and will leave inconsistent
state. Update both upsert calls (the one creating Test Plan with id
385b8215-d70f-473e-81c9-68a673c0d2fc-test and the other one mentioned in the
also applies to section) to include all fields in the update object that are
present in the create object: name, interval, durationMonths, price, and
currency. This ensures that each rerun of the seed will properly normalize any
existing records with the current values.
In `@apps/web/src/app/`(main)/(landing)/pricing/page.tsx:
- Around line 195-200: Replace the inline style object containing maskImage,
WebkitMaskImage, and filter blur properties with equivalent Tailwind utility
classes. Additionally, replace all hardcoded hex color values found at lines
219, 227-229, and 279 with appropriate Tailwind color utilities or design tokens
from your design system. Remove the style prop entirely and convert all styling
to use Tailwind classes to maintain consistency with the design system
constraints for the pricing page component.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 20286501-d560-412b-875b-8f25a7f34c96
⛔ Files ignored due to path filters (1)
apps/web/public/assets/jackedaj.jpgis excluded by!**/*.jpg
📒 Files selected for processing (8)
apps/api/prisma/migrations/20260621140000_add_plan_duration_months/migration.sqlapps/api/prisma/schema.prismaapps/api/prisma/seed.tsapps/api/scripts/seed-pro-modules.tsapps/api/src/services/payment.service.tsapps/web/src/app/(main)/(landing)/pricing/page.tsxapps/web/src/components/ui/custom-button.tsxapps/web/tailwind.config.ts
| @@ -0,0 +1,2 @@ | |||
| -- AlterTable | |||
| ALTER TABLE "Plan" ADD COLUMN "durationMonths" INTEGER NOT NULL DEFAULT 12; | |||
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
backfill existing plan durations before enforcing default 12
this migration assigns durationMonths = 12 to all existing Plan rows. since resolvePlanDurationMonths in apps/api/src/services/payment.service.ts now prefers durationMonths, any legacy non-yearly plans would be treated as 12-month subscriptions.
proposed migration shape
-ALTER TABLE "Plan" ADD COLUMN "durationMonths" INTEGER NOT NULL DEFAULT 12;
+ALTER TABLE "Plan" ADD COLUMN "durationMonths" INTEGER;
+
+UPDATE "Plan"
+SET "durationMonths" = CASE LOWER(COALESCE("interval", ''))
+ WHEN 'monthly' THEN 1
+ WHEN 'quarterly' THEN 3
+ WHEN 'yearly' THEN 12
+ WHEN 'annual' THEN 12
+ ELSE 12
+END
+WHERE "durationMonths" IS NULL;
+
+ALTER TABLE "Plan" ALTER COLUMN "durationMonths" SET NOT NULL;
+ALTER TABLE "Plan" ALTER COLUMN "durationMonths" SET DEFAULT 12;📝 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.
| ALTER TABLE "Plan" ADD COLUMN "durationMonths" INTEGER NOT NULL DEFAULT 12; | |
| ALTER TABLE "Plan" ADD COLUMN "durationMonths" INTEGER; | |
| UPDATE "Plan" | |
| SET "durationMonths" = CASE LOWER(COALESCE("interval", '')) | |
| WHEN 'monthly' THEN 1 | |
| WHEN 'quarterly' THEN 3 | |
| WHEN 'yearly' THEN 12 | |
| WHEN 'annual' THEN 12 | |
| ELSE 12 | |
| END | |
| WHERE "durationMonths" IS NULL; | |
| ALTER TABLE "Plan" ALTER COLUMN "durationMonths" SET NOT NULL; | |
| ALTER TABLE "Plan" ALTER COLUMN "durationMonths" SET DEFAULT 12; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In
`@apps/api/prisma/migrations/20260621140000_add_plan_duration_months/migration.sql`
at line 2, The migration adds the durationMonths column with a default of 12
months, but this will incorrectly set all existing Plan rows to 12 months if
they previously had different durations. Add an UPDATE statement in the
migration to backfill the durationMonths column for existing Plan records with
their correct duration values based on legacy data or plan type logic before the
column is enforced as NOT NULL, ensuring that resolvePlanDurationMonths in
apps/api/src/services/payment.service.ts uses accurate historical durations for
existing plans rather than defaulting everything to 12 months.
| update: { durationMonths: 12 }, | ||
| create: { | ||
| id: '385b8215-d70f-473e-81c9-68a673c0d2fc-test', | ||
| name: 'Test Plan', | ||
| interval: 'yearly', | ||
| durationMonths: 12, | ||
| price: 100, // 1 rupee in paise | ||
| currency: 'INR', | ||
| }, |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
make upsert updates deterministic for seeded plan ids
both upsert calls only update durationMonths. if these ids already exist with stale price/currency/interval/name, reruns won’t normalize them, which can leave inconsistent seed state.
suggested update-branch normalization
const testPlan = await prisma.plan.upsert({
where: { id: '385b8215-d70f-473e-81c9-68a673c0d2fc-test' },
- update: { durationMonths: 12 },
+ update: {
+ name: 'Test Plan',
+ interval: 'yearly',
+ durationMonths: 12,
+ price: 100,
+ currency: 'INR',
+ },
create: {
id: '385b8215-d70f-473e-81c9-68a673c0d2fc-test',
name: 'Test Plan',
@@
const fourYearPlan = await prisma.plan.upsert({
where: { id: '385b8215-d70f-473e-81c9-68a673c0d2fc-4yr-test' },
- update: { durationMonths: 48 },
+ update: {
+ name: 'Pro 4 Year (Test)',
+ interval: 'yearly',
+ durationMonths: 48,
+ price: 100,
+ currency: 'INR',
+ },
create: {
id: '385b8215-d70f-473e-81c9-68a673c0d2fc-4yr-test',
name: 'Pro 4 Year (Test)',Also applies to: 36-44
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/api/prisma/seed.ts` around lines 21 - 29, The upsert operations in the
seed file only update the durationMonths field, which means if these plan IDs
already exist with stale values, rerunning the seed won't normalize them and
will leave inconsistent state. Update both upsert calls (the one creating Test
Plan with id 385b8215-d70f-473e-81c9-68a673c0d2fc-test and the other one
mentioned in the also applies to section) to include all fields in the update
object that are present in the create object: name, interval, durationMonths,
price, and currency. This ensures that each rerun of the seed will properly
normalize any existing records with the current values.
| style={{ | ||
| maskImage: "linear-gradient(to top, black 0%, transparent 85%)", | ||
| WebkitMaskImage: | ||
| "linear-gradient(to top, black 0%, transparent 85%)", | ||
| filter: "blur(10px)", | ||
| }} |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
replace hardcoded colors and inline styles with design-token/tailwind utilities.
Line 195-Line 200 uses inline style, and Line 219, Line 227-Line 229, and Line 279 use hardcoded hex colors. this breaks the design-system constraints for the web app.
proposed fix
- <div
- aria-hidden
- className="pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-1/2 lg:h-2/5"
- style={{
- maskImage: "linear-gradient(to top, black 0%, transparent 85%)",
- WebkitMaskImage:
- "linear-gradient(to top, black 0%, transparent 85%)",
- filter: "blur(10px)",
- }}
- >
+ <div
+ aria-hidden
+ className="pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-1/2 lg:h-2/5 [mask-image:linear-gradient(to_top,black_0%,transparent_85%)] [webkit-mask-image:linear-gradient(to_top,black_0%,transparent_85%)] blur-[10px]"
+ >
@@
- <span className="bg-gradient-to-b from-[`#a472ea`] to-[`#432ba0`] bg-clip-text text-transparent">
+ <span className="bg-gradient-to-b from-brand-purple-light to-brand-purple-dark bg-clip-text text-transparent">
@@
- learning <span className="text-[`#a472ea`]">Open Source.</span>{" "}
- <span className="text-[`#a472ea`]">Build in Public.</span>{" "}
- <span className="text-[`#a472ea`]">First Principles.</span>
+ learning <span className="text-brand-purple-light">Open Source.</span>{" "}
+ <span className="text-brand-purple-light">Build in Public.</span>{" "}
+ <span className="text-brand-purple-light">First Principles.</span>
@@
- className="hover:underline bg-gradient-to-b from-[`#a472ea`] via-[`#a472ea`]/80 to-[`#432ba0`] bg-clip-text text-transparent"
+ className="hover:underline bg-gradient-to-b from-brand-purple-light via-brand-purple-light/80 to-brand-purple-dark bg-clip-text text-transparent"As per coding guidelines, always use Tailwind classes for styling and never use hardcoded hex values in apps/web/src/**/*.{tsx,ts,jsx,js}.
Also applies to: 219-229, 279-279
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/app/`(main)/(landing)/pricing/page.tsx around lines 195 - 200,
Replace the inline style object containing maskImage, WebkitMaskImage, and
filter blur properties with equivalent Tailwind utility classes. Additionally,
replace all hardcoded hex color values found at lines 219, 227-229, and 279 with
appropriate Tailwind color utilities or design tokens from your design system.
Remove the style prop entirely and convert all styling to use Tailwind classes
to maintain consistency with the design system constraints for the pricing page
component.
Source: Coding guidelines
|
covered in #414 thank you so much for ur contribution! |
3 participants
closes #409
I have made the table pricing section and fixed the hero section a bit
Here are some attached screenshots to give you an idea
Summary by CodeRabbit
New Features
Improvements