@griddo/ax 1.62.8 → 1.63.2

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);

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

@@ -31,6 +31,7 @@ const DataPacks = (props: IProps): JSX.Element => {
     addDataPacks,
     deleteSiteDataPack,
     activatedDataPacks,
+    routerAction,
   } = props;
 
   const isFromPage = selected && selected.templates && selected.templates.length > 0;
@@ -55,8 +56,9 @@ const DataPacks = (props: IProps): JSX.Element => {
   }, [getSiteDataPacks, getDataPacksCategories]);
 
   useEffect(() => {
-    setSelected(null);
+    if (routerAction !== "POP") setSelected(null);
     getActivatedPacks();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [getActivatedPacks, setSelected]);
 
   const deactivateDataPack = (force = false) => {
@@ -212,6 +214,7 @@ interface IProps {
   selected: any;
   form: any;
   activatedDataPacks: IDataPack[];
+  routerAction: string;
   getSiteDataPacks: (queryParams?: string) => void;
   setSelected: (dataPack?: any) => void;
   updateDataPack: (dataPack?: any) => void;
@@ -237,6 +240,7 @@ const mapStateToProps = (state: IRootState) => ({
   selected: state.dataPacks.selected,
   form: state.dataPacks.configFormData,
   activatedDataPacks: state.dataPacks.activated,
+  routerAction: state.router.action,
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(DataPacks);

package/src/modules/Settings/{Analytics → SeoAnalyticsSettings/Analytics}/index.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IAnalytics, IRootState } from "@ax/types";
+import { IAnalytics, INavItem, IRootState } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { analyticsActions } from "@ax/containers/Analytics";
-import { MainWrapper, Loading } from "@ax/components";
+import { MainWrapper, Loading, Nav } from "@ax/components";
 import { useIsDirty } from "@ax/hooks";
 import { RouteLeavingGuard } from "@ax/guards";
 
@@ -13,6 +13,8 @@ import * as S from "./style";
 
 const Analytics = (props: IProps): JSX.Element => {
   const {
+    navItems,
+    currentNavItem,
     isSaving,
     isLoading,
     analytics,
@@ -33,7 +35,7 @@ const Analytics = (props: IProps): JSX.Element => {
   useEffect(() => {
     setScriptCode(analytics.scriptCode);
     setShowWarning(!analytics.siteScriptCodeExists);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
 
   const handleSave = async () => {
@@ -55,24 +57,29 @@ const Analytics = (props: IProps): JSX.Element => {
   );
 
   const analyticsSettings = (
-    <S.ContentWrapper>
+    <>
       {showWarning ? (
         <Warning setShowWarning={setShowWarning} />
       ) : (
-          <S.AnalyticsWrapper>
-            <ScriptCode scriptCode={scriptCode} setScriptCode={setScriptCode} />
-            {analytics.dimensions && <Dimensions dimensions={analytics.dimensions} />}
-            {analytics.groups && <Groups groups={analytics.groups} />}
-          </S.AnalyticsWrapper>
+        <S.AnalyticsWrapper>
+          <ScriptCode scriptCode={scriptCode} setScriptCode={setScriptCode} />
+          {analytics.dimensions && <Dimensions dimensions={analytics.dimensions} />}
+          {analytics.groups && <Groups groups={analytics.groups} />}
+        </S.AnalyticsWrapper>
       )}
-    </S.ContentWrapper>
+    </>
   )
 
   return (
     <>
       <RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
       <MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps}>
-        {isLoading ? <Loading /> : analyticsSettings}
+        <S.Wrapper>
+          <Nav current={currentNavItem} items={navItems} onClick={setRoute} />
+          <S.ContentWrapper>
+            {isLoading ? <Loading /> : analyticsSettings}
+          </S.ContentWrapper>
+        </S.Wrapper>
       </MainWrapper>
     </>
   );
@@ -92,6 +99,8 @@ const mapDispatchToProps = {
 };
 
 interface IAnalyticsProps {
+  navItems: INavItem[];
+  currentNavItem: INavItem;
   isSaving: boolean;
   isLoading: boolean;
   analytics: IAnalytics;

package/src/modules/Settings/{Analytics → SeoAnalyticsSettings/Analytics}/style.tsx

@@ -1,5 +1,10 @@
 import styled from "styled-components";
 
+const Wrapper = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
 const Heading = styled.div`
   ${(p) => p.theme.textStyle.headingXS};
   color: ${p => p.theme.color.textHighEmphasis};
@@ -92,6 +97,7 @@ const ContentType = styled.div`
 `;
 
 export {
+  Wrapper,
   Heading,
   Description,
   WarningHeading,

package/src/modules/Settings/{SeoSettings → SeoAnalyticsSettings}/index.tsx

@@ -1,16 +1,23 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
+
 import Redirects from "../../Redirects";
+import Analytics from "./Analytics";
 
 const navItems = [
   {
     title: "SEO",
-    path: "/sites/settings/seo-settings",
+    path: "/sites/settings/seo",
     component: Redirects,
   },
+  {
+    title: "Analytics",
+    path: "/sites/settings/analytics",
+    component: Analytics
+  },
 ];
 
-const SeoSettings = (): JSX.Element => {
+const SeoAnalyticsSettings = (): JSX.Element => {
   return (
     <Switch>
       {navItems.map((item, index) => (
@@ -19,7 +26,7 @@ const SeoSettings = (): JSX.Element => {
         </Route>
       ))}
     </Switch>
-  );
+  )
 };
 
-export default SeoSettings;
+export default SeoAnalyticsSettings;

package/src/react-app-env.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="node" />
-/// <reference types="react" />
-/// <reference types="react-dom" />
 
 declare namespace NodeJS {
   interface ProcessEnv {

package/src/routes/publicRoutes.tsx

@@ -1,11 +1,13 @@
 import ResetPass from "./../modules/ResetPass";
 import CreatePass from "./../modules/CreatePass";
 import Login from "./../modules/Login";
+import PublicPreview from "./../modules/PublicPreview";
 
 const publicRoutes = [
   { path: "/login", component: Login, name: "Login", hideNav: true },
   { path: "/new-password/:id/:token", component: ResetPass, name: "Reset Password", hideNav: true },
-  { path: "/set-password/:id/:token", component: CreatePass, name: "Create Password", hideNav: true }
+  { path: "/set-password/:id/:token", component: CreatePass, name: "Create Password", hideNav: true },
+  { path: "/page-preview/:id/:entity", component: PublicPreview, name: "Preview", hideNav: true },
 ];
 
 export default publicRoutes;

package/src/routes/site.tsx

@@ -7,8 +7,8 @@ import ContentTypes from "./../modules/Settings/ContentTypes";
 import Settings from "./../modules/Settings";
 import CategoriesList from "./../modules/Categories/CategoriesList";
 import StructuredData from "./../modules/StructuredData";
-import SeoSettings from "./../modules/Settings/SeoSettings";
-import Analytics from "./../modules/Settings/Analytics";
+import SeoAnalyticsSettings from "./../modules/Settings/SeoAnalyticsSettings";
+import TemplateEditor from "../modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor";
 
 const BASE_PATH = "/sites";
 
@@ -60,6 +60,14 @@ export default [
     hideNav: true,
     isEditor: true,
   },
+  {
+    path: `${BASE_PATH}/settings/content-types/editor`,
+    component: TemplateEditor,
+    name: "Template Editor",
+    showInNav: false,
+    hideNav: true,
+    isEditor: true,
+  },
   {
     path: `${BASE_PATH}/settings`,
     component: null,
@@ -81,14 +89,9 @@ export default [
             name: "Content types",
           },
           {
-            path: `${BASE_PATH}/settings/seo-settings`,
-            component: SeoSettings,
-            name: "SEO Settings",
-          },
-          {
-            path: `${BASE_PATH}/settings/analytics`,
-            component: Analytics,
-            name: "Analytics",
+            path: `${BASE_PATH}/settings/seo`,
+            component: SeoAnalyticsSettings,
+            name: "SEO & Analytics",
           },
         ],
       },
@@ -96,4 +99,5 @@ export default [
   },
   { path: `${BASE_PATH}/settings/languages`, component: Settings, name: "Languages", showInNav: false },
   { path: `${BASE_PATH}/settings/social`, component: Settings, name: "Social", showInNav: false },
+  { path: `${BASE_PATH}/settings/analytics`, component: SeoAnalyticsSettings, name: "Analytics", showInNav: false },
 ];

package/src/types/index.tsx

@@ -687,6 +687,7 @@ export interface IRedirect {
   to: { pageId?: number; url: string; linkTo?: number; href?: string };
   site?: { siteId: number | null; siteName: string | null; siteUrl: string | null };
   domain?: string;
+  date?: string;
 }
 
 export interface IAnalytics {
@@ -709,6 +710,14 @@ export interface IDimensionsGroup {
   templates?: string;
 }
 
+export interface ITemplate {
+  dataPacks: string[],
+  id: string,
+  thumbnails: Record<string, string>,
+  title: string,
+  type: { label: string, value: string, mode: string },
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"

package/tsconfig.json

@@ -17,6 +17,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "useUnknownInCatchVariables": false,
     "noEmit": true,
     "jsx": "react",
     "types": [