@griddo/ax 1.62.6 → 1.63.0

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,
+}

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

@@ -1,11 +1,12 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataPackConfigImport, IDataPackConfigImportCategory, IRootState } from "@ax/types";
+import { IDataPackConfigImport, IDataPackConfigImportCategory, IRootState, ITemplate } from "@ax/types";
 import { dataPacksActions } from "@ax/containers/Settings";
 import { FieldsBehavior, Modal, Tag } from "@ax/components";
 import { useModal } from "@ax/hooks";
 
+import TemplateConfig from "./TemplateConfig";
 import * as S from "./style";
 
 const Form = (props: IProps): JSX.Element => {
@@ -30,7 +31,7 @@ const Form = (props: IProps): JSX.Element => {
   const { isOpen, toggleModal } = useModal();
 
   const selectOptions: { value: string; label: string }[] = [];
-  templates.forEach((template: any) =>
+  templates.forEach((template: ITemplate) =>
     selectOptions.push({
       value: template.id,
       label: template.title,
@@ -135,47 +136,50 @@ const Form = (props: IProps): JSX.Element => {
     <>
       <S.Config>
         {isGlobalDataPage && (
-          <S.SubscribeWrapper>
-            <S.Heading>Subscribe to data</S.Heading>
-            <S.SubscribeContent>
-              <S.SubscribeText>
+          <S.SectionContent>
+            <S.SubscribeWrapper>
+              <S.Heading>Subscribe to data</S.Heading>
+              <S.Text>
                 If you want to get any Global {selected.title} Pages on this site automatically, you can do so by
                 selecting the respective categories.
-              </S.SubscribeText>
+              </S.Text>
               {configFormData && configFormData.import && getCategoryLabels()}
               <S.StyledButton type="button" buttonStyle="text" icon="addCircle" onClick={toggleModal}>
                 Add Category
               </S.StyledButton>
-            </S.SubscribeContent>
-          </S.SubscribeWrapper>
+            </S.SubscribeWrapper>
+          </S.SectionContent>
         )}
-        <S.Heading>Detail page configuration</S.Heading>
-        <FieldsBehavior
-          title="Default URL parent for detail template"
-          name="defaultParent"
-          fieldType="AsyncSelect"
-          site={currentSite}
-          entity={"pages"}
-          value={configFormData && configFormData.defaultParent}
-          onChange={setDefaultParent}
-          options={{ excludeDetailPages: true }}
-        />
-        <FieldsBehavior
-          title="Modifiable in page"
-          name="defaultParent"
-          fieldType="ToggleField"
-          value={(configFormData && configFormData.modifiableOnPage) || false}
-          checked={(configFormData && configFormData.modifiableOnPage) || false}
-          onChange={setModifiableOnPage}
-        />
-        <FieldsBehavior
-          title="Meta robots index default"
-          name="indexDefault"
-          fieldType="RadioGroup"
-          value={(configFormData && configFormData.indexDefault) || false}
-          options={indexDefaultOptions}
-          onChange={setIndexDefault}
-        />
+        <S.SectionContent>
+          <S.Heading>Detail page configuration</S.Heading>
+          <FieldsBehavior
+            title="Default URL parent for detail template"
+            name="defaultParent"
+            fieldType="AsyncSelect"
+            site={currentSite}
+            entity={"pages"}
+            value={configFormData && configFormData.defaultParent}
+            onChange={setDefaultParent}
+            options={{ excludeDetailPages: true }}
+          />
+          <FieldsBehavior
+            title="Modifiable in page"
+            name="defaultParent"
+            fieldType="ToggleField"
+            value={(configFormData && configFormData.modifiableOnPage) || false}
+            checked={(configFormData && configFormData.modifiableOnPage) || false}
+            onChange={setModifiableOnPage}
+          />
+          <FieldsBehavior
+            title="Meta robots index default"
+            name="indexDefault"
+            fieldType="RadioGroup"
+            value={(configFormData && configFormData.indexDefault) || false}
+            options={indexDefaultOptions}
+            onChange={setIndexDefault}
+          />
+        </S.SectionContent>
+        <TemplateConfig templates={templates} />
       </S.Config>
       <Modal
         isOpen={isOpen}

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

@@ -21,13 +21,12 @@ const SubscribeWrapper = styled.div`
   position: relative;
 `;
 
-const SubscribeContent = styled.div`
+const SectionContent = styled.div`
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
   margin-bottom: ${(p) => p.theme.spacing.m};
-  padding-bottom: ${(p) => p.theme.spacing.m};
 `;
 
-const SubscribeText = styled.div`
+const Text = styled.div`
   ${(p) => p.theme.textStyle.uiM};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   width: calc(${(p) => p.theme.spacing.l} * 12);
@@ -48,8 +47,8 @@ export {
   Config,
   ModalContent,
   SubscribeWrapper,
-  SubscribeContent,
-  SubscribeText,
+  SectionContent,
+  Text,
   StyledButton,
   CategoriesWrapper,
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import { IRootState, ISite } from "@ax/types";
+import { IRootState, ISite, ITemplate } from "@ax/types";
 import { getSchemaThumbnails, getTemplateThumbnails } from "@ax/helpers";
 
 import Card from "./Card";
@@ -9,7 +9,7 @@ import Form from "./Form";
 
 import * as S from "./style";
 
-const ConfigPack = (props: any): JSX.Element => {
+const ConfigPack = (props: IProps): JSX.Element => {
   const { selected, currentSiteInfo } = props;
   const { title, description, categories, templates, modules, structuredData } = selected;
   const isFromPage = templates && templates.length > 0;
@@ -48,7 +48,7 @@ const ConfigPack = (props: any): JSX.Element => {
                 );
               })}
             {templates &&
-              templates.map((template: any, key: number) => {
+              templates.map((template: ITemplate, key: number) => {
                 const thumbnails = getTemplateThumbnails(template.id, currentSiteInfo.theme);
                 return (
                   <Card
@@ -77,4 +77,4 @@ const mapStateToProps = (state: IRootState) => ({
   currentSiteInfo: state.sites.currentSiteInfo,
 });
 
-export default connect(mapStateToProps, null)(ConfigPack);
+export default connect(mapStateToProps)(ConfigPack);