@licklist/design 0.68.1 → 0.68.2-dev.2

package/src/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.tsx

@@ -1,52 +1,52 @@
-import { createElement, useState, useEffect, useContext } from "react";
-import { useTranslation } from "react-i18next";
-import { Button, Form } from "react-bootstrap";
+import { createElement, useState, useEffect, useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button, Form } from 'react-bootstrap'
 import {
   FormProvider,
   useForm,
   FieldValues,
   useFieldArray,
-} from "react-hook-form";
-import { isEqual } from "lodash";
+} from 'react-hook-form'
+import { isEqual } from 'lodash'
 
 import {
   CUSTOM_FIELD_TYPE_DROPDOWN,
   CUSTOM_FIELD_TYPE_INPUT,
-} from "@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
-import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+} from '@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper'
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
+import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
+import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
 
 import {
   CreateSortableListItem,
   SORTABLE_ID_KEY,
   SortableItem,
-} from "../../../../sortable-list";
-import { SortableTreeItem } from "../../../../sortable-tree/SortableTreeItem";
-import { SelectFieldModal } from "../../../field/SelectFieldModal";
-import { TextInputForm } from "../../../forms/TextInputForm";
-import { DropdownForm } from "../../../forms/DropdownForm";
-import { CustomFieldSetsProps, ExtendedFieldSet } from "../../CustomFieldSets";
-import { DEFAULT_FIELDS_VALUES } from "../../../constants";
-import { CustomFieldSetsContext } from "../../contexts";
+} from '../../../../sortable-list'
+import { SortableTreeItem } from '../../../../sortable-tree/SortableTreeItem'
+import { SelectFieldModal } from '../../../field/SelectFieldModal'
+import { TextInputForm } from '../../../forms/TextInputForm'
+import { DropdownForm } from '../../../forms/DropdownForm'
+import { CustomFieldSetsProps, ExtendedFieldSet } from '../../CustomFieldSets'
+import { DEFAULT_FIELDS_VALUES } from '../../../constants'
+import { CustomFieldSetsContext } from '../../contexts'
 
-const CUSTOM_FIELDS = "customFields";
+const CUSTOM_FIELDS = 'customFields'
 
 const fieldForms = {
   [CUSTOM_FIELD_TYPE_INPUT]: TextInputForm,
   [CUSTOM_FIELD_TYPE_DROPDOWN]: DropdownForm,
-};
+}
 
 type CustomFieldSetProps = HasPermissionProp & {
-  setFieldSets: CustomFieldSetsProps["setFieldSets"];
-  item: SortableItem<ExtendedFieldSet>;
-  sortedItems: ExtendedFieldSet[];
-  index: number;
-  onFieldSetDelete: CustomFieldSetsProps["onFieldSetDelete"];
-  onFieldSetUpdate: CustomFieldSetsProps["onFieldSetUpdate"];
-  serverErrors?: ServerError;
-};
+  setFieldSets: CustomFieldSetsProps['setFieldSets']
+  item: SortableItem<ExtendedFieldSet>
+  sortedItems: ExtendedFieldSet[]
+  index: number
+  onFieldSetDelete: CustomFieldSetsProps['onFieldSetDelete']
+  onFieldSetUpdate: CustomFieldSetsProps['onFieldSetUpdate']
+  serverErrors?: ServerError
+}
 
 export const CustomFieldSet = ({
   setFieldSets,
@@ -58,15 +58,15 @@ export const CustomFieldSet = ({
   index,
   serverErrors,
 }: CustomFieldSetProps) => {
-  const { values, setValues } = useContext(CustomFieldSetsContext);
+  const { values, setValues } = useContext(CustomFieldSetsContext)
 
-  const [visibleModal, setVisibleModal] = useState(false);
-  const { t } = useTranslation("Design");
+  const [visibleModal, setVisibleModal] = useState(false)
+  const { t } = useTranslation('Design')
 
   const form = useForm({
-    mode: "onChange",
+    mode: 'onChange',
     defaultValues: values[fieldSet[SORTABLE_ID_KEY] || fieldSet.id] ?? fieldSet,
-  });
+  })
 
   const {
     register,
@@ -79,42 +79,42 @@ export const CustomFieldSet = ({
     trigger,
     getValues,
     reset,
-  } = form;
+  } = form
 
   useEffect(() => {
-    FormErrorService.handleServerErrors(serverErrors, setError);
-  }, [serverErrors, setError]);
+    FormErrorService.handleServerErrors(serverErrors, setError)
+  }, [serverErrors, setError])
 
   const { fields, append, remove } = useFieldArray({
     control,
     name: CUSTOM_FIELDS,
-  });
+  })
 
-  const [name, customFields] = watch(["name", CUSTOM_FIELDS]);
+  const [name, customFields] = watch(['name', CUSTOM_FIELDS])
 
   const onSubmit = async (formValues: ExtendedFieldSet) => {
-    const response = await onFieldSetUpdate(formValues);
+    const response = await onFieldSetUpdate(formValues)
 
-    if (!response) return;
+    if (!response) return
 
     setFieldSets((prevFieldSets) => {
-      const nextFieldSets = [...prevFieldSets];
+      const nextFieldSets = [...prevFieldSets]
 
       const nextFieldSetFormProps = {
         ...formValues,
         ...response,
-      };
+      }
 
-      nextFieldSets.splice(index, 1, nextFieldSetFormProps);
-      reset(nextFieldSetFormProps);
+      nextFieldSets.splice(index, 1, nextFieldSetFormProps)
+      reset(nextFieldSetFormProps)
 
-      return nextFieldSets;
-    });
-  };
+      return nextFieldSets
+    })
+  }
 
   const removeFieldSet = async () => {
     if (fieldSet.id !== null) {
-      await onFieldSetDelete(fieldSet);
+      await onFieldSetDelete(fieldSet)
     }
 
     setFieldSets(
@@ -123,75 +123,75 @@ export const CustomFieldSet = ({
           ? sortedItem._sortableId !== fieldSet._sortableId
           : sortedItem.id !== fieldSet.id,
       ),
-    );
-  };
+    )
+  }
 
   const resetCustomFieldsError = () => {
     if (errors[CUSTOM_FIELDS]?.type === HookFormService.manualErrorType) {
-      clearErrors(CUSTOM_FIELDS);
+      clearErrors(CUSTOM_FIELDS)
     }
-  };
+  }
 
   useEffect(() => {
-    const allValues = getValues();
+    const allValues = getValues()
 
-    const id = allValues[SORTABLE_ID_KEY] || allValues.id;
-    const valueFromContext = values[id];
+    const id = allValues[SORTABLE_ID_KEY] || allValues.id
+    const valueFromContext = values[id]
 
     if (valueFromContext && isEqual(valueFromContext, allValues)) {
-      return;
+      return
     }
 
     setValues((prevValues) => ({
       ...prevValues,
       [String(id)]: allValues,
-    }));
+    }))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [name, customFields]);
+  }, [name, customFields])
 
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onSubmit)}>
-        <Form.Control type="hidden" {...register("id")} />
+        <Form.Control type="hidden" {...register('id')} />
         <Form.Group>
-          <Form.Label>{t("fieldSetName")}</Form.Label>
+          <Form.Label>{t('fieldSetName')}</Form.Label>
           <Form.Control
             type="fieldSetName"
-            placeholder={t("fieldSetName")}
+            placeholder={t('fieldSetName')}
             isInvalid={!!errors.name}
-            {...register("name", {
+            {...register('name', {
               required: true,
               validate: () => {
                 if (customFields.length !== 0) {
-                  resetCustomFieldsError();
+                  resetCustomFieldsError()
                 } else {
                   setError(CUSTOM_FIELDS, {
                     type: HookFormService.manualErrorType,
-                    message: t("Validation:fieldMinNumber", {
-                      attribute: t("customField"),
+                    message: t('Validation:fieldMinNumber', {
+                      attribute: t('customField'),
                       min: 1,
                     }),
-                  });
+                  })
                 }
-                return true;
+                return true
               },
             })}
           />
 
           <Form.Control.Feedback type="invalid">
-            {HookFormService.hasError(errors.name, "required") &&
-              t("Validation:fieldRequired", {
-                attribute: t("fieldSetName"),
+            {HookFormService.hasError(errors.name, 'required') &&
+              t('Validation:fieldRequired', {
+                attribute: t('fieldSetName'),
               })}
           </Form.Control.Feedback>
         </Form.Group>
 
         {fields?.map((field: FieldValues, i) => {
-          const fieldId = field[SORTABLE_ID_KEY] ?? field.id;
-          const Component = fieldForms[field.type];
+          const fieldId = field[SORTABLE_ID_KEY] ?? field.id
+          const Component = fieldForms[field.type]
 
           if (!Component) {
-            return null;
+            return null
           }
 
           return (
@@ -207,20 +207,20 @@ export const CustomFieldSet = ({
                 name: field.name,
                 isRequired: field.isRequired,
                 onRemove: () => {
-                  remove(i);
-                  trigger();
+                  remove(i)
+                  trigger()
                 },
                 hasPermission,
                 id: field.id,
               })}
             />
-          );
+          )
         })}
 
         {hasPermission && (
           <>
             <CreateSortableListItem
-              title={t("addField")}
+              title={t('addField')}
               onClick={() => setVisibleModal(true)}
             />
             <div className="manual-form-error">
@@ -232,10 +232,10 @@ export const CustomFieldSet = ({
                 disabled={Object.keys(errors).length > 0}
                 type="submit"
               >
-                {t("save")}
+                {t('save')}
               </Button>
               <Button variant="danger" onClick={removeFieldSet}>
-                {t("delete")}
+                {t('delete')}
               </Button>
             </div>
           </>
@@ -245,10 +245,10 @@ export const CustomFieldSet = ({
         isVisible={visibleModal}
         onHide={() => setVisibleModal(false)}
         onFieldSelect={(fieldType) => {
-          append(DEFAULT_FIELDS_VALUES()[fieldType]);
-          resetCustomFieldsError();
+          append(DEFAULT_FIELDS_VALUES()[fieldType])
+          resetCustomFieldsError()
         }}
       />
     </FormProvider>
-  );
-};
+  )
+}

package/src/custom-fields/field-set/components/CustomFieldSet/index.ts

@@ -1 +1 @@
-export * from "./CustomFieldSet";
+export * from './CustomFieldSet'

package/src/custom-fields/field-set/components/index.ts

@@ -1 +1 @@
-export * from "./CustomFieldSet";
+export * from './CustomFieldSet'

package/src/custom-fields/field-set/contexts/index.ts

@@ -1 +1 @@
-export * from "./useCustomFieldSets";
+export * from './useCustomFieldSets'

package/src/custom-fields/field-set/contexts/useCustomFieldSets.ts

@@ -1,15 +1,15 @@
-import { createContext } from "react";
-import { ExtendedFieldSet } from "../CustomFieldSets";
+import { createContext } from 'react'
+import { ExtendedFieldSet } from '../CustomFieldSets'
 
-export type ValuesType = { [key: string]: ExtendedFieldSet };
+export type ValuesType = { [key: string]: ExtendedFieldSet }
 
 export type CustomFieldSetsContextProps = {
-  values: ValuesType;
-  setValues: (value: React.SetStateAction<ValuesType>) => void;
-};
+  values: ValuesType
+  setValues: (value: React.SetStateAction<ValuesType>) => void
+}
 
 export const CustomFieldSetsContext =
   createContext<CustomFieldSetsContextProps>({
     values: {},
     setValues: () => {},
-  });
+  })

package/src/custom-fields/field-set/providers/CustomFieldSetsProvider.tsx

@@ -1,12 +1,12 @@
-import { FC, useState } from "react";
-import { CustomFieldSetsContext, ValuesType } from "../contexts";
+import { FC, useState } from 'react'
+import { CustomFieldSetsContext, ValuesType } from '../contexts'
 
 export const CustomFieldSetsProvider: FC = ({ children }) => {
-  const [values, setValues] = useState<ValuesType>({});
+  const [values, setValues] = useState<ValuesType>({})
 
   return (
     <CustomFieldSetsContext.Provider value={{ values, setValues }}>
       {children}
     </CustomFieldSetsContext.Provider>
-  );
-};
+  )
+}

package/src/custom-fields/field-set/providers/index.ts

@@ -1 +1 @@
-export * from "./CustomFieldSetsProvider";
+export * from './CustomFieldSetsProvider'

package/src/custom-fields/forms/DropdownForm.tsx

@@ -1,29 +1,29 @@
-import { Button, Form, FormLabel } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
+import { Button, Form, FormLabel } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
 import {
   Path,
   useFieldArray,
   useFormContext,
   FieldValues,
   FieldArray,
-} from "react-hook-form";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
-import { Option } from "@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper";
-import { FaPlus, FaTrashAlt } from "react-icons/fa";
+} from 'react-hook-form'
+import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
+import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
+import { FieldNamePrefixPath } from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { Option } from '@licklist/core/dist/DataMapper/Order/CustomFieldDataMapper'
+import { FaPlus, FaTrashAlt } from 'react-icons/fa'
 
 interface DropdownFormProps<T>
   extends FieldNamePrefixPath<T>,
     HasPermissionProp {
-  onRemove: () => void;
-  fieldIndex: number;
-  fieldSetId: number;
-  name: string;
-  isRequired: boolean;
-  fieldType: any;
-  options: any[];
-  id: number | null;
+  onRemove: () => void
+  fieldIndex: number
+  fieldSetId: number
+  name: string
+  isRequired: boolean
+  fieldType: any
+  options: any[]
+  id: number | null
 }
 
 export function DropdownForm<T>({
@@ -45,24 +45,24 @@ export function DropdownForm<T>({
     watch,
     setError,
     setValue,
-  } = useFormContext();
-  const { t } = useTranslation(["Design", "Validation"]);
+  } = useFormContext()
+  const { t } = useTranslation(['Design', 'Validation'])
 
-  const fieldName = `${fieldSetId}.${fieldIndex}.options` as Path<T>;
-  const currentFormOptions: Option[] = watch(fieldName);
+  const fieldName = `${fieldSetId}.${fieldIndex}.options` as Path<T>
+  const currentFormOptions: Option[] = watch(fieldName)
 
   const { fields, append, remove } = useFieldArray({
     control,
     name: fieldName,
-  });
+  })
 
-  const optionErrors = errors?.[fieldSetId]?.[fieldIndex]?.options;
+  const optionErrors = errors?.[fieldSetId]?.[fieldIndex]?.options
 
   const resetOptionsError = () => {
     if (optionErrors?.type === HookFormService.manualErrorType) {
-      clearErrors(fieldName);
+      clearErrors(fieldName)
     }
-  };
+  }
 
   return (
     <>
@@ -73,11 +73,11 @@ export function DropdownForm<T>({
       />
 
       <Form.Group>
-        <Form.Label>{t("Design:fieldName")}</Form.Label>
+        <Form.Label>{t('Design:fieldName')}</Form.Label>
         <Form.Control
           type="text"
           defaultValue={name}
-          placeholder={t("Design:fieldName")}
+          placeholder={t('Design:fieldName')}
           isInvalid={errors?.[fieldSetId]?.[fieldIndex]?.name}
           {...register(`${fieldSetId}.${fieldIndex}.name` as Path<T>, {
             required: true,
@@ -85,26 +85,26 @@ export function DropdownForm<T>({
               if (!fields.length) {
                 setError(fieldName, {
                   type: HookFormService.manualErrorType,
-                  message: t("Validation:fieldMinNumber", {
-                    attribute: t("dropdownOptions"),
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('dropdownOptions'),
                     min: 1,
                   }),
-                });
+                })
               } else {
-                resetOptionsError();
+                resetOptionsError()
               }
 
-              return true;
+              return true
             },
           })}
         />
         <Form.Control.Feedback type="invalid">
           {HookFormService.hasError(
             errors?.[fieldSetId]?.[fieldIndex]?.name,
-            "required",
+            'required',
           ) &&
-            t("Validation:fieldRequired", {
-              attribute: t("Design:fieldName"),
+            t('Validation:fieldRequired', {
+              attribute: t('Design:fieldName'),
             })}
         </Form.Control.Feedback>
       </Form.Group>
@@ -121,79 +121,74 @@ export function DropdownForm<T>({
           {...register(`${fieldSetId}.${fieldIndex}.type` as Path<T>)}
         />
       </Form.Group>
-      <FormLabel>{t("Design:dropdownOptions")}</FormLabel>
+      <FormLabel>{t('Design:dropdownOptions')}</FormLabel>
       <div className="w-100">
-        {fields?.map((field: FieldValues, i) => {
-          return (
-            <div key={field.id} className="dropdown-option">
-              <Form.Group className="input">
-                <Form.Control
-                  type="text"
-                  placeholder={t("Design:title")}
-                  isInvalid={optionErrors?.[i]?.title}
-                  {...register(
-                    `${fieldSetId}.${fieldIndex}.options.${i}.title` as Path<T>,
-                    {
-                      required: true,
-                      validate: (title) => {
-                        const allOptions = [...currentFormOptions];
-                        allOptions.splice(i, 1);
+        {fields?.map((field: FieldValues, i) => (
+          <div key={field.id} className="dropdown-option">
+            <Form.Group className="input">
+              <Form.Control
+                type="text"
+                placeholder={t('Design:title')}
+                isInvalid={optionErrors?.[i]?.title}
+                {...register(
+                  `${fieldSetId}.${fieldIndex}.options.${i}.title` as Path<T>,
+                  {
+                    required: true,
+                    validate: (title) => {
+                      const allOptions = [...currentFormOptions]
+                      allOptions.splice(i, 1)
 
-                        const sameValueElement = allOptions.find(
-                          ({ title: optionTitle }: Option) =>
-                            title === optionTitle,
-                        );
+                      const sameValueElement = allOptions.find(
+                        ({ title: optionTitle }: Option) =>
+                          title === optionTitle,
+                      )
 
-                        return !sameValueElement;
-                      },
+                      return !sameValueElement
                     },
-                  )}
-                  onChange={({ target: { value: nextValue } }) => {
-                    setValue(
-                      `${fieldSetId}.${fieldIndex}.options.${i}.title`,
-                      nextValue,
-                    );
-                    setValue(
-                      `${fieldSetId}.${fieldIndex}.options.${i}.value`,
-                      nextValue,
-                    );
-                  }}
-                />
-                <Form.Control.Feedback type="invalid">
-                  {HookFormService.hasError(
-                    errors?.[fieldSetId]?.[fieldIndex]?.options?.[i]?.title,
-                    "validate",
-                  ) &&
-                    t("Validation:fieldMustBeUnique", {
-                      attribute: t("Design:title"),
-                    })}
-                </Form.Control.Feedback>
-              </Form.Group>
-              <Form.Group>
-                <button
-                  type="button"
-                  className="btn"
-                  onClick={() => {
-                    remove(i);
-                    trigger();
-                  }}
-                >
-                  <FaTrashAlt size={20} />
-                </button>
-              </Form.Group>
-            </div>
-          );
-        })}
+                  },
+                )}
+                onChange={({ target: { value: nextValue } }) => {
+                  setValue(
+                    `${fieldSetId}.${fieldIndex}.options.${i}.title`,
+                    nextValue,
+                  )
+                  setValue(
+                    `${fieldSetId}.${fieldIndex}.options.${i}.value`,
+                    nextValue,
+                  )
+                }}
+              />
+              <Form.Control.Feedback type="invalid">
+                {HookFormService.hasError(
+                  errors?.[fieldSetId]?.[fieldIndex]?.options?.[i]?.title,
+                  'validate',
+                ) &&
+                  t('Validation:fieldMustBeUnique', {
+                    attribute: t('Design:title'),
+                  })}
+              </Form.Control.Feedback>
+            </Form.Group>
+            <Form.Group>
+              <button
+                type="button"
+                className="btn"
+                onClick={() => {
+                  remove(i)
+                  trigger()
+                }}
+              >
+                <FaTrashAlt size={20} />
+              </button>
+            </Form.Group>
+          </div>
+        ))}
         <Button
           className="rounded-circle mb-5 d-flex"
           size="sm"
           onClick={() => {
-            append({ title: "", value: "" } as FieldArray<
-              FieldValues,
-              Path<T>
-            >);
+            append({ title: '', value: '' } as FieldArray<FieldValues, Path<T>>)
 
-            resetOptionsError();
+            resetOptionsError()
           }}
         >
           <FaPlus size={18} />
@@ -204,9 +199,9 @@ export function DropdownForm<T>({
       </div>
       {hasPermission && (
         <Button variant="danger" onClick={onRemove}>
-          {t("Design:delete")}
+          {t('Design:delete')}
         </Button>
       )}
     </>
-  );
+  )
 }