@griddo/ax 1.65.12 → 1.65.13

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

@@ -33,7 +33,6 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
 
   const isPage = entity === "pages";
   const isCategories = entity === "categories";
-
   useEffect(() => {
     const getItems = async () => {
       let data = [];
@@ -123,21 +122,23 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
   const className = error ? "react-select-error" : "";
 
   return (
-    <S.StyledSelect
-      name={name}
-      value={getObjectValue(value, state.items) || ""}
-      cacheOptions
-      loadOptions={loadOptions}
-      defaultOptions={state.items}
-      onInputChange={handleInputChange}
-      onChange={handleChange}
-      classNamePrefix="react-select"
-      error={error}
-      isDisabled={disabled}
-      className={className}
-      mandatory={mandatory}
-      hasEmptyOption={state.hasEmptyOption}
-    />
+    <div data-testid="asyncSelect">
+      <S.StyledSelect
+        name={name}
+        value={getObjectValue(value, state.items) || ""}
+        cacheOptions
+        loadOptions={loadOptions}
+        defaultOptions={state.items}
+        onInputChange={handleInputChange}
+        onChange={handleChange}
+        classNamePrefix="react-select"
+        error={error}
+        isDisabled={disabled}
+        className={className}
+        mandatory={mandatory}
+        hasEmptyOption={state.hasEmptyOption}
+      />
+    </div>
   );
 };
 
@@ -159,7 +160,7 @@ interface IAsyncSelectProps {
   error?: boolean;
   disabled?: boolean;
   onChange: (value: string) => void;
-  site: ISite;
+  site: ISite | null;
   lang: string;
   selectedContent: any;
   mandatory?: boolean;

package/src/components/Fields/HeadingField/index.test.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import HeadingField from "./index";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "../../../themes/theme.json";
+import { render, screen, cleanup } from "@testing-library/react";
+
+afterEach(cleanup);
+
+const defaultProps = {
+  value: {
+    content: "",
+    tag: "",
+  },
+  title: "",
+  onChange: jest.fn(),
+  options: [
+    {
+      value: "",
+      label: "",
+    },
+  ],
+  showAdvanced: false,
+};
+
+describe("HeadingField component rendering", () => {
+  it("should render the component with only TextField", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HeadingField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const textFieldContainer = screen.getByTestId("textFieldContainer");
+
+    expect(textFieldContainer).toBeTruthy();
+  });
+  it("should render the component complete", () => {
+    const props = {
+      value: {
+        content: "value1",
+        tag: "tagValue",
+      },
+      title: "Title",
+      onChange: jest.fn(),
+      options: [
+        {
+          value: "value1",
+          label: "Value 1",
+        },
+      ],
+      showAdvanced: true,
+    };
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <HeadingField {...props} />
+      </ThemeProvider>
+    );
+
+    const textFieldContainer = screen.getByTestId("textFieldContainer");
+    const textFieldAdvancedWrapper = screen.getByTestId("textFieldAdvancedWrapper");
+    const contentWrapper = screen.getByTestId("contentWrapper");
+    const selectComponent = screen.getByTestId("selectComponent");
+
+    expect(textFieldContainer).toBeTruthy();
+    expect(textFieldAdvancedWrapper).toBeTruthy();
+    expect(contentWrapper).toBeTruthy();
+    expect(selectComponent).toBeTruthy();
+  });
+});

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

@@ -16,7 +16,7 @@ const HeadingField = (props: IHeadingFieldProps): JSX.Element => {
     <>
       <TextField {...props} value={contentValue} onChange={handleChange} />
       {showAdvanced && (
-        <S.AdvancedWrapper>
+        <S.AdvancedWrapper data-testid="textFieldAdvancedWrapper">
           <FieldsBehavior fieldType="Select" options={options} value={value.tag} onChange={handleSelectChange} />
         </S.AdvancedWrapper>
       )}

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

@@ -3,15 +3,28 @@ import React, { useState } from "react";
 import * as S from "./style";
 
 const Select = (props: ISelectProps): JSX.Element => {
-  const { name, value, options, error, defaultValue, placeholder, isMulti, disabled, type, mandatory, onChange, alignRight } = props;
+  const {
+    name,
+    value,
+    options,
+    error,
+    defaultValue,
+    placeholder,
+    isMulti,
+    disabled,
+    type,
+    mandatory,
+    onChange,
+    alignRight,
+  } = props;
   const className = error ? `react-select-error ${type}` : type;
   const emptyOption = { value: null, label: placeholder || "Empty" };
-  
+
   const isMandatory = !mandatory && type !== "inline";
   const [hasEmptyOption, setHasEmptyOption] = useState(isMandatory);
-  
-  const optionValues: any = hasEmptyOption ? [emptyOption , ...options] : options;
-  
+
+  const optionValues: any = hasEmptyOption ? [emptyOption, ...options] : options;
+
   const handleChange = (selectedValue: IOptionProps) => {
     onChange(selectedValue.value);
   };
@@ -20,7 +33,7 @@ const Select = (props: ISelectProps): JSX.Element => {
     const inputValue = newValue.replace(/\W/g, "");
     setHasEmptyOption(isMandatory && inputValue.length === 0);
     return inputValue;
-  }
+  };
 
   // tslint:disable-next-line: no-shadowed-variable
   const getObjectValue = (value: string, options: IOptionProps[]) => {
@@ -29,28 +42,30 @@ const Select = (props: ISelectProps): JSX.Element => {
     } else {
       return options.find((option) => option.value === value);
     }
-  }
+  };
 
   const searchable = type === "inline" ? false : true;
 
   return (
-    <S.StyledSelect
-      name={name}
-      value={getObjectValue(value, optionValues)}
-      options={optionValues}
-      isMulti={isMulti}
-      isDisabled={disabled}
-      placeholder={placeholder}
-      defaultValue={defaultValue}
-      className={className}
-      classNamePrefix="react-select"
-      error={error}
-      onChange={handleChange}
-      isSearchable={searchable}
-      hasEmptyOption={hasEmptyOption}
-      onInputChange={handleInputChange}
-      alignRight={alignRight}
-    />
+    <div data-testid="selectComponent">
+      <S.StyledSelect
+        name={name}
+        value={getObjectValue(value, optionValues)}
+        options={optionValues}
+        isMulti={isMulti}
+        isDisabled={disabled}
+        placeholder={placeholder}
+        defaultValue={defaultValue}
+        className={className}
+        classNamePrefix="react-select"
+        error={error}
+        onChange={handleChange}
+        isSearchable={searchable}
+        hasEmptyOption={hasEmptyOption}
+        onInputChange={handleInputChange}
+        alignRight={alignRight}
+      />
+    </div>
   );
 };
 

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

@@ -6,7 +6,7 @@ import { isReqOk } from "@ax/helpers";
 import { IPage, IUrlField, Field, ISelectOption } from "@ax/types";
 import { pages as pagesApi } from "@ax/api";
 import PageFinder from "./PageFinder";
-import { findAnchorsFromPage } from "./utils";
+import { findAnchorsFromPage, findAnchorsFromTab, findTabsFromPage } from "./utils";
 
 import * as S from "./style";
 
@@ -14,8 +14,11 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
   const { value, onChange, showAdvanced, handlePanel, inFloatingPanel, disabled, handleValidation, validators } = props;
   const { isOpen, toggleModal } = useModal();
   const [anchorOptions, setAnchorOptions] = useState<ISelectOption[]>([]);
+  const [tabOptions, setTabOptions] = useState<ISelectOption[]>([]);
   const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [isTabsVisible, setTabsVisible] = useState<boolean>(false);
   const [internalPageName, setInternalPageName] = useState(null);
+  const [pageData, setPageData] = useState<IPage | null>(null);
 
   const pageID = value && value.linkTo ? value.linkTo : null;
 
@@ -24,17 +27,23 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
       const response = await pagesApi.getPageInfo(id);
       if (isReqOk(response.status)) {
         const { data } = response;
+        setPageData(data);
         setInternalPageName(data.title);
 
         onChange({
           ...value,
           ...(!data.follow && { noFollow: true }),
-          ...(!value?.title && { title: data.title })
+          ...(!value?.title && { title: data.title }),
         });
 
-        const anchors: ISelectOption[] = findAnchorsFromPage(data);
+        const tabs: ISelectOption[] = findTabsFromPage(data);
+        setTabOptions(tabs);
+        if (tabs.length > 0) setTabsVisible(true);
+
+        const anchors: ISelectOption[] =
+          tabs.length && value?.subSlug ? findAnchorsFromTab(data, value.subSlug) : findAnchorsFromPage(data);
         setAnchorOptions(anchors);
-        if (anchors.length > 0) setIsVisible(true);
+        if (anchors.length > 0 && (!tabs.length || (tabs.length && value?.subSlug))) setIsVisible(true);
       } else {
         setAnchorOptions([]);
       }
@@ -42,6 +51,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 
     let isMounted = true;
     if (isMounted && pageID) {
+      setTabsVisible(false);
       setIsVisible(false);
       getPageInfo(pageID);
     }
@@ -79,6 +89,17 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
 
   const handleAnchorChange = (newValue: string) => onChange({ ...value, anchor: newValue });
 
+  const handleTabChange = (newValue: string) => {
+    onChange({ ...value, subSlug: newValue });
+    if (pageData && newValue) {
+      const anchors: ISelectOption[] = findAnchorsFromTab(pageData, newValue);
+      setAnchorOptions(anchors);
+      if (anchors.length > 0) setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+
   const validator = { format: "fullURL" };
   const defensiveHref = value ? value.href : "";
 
@@ -132,6 +153,19 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
   return (
     <>
       {field}
+      {value && value.linkTo && isTabsVisible && (
+        <S.AnchorWrapper>
+          <FieldsBehavior
+            title="Tab"
+            options={tabOptions}
+            name="tab"
+            fieldType="Select"
+            value={value.subSlug}
+            onChange={handleTabChange}
+            placeholder="Select Tab"
+          />
+        </S.AnchorWrapper>
+      )}
       {value && value.linkTo && isVisible && (
         <S.AnchorWrapper>
           <FieldsBehavior

package/src/components/Fields/UrlField/utils.tsx

@@ -1,6 +1,58 @@
+import { getSchema } from "@ax/helpers";
 import { IPage, ISelectOption } from "@ax/types";
 
+const findSchemaComponentArrays = (component: string) => {
+  const keys: string[] = [];
+  const schemaTabs = getSchema(component).configTabs;
+  schemaTabs.forEach((tab: any) => {
+    tab.fields.forEach((field: any) => {
+      if (field.type === "ComponentArray") {
+        keys.push(field.key);
+      }
+    });
+  });
+  return keys;
+};
+
+const findAnchorsFromModule = (module: any) => {
+  if (!module) return [];
+  let options: ISelectOption[] = [];
+
+  if (module.anchorID && module.anchorID.trim() !== "") {
+    const option = { value: module.anchorID, label: module.anchorID };
+    options.push(option);
+  }
+
+  const arrayKeys = findSchemaComponentArrays(module.component);
+  if (arrayKeys.length) {
+    arrayKeys.forEach((key: string) => {
+      module[key].forEach((element: any) => {
+        const subOptions = findAnchorsFromModule(element);
+        options = [...options, ...subOptions];
+      });
+    });
+  }
+
+  return options;
+};
+
 const findAnchorsFromPage = (page: IPage): ISelectOption[] => {
+  let options: ISelectOption[] = [];
+  const { template } = page;
+  const sections = Object.keys(template)
+    .map((key: string) => template[key])
+    .filter((value: any) => typeof value === "object" && value !== null && value.component === "Section");
+
+  sections.forEach((section: any) => {
+    section.modules.forEach((module: any) => {
+      const sectionOptions = findAnchorsFromModule(module);
+      options = [...options, ...sectionOptions];
+    });
+  });
+  return options;
+};
+
+const findTabsFromPage = (page: IPage): ISelectOption[] => {
   const options: ISelectOption[] = [];
   const { template } = page;
   const sections = Object.keys(template)
@@ -9,20 +61,10 @@ const findAnchorsFromPage = (page: IPage): ISelectOption[] => {
 
   sections.forEach((section: any) => {
     section.modules.forEach((module: any) => {
-      if (module.anchorID && module.anchorID.trim() !== "") {
-        const option = { value: module.anchorID, label: module.anchorID };
-        options.push(option);
-      }
-      if (module.elements) {
+      if (module.hasGriddoMultiPage && module.elements) {
         module.elements.forEach((element: any) => {
-          element.componentModules &&
-            Array.isArray(element.componentModules) &&
-            element.componentModules.forEach((component: any) => {
-              if (component.anchorID && component.anchorID.trim() !== "") {
-                const option = { value: component.anchorID, label: component.anchorID };
-                options.push(option);
-              }
-            });
+          const option = { value: element.sectionSlug, label: element.title };
+          options.push(option);
         });
       }
     });
@@ -30,4 +72,22 @@ const findAnchorsFromPage = (page: IPage): ISelectOption[] => {
   return options;
 };
 
-export { findAnchorsFromPage };
+const findAnchorsFromTab = (page: IPage, tabSlug: string): ISelectOption[] => {
+  let options: ISelectOption[] = [];
+  const { template } = page;
+  const sections = Object.keys(template)
+    .map((key: string) => template[key])
+    .filter((value: any) => typeof value === "object" && value !== null && value.component === "Section");
+
+  sections.forEach((section: any) => {
+    section.modules.forEach((module: any) => {
+      if (module.hasGriddoMultiPage) {
+        const tab = module.elements.find((elem: any) => elem.sectionSlug === tabSlug);
+        options = findAnchorsFromModule(tab);
+      }
+    });
+  });
+  return options;
+};
+
+export { findAnchorsFromPage, findTabsFromPage, findAnchorsFromTab };

package/src/components/FieldsBehavior/index.tsx

@@ -73,7 +73,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
   };
   return (
     <S.Wrapper error={errorField} className={wrapperClass} showTitle={showTitle} id={objKey}>
-      <S.Content error={errorField}>
+      <S.Content data-testid="contentWrapper" error={errorField}>
         <Field {...props} showAdvanced={showAdvanced} handleValidation={handleValidation} error={errorField} />
       </S.Content>
       <S.Header className="fieldHeader">

package/src/types/index.tsx

@@ -164,6 +164,7 @@ export interface IUrlField {
   noFollow?: boolean;
   anchor?: string;
   title?: string;
+  subSlug?: string;
 }
 
 export interface IHeadingField {
@@ -720,11 +721,11 @@ export interface IDimensionsGroup {
 }
 
 export interface ITemplate {
-  dataPacks: string[],
-  id: string,
-  thumbnails: Record<string, string>,
-  title: string,
-  type: { label: string, value: string, mode: string },
+  dataPacks: string[];
+  id: string;
+  thumbnails: Record<string, string>;
+  title: string;
+  type: { label: string; value: string; mode: string };
 }
 
 export type Field =