feat: ⚡️ Add docs and connect Stripe

apps/builder/components/shared/buttons/UpgradeButton.tsx

@@ -0,0 +1,16 @@
+import { Button, ButtonProps, useDisclosure } from '@chakra-ui/react'
+import React from 'react'
+import { UpgradeModal } from '../modals/UpgradeModal.'
+import { LimitReached } from '../modals/UpgradeModal./UpgradeModal'
+
+type Props = { type?: LimitReached } & ButtonProps
+
+export const UpgradeButton = ({ type, ...props }: Props) => {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  return (
+    <Button colorScheme="blue" {...props} onClick={onOpen}>
+      Upgrade
+      <UpgradeModal isOpen={isOpen} onClose={onClose} type={type} />
+    </Button>
+  )
+}

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

@@ -31,10 +31,12 @@ type UpgradeModalProps = {
 export const UpgradeModal = ({ type, onClose, isOpen }: UpgradeModalProps) => {
   const { user } = useUser()
   const [payLoading, setPayLoading] = useState(false)
-  const [userLanguage, setUserLanguage] = useState<string>('en')
+  const [currency, setCurrency] = useState<'usd' | 'eur'>('usd')
 
   useEffect(() => {
-    setUserLanguage(navigator.language.toLowerCase())
+    setCurrency(
+      navigator.languages.find((l) => l.includes('fr')) ? 'eur' : 'usd'
+    )
   }, [])
 
   let limitLabel
@@ -55,7 +57,7 @@ export const UpgradeModal = ({ type, onClose, isOpen }: UpgradeModalProps) => {
   const handlePayClick = async () => {
     if (!user) return
     setPayLoading(true)
-    await pay(user)
+    await pay(user, currency)
   }
 
   return (
@@ -73,7 +75,7 @@ export const UpgradeModal = ({ type, onClose, isOpen }: UpgradeModalProps) => {
           )}
           <PricingCard
             data={{
-              price: userLanguage.includes('fr') ? '25€' : '$30',
+              price: currency === 'eur' ? '25€' : '$30',
               name: 'Pro plan',
               features: [
                 'Branding removed',