@griddo/ax 1.75.154 → 1.75.155

package/config/jest/componentsMock.js

@@ -1,5 +1,10 @@
 module.exports = {
   SiteProvider: jest.fn(),
+  themes: {
+    label: "theme",
+    value: "1",
+    default: false,
+  },
   schemas: {
     key: "schema definition",
     all: {      

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.154",
+  "version": "1.75.155",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a995dfad2b21ceaa25ffc77963eb516246d3fb79"
+  "gitHead": "b2f238f478cf72c67b50375619d668e0dc149e7e"
 }

package/src/__tests__/components/ConfigPanel/GlobalPageForm/GlobalPageForm.test.tsx

@@ -125,8 +125,8 @@ describe("GlobalPageForm component rendering", () => {
       { store }
     );
 
-    const fieldsBehaviorWrapper = screen.getByTestId("fields-behavior-wrapper");
-    expect(fieldsBehaviorWrapper).toBeTruthy();
+    const fieldGroupWrapper = screen.getByTestId("field-group-wrapper");
+    expect(fieldGroupWrapper).toBeTruthy();
   });
 });
 

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { themes } from "components";
 
 import { Icon, NoteField, Tabs } from "@ax/components";
 import { ISchema } from "@ax/types";
@@ -32,6 +33,57 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
     options: { excludeDetailPages: true },
   };
 
+  const themeField = {
+    title: "Page Options",
+    type: "FieldGroup",
+    key: "pageOptions",
+    collapsed: false,
+    fields: [
+      {
+        title: "Theme",
+        type: "Select",
+        key: "theme",
+        options: themes,
+        helptext: "It affects the whole page: Header, Content, and footer.",
+      },
+      {
+        title: "Customize header and footer themes",
+        type: "ConditionalField",
+        key: "customizeThemes",
+        defaultValue: false,
+        mandatory: true,
+        options: [
+          {
+            value: true,
+            title: "Yes",
+            name: "Yes",
+          },
+          {
+            value: false,
+            title: "No",
+            name: "No",
+          },
+        ],
+        fields: [
+          {
+            title: "Header Theme",
+            type: "Select",
+            key: "headerTheme",
+            options: themes,
+            condition: true,
+          },
+          {
+            title: "Footer Theme",
+            type: "Select",
+            key: "footerTheme",
+            options: themes,
+            condition: true,
+          },
+        ],
+      },
+    ],
+  };
+
   const handleRestoreHeader = () =>
     actions.restorePageNavigationAction && actions.restorePageNavigationAction("header");
 
@@ -46,12 +98,20 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
       </S.NoteWrapper>
       {selectedTab === "content" && header === 0 && (
         <S.FieldWrapper>
-          This page doesn&apos;t have a header. Click <S.Link data-testid="header-link" onClick={handleRestoreHeader}>here</S.Link> to restore it.
+          This page doesn&apos;t have a header. Click{" "}
+          <S.Link data-testid="header-link" onClick={handleRestoreHeader}>
+            here
+          </S.Link>{" "}
+          to restore it.
         </S.FieldWrapper>
       )}
       {selectedTab === "content" && footer === 0 && (
         <S.FieldWrapper>
-          This page doesn&apos;t have a footer. Click <S.Link data-testid="footer-link" onClick={handleRestoreFooter}>here</S.Link> to restore it.
+          This page doesn&apos;t have a footer. Click{" "}
+          <S.Link data-testid="footer-link" onClick={handleRestoreFooter}>
+            here
+          </S.Link>{" "}
+          to restore it.
         </S.FieldWrapper>
       )}
       {selectedTab === "content" && (
@@ -66,15 +126,26 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
         </S.DataWrapper>
       )}
       {selectedTab === "config" && (
-        <ConnectedField
-          selectedTab={selectedTab}
-          key="parent"
-          objKey="parent"
-          field={field}
-          componentType={schema.schemaType}
-          isPage={true}
-          isGlobal={true}
-        />
+        <>
+          <ConnectedField
+            selectedTab={selectedTab}
+            key="parent"
+            objKey="parent"
+            field={field}
+            componentType={schema.schemaType}
+            isPage={true}
+            isGlobal={true}
+          />
+          <ConnectedField
+            selectedTab={selectedTab}
+            key="pageOptions"
+            objKey="pageOptions"
+            field={themeField}
+            componentType={schema.schemaType}
+            isPage={true}
+            isGlobal={true}
+          />
+        </>
       )}
     </section>
   );

package/src/components/Fields/ConditionalField/index.tsx

@@ -4,13 +4,15 @@ import { RadioGroup } from "@ax/components";
 import * as S from "./style";
 
 const ConditionalField = (props: IConditionalFieldProps) => {
-  const { value, options, innerFields, onChange } = props;
+  const { value, options, innerFields, onChange, defaultValue } = props;
+
+  const safeValue = value === undefined ? defaultValue : value;
 
   const handleChange = (newValue: any) => onChange(newValue);
 
   return (
     <S.Wrapper>
-      <RadioGroup name="radio" value={value} options={options} onChange={handleChange} />
+      <RadioGroup name="radio" value={safeValue} options={options} onChange={handleChange} />
       <S.Content data-testid="conditionalFieldContent">
         {innerFields &&
           innerFields.map((item: any) => {
@@ -24,8 +26,9 @@ const ConditionalField = (props: IConditionalFieldProps) => {
 export default ConditionalField;
 
 interface IConditionalFieldProps {
-  value: string | boolean;
+  value?: string | boolean;
   options: any[];
   innerFields: any;
   onChange: (value: any) => void;
+  defaultValue?: string | boolean;
 }

package/src/components/Fields/RadioGroup/index.tsx

@@ -43,7 +43,7 @@ const RadioGroup = (props: IRadioGroupProps): JSX.Element => {
 
 interface IRadioGroupProps {
   name: string;
-  value: string | boolean;
+  value?: string | boolean;
   options: IRadioFieldProps[];
   error?: boolean;
   onChange: (value: string | boolean) => void;

package/src/modules/PageEditor/Editor/index.tsx

@@ -44,7 +44,8 @@ const Editor = (props: IProps) => {
     content,
   } = props;
 
-  const { header, footer } = content;
+  const { header, footer, theme: pageTheme } = content;
+  const { theme: siteTheme } = site;
 
   const actions = {
     deleteModuleAction: deleteModule,
@@ -85,7 +86,7 @@ const Editor = (props: IProps) => {
           setHistoryPush={setHistoryPush}
           isReadOnly={isReadOnly}
           userEditing={userEditing}
-          theme={site.theme}
+          theme={pageTheme ? pageTheme : siteTheme}
           lastElementAddedId={lastElementAddedId}
           header={header}
           footer={footer}

package/src/schemas/pages/Page.tsx

@@ -1,3 +1,5 @@
+import { themes } from "components";
+
 export default {
   schemaType: "page",
   displayName: "Page",
@@ -48,6 +50,56 @@ export default {
           key: "template",
           type: "template",
         },
+        {
+          title: "Page Options",
+          type: "FieldGroup",
+          key: "pageOptions",
+          collapsed: false,
+          fields: [
+            {
+              title: "Theme",
+              type: "Select",
+              key: "theme",
+              options: themes,
+              helptext: "It affects the whole page: Header, Content, and footer.",
+            },
+            {
+              title: "Customize header and footer themes",
+              type: "ConditionalField",
+              key: "customizeThemes",
+              mandatory: true,
+              defaultValue: false,
+              options: [
+                {
+                  value: true,
+                  title: "Yes",
+                  name: "Yes",
+                },
+                {
+                  value: false,
+                  title: "No",
+                  name: "No",
+                },
+              ],
+              fields: [
+                {
+                  title: "Header Theme",
+                  type: "Select",
+                  key: "headerTheme",
+                  options: themes,
+                  condition: true,
+                },
+                {
+                  title: "Footer Theme",
+                  type: "Select",
+                  key: "footerTheme",
+                  options: themes,
+                  condition: true,
+                },
+              ],
+            },
+          ],
+        },
       ],
     },
     {
@@ -152,8 +204,8 @@ export default {
               type: "AnalyticsField",
               key: "dimensions",
               collapsed: true,
-            }
-          ]
+            },
+          ],
         },
         {
           title: "Social Media",
@@ -200,5 +252,9 @@ export default {
     socialDescription: "",
     socialImage: {},
     dimensions: {},
+    theme: null,
+    customizeThemes: false,
+    headerTheme: null,
+    footerTheme: null,
   },
 };