feat(dashboard): 🛂 Limit create folder to Pro user

apps/builder/components/shared/modals/UpgradeModal./UpgradeModal.tsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react'
+import {
+  Alert,
+  AlertIcon,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+} from '@chakra-ui/react'
+import { PricingCard } from './PricingCard'
+import { ActionButton } from './ActionButton'
+import { User } from 'db'
+import { pay } from 'services/stripe'
+
+export enum LimitReached {
+  BRAND = 'Remove branding',
+  CUSTOM_DOMAIN = 'Custom domain',
+  FOLDER = 'Create folders',
+  ANALYTICS = 'Unlock analytics',
+}
+
+type UpgradeModalProps = {
+  user: User
+  type: LimitReached
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const UpgradeModal = ({
+  type,
+  user,
+  onClose,
+  isOpen,
+}: UpgradeModalProps) => {
+  const [payLoading, setPayLoading] = useState(false)
+  const [userLanguage, setUserLanguage] = useState<string>('en')
+
+  useEffect(() => {
+    setUserLanguage(navigator.language.toLowerCase())
+  }, [])
+
+  let limitLabel
+  switch (type) {
+    case LimitReached.BRAND: {
+      limitLabel = "You can't hide Typebot brand on the Basic plan"
+      break
+    }
+    case LimitReached.CUSTOM_DOMAIN: {
+      limitLabel = "You can't add your domain with the Basic plan"
+      break
+    }
+    case LimitReached.FOLDER: {
+      limitLabel = "You can't create folders with the basic plan"
+    }
+  }
+
+  const handlePayClick = async () => {
+    if (!user) return
+    setPayLoading(true)
+    await pay(user)
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Upgrade to Pro plan</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody as={Stack} spacing={6} alignItems="center">
+          {limitLabel && (
+            <Alert status="warning" rounded="md">
+              <AlertIcon />
+              {limitLabel}
+            </Alert>
+          )}
+          <PricingCard
+            data={{
+              price: userLanguage.includes('fr') ? '25€' : '$30',
+              name: 'Pro plan',
+              features: [
+                'Branding removed',
+                'View incomplete submissions',
+                'In-depth drop off analytics',
+                'Custom domains',
+                'Organize typebots in folders',
+                'Unlimited uploads',
+                'Custom Google Analytics events',
+              ],
+            }}
+            button={
+              <ActionButton onClick={handlePayClick} isLoading={payLoading}>
+                Upgrade now
+              </ActionButton>
+            }
+          />
+        </ModalBody>
+
+        <ModalFooter />
+      </ModalContent>
+    </Modal>
+  )
+}