@griddo/ax 1.62.8 → 1.63.2

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/Field/index.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+
+import { useModal } from "@ax/hooks";
+import { SideModal, ActionMenu } from "@ax/components";
+
+import * as S from "./style";
+
+const pageEditorID = 0;
+
+const Field = (props: IField): JSX.Element => {
+  const {
+    type,
+    template,
+    defaults,
+    updateEditorContent,
+    content,
+    updateDataPackFormValue,
+    dataPackConfigFormData,
+    theme,
+  } = props;
+  const { isOpen, toggleModal } = useModal();
+  const options = defaults.filter((component: any) =>
+    component.type === type && content[component.type]?.id !== component.id && !component.setAsDefault
+  );
+  const optionsType = `${type}s`;
+
+  const actionMenuOptions = [
+    {
+      label: "replace",
+      icon: "change",
+      action: toggleModal,
+    },
+  ];
+
+  const actionMenuIcon = "more";
+
+  const handleReplace = (option: any) => {
+    const configFormData = {
+      ...dataPackConfigFormData,
+      templates: {
+        ...dataPackConfigFormData.templates,
+        [template]: {
+          ...(!!dataPackConfigFormData.templates && dataPackConfigFormData.templates[template]),
+          ...(type === "header" && { defaultHeader: option.id }),
+          ...(type === "footer" && { defaultFooter: option.id }),
+        }
+      },
+    }
+    updateDataPackFormValue(configFormData);
+    updateEditorContent(pageEditorID, type, option.id);
+    toggleModal();
+  };
+
+  const isDefaultNavigation = () => {
+    const defaultType = type === "header" ? "defaultHeader" : "defaultFooter";
+    const templateNavigation = dataPackConfigFormData.templates && dataPackConfigFormData.templates[template]
+    const templateDefaultNavigation = templateNavigation && templateNavigation[defaultType];
+    if (!templateDefaultNavigation) return true;
+    const siteDefaultNavigation = defaults.find((navigation: any) => navigation.id === templateDefaultNavigation);
+    return !!siteDefaultNavigation?.isDefault;
+  }
+
+  const setDefault = {
+    title: `Put the default ${type}`,
+    action: () => handleReplace({ id: null }),
+    checked: isDefaultNavigation(),
+  }
+
+  const hasOptions: boolean | undefined = options?.length > 0 || !isDefaultNavigation();
+
+  if (!content[type]) return <></>;
+
+  return (
+    <>
+      <S.Component isArray disabled>
+        <S.Label>{content[type].title}</S.Label>
+        <S.HiddenButtonsWrapper>
+          {hasOptions && <ActionMenu options={actionMenuOptions} icon={actionMenuIcon} />}
+        </S.HiddenButtonsWrapper>
+      </S.Component>
+      {hasOptions && (
+        <SideModal
+          optionsType={optionsType}
+          whiteList={options}
+          handleClick={handleReplace}
+          toggleModal={toggleModal}
+          isOpen={isOpen}
+          setDefault={setDefault}
+          theme={theme}
+        />
+      )}
+    </>
+  )
+}
+
+interface IField {
+  type: string;
+  template: string;
+  defaults: any;
+  content: any,
+  dataPackConfigFormData: any;
+  theme: string;
+  updateEditorContent: (selectedEditorID: number, key: string, value: any) => void;
+  updateDataPackFormValue: (value: any) => void;
+}
+
+export { Field }

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/Field/style.tsx

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+const HiddenButtonsWrapper = styled.span`
+  margin-left: auto;
+  display: none;
+  opacity: 0;
+`;
+
+const Component = styled.span<{ isArray?: boolean | undefined; disabled?: boolean }>`
+  color: ${p => p.theme.color.textHighEmphasis};
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: ${p => p.isArray ? "space-between" : "initial"};
+  width: 100%;
+  height: ${p => p.theme.spacing.l};
+  background: ${p => p.theme.color.uiBackground02};
+  border: 1px solid transparent;
+  margin-bottom: ${p => p.theme.spacing.xs};
+  padding: 0 ${p => p.theme.spacing.xs};
+  border-radius: ${p => p.theme.radii.s};
+  box-shadow: ${p => p.theme.shadow.shadowS};
+  ${p => p.theme.textStyle.fieldLabel};
+  text-align: left;
+  cursor: ${p => p.disabled ? `default` : `pointer`};
+
+  &:hover {
+    background: ${p => p.theme.color.overlayHoverPrimary};
+  }
+
+  &:hover ${HiddenButtonsWrapper}{
+    display: flex;
+    opacity: 1;
+  }
+
+  &:focus,
+  &:active {
+    background: ${p => p.disabled ? p.theme.color.uiBackground02 : p.theme.color.overlayFocusPrimary};
+    border: 1px solid ${p => p.disabled ? `transparent` : p.theme.color.interactive01};
+    outline: none;
+  }
+`;
+
+const Label = styled.span`
+  ${p => p.theme.textStyle.fieldLabel};
+  color: ${p => p.theme.color.textHighEmphasis};
+  margin-left: ${p => p.theme.spacing.xs};
+`;
+
+export {
+  HiddenButtonsWrapper,
+  Component,
+  Label,
+};

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/index.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { IRootState } from "@ax/types";
+import { Loading } from "@ax/components";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+import { dataPacksActions } from "@ax/containers/Settings";
+
+import { Field } from "./Field";
+import * as S from "./style";
+
+const navigationTypes = ["header", "footer"];
+
+const ConfigPanel = (props: IProps): JSX.Element => {
+  const {
+    isLoading,
+    template,
+    ...rest
+  } = props;
+
+  if (isLoading && !template) return <Loading />;
+
+  return (
+    <>
+      <S.HeaderWrapper>
+        <S.Title>{template}</S.Title>
+      </S.HeaderWrapper>
+      <S.Tab>Config</S.Tab>
+      <S.FieldsWrapper>
+        <S.FieldsTitle>Default modules</S.FieldsTitle>
+        {navigationTypes.map((type, idx) => (
+          <Field key={idx} type={type} template={template} {...rest} />
+        ))}
+      </S.FieldsWrapper>
+    </>
+  );
+};
+
+interface IStateProps {
+  isLoading: boolean;
+  template: string;
+  defaults: any;
+  content: any;
+  dataPackConfigFormData: any;
+  theme: string;
+}
+
+interface IDispatchProps {
+  updateEditorContent: (selectedEditorID: number, key: string, value: any) => void;
+  updateDataPackFormValue: (value: any) => void;
+}
+
+type IProps = IStateProps & IDispatchProps;
+
+const mapStateToProps = (state: IRootState) => ({
+  defaults: state.navigation.currentDefaultsContent,
+  content: { ...state.pageEditor.editorContent },
+  dataPackConfigFormData: state.dataPacks.configFormData,
+});
+
+const mapDispatchToProps = {
+  updateEditorContent: pageEditorActions.updateEditorContent,
+  updateDataPackFormValue: dataPacksActions.updateFormValue,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConfigPanel);

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/style.tsx

@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+`;
+
+const Title = styled.p`
+  ${(p) => p.theme.textStyle.headingS};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Tab = styled.div`
+  border-bottom: ${p => `1px solid ${p.theme.color.uiLine}`};
+  margin: ${p => p.theme.spacing.s} 0;
+  padding-bottom: ${p => p.theme.spacing.s};
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${p => p.theme.color.textHighEmphasis};
+  text-align: center;
+`;
+
+const FieldsWrapper = styled.div`
+  margin: ${(p) => `${p.theme.spacing.m} 0 ${p.theme.spacing.m} 0`};
+`;
+
+const FieldsTitle = styled.div`
+  position: relative;
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+`;
+
+export {
+  HeaderWrapper,
+  Title,
+  Tab,
+  FieldsWrapper,
+  FieldsTitle,
+};

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/TemplateBrowser/index.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { Browser } from "@ax/components";
+import { ILanguage, IRootState, ISocialState } from "@ax/types";
+
+const TemplateBrowser = (props: IProps) => {
+  const {
+    socials,
+    cloudinaryName,
+    damDomain,
+    content: { editorContent, header, footer },
+    selectedEditorID,
+    currentSiteInfo: { theme, id: siteID },
+    siteLangs,
+  } = props;
+
+  const updatedContent = { ...editorContent };
+
+  return (
+    <Browser
+      isPage={true}
+      socials={socials}
+      content={updatedContent}
+      selectedEditorID={selectedEditorID}
+      url=""
+      theme={theme}
+      cloudinaryName={cloudinaryName}
+      damDomain={damDomain}
+      siteLangs={siteLangs}
+      siteID={siteID}
+      header={header}
+      footer={footer}
+    />
+  );
+};
+
+interface IProps {
+  content: any;
+  selectedEditorID: number;
+  currentSiteInfo: any;
+  socials: ISocialState;
+  cloudinaryName: string | null;
+  damDomain: string | null;
+  siteLangs: ILanguage[];
+}
+
+const mapStateToProps = (state: IRootState): IProps => ({
+  content: { ...state.pageEditor.editorContent },
+  selectedEditorID: state.navigation.selectedEditorID as number,
+  currentSiteInfo: state.sites.currentSiteInfo,
+  socials: state.social,
+  cloudinaryName: state.app.globalSettings.cloudinaryName,
+  damDomain: state.app.globalSettings.damDomain,
+  siteLangs: state.sites.currentSiteLanguages,
+});
+
+export default connect(mapStateToProps)(TemplateBrowser);

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/index.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { connect } from "react-redux";
+import { themes } from "components";
+
+import { ResizePanel } from "@ax/components";
+import { IRootState } from "@ax/types";
+
+import TemplateBrowser from "./TemplateBrowser";
+import ConfigPanel from "./ConfigPanel";
+
+const Editor = (props: IProps) => {
+  const { isLoading, template } = props;
+
+  const defaultTheme = themes.find((theme: any) => theme.default);
+  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+
+  return (
+    <ResizePanel
+      leftPanel={<TemplateBrowser />}
+      rightPanel={
+        <ConfigPanel
+          template={template}
+          isLoading={isLoading}
+          theme={theme}
+        />
+      }
+    />
+  );
+};
+
+type IProps = {
+  isLoading: boolean;
+  template: string;
+}
+
+const mapStateToProps = (state: IRootState): IProps => ({
+  isLoading: state.app.isLoading,
+  template: state.pageEditor.template,
+});
+
+export default connect(mapStateToProps)(Editor);

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/index.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect } from "react";
+import { connect } from "react-redux";
+
+import { IRootState } from "@ax/types";
+import { useIsDirty } from "@ax/hooks";
+import { RouteLeavingGuard } from "@ax/guards";
+import { ErrorToast, Loading, MainWrapper } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { dataPacksActions } from "@ax/containers/Settings";
+
+import Editor from "./Editor";
+import * as S from "./style";
+
+const TemplateEditor = (props: IProps) => {
+  const {
+    isLoading,
+    isSaving,
+    editorContent,
+    setHistoryPush,
+    template,
+    updateDataPack,
+    dataPackSelected,
+  } = props;
+
+  const { isDirty, setIsDirty } = useIsDirty(editorContent);
+
+  const rightButtonProps = {
+    label: !isDirty ? "Saved" : isSaving ? "Saving" : "Save",
+    disabled: isSaving || !isDirty,
+    action: async () => {
+      await updateDataPack(dataPackSelected.id);
+      setIsDirty(false);
+    },
+  };
+
+  const leavingGuardText = (
+    <>
+      Some content <strong>is not saved</strong> on this page.
+    </>
+  );
+
+  const goBack = (path: string) => setHistoryPush(path);
+
+  return isLoading && !template ? (
+    <Loading />
+  ) : (
+    <>
+      <RouteLeavingGuard when={isDirty} action={goBack} text={leavingGuardText} />
+      <MainWrapper
+        title={template}
+        backLink={true}
+        rightButton={rightButtonProps}
+          fixedAppBar={true}
+        fullWidth={true}
+      >
+        <ErrorToast size="l" />
+        <S.Content>
+          <Editor />
+        </S.Content>
+      </MainWrapper>
+    </>
+  );
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  isLoading: state.app.isLoading,
+  isSaving: state.app.isSaving,
+  editorContent: state.pageEditor.editorContent,
+  template: state.pageEditor.template,
+  dataPackSelected: state.dataPacks.selected,
+});
+
+interface IStateProps {
+  isLoading: boolean;
+  isSaving: boolean;
+  editorContent: any;
+  template: string;
+  dataPackSelected: any;
+}
+
+const mapDispatchToProps = {
+  setHistoryPush: appActions.setHistoryPush,
+  updateDataPack: dataPacksActions.updateDataPack,
+};
+
+interface IDispatchProps {
+  setHistoryPush(path: string, isEditor?: boolean): void;
+  updateDataPack: (dataPack?: any) => Promise<void>;
+}
+
+type IProps = IStateProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(TemplateEditor);

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/style.tsx

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+const Content = styled.section`
+  display: flex;
+  min-height: 100%;
+`;
+
+const NotificationWrapper = styled.div`
+  position: fixed;
+  width: 100%;
+  top: ${p => `calc(${p.theme.spacing.s} * 4)`};
+  left: 0;
+  right: 0;
+  z-index: 1100;
+`;
+
+const ModalContent = styled.div`
+  padding: ${p => p.theme.spacing.m};
+`;
+
+export {
+  Content,
+  NotificationWrapper,
+  ModalContent
+}

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { ITemplate } from "@ax/types";
+import { appActions } from "@ax/containers/App";
+import { pageEditorActions } from "@ax/containers/PageEditor";
+
+import * as S from "./style";
+
+const TemplateConfig = (props: IProps): React.ReactElement => {
+  const { setHistoryPush, templates, getTemplatePage } = props;
+
+  const goToEditor = async (template: ITemplate) => {
+    await getTemplatePage(template.id);
+    setHistoryPush("/sites/settings/content-types/editor", true);
+  };
+
+  return (
+    <>
+      <S.Heading>Template configuration</S.Heading>
+      <S.Text>
+        {"You can set custom settings in these templates and will be shown by default. However, they can be modified on the page's editor."}
+      </S.Text>
+      <S.TemplatesWrapper>
+        {templates &&
+          templates.map((template: ITemplate, key: number) => (
+            <S.TemplateCard key={`${key}${template.title}`} onClick={() => goToEditor(template)}>
+              {template.thumbnails && <S.TemplateThumbnail backgroundUrl={template.thumbnails["2x"]} />}
+              <S.TemplateCardTitle>{template.title}</S.TemplateCardTitle>
+            </S.TemplateCard>
+          ))}
+      </S.TemplatesWrapper>
+    </>
+  )
+}
+
+interface IProps {
+  templates: ITemplate[];
+  setHistoryPush(path: string, isEditor?: boolean): void;
+  getTemplatePage: (template: string) => Promise<void>;
+}
+
+const mapDispatchToProps = {
+  setHistoryPush: appActions.setHistoryPush,
+  getTemplatePage: pageEditorActions.getTemplatePage,
+};
+
+export default connect(null, mapDispatchToProps)(TemplateConfig);

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/style.tsx

@@ -0,0 +1,53 @@
+import styled from "styled-components";
+
+const TemplatesWrapper = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: ${p => p.theme.spacing.xs};
+  padding: ${p => p.theme.spacing.m} 0;
+`;
+
+const TemplateCard = styled.div`
+  display: flex;
+  align-items: center;
+  padding: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color.interactiveBackground};
+  border-radius: ${p => p.theme.radii.s};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  cursor: pointer;
+`;
+
+const TemplateCardTitle = styled.div`
+  ${p => p.theme.textStyle.uiMSemibold};
+  color: ${p => p.theme.color.textHighEmphasis};
+`;
+
+const TemplateThumbnail = styled.div<{ backgroundUrl: string }>`
+  background: url(${p => p.backgroundUrl}) no-repeat;
+  background-size: cover;
+  background-position: top;
+  min-height: 86px;
+  width: 63px;
+  margin-right: ${(p) => p.theme.spacing.s};
+`;
+
+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);
+`;
+
+export {
+  TemplateCard,
+  TemplateCardTitle,
+  TemplateThumbnail,
+  TemplatesWrapper,
+  Heading,
+  Text,
+}