@griddo/ax 11.2.12 → 11.3.0

package/src/modules/Forms/FormCategoriesList/CategoryPanel/index.tsx

@@ -28,6 +28,7 @@ const CategoryPanel = (props: IProps): JSX.Element => {
 
     if (isCreated) {
       toggleModal();
+      setForm(initState);
     }
   };
 

package/src/modules/Forms/FormCategoriesList/index.tsx

@@ -5,7 +5,7 @@ import { DragDropContext, Droppable, Draggable, DropResult, BeforeCapture } from
 
 import { formsActions } from "@ax/containers/Forms";
 import { IRootState, FormCategory, FormCategoriesOrderParams } from "@ax/types";
-import { useBulkSelection, useModal, useToast } from "@ax/hooks";
+import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
 import { MainWrapper, TableList, ErrorToast, Toast, EmptyState, SearchTagsBar } from "@ax/components";
 import { getSchemaFormCategories } from "@ax/helpers";
 
@@ -18,7 +18,7 @@ import FormsMenu from "../FormsMenu";
 import * as S from "./style";
 
 const FormCategoriesList = (props: IProps): JSX.Element => {
-  const { categories, currenSiteID, getFormCategories, deleteFormCategory, orderFormCategory } = props;
+  const { categories, currentSiteID, getFormCategories, deleteFormCategory, orderFormCategory } = props;
 
   const schemaCategories = getSchemaFormCategories();
   const { cat: urlCategory } = useParams<{ cat: string }>();
@@ -28,6 +28,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
       ? schemaCategories[0].value
       : urlCategory;
   const categoryLabel = schemaCategories.find((cat) => cat.value === category)?.label;
+  const isSiteView = !!currentSiteID;
 
   const [isScrolling, setIsScrolling] = useState(false);
   const [draggingId, setDraggingId] = useState<number | null>(null);
@@ -36,6 +37,16 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const tableRef = useRef<HTMLDivElement>(null);
+  const isSearching = searchQuery.length > 0;
+
+  const createFormCategoryPermission = isSiteView
+    ? "forms.createFormsCategories"
+    : "global.forms.createFormsCategories";
+  const deleteFormCategoryPermission = isSiteView
+    ? "forms.deleteFormsCategories"
+    : "global.forms.deleteFormsCategories";
+  const isAllowedToCreateFormCategory = usePermission(createFormCategoryPermission);
+  const isAllowedToDeleteFormCategory = usePermission(deleteFormCategoryPermission);
 
   const catIds = categories.map((category) => category.id);
   const totalItems = categories.length;
@@ -60,10 +71,12 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [category]);
 
-  const rightButtonProps = {
-    label: "New",
-    action: toggleModal,
-  };
+  const rightButtonProps = isAllowedToCreateFormCategory
+    ? {
+        label: "New",
+        action: toggleModal,
+      }
+    : undefined;
 
   const bulkDelete = async () => {
     const deleted = await deleteFormCategory(selectedItems.all, category);
@@ -81,13 +94,15 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
     message: toastState,
   };
 
-  const bulkActions = [
-    {
-      icon: "delete",
-      text: "delete",
-      action: toggleDeleteModal,
-    },
-  ];
+  const bulkActions = isAllowedToDeleteFormCategory
+    ? [
+        {
+          icon: "delete",
+          text: "delete",
+          action: toggleDeleteModal,
+        },
+      ]
+    : [];
 
   const TableHeader = (
     <BulkHeader
@@ -118,6 +133,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
               hoverCheck={checkState.hoverCheck}
               isDragging={isDragging}
               provided={provided}
+              isSiteView={isSiteView}
             />
           )}
         </Draggable>
@@ -139,7 +155,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
       id: parseInt(result.draggableId),
       categoryType: category,
       position: newPosition,
-      relatedSite: currenSiteID,
+      relatedSite: currentSiteID,
     };
 
     await orderFormCategory(params);
@@ -150,12 +166,20 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
   const onBeforeCapture = (start: BeforeCapture) => setDraggingId(parseInt(start.draggableId));
 
   const isEmpty = totalItems === 0;
-  const emptyStateProps = {
-    message: "To start using categories in your forms, create as many categories as you need.",
-    button: "New Category",
+  const emptyProps = {
+    message: isAllowedToCreateFormCategory
+      ? "To start using categories in your forms, create as many categories as you need."
+      : "",
+    button: isAllowedToCreateFormCategory ? "New Category" : "",
     action: toggleModal,
   };
 
+  const emptySearchStateProps = {
+    icon: "search",
+    title: "Oh! No Results Found",
+    message: "We couldn’t find what you are looking for. Please, try another search.",
+  };
+
   const mainDeleteModalAction = {
     title: "Yes, delete it",
     onClick: bulkDelete,
@@ -182,7 +206,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
             </S.SearchTags>
             {isEmpty ? (
               <S.EmptyWrapper>
-                <EmptyState {...emptyStateProps} />
+                {isSearching ? <EmptyState {...emptySearchStateProps} /> : <EmptyState {...emptyProps} />}
               </S.EmptyWrapper>
             ) : (
               <>
@@ -204,7 +228,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
           </TableList>
         </S.TableWrapper>
       </S.CategoryListWrapper>
-      {isOpen && <CategoryPanel isOpen={isOpen} toggleModal={toggleModal} toggleToast={toggleToast} type={category} />}
+      <CategoryPanel isOpen={isOpen} toggleModal={toggleModal} toggleToast={toggleToast} type={category} />
       {isDeleteOpen && (
         <DeleteModal
           isOpen={isDeleteOpen}
@@ -220,7 +244,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 
 const mapStateToProps = (state: IRootState) => ({
   categories: state.forms.currentFormCategories,
-  currenSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
 });
 
 interface IDispatchProps {
@@ -231,7 +255,7 @@ interface IDispatchProps {
 
 interface ICategoriesProps {
   categories: FormCategory[];
-  currenSiteID: number | null;
+  currentSiteID: number | null;
 }
 
 type IProps = ICategoriesProps & IDispatchProps;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/ConnectedField/Field/index.tsx

@@ -25,6 +25,7 @@ const Field = (props: IFieldProps): JSX.Element => {
     template,
     setHistoryPush,
     languages,
+    deleteError,
   } = props;
 
   const isGroup = field.type === "FieldGroup";
@@ -65,6 +66,7 @@ const Field = (props: IFieldProps): JSX.Element => {
       template={template}
       setHistoryPush={setHistoryPush}
       languages={languages}
+      deleteError={deleteError}
     />
   );
 };
@@ -90,6 +92,7 @@ export interface IFieldProps {
   template: any;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   languages?: ILanguage[];
+  deleteError(error: IErrorItem): void;
 }
 
 export default Field;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/ConnectedField/TemplateManager/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IErrorItem, ISchemaField, ISite } from "@ax/types";
+import { IErrorItem, ISchema, ISchemaField, ISite } from "@ax/types";
 import Field from "../Field";
 
 import * as S from "./style";
@@ -22,10 +22,11 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     moduleCopy,
     setHistoryPush,
     lang,
+    deleteError,
   } = props;
 
   const isConfig = selectedTab === "config";
-  const templateFields = template[selectedTab];
+  const templateFields: ISchemaField[] = template[selectedTab];
   const templateContent = selectedContent.template;
 
   const getFieldProps = (field: ISchemaField) => {
@@ -49,8 +50,8 @@ export const TemplateManager = (props: IProps): JSX.Element => {
       {isConfig && templateFields && <S.Title>Template Options</S.Title>}
       {templateFields &&
         templateFields
-          .filter((templateField: ISchemaField) => !templateField.hidden)
-          .map((templateField: ISchemaField, index: number) => {
+          .filter((templateField) => !templateField.hidden)
+          .map((templateField, index: number) => {
             const { whiteList, key, handleUpdate, error, readonly, disabledField } = getFieldProps(templateField);
 
             return (
@@ -74,6 +75,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
                 setHistoryPush={setHistoryPush}
                 lang={lang}
                 readonly={readonly}
+                deleteError={deleteError}
               />
             );
           })}
@@ -82,9 +84,9 @@ export const TemplateManager = (props: IProps): JSX.Element => {
 };
 
 interface IProps {
-  template: any;
+  template: ISchema;
   updateValue: (key: string, value: any, templateID?: number) => void;
-  goTo: any;
+  goTo(editorID: number): void;
   objKey: string;
   pages: any;
   selectedTab: string;
@@ -97,6 +99,7 @@ interface IProps {
   moduleCopy: { date: string; element: Record<string, unknown> } | null;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   lang: number;
+  deleteError(error: IErrorItem): void;
 }
 
 export default TemplateManager;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/ConnectedField/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { getFormTemplate } from "@ax/helpers";
-import { IRootState } from "@ax/types";
+import { IErrorItem, IRootState } from "@ax/types";
 import { formsActions } from "@ax/containers/Forms";
 
 import TemplateManager from "./TemplateManager";
@@ -29,20 +29,35 @@ const ConnectedField = (props: any) => {
     setHistoryPush,
     languages,
     isReadOnly,
+    setErrors,
   } = props;
 
   const isTemplate = field.type === "template" || field.type === "formTemplate";
   const isFieldReadOnly = isReadOnly || field.readonly;
   const isDisabled = isFieldReadOnly || field.disabled;
-  const error = errors.find((err: any) => err.editorID === selectedEditorID && err.key === objKey);
+  const error: IErrorItem = errors.find((err: IErrorItem) => err.editorID === selectedEditorID && err.key === objKey);
 
   const updateValue = (key: string, value: any, templateID?: number) => {
     const editorID = templateID ? templateID : selectedEditorID;
     updateFormContent(editorID, key, value);
   };
 
+  const deleteError = (error: IErrorItem) => {
+    const updatedErrors: IErrorItem[] = errors.filter(
+      (err: IErrorItem) => !(error.editorID === err.editorID && error.key === err.key)
+    );
+    setErrors(updatedErrors);
+  };
+
   if (isTemplate) {
-    const template = getFormTemplate(selectedContent[field.key].templateType);
+    const templateType: string | undefined = selectedContent[field.key]?.templateType;
+    const template = templateType ? getFormTemplate(templateType) : null;
+
+    if (!template) {
+      actions.setNotificationAction &&
+        actions.setNotificationAction({ text: "Form template schema not found.", type: "error" });
+      return <></>;
+    }
 
     return (
       <TemplateManager
@@ -61,6 +76,7 @@ const ConnectedField = (props: any) => {
         moduleCopy={moduleCopy}
         setHistoryPush={setHistoryPush}
         lang={lang.id}
+        deleteError={deleteError}
       />
     );
   }
@@ -86,6 +102,7 @@ const ConnectedField = (props: any) => {
       template={template}
       setHistoryPush={setHistoryPush}
       languages={languages}
+      deleteError={deleteError}
     />
   );
 };
@@ -96,7 +113,6 @@ const mapStateToProps = (state: IRootState) => ({
   pages: state.sites.currentSitePages,
   site: state.sites.currentSiteInfo,
   lang: state.app.lang,
-  errors: state.pageEditor.errors,
   moduleCopy: state.forms.moduleCopy,
   template: state.forms.template,
   languages: state.sites.currentSiteLanguages,

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ISchema, ISchemaTab, ISchemaField } from "@ax/types";
+import { ISchema, ISchemaTab, ISchemaField, IErrorItem } from "@ax/types";
 import { Tabs } from "@ax/components";
 
 import ConnectedField from "./ConnectedField";
@@ -8,7 +8,18 @@ import ConnectedField from "./ConnectedField";
 import * as S from "./style";
 
 export const Form = (props: IFormProps): JSX.Element => {
-  const { schema, selectedTab, actions, isGlobal, theme, headerHeight, setSelectedTab, setHistoryPush } = props;
+  const {
+    schema,
+    selectedTab,
+    actions,
+    isGlobal,
+    theme,
+    headerHeight,
+    errors,
+    setSelectedTab,
+    setHistoryPush,
+    setErrors,
+  } = props;
 
   const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title.toLowerCase() === selectedTab);
   const setTab = (tab: string) => setSelectedTab(tab);
@@ -32,6 +43,8 @@ export const Form = (props: IFormProps): JSX.Element => {
         isGlobal={isGlobal}
         theme={theme}
         setHistoryPush={setHistoryPush}
+        errors={errors}
+        setErrors={setErrors}
       />
     );
   };
@@ -71,6 +84,8 @@ export interface IFormProps {
   theme: string;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
   headerHeight: number;
+  errors: IErrorItem[];
+  setErrors(errors: IErrorItem[]): void;
 }
 
 export default Form;

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 
 import { isEmptyObj } from "@ax/helpers";
 import { Loading } from "@ax/components";
-import { IBreadcrumbItem, ISchema } from "@ax/types";
+import { IBreadcrumbItem, IErrorItem, ISchema } from "@ax/types";
 
 import Form from "./Form";
 import Header from "./Header";
@@ -23,6 +23,8 @@ const FormConfigPanel = (props: IStateProps): JSX.Element => {
     lastElementAddedId,
     breadcrumb,
     selectedParent,
+    errors,
+    setErrors,
   } = props;
 
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -62,6 +64,8 @@ const FormConfigPanel = (props: IStateProps): JSX.Element => {
         theme={theme}
         setHistoryPush={setHistoryPush}
         headerHeight={headerHeight}
+        errors={errors}
+        setErrors={setErrors}
       />
     </S.Wrapper>
   );
@@ -81,6 +85,8 @@ export interface IStateProps {
   lastElementAddedId?: null | number;
   breadcrumb: IBreadcrumbItem[];
   selectedParent: Record<string, unknown> | null;
+  errors: IErrorItem[];
+  setErrors(errors: IErrorItem[]): void;
 }
 
 export default FormConfigPanel;

package/src/modules/Forms/FormEditor/Editor/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import { ResizePanel } from "@ax/components";
-import { IBreadcrumbItem, IModule, INotification, IRootState, ISchema } from "@ax/types";
+import { IBreadcrumbItem, IErrorItem, IModule, INotification, IRootState, ISchema } from "@ax/types";
 import { formsActions } from "@ax/containers/Forms";
 import PageBrowser from "../PageBrowser";
 import FormConfigPanel from "./FormConfigPanel";
@@ -16,6 +16,8 @@ const Editor = (props: IProps) => {
     selectedTab,
     breadcrumb,
     selectedParent,
+    errors,
+    setErrors,
     setNotification,
     setSelectedTab,
     setSelectedContent,
@@ -52,6 +54,8 @@ const Editor = (props: IProps) => {
           setSelectedContent={setSelectedContent}
           breadcrumb={breadcrumb}
           selectedParent={selectedParent}
+          errors={errors}
+          setErrors={setErrors}
         />
       }
       full={true}
@@ -79,7 +83,9 @@ interface IPageBrowserDispatchProps {
   pasteModule: (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>;
   isGlobal: boolean;
   theme: string;
-  browserRef: any;
+  browserRef: React.RefObject<HTMLDivElement>;
+  errors: IErrorItem[];
+  setErrors(errors: IErrorItem[]): void;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/Forms/FormEditor/PageBrowser/index.tsx

@@ -6,6 +6,8 @@ import { formsActions } from "@ax/containers/Forms";
 import { Browser } from "@ax/components";
 import { ILanguage, IRootState, ISchema, ISite, ISocialState } from "@ax/types";
 
+import * as S from "./style";
+
 const PageBrowser = (props: IProps) => {
   const {
     socials,
@@ -33,22 +35,24 @@ const PageBrowser = (props: IProps) => {
   };
 
   return (
-    <Browser
-      isPage={true}
-      content={content}
-      socials={socials}
-      url={""}
-      theme={theme}
-      cloudinaryName={cloudinaryName}
-      siteLangs={globalLangs}
-      disabled={isReadOnly}
-      siteID={siteID}
-      isPreview={isPreview}
-      showIframe={true}
-      browserRef={browserRef}
-      actions={actions}
-      editorType="form"
-    />
+    <S.Wrapper>
+      <Browser
+        isPage={true}
+        content={content}
+        socials={socials}
+        url={""}
+        theme={theme}
+        cloudinaryName={cloudinaryName}
+        siteLangs={globalLangs}
+        disabled={isReadOnly}
+        siteID={siteID}
+        isPreview={isPreview}
+        showIframe={true}
+        browserRef={browserRef}
+        actions={actions}
+        editorType="form"
+      />
+    </S.Wrapper>
   );
 };
 

package/src/modules/Forms/FormEditor/PageBrowser/style.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  padding-left: ${(p) => p.theme.spacing.s};
+`;
+
+export { Wrapper };