@griddo/ax 1.65.26 → 1.66.1

package/src/modules/Settings/Globals/NavigationModules/index.tsx

@@ -0,0 +1,89 @@
+import React, { Dispatch, SetStateAction } from "react";
+
+import { Button, Modal } from "@ax/components";
+import { useModal } from "@ax/hooks";
+
+import SideModal from "./SideModal";
+import * as S from "./style";
+
+const NavigationModules = (props: IProps): JSX.Element => {
+  const {
+    navigationModules,
+    form,
+    theme,
+    setNavigationModulesValue,
+    isNavigationModulesChanged,
+    setIsNavigationModulesChanged,
+  } = props;
+  const { isOpen: isModalOpen, toggleModal } = useModal();
+  const { isOpen: isSideModalOpen, toggleModal: toggleSideModal } = useModal();
+
+  const buttonText = isNavigationModulesChanged
+    ? "Change Navigation modules design"
+    : "Select Navigation modules design";
+
+  const handleButtonClick = isNavigationModulesChanged ? toggleModal : toggleSideModal;
+
+  const mainAction = {
+    title: "Yes, change design",
+    onClick: () => {
+      toggleModal();
+      toggleSideModal();
+    },
+  };
+
+  const secondaryAction = {
+    title: "Cancel",
+    onClick: toggleModal,
+  };
+
+  return (
+    <S.Wrapper>
+      <S.Heading>Navigation Modules</S.Heading>
+      <S.Text>
+        There are multiple designs for the navigation modules in the library.{" "}
+        <strong>Choose the design you want for your site</strong> and add as many headers and footers as you need.
+      </S.Text>
+      <S.Separator />
+      <Button type="button" onClick={handleButtonClick} buttonStyle="line">
+        {buttonText}
+      </Button>
+      <Modal
+        isOpen={isModalOpen}
+        hide={toggleModal}
+        size="S"
+        title="Change Design"
+        mainAction={mainAction}
+        secondaryAction={secondaryAction}
+      >
+        {
+          <S.ModalContent>
+            <strong>There is already a navigation modules design defined</strong>. If you change it, headers and footers
+            on all pages of the site will be affected. Are you sure you want to proceed with the change?
+          </S.ModalContent>
+        }
+      </Modal>
+      <SideModal
+        navigationModules={navigationModules}
+        form={form}
+        toggleModal={toggleSideModal}
+        isOpen={isSideModalOpen}
+        theme={theme}
+        setNavigationModulesValue={setNavigationModulesValue}
+        isNavigationModulesChanged={isNavigationModulesChanged}
+        setIsNavigationModulesChanged={setIsNavigationModulesChanged}
+      />
+    </S.Wrapper>
+  );
+};
+
+interface IProps {
+  navigationModules: Record<string, any[]>;
+  theme: string;
+  form: any;
+  setNavigationModulesValue: (value: any) => void;
+  isNavigationModulesChanged: boolean;
+  setIsNavigationModulesChanged: Dispatch<SetStateAction<boolean>>;
+}
+
+export default NavigationModules;

package/src/modules/Settings/Globals/NavigationModules/style.tsx

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  margin: ${(p) => p.theme.spacing.m} 0;
+  padding: ${(p) => p.theme.spacing.m} 0;
+`;
+
+const Heading = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  width: calc(${(p) => p.theme.spacing.l} * 12);
+`;
+
+const Separator = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+  div {
+    margin-bottom: 0;
+  }
+`;
+
+export { Wrapper, Heading, Text, Separator, ModalContent };

package/src/modules/Settings/Globals/index.tsx

@@ -6,22 +6,33 @@ import { IImage, INavItem, IRootState, ISettingsForm } from "@ax/types";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
-import { FieldsBehavior, FieldGroup, MainWrapper, ErrorToast, Nav } from "@ax/components";
+import { FieldsBehavior, FieldGroup, MainWrapper, ErrorToast, Nav, Notification } from "@ax/components";
 import { sitesActions } from "@ax/containers/Sites";
+import { getNavigationModules } from "@ax/helpers";
 
+import NavigationModules from "./NavigationModules";
 import { timezones } from "./constants";
 import * as S from "./style";
 
 const Globals = (props: IProps): JSX.Element => {
   const { isSaving, currentSiteInfo, saveSettings, setHistoryPush, navItems, currentNavItem } = props;
 
+  const [isNavigationNotificationOpen, setIsNavigationNotificationOpen] = useState(false);
+
   const title = "General settings";
 
+  const [isNavigationModulesChanged, setIsNavigationModulesChanged] = useState(!!currentSiteInfo.navigationModules);
   const [form, setForm] = useState(currentSiteInfo);
+
   const { name, timezone, theme, favicon, smallAvatar, bigAvatar, thumbnail } = form;
 
   const { isDirty, setIsDirty } = useIsDirty(form);
 
+  const navigationModules: Record<string, any[]> = getNavigationModules();
+  const hasMultipleNavigationModules = Object.keys(navigationModules).some(
+    (key: string) => navigationModules[key].length > 1
+  );
+
   const setValue = (newValue: Record<string, string | null>) =>
     setForm((state: ISettingsForm) => ({ ...state, ...newValue }));
 
@@ -32,9 +43,13 @@ const Globals = (props: IProps): JSX.Element => {
   const setSmallAvatarValue = (value: IImage) => setValue({ smallAvatar: value.url ? value.url : null });
   const setBigAvatarValue = (value: IImage) => setValue({ bigAvatar: value.url ? value.url : null });
   const setThumbnailValue = (value: IImage) => setValue({ thumbnail: value.url ? value.url : null });
+  const setNavigationModulesValue = (value: any) => setValue({ navigationModules: value });
 
   const saveForm = async () => {
     const isSaved = await saveSettings(form);
+    const isNavigationModulesChanging =
+      JSON.stringify(form?.navigationModules) !== JSON.stringify(currentSiteInfo?.navigationModules);
+    setIsNavigationNotificationOpen(isNavigationModulesChanging);
     if (isSaved) setIsDirty(false);
   };
 
@@ -55,6 +70,9 @@ const Globals = (props: IProps): JSX.Element => {
     setHistoryPush(path);
   };
 
+  const closeNavigationNotification = () => setIsNavigationNotificationOpen(false);
+  const goToNavigationModules = () => setHistoryPush("/sites/navigations/modules");
+
   return (
     <>
       <RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
@@ -63,6 +81,15 @@ const Globals = (props: IProps): JSX.Element => {
           <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
           <S.ContentWrapper>
             <ErrorToast />
+            {isNavigationNotificationOpen && (
+              <Notification
+                type="warning"
+                text="The design of the navigation modules has changed. Please, check the previously created."
+                btnText="Go to check"
+                onClick={goToNavigationModules}
+                onClose={closeNavigationNotification}
+              />
+            )}
             <S.FormWrapper>
               <FieldsBehavior
                 title="Site Name"
@@ -97,6 +124,16 @@ const Globals = (props: IProps): JSX.Element => {
                 onChange={setFaviconValue}
                 helptext="Upload a 32x32px image"
               />
+              {hasMultipleNavigationModules && (
+                <NavigationModules
+                  navigationModules={navigationModules}
+                  form={form}
+                  setNavigationModulesValue={setNavigationModulesValue}
+                  isNavigationModulesChanged={isNavigationModulesChanged}
+                  setIsNavigationModulesChanged={setIsNavigationModulesChanged}
+                  theme={theme}
+                />
+              )}
               <FieldGroup title="Content for CMS">
                 <FieldsBehavior
                   title="Small avatar"

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

@@ -6,7 +6,7 @@ import { trimText, isDevelopment } from "@ax/helpers";
 import { ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { sitesActions } from "@ax/containers/Sites";
-import { FieldsBehavior, Icon, Modal, Tooltip } from "@ax/components";
+import { FieldsBehavior, Icon, Modal, Tooltip, Image } from "@ax/components";
 
 import * as S from "./style";
 
@@ -36,7 +36,11 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
   };
 
   const thumbnailPlaceholder = "/img/placeholder/thumbnail@1x.png";
-  const thumbnail = site.thumbnail ? site.thumbnail : thumbnailPlaceholder;
+  const thumbnail = site.thumbnail ? (
+    <Image width={238} height={178} url={site.thumbnail} />
+  ) : (
+    <S.Thumbnail backgroundUrl={thumbnailPlaceholder} />
+  );
 
   const setSite = async () => {
     await setSiteInfo(site);
@@ -127,9 +131,7 @@ const SiteItem = (props: ISiteItemProps): JSX.Element => {
   return (
     <>
       <S.SiteWrapper key={site.id} onClick={setSite}>
-        <Tooltip content={siteTooltip}>
-          <S.Thumbnail backgroundUrl={thumbnail} />
-        </Tooltip>
+        <Tooltip content={siteTooltip}>{thumbnail}</Tooltip>
         <S.Wrapper>
           <S.Title>{siteName}</S.Title>
           <S.IconsWrapper>

package/src/modules/StructuredData/StructuredDataList/OptionTable/index.tsx

@@ -5,11 +5,11 @@ import { getDefaultTheme, getThumbnailProps } from "@ax/helpers";
 import { MenuItem, RadioGroup } from "@ax/components";
 
 import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelectedType, setOption } from "./store";
-
+import { SecondaryActionButton, MainActionButton } from "./../atoms";
 import * as S from "./style";
 
 const OptionTable = (props: IOptionTableProps): JSX.Element => {
-  const { selectPage, filters, values, selectedValue } = props;
+  const { selectPage, filters, values, selectedValue, mainAction, secondaryAction } = props;
 
   const filterOptions = (value: string, objKey: keyof IStructuredDataValue): IStructuredDataValue[] =>
     values.filter((item: IStructuredDataValue) => item[objKey] === value);
@@ -96,16 +96,27 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
             {thumbnailProps && <S.Thumbnail backgroundUrl={thumbnailProps.src} />}
           </S.ThumbnailWrapper>
         )}
+        <S.Actions>
+          <SecondaryActionButton onClick={secondaryAction.onClick} title={secondaryAction.title}/>
+          <MainActionButton onClick={mainAction.onClick} title={mainAction.title}/>
+        </S.Actions>
       </S.Column>
     </S.Table>
   );
 };
 
+interface IAction {
+  title: string;
+  onClick: any;
+}
+
 interface IOptionTableProps {
   selectPage: (value: string) => void;
   filters: IStructuredDataFilter[];
   values: IStructuredDataValue[];
   selectedValue: string;
+  mainAction: IAction;
+  secondaryAction: IAction;
 }
 
-export default OptionTable;
+export default OptionTable;

package/src/modules/StructuredData/StructuredDataList/OptionTable/style.tsx

@@ -36,8 +36,8 @@ export const ThumbnailWrapper = styled.div`
   overflow: hidden;
   border-radius: 4px;
   padding: ${(p) => p.theme.spacing.xs};
-  height: 100%;
   background-color: #ffffff;
+  height: 220px;
 `;
 
 export const Thumbnail = styled.div<{ backgroundUrl: string | boolean }>`
@@ -50,5 +50,14 @@ export const Thumbnail = styled.div<{ backgroundUrl: string | boolean }>`
 `;
 
 export const Link = styled.div<{ active: boolean }>`
-    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+  color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
 `;
+
+export const Actions = styled.div`
+  position: fixed;
+  bottom: ${(p) => p.theme.spacing.m};
+  right: ${(p) => p.theme.spacing.m};
+  button {
+    margin-left: ${(p) => p.theme.spacing.s};
+  }
+`;

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

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
+import { Modal, FieldsBehavior, Button } from "@ax/components";
 
 import * as S from "./style";
 
@@ -64,10 +64,27 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
   );
 };
 
+const MainActionButton = (props: IActionButton): JSX.Element => (
+  <Button type="button" onClick={props.onClick}>
+    {props.title}
+  </Button>
+);
+
+const SecondaryActionButton = (props: IActionButton): JSX.Element => (
+  <Button type="button" buttonStyle="text" onClick={props.onClick}>
+    {props.title}
+  </Button>
+);
+
 interface IDeleteModal extends IModal {
   arePagesTranslated: boolean;
   deleteAllVersions: boolean;
   setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-export { DeleteModal };
+interface IActionButton {
+  onClick: () => void;
+  title: string;
+}
+
+export { DeleteModal, MainActionButton, SecondaryActionButton };

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

@@ -82,7 +82,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     restorePage,
     resetPageEditor,
     getAnalytics,
-    setCurrentDataID,
   } = props;
 
   const itemsPerPage = 50;
@@ -172,7 +171,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
       include_draft: true,
       query: searchQuery,
       format: "list",
-      relatedFields: true,
     };
 
     return params;
@@ -214,7 +212,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
     resetFilter();
     setIsFirstRender(false);
     resetPageEditor();
-    setCurrentDataID(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -582,18 +579,14 @@ const StructuredDataList = (props: IProps): JSX.Element => {
           </TableList>
         </S.TableListWrapper>
       </S.StructuredDataWrapper>
-      <Modal
-        isOpen={isNewOpen}
-        hide={toggleNewModal}
-        size="M"
-        title="New content"
-        mainAction={{ onClick: addNewPage, title: "ADD" }}
-      >
+      <Modal isOpen={isNewOpen} hide={toggleNewModal} size="M" title="New content">
         <OptionTable
           selectPage={addTemplate}
           filters={options.filters}
           values={options.values}
           selectedValue={selectedValue}
+          mainAction={{ onClick: addNewPage, title: "Add" }}
+          secondaryAction={{ title: "Cancel", onClick: toggleNewModal }}
         />
       </Modal>
       <DeleteModal
@@ -650,7 +643,6 @@ const mapDispatchToProps = {
   restorePage: pageEditorActions.restorePage,
   resetPageEditor: pageEditorActions.resetPageEditor,
   getAnalytics: analyticsActions.getAnalytics,
-  setCurrentDataID: structuredDataActions.setCurrentDataID,
 };
 
 interface IDispatchProps {
@@ -673,7 +665,6 @@ interface IDispatchProps {
   restorePage(id: number | number[]): Promise<boolean>;
   resetPageEditor(): Promise<void>;
   getAnalytics(): void;
-  setCurrentDataID(id: number | null): void;
 }
 
 interface ICategoriesProps {
@@ -693,4 +684,4 @@ interface ICategoriesProps {
 
 type IProps = ICategoriesProps & IDispatchProps;
 
-export default connect(mapStateToProps, mapDispatchToProps)(StructuredDataList);
+export default connect(mapStateToProps, mapDispatchToProps)(StructuredDataList);

package/src/types/index.tsx

@@ -485,6 +485,10 @@ export interface ISettingsForm {
   smallAvatar?: IImage | string | null;
   bigAvatar?: IImage | string | null;
   thumbnail?: IImage | string | null;
+  navigationModules?: {
+    header: string;
+    footer: string;
+  };
 }
 
 export interface IDataSource {
@@ -729,6 +733,13 @@ export interface ITemplate {
   type: { label: string; value: string; mode: string };
 }
 
+export interface INotification {
+  type: "error" | "info" | "success" | "warning";
+  text: string;
+  btnText?: string;
+  onClick?: () => void;
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"