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>
   )