refactor(♻️ Add defaults everywhere (+ settings page)):

2022-01-25 18:19:37 +01:00
parent 21448bcc8a
commit c5aaa323d1
115 changed files with 1436 additions and 720 deletions
--- a/apps/builder/components/settings/SettingsSideMenu.tsx
+++ b/apps/builder/components/settings/SettingsSideMenu.tsx
@@ -0,0 +1,103 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Heading,
+  HStack,
+  Stack,
+} from '@chakra-ui/react'
+import { ChatIcon, CodeIcon, MoreVerticalIcon } from 'assets/icons'
+import { headerHeight } from 'components/shared/TypebotHeader'
+import { useTypebot } from 'contexts/TypebotContext'
+import { GeneralSettings, Metadata, TypingEmulation } from 'models'
+import React from 'react'
+import { GeneralSettingsForm } from './GeneralSettingsForm'
+import { MetadataForm } from './MetadataForm'
+import { TypingEmulationForm } from './TypingEmulationForm'
+
+export const SettingsSideMenu = () => {
+  const { typebot, updateTypebot } = useTypebot()
+
+  const handleTypingEmulationChange = (typingEmulation: TypingEmulation) =>
+    typebot &&
+    updateTypebot({ settings: { ...typebot.settings, typingEmulation } })
+
+  const handleGeneralSettingsChange = (general: GeneralSettings) =>
+    typebot && updateTypebot({ settings: { ...typebot.settings, general } })
+
+  const handleMetadataChange = (metadata: Metadata) =>
+    typebot && updateTypebot({ settings: { ...typebot.settings, metadata } })
+
+  return (
+    <Stack
+      flex="1"
+      maxW="400px"
+      height={`calc(100vh - ${headerHeight}px)`}
+      borderRightWidth={1}
+      pt={10}
+      spacing={10}
+      overflowY="scroll"
+      pb="20"
+    >
+      <Heading fontSize="xl" textAlign="center">
+        Settings
+      </Heading>
+      <Accordion allowMultiple allowToggle>
+        <AccordionItem>
+          <AccordionButton py={6}>
+            <HStack flex="1" pl={2}>
+              <MoreVerticalIcon transform={'rotate(90deg)'} />
+              <Heading fontSize="lg">General</Heading>
+            </HStack>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} px="6">
+            {typebot && (
+              <GeneralSettingsForm
+                generalSettings={typebot.settings.general}
+                onGeneralSettingsChange={handleGeneralSettingsChange}
+              />
+            )}
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionButton py={6}>
+            <HStack flex="1" pl={2}>
+              <ChatIcon />
+              <Heading fontSize="lg">Typing emulation</Heading>
+            </HStack>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} px="6">
+            {typebot && (
+              <TypingEmulationForm
+                typingEmulation={typebot.settings.typingEmulation}
+                onUpdate={handleTypingEmulationChange}
+              />
+            )}
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <AccordionButton py={6}>
+            <HStack flex="1" pl={2}>
+              <CodeIcon />
+              <Heading fontSize="lg">Metadata</Heading>
+            </HStack>
+            <AccordionIcon />
+          </AccordionButton>
+          <AccordionPanel pb={4} px="6">
+            {typebot && (
+              <MetadataForm
+                typebotName={typebot.name}
+                metadata={typebot.settings.metadata}
+                onMetadataChange={handleMetadataChange}
+              />
+            )}
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </Stack>
+  )
+}