feat(account): ✨ Add coupon code input

apps/builder/components/account/BillingSection.tsx

@@ -1,12 +1,44 @@
-import { Stack, Heading, HStack, Button, Text } from '@chakra-ui/react'
+import {
+  Stack,
+  Heading,
+  HStack,
+  Button,
+  Text,
+  Input,
+  useToast,
+} from '@chakra-ui/react'
 import { NextChakraLink } from 'components/nextChakra/NextChakraLink'
 import { useUser } from 'contexts/UserContext'
 import { Plan } from 'db'
-import React from 'react'
+import { useRouter } from 'next/router'
+import React, { useState } from 'react'
+import { redeemCoupon } from 'services/coupons'
 import { SubscriptionTag } from './SubscriptionTag'
 
 export const BillingSection = () => {
+  const { reload } = useRouter()
+  const [isLoading, setIsLoading] = useState(false)
+
   const { user } = useUser()
+  const toast = useToast({
+    position: 'top-right',
+  })
+
+  const handleCouponCodeRedeem = async (e: React.FormEvent) => {
+    e.preventDefault()
+    const target = e.target as typeof e.target & {
+      coupon: { value: string }
+    }
+    setIsLoading(true)
+    const { data, error } = await redeemCoupon(target.coupon.value)
+    if (error) toast({ title: error.name, description: error.message })
+    else {
+      toast({ description: data?.message })
+      setTimeout(reload, 1000)
+    }
+    setIsLoading(false)
+  }
+
   return (
     <Stack direction="row" spacing="10" justifyContent={'space-between'}>
       <Heading as="h2" fontSize="xl">
@@ -25,6 +57,14 @@ export const BillingSection = () => {
         {user?.plan === Plan.FREE && (
           <Button colorScheme="blue">Upgrade</Button>
         )}
+        {user?.plan === Plan.FREE && (
+          <HStack as="form" onSubmit={handleCouponCodeRedeem}>
+            <Input name="coupon" placeholder="Coupon code..." />
+            <Button type="submit" isLoading={isLoading}>
+              Redeem
+            </Button>
+          </HStack>
+        )}
       </Stack>
     </Stack>
   )

apps/builder/pages/api/coupons/redeem.ts

@@ -0,0 +1,31 @@
+import { Prisma, User } from 'db'
+import prisma from 'libs/prisma'
+import { NextApiRequest, NextApiResponse } from 'next'
+import { getSession } from 'next-auth/react'
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === 'POST') {
+    const session = await getSession({ req })
+
+    if (!session?.user)
+      return res.status(401).json({ message: 'Not authenticated' })
+
+    const user = session.user as User
+    const { code } = JSON.parse(req.body)
+    const coupon = await prisma.coupon.findFirst({
+      where: { code, dateRedeemed: null },
+    })
+    if (!coupon) return res.status(404).send({ message: 'Coupon not found' })
+    await prisma.user.update({
+      where: { id: user.id },
+      data: coupon.userPropertiesToUpdate as Prisma.UserUncheckedUpdateInput,
+    })
+    await prisma.coupon.update({
+      where: { code },
+      data: { dateRedeemed: new Date() },
+    })
+    return res.send({ message: 'Coupon redeemed 🎊' })
+  }
+}
+
+export default handler

apps/builder/services/coupons.ts

@@ -0,0 +1,8 @@
+import { sendRequest } from 'utils'
+
+export const redeemCoupon = async (code: string) =>
+  sendRequest<{ message: string }>({
+    method: 'POST',
+    url: '/api/coupons/redeem',
+    body: { code },
+  })