From c82cd09e5b30f7d7989b874ef4c142a2a0f9daa8 Mon Sep 17 00:00:00 2001
From: Randy <randypriv@gmail.com>
Date: Thu, 13 Jul 2023 14:26:08 +0800
Subject: [PATCH 1/6] subscription db

---
 components/Layout.tsx                         | 112 ++++++++++++++++--
 components/Navbar.tsx                         |  40 +++++++
 pages/api/subscription.ts                     |  88 ++++++++++++++
 .../20230713042856_subscription/migration.sql |  17 +++
 .../20230713055831_subscription/migration.sql |   2 +
 prisma/sqlite/schema.prisma                   |  35 ++++--
 service/subscription.service.ts               |  68 +++++++++++
 service/viewData.service.ts                   |   4 +
 utils.server.ts                               |   6 +
 9 files changed, 353 insertions(+), 19 deletions(-)
 create mode 100644 components/Navbar.tsx
 create mode 100644 pages/api/subscription.ts
 create mode 100644 prisma/sqlite/migrations/20230713042856_subscription/migration.sql
 create mode 100644 prisma/sqlite/migrations/20230713055831_subscription/migration.sql
 create mode 100644 service/subscription.service.ts

diff --git a/components/Layout.tsx b/components/Layout.tsx
index eb314c78..67e81e0c 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -3,7 +3,7 @@ import { useMutation, useQuery } from "react-query"
 import { useRouter } from "next/router"
 import { AiOutlineLogout, AiOutlineSetting, AiOutlineFileText, AiOutlineAlert, AiOutlinePlus, AiOutlineComment, AiOutlineCode, AiOutlineRight, AiOutlineDown, AiOutlineFile, AiOutlineQuestion, AiOutlineQuestionCircle } from 'react-icons/ai'
 import { signout, signOut } from "next-auth/client"
-import { Anchor, AppShell, Avatar, Badge, Box, Button, Code, Group, Header, Menu, Modal, Navbar, NavLink, ScrollArea, Select, Space, Stack, Switch, Text, TextInput, Title } from "@mantine/core"
+import { Anchor, AppShell, Avatar, Badge, Box, Button, Code, Grid, Group, Header, List, Menu, Modal, Navbar, NavLink, Paper, ScrollArea, Select, Space, Stack, Switch, Text, TextInput, Title } from "@mantine/core"
 import Link from "next/link"
 import type { ProjectServerSideProps } from "../pages/dashboard/project/[projectId]/settings"
 import { modals } from "@mantine/modals"
@@ -13,6 +13,7 @@ import { apiClient } from "../utils.client"
 import { useForm } from "react-hook-form"
 import { MainLayoutData } from "../service/viewData.service"
 import { Head } from "./Head"
+import dayjs from "dayjs"
 
 // From https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
 function validateEmail(email) {
@@ -55,6 +56,25 @@ export function MainLayout(props: {
     },
   })
 
+  const downgradePlanMutation = useMutation(async () => {
+    await apiClient.delete('/subscription')
+  }, {
+    onSuccess() {
+      notifications.show({
+        title: 'Success',
+        message: 'Downgrade success',
+        color: 'green'
+      })
+    },
+    onError() {
+      notifications.show({
+        title: 'Error',
+        message: 'Something went wrong, please contact hi@cusdis.com',
+        color: 'red'
+      })
+    }
+  })
+
   const updateNewCommentNotification = useMutation(updateUserSettings, {
     onSuccess() {
       notifications.show({
@@ -209,11 +229,14 @@ export function MainLayout(props: {
   }, [])
 
   const badge = React.useMemo(() => {
-    if (!props.config.isHosted) {
-      return <Badge color="green" size="xs">OSS</Badge>
+    if (props.subscription.isActived) {
+      return <Badge color="green" size="xs">PRO</Badge>
     }
 
-    return <Badge color="green" size="xs">PRO</Badge>
+    if (props.config.isHosted) {
+      return <Badge color="gray" size="xs">OSS</Badge>
+    }
+    return <Badge color="green" size="xs">FREE</Badge>
   }, [])
 
   const header = React.useMemo(() => {
@@ -242,7 +265,7 @@ export function MainLayout(props: {
         <Group spacing={4}>
           <Button onClick={_ => {
             openUserModal()
-          }} size="xs" rightIcon={<AiOutlineRight />} variant='subtle'>{props.session.user.name}</Button>
+          }} size="xs" rightIcon={<AiOutlineRight />} variant='subtle'>{props.session.user.name} {badge}</Button>
         </Group>
       </Group>
     )
@@ -273,7 +296,7 @@ export function MainLayout(props: {
           }
         }}
       >
-        <Modal opened={isUserPannelOpen} onClose={closeUserModal}
+        <Modal opened={isUserPannelOpen} size="lg" onClose={closeUserModal}
           title="User Settings"
         >
           <Stack>
@@ -298,11 +321,78 @@ export function MainLayout(props: {
               <Text weight={500} size="sm">Display name</Text>
               <TextInput placeholder={props.userInfo.name} {...userSettingsForm.register("displayName")} size="sm" />
             </Stack>
-            {/* <Stack spacing={8}>
-              <Text weight={500} size="sm">Subscription </Text>
-              <Text size="sm">Current plan: {badge}</Text>
-              <Anchor size="sm">Manage subscription</Anchor>
-            </Stack> */}
+            {props.config.checkout.enabled && (
+              <Stack spacing={8}>
+                <Text weight={500} size="sm">Subscription </Text>
+                <Grid>
+                  <Grid.Col span={6}>
+                    <Paper sx={theme => ({
+                      border: '1px solid #eaeaea',
+                      padding: theme.spacing.md
+                    })}>
+                      <Stack>
+                        <Title order={4}>
+                          Free
+                        </Title>
+                        <List size='sm' sx={{
+                        }}>
+                          <List.Item>
+                            Up to 1 site
+                          </List.Item>
+                          <List.Item>
+                            10 Quick Approve / month
+                          </List.Item>
+                          <List.Item>
+                            100 approved comments / month
+                          </List.Item>
+                        </List>
+                        {!props.subscription.isActived || props.subscription.status === 'cancelled' ? (
+                          <Button disabled size="xs">Current plan</Button>
+                        ) : (
+                          <Button size="xs" variant={'outline'} loading={downgradePlanMutation.isLoading} onClick={_ => {
+                            if (window.confirm('Are you sure to downgrade?')) {
+                              downgradePlanMutation.mutate()
+                            }
+                          }}>Downgrade</Button>
+                        )}
+                      </Stack>
+                    </Paper>
+                  </Grid.Col>
+                  <Grid.Col span={6}>
+                    <Paper sx={theme => ({
+                      border: '1px solid #eaeaea',
+                      padding: theme.spacing.md
+                    })}>
+                      <Stack>
+                        <Title order={4}>
+                          Pro
+                        </Title>
+                        <List size='sm' sx={{
+                        }}>
+                          <List.Item>
+                            Unlimited sites
+                          </List.Item>
+                          <List.Item>
+                            Unlimited Quick Approve
+                          </List.Item>
+                          <List.Item>
+                            Unlimited approved comments
+                          </List.Item>
+                        </List>
+                        {props.subscription.isActived ? (
+                          <>
+                            <Button size="xs" component="a" href={props.subscription.updatePaymentMethodUrl}>Manage payment method</Button>
+                            {props.subscription.status === 'cancelled' && (<Text size='xs' align='center'>Expire on {dayjs(props.subscription.endAt).format('YYYY/MM/DD')}</Text>)}
+                          </>
+                        ) : (
+                          <Button size='xs' component="a" href={`${props.config.checkout.url}?checkout=[custom][user_id]=${props.session.uid}`}>Upgrade $5/month</Button>
+                        )}
+                      </Stack>
+                    </Paper>
+                  </Grid.Col>
+                </Grid>
+              </Stack>
+            )}
             <Button loading={updateUserSettingsMutation.isLoading} onClick={onClickSaveUserSettings}>Save</Button>
             <Button onClick={_ => signOut()} variant={'outline'} color='red'>
               Logout
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
new file mode 100644
index 00000000..020c80fc
--- /dev/null
+++ b/components/Navbar.tsx
@@ -0,0 +1,40 @@
+import {
+  Box,
+  Container,
+  Flex,
+  Link,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Spacer,
+} from "@chakra-ui/react"
+import React from "react"
+import { signOut } from "next-auth/client"
+import { UserSession } from "../service"
+
+export function Navbar(props: { session: UserSession }) {
+  return (
+    <Box py={4}>
+      <Container maxWidth={"5xl"}>
+        <Flex>
+          <Box>
+            <Link fontWeight="bold" fontSize="xl" href="/dashboard">
+              Cusdis
+            </Link>
+          </Box>
+          <Spacer />
+          <Box>
+            <Menu>
+              <MenuButton>{props.session.user.name}</MenuButton>
+              <MenuList>
+                <MenuItem><Link width="100%" href="/user">Settings</Link></MenuItem>
+                <MenuItem onClick={() => signOut()}>Logout</MenuItem>
+              </MenuList>
+            </Menu>
+          </Box>
+        </Flex>
+      </Container>
+    </Box>
+  )
+}
diff --git a/pages/api/subscription.ts b/pages/api/subscription.ts
new file mode 100644
index 00000000..1d56e2e8
--- /dev/null
+++ b/pages/api/subscription.ts
@@ -0,0 +1,88 @@
+import axios from 'axios';
+import * as crypto from 'crypto'
+import { NextApiRequest, NextApiResponse } from 'next';
+import { Readable } from 'stream';
+import { SubscriptionService } from '../../service/subscription.service';
+import { getSession, prisma, resolvedConfig } from '../../utils.server';
+
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+
+// Get raw body as string
+async function getRawBody(readable: Readable): Promise<Buffer> {
+  const chunks = [];
+  for await (const chunk of readable) {
+    chunks.push(typeof chunk === 'string' ? Buffer.from(chunk) : chunk);
+  }
+  return Buffer.concat(chunks);
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+
+  if (req.method === 'POST') {
+    const rawBody = await getRawBody(req);
+    const secret = resolvedConfig.checkout.lemonSecret;
+    console.log(req.headers)
+    const hmac = crypto.createHmac('sha256', secret);
+    const digest = Buffer.from(hmac.update(rawBody).digest('hex'), 'utf8');
+    const signature = Buffer.from(req.headers['x-signature'] as string, 'utf8');
+
+    if (!crypto.timingSafeEqual(digest, signature)) {
+      res.status(401).send('Invalid signature');
+      return
+    }
+
+    const data = JSON.parse(Buffer.from(rawBody).toString('utf8'));
+    const subscriptionService = new SubscriptionService()
+    const eventName = req.headers['x-event-name'] as string
+
+    switch (eventName) {
+      case 'subscription_created':
+      case 'subscription_updated': {
+        await subscriptionService.update(data)
+        break
+      }
+    }
+
+    res.json({
+
+    })
+  } else if (req.method === 'DELETE') {
+    const session = await getSession(req)
+
+    if (!session) {
+      res.status(401).send('Unauthorized')
+      return
+    }
+
+    const subscription = await prisma.subscription.findUnique({
+      where: {
+        userId: session.uid
+      },
+    })
+
+    if (!subscription) {
+      res.status(404).send('Subscription not found')
+      return
+    }
+
+    try {
+      const response = await axios.delete(`https://api.lemonsqueezy.com/v1/subscriptions/${subscription.lemonSubscriptionId}`, {
+        headers: {
+          'Authorization': `Bearer ${resolvedConfig.checkout.lemonApiKey}`,
+          'Content-Type': 'application/vnd.api+json',
+          'Accept': "application/vnd.api+json"
+        }
+      })
+    } catch (e) {
+      console.log(e.response.data, e.request)
+    }
+
+    res.json({
+      message: 'success'
+    })
+  }
+}
\ No newline at end of file
diff --git a/prisma/sqlite/migrations/20230713042856_subscription/migration.sql b/prisma/sqlite/migrations/20230713042856_subscription/migration.sql
new file mode 100644
index 00000000..01f6fa37
--- /dev/null
+++ b/prisma/sqlite/migrations/20230713042856_subscription/migration.sql
@@ -0,0 +1,17 @@
+-- CreateTable
+CREATE TABLE "Subscription" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "order_id" TEXT NOT NULL,
+    "product_id" TEXT,
+    "variant_id" TEXT,
+    "customer_id" TEXT,
+    "status" TEXT NOT NULL,
+    "endsAt" DATETIME,
+    "update_payment_method_url" TEXT,
+    "created_at" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "Subscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_userId_key" ON "Subscription"("userId");
diff --git a/prisma/sqlite/migrations/20230713055831_subscription/migration.sql b/prisma/sqlite/migrations/20230713055831_subscription/migration.sql
new file mode 100644
index 00000000..c9071b94
--- /dev/null
+++ b/prisma/sqlite/migrations/20230713055831_subscription/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Subscription" ADD COLUMN "lemon_subscription_id" TEXT;
diff --git a/prisma/sqlite/schema.prisma b/prisma/sqlite/schema.prisma
index 8433c7c5..2a5a32f4 100644
--- a/prisma/sqlite/schema.prisma
+++ b/prisma/sqlite/schema.prisma
@@ -25,7 +25,6 @@ model Account {
   createdAt          DateTime  @default(now()) @map(name: "created_at")
   updatedAt          DateTime  @default(now()) @map(name: "updated_at")
 
-
   @@index([providerAccountId], name: "providerAccountId")
   @@index([providerId], name: "providerId")
   @@index([userId], name: "userId")
@@ -47,7 +46,7 @@ model Session {
 model User {
   id            String    @id @default(uuid())
   name          String?
-  displayName String?
+  displayName   String?
   email         String?   @unique
   emailVerified DateTime? @map(name: "email_verified")
   image         String?
@@ -58,12 +57,33 @@ model User {
 
   Comment Comment[]
 
+  subscription Subscription?
+
   enableNewCommentNotification Boolean? @default(true) @map(name: "enable_new_comment_notification")
-  notificationEmail            String? @map(name: "notification_email")
+  notificationEmail            String?  @map(name: "notification_email")
 
   @@map(name: "users")
 }
 
+model Subscription {
+  id String @id @default(uuid())
+
+  userId String @unique
+  user   User   @relation(fields: [userId], references: [id])
+
+  lemonSubscriptionId String? @map(name: "lemon_subscription_id")
+  orderId        String    @map(name: "order_id")
+  productId      String?   @map(name: "product_id")
+  variantId      String?   @map(name: "variant_id")
+  customerId     String?   @map(name: "customer_id")
+  status         String
+  endsAt        DateTime? @map(name: "endsAt")
+
+  updatePaymentMethodUrl String? @map(name: "update_payment_method_url")
+
+  createdAt DateTime @default(now()) @map(name: "created_at")
+}
+
 model VerificationRequest {
   id         Int      @id @default(autoincrement())
   identifier String
@@ -78,10 +98,10 @@ model VerificationRequest {
 // next-auth END
 
 model Project {
-  id        String   @id @default(uuid())
+  id        String    @id @default(uuid())
   title     String
-  createdAt DateTime @default(now()) @map(name: "created_at")
-  updatedAt DateTime @default(now()) @map(name: "updated_at")
+  createdAt DateTime  @default(now()) @map(name: "created_at")
+  updatedAt DateTime  @default(now()) @map(name: "updated_at")
   deletedAt DateTime? @map(name: "deleted_at")
 
   ownerId String
@@ -94,7 +114,7 @@ model Project {
 
   enableNotification Boolean? @default(true) @map(name: "enable_notification")
 
-  webhook String?
+  webhook       String?
   enableWebhook Boolean?
 
   @@map(name: "projects")
@@ -115,7 +135,6 @@ model Page {
 
   comments Comment[]
 
-
   @@index([projectId], name: "projectId")
   @@map("pages")
 }
diff --git a/service/subscription.service.ts b/service/subscription.service.ts
new file mode 100644
index 00000000..5e6b2783
--- /dev/null
+++ b/service/subscription.service.ts
@@ -0,0 +1,68 @@
+import { prisma } from "../utils.server"
+
+export class SubscriptionService {
+  async update(body) {
+    const {
+      order_id,
+      product_id,
+      variant_id,
+      customer_id,
+      status,
+      ends_at,
+      urls: {
+        update_payment_method
+      }
+    } = body.data.attributes
+
+    const lemonSubscriptionId = body.data.id
+
+    const {
+      user_id
+    } = body.meta.custom_data
+
+    await prisma.subscription.upsert({
+      where: {
+        userId: user_id
+      },
+      create: {
+        userId: user_id,
+        orderId: `${order_id}`,
+        productId: `${product_id}`,
+        variantId: `${variant_id}`,
+        customerId: `${customer_id}`,
+        endsAt: ends_at,
+        lemonSubscriptionId,
+        status,
+        updatePaymentMethodUrl: update_payment_method
+      },
+      update: {
+        userId: user_id,
+        orderId: `${order_id}`,
+        productId: `${product_id}`,
+        variantId: `${variant_id}`,
+        customerId: `${customer_id}`,
+        lemonSubscriptionId,
+        endsAt: ends_at,
+        status,
+        updatePaymentMethodUrl: update_payment_method
+      }
+    })
+  }
+
+  async getStatus(userId: string) {
+    const subscription = await prisma.subscription.findUnique({
+      where: {
+        userId
+      },
+    })
+
+    let isActived = subscription?.status === 'active' || subscription?.status === 'cancelled'
+
+    return {
+      isActived,
+      status: subscription?.status || '',
+      endAt: subscription?.endsAt.toISOString() || '',
+      updatePaymentMethodUrl: subscription?.updatePaymentMethodUrl || ''
+    }
+  }
+}
\ No newline at end of file
diff --git a/service/viewData.service.ts b/service/viewData.service.ts
index 38e5408f..c8a3dd71 100644
--- a/service/viewData.service.ts
+++ b/service/viewData.service.ts
@@ -3,9 +3,11 @@
 import { RequestScopeService, UserSession } from ".";
 import { prisma, resolvedConfig } from "../utils.server";
 import { ProjectService } from "./project.service";
+import { SubscriptionService } from './subscription.service'
 
 export class ViewDataService extends RequestScopeService {
   private projectService = new ProjectService(this.req)
+  private subscriptionService = new SubscriptionService()
 
   async fetchMainLayoutData() {
     const session = await this.getSession()
@@ -26,8 +28,10 @@ export class ViewDataService extends RequestScopeService {
     return {
       session,
       projects: await this.projectService.list(),
+      subscription: await this.subscriptionService.getStatus(session.uid),
       config: {
         isHosted: resolvedConfig.isHosted,
+        checkout: resolvedConfig.checkout,
       },
       userInfo
     }
diff --git a/utils.server.ts b/utils.server.ts
index 9e9f528a..1a6226c8 100644
--- a/utils.server.ts
+++ b/utils.server.ts
@@ -14,6 +14,12 @@ export const resolvedConfig = {
   jwtSecret: process.env.JWT_SECRET,
   isHosted: process.env.IS_HOSTED === 'true',
   host: process.env.HOST || 'https://cusdis.com',
+  checkout: {
+    enabled: process.env.CHECKOUT_URL ? true : false,
+    url: process.env.CHECKOUT_URL as string,
+    lemonSecret: process.env.LEMON_SECRET as string,
+    lemonApiKey: process.env.LEMON_API_KEY as string,
+  },
   umami: {
     id: process.env.UMAMI_ID as EnvVariable,
     src: process.env.UMAMI_SRC as EnvVariable,

From 53cfc6e8aa093060d9074258f87f7b470451698e Mon Sep 17 00:00:00 2001
From: Randy <randypriv@gmail.com>
Date: Thu, 13 Jul 2023 15:33:09 +0800
Subject: [PATCH 2/6] usage limitation

---
 pages/api/comment/[commentId]/approve.ts      |  18 +++
 pages/api/open/approve.ts                     |  15 +++
 pages/api/projects.ts                         |  21 ++++
 pages/dashboard/project/[projectId].tsx       |  13 ++
 pages/getting-start.tsx                       |  12 ++
 pages/open/approve.tsx                        |  24 +++-
 .../20230713070441_usage/migration.sql        |  12 ++
 prisma/sqlite/schema.prisma                   |  32 +++--
 service/subscription.service.ts               | 115 +++++++++++++++++-
 service/usage.service.ts                      |  33 +++++
 service/webhook.service.ts                    |   4 +
 11 files changed, 283 insertions(+), 16 deletions(-)
 create mode 100644 prisma/sqlite/migrations/20230713070441_usage/migration.sql
 create mode 100644 service/usage.service.ts

diff --git a/pages/api/comment/[commentId]/approve.ts b/pages/api/comment/[commentId]/approve.ts
index 31eec42c..dd48b5a4 100644
--- a/pages/api/comment/[commentId]/approve.ts
+++ b/pages/api/comment/[commentId]/approve.ts
@@ -1,6 +1,9 @@
 import { NextApiRequest, NextApiResponse } from 'next'
 import { AuthService } from '../../../../service/auth.service'
 import { CommentService } from '../../../../service/comment.service'
+import { SubscriptionService, usageLimitation } from '../../../../service/subscription.service'
+import { UsageLabel, UsageService } from '../../../../service/usage.service'
+import { getSession } from '../../../../utils.server'
 
 export default async function handler(
   req: NextApiRequest,
@@ -8,6 +11,10 @@ export default async function handler(
 ) {
   const commentService = new CommentService(req)
   const authService = new AuthService(req, res)
+  const usageService = new UsageService(req)
+  const session = await getSession(req)
+
+  const subscriptionService = new SubscriptionService()
 
   if (req.method === 'POST') {
     const commentId = req.query.commentId as string
@@ -18,7 +25,18 @@ export default async function handler(
       return
     }
 
+    // check usage
+    if (!await subscriptionService.approveCommentValidate(session.uid)) {
+      res.status(402).json({
+        error:
+          `You have reached the maximum number of approving comments on free plan (${usageLimitation['approve_comment']}/month). Please upgrade to Pro plan to approve more comments.`,
+      })
+      return
+    }
+
     await commentService.approve(commentId)
+    await usageService.incr(UsageLabel.ApproveComment)
+
     res.json({
       message: 'success',
     })
diff --git a/pages/api/open/approve.ts b/pages/api/open/approve.ts
index c6cb85f6..2104ea06 100644
--- a/pages/api/open/approve.ts
+++ b/pages/api/open/approve.ts
@@ -3,12 +3,17 @@ import { resolvedConfig } from '../../../utils.server'
 import jwt from 'jsonwebtoken'
 import { CommentService } from '../../../service/comment.service'
 import { SecretKey, TokenBody, TokenService } from '../../../service/token.service'
+import { UsageLabel, UsageService } from '../../../service/usage.service'
+import { SubscriptionService, usageLimitation } from '../../../service/subscription.service'
 
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse,
 ) {
   const commentService = new CommentService(req)
+  const usageService = new UsageService(req)
+  const subscriptionService = new SubscriptionService()
+
   const tokenService = new TokenService()
 
   if (req.method === 'GET') {
@@ -59,6 +64,14 @@ export default async function handler(
       return
     }
 
+    // check usage
+    if (!await subscriptionService.quickApproveValidate(tokenBody.owner.id)) {
+      res.status(402).json({
+        error: `You have reached the maximum number of Quick Approve on free plan (${usageLimitation.quick_approve}/month). Please upgrade to Pro plan to use Quick Approve more.`
+      })
+      return
+    }
+
     // firstly, approve comment
     await commentService.approve(tokenBody.commentId)
 
@@ -69,6 +82,8 @@ export default async function handler(
       })
     }
 
+    await usageService.incr(UsageLabel.QuickApprove)
+
     res.json({
       message: 'success'
     })
diff --git a/pages/api/projects.ts b/pages/api/projects.ts
index 1934836e..e08a0737 100644
--- a/pages/api/projects.ts
+++ b/pages/api/projects.ts
@@ -1,13 +1,34 @@
 import { NextApiRequest, NextApiResponse } from "next";
 import { ProjectService } from "../../service/project.service";
+import { SubscriptionService } from "../../service/subscription.service";
+import { getSession, prisma } from "../../utils.server";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   const projectService = new ProjectService(req)
+  const subscriptionService = new SubscriptionService()
+  const session = await getSession(req)
 
   if (req.method === 'POST') {
+    if (!session) {
+      res.status(401).json({
+        error: 'Unauthorized'
+      })
+      return
+    }
+
+    // check subscription
+    if (!await subscriptionService.createProjectValidate(session.uid)) {
+    // if (true) {
+      res.status(402).json({
+        error: 'You have reached the maximum number of sites on free plan. Please upgrade to Pro plan to create more sites.'
+      })
+      return
+    }
+
     const { title } = req.body as {
       title: string
     }
+
     const created = await projectService.create(title)
 
     res.json({
diff --git a/pages/dashboard/project/[projectId].tsx b/pages/dashboard/project/[projectId].tsx
index da83ff0f..530d805d 100644
--- a/pages/dashboard/project/[projectId].tsx
+++ b/pages/dashboard/project/[projectId].tsx
@@ -16,6 +16,7 @@ import { MainLayout } from '../../../components/Layout'
 import { AiOutlineCode, AiOutlineUnorderedList, AiOutlineControl, AiOutlineCheck, AiOutlineClose, AiOutlineSmile } from 'react-icons/ai'
 import { List, Stack, Box, Text, Group, Anchor, Button, Pagination, Textarea, Title, Center } from '@mantine/core'
 import { MainLayoutData, ViewDataService } from '../../../service/viewData.service'
+import { notifications } from '@mantine/notifications'
 
 const getComments = async ({ queryKey }) => {
   const [_key, { projectId, page }] = queryKey
@@ -69,6 +70,18 @@ function CommentToolbar(props: {
   const approveCommentMutation = useMutation(approveComment, {
     onSuccess() {
       props.refetch()
+    },
+    onError(data: any) {
+      const {
+        error: message,
+        status: statusCode
+      } = data.response.data
+
+      notifications.show({
+        title: "Error",
+        message,
+        color: 'yellow'
+      })
     }
   })
   const replyCommentMutation = useMutation(replyAsModerator, {
diff --git a/pages/getting-start.tsx b/pages/getting-start.tsx
index 329aadf7..54abdc0f 100644
--- a/pages/getting-start.tsx
+++ b/pages/getting-start.tsx
@@ -40,6 +40,18 @@ function GettingStart() {
             shallow: true,
           })
         },
+        onError(data: any) {
+          const {
+            error: message,
+            status: statusCode
+          } = data.response.data
+
+          notifications.show({
+            title: "Error",
+            message,
+            color: 'yellow'
+          })
+        }
       }
     )
   }
diff --git a/pages/open/approve.tsx b/pages/open/approve.tsx
index 95fd10fe..8a5350e2 100644
--- a/pages/open/approve.tsx
+++ b/pages/open/approve.tsx
@@ -44,10 +44,16 @@ function ApprovePage(props: {
       })
       setReplyContent('')
     },
-    onError() {
+    onError(data: any) {
+      const {
+        error: message,
+        status: statusCode
+      } = data.response.data
+
       notifications.show({
-        title: 'Something went wrong',
-        message: 'Please try again later',
+        title: "Error",
+        message,
+        color: 'yellow'
       })
     }
   })
@@ -61,10 +67,16 @@ function ApprovePage(props: {
 
       location.reload()
     },
-    onError() {
+    onError(data: any) {
+      const {
+        error: message,
+        status: statusCode
+      } = data.response.data
+
       notifications.show({
-        title: 'Something went wrong',
-        message: 'Please try again later',
+        title: "Error",
+        message,
+        color: 'yellow'
       })
     }
   })
diff --git a/prisma/sqlite/migrations/20230713070441_usage/migration.sql b/prisma/sqlite/migrations/20230713070441_usage/migration.sql
new file mode 100644
index 00000000..02a97510
--- /dev/null
+++ b/prisma/sqlite/migrations/20230713070441_usage/migration.sql
@@ -0,0 +1,12 @@
+-- CreateTable
+CREATE TABLE "usages" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "userId" TEXT NOT NULL,
+    "label" TEXT NOT NULL,
+    "count" INTEGER NOT NULL DEFAULT 0,
+    "updatedAt" DATETIME NOT NULL,
+    CONSTRAINT "usages_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "usages_userId_label_key" ON "usages"("userId", "label");
diff --git a/prisma/sqlite/schema.prisma b/prisma/sqlite/schema.prisma
index 2a5a32f4..f7713e63 100644
--- a/prisma/sqlite/schema.prisma
+++ b/prisma/sqlite/schema.prisma
@@ -62,6 +62,8 @@ model User {
   enableNewCommentNotification Boolean? @default(true) @map(name: "enable_new_comment_notification")
   notificationEmail            String?  @map(name: "notification_email")
 
+  usage Usage[]
+
   @@map(name: "users")
 }
 
@@ -71,13 +73,13 @@ model Subscription {
   userId String @unique
   user   User   @relation(fields: [userId], references: [id])
 
-  lemonSubscriptionId String? @map(name: "lemon_subscription_id")
-  orderId        String    @map(name: "order_id")
-  productId      String?   @map(name: "product_id")
-  variantId      String?   @map(name: "variant_id")
-  customerId     String?   @map(name: "customer_id")
-  status         String
-  endsAt        DateTime? @map(name: "endsAt")
+  lemonSubscriptionId String?   @map(name: "lemon_subscription_id")
+  orderId             String    @map(name: "order_id")
+  productId           String?   @map(name: "product_id")
+  variantId           String?   @map(name: "variant_id")
+  customerId          String?   @map(name: "customer_id")
+  status              String
+  endsAt              DateTime? @map(name: "endsAt")
 
   updatePaymentMethodUrl String? @map(name: "update_payment_method_url")
 
@@ -163,3 +165,19 @@ model Comment {
 
   @@map("comments")
 }
+
+model Usage {
+  id String @id @default(uuid())
+
+  userId String
+  user   User   @relation(fields: [userId], references: [id])
+
+  label String
+  count Int @default(0)
+
+  updatedAt DateTime @updatedAt
+
+  @@unique([userId, label])
+
+  @@map("usages")
+}
diff --git a/service/subscription.service.ts b/service/subscription.service.ts
index 5e6b2783..3f76719c 100644
--- a/service/subscription.service.ts
+++ b/service/subscription.service.ts
@@ -1,4 +1,10 @@
-import { prisma } from "../utils.server"
+import { prisma, resolvedConfig } from "../utils.server"
+import { UsageLabel } from "./usage.service"
+
+export const usageLimitation = {
+  [UsageLabel.ApproveComment]: 100,
+  [UsageLabel.QuickApprove]: 10,
+}
 
 export class SubscriptionService {
   async update(body) {
@@ -49,20 +55,123 @@ export class SubscriptionService {
     })
   }
 
-  async getStatus(userId: string) {
+  async isActivated(userId: string) {
     const subscription = await prisma.subscription.findUnique({
       where: {
         userId
       },
     })
 
+    if (!subscription) {
+      return false
+    }
+
     let isActived = subscription?.status === 'active' || subscription?.status === 'cancelled'
 
+    return isActived
+  }
+
+  async getStatus(userId: string) {
+    const subscription = await prisma.subscription.findUnique({
+      where: {
+        userId
+      },
+    })
+
     return {
-      isActived,
+      isActived: await this.isActivated(userId),
       status: subscription?.status || '',
       endAt: subscription?.endsAt.toISOString() || '',
       updatePaymentMethodUrl: subscription?.updatePaymentMethodUrl || ''
     }
   }
+
+  async createProjectValidate(userId: string) {
+    if (!resolvedConfig.checkout.enabled) {
+      return true
+    }
+
+    const [projectCount] = await prisma.$transaction([
+      prisma.project.count({
+        where: {
+          ownerId: userId,
+          deletedAt: {
+            equals: null
+          }
+        }
+      }),
+    ])
+
+    if (projectCount < 0) {
+      return true
+    }
+
+    if (await this.isActivated(userId)) {
+      return true
+    }
+
+    return false
+  }
+
+  async approveCommentValidate(userId: string) {
+    if (!resolvedConfig.checkout.enabled) {
+      return true
+    }
+
+    const [usage] = await prisma.$transaction([
+      prisma.usage.findUnique({
+        where: {
+          userId_label: {
+            userId,
+            label: UsageLabel.ApproveComment
+          }
+        }
+      }),
+    ])
+
+    if (await this.isActivated(userId)) {
+      return true
+    }
+
+    if (!usage) {
+      return true
+    }
+
+    if (usage.count <= usageLimitation[UsageLabel.ApproveComment]) {
+      return true
+    }
+ 
+    return false
+  }
+
+  async quickApproveValidate(userId: string) {
+    if (!resolvedConfig.checkout.enabled) {
+      return true
+    }
+
+    const [usage] = await prisma.$transaction([
+      prisma.usage.findUnique({
+        where: {
+          userId_label: {
+            userId,
+            label: UsageLabel.QuickApprove
+          }
+        }
+      }),
+    ])
+
+    // if (await this.isActivated(userId)) {
+    //   return true
+    // }
+
+    if (!usage) {
+      return true
+    }
+
+    if (usage.count <= usageLimitation[UsageLabel.QuickApprove]) {
+      return true
+    }
+
+    return false
+  }
 }
\ No newline at end of file
diff --git a/service/usage.service.ts b/service/usage.service.ts
new file mode 100644
index 00000000..8f5abaa3
--- /dev/null
+++ b/service/usage.service.ts
@@ -0,0 +1,33 @@
+import { RequestScopeService } from ".";
+import { prisma } from "../utils.server";
+
+
+export enum UsageLabel {
+  ApproveComment = 'approve_comment',
+  QuickApprove = 'quick_approve',
+}
+
+export class UsageService extends RequestScopeService {
+  async incr(label: UsageLabel) {
+    const session = await this.getSession()
+
+    await prisma.usage.upsert({
+      where: {
+        userId_label: {
+          userId: session.uid,
+          label,
+        }
+      },
+      create: {
+        userId: session.uid,
+        label,
+        count: 1
+      },
+      update: {
+        count: {
+          increment: 1
+        }
+      }
+    })
+  }
+}
\ No newline at end of file
diff --git a/service/webhook.service.ts b/service/webhook.service.ts
index 3a77b296..4ec64c90 100644
--- a/service/webhook.service.ts
+++ b/service/webhook.service.ts
@@ -33,6 +33,10 @@ export class WebhookService extends RequestScopeService {
       },
     })
 
+    const approveToken = await this.tokenService.genApproveToken(comment.id)
+    const approveLink = `${resolvedConfig.host}/open/approve?token=${approveToken}`
+    console.log(approveLink)
+
     if (project.enableWebhook && !comment.moderatorId && project.webhook) {
 
       const fullComment = await prisma.comment.findUnique({

From 6db257cdde1470e4d4e56988e2fa0463b2ea2abc Mon Sep 17 00:00:00 2001
From: Randy <randypriv@gmail.com>
Date: Thu, 13 Jul 2023 15:56:25 +0800
Subject: [PATCH 3/6] usage board

---
 components/Layout.tsx           | 177 +++++++++++++++++++-------------
 config.common.ts                |  11 ++
 pages/api/open/approve.ts       |   5 +-
 service/subscription.service.ts |   7 +-
 service/usage.service.ts        |   7 +-
 service/viewData.service.ts     |  39 +++++++
 6 files changed, 161 insertions(+), 85 deletions(-)
 create mode 100644 config.common.ts

diff --git a/components/Layout.tsx b/components/Layout.tsx
index 67e81e0c..3c888dab 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -3,7 +3,7 @@ import { useMutation, useQuery } from "react-query"
 import { useRouter } from "next/router"
 import { AiOutlineLogout, AiOutlineSetting, AiOutlineFileText, AiOutlineAlert, AiOutlinePlus, AiOutlineComment, AiOutlineCode, AiOutlineRight, AiOutlineDown, AiOutlineFile, AiOutlineQuestion, AiOutlineQuestionCircle } from 'react-icons/ai'
 import { signout, signOut } from "next-auth/client"
-import { Anchor, AppShell, Avatar, Badge, Box, Button, Code, Grid, Group, Header, List, Menu, Modal, Navbar, NavLink, Paper, ScrollArea, Select, Space, Stack, Switch, Text, TextInput, Title } from "@mantine/core"
+import { Anchor, AppShell, Avatar, Badge, Box, Button, Code, Grid, Group, Header, List, Menu, Modal, Navbar, NavLink, Paper, Progress, ScrollArea, Select, Space, Stack, Switch, Text, TextInput, Title } from "@mantine/core"
 import Link from "next/link"
 import type { ProjectServerSideProps } from "../pages/dashboard/project/[projectId]/settings"
 import { modals } from "@mantine/modals"
@@ -14,6 +14,7 @@ import { useForm } from "react-hook-form"
 import { MainLayoutData } from "../service/viewData.service"
 import { Head } from "./Head"
 import dayjs from "dayjs"
+import { usageLimitation } from "../config.common"
 
 // From https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
 function validateEmail(email) {
@@ -271,6 +272,37 @@ export function MainLayout(props: {
     )
   }, [])
 
+  const usageBoard = React.useMemo(() => {
+    return (
+      <>
+        <Text size="sm" weight={900}>
+          Usage (per month)
+        </Text>
+        <Stack spacing={4}>
+          <Group spacing={4}>
+            <Text weight={500} size="sm">Sites:</Text>
+            <Text size='sm'>
+              {`${props.usage.projectCount} / ${usageLimitation['create_site']}`}
+            </Text>
+          </Group>
+          
+          <Group spacing={4}>
+            <Text weight={500} size="sm">Approve comments:</Text>
+            <Text size='sm'>
+              {`${props.usage.approveCommentUsage} / ${usageLimitation['approve_comment']}`}
+            </Text>
+          </Group>
+          <Group spacing={4}>
+            <Text weight={500} size="sm">Quick Approve:</Text>
+            <Text size='sm'>
+              {`${props.usage.quickApproveUsage} / ${usageLimitation['quick_approve']}`}
+            </Text>
+          </Group>
+        </Stack>
+      </>
+    )
+  }, [])
+
   return (
     <>
       <Head title={`${props.project.title} - Cusdis`} />
@@ -322,76 +354,79 @@ export function MainLayout(props: {
               <TextInput placeholder={props.userInfo.name} {...userSettingsForm.register("displayName")} size="sm" />
             </Stack>
             {props.config.checkout.enabled && (
-              <Stack spacing={8}>
-                <Text weight={500} size="sm">Subscription </Text>
-                <Grid>
-                  <Grid.Col span={6}>
-                    <Paper sx={theme => ({
-                      border: '1px solid #eaeaea',
-                      padding: theme.spacing.md
-                    })}>
-                      <Stack>
-                        <Title order={4}>
-                          Free
-                        </Title>
-                        <List size='sm' sx={{
-                        }}>
-                          <List.Item>
-                            Up to 1 site
-                          </List.Item>
-                          <List.Item>
-                            10 Quick Approve / month
-                          </List.Item>
-                          <List.Item>
-                            100 approved comments / month
-                          </List.Item>
-                        </List>
-                        {!props.subscription.isActived || props.subscription.status === 'cancelled' ? (
-                          <Button disabled size="xs">Current plan</Button>
-                        ) : (
-                          <Button size="xs" variant={'outline'} loading={downgradePlanMutation.isLoading} onClick={_ => {
-                            if (window.confirm('Are you sure to downgrade?')) {
-                              downgradePlanMutation.mutate()
-                            }
-                          }}>Downgrade</Button>
-                        )}
-                      </Stack>
-                    </Paper>
-                  </Grid.Col>
-                  <Grid.Col span={6}>
-                    <Paper sx={theme => ({
-                      border: '1px solid #eaeaea',
-                      padding: theme.spacing.md
-                    })}>
-                      <Stack>
-                        <Title order={4}>
-                          Pro
-                        </Title>
-                        <List size='sm' sx={{
-                        }}>
-                          <List.Item>
-                            Unlimited sites
-                          </List.Item>
-                          <List.Item>
-                            Unlimited Quick Approve
-                          </List.Item>
-                          <List.Item>
-                            Unlimited approved comments
-                          </List.Item>
-                        </List>
-                        {props.subscription.isActived ? (
-                          <>
-                            <Button size="xs" component="a" href={props.subscription.updatePaymentMethodUrl}>Manage payment method</Button>
-                            {props.subscription.status === 'cancelled' && (<Text size='xs' align='center'>Expire on {dayjs(props.subscription.endAt).format('YYYY/MM/DD')}</Text>)}
-                          </>
-                        ) : (
-                          <Button size='xs' component="a" href={`${props.config.checkout.url}?checkout=[custom][user_id]=${props.session.uid}`}>Upgrade $5/month</Button>
-                        )}
-                      </Stack>
-                    </Paper>
-                  </Grid.Col>
-                </Grid>
-              </Stack>
+              <>
+                {usageBoard}
+                <Stack spacing={8}>
+                  <Text weight={900} size="sm">Subscription </Text>
+                  <Grid>
+                    <Grid.Col span={6}>
+                      <Paper sx={theme => ({
+                        border: '1px solid #eaeaea',
+                        padding: theme.spacing.md
+                      })}>
+                        <Stack>
+                          <Title order={4}>
+                            Free
+                          </Title>
+                          <List size='sm' sx={{
+                          }}>
+                            <List.Item>
+                              Up to 1 site
+                            </List.Item>
+                            <List.Item>
+                              10 Quick Approve / month
+                            </List.Item>
+                            <List.Item>
+                              100 approved comments / month
+                            </List.Item>
+                          </List>
+                          {!props.subscription.isActived || props.subscription.status === 'cancelled' ? (
+                            <Button disabled size="xs">Current plan</Button>
+                          ) : (
+                            <Button size="xs" variant={'outline'} loading={downgradePlanMutation.isLoading} onClick={_ => {
+                              if (window.confirm('Are you sure to downgrade?')) {
+                                downgradePlanMutation.mutate()
+                              }
+                            }}>Downgrade</Button>
+                          )}
+                        </Stack>
+                      </Paper>
+                    </Grid.Col>
+                    <Grid.Col span={6}>
+                      <Paper sx={theme => ({
+                        border: '1px solid #eaeaea',
+                        padding: theme.spacing.md
+                      })}>
+                        <Stack>
+                          <Title order={4}>
+                            Pro
+                          </Title>
+                          <List size='sm' sx={{
+                          }}>
+                            <List.Item>
+                              Unlimited sites
+                            </List.Item>
+                            <List.Item>
+                              Unlimited Quick Approve
+                            </List.Item>
+                            <List.Item>
+                              Unlimited approved comments
+                            </List.Item>
+                          </List>
+                          {props.subscription.isActived ? (
+                            <>
+                              <Button size="xs" component="a" href={props.subscription.updatePaymentMethodUrl}>Manage payment method</Button>
+                              {props.subscription.status === 'cancelled' && (<Text size='xs' align='center'>Expire on {dayjs(props.subscription.endAt).format('YYYY/MM/DD')}</Text>)}
+                            </>
+                          ) : (
+                            <Button size='xs' component="a" href={`${props.config.checkout.url}?checkout=[custom][user_id]=${props.session.uid}`}>Upgrade $5/month</Button>
+                          )}
+                        </Stack>
+                      </Paper>
+                    </Grid.Col>
+                  </Grid>
+                </Stack>
+              </>
             )}
             <Button loading={updateUserSettingsMutation.isLoading} onClick={onClickSaveUserSettings}>Save</Button>
             <Button onClick={_ => signOut()} variant={'outline'} color='red'>
diff --git a/config.common.ts b/config.common.ts
new file mode 100644
index 00000000..68ecfe61
--- /dev/null
+++ b/config.common.ts
@@ -0,0 +1,11 @@
+export enum UsageLabel {
+  ApproveComment = 'approve_comment',
+  QuickApprove = 'quick_approve',
+  CreateSite = 'create_site'
+}
+
+export const usageLimitation = {
+  [UsageLabel.ApproveComment]: 100,
+  [UsageLabel.QuickApprove]: 10,
+  [UsageLabel.CreateSite]: 1
+}
diff --git a/pages/api/open/approve.ts b/pages/api/open/approve.ts
index 2104ea06..522e5323 100644
--- a/pages/api/open/approve.ts
+++ b/pages/api/open/approve.ts
@@ -3,8 +3,9 @@ import { resolvedConfig } from '../../../utils.server'
 import jwt from 'jsonwebtoken'
 import { CommentService } from '../../../service/comment.service'
 import { SecretKey, TokenBody, TokenService } from '../../../service/token.service'
-import { UsageLabel, UsageService } from '../../../service/usage.service'
-import { SubscriptionService, usageLimitation } from '../../../service/subscription.service'
+import { UsageService } from '../../../service/usage.service'
+import { SubscriptionService } from '../../../service/subscription.service'
+import { UsageLabel, usageLimitation } from '../../../config.common'
 
 export default async function handler(
   req: NextApiRequest,
diff --git a/service/subscription.service.ts b/service/subscription.service.ts
index 3f76719c..d9644e51 100644
--- a/service/subscription.service.ts
+++ b/service/subscription.service.ts
@@ -1,10 +1,5 @@
+import { UsageLabel, usageLimitation } from "../config.common"
 import { prisma, resolvedConfig } from "../utils.server"
-import { UsageLabel } from "./usage.service"
-
-export const usageLimitation = {
-  [UsageLabel.ApproveComment]: 100,
-  [UsageLabel.QuickApprove]: 10,
-}
 
 export class SubscriptionService {
   async update(body) {
diff --git a/service/usage.service.ts b/service/usage.service.ts
index 8f5abaa3..611ec968 100644
--- a/service/usage.service.ts
+++ b/service/usage.service.ts
@@ -1,12 +1,7 @@
 import { RequestScopeService } from ".";
+import { UsageLabel } from "../config.common";
 import { prisma } from "../utils.server";
 
-
-export enum UsageLabel {
-  ApproveComment = 'approve_comment',
-  QuickApprove = 'quick_approve',
-}
-
 export class UsageService extends RequestScopeService {
   async incr(label: UsageLabel) {
     const session = await this.getSession()
diff --git a/service/viewData.service.ts b/service/viewData.service.ts
index c8a3dd71..e54b4dad 100644
--- a/service/viewData.service.ts
+++ b/service/viewData.service.ts
@@ -1,6 +1,7 @@
 // A service for rendering page
 
 import { RequestScopeService, UserSession } from ".";
+import { UsageLabel } from "../config.common";
 import { prisma, resolvedConfig } from "../utils.server";
 import { ProjectService } from "./project.service";
 import { SubscriptionService } from './subscription.service'
@@ -25,10 +26,48 @@ export class ViewDataService extends RequestScopeService {
       }
     })
 
+    const [projectCount, approveCommentUsage, quickApproveUsage] = await prisma.$transaction([
+      prisma.project.count({
+        where: {
+          ownerId: session.uid,
+          deletedAt: {
+            equals: null
+          }
+        }
+      }),
+      prisma.usage.findUnique({
+        where: {
+          userId_label: {
+            userId: session.uid,
+            label: UsageLabel.ApproveComment
+          }
+        },
+        select: {
+          count: true
+        }
+      }),
+      prisma.usage.findUnique({
+        where: {
+          userId_label: {
+            userId: session.uid,
+            label: UsageLabel.QuickApprove
+          }
+        },
+        select: {
+          count: true
+        }
+      })
+    ])
+
     return {
       session,
       projects: await this.projectService.list(),
       subscription: await this.subscriptionService.getStatus(session.uid),
+      usage: {
+        projectCount,
+        approveCommentUsage: approveCommentUsage?.count ?? 0,
+        quickApproveUsage: quickApproveUsage?.count ?? 0
+      },
       config: {
         isHosted: resolvedConfig.isHosted,
         checkout: resolvedConfig.checkout,

From c161cc6044073b691e9badbbfafe165b5f167089 Mon Sep 17 00:00:00 2001
From: Randy <randypriv@gmail.com>
Date: Thu, 13 Jul 2023 16:21:31 +0800
Subject: [PATCH 4/6] pricing

---
 pages/index.tsx | 88 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 71 insertions(+), 17 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 60580733..ba8a3178 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,12 +8,12 @@ import { GetServerSideProps, Redirect } from 'next'
 import axios from 'axios'
 import { UserSession } from '../service'
 import NextHead from 'next/head'
-import { Button, Container, Group, Stack, Text, Title, Box, Anchor, Grid, Center, Image } from '@mantine/core'
+import { Button, Container, Group, Stack, Text, Title, Box, Anchor, Grid, Center, Image, List, Badge, Flex } from '@mantine/core'
 import { AiOutlineArrowRight, AiOutlineRight } from 'react-icons/ai'
+import { usageLimitation } from '../config.common'
 
 type Props = {
   session: UserSession
-  contributers: Contributer[]
 }
 
 type Contributer = {
@@ -65,7 +65,7 @@ const integrations = [
   }
 ]
 
-function IndexPage({ session, contributers }: Props) {
+function IndexPage({ session }: Props) {
   const router = useRouter()
 
   const StartButton = session ? (
@@ -118,6 +118,8 @@ function IndexPage({ session, contributers }: Props) {
                   Documentation
                 </Button>
 
+                <Anchor href="#pricing" weight={500}>Pricing</Anchor>
+
                 {/* <Anchor weight={500}>Pricing</Anchor> */}
               </Group>
             </Stack>
@@ -152,7 +154,7 @@ function IndexPage({ session, contributers }: Props) {
                     Email Notification
                   </Title>
                   <Text>
-                    You will receive Email notification when a new comment comes in, and approve the new comment without login.
+                    You will receive Email notification when a new comment comes in, and do a Quick Approve.
                   </Text>
                 </Stack>
               </Stack>
@@ -163,7 +165,7 @@ function IndexPage({ session, contributers }: Props) {
                 <Image src="/images/intro-approval.png" w="100%" />
                 <Stack spacing={8}>
                   <Title order={4}>
-                    Approve/Reply without login
+                    Quick Approve
                   </Title>
                   <Text>
                     In the notification email and webhook, you will get a short-time link to approve/reply the new comment without login to dashboard. All the things get done in your mobile.
@@ -182,7 +184,7 @@ function IndexPage({ session, contributers }: Props) {
                   <Text>
                     You can set a Webhook URL that will be triggered when your websites have new comment. Integrate Cusdis with your favorite tools such as Telegram.
                   </Text>
-                  <Anchor  href="/doc#/advanced/webhook" sx={{
+                  <Anchor href="/doc#/advanced/webhook" sx={{
                     textDecoration: 'underline'
                   }}>How to use Webhook</Anchor>
                 </Stack>
@@ -215,13 +217,72 @@ function IndexPage({ session, contributers }: Props) {
             )
           })}
         </Grid>
+
       </Stack>
 
-      <Center my={96}>
-        {StartButton}
-      </Center>
+      <Box>
+        <Title id="pricing" order={1} align='center' my={96}>Pricing</Title>
+        <Flex
+          gap="lg"
+          justify={'center'}
+        >
+          <Stack sx={{
+            border: '1px solid #eee',
+            padding: 24,
+            borderRadius: 12
+          }} >
+            <Title order={3}>Self Host</Title>
+            <Box>
+              <Badge>FREE</Badge>
+            </Box>
+            <List listStyleType={'none'} sx={{
+            }} size="sm">
+              <List.Item>All features. But host on your own server and database.</List.Item>
+            </List>
+            <Button component="a" href="/doc" target={'_blank'}>Documentation</Button>
+          </Stack>
+
+          <Stack sx={{
+            border: '1px solid #eee',
+            padding: 24,
+            borderRadius: 12
+          }}>
+            <Title order={3}>Cloud</Title>
+            <Box>
+              <Badge>FREE</Badge>
+            </Box>
+            <List sx={{
+            }} size="sm">
+              <List.Item>{usageLimitation['create_site']} site</List.Item>
+              <List.Item>{usageLimitation['approve_comment']} approved comments / month</List.Item>
+              <List.Item>{usageLimitation['quick_approve']} Quick Approve / month</List.Item>
+            </List>
+            <Button component="a" href="/dashboard" target={'_blank'}>Start for free</Button>
+          </Stack>
 
-      <Footer maxWidth="3xl" />
+          <Stack sx={{
+            border: '1px solid #eee',
+            padding: 24,
+            borderRadius: 12
+          }}>
+            <Title order={3}>Cloud Pro</Title>
+            <Box>
+              <Badge>$5 / month</Badge>
+            </Box>
+            <List sx={{
+            }} size="sm">
+              <List.Item>Unlimited sites</List.Item>
+              <List.Item>Unlimited approved comments</List.Item>
+              <List.Item>Unlimited Quick Approve</List.Item>
+            </List>
+            <Button component="a" href="/dashboard" target={'_blank'}>Start for free</Button>
+          </Stack>
+        </Flex>
+      </Box>
+
+      <Box my={96}>
+        <Footer maxWidth="3xl" />
+      </Box>
     </Box>
   )
 }
@@ -240,16 +301,9 @@ export const getServerSideProps: GetServerSideProps<Props> | Redirect = async (c
 
   let contributers = [] as Contributer[]
 
-  try {
-    contributers = (await axios.get<Contributer[]>('https://opencollective.com/cusdis/members/all.json')).data
-  } catch (e) {
-
-  }
-
   return {
     props: {
       session,
-      contributers: contributers.filter(_ => _.role !== 'HOST' && _.role !== 'ADMIN')
     },
   }
 }

From 30771881c03014de302b83636d1db064b89b5a6b Mon Sep 17 00:00:00 2001
From: Randy <randypriv@gmail.com>
Date: Thu, 13 Jul 2023 16:37:14 +0800
Subject: [PATCH 5/6] Add migration

---
 components/Layout.tsx                         |  2 +-
 .../20230713082802_subscription/migration.sql | 39 +++++++++++++++
 prisma/pgsql/schema.prisma                    | 49 ++++++++++++++++---
 3 files changed, 83 insertions(+), 7 deletions(-)
 create mode 100644 prisma/pgsql/migrations/20230713082802_subscription/migration.sql

diff --git a/components/Layout.tsx b/components/Layout.tsx
index 3c888dab..6406a2f4 100644
--- a/components/Layout.tsx
+++ b/components/Layout.tsx
@@ -419,7 +419,7 @@ export function MainLayout(props: {
                               {props.subscription.status === 'cancelled' && (<Text size='xs' align='center'>Expire on {dayjs(props.subscription.endAt).format('YYYY/MM/DD')}</Text>)}
                             </>
                           ) : (
-                            <Button size='xs' component="a" href={`${props.config.checkout.url}?checkout=[custom][user_id]=${props.session.uid}`}>Upgrade $5/month</Button>
+                            <Button size='xs' component="a" href={`${props.config.checkout.url}?checkout[custom][user_id]=${props.session.uid}`}>Upgrade $5/month</Button>
                           )}
                         </Stack>
                       </Paper>
diff --git a/prisma/pgsql/migrations/20230713082802_subscription/migration.sql b/prisma/pgsql/migrations/20230713082802_subscription/migration.sql
new file mode 100644
index 00000000..f626e707
--- /dev/null
+++ b/prisma/pgsql/migrations/20230713082802_subscription/migration.sql
@@ -0,0 +1,39 @@
+-- CreateTable
+CREATE TABLE "Subscription" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "lemon_subscription_id" TEXT,
+    "order_id" TEXT NOT NULL,
+    "product_id" TEXT,
+    "variant_id" TEXT,
+    "customer_id" TEXT,
+    "status" TEXT NOT NULL,
+    "endsAt" TIMESTAMP(3),
+    "update_payment_method_url" TEXT,
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "Subscription_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "usages" (
+    "id" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "label" TEXT NOT NULL,
+    "count" INTEGER NOT NULL DEFAULT 0,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "usages_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Subscription_userId_key" ON "Subscription"("userId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "usages_userId_label_key" ON "usages"("userId", "label");
+
+-- AddForeignKey
+ALTER TABLE "Subscription" ADD CONSTRAINT "Subscription_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "usages" ADD CONSTRAINT "usages_userId_fkey" FOREIGN KEY ("userId") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/prisma/pgsql/schema.prisma b/prisma/pgsql/schema.prisma
index 226a2fe0..2fa038f8 100644
--- a/prisma/pgsql/schema.prisma
+++ b/prisma/pgsql/schema.prisma
@@ -25,7 +25,6 @@ model Account {
   createdAt          DateTime  @default(now()) @map(name: "created_at")
   updatedAt          DateTime  @default(now()) @map(name: "updated_at")
 
-
   @@index([providerAccountId], name: "providerAccountId")
   @@index([providerId], name: "providerId")
   @@index([userId], name: "userId")
@@ -47,7 +46,7 @@ model Session {
 model User {
   id            String    @id @default(uuid())
   name          String?
-  displayName String?
+  displayName   String?
   email         String?   @unique
   emailVerified DateTime? @map(name: "email_verified")
   image         String?
@@ -58,12 +57,35 @@ model User {
 
   Comment Comment[]
 
+  subscription Subscription?
+
   enableNewCommentNotification Boolean? @default(true) @map(name: "enable_new_comment_notification")
   notificationEmail            String?  @map(name: "notification_email")
 
+  usage Usage[]
+
   @@map(name: "users")
 }
 
+model Subscription {
+  id String @id @default(uuid())
+
+  userId String @unique
+  user   User   @relation(fields: [userId], references: [id])
+
+  lemonSubscriptionId String?   @map(name: "lemon_subscription_id")
+  orderId             String    @map(name: "order_id")
+  productId           String?   @map(name: "product_id")
+  variantId           String?   @map(name: "variant_id")
+  customerId          String?   @map(name: "customer_id")
+  status              String
+  endsAt              DateTime? @map(name: "endsAt")
+
+  updatePaymentMethodUrl String? @map(name: "update_payment_method_url")
+
+  createdAt DateTime @default(now()) @map(name: "created_at")
+}
+
 model VerificationRequest {
   id         Int      @id @default(autoincrement())
   identifier String
@@ -78,10 +100,10 @@ model VerificationRequest {
 // next-auth END
 
 model Project {
-  id        String   @id @default(uuid())
+  id        String    @id @default(uuid())
   title     String
-  createdAt DateTime @default(now()) @map(name: "created_at")
-  updatedAt DateTime @default(now()) @map(name: "updated_at")
+  createdAt DateTime  @default(now()) @map(name: "created_at")
+  updatedAt DateTime  @default(now()) @map(name: "updated_at")
   deletedAt DateTime? @map(name: "deleted_at")
 
   ownerId String
@@ -115,7 +137,6 @@ model Page {
 
   comments Comment[]
 
-
   @@index([projectId], name: "projectId")
   @@map("pages")
 }
@@ -144,3 +165,19 @@ model Comment {
 
   @@map("comments")
 }
+
+model Usage {
+  id String @id @default(uuid())
+
+  userId String
+  user   User   @relation(fields: [userId], references: [id])
+
+  label String
+  count Int @default(0)
+
+  updatedAt DateTime @updatedAt
+
+  @@unique([userId, label])
+
+  @@map("usages")
+}
\ No newline at end of file

From c07f9e4db1bb8fb20bebc68cad57519736a66c8c Mon Sep 17 00:00:00 2001
From: Randy <randypriv@gmail.com>
Date: Thu, 13 Jul 2023 16:38:22 +0800
Subject: [PATCH 6/6] remove unused code

---
 service/webhook.service.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/service/webhook.service.ts b/service/webhook.service.ts
index 4ec64c90..3a77b296 100644
--- a/service/webhook.service.ts
+++ b/service/webhook.service.ts
@@ -33,10 +33,6 @@ export class WebhookService extends RequestScopeService {
       },
     })
 
-    const approveToken = await this.tokenService.genApproveToken(comment.id)
-    const approveLink = `${resolvedConfig.host}/open/approve?token=${approveToken}`
-    console.log(approveLink)
-
     if (project.enableWebhook && !comment.moderatorId && project.webhook) {
 
       const fullComment = await prisma.comment.findUnique({