@griddo/ax 1.60.9 → 1.61.0

package/src/api/analytics.tsx

@@ -0,0 +1,78 @@
+import { IDimension, IDimensionsGroup } from "@ax/types";
+import { AxiosResponse } from "axios";
+import { template } from "./config";
+import { IServiceConfig, sendRequest } from "./utils";
+
+const SERVICES: { [key: string]: IServiceConfig } = {
+  GET_ANALYTICS: {
+    ...template,
+    endpoint: ["/site/", "/analytics"],
+    method: "GET",
+  },
+  UPDATE_SCRIPT_CODE: {
+    ...template,
+    endpoint: ["/site/", "/analytics/script"],
+    method: "PUT",
+  },
+  CREATE_DIMENSIONS: {
+    ...template,
+    endpoint: ["/analytics/dimensions/site/", "/bulk"],
+    method: "POST",
+  },
+  CREATE_DIMENSIONS_GROUPS: {
+    ...template,
+    endpoint: ["/analytics/groups/site/", "/bulk"],
+    method: "POST",
+  },
+};
+
+const getAnalytics = async (siteId: number | string): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_ANALYTICS;
+
+  SERVICES.GET_ANALYTICS.dynamicUrl = `${host}${prefix}${siteId}${suffix}`;
+
+  return sendRequest(SERVICES.GET_ANALYTICS);
+};
+
+const updateScriptCode = async (siteId: number | string, data: { scriptCode: string }): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.UPDATE_SCRIPT_CODE;
+
+  SERVICES.UPDATE_SCRIPT_CODE.dynamicUrl = `${host}${prefix}${siteId}${suffix}`;
+
+  return sendRequest(SERVICES.UPDATE_SCRIPT_CODE, { ...data });
+};
+
+const createDimensions = async (siteId: number | string, data: { dimensions: IDimension[] }): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.CREATE_DIMENSIONS;
+
+  SERVICES.CREATE_DIMENSIONS.dynamicUrl = `${host}${prefix}${siteId}${suffix}`;
+
+  return sendRequest(SERVICES.CREATE_DIMENSIONS, { ...data });
+};
+
+const createDimensionsGroups = async (siteId: number | string, data: { groups: IDimensionsGroup[] }): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.CREATE_DIMENSIONS_GROUPS;
+
+  SERVICES.CREATE_DIMENSIONS_GROUPS.dynamicUrl = `${host}${prefix}${siteId}${suffix}`;
+
+  return sendRequest(SERVICES.CREATE_DIMENSIONS_GROUPS, { ...data });
+};
+
+export default {
+  getAnalytics,
+  updateScriptCode,
+  createDimensions,
+  createDimensionsGroups
+};

package/src/api/index.tsx

@@ -15,6 +15,7 @@ import files from "./files";
 import users from "./users";
 import domains from "./domains";
 import redirects from "./redirects";
+import analytics from "./analytics";
 
 export {
   sites,
@@ -34,4 +35,5 @@ export {
   users,
   domains,
   redirects,
+  analytics
 };

package/src/api/redirects.tsx

@@ -27,6 +27,16 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: "/redirects/bulk",
     method: "DELETE",
   },
+  CREATE_REDIRECT_BULK_CHECK: {
+    ...template,
+    endpoint: "/redirect/bulk/check",
+    method: "POST",
+  },
+  CREATE_REDIRECT_BULK: {
+    ...template,
+    endpoint: "/redirect/bulk",
+    method: "POST",
+  },
 };
 
 const getRedirects = async (params: any, filters?: string) => {
@@ -34,7 +44,9 @@ const getRedirects = async (params: any, filters?: string) => {
 
   const { host, endpoint } = SERVICES.GET_REDIRECTS;
 
-  SERVICES.GET_REDIRECTS.dynamicUrl = `${host}${endpoint}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}${filters}`;
+  const filterString = filters || "";
+
+  SERVICES.GET_REDIRECTS.dynamicUrl = `${host}${endpoint}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}${filterString}`;
 
   return sendRequest(SERVICES.GET_REDIRECTS);
 };
@@ -68,4 +80,20 @@ const deleteRedirectsBulk = async (ids: number[]) => {
   return sendRequest(SERVICES.DELETE_REDIRECT_BULK, { ids });
 };
 
-export default { getRedirects, createRedirect, updateRedirect, deleteRedirect, deleteRedirectsBulk };
+const createRedirectsBulkCheck = async (redirects: any[]) => {
+  return sendRequest(SERVICES.CREATE_REDIRECT_BULK_CHECK, { redirects });
+};
+
+const createRedirectsBulk = async (redirects: any[]) => {
+  return sendRequest(SERVICES.CREATE_REDIRECT_BULK, { redirects });
+};
+
+export default {
+  getRedirects,
+  createRedirect,
+  updateRedirect,
+  deleteRedirect,
+  deleteRedirectsBulk,
+  createRedirectsBulk,
+  createRedirectsBulkCheck,
+};

package/src/components/Button/style.tsx

@@ -4,6 +4,7 @@ export const Button = styled.button`
   ${(p) => p.theme.textStyle.uiButton};
   background-color: ${(p) => p.theme.color.interactive01};
   border-radius: 4px;
+  z-index: 0;
   border: none;
   color: ${p => p.theme.colors.uiBackground02};
   min-height: calc(${(p) => p.theme.spacing.s} * 2);

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -77,7 +77,7 @@ interface IProps {
   readonly?: boolean;
   activatedModules?: string[];
   isTemplateActivated: boolean;
-  updateValue: any;
+  updateValue: (key: string, value: any, templateID?: number, slugTo?: string) => void;
   categories?: any;
   error?: IErrorItem;
   deleteError(error: IErrorItem): void;

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -32,12 +32,13 @@ export const TemplateManager = (props: IProps): JSX.Element => {
   const modulesDataPacks = activatedPacks.map((pack: IDataPack) => pack.modules).flat();
 
   const getFieldProps = (field: any) => {
-    const { key, type, whiteList = [] } = field;
+    const { key, type, whiteList = [], slugTo } = field;
     const isArr = type === "ComponentArray";
     const currentContent = isArr ? templateContent[key] : templateContent;
     const fieldObjKey = !isArr ? `${key}` : `modules`;
     const mappedField = !isArr ? { ...field, key: fieldObjKey } : field;
-    const handleUpdate = (fieldKey: string, value: any) => updateValue(fieldKey, value, templateContent.editorID);
+    const handleUpdate = (fieldKey: string, value: any) =>
+      updateValue(fieldKey, value, templateContent.editorID, slugTo);
     const error = errors.find((err: any) => err.editorID === templateContent.editorID && err.key === key);
 
     const addedModules = modulesDataPacks
@@ -98,7 +99,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
 
 interface IProps {
   template: any;
-  updateValue: (key: string, value: any, templateID?: number) => void;
+  updateValue: (key: string, value: any, templateID?: number, slugTo?: string) => void;
   goTo: any;
   objKey: string;
   pages: any;

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -84,7 +84,7 @@ const PageConnectedField = (props: any) => {
     // eslint-disable-next-line
   }, [isPageHome]);
 
-  let updateValue = (key: string, value: any, templateID?: number) => {
+  let updateValue = (key: string, value: any, templateID?: number, slugTo?: string) => {
     if (key === "parent") {
       getPageBreadcrumb(value);
     }
@@ -95,6 +95,11 @@ const PageConnectedField = (props: any) => {
       updateEditorContent(selectedEditorID, "isHome", value);
     }
 
+    if (slugTo) {
+      const slugValue = typeof value === "object" && value.content ? value.content : value;
+      updateEditorContent(selectedEditorID, slugTo, slugify(slugValue));
+    }
+
     const editorID = templateID ? templateID : selectedEditorID;
 
     updateEditorContent(editorID, key, value);

package/src/components/FieldContainer/index.tsx

@@ -8,7 +8,7 @@ import { FieldsBehavior, HiddenField } from "@ax/components";
 const FieldContainer = (props: IProps) => {
   const { selectedContent, updateValue, field, goTo, objKey, lang } = props;
 
-  const { type, key, title, hideable } = field;
+  const { type, key, title, hideable, slugTo } = field;
   const isContainer = field.type === "ComponentContainer";
 
   const hideField = () => updateValue(key, nullValue);
@@ -19,7 +19,7 @@ const FieldContainer = (props: IProps) => {
     fieldType: type,
     value: containerValue,
     hideField,
-    onChange: (e: any) => updateValue(key, e),
+    onChange: (e: any) => updateValue(key, e, undefined, slugTo),
     goTo,
     editorID: selectedContent.editorID,
     lang,

package/src/components/Fields/AnalyticsField/PageAnalytics/atoms.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import { FieldsBehavior } from "@ax/components";
+import { splitAndTrim } from "@ax/helpers";
+import { IAnalytics, IDimension } from "@ax/types";
+
+import { IState } from "..";
+import * as S from "../style";
+
+const DimensionsGroup = (props: { analytics: IAnalytics, state: IState, setDimension: (value: Record<string, string>) => void }): JSX.Element => {
+  const { analytics, state, setDimension } = props;
+  const { groupSelect, values } = state;
+  const selectedGroup = analytics.groups.find((g) => g.name === groupSelect);
+  const dimensionNames = splitAndTrim(selectedGroup?.dimensions, ";");
+  const groupDimensions = dimensionNames.map((dimensionName) => {
+    const dimension = analytics.dimensions.find((dimension) => dimension.name === dimensionName);
+    return dimension;
+  })
+
+  return (
+    <>
+      <S.FieldsDivider />
+      {groupDimensions && groupDimensions.map((dimension, idx) => (
+        dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+      ))}
+    </>
+  )
+}
+
+const DimensionsSelection = (props: { analytics: IAnalytics, state: IState, setDimension: (value: Record<string, string>) => void }): JSX.Element => {
+  const { analytics, state, setDimension } = props;
+  const { dimensionsSelect, values } = state;
+  const selectedDimensions = analytics.dimensions.filter((d) => dimensionsSelect.includes(d.name));
+
+  return (
+    <>
+      {selectedDimensions.length ? <S.FieldsDivider /> : <></>}
+      {selectedDimensions && selectedDimensions.map((dimension, idx) => (
+        <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+      ))}
+    </>
+  )
+}
+
+const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Record<string, string>) => void, values: Record<string, string> }) => {
+  const { dimension, setDimension, values } = props;
+  const dimensionValues = splitAndTrim(dimension?.values, ";");
+  const options = dimensionValues.map((option) => ({ label: option, value: option }));
+  const handleOnChange = (value: string) => {
+    dimension && setDimension({ [dimension.name]: value });
+  }
+
+  const isNullValue = dimensionValues.includes("null");
+
+  return isNullValue ? (
+    <FieldsBehavior
+      title={dimension?.name}
+      fieldType="TextField"
+      value={dimension ? values[dimension.name] : ""}
+      onChange={handleOnChange}
+      placeholder="Type a variable"
+    />
+  ) : (
+    <FieldsBehavior
+      title={dimension?.name}
+      fieldType="Select"
+      options={options}
+      value={dimension ? values[dimension.name] : ""}
+      onChange={handleOnChange}
+      placeholder="Select variable"
+    />
+  )
+}
+
+export { DimensionsGroup, DimensionsSelection };

package/src/components/Fields/AnalyticsField/PageAnalytics/index.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useState } from "react";
+
+import { NoteField, FieldsBehavior, FieldGroup } from "@ax/components";
+
+import { IAnalyticsFieldProps, IState } from "..";
+import { DimensionsGroup, DimensionsSelection } from "./atoms";
+import * as S from "../style";
+
+const PageAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
+  const {
+    value,
+    onChange,
+    analytics,
+  } = props;
+
+  const initialState = {
+    contentSelect: "",
+    groupSelect: "",
+    dimensionsSelect: [],
+    values: {}
+  }
+
+  const [state, setState] = useState<IState>(value || initialState);
+
+  useEffect(() => {
+    onChange && onChange(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state]);
+
+  const handleContentSelect = (contentSelect: string) => {
+    setState({ ...initialState, contentSelect });
+  }
+
+  const handleGroupSelect = (groupSelect: string) => {
+    setState((state: IState) => ({ ...state, groupSelect, values: {} }));
+  }
+
+  const handleDimensionsSelect = (selection: string[]) => {
+    const values: Record<string, string> = {};
+    let dimensionsSelect = selection;
+
+    if (selection.includes("all")) {
+      dimensionsSelect = analytics.dimensions.map((dimension) => dimension.name);
+    }
+
+    dimensionsSelect.forEach((dimension) => values[dimension] = state.values[dimension]);
+    setState((state: IState) => ({ ...state, dimensionsSelect, values }));
+  }
+
+  const setDimension = (value: Record<string, string>) => {
+    setState((state: IState) => ({ ...state, values: { ...state.values, ...value } }));
+  }
+
+  const contentOptions = [
+    {
+      label: "Dimensions Group",
+      value: "group"
+    },
+    {
+      label: "Individual Dimensions",
+      value: "individual"
+    },
+  ]
+
+  const groupOptions: { label: string, value: string }[] = [];
+  analytics.groups?.forEach((group) => {
+    groupOptions.push({ label: group.name, value: group.name })
+  });
+
+  const noteText = (
+    <>
+      Select <strong>Dimension Group</strong> if you want to select one of the groups you created in the global settings (based on the page content).<br /><br />Select <strong>Individual Dimensions</strong> if you want to select the dimensions to track manually.
+    </>
+  );
+
+  const isGroup = state.contentSelect === "group";
+  const isIndividual = state.contentSelect === "individual";
+
+  const dimensionOptions = [
+    {
+      name: "all",
+      value: "all",
+      title: "Select All",
+    },
+  ];
+  analytics.dimensions.forEach((dimension) => {
+    const option = {
+      name: dimension.name,
+      value: dimension.name,
+      title: dimension.name,
+    }
+    dimensionOptions.push(option);
+  });
+
+  return (
+    <FieldGroup title="Analytics Data Layer">
+      <NoteField value={{ text: noteText }} />
+      <S.FieldWrapper>
+        <FieldsBehavior
+          title="Content Dimension"
+          fieldType="Select"
+          options={contentOptions}
+          value={state.contentSelect}
+          onChange={handleContentSelect}
+          placeholder="Select Dimensions Options"
+        />
+      </S.FieldWrapper>
+      {isGroup && (
+        <>
+          <FieldsBehavior
+            title="Select Group"
+            fieldType="Select"
+            options={groupOptions}
+            value={state.groupSelect}
+            onChange={handleGroupSelect}
+            placeholder="Select Group"
+          />
+          {!!state.groupSelect && <DimensionsGroup {...{ analytics, state, setDimension }} />}
+        </>
+      )}
+      {isIndividual && (
+        <>
+          <FieldsBehavior
+            title="Select Dimensions"
+            fieldType="MultiCheckSelect"
+            options={dimensionOptions}
+            value={state.dimensionsSelect}
+            onChange={handleDimensionsSelect}
+            selectAllOption="all"
+            placeholder="Select Dimensions"
+          />
+          {!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension }} />}
+        </>
+      )}
+    </FieldGroup>
+  );
+};
+
+export default PageAnalytics;

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/atoms.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+
+import { FieldsBehavior } from "@ax/components";
+import { splitAndTrim } from "@ax/helpers";
+import { IAnalytics, IDimension } from "@ax/types";
+
+import { IState } from "..";
+
+const TemplateDimensions = (props: ITemplateDimensions): JSX.Element => {
+  const { analytics, state, setDimension, dimensionNames } = props;
+  const { values } = state;
+  const groupDimensions = dimensionNames.map((dimensionName) => {
+    const dimension = analytics.dimensions.find((dimension) => dimension.name === dimensionName);
+    return dimension;
+  })
+
+  return (
+    <>
+      {groupDimensions && groupDimensions.map((dimension, idx) => (
+        dimension && <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+      ))}
+    </>
+  )
+}
+
+const DimensionsSelection = (props: { analytics: IAnalytics, state: IState, setDimension: (value: Record<string, string>) => void }): JSX.Element => {
+  const { analytics, state, setDimension } = props;
+  const { dimensionsSelect, values } = state;
+  const selectedDimensions = analytics.dimensions.filter((d) => dimensionsSelect.includes(d.name));
+
+  return (
+    <>
+      {selectedDimensions && selectedDimensions.map((dimension, idx) => (
+        <DimensionValue key={idx} {...{ dimension, setDimension, values }} />
+      ))}
+    </>
+  )
+}
+
+const DimensionValue = (props: { dimension: IDimension, setDimension: (value: Record<string, string>) => void, values: Record<string, string> }) => {
+  const { dimension, setDimension, values } = props;
+  const dimensionValues = splitAndTrim(dimension?.values, ";");
+  const options = dimensionValues.map((option) => ({ label: option, value: option }));
+  const handleOnChange = (value: string) => {
+    dimension && setDimension({ [dimension.name]: value });
+  }
+
+  const isNullValue = dimensionValues.includes("null");
+
+  return isNullValue ? (
+    <FieldsBehavior
+      title={dimension?.name}
+      fieldType="TextField"
+      value={dimension ? values[dimension.name] : ""}
+      onChange={handleOnChange}
+      placeholder="Type a variable"
+    />
+  ) : (
+    <FieldsBehavior
+      title={dimension?.name}
+      fieldType="Select"
+      options={options}
+      value={dimension ? values[dimension.name] : ""}
+      onChange={handleOnChange}
+      placeholder="Select variable"
+    />
+  )
+}
+
+interface ITemplateDimensions {
+  analytics: IAnalytics;
+  state: IState;
+  setDimension: (value: Record<string, string>) => void;
+  dimensionNames: string[];
+}
+
+export { TemplateDimensions, DimensionsSelection };

package/src/components/Fields/AnalyticsField/StructuredDataAnalytics/index.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+
+import { FieldsBehavior, FieldGroup } from "@ax/components";
+
+import { IAnalyticsFieldProps, IState } from "..";
+import { getTemplateDimensions } from "../utils";
+import { TemplateDimensions, DimensionsSelection } from "./atoms";
+import * as S from "../style";
+
+const StructuredDataAnalytics = (props: IAnalyticsFieldProps): JSX.Element => {
+  const {
+    value,
+    onChange,
+    analytics,
+    template,
+  } = props;
+
+  const initialState = {
+    dimensionsSelect: [],
+    values: {}
+  }
+
+  const [state, setState] = useState<IState>({ ...initialState, ...value });
+
+  useEffect(() => {
+    onChange && onChange(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state]);
+
+  const templateDimensions = getTemplateDimensions(analytics.groups, template);
+
+  const handleDimensionsSelect = (selection: string[]) => {
+    const values: Record<string, string> = {};
+    templateDimensions.forEach((dimension) => values[dimension] = state.values[dimension]);
+    let dimensionsSelect = selection;
+
+    if (selection.includes("all")) {
+      dimensionsSelect = dimensionOptions.map((dimension) => dimension.name);
+    }
+
+    dimensionsSelect.forEach((dimension) => values[dimension] = state.values[dimension]);
+    setState((state: IState) => ({ ...state, dimensionsSelect, values }));
+  }
+
+  const setDimension = (value: Record<string, string>) => {
+    setState((state: IState) => ({ ...state, values: { ...state.values, ...value } }));
+  }
+
+  const dimensionOptions = [
+    {
+      name: "all",
+      value: "all",
+      title: "Select All",
+    },
+  ];
+  analytics.dimensions.forEach((dimension) => {
+    if (!templateDimensions.includes(dimension.name)) {
+      const option = {
+        name: dimension.name,
+        value: dimension.name,
+        title: dimension.name,
+      }
+      dimensionOptions.push(option);
+    }
+  });
+
+  return (
+    <FieldGroup title="Analytics Data Layer">
+      <TemplateDimensions dimensionNames={templateDimensions} {...{ analytics, state, setDimension }} />
+      {dimensionOptions.length > 1 && (
+        <>
+          <S.FieldsDivider />
+          <FieldsBehavior
+            title="Add More Dimensions (Optional)"
+            fieldType="MultiCheckSelect"
+            options={dimensionOptions}
+            value={state.dimensionsSelect}
+            onChange={handleDimensionsSelect}
+            selectAllOption="all"
+            placeholder="Select Dimensions"
+          />
+          {!!state.dimensionsSelect && <DimensionsSelection {...{ analytics, state, setDimension }} />}
+        </>
+      )}
+    </FieldGroup>
+  );
+};
+
+export default StructuredDataAnalytics;

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { IAnalytics, IRootState } from "@ax/types";
+import { isEmptyArray } from "@ax/helpers";
+
+import PageAnalytics from "./PageAnalytics";
+import StructuredDataAnalytics from "./StructuredDataAnalytics";
+import { getTemplateDimensions } from "./utils";
+
+const AnalyticsField = (props: IAnalyticsFieldProps): JSX.Element => {
+  const { analytics, template } = props;
+
+  const templateDimensions = getTemplateDimensions(analytics.groups, template);
+
+  return isEmptyArray(templateDimensions) ? <PageAnalytics {...props} /> : <StructuredDataAnalytics {...props} />;
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  analytics: state.analytics,
+  template: state.pageEditor.template,
+});
+
+export interface IAnalyticsFieldProps {
+  value: IState;
+  onChange: (value: IState) => void;
+  analytics: IAnalytics;
+  template: string;
+}
+
+export interface IState {
+  contentSelect: string;
+  groupSelect: string;
+  dimensionsSelect: string[];
+  values: Record<string, string>;
+}
+
+export default connect(mapStateToProps, null)(AnalyticsField);

package/src/components/Fields/AnalyticsField/style.tsx

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+const FieldWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const FieldsDivider = styled.div`
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+`;
+
+export { FieldWrapper, FieldsDivider };

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

@@ -0,0 +1,13 @@
+import { IDimensionsGroup } from "@ax/types";
+import { splitAndTrim } from "@ax/helpers";
+
+const getTemplateDimensions = (groups: IDimensionsGroup[], template: string): string[] => {
+  const templateDimensionsGroups = groups.filter((group) => group.templates?.includes(template));
+  const templateDimensions = templateDimensionsGroups.reduce((dimensions: string[], group: IDimensionsGroup) => {
+    return [...dimensions, ...splitAndTrim(group.dimensions, ";")];
+  }, []);
+  const uniqueTemplateDimensions = [...new Set(templateDimensions)];
+  return uniqueTemplateDimensions;
+}
+
+export { getTemplateDimensions }

package/src/components/Fields/FieldGroup/style.tsx

@@ -26,7 +26,7 @@ export const Label = styled.div<{ isOpen: boolean }>`
 `;
 
 export const Content = styled.div<{ isOpen: boolean }>`
-  overflow-y: hidden;
+  overflow-y: ${(p) => (p.isOpen ? "visible" : "hidden")};
   max-height: ${(p) => (p.isOpen ? `auto` : 0)};
   transition: all 0.5s ease-in-out;
 `;