shipd 0.1.2 → 0.1.4

package/features/payments/app/dashboard/payment/_components/manage-subscription.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import { authClient } from "@/lib/auth-client";
+
+export default function ManageSubscription() {
+  return (
+    <Button
+      variant="outline"
+      onClick={async () => {
+        try {
+          await authClient.customer.portal();
+        } catch (error) {
+          console.error("Failed to open customer portal:", error);
+        }
+      }}
+    >
+      <ExternalLink className="h-4 w-4 mr-2" />
+      Manage Subscription
+    </Button>
+  );
+}

package/features/payments/app/dashboard/payment/page.tsx

@@ -0,0 +1,126 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { getSubscriptionDetails } from "@/lib/subscription";
+import Link from "next/link";
+import ManageSubscription from "./_components/manage-subscription";
+
+export default async function PaymentPage() {
+  const subscriptionDetails = await getSubscriptionDetails();
+
+  return (
+    <div>
+      <div className="p-6 space-y-4">
+        <div className="relative min-h-screen">
+          {!subscriptionDetails.hasSubscription ||
+          subscriptionDetails.subscription?.status !== "active" ? (
+            <>
+              <div className="absolute inset-0 z-10 rounded-lg flex items-center justify-center">
+                <div className="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg text-center max-w-md">
+                  <h3 className="text-xl font-semibold mb-2">
+                    Subscription Required
+                  </h3>
+                  <p className="text-muted-foreground mb-4">
+                    You need an active subscription to access payment management
+                    features.
+                  </p>
+                  <Link href="/pricing">
+                    <Button>Subscribe Now</Button>
+                  </Link>
+                </div>
+              </div>
+              <div className="blur-sm pointer-events-none">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Payment Management</CardTitle>
+                    <CardDescription>
+                      Manage your billing and payment methods
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">
+                          Current Plan
+                        </p>
+                        <p className="text-md">Pro Plan</p>
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-muted-foreground">
+                          Billing Status
+                        </p>
+                        <p className="text-md">Active</p>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </div>
+            </>
+          ) : (
+            <Card>
+              <CardHeader>
+                <CardTitle>Subscription Details</CardTitle>
+                <CardDescription>
+                  Your current subscription information
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">
+                      Status
+                    </p>
+                    <p className="text-md capitalize">
+                      {subscriptionDetails.subscription.status}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">
+                      Amount
+                    </p>
+                    <p className="text-md">
+                      {subscriptionDetails.subscription.amount / 100}{" "}
+                      {subscriptionDetails.subscription.currency.toUpperCase()}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">
+                      Billing Interval
+                    </p>
+                    <p className="text-md capitalize">
+                      {subscriptionDetails.subscription.recurringInterval}
+                    </p>
+                  </div>
+                  <div>
+                    <p className="text-sm font-semibold text-muted-foreground">
+                      Current Period End
+                    </p>
+                    <p className="text-md">
+                      {new Date(
+                        subscriptionDetails.subscription.currentPeriodEnd,
+                      ).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+                {subscriptionDetails.subscription.cancelAtPeriodEnd && (
+                  <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
+                    <p className="text-sm text-yellow-800">
+                      Your subscription will cancel at the end of the current
+                      billing period.
+                    </p>
+                  </div>
+                )}
+                <ManageSubscription />
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/features/payments/app/success/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { CheckCircle2, Terminal, BookOpen, Zap } from "lucide-react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+
+export default function SuccessPage() {
+  const router = useRouter();
+
+  return (
+    <div className="min-h-screen bg-black flex items-center justify-center p-6">
+      <Card className="bg-[#0a0a0a] border-[#2a2a2a] max-w-2xl w-full">
+        <CardContent className="p-12">
+          {/* Success Icon */}
+          <div className="w-20 h-20 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-6">
+            <CheckCircle2 className="w-12 h-12 text-green-400" />
+          </div>
+
+          {/* Success Message */}
+          <div className="text-center mb-8">
+            <h1 className="text-3xl font-bold text-white mb-3">
+              Welcome! 🎉
+            </h1>
+            <p className="text-gray-400 text-lg">
+              Your subscription is now active. Let&apos;s get you started building your SaaS.
+            </p>
+          </div>
+
+          {/* Next Steps */}
+          <div className="space-y-6 mb-8">
+            <h2 className="text-xl font-semibold text-white">Next Steps</h2>
+
+            {/* Step 1 */}
+            <div className="flex gap-4">
+              <div className="w-8 h-8 rounded-full bg-[#ff5722] flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
+                1
+              </div>
+              <div className="flex-1">
+                <h3 className="text-white font-semibold mb-1">Authenticate the CLI</h3>
+                <p className="text-gray-400 text-sm mb-2">
+                  Run this command in your terminal to authenticate:
+                </p>
+                <div className="bg-black/70 p-3 rounded-lg border border-[#2a2a2a]">
+                  <code className="text-[#ff5722] font-mono text-sm">
+                    npx your-cli login
+                  </code>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 2 */}
+            <div className="flex gap-4">
+              <div className="w-8 h-8 rounded-full bg-[#ff5722] flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
+                2
+              </div>
+              <div className="flex-1">
+                <h3 className="text-white font-semibold mb-1">Create your first project</h3>
+                <p className="text-gray-400 text-sm mb-2">
+                  Generate a complete SaaS application:
+                </p>
+                <div className="bg-black/70 p-3 rounded-lg border border-[#2a2a2a]">
+                  <code className="text-[#ff5722] font-mono text-sm">
+                    npx your-cli init my-app
+                  </code>
+                </div>
+              </div>
+            </div>
+
+            {/* Step 3 */}
+            <div className="flex gap-4">
+              <div className="w-8 h-8 rounded-full bg-[#ff5722] flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
+                3
+              </div>
+              <div className="flex-1">
+                <h3 className="text-white font-semibold mb-1">Start building</h3>
+                <p className="text-gray-400 text-sm">
+                  Your project includes authentication, billing, dashboard, and more - all ready to customize and deploy.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Action Buttons */}
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+            <Button
+              onClick={() => router.push("/dashboard")}
+              className="w-full bg-[#ff5722] hover:bg-[#d84315]"
+            >
+              <Zap className="w-4 h-4 mr-2" />
+              Go to Dashboard
+            </Button>
+            <Link href="/dashboard/cli" className="w-full">
+              <Button variant="outline" className="w-full border-[#2a2a2a] hover:bg-[#1a1a1a]">
+                <Terminal className="w-4 h-4 mr-2" />
+                CLI Guide
+              </Button>
+            </Link>
+            <Link href="/docs" className="w-full">
+              <Button variant="outline" className="w-full border-[#2a2a2a] hover:bg-[#1a1a1a]">
+                <BookOpen className="w-4 h-4 mr-2" />
+                Documentation
+              </Button>
+            </Link>
+          </div>
+
+          {/* Help Section */}
+          <div className="mt-8 pt-8 border-t border-[#2a2a2a] text-center">
+            <p className="text-gray-400 text-sm mb-2">
+              Need help getting started?
+            </p>
+            <Link href="mailto:support@yourdomain.com">
+              <Button variant="link" className="text-[#ff5722] hover:text-[#d84315]">
+                Contact Support
+              </Button>
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/features/payments/feature.config.json

@@ -0,0 +1,31 @@
+{
+  "name": "payments",
+  "version": "1.0.0",
+  "description": "Polar.sh subscription management and payment processing",
+  "dependencies": {
+    "@polar-sh/sdk": "^0.42.1"
+  },
+  "devDependencies": {},
+  "envVars": [
+    "POLAR_ACCESS_TOKEN",
+    "POLAR_SUCCESS_URL",
+    "POLAR_WEBHOOK_SECRET",
+    "NEXT_PUBLIC_STARTER_TIER",
+    "NEXT_PUBLIC_STARTER_SLUG",
+    "NEXT_PUBLIC_APP_URL"
+  ],
+  "files": [
+    "app/dashboard/payment/**/*",
+    "app/success/**/*",
+    "app/api/subscription/**/*",
+    "lib/subscription.ts",
+    "lib/polar-products.ts",
+    "payments-schema.ts"
+  ],
+  "requires": [
+    "auth",
+    "database"
+  ],
+  "conflicts": []
+}
+

package/features/payments/lib/polar-products.ts

@@ -0,0 +1,49 @@
+import { Polar } from '@polar-sh/sdk';
+
+const polarClient = new Polar({
+  accessToken: process.env.POLAR_ACCESS_TOKEN!,
+});
+
+export interface ProductDetails {
+  id: string;
+  name: string;
+  description: string | null;
+  prices: Array<{
+    id: string;
+    amount: number;
+    currency: string;
+    recurring_interval: 'month' | 'year';
+  }>;
+}
+
+/**
+ * Fetch product details from Polar
+ */
+export async function getProductDetails(
+  productId: string
+): Promise<ProductDetails | null> {
+  try {
+    const product = await polarClient.products.get({
+      id: productId,
+    });
+
+    if (!product) {
+      return null;
+    }
+
+    return {
+      id: product.id,
+      name: product.name,
+      description: product.description || null,
+      prices: (product.prices || []).map((price) => ({
+        id: price.id,
+        amount: price.priceAmount || 0,
+        currency: price.priceCurrency || 'usd',
+        recurring_interval: (price.recurringInterval as 'month' | 'year') || 'month',
+      })),
+    };
+  } catch (error) {
+    console.error('Error fetching product from Polar:', error);
+    return null;
+  }
+}

package/features/payments/lib/subscription.ts

@@ -0,0 +1,148 @@
+import { auth } from "@/lib/auth";
+import { db } from "@/db/drizzle";
+import { subscription } from "@/db/schema";
+import { eq } from "drizzle-orm";
+import { headers } from "next/headers";
+
+export type SubscriptionDetails = {
+  id: string;
+  productId: string;
+  status: string;
+  amount: number;
+  currency: string;
+  recurringInterval: string;
+  currentPeriodStart: Date;
+  currentPeriodEnd: Date;
+  cancelAtPeriodEnd: boolean;
+  canceledAt: Date | null;
+  organizationId: string | null;
+};
+
+export type SubscriptionDetailsResult = {
+  hasSubscription: boolean;
+  subscription?: SubscriptionDetails;
+  error?: string;
+  errorType?: "CANCELED" | "EXPIRED" | "GENERAL";
+};
+
+export async function getSubscriptionDetails(): Promise<SubscriptionDetailsResult> {
+  try {
+    const session = await auth.api.getSession({
+      headers: await headers(),
+    });
+
+    if (!session?.user?.id) {
+      return { hasSubscription: false };
+    }
+
+    const userSubscriptions = await db
+      .select()
+      .from(subscription)
+      .where(eq(subscription.userId, session.user.id));
+
+    if (!userSubscriptions.length) {
+      return { hasSubscription: false };
+    }
+
+    // Get the most recent active subscription
+    const activeSubscription = userSubscriptions
+      .filter((sub) => sub.status === "active")
+      .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())[0];
+
+    if (!activeSubscription) {
+      // Check for canceled or expired subscriptions
+      const latestSubscription = userSubscriptions
+        .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())[0];
+
+      if (latestSubscription) {
+        const now = new Date();
+        const isExpired = new Date(latestSubscription.currentPeriodEnd) < now;
+        const isCanceled = latestSubscription.status === "canceled";
+
+        return {
+          hasSubscription: true,
+          subscription: {
+            id: latestSubscription.id,
+            productId: latestSubscription.productId,
+            status: latestSubscription.status,
+            amount: latestSubscription.amount,
+            currency: latestSubscription.currency,
+            recurringInterval: latestSubscription.recurringInterval,
+            currentPeriodStart: latestSubscription.currentPeriodStart,
+            currentPeriodEnd: latestSubscription.currentPeriodEnd,
+            cancelAtPeriodEnd: latestSubscription.cancelAtPeriodEnd,
+            canceledAt: latestSubscription.canceledAt,
+            organizationId: null,
+          },
+          error: isCanceled ? "Subscription has been canceled" : isExpired ? "Subscription has expired" : "Subscription is not active",
+          errorType: isCanceled ? "CANCELED" : isExpired ? "EXPIRED" : "GENERAL",
+        };
+      }
+
+      return { hasSubscription: false };
+    }
+
+    return {
+      hasSubscription: true,
+      subscription: {
+        id: activeSubscription.id,
+        productId: activeSubscription.productId,
+        status: activeSubscription.status,
+        amount: activeSubscription.amount,
+        currency: activeSubscription.currency,
+        recurringInterval: activeSubscription.recurringInterval,
+        currentPeriodStart: activeSubscription.currentPeriodStart,
+        currentPeriodEnd: activeSubscription.currentPeriodEnd,
+        cancelAtPeriodEnd: activeSubscription.cancelAtPeriodEnd,
+        canceledAt: activeSubscription.canceledAt,
+        organizationId: null,
+      },
+    };
+  } catch (error) {
+    console.error("Error fetching subscription details:", error);
+    return {
+      hasSubscription: false,
+      error: "Failed to load subscription details",
+      errorType: "GENERAL",
+    };
+  }
+}
+
+// Simple helper to check if user has an active subscription
+export async function isUserSubscribed(): Promise<boolean> {
+  const result = await getSubscriptionDetails();
+  return result.hasSubscription && result.subscription?.status === "active";
+}
+
+// Helper to check if user has access to a specific product/tier
+export async function hasAccessToProduct(productId: string): Promise<boolean> {
+  const result = await getSubscriptionDetails();
+  return (
+    result.hasSubscription &&
+    result.subscription?.status === "active" &&
+    result.subscription?.productId === productId
+  );
+}
+
+// Helper to get user's current subscription status
+export async function getUserSubscriptionStatus(): Promise<"active" | "canceled" | "expired" | "none"> {
+  const result = await getSubscriptionDetails();
+  
+  if (!result.hasSubscription) {
+    return "none";
+  }
+  
+  if (result.subscription?.status === "active") {
+    return "active";
+  }
+  
+  if (result.errorType === "CANCELED") {
+    return "canceled";
+  }
+  
+  if (result.errorType === "EXPIRED") {
+    return "expired";
+  }
+  
+  return "none";
+}

package/features/payments/payments-schema.ts

@@ -0,0 +1,30 @@
+import { pgTable, text, timestamp, boolean, integer } from "drizzle-orm/pg-core";
+
+// Subscription table for Polar webhook data
+// Note: userId references user.id from db/schema.ts (user table is added by auth module)
+export const subscription = pgTable("subscription", {
+  id: text("id").primaryKey(),
+  createdAt: timestamp("createdAt").notNull(),
+  modifiedAt: timestamp("modifiedAt"),
+  amount: integer("amount").notNull(),
+  currency: text("currency").notNull(),
+  recurringInterval: text("recurringInterval").notNull(),
+  status: text("status").notNull(),
+  currentPeriodStart: timestamp("currentPeriodStart").notNull(),
+  currentPeriodEnd: timestamp("currentPeriodEnd").notNull(),
+  cancelAtPeriodEnd: boolean("cancelAtPeriodEnd").notNull().default(false),
+  canceledAt: timestamp("canceledAt"),
+  startedAt: timestamp("startedAt").notNull(),
+  endsAt: timestamp("endsAt"),
+  endedAt: timestamp("endedAt"),
+  customerId: text("customerId").notNull(),
+  productId: text("productId").notNull(),
+  discountId: text("discountId"),
+  checkoutId: text("checkoutId").notNull(),
+  customerCancellationReason: text("customerCancellationReason"),
+  customerCancellationComment: text("customerCancellationComment"),
+  metadata: text("metadata"), // JSON string
+  customFieldData: text("customFieldData"), // JSON string
+  userId: text("userId"), // References user.id (user table from auth module)
+});
+