fix: 🐛 migrate form to ui package

gmpetrov · Apr 5, 2024 · 14fa867 · 14fa867
1 parent 388cc78
commit 14fa867
Show file tree

Hide file tree

Showing 19 changed files with 1,288 additions and 1,045 deletions.
diff --git a/apps/dashboard/components/BlablaFormEditor/FieldsInput.tsx b/apps/dashboard/components/BlablaFormEditor/FieldsInput.tsx
@@ -30,9 +30,9 @@ import {
 
 import { CreateFormSchema } from '@chaindesk/lib/types/dtos';
 import Input from '@chaindesk/ui/Input';
+import { FieldType } from '@chaindesk/ui/types/form';
 
 import { SortableList } from '../dnd/SortableList';
-import { FieldType } from '../TraditionalForm';
 
 import { forceSubmit } from './utils';
 
@@ -45,6 +45,7 @@ const fieldTypes = [
   'email',
   'phoneNumber',
   'text',
+  'number',
   'textArea',
   'select',
   'file',
@@ -313,69 +314,6 @@ function FieldsInput({ type = 'traditional' }: Props) {
           )}
         />
       )}
-      {type == formType.conversational &&
-        fieldsValues?.map((field, index) => (
-          <div key={index}>
-            <Stack
-              sx={{ width: '100%' }}
-              direction="row"
-              gap={1}
-              alignItems={'start'}
-            >
-              <Controller
-                name={`draftConfig.fields.${index}.type` as const}
-                render={({
-                  field: { onChange, onBlur, value, name, ref },
-                  fieldState: { invalid, isTouched, isDirty, error },
-                  formState,
-                }) => (
-                  <Select
-                    size="sm"
-                    value={value}
-                    onChange={(_, value) => {
-                      onChange(value);
-                      forceSubmit();
-                    }}
-                    sx={{ minWidth: '80px' }}
-                  >
-                    <Option value="text">text</Option>
-                    <Option value="multiple_choice">mutliple choice</Option>
-                  </Select>
-                )}
-              ></Controller>
-              <Input
-                control={methods.control}
-                sx={{ width: '100%' }}
-                size="sm"
-                key={field.id}
-                defaultValue={field.name}
-                placeholder="e.g. email"
-                {...methods.register(
-                  `draftConfig.fields.${index}.name` as const
-                )}
-                endDecorator={
-                  <IconButton
-                    onClick={() => {
-                      remove(index);
-                      forceSubmit();
-                    }}
-                  >
-                    <CloseIcon fontSize="sm" />
-                  </IconButton>
-                }
-              />
-            </Stack>
-
-            {fieldsValues?.[index]?.type === 'multiple_choice' && (
-              <Stack sx={{ ml: 'auto' }}>
-                <Choices<CreateFormSchema>
-                  actionLabel="Add Choice"
-                  name={`draftConfig.fields.${index}.choices` as any}
-                />
-              </Stack>
-            )}
-          </div>
-        ))}
 
       <Button
         size="sm"

diff --git a/apps/dashboard/components/BlablaFormEditor/index.tsx b/apps/dashboard/components/BlablaFormEditor/index.tsx
@@ -144,78 +144,6 @@ function Form({ formId }: Props) {
               transition: 'all 0.2s ease',
             }}
           >
-            {/* <Accordion
-              expanded={state.currentAccordionIndex === 0}
-              onChange={(event, expanded) => {
-                setState({
-                  currentAccordionIndex: expanded ? 0 : null,
-                });
-              }}
-            >
-              <AccordionSummary>
-                <Typography startDecorator={<LooksOneRoundedIcon />}>
-                  Overview
-                </Typography>
-              </AccordionSummary>
-              <AccordionDetails>
-                <Stack spacing={1}>
-                  <FormControl>
-                    <FormLabel>Form Type</FormLabel>
-                    <Select
-                      defaultValue={getFormData.data?.type}
-                      {...methods.register('type')}
-                      onChange={(_, value) => {
-                        if (value) {
-                          methods.setValue('type', value as any);
-                          // Retrocompatibility
-                          const fields: CreateFormSchema['draftConfig']['fields'] =
-                            draftConfig?.fields.map((field) => {
-                              if (
-                                field.type === 'multiple_choice' &&
-                                value == 'traditional'
-                              ) {
-                                return {
-                                  ...field,
-                                  type: 'select',
-                                  options: field.choices,
-                                };
-                              } else if (
-                                field.type === 'select' &&
-                                value == 'conversational'
-                              ) {
-                                return {
-                                  ...field,
-                                  type: 'multiple_choice',
-                                  choices: field.options,
-                                };
-                              }
-                              return { ...field, type: 'text' };
-                            });
-
-                          if (fields?.length > 0) {
-                            methods.setValue('draftConfig.fields', fields);
-                          }
-
-                          forceSubmit();
-                        }
-                      }}
-                    >
-                      <Option value="conversational">Conversational</Option>
-                      <Option value="traditional">Traditional</Option>
-                    </Select>
-                  </FormControl>
-                  <FormControl>
-                    <FormLabel>Overview</FormLabel>
-                    <Textarea
-                      minRows={4}
-                      // maxRows={4}
-                      {...methods.register('draftConfig.overview')}
-                    />
-                  </FormControl>
-                </Stack>
-              </AccordionDetails>
-            </Accordion> */}
-
             <Accordion
               expanded={state.currentAccordionIndex === 0}
               onChange={(event, expanded) => {
@@ -248,18 +176,6 @@ function Form({ formId }: Props) {
                       )}
                     />
                   </FormControl>
-
-                  {type === 'conversational' && (
-                    <FormControl>
-                      <FormLabel>Call to action</FormLabel>
-                      <Input
-                        control={methods.control}
-                        {...methods.register(
-                          'draftConfig.startScreen.cta.label'
-                        )}
-                      />
-                    </FormControl>
-                  )}
                 </Stack>
               </AccordionDetails>
             </Accordion>
@@ -466,7 +382,6 @@ function Form({ formId }: Props) {
                 webhook: draftConfig?.webhook,
                 schema: (query.data?.draftConfig as any)?.schema,
               }}
-              isInEditor
             />
           </Stack>
         </Stack>