Uh oh!
There was an error while loading. Please reload this page.
add pricing calculator - #214
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Caution Review failedThe pull request is closed. WalkthroughAdds a PricingCalculator UI component, a SiteFooter, and a StatusBadge; updates FeatureCard to support light/dark images and switches hero/assets to webp; changes repository constants (unsend → usesend) in several components; adjusts a design token in globals.css and integrates the pricing calculator into the marketing page. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Page as Marketing Page
participant PC as PricingCalculator
participant UI as Pricing UI
User->>Page: Open /pricing section
Page->>PC: Mount PricingCalculator
PC->>UI: Render sliders + initial calculations
User->>PC: Drag Marketing slider
PC->>PC: Recompute marketingCost, subtotal, totalDue
PC->>UI: Update displayed values
User->>PC: Drag Transactional slider
PC->>PC: Recompute transactionalCost, subtotal, totalDue
PC->>UI: Update displayed values
sequenceDiagram
autonumber
participant Badge as StatusBadge
participant API as Uptime API
participant UI as Badge UI
Badge->>API: fetch(baseUrl + /api/status-page/heartbeat/...)
API-->>Badge: JSON response
Badge->>Badge: Heuristics -> (operational|degraded|down|unknown)
Badge->>UI: Render color dot + label + link
Note right of Badge: Polls every 60s (useEffect + cleanup)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 💡 Knowledge Base configuration:
You can enable these sources in your CodeRabbit configuration. 📒 Files selected for processing (6)
✨ Finishing Touches
🧪 Generate unit tests
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 |
Deploying unsend with |
| Latest commit: | 63b054a |
| Status: | 🚫 Build failed. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
apps/marketing/src/components/FeatureCard.tsx (2)
30-43: Addsizesfornext/imagewithfillto avoid layout warnings and improve responsiveness.Apply:
<Image src={(imageLightSrc || imageDarkSrc)!} alt={title || "Feature image"} fill + sizes="(min-width: 640px) 50vw, 100vw" className="object-cover dark:hidden rounded-t-xl" priority={false} /> <Image src={(imageDarkSrc || imageLightSrc)!} alt={title || "Feature image"} fill + sizes="(min-width: 640px) 50vw, 100vw" className="object-cover hidden dark:block rounded-t-xl" priority={false} />
56-69: Use webp fallbacks (to match page hero) and addsizes.Aligns with the new assets and keeps performance consistent.
- <Image- src="/hero-light.png"+ <Image+ src="/hero-light.webp" alt="Feature image" fill + sizes="(min-width: 640px) 50vw, 100vw" className="object-cover dark:hidden rounded-t-xl" priority={false} /> - <Image- src="/hero-dark.png"+ <Image+ src="/hero-dark.webp" alt="Feature image" fill + sizes="(min-width: 640px) 50vw, 100vw" className="object-cover hidden dark:block rounded-t-xl" priority={false} />apps/marketing/src/components/PricingCalculator.tsx (3)
91-94: Fix comment to match the actual defaults.- // Defaults chosen to total $10: 8000*$0.001 + 5000*$0.0004 = 10+ // Defaults chosen to total $10: 5000*$0.001 + 12500*$0.0004 = 10
135-168: Optional: Use Intl.NumberFormat for currency for locale-safe formatting.+ const fmtUSD = React.useMemo(+ () => new Intl.NumberFormat("en-US", { style: "currency", currency: "USD" }),+ []+ ); ... - ${marketingCost.toFixed(2)}+ {fmtUSD.format(marketingCost)} ... - @ ${MARKETING_RATE.toFixed(4)} each+ @ {MARKETING_RATE.toFixed(4)} each ... - ${transactionalCost.toFixed(2)}+ {fmtUSD.format(transactionalCost)} ... - @ ${TRANSACTIONAL_RATE.toFixed(4)} each+ @ {TRANSACTIONAL_RATE.toFixed(4)} each ... - ${totalDue.toFixed(2)}+ {fmtUSD.format(totalDue)}
70-79: Optional: Prevent tooltip clipping at the slider edges.Clamp the badge position a bit inside the track.
- {dragging && (+ {dragging && ( <div - className="pointer-events-none absolute -top-9 left-0 -translate-x-1/2"- style={{ left: `${percent}%` }}+ className="pointer-events-none absolute -top-9 left-0"+ style={{ left: `${Math.min(97, Math.max(3, percent))}%`, transform: "translateX(-50%)" }} >apps/marketing/src/app/page.tsx (1)
377-377: Polish the pricing subheading copy.Capitalize and consider an em dash for readability.
- pay for what you use, the most affordable email platform+ Pay for what you use — the most affordable email platform
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (2)
apps/marketing/public/hero-dark.pngis excluded by!**/*.pngapps/marketing/public/hero-light.pngis excluded by!**/*.png
📒 Files selected for processing (4)
apps/marketing/src/app/page.tsx(7 hunks)apps/marketing/src/components/FeatureCard.tsx(1 hunks)apps/marketing/src/components/PricingCalculator.tsx(1 hunks)packages/ui/styles/globals.css(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/general.mdc)
Include all required imports, and ensure proper naming of key components.
Files:
apps/marketing/src/components/PricingCalculator.tsxapps/marketing/src/app/page.tsxapps/marketing/src/components/FeatureCard.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Prefer TypeScript for implementation files (TypeScript-first)
ESLint must pass with zero warnings using @usesend/eslint-config before PRs
Files:
apps/marketing/src/components/PricingCalculator.tsxapps/marketing/src/app/page.tsxapps/marketing/src/components/FeatureCard.tsx
**/*.{ts,tsx,md}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx,md}: Use 2-space indentation and keep semicolons as enforced by Prettier 3
Run Prettier 3 formatting (pnpm format) over TypeScript and Markdown files
Files:
apps/marketing/src/components/PricingCalculator.tsxapps/marketing/src/app/page.tsxapps/marketing/src/components/FeatureCard.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Name React component files in PascalCase (e.g., AppSideBar.tsx)
Files:
apps/marketing/src/components/PricingCalculator.tsxapps/marketing/src/app/page.tsxapps/marketing/src/components/FeatureCard.tsx
🧬 Code graph analysis (1)
apps/marketing/src/app/page.tsx (1)
apps/marketing/src/components/PricingCalculator.tsx (1)
PricingCalculator(85-175)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (7)
packages/ui/styles/globals.css (1)
12-12: Contrast passes WCAG standards
Computed contrast ratios are ~8.1:1 against the light background and ~13.8:1 against the dark background—both exceed the 4.5:1 minimum.apps/marketing/src/components/FeatureCard.tsx (1)
5-15: API extension looks good.Prop typing and deprecation strategy are clear and backward-compatible.
Also applies to: 19-23
apps/marketing/src/app/page.tsx (5)
8-8: LGTM: PricingCalculator import.
65-65: LGTM: Switch to webp hero assets.Good perf improvement and consistency with other imagery.
Also applies to: 75-75
226-228: LGTM: Migration to light/dark image variants for features.Prop usage matches the updated FeatureCard API.
Also applies to: 234-236, 277-279
396-398: LGTM: PricingCalculator placement under the pricing cards.
157-173: Domains whitelist not needed with unoptimized static export
apps/marketing/next.config.js already setsimages.unoptimized: trueforoutput: "export", so Next.js will render plain<img>tags and bypass the image‐optimization pipeline (including domain checks) (nextjs.org, vercel.com)Likely an incorrect or invalid review comment.
Uh oh!
There was an error while loading. Please reload this page.
Summary by CodeRabbit