├── .env.example ├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── components.json ├── drizzle.config.ts ├── next.config.mjs ├── package-lock.json ├── package.json ├── postcss.config.mjs ├── src ├── app │ ├── (auth) │ │ ├── layout.tsx │ │ ├── sign-in │ │ │ └── [[...sign-in]] │ │ │ │ └── page.tsx │ │ └── sign-up │ │ │ └── [[...sign-up]] │ │ │ └── page.tsx │ ├── (marketing) │ │ ├── _components │ │ │ └── NavBar.tsx │ │ ├── _icons │ │ │ ├── Clerk.tsx │ │ │ └── Neon.tsx │ │ ├── layout.tsx │ │ └── page.tsx │ ├── api │ │ ├── products │ │ │ └── [productId] │ │ │ │ └── banner │ │ │ │ └── route.ts │ │ └── webhooks │ │ │ ├── clerk │ │ │ └── route.ts │ │ │ └── stripe │ │ │ └── route.ts │ ├── dashboard │ │ ├── _components │ │ │ ├── AddToSiteProductModalContent.tsx │ │ │ ├── DeleteProductAlertDialogContent.tsx │ │ │ ├── NavBar.tsx │ │ │ ├── NoProducts.tsx │ │ │ ├── PageWithBackButton.tsx │ │ │ ├── ProductGrid.tsx │ │ │ ├── TimezoneDropdownMenuItem.tsx │ │ │ ├── charts │ │ │ │ ├── ViewsByCountryChart.tsx │ │ │ │ ├── ViewsByDayChart.tsx │ │ │ │ └── ViewsByPPPChart.tsx │ │ │ └── forms │ │ │ │ ├── CountryDiscountsForm.tsx │ │ │ │ ├── ProductCustomizationForm.tsx │ │ │ │ └── ProductDeailsForm.tsx │ │ ├── analytics │ │ │ └── page.tsx │ │ ├── layout.tsx │ │ ├── page.tsx │ │ ├── products │ │ │ ├── [productId] │ │ │ │ └── edit │ │ │ │ │ └── page.tsx │ │ │ ├── new │ │ │ │ └── page.tsx │ │ │ └── page.tsx │ │ └── subscription │ │ │ └── page.tsx │ ├── fonts │ │ ├── GeistMonoVF.woff │ │ └── GeistVF.woff │ ├── globals.css │ └── layout.tsx ├── components │ ├── Banner.tsx │ ├── BrandLogo.tsx │ ├── HasPermission.tsx │ ├── NoPermissionCard.tsx │ ├── RequiredLabelIcon.tsx │ └── ui │ │ ├── alert-dialog.tsx │ │ ├── button.tsx │ │ ├── card.tsx │ │ ├── chart.tsx │ │ ├── dialog.tsx │ │ ├── dropdown-menu.tsx │ │ ├── form.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── progress.tsx │ │ ├── switch.tsx │ │ ├── tabs.tsx │ │ ├── textarea.tsx │ │ ├── toast.tsx │ │ └── toaster.tsx ├── data │ ├── countriesByDiscount.json │ ├── env │ │ ├── client.ts │ │ └── server.ts │ └── subscriptionTiers.ts ├── drizzle │ ├── db.ts │ ├── migrations │ │ ├── 0000_left_agent_zero.sql │ │ └── meta │ │ │ ├── 0000_snapshot.json │ │ │ └── _journal.json │ └── schema.ts ├── hooks │ └── use-toast.ts ├── lib │ ├── cache.ts │ ├── formatters.ts │ └── utils.ts ├── middleware.ts ├── schemas │ └── products.ts ├── server │ ├── actions │ │ ├── products.ts │ │ └── stripe.ts │ ├── db │ │ ├── productViews.ts │ │ ├── products.ts │ │ ├── subscription.ts │ │ └── users.ts │ └── permissions.ts └── tasks │ └── updateCountryGroups.ts ├── tailwind.config.ts └── tsconfig.json /.env.example: -------------------------------------------------------------------------------- 1 | # Database 2 | DATABASE_URL= 3 | 4 | # Clerk 5 | CLERK_SECRET_KEY= 6 | CLERK_WEBHOOK_SECRET= 7 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY= 8 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in 9 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up 10 | NEXT_PUBLIC_CLERK_SIGN_IN_FORCE_REDIRECT_URL=/dashboard 11 | NEXT_PUBLIC_CLERK_SIGN_UP_FORCE_REDIRECT_URL=/dashboard 12 | 13 | # Stripe 14 | STRIPE_BASIC_PLAN_STRIPE_PRICE_ID= 15 | STRIPE_STANDARD_PLAN_STRIPE_PRICE_ID= 16 | STRIPE_PREMIUM_PLAN_STRIPE_PRICE_ID= 17 | STRIPE_SECRET_KEY= 18 | STRIPE_WEBHOOK_SECRET= 19 | 20 | # Other 21 | NEXT_PUBLIC_SERVER_URL=http://localhost:3000 22 | 23 | # Development 24 | TEST_COUNTRY_CODE=IN -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals", "next/typescript"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | .env 31 | 32 | # vercel 33 | .vercel 34 | 35 | # typescript 36 | *.tsbuildinfo 37 | next-env.d.ts 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 WebDevSimplified 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. 37 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/app/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } -------------------------------------------------------------------------------- /drizzle.config.ts: -------------------------------------------------------------------------------- 1 | import { env } from "@/data/env/server" 2 | import { defineConfig } from "drizzle-kit" 3 | 4 | export default defineConfig({ 5 | schema: "./src/drizzle/schema.ts", 6 | out: "./src/drizzle/migrations", 7 | dialect: "postgresql", 8 | strict: true, 9 | verbose: true, 10 | dbCredentials: { 11 | url: env.DATABASE_URL, 12 | }, 13 | }) 14 | -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | experimental: { 4 | staleTimes: { 5 | dynamic: 0, 6 | }, 7 | }, 8 | } 9 | 10 | export default nextConfig 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parity-deals-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "next dev", 8 | "build": "next build", 9 | "start": "next start", 10 | "lint": "next lint", 11 | "db:generate": "drizzle-kit generate", 12 | "db:migrate": "drizzle-kit migrate", 13 | "db:studio": "drizzle-kit studio", 14 | "db:updateCountryGroups": "tsx --env-file=.env ./src/tasks/updateCountryGroups.ts", 15 | "stripe:webhooks": "stripe listen --forward-to localhost:3000/api/webhooks/stripe" 16 | }, 17 | "dependencies": { 18 | "@clerk/nextjs": "^5.5.3", 19 | "@date-fns/tz": "^1.0.1", 20 | "@hookform/resolvers": "^3.9.0", 21 | "@neondatabase/serverless": "^0.9.5", 22 | "@radix-ui/react-alert-dialog": "^1.1.1", 23 | "@radix-ui/react-dialog": "^1.1.1", 24 | "@radix-ui/react-dropdown-menu": "^2.1.1", 25 | "@radix-ui/react-icons": "^1.3.0", 26 | "@radix-ui/react-label": "^2.1.0", 27 | "@radix-ui/react-progress": "^1.1.0", 28 | "@radix-ui/react-slot": "^1.1.0", 29 | "@radix-ui/react-switch": "^1.1.0", 30 | "@radix-ui/react-tabs": "^1.1.0", 31 | "@radix-ui/react-toast": "^1.2.1", 32 | "@t3-oss/env-nextjs": "^0.11.1", 33 | "class-variance-authority": "^0.7.0", 34 | "clsx": "^2.1.1", 35 | "date-fns": "^4.0.0", 36 | "drizzle-orm": "^0.33.0", 37 | "lucide-react": "^0.441.0", 38 | "next": "14.2.11", 39 | "react": "^18", 40 | "react-country-flag": "^3.1.0", 41 | "react-dom": "^18", 42 | "react-hook-form": "^7.53.0", 43 | "recharts": "^2.12.7", 44 | "stripe": "^16.11.0", 45 | "svix": "^1.34.0", 46 | "tailwind-merge": "^2.5.2", 47 | "tailwindcss-animate": "^1.0.7", 48 | "zod": "^3.23.8" 49 | }, 50 | "devDependencies": { 51 | "@types/node": "^20", 52 | "@types/react": "^18", 53 | "@types/react-dom": "^18", 54 | "drizzle-kit": "^0.24.2", 55 | "eslint": "^8", 56 | "eslint-config-next": "14.2.11", 57 | "postcss": "^8", 58 | "tailwindcss": "^3.4.1", 59 | "tsx": "^4.19.1", 60 | "typescript": "^5" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /src/app/(auth)/layout.tsx: -------------------------------------------------------------------------------- 1 | export default async function AuthLayout({ 2 | children, 3 | }: { 4 | children: React.ReactNode 5 | }) { 6 | return ( 7 |
8 | {children} 9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /src/app/(auth)/sign-in/[[...sign-in]]/page.tsx: -------------------------------------------------------------------------------- 1 | import { SignIn } from "@clerk/nextjs" 2 | 3 | export default function SignInPage() { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /src/app/(auth)/sign-up/[[...sign-up]]/page.tsx: -------------------------------------------------------------------------------- 1 | import { SignUp } from "@clerk/nextjs" 2 | 3 | export default function SignUpPage() { 4 | return 5 | } 6 | -------------------------------------------------------------------------------- /src/app/(marketing)/_components/NavBar.tsx: -------------------------------------------------------------------------------- 1 | import { BrandLogo } from "@/components/BrandLogo" 2 | import { SignedIn, SignedOut, SignInButton } from "@clerk/nextjs" 3 | import Link from "next/link" 4 | 5 | export function NavBar() { 6 | return ( 7 |
8 | 30 |
31 | ) 32 | } 33 | -------------------------------------------------------------------------------- /src/app/(marketing)/_icons/Clerk.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps } from "react" 2 | 3 | export function ClerkIcon(svgProps: ComponentProps<"svg">) { 4 | return ( 5 | 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /src/app/(marketing)/_icons/Neon.tsx: -------------------------------------------------------------------------------- 1 | import { ComponentProps } from "react" 2 | 3 | export function NeonIcon(svgProps: ComponentProps<"svg">) { 4 | return ( 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ) 18 | } 19 | -------------------------------------------------------------------------------- /src/app/(marketing)/layout.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react" 2 | import { NavBar } from "./_components/NavBar" 3 | 4 | export default function MarketingLayout({ children }: { children: ReactNode }) { 5 | return ( 6 |
7 | 8 | {children} 9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /src/app/(marketing)/page.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button" 2 | import { SignUpButton } from "@clerk/nextjs" 3 | import { ArrowRightIcon, CheckIcon } from "lucide-react" 4 | import Link from "next/link" 5 | import { NeonIcon } from "./_icons/Neon" 6 | import { ClerkIcon } from "./_icons/Clerk" 7 | import { subscriptionTiersInOrder } from "@/data/subscriptionTiers" 8 | import { 9 | Card, 10 | CardContent, 11 | CardDescription, 12 | CardFooter, 13 | CardHeader, 14 | CardTitle, 15 | } from "@/components/ui/card" 16 | import { formatCompactNumber } from "@/lib/formatters" 17 | import { ReactNode } from "react" 18 | import { cn } from "@/lib/utils" 19 | import { BrandLogo } from "@/components/BrandLogo" 20 | 21 | export default function HomePage() { 22 | return ( 23 | <> 24 |
25 |

26 | Price Smarter, Sell bigger! 27 |

28 |

29 | Optimize your product pricing across countries to maximize sales. 30 | Capture 85% of the untapped market with location-based dynamic pricing 31 |

32 | 33 | 36 | 37 |
38 |
39 |
40 |

41 | Trusted by the top modern companies 42 |

43 |
44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 |
75 |
76 |
77 |
78 |

79 | Pricing software which pays for itself 20x over 80 |

81 |
82 | {subscriptionTiersInOrder.map(tier => ( 83 | 84 | ))} 85 |
86 |
87 |
88 | 89 | 90 | 91 |
92 |
93 | 100 | 108 |
109 |
110 | 114 | 122 | 130 |
131 |
132 | 142 | 153 |
154 |
155 |
156 | 157 | ) 158 | } 159 | 160 | function PricingCard({ 161 | name, 162 | priceInCents, 163 | maxNumberOfVisits, 164 | maxNumberOfProducts, 165 | canRemoveBranding, 166 | canAccessAnalytics, 167 | canCustomizeBanner, 168 | }: (typeof subscriptionTiersInOrder)[number]) { 169 | const isMostPopular = name === "Standard" 170 | 171 | return ( 172 | 178 | {isMostPopular && ( 179 |
180 | Most popular 181 |
182 | )} 183 | 184 |
{name}
185 | 186 | ${priceInCents / 100} /mo 187 | 188 | 189 | {formatCompactNumber(maxNumberOfVisits)} pricing page visits/mo 190 | 191 | 192 | 193 | 194 | 200 | 201 | 202 | 203 | 204 | {maxNumberOfProducts}{" "} 205 | {maxNumberOfProducts === 1 ? "product" : "products"} 206 | 207 | PPP discounts 208 | {canAccessAnalytics && Advanced analytics} 209 | {canRemoveBranding && Remove Easy PPP branding} 210 | {canCustomizeBanner && Banner customization} 211 | 212 | 213 | ) 214 | } 215 | 216 | function Feature({ 217 | children, 218 | className, 219 | }: { 220 | children: ReactNode 221 | className?: string 222 | }) { 223 | return ( 224 |
225 | 226 | {children} 227 |
228 | ) 229 | } 230 | 231 | function FooterLinkGroup({ 232 | title, 233 | links, 234 | }: { 235 | title: string 236 | links: { label: string; href: string }[] 237 | }) { 238 | return ( 239 |
240 |

{title}

241 |
    242 | {links.map(link => ( 243 |
  • 244 | {link.label} 245 |
    • 246 | ))} 247 |
248 |
249 | ) 250 | } 251 | -------------------------------------------------------------------------------- /src/app/api/products/[productId]/banner/route.ts: -------------------------------------------------------------------------------- 1 | import { Banner } from "@/components/Banner" 2 | import { env } from "@/data/env/server" 3 | import { getProductForBanner } from "@/server/db/products" 4 | import { createProductView } from "@/server/db/productViews" 5 | import { canRemoveBranding, canShowDiscountBanner } from "@/server/permissions" 6 | import { headers } from "next/headers" 7 | import { notFound } from "next/navigation" 8 | import { NextRequest } from "next/server" 9 | import { createElement } from "react" 10 | 11 | export const runtime = "edge" 12 | 13 | export async function GET( 14 | request: NextRequest, 15 | { params: { productId } }: { params: { productId: string } } 16 | ) { 17 | const headersMap = headers() 18 | const requestingUrl = headersMap.get("referer") || headersMap.get("origin") 19 | if (requestingUrl == null) return notFound() 20 | const countryCode = getCountryCode(request) 21 | if (countryCode == null) return notFound() 22 | 23 | const { product, discount, country } = await getProductForBanner({ 24 | id: productId, 25 | countryCode, 26 | url: requestingUrl, 27 | }) 28 | 29 | if (product == null) return notFound() 30 | 31 | const canShowBanner = await canShowDiscountBanner(product.clerkUserId) 32 | 33 | await createProductView({ 34 | productId: product.id, 35 | countryId: country?.id, 36 | userId: product.clerkUserId, 37 | }) 38 | 39 | if (!canShowBanner) return notFound() 40 | if (country == null || discount == null) return notFound() 41 | 42 | return new Response( 43 | await getJavaScript( 44 | product, 45 | country, 46 | discount, 47 | await canRemoveBranding(product.clerkUserId) 48 | ), 49 | { headers: { "content-type": "text/javascript" } } 50 | ) 51 | } 52 | 53 | function getCountryCode(request: NextRequest) { 54 | if (request.geo?.country != null) return request.geo.country 55 | if (process.env.NODE_ENV === "development") { 56 | return env.TEST_COUNTRY_CODE 57 | } 58 | } 59 | 60 | async function getJavaScript( 61 | product: { 62 | customization: { 63 | locationMessage: string 64 | bannerContainer: string 65 | backgroundColor: string 66 | textColor: string 67 | fontSize: string 68 | isSticky: boolean 69 | classPrefix?: string | null 70 | } 71 | }, 72 | country: { name: string }, 73 | discount: { coupon: string; percentage: number }, 74 | canRemoveBranding: boolean 75 | ) { 76 | const { renderToStaticMarkup } = await import("react-dom/server") 77 | return ` 78 | const banner = document.createElement("div"); 79 | banner.innerHTML = '${renderToStaticMarkup( 80 | createElement(Banner, { 81 | message: product.customization.locationMessage, 82 | mappings: { 83 | country: country.name, 84 | coupon: discount.coupon, 85 | discount: (discount.percentage * 100).toString(), 86 | }, 87 | customization: product.customization, 88 | canRemoveBranding, 89 | }) 90 | )}'; 91 | document.querySelector("${ 92 | product.customization.bannerContainer 93 | }").prepend(...banner.children); 94 | `.replace(/(\r\n|\n|\r)/g, "") 95 | } 96 | -------------------------------------------------------------------------------- /src/app/api/webhooks/clerk/route.ts: -------------------------------------------------------------------------------- 1 | import { Webhook } from "svix" 2 | import { headers } from "next/headers" 3 | import { WebhookEvent } from "@clerk/nextjs/server" 4 | import { env } from "@/data/env/server" 5 | import { 6 | createUserSubscription, 7 | getUserSubscription, 8 | } from "@/server/db/subscription" 9 | import { deleteUser } from "@/server/db/users" 10 | import { Stripe } from "stripe" 11 | 12 | const stripe = new Stripe(env.STRIPE_SECRET_KEY) 13 | 14 | export async function POST(req: Request) { 15 | const headerPayload = headers() 16 | const svixId = headerPayload.get("svix-id") 17 | const svixTimestamp = headerPayload.get("svix-timestamp") 18 | const svixSignature = headerPayload.get("svix-signature") 19 | 20 | if (!svixId || !svixTimestamp || !svixSignature) { 21 | return new Response("Error occurred -- no svix headers", { 22 | status: 400, 23 | }) 24 | } 25 | 26 | const payload = await req.json() 27 | const body = JSON.stringify(payload) 28 | 29 | const wh = new Webhook(env.CLERK_WEBHOOK_SECRET) 30 | let event: WebhookEvent 31 | 32 | try { 33 | event = wh.verify(body, { 34 | "svix-id": svixId, 35 | "svix-timestamp": svixTimestamp, 36 | "svix-signature": svixSignature, 37 | }) as WebhookEvent 38 | } catch (err) { 39 | console.error("Error verifying webhook:", err) 40 | return new Response("Error occurred", { 41 | status: 400, 42 | }) 43 | } 44 | 45 | switch (event.type) { 46 | case "user.created": { 47 | await createUserSubscription({ 48 | clerkUserId: event.data.id, 49 | tier: "Free", 50 | }) 51 | break 52 | } 53 | case "user.deleted": { 54 | if (event.data.id != null) { 55 | const userSubscription = await getUserSubscription(event.data.id) 56 | if (userSubscription?.stripeSubscriptionId != null) { 57 | await stripe.subscriptions.cancel( 58 | userSubscription?.stripeSubscriptionId 59 | ) 60 | } 61 | await deleteUser(event.data.id) 62 | } 63 | } 64 | } 65 | 66 | return new Response("", { status: 200 }) 67 | } 68 | -------------------------------------------------------------------------------- /src/app/api/webhooks/stripe/route.ts: -------------------------------------------------------------------------------- 1 | import { env } from "@/data/env/server" 2 | import { getTierByPriceId, subscriptionTiers } from "@/data/subscriptionTiers" 3 | import { UserSubscriptionTable } from "@/drizzle/schema" 4 | import { updateUserSubscription } from "@/server/db/subscription" 5 | import { eq } from "drizzle-orm" 6 | import { NextRequest } from "next/server" 7 | import Stripe from "stripe" 8 | 9 | const stripe = new Stripe(env.STRIPE_SECRET_KEY) 10 | 11 | export async function POST(request: NextRequest) { 12 | const event = await stripe.webhooks.constructEvent( 13 | await request.text(), 14 | request.headers.get("stripe-signature") as string, 15 | env.STRIPE_WEBHOOK_SECRET 16 | ) 17 | 18 | switch (event.type) { 19 | case "customer.subscription.deleted": { 20 | await handleDelete(event.data.object) 21 | break 22 | } 23 | case "customer.subscription.updated": { 24 | await handleUpdate(event.data.object) 25 | break 26 | } 27 | case "customer.subscription.created": { 28 | await handleCreate(event.data.object) 29 | break 30 | } 31 | } 32 | 33 | return new Response(null, { status: 200 }) 34 | } 35 | 36 | async function handleCreate(subscription: Stripe.Subscription) { 37 | const tier = getTierByPriceId(subscription.items.data[0].price.id) 38 | const clerkUserId = subscription.metadata.clerkUserId 39 | if (clerkUserId == null || tier == null) { 40 | return new Response(null, { status: 500 }) 41 | } 42 | const customer = subscription.customer 43 | const customerId = typeof customer === "string" ? customer : customer.id 44 | 45 | return await updateUserSubscription( 46 | eq(UserSubscriptionTable.clerkUserId, clerkUserId), 47 | { 48 | stripeCustomerId: customerId, 49 | tier: tier.name, 50 | stripeSubscriptionId: subscription.id, 51 | stripeSubscriptionItemId: subscription.items.data[0].id, 52 | } 53 | ) 54 | } 55 | 56 | async function handleUpdate(subscription: Stripe.Subscription) { 57 | const tier = getTierByPriceId(subscription.items.data[0].price.id) 58 | const customer = subscription.customer 59 | const customerId = typeof customer === "string" ? customer : customer.id 60 | if (tier == null) { 61 | return new Response(null, { status: 500 }) 62 | } 63 | 64 | return await updateUserSubscription( 65 | eq(UserSubscriptionTable.stripeCustomerId, customerId), 66 | { tier: tier.name } 67 | ) 68 | } 69 | 70 | async function handleDelete(subscription: Stripe.Subscription) { 71 | const customer = subscription.customer 72 | const customerId = typeof customer === "string" ? customer : customer.id 73 | 74 | return await updateUserSubscription( 75 | eq(UserSubscriptionTable.stripeCustomerId, customerId), 76 | { 77 | tier: subscriptionTiers.Free.name, 78 | stripeSubscriptionId: null, 79 | stripeSubscriptionItemId: null, 80 | } 81 | ) 82 | } 83 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/AddToSiteProductModalContent.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { Button } from "@/components/ui/button" 4 | import { 5 | DialogClose, 6 | DialogContent, 7 | DialogDescription, 8 | DialogHeader, 9 | DialogTitle, 10 | } from "@/components/ui/dialog" 11 | import { env } from "@/data/env/client" 12 | import { CopyCheckIcon, CopyIcon, CopyXIcon } from "lucide-react" 13 | import { useState } from "react" 14 | 15 | type CopyState = "idle" | "copied" | "error" 16 | 17 | export function AddToSiteProductModalContent({ id }: { id: string }) { 18 | const [copyState, setCopyState] = useState("idle") 19 | const code = `` 20 | const Icon = getCopyIcon(copyState) 21 | 22 | return ( 23 | 24 | 25 | Start Earning PPP Sales! 26 | 27 | All you need to do is copy the below script into your site and your 28 | customers will start seeing PPP discounts! 29 | 30 | 31 | 
32 |         {code}
33 |
34 |
35 | 52 | 53 | 54 | 55 |
56 | 57 | ) 58 | } 59 | 60 | function getCopyIcon(copyState: CopyState) { 61 | switch (copyState) { 62 | case "idle": 63 | return CopyIcon 64 | case "copied": 65 | return CopyCheckIcon 66 | case "error": 67 | return CopyXIcon 68 | } 69 | } 70 | 71 | function getChildren(copyState: CopyState) { 72 | switch (copyState) { 73 | case "idle": 74 | return "Copy Code" 75 | case "copied": 76 | return "Copied!" 77 | case "error": 78 | return "Error" 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/DeleteProductAlertDialogContent.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { 4 | AlertDialogAction, 5 | AlertDialogCancel, 6 | AlertDialogContent, 7 | AlertDialogDescription, 8 | AlertDialogFooter, 9 | AlertDialogHeader, 10 | AlertDialogTitle, 11 | } from "@/components/ui/alert-dialog" 12 | import { useToast } from "@/hooks/use-toast" 13 | import { deleteProduct } from "@/server/actions/products" 14 | import { useTransition } from "react" 15 | 16 | export function DeleteProductAlertDialogContent({ id }: { id: string }) { 17 | const [isDeletePending, startDeleteTransition] = useTransition() 18 | const { toast } = useToast() 19 | 20 | return ( 21 | 22 | 23 | Are you sure? 24 | 25 | This action cannot be undone. This will permanently delete this 26 | product. 27 | 28 | 29 | 30 | Cancel 31 | { 33 | startDeleteTransition(async () => { 34 | const data = await deleteProduct(id) 35 | if (data.message) { 36 | toast({ 37 | title: data.error ? "Error" : "Success", 38 | description: data.message, 39 | variant: data.error ? "destructive" : "default", 40 | }) 41 | } 42 | }) 43 | }} 44 | disabled={isDeletePending} 45 | > 46 | Delete 47 | 48 | 49 | 50 | ) 51 | } 52 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/NavBar.tsx: -------------------------------------------------------------------------------- 1 | import { BrandLogo } from "@/components/BrandLogo" 2 | import { UserButton } from "@clerk/nextjs" 3 | import Link from "next/link" 4 | 5 | export function NavBar() { 6 | return ( 7 |
8 | 17 |
18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/NoProducts.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button" 2 | import Link from "next/link" 3 | 4 | export function NoProducts() { 5 | return ( 6 |
7 |

You have no products

8 |

9 | Get started with PPP discounts by creating a product 10 |

11 | 14 |
15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/PageWithBackButton.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button" 2 | import { CaretLeftIcon } from "@radix-ui/react-icons" 3 | import Link from "next/link" 4 | import { ReactNode } from "react" 5 | 6 | export function PageWithBackButton({ 7 | backButtonHref, 8 | pageTitle, 9 | children, 10 | }: { 11 | backButtonHref: string 12 | pageTitle: string 13 | children: ReactNode 14 | }) { 15 | return ( 16 |
17 | 23 |

{pageTitle}

24 |
{children}
25 |
26 | ) 27 | } 28 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/ProductGrid.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button" 2 | import { 3 | Card, 4 | CardContent, 5 | CardDescription, 6 | CardHeader, 7 | CardTitle, 8 | } from "@/components/ui/card" 9 | import { DotsHorizontalIcon } from "@radix-ui/react-icons" 10 | import Link from "next/link" 11 | import { 12 | DropdownMenu, 13 | DropdownMenuContent, 14 | DropdownMenuItem, 15 | DropdownMenuSeparator, 16 | DropdownMenuTrigger, 17 | } from "@/components/ui/dropdown-menu" 18 | import { Dialog, DialogTrigger } from "@/components/ui/dialog" 19 | import { AddToSiteProductModalContent } from "./AddToSiteProductModalContent" 20 | import { AlertDialog, AlertDialogTrigger } from "@/components/ui/alert-dialog" 21 | import { DeleteProductAlertDialogContent } from "./DeleteProductAlertDialogContent" 22 | 23 | export function ProductGrid({ 24 | products, 25 | }: { 26 | products: { 27 | id: string 28 | name: string 29 | url: string 30 | description?: string | null 31 | }[] 32 | }) { 33 | return ( 34 |
35 | {products.map(product => ( 36 | 37 | ))} 38 |
39 | ) 40 | } 41 | 42 | export function ProductCard({ 43 | id, 44 | name, 45 | url, 46 | description, 47 | }: { 48 | id: string 49 | name: string 50 | url: string 51 | description?: string | null 52 | }) { 53 | return ( 54 | 55 | 56 |
57 | 58 | {name} 59 | 60 | 61 | 62 | 63 | 64 | 68 | 69 | 70 | 71 | Edit 72 | 73 | 74 | Add To Site 75 | 76 | 77 | 78 | Delete 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
87 | {url} 88 | 89 | {description && {description}} 90 | 91 | ) 92 | } 93 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/TimezoneDropdownMenuItem.tsx: -------------------------------------------------------------------------------- 1 | import { DropdownMenuItem } from "@/components/ui/dropdown-menu" 2 | import { createURL } from "@/lib/utils" 3 | import Link from "next/link" 4 | 5 | export function TimezoneDropdownMenuItem({ 6 | searchParams, 7 | }: { 8 | searchParams: Record 9 | }) { 10 | const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone 11 | return ( 12 | 13 | 18 | {userTimezone} 19 | 20 | 21 | ) 22 | } 23 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/charts/ViewsByCountryChart.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { 4 | ChartContainer, 5 | ChartTooltip, 6 | ChartTooltipContent, 7 | } from "@/components/ui/chart" 8 | import { formatCompactNumber } from "@/lib/formatters" 9 | import { Bar, BarChart, XAxis, YAxis } from "recharts" 10 | 11 | export function ViewsByCountryChart({ 12 | chartData, 13 | }: { 14 | chartData: { countryCode: string; countryName: string; views: number }[] 15 | }) { 16 | const chartConfig = { 17 | views: { 18 | label: "Visitors", 19 | color: "hsl(var(--accent))", 20 | }, 21 | } 22 | 23 | if (chartData.length === 0) { 24 | return ( 25 |

26 | No data available 27 |

28 | ) 29 | } 30 | 31 | return ( 32 | 36 | 37 | 38 | 44 | } /> 45 | 46 | 47 | 48 | ) 49 | } 50 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/charts/ViewsByDayChart.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { 4 | ChartContainer, 5 | ChartTooltip, 6 | ChartTooltipContent, 7 | } from "@/components/ui/chart" 8 | import { formatCompactNumber } from "@/lib/formatters" 9 | import { Bar, BarChart, XAxis, YAxis } from "recharts" 10 | 11 | export function ViewsByDayChart({ 12 | chartData, 13 | }: { 14 | chartData: { date: string; views: number }[] 15 | }) { 16 | const chartConfig = { 17 | views: { 18 | label: "Visitors", 19 | color: "hsl(var(--accent))", 20 | }, 21 | } 22 | 23 | if (chartData.length === 0) { 24 | return ( 25 |

26 | No data available 27 |

28 | ) 29 | } 30 | 31 | return ( 32 | 36 | 37 | 38 | 44 | } /> 45 | 46 | 47 | 48 | ) 49 | } 50 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/charts/ViewsByPPPChart.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { 4 | ChartContainer, 5 | ChartTooltip, 6 | ChartTooltipContent, 7 | } from "@/components/ui/chart" 8 | import { formatCompactNumber } from "@/lib/formatters" 9 | import { Bar, BarChart, XAxis, YAxis } from "recharts" 10 | 11 | export function ViewsByPPPChart({ 12 | chartData, 13 | }: { 14 | chartData: { pppName: string; views: number }[] 15 | }) { 16 | const chartConfig = { 17 | views: { 18 | label: "Visitors", 19 | color: "hsl(var(--accent))", 20 | }, 21 | } 22 | 23 | if (chartData.length === 0) { 24 | return ( 25 |

26 | No data available 27 |

28 | ) 29 | } 30 | 31 | const data = chartData.map(d => ({ 32 | ...d, 33 | pppName: d.pppName.replace("Parity Group: ", ""), 34 | })) 35 | 36 | return ( 37 | 41 | 42 | 43 | 49 | } /> 50 | 51 | 52 | 53 | ) 54 | } 55 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/forms/CountryDiscountsForm.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { Card, CardContent } from "@/components/ui/card" 4 | import { 5 | Form, 6 | FormControl, 7 | FormField, 8 | FormItem, 9 | FormLabel, 10 | FormMessage, 11 | } from "@/components/ui/form" 12 | import { productCountryDiscountsSchema } from "@/schemas/products" 13 | import { zodResolver } from "@hookform/resolvers/zod" 14 | import { useForm } from "react-hook-form" 15 | import { z } from "zod" 16 | import Image from "next/image" 17 | import { Input } from "@/components/ui/input" 18 | import { Button } from "@/components/ui/button" 19 | import { useToast } from "@/hooks/use-toast" 20 | import { updateCountryDiscounts } from "@/server/actions/products" 21 | 22 | export function CountryDiscountsForm({ 23 | productId, 24 | countryGroups, 25 | }: { 26 | productId: string 27 | countryGroups: { 28 | id: string 29 | name: string 30 | recommendedDiscountPercentage: number | null 31 | countries: { 32 | name: string 33 | code: string 34 | }[] 35 | discount?: { 36 | coupon: string 37 | discountPercentage: number 38 | } 39 | }[] 40 | }) { 41 | const { toast } = useToast() 42 | const form = useForm>({ 43 | resolver: zodResolver(productCountryDiscountsSchema), 44 | defaultValues: { 45 | groups: countryGroups.map(group => { 46 | const discount = 47 | group.discount?.discountPercentage ?? 48 | group.recommendedDiscountPercentage 49 | 50 | return { 51 | countryGroupId: group.id, 52 | coupon: group.discount?.coupon ?? "", 53 | discountPercentage: discount != null ? discount * 100 : undefined, 54 | } 55 | }), 56 | }, 57 | }) 58 | 59 | async function onSubmit( 60 | values: z.infer 61 | ) { 62 | const data = await updateCountryDiscounts(productId, values) 63 | 64 | if (data.message) { 65 | toast({ 66 | title: data.error ? "Error" : "Success", 67 | description: data.message, 68 | variant: data.error ? "destructive" : "default", 69 | }) 70 | } 71 | } 72 | 73 | return ( 74 |
75 | 79 | {countryGroups.map((group, index) => ( 80 | 81 | 82 |
83 |

84 | {group.name} 85 |

86 |
87 | {group.countries.map(country => ( 88 | {country.name} 97 | ))} 98 |
99 |
100 | 104 |
105 |
106 | ( 110 | 111 | Discount % 112 | 113 | 119 | field.onChange(e.target.valueAsNumber) 120 | } 121 | min="0" 122 | max="100" 123 | /> 124 | 125 | 126 | 127 | )} 128 | /> 129 | ( 133 | 134 | Coupon 135 | 136 | 137 | 138 | 139 | 140 | )} 141 | /> 142 |
143 | 144 | {form.formState.errors.groups?.[index]?.root?.message} 145 | 146 |
147 | 148 | 149 | ))} 150 | 151 |
152 | 155 |
156 |
157 | 158 | ) 159 | } 160 | -------------------------------------------------------------------------------- /src/app/dashboard/_components/forms/ProductCustomizationForm.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import { Banner } from "@/components/Banner" 4 | import { NoPermissionCard } from "@/components/NoPermissionCard" 5 | import { RequiredLabelIcon } from "@/components/RequiredLabelIcon" 6 | import { Button } from "@/components/ui/button" 7 | import { 8 | Form, 9 | FormControl, 10 | FormDescription, 11 | FormField, 12 | FormItem, 13 | FormLabel, 14 | FormMessage, 15 | } from "@/components/ui/form" 16 | import { Input } from "@/components/ui/input" 17 | import { Switch } from "@/components/ui/switch" 18 | import { Textarea } from "@/components/ui/textarea" 19 | import { useToast } from "@/hooks/use-toast" 20 | import { productCustomizationSchema } from "@/schemas/products" 21 | import { updateProductCustomization } from "@/server/actions/products" 22 | import { zodResolver } from "@hookform/resolvers/zod" 23 | import { useForm } from "react-hook-form" 24 | import { custom, z } from "zod" 25 | 26 | export function ProductCustomizationForm({ 27 | customization, 28 | canCustomizeBanner, 29 | canRemoveBranding, 30 | }: { 31 | customization: { 32 | productId: string 33 | locationMessage: string 34 | backgroundColor: string 35 | textColor: string 36 | fontSize: string 37 | bannerContainer: string 38 | isSticky: boolean 39 | classPrefix: string | null 40 | } 41 | canRemoveBranding: boolean 42 | canCustomizeBanner: boolean 43 | }) { 44 | const { toast } = useToast() 45 | const form = useForm>({ 46 | resolver: zodResolver(productCustomizationSchema), 47 | defaultValues: { 48 | ...customization, 49 | classPrefix: customization.classPrefix ?? "", 50 | }, 51 | }) 52 | 53 | async function onSubmit(values: z.infer) { 54 | const data = await updateProductCustomization( 55 | customization.productId, 56 | values 57 | ) 58 | 59 | if (data?.message) { 60 | toast({ 61 | title: data.error ? "Error" : "Success", 62 | description: data.message, 63 | variant: data.error ? "destructive" : "default", 64 | }) 65 | } 66 | } 67 | 68 | const formValues = form.watch() 69 | 70 | return ( 71 | <> 72 |
73 | 83 |
84 | {!canCustomizeBanner && ( 85 |
86 | 87 |
88 | )} 89 |
90 | 94 |
95 | ( 99 | 100 | 101 | PPP Discount Message 102 | 103 | 104 | 105 |