Merge pull request #190 from dhanushd-27/feat/polar-checkout

feat(polar): integrate pola mor
plura-ai · Jan 24, 2025 · 2f91bf6 · 2f91bf6
2 parents e7a0bae + cbe172c
commit 2f91bf6
Show file tree

Hide file tree

Showing 6 changed files with 530 additions and 112 deletions.
diff --git a/apps/api/app/v1/[[...route]]/checkout.ts b/apps/api/app/v1/[[...route]]/checkout.ts
diff --git a/apps/www/components/custom/hero/widgets.sec.tsx b/apps/www/components/custom/hero/widgets.sec.tsx
@@ -13,7 +13,6 @@ import {
   SectionHeaderHeading,
 } from "../text-wrappers";
 import { siteConfig } from "@/config/site.config";
-import { cn } from "@/lib/utils";
 
 const widgetCards = [
   {

diff --git a/apps/www/components/custom/pricing/pricing.cards.tsx b/apps/www/components/custom/pricing/pricing.cards.tsx
@@ -1,10 +1,16 @@
+"use client"
 import React from "react";
-import { Button } from "@/components/ui/button";
+import { buttonVariants } from "@/components/ui/button";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { TextMorph } from "../text-morph";
 import { AnimatedNumber } from "../anim-numb";
 import { IconCheck } from "@tabler/icons-react";
+import Link from 'next/link';
+import { PolarEmbedCheckout } from '@polar-sh/checkout/embed'
+import { useEffect } from 'react'
+
+const inProduction = process.env.NODE_ENV === "production";
 
 export interface PCards {
   isYearly: boolean;
@@ -21,10 +27,25 @@ export interface PCards {
     discountYearly: number;
     discountMonthly: number;
     benifits: string[];
+    monthlyCheckoutLink: string,
+    yearlyCheckoutLink: string;
+    development: {
+      monthlyCheckoutLink: string,
+      yearlyCheckoutLink: string
+    },
+    production: {
+      monthlyCheckoutLink: string,
+      yearlyCheckoutLink: string
+    }
   }>;
 }
 
 export default function PricingCards({ isYearly, items }: PCards) {
+
+  useEffect(() => {
+    PolarEmbedCheckout.init()
+  }, [])
+
   return (
     <div className="grid md:grid-cols-3 gap-5">
       {items.map((item, index) => (
@@ -41,7 +62,7 @@ export default function PricingCards({ isYearly, items }: PCards) {
             </div>
             <p className="text-xs inline-flex gap-1">
               Billed
-              <TextMorph>{isYearly ? "Yearly" : "Monthly"}</TextMorph>
+              <TextMorph>{ isYearly ? "Yearly" : "Monthly"}</TextMorph>
             </p>
             <div className="flex flex-row items-center gap-2 pt-4 pb-6">
               <span className="text-7xl font-bold tracking-tight">
@@ -84,9 +105,19 @@ export default function PricingCards({ isYearly, items }: PCards) {
               </div>
             </div>
 
-            <Button className="w-full bg-white text-black hover:bg-gray-200">
+          <Link href={ 
+            inProduction
+                ? isYearly 
+                  ? item.production.yearlyCheckoutLink 
+                  : item.production.monthlyCheckoutLink 
+                :
+                  isYearly 
+                  ? item.development.yearlyCheckoutLink 
+                  : item.development.monthlyCheckoutLink
+            } data-polar-checkout data-polar-checkout-theme="dark" className={ buttonVariants( { variant: "default" } )} >
               {item.btn}
-            </Button>
+          </Link>
+
           </CardHeader>
           <CardContent className="space-y-6 mt-14">
             <ul className="space-y-2.5">

diff --git a/apps/www/config/pricing.config.ts b/apps/www/config/pricing.config.ts
@@ -23,6 +23,14 @@ export const pricingCardConfig = [
       "Available in TypeScript and JavaScript",
       "Cancel anytime",
     ],
+    development: {
+      monthlyCheckoutLink: "https://sandbox-api.polar.sh/v1/checkout-links/polar_cl_6W9GB9WuXlKKCn9WfYRLY0nESFVXkYgXhpaq74eziFb/redirect",
+      yearlyCheckoutLink: "https://sandbox-api.polar.sh/v1/checkout-links/polar_cl_6W9GB9WuXlKKCn9WfYRLY0nESFVXkYgXhpaq74eziFb/redirect",
+    },
+    production: {
+      monthlyCheckoutLink: "",
+      yearlyCheckoutLink: "",
+    },
   },
 
   {
@@ -49,6 +57,14 @@ export const pricingCardConfig = [
       "Available in TypeScript and JavaScript",
       "Cancel anytime",
     ],
+    development: {
+      monthlyCheckoutLink: "https://sandbox-api.polar.sh/v1/checkout-links/polar_cl_YVEPwZdFl4pi6HOQSwWnujPkz3ZAILQb9rS9r22NEPg/redirect",
+      yearlyCheckoutLink: "https://sandbox-api.polar.sh/v1/checkout-links/polar_cl_b7DUCWnEtHjEbpLMUWW1r75RNRvfMxqrLcFrx4Abs4o/redirect",
+    },
+    production: {
+      monthlyCheckoutLink: "",
+      yearlyCheckoutLink: "",
+    },
   },
 
   {
@@ -75,5 +91,13 @@ export const pricingCardConfig = [
       "Available in TypeScript and JavaScript",
       "Cancel anytime",
     ],
+    development: {
+      monthlyCheckoutLink: "https://sandbox-api.polar.sh/v1/checkout-links/polar_cl_js6sVSuksNqZMN6pVGKPl6Vk38sMyTpXnEMB41H2UyH/redirect",
+      yearlyCheckoutLink: "https://sandbox-api.polar.sh/v1/checkout-links/polar_cl_7WZRA6WybipfkQ8gcAw15M76VfeyL41Shoqjj2rr96P/redirect",
+    },
+    production: {
+      monthlyCheckoutLink: "",
+      yearlyCheckoutLink: "",
+    },
   },
 ];
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -20,6 +20,7 @@
     "@plura/cache": "workspace:*",
     "@plura/db": "workspace:*",
     "@plura/mor": "workspace:*",
+    "@polar-sh/checkout": "^0.1.8",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",