✨ Add usage-based new pricing plans

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

@@ -0,0 +1,53 @@
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalOverlay,
+  Stack,
+  Button,
+  HStack,
+} from '@chakra-ui/react'
+import { Info } from 'components/shared/Info'
+import { ChangePlanForm } from 'components/shared/ChangePlanForm'
+
+export enum LimitReached {
+  BRAND = 'remove branding',
+  CUSTOM_DOMAIN = 'add custom domain',
+  FOLDER = 'create folders',
+  FILE_INPUT = 'use file input blocks',
+}
+
+type ChangePlanModalProps = {
+  type?: LimitReached
+  isOpen: boolean
+  onClose: () => void
+}
+
+export const ChangePlanModal = ({
+  onClose,
+  isOpen,
+  type,
+}: ChangePlanModalProps) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="2xl">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalBody as={Stack} spacing="6" pt="10">
+          {type && (
+            <Info>You need to upgrade your plan in order to {type}</Info>
+          )}
+          <ChangePlanForm />
+        </ModalBody>
+
+        <ModalFooter>
+          <HStack>
+            <Button colorScheme="gray" onClick={onClose}>
+              Cancel
+            </Button>
+          </HStack>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}