Add payment system

apps/db/supabase/migrations/20250616064232_add_workspace_subscriptions.sql

@@ -0,0 +1,104 @@
+create type "public"."subscription_status" as enum ('trialing', 'active', 'canceled', 'past_due');
+
+create table "public"."workspace_subscription" (
+    "id" uuid not null default gen_random_uuid(),
+    "created_at" timestamp with time zone not null default now(),
+    "ws_id" uuid default gen_random_uuid(),
+    "status" subscription_status,
+    "polar_subscription_id" text not null,
+    "product_id" uuid default gen_random_uuid(),
+    "price_id" uuid default gen_random_uuid(),
+    "current_period_start" timestamp with time zone,
+    "current_period_end" timestamp with time zone,
+    "cancel_at_period_end" boolean default false,
+    "updated_at" timestamp with time zone default now()
+);
+
+
+alter table "public"."workspace_subscription" enable row level security;
+
+CREATE UNIQUE INDEX workspace_subscription_pkey ON public.workspace_subscription USING btree (id, polar_subscription_id);
+
+alter table "public"."workspace_subscription" add constraint "workspace_subscription_pkey" PRIMARY KEY using index "workspace_subscription_pkey";
+
+alter table "public"."workspace_subscription" add constraint "workspace_subscription_ws_id_fkey" FOREIGN KEY (ws_id) REFERENCES workspaces(id) ON DELETE CASCADE not valid;
+
+alter table "public"."workspace_subscription" validate constraint "workspace_subscription_ws_id_fkey";
+
+grant delete on table "public"."workspace_subscription" to "anon";
+
+grant insert on table "public"."workspace_subscription" to "anon";
+
+grant references on table "public"."workspace_subscription" to "anon";
+
+grant select on table "public"."workspace_subscription" to "anon";
+
+grant trigger on table "public"."workspace_subscription" to "anon";
+
+grant truncate on table "public"."workspace_subscription" to "anon";
+
+grant update on table "public"."workspace_subscription" to "anon";
+
+grant delete on table "public"."workspace_subscription" to "authenticated";
+
+grant insert on table "public"."workspace_subscription" to "authenticated";
+
+grant references on table "public"."workspace_subscription" to "authenticated";
+
+grant select on table "public"."workspace_subscription" to "authenticated";
+
+grant trigger on table "public"."workspace_subscription" to "authenticated";
+
+grant truncate on table "public"."workspace_subscription" to "authenticated";
+
+grant update on table "public"."workspace_subscription" to "authenticated";
+
+grant delete on table "public"."workspace_subscription" to "service_role";
+
+grant insert on table "public"."workspace_subscription" to "service_role";
+
+grant references on table "public"."workspace_subscription" to "service_role";
+
+grant select on table "public"."workspace_subscription" to "service_role";
+
+grant trigger on table "public"."workspace_subscription" to "service_role";
+
+grant truncate on table "public"."workspace_subscription" to "service_role";
+
+grant update on table "public"."workspace_subscription" to "service_role";
+
+set check_function_bodies = off;
+
+CREATE OR REPLACE FUNCTION public.check_ws_creator(ws_id uuid)
+ RETURNS boolean
+ LANGUAGE plpgsql
+AS $function$BEGIN
+  RETURN (
+     (SELECT creator_id FROM public.workspaces WHERE id = ws_id) = auth.uid()
+
+    AND NOT EXISTS (
+      SELECT 1 FROM public.workspace_subscription
+      WHERE public.workspace_subscription.ws_id = ws_id
+    );
+  )
+END$function$
+;
+
+create policy "allow select for users that are in the workspace"
+on "public"."workspace_subscription"
+as permissive
+for select
+to authenticated
+using ((auth.uid() = ( SELECT workspaces.creator_id
+   FROM workspaces
+  WHERE (workspaces.id = workspace_subscription.ws_id))));
+
+
+create policy "only allow owner of the user to buy subscription"
+on "public"."workspace_subscription"
+as permissive
+for insert
+to public
+using ((auth.uid() = ( SELECT workspaces.creator_id
+   FROM workspaces
+  WHERE (workspaces.id = workspace_subscription.ws_id))));

apps/web/.env.example

@@ -40,4 +40,8 @@ SCRAPER_URL=YOUR_SCRAPER_URL
 AURORA_EXTERNAL_URL=YOUR_AURORA_EXTERNAL_URL
 AURORA_EXTERNAL_WSID=YOUR_AURORA_EXTERNAL_WSID
 PROXY_API_KEY=YOUR_PROXY_API_KEY
-NEXT_PUBLIC_PROXY_API_KEY=YOUR_NEXT_PUBLIC_PROXY_API_KEY
+NEXT_PUBLIC_PROXY_API_KEY=YOUR_NEXT_PUBLIC_PROXY_API_KEY
+
+# Payment Polar.sh
+POLAR_WEBHOOK_SECRET=YOUR_POLAR_WEBHOOK_SECRET
+NEXT_PUBLIC_POLAR_ACCESS_TOKEN=YOUR_NEXT_PUBLIC_POLAR_ACCESS_TOKEN

apps/web/messages/en.json

@@ -554,6 +554,7 @@
     "migrations": "Migrations",
     "notifications": "Notifications",
     "new-ws": "New workspace",
+    "billing": "Billing",
     "new-team": "New Team",
     "new-task": "New Task",
     "new-note": "New Note",

apps/web/messages/vi.json

@@ -565,6 +565,7 @@
     "migrations": "Chuyển dữ liệu",
     "notifications": "Thông báo",
     "new-ws": "Tạo tổ chức mới",
+    "billing": "Thanh toán",
     "new-team": "Tạo nhóm mới",
     "new-task": "Tạo công việc mới",
     "new-note": "Tạo ghi chú mới",

apps/web/package.json

@@ -45,6 +45,7 @@
     "@tuturuuu/auth": "workspace:*",
     "@tuturuuu/supabase": "workspace:*",
     "@tuturuuu/transactional": "workspace:*",
+    "@tuturuuu/payment": "workspace:*",
     "@tuturuuu/types": "workspace:*",
     "@tuturuuu/ui": "workspace:*",
     "@tuturuuu/utils": "workspace:*",

apps/web/src/app/[locale]/(dashboard)/[wsId]/billing/billing-client.tsx

@@ -0,0 +1,237 @@
+'use client';
+
+import PurchaseLink from './data-polar-checkout';
+import { Button } from '@tuturuuu/ui/button';
+import { ArrowUpCircle, CheckCircle, CreditCard } from 'lucide-react';
+import { useState } from 'react';
+
+// Define types for the props we're passing from the server component
+interface Plan {
+  name: string;
+  price: string;
+  billingCycle: string;
+  startDate?: string;
+  nextBillingDate?: string;
+  status?: string;
+  features?: string[];
+}
+
+interface UpgradePlan {
+  id: string;
+  name: string;
+  price: string;
+  billingCycle: string;
+  popular: boolean;
+  features: string[];
+  isEnterprise?: boolean;
+}
+
+interface BillingClientProps {
+  currentPlan: Plan;
+  upgradePlans: UpgradePlan[];
+  wsId: string;
+  isCreator: boolean;
+}
+
+export function BillingClient({
+  currentPlan,
+  upgradePlans,
+  wsId,
+  isCreator,
+}: BillingClientProps) {
+  const [showUpgradeOptions, setShowUpgradeOptions] = useState(false);
+
+  return (
+    <>
+      {/* Current Plan Card */}
+      <div className="mb-8 rounded-lg border border-border bg-card p-8 shadow-sm dark:bg-card/80">
+        <div className="mb-6 flex items-center justify-between">
+          <div>
+            <h2 className="text-2xl font-semibold tracking-tight text-card-foreground">
+              Current Plan
+            </h2>
+            <p className="text-muted-foreground">Your subscription details</p>
+          </div>
+          <div className="flex items-center">
+            <span
+              className={`rounded-full px-3 py-1 text-sm font-medium ${
+                currentPlan.status === 'active'
+                  ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+                  : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400'
+              }`}
+            >
+              {currentPlan.status === 'active' ? 'Active' : 'Pending'}
+            </span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+          <div className="col-span-2">
+            <div className="mb-6">
+              <h3 className="mb-1 text-xl font-bold text-card-foreground">
+                {currentPlan.name}
+              </h3>
+              <p className="text-2xl font-bold text-primary">
+                {currentPlan.price}
+                <span className="text-sm text-muted-foreground">
+                  /{currentPlan.billingCycle}
+                </span>
+              </p>
+            </div>
+
+            <div className="mb-6 grid grid-cols-2 gap-4">
+              <div>
+                <p className="text-sm text-muted-foreground">Start Date</p>
+                <p className="font-medium text-card-foreground">
+                  {currentPlan.startDate}
+                </p>
+              </div>
+              <div>
+                <p className="text-sm text-muted-foreground">
+                  Next Billing Date
+                </p>
+                <p className="font-medium text-card-foreground">
+                  {currentPlan.nextBillingDate}
+                </p>
+              </div>
+            </div>
+
+            <div className="mb-6">
+              <h4 className="mb-2 font-medium text-card-foreground">
+                Features:
+              </h4>
+              <ul className="grid grid-cols-1 gap-2 md:grid-cols-2">
+                {currentPlan.features?.map((feature, index) => (
+                  <li
+                    key={index}
+                    className="flex items-center text-card-foreground"
+                  >
+                    <CheckCircle className="mr-2 h-5 w-5 text-primary" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="mt-6 flex flex-wrap gap-3">
+              <Button
+                disabled={!isCreator}
+                onClick={() => setShowUpgradeOptions(!showUpgradeOptions)}
+                className="flex items-center"
+              >
+                <ArrowUpCircle className="mr-1 h-5 w-5" />
+                {showUpgradeOptions ? 'Hide Options' : 'Upgrade Plan'}
+              </Button>
+              <Button variant="outline" className="border-border">
+                Cancel Subscription
+              </Button>
+            </div>
+          </div>
+
+          <div className="rounded-lg border border-border bg-accent/30 p-6">
+            <h3 className="mb-4 text-lg font-semibold text-card-foreground">
+              Payment Method
+            </h3>
+            <div className="mb-4 flex items-center">
+              <CreditCard className="mr-3 h-8 w-8 text-muted-foreground" />
+              <div>
+                <p className="font-medium text-card-foreground">
+                  Visa ending in 4242
+                </p>
+                <p className="text-sm text-muted-foreground">Expires 05/2025</p>
+              </div>
+            </div>
+            <div className="mt-6">
+              <Button
+                variant="outline"
+                size="sm"
+                className="text-sm font-medium"
+              >
+                Update payment method
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Upgrade Options */}
+      {showUpgradeOptions && (
+        <div className="mb-8 rounded-lg border-2 border-primary/20 bg-card p-8 shadow-sm dark:bg-card/80">
+          <h2 className="mb-6 text-2xl font-semibold text-card-foreground">
+            Upgrade Options
+          </h2>
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+            {upgradePlans.map((plan) => (
+              <div
+                key={plan.id}
+                className={`rounded-lg border transition-shadow hover:shadow-md ${
+                  plan.popular ? 'relative border-primary' : 'border-border'
+                }`}
+              >
+                {plan.popular && (
+                  <div className="absolute top-0 right-0 rounded-tr-md rounded-bl-lg bg-primary px-3 py-1 text-xs text-primary-foreground">
+                    RECOMMENDED
+                  </div>
+                )}
+                <div className="p-6">
+                  <h3 className="mb-1 text-xl font-bold text-card-foreground">
+                    {plan.name}
+                  </h3>
+                  <p className="mb-4 text-2xl font-bold text-primary">
+                    {plan.price}
+                    <span className="text-sm text-muted-foreground">
+                      /{plan.billingCycle}
+                    </span>
+                  </p>
+                  <ul className="mb-6">
+                    {plan.features.map((feature, index) => (
+                      <li key={index} className="mb-2 flex items-start">
+                        <CheckCircle className="mt-0.5 mr-2 h-5 w-5 flex-shrink-0 text-primary" />
+                        <span className="text-card-foreground">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+                  {plan.isEnterprise ? (
+                    <Button className="w-full" variant="outline" disabled>
+                      Contact Sales
+                    </Button>
+                  ) : (
+                    <Button
+                      variant={plan.popular ? 'default' : 'outline'}
+                      className={`w-full ${
+                        plan.popular
+                          ? ''
+                          : 'border-primary bg-transparent text-primary hover:bg-primary/10'
+                      }`}
+                      asChild
+                    >
+                      <PurchaseLink
+                        productId={plan.id}
+                        wsId={wsId}
+                        customerEmail="t@test.com"
+                        theme="auto"
+                        className="flex w-full items-center justify-center"
+                      >
+                        Select {plan.name}
+                      </PurchaseLink>
+                    </Button>
+                  )}
+                  {plan.isEnterprise && (
+                    <p className="mt-2 text-center text-xs text-muted-foreground">
+                      Please contact our sales team for Enterprise pricing
+                    </p>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+          <p className="mt-6 text-sm text-muted-foreground">
+            * Upgrading your plan will take effect immediately. You'll be
+            charged the prorated amount for the remainder of your current
+            billing cycle.
+          </p>
+        </div>
+      )}
+    </>
+  );
+}