@griddo/ax 1.64.9 → 1.65.1

package/src/modules/Content/PageItem/index.tsx

@@ -399,7 +399,8 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   const CategoryColumns =
     isGlobal &&
     categoryColumns.map((col: any) => {
-      const type = structuredDataContent[col.from];
+      const fromVal = col.from.includes(".") ? col.from.split(".")[1] : col.from;
+      const type = structuredDataContent && (structuredDataContent[fromVal] || structuredDataContent[col.from]);
       const categories = Array.isArray(type) && type.map((cat: any) => cat.label || cat.title);
       return (
         activeColumns.includes(col.key) && (

package/src/modules/CreatePass/index.tsx

@@ -6,7 +6,7 @@ import { isReqOk } from "@ax/helpers";
 import { global } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { usersActions } from "@ax/containers/Users";
-import { Button, FieldsBehavior } from "@ax/components";
+import { Button, FieldsBehavior, ErrorToast } from "@ax/components";
 
 import * as S from "./style";
 
@@ -55,7 +55,7 @@ const CreatePass = (props: IProps) => {
           <S.Subtitle>Welcome to Griddo</S.Subtitle>
           <S.Title>Create your password</S.Title>
         </S.Header>
-
+        <ErrorToast />
         <S.Form onSubmit={handleSubmit}>
           <FieldsBehavior
             fieldType="TextField"
@@ -64,6 +64,7 @@ const CreatePass = (props: IProps) => {
             mandatory={true}
             value={state.pass1}
             onChange={handlePass1Change}
+            validators={{ mandatory: true }}
           />
           <FieldsBehavior
             fieldType="TextField"
@@ -72,6 +73,7 @@ const CreatePass = (props: IProps) => {
             mandatory={true}
             value={state.pass2}
             onChange={handlePass2Change}
+            validators={{ isSamePass: state.pass1, mandatory: true }}
           />
           <Button type="submit" disabled={!validPasswords}>
             Create and log in

package/src/modules/GlobalEditor/index.tsx

@@ -103,7 +103,7 @@ const GlobalEditor = (props: IProps) => {
     const { deletePage } = props;
     const path = "/sites/pages";
 
-    await deletePage().then((deleted: boolean) => {
+    deletePage().then((deleted: boolean) => {
       if (deleted) {
         setRoute(path);
       }
@@ -111,68 +111,81 @@ const GlobalEditor = (props: IProps) => {
   };
 
   const publishPage = async () => {
-    const { updatePageStatus, savePage, pageID } = props;
+    const { updatePageStatus, savePage, pageID, validatePage } = props;
 
-    const publishPage = {
-      status: pageStatus.UPLOAD_PENDING,
-    };
+    const validated = await validatePage(true);
 
-    pageID
-      ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-      : await savePage(false, publishPage).then((isSaved: boolean) => {
-          if (isSaved) {
-            resetDirty();
-          }
-        });
+    if (validated) {
+      const publishPage = {
+        status: pageStatus.UPLOAD_PENDING,
+      };
+
+      pageID
+        ? updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
+        : savePage(false, publishPage).then((isSaved: boolean) => {
+            if (isSaved) {
+              resetDirty();
+            }
+          });
+    }
   };
 
   const publishChanges = async () => {
-    const { savePage } = props;
+    const { savePage, validatePage } = props;
 
-    const publishPage = {
-      status: pageStatus.UPLOAD_PENDING,
-    };
+    const validated = await validatePage(true);
 
-    await savePage(false, publishPage).then((isSaved: boolean) => {
-      if (isSaved) {
-        resetDirty();
-      }
-    });
+    if (validated) {
+      const publishPage = {
+        status: pageStatus.UPLOAD_PENDING,
+      };
+
+      savePage(false, publishPage).then((isSaved: boolean) => {
+        if (isSaved) {
+          resetDirty();
+        }
+      });
+    }
   };
 
-  const unpublishPage = async () => {
+  const unpublishPage = () => {
     const { updatePageStatus, pageID } = props;
 
-    await updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
+    updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
   };
 
-  const cancelPublishPage = async () => {
+  const cancelPublishPage = () => {
     const { updatePageStatus, pageID } = props;
 
-    await updatePageStatus([pageID], pageStatus.OFFLINE);
+    updatePageStatus([pageID], pageStatus.OFFLINE);
   };
 
-  const reviewPage = async () => {
+  const reviewPage = () => {
     const { validatePage } = props;
-    await validatePage();
+    validatePage();
   };
 
   const handlePublishDraft = async () => {
-    const { savePage } = props;
-    const isSaved = await savePage(false, null, true);
-    if (isSaved) resetDirty();
+    const { savePage, validatePage } = props;
+
+    const validated = await validatePage(true);
+
+    if (validated) {
+      const isSaved = await savePage(false, null, true);
+      if (isSaved) resetDirty();
+    }
   };
 
-  const handleDiscardDraft = async () => {
+  const handleDiscardDraft = () => {
     const { discardDraft } = props;
     resetDirty();
-    await discardDraft();
+    discardDraft();
   };
 
-  const handleDiscarChanges = async () => {
+  const handleDiscarChanges = () => {
     const { getPage, pageID } = props;
     resetDirty();
-    await getPage(pageID, true);
+    getPage(pageID, true);
   };
 
   const getPublishButton = (status: string) => {
@@ -536,7 +549,7 @@ interface IPageEditorDispatchProps {
   getPage(pageID?: number, global?: boolean): Promise<void>;
   savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
-  validatePage(): Promise<boolean>;
+  validatePage(publish?: boolean): Promise<boolean>;
   updatePageStatus(id: number[], status: string): Promise<boolean>;
   setHistoryPush(path: string, isEditor: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;

package/src/modules/Navigation/Menus/List/Table/Item/index.tsx

@@ -51,6 +51,7 @@ const Item = (props: IItemProps): JSX.Element => {
     updateFormValue({ itemLink: item.url });
     updateFormValue({ itemLabel: item.label });
     updateFormValue({ itemAuxText: item.auxText });
+    updateFormValue({ itemImage: item.image });
     updateFormValue({ type });
     updateFormValue({ headerStyle });
     updateFormValue({ footerStyle });

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/index.tsx

@@ -5,17 +5,18 @@ import { menuActions } from "@ax/containers/Navigation";
 import { sitesActions } from "@ax/containers/Sites";
 import { FieldsBehavior } from "@ax/components";
 
-import { IRootState, IMenuForm } from "@ax/types";
+import { IRootState, IMenuForm, IImage } from "@ax/types";
 
 const Form = (props: IProps): JSX.Element => {
-  const { form, updateForm, toggleSecondaryPanel } = props;
+  const { form, updateForm, toggleSecondaryPanel, setIsGalleryOpened } = props;
 
-  const { itemLink, itemLabel, itemAuxText, type } = form;
+  const { itemLink, itemLabel, itemAuxText, type, itemImage } = form;
 
   const setLinkValue = (value: any) => updateForm({ itemLink: value });
   const setLabelValue = (value: string) => updateForm({ itemLabel: value });
   const setAuxTextValue = (value: string) => updateForm({ itemAuxText: value });
   const setTypeValue = (value: string) => updateForm({ type: value });
+  const setImageValue = (value: IImage) => updateForm({ itemImage: value });
 
   const typeLinkOptions = [
     {
@@ -36,8 +37,8 @@ const Form = (props: IProps): JSX.Element => {
     <>
       <FieldsBehavior
         title="Type"
-        fieldType="RadioGroup"
         name="quantityGroup"
+        fieldType="RadioGroup"
         options={typeLinkOptions}
         value={typeLink}
         onChange={setTypeValue}
@@ -50,7 +51,16 @@ const Form = (props: IProps): JSX.Element => {
         value={itemLabel || ""}
         onChange={setLabelValue}
       />
-      {type === "link" && (
+      {type !== "link" ? (
+        <FieldsBehavior
+          title="Image"
+          name="image"
+          fieldType="ImageField"
+          value={itemImage || null}
+          onChange={setImageValue}
+          setIsGalleryOpened={setIsGalleryOpened}
+        />
+      ) : (
         <>
           <FieldsBehavior
             title="Auxiliar Text"
@@ -90,6 +100,7 @@ interface IStateProps {
 
 interface IFormProps {
   toggleSecondaryPanel(): any;
+  setIsGalleryOpened?: (isGalleryOpened: boolean) => void;
 }
 interface IDispatchProps {
   updateForm(value: any): void;

package/src/modules/Navigation/Menus/List/Table/SidePanel/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { connect } from "react-redux";
 import { menuActions } from "@ax/containers/Navigation";
@@ -14,30 +14,37 @@ const SidePanel = (props: IProps): JSX.Element => {
   const { isOpen, isOpenedSecond, toggleModal, toggleSecondaryPanel, addMenuItem, updateMenuItem, item, edit, form } =
     props;
 
-  const { itemLabel, itemLink, itemAuxText, type, headerStyle, footerStyle } = form;
+  const { itemLabel, itemLink, itemImage, itemAuxText, type, headerStyle, footerStyle } = form;
 
-  let page: any = {
+  const [isGalleryOpened, setIsGalleryOpened] = useState(false);
+
+  const setIsOpenedGallery = () => {
+    setIsGalleryOpened(!isGalleryOpened);
+  };
+
+  let menuItem: any = {
     label: itemLabel,
     url: itemLink,
+    image: itemImage,
     auxText: itemAuxText,
     component: "Menu",
     config: { type, headerStyle, footerStyle },
   };
 
-  page.children = edit && item ? item.children : [];
+  menuItem.children = edit && item ? item.children : [];
 
   if (edit && item && item.id) {
-    page = { ...page, id: item.id };
+    menuItem = { ...menuItem, id: item.id };
   }
 
   const addItemAction = () => {
-    addMenuItem(page);
+    addMenuItem(menuItem);
     toggleModal();
   };
 
   const editItemAction = () => {
-    page = { ...page, editorID: item && item.editorID };
-    updateMenuItem(page);
+    menuItem = { ...menuItem, editorID: item && item.editorID };
+    updateMenuItem(menuItem);
     toggleModal();
   };
 
@@ -61,19 +68,21 @@ const SidePanel = (props: IProps): JSX.Element => {
       toggleModal={toggleModal}
       isOpen={isOpen}
       isOpenedSecond={isOpenedSecond}
+      closeOnOutsideClick={!isGalleryOpened}
       handlePanel={toggleSecondaryPanel}
     >
-      <Form toggleSecondaryPanel={toggleSecondaryPanel} />
+      <S.FormWrapper>
+        <Form toggleSecondaryPanel={toggleSecondaryPanel} setIsGalleryOpened={setIsOpenedGallery} />
+      </S.FormWrapper>
       <S.Footer>
-        {edit ? (
-          <Button className="button" type="button" onClick={editButton.action} disabled={editButton.disabled}>
-            {editButton.label}
-          </Button>
-        ) : (
-          <Button className="button" type="button" onClick={addButton.action} disabled={addButton.disabled}>
-            {addButton.label}
-          </Button>
-        )}
+        <Button
+          className="button"
+          type="button"
+          onClick={edit ? editButton.action : addButton.action}
+          disabled={edit ? editButton.disabled : addButton.disabled}
+        >
+          {edit ? editButton.label : addButton.label}
+        </Button>
       </S.Footer>
     </FloatingPanel>
   );
@@ -99,13 +108,13 @@ interface ISidePanelProps {
   edit?: boolean;
   isOpen: boolean;
   isOpenedSecond: boolean;
-  toggleSecondaryPanel(): any;
-  toggleModal(): any;
+  toggleSecondaryPanel: () => void;
+  toggleModal: () => void;
 }
 
 interface IDispatchProps {
-  addMenuItem(page: any): void;
-  updateMenuItem(page: any): void;
+  addMenuItem(menuItem: any): void;
+  updateMenuItem(menuItem: any): void;
 }
 
 type IProps = IDispatchProps & ISidePanelProps & IStateProps;

package/src/modules/Navigation/Menus/List/Table/SidePanel/style.tsx

@@ -2,6 +2,22 @@ import styled from "styled-components";
 
 export const Footer = styled.div`
   position: absolute;
-  bottom: ${(p) => p.theme.spacing.m};
-  right: ${(p) => p.theme.spacing.m};
+  bottom: 0;
+  width: 100%;
+  right: 0;
+  height: 73px;
+  background: ${(p) => p.theme.colors.uiBackground01};
+  z-index: 3;
+  & button {
+    position: absolute;
+    right: ${(p) => p.theme.spacing.m};
+    bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+export const FormWrapper = styled.div`
+  height: calc(100% - ${(p) => p.theme.spacing.s} - 73px);
+  overflow: auto;
+  margin: -${(p) => p.theme.spacing.m};
+  padding: ${(p) => p.theme.spacing.m};
 `;

package/src/modules/PageEditor/index.tsx

@@ -115,69 +115,82 @@ const PageEditor = (props: IProps) => {
   };
 
   const publishPage = async () => {
-    const { updatePageStatus, savePage, pageID } = props;
+    const { updatePageStatus, savePage, pageID, validatePage } = props;
 
-    const publishPage = {
-      status: pageStatus.UPLOAD_PENDING,
-    };
+    const validated = await validatePage(true);
 
-    pageID
-      ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-      : await savePage(false, publishPage).then((isSaved: boolean) => {
-          if (isSaved) {
-            resetDirty();
-          }
-        });
+    if (validated) {
+      const publishPage = {
+        status: pageStatus.UPLOAD_PENDING,
+      };
+
+      pageID
+        ? updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
+        : savePage(false, publishPage).then((isSaved: boolean) => {
+            if (isSaved) {
+              resetDirty();
+            }
+          });
+    }
   };
 
   const publishChanges = async () => {
-    const { savePage } = props;
+    const { savePage, validatePage } = props;
 
-    const publishPage = {
-      status: pageStatus.UPLOAD_PENDING,
-    };
+    const validated = await validatePage(true);
 
-    await savePage(false, publishPage).then((isSaved: boolean) => {
-      if (isSaved) {
-        resetDirty();
-      }
-    });
+    if (validated) {
+      const publishPage = {
+        status: pageStatus.UPLOAD_PENDING,
+      };
+
+      savePage(false, publishPage).then((isSaved: boolean) => {
+        if (isSaved) {
+          resetDirty();
+        }
+      });
+    }
   };
 
-  const unpublishPage = async () => {
+  const unpublishPage = () => {
     const { updatePageStatus, pageID } = props;
 
-    await updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
+    updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
   };
 
-  const cancelPublishPage = async () => {
+  const cancelPublishPage = () => {
     const { updatePageStatus, pageID } = props;
 
-    await updatePageStatus([pageID], pageStatus.OFFLINE);
+    updatePageStatus([pageID], pageStatus.OFFLINE);
   };
 
-  const reviewPage = async () => {
+  const reviewPage = () => {
     const { validatePage } = props;
-    await validatePage();
+    validatePage();
   };
 
   const handlePublishDraft = async () => {
-    const { savePage } = props;
-    const isSaved = await savePage(false, null, true);
-    if (isSaved) resetDirty();
+    const { savePage, validatePage } = props;
+
+    const validated = await validatePage(true);
+
+    if (validated) {
+      const isSaved = await savePage(false, null, true);
+      if (isSaved) resetDirty();
+    }
   };
 
-  const handleDiscardDraft = async () => {
+  const handleDiscardDraft = () => {
     const { discardDraft } = props;
     resetDirty();
-    await discardDraft();
+    discardDraft();
   };
 
-  const handleDiscarChanges = async () => {
+  const handleDiscarChanges = () => {
     const { getPage, pageID } = props;
     resetDirty();
 
-    await getPage(pageID);
+    getPage(pageID);
   };
 
   const getPublishButton = (status: string) => {
@@ -596,7 +609,7 @@ interface IPageEditorDispatchProps {
   getPage(pageID?: number): Promise<void>;
   savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
-  validatePage(): Promise<boolean>;
+  validatePage(publish?: boolean): Promise<boolean>;
   updatePageStatus(id: number[], status: string): Promise<boolean>;
   setHistoryPush(path: string, isEditor: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;

package/src/modules/Sites/SitesList/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { ISettingsForm, ISite } from "@ax/types";
+import { IRootState, ISettingsForm, ISite, IUser } from "@ax/types";
 import { useModal } from "@ax/hooks";
 import { MainWrapper, Modal, ErrorToast } from "@ax/components";
 
@@ -13,7 +13,7 @@ import SiteItem from "./SiteItem";
 import * as S from "./style";
 
 const SitesList = (props: IProps): JSX.Element => {
-  const { sites, saveSettings, setHistoryPush } = props;
+  const { sites, saveSettings, setHistoryPush, currentUser } = props;
 
   const initialState = {
     name: "",
@@ -50,13 +50,17 @@ const SitesList = (props: IProps): JSX.Element => {
   const mainAction = { title: "Create site", onClick: saveSiteSettings, disabled: isSubmitDisabled };
   const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
+  const userHasSite = (siteID: number) => currentUser.sites.includes("all") || currentUser.sites.includes(siteID);
+
   return (
     <MainWrapper title="Sites" rightButton={rightButtonProps}>
       <ErrorToast />
       <S.Sites>
-        {sites.map((site: ISite) => (
-          <SiteItem key={site.id} site={site} />
-        ))}
+        {sites
+          .filter((site: ISite) => userHasSite(site.id))
+          .map((site: ISite) => (
+            <SiteItem key={site.id} site={site} />
+          ))}
       </S.Sites>
       <Modal
         isOpen={isOpen}
@@ -74,8 +78,13 @@ const SitesList = (props: IProps): JSX.Element => {
 
 interface ISitesProps {
   sites: ISite[];
+  currentUser: IUser;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+  currentUser: state.users.currentUser,
+});
+
 interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
   saveSettings(form: ISettingsForm): Promise<boolean>;
@@ -88,4 +97,4 @@ const mapDispatchToProps = {
 
 type IProps = ISitesProps & IDispatchProps;
 
-export default connect(null, mapDispatchToProps)(SitesList);
+export default connect(mapStateToProps, mapDispatchToProps)(SitesList);

package/src/modules/StructuredData/Form/index.tsx

@@ -38,6 +38,7 @@ const Form = (props: IProps) => {
     deleteStructuredDataContent,
     errors,
     validated,
+    validateForm,
   } = props;
 
   const [isNewStructuredData, setIsNewStructuredData] = useState(!form.id);
@@ -75,29 +76,33 @@ const Form = (props: IProps) => {
     });
 
   const handleSave = async (publish?: boolean) => {
-    setIsSavedData(true);
-    const status = isNewStructuredData ? true : form.draft;
-
-    let payload: any = {
-      structuredData: currentStructuredData ? currentStructuredData.id : null,
-      content: form.content,
-      draft: publish === true ? false : status,
-      relatedSite: currentSite ? currentSite.id : null,
-      entity: form.entity ? form.entity : null,
-    };
+    const validated = publish ? await validateForm(true) : true;
+
+    if (validated) {
+      setIsSavedData(true);
+      const status = isNewStructuredData ? true : form.draft;
+
+      let payload: any = {
+        structuredData: currentStructuredData ? currentStructuredData.id : null,
+        content: form.content,
+        draft: publish === true ? false : status,
+        relatedSite: currentSite ? currentSite.id : null,
+        entity: form.entity ? form.entity : null,
+      };
 
-    if (!isNewStructuredData) {
-      payload = { ...payload, ...form };
-    }
+      if (!isNewStructuredData) {
+        payload = { ...payload, ...form };
+      }
 
-    let saved = false;
-    if (isNewStructuredData) {
-      saved = await createStructuredDataContent(payload);
-      saved && setIsNewStructuredData(false);
-    } else {
-      saved = await updateStructuredDataContent(payload);
+      let saved = false;
+      if (isNewStructuredData) {
+        saved = await createStructuredDataContent(payload);
+        saved && setIsNewStructuredData(false);
+      } else {
+        saved = await updateStructuredDataContent(payload);
+      }
+      saved && resetDirty();
     }
-    saved && resetDirty();
   };
 
   const getSaveLabel = () => {
@@ -171,6 +176,9 @@ const Form = (props: IProps) => {
   };
 
   const publishItem = async () => {
+    const validated = await validateForm(true);
+    if (!validated) return;
+
     if (!isNewStructuredData) {
       setDataStatus(form.id, "undraft").then((updated: boolean) => {
         if (updated) {
@@ -306,7 +314,7 @@ interface IProps {
   getSiteDataPack(packID: string): void;
   setDataStatus(id: number, status: string): Promise<boolean>;
   deleteStructuredDataContent(id: number): Promise<boolean>;
-  validateForm(): Promise<boolean>;
+  validateForm(publish?: boolean): Promise<boolean>;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/modules/StructuredData/StructuredDataList/utils.tsx

@@ -113,7 +113,7 @@ const getSortedListStatus = (orderPointer: string, isAscending: boolean) => {
     isAscending,
     sortedByTitle: orderPointer === "title",
     sortedByURL: orderPointer === "slug",
-    sortedByDate: orderPointer === "modified",
+    sortedByDate: ["modified", "date"].includes(orderPointer),
   };
 
   return sortedListStatus;

package/src/types/index.tsx

@@ -314,6 +314,7 @@ export interface IMenuItem {
   url: any;
   auxText: string;
   children: any[];
+  image?: IImage | string | null;
   isExpanded?: boolean;
   config: IMenuItemConfig | null;
   parentEditorID?: number;
@@ -329,6 +330,7 @@ export interface IMenuForm {
   itemLink: any;
   itemLabel: string;
   itemAuxText: string;
+  itemImage: IImage | string | null;
   type: string;
   headerStyle: string;
   footerStyle: string;
@@ -535,7 +537,7 @@ export interface IUser {
   enabled?: boolean;
   timezone?: string;
   status?: string;
-  sites?: any;
+  sites: (number | string)[];
 }
 
 export interface ISelectOption {