@griddo/ax 1.66.13 → 1.67.0

package/package.json

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

package/src/__tests__/components/Fields/ConditionalField/ConditionalField.test.tsx

@@ -0,0 +1,95 @@
+import React from "react";
+import ConditionalField from "@ax/components/Fields/ConditionalField";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@griddo/core";
+import globalTheme from "@ax/themes/theme.json";
+import { mock } from "jest-mock-extended";
+import { render, screen, cleanup } from "@testing-library/react";
+import FieldsBehavior from "@ax/components/FieldsBehavior";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IConditionalFieldProps>();
+
+describe("ConditionalField component rendering", () => {
+  it("should render the component", () => {
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConditionalField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    const conditionalFieldContent = screen.getByTestId("conditionalFieldContent");
+
+    expect(conditionalFieldContent).toBeTruthy();
+  });
+
+  it("should render innerFields", () => {
+    const fieldProps = {
+      objKey: "subjDocumentUrl",
+      fieldType: "TextField",
+      innerFields: [],
+      field: {
+        title: "Document URL",
+        type: "TextField",
+        key: "subjDocumentUrl",
+        placeholder: "https://",
+        condition: "url",
+      },
+      title: "Cool title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+    };
+
+    defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
+    defaultProps.value = "url";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConditionalField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.getByText("Cool title"));
+  });
+
+  it("should not render innerFields", () => {
+    const fieldProps = {
+      objKey: "subjDocumentUrl",
+      fieldType: "TextField",
+      innerFields: [],
+      field: {
+        title: "Document URL",
+        type: "TextField",
+        key: "subjDocumentUrl",
+        placeholder: "https://",
+        condition: "url",
+      },
+      title: "Cool title",
+      type: "TextField",
+      mandatory: "true",
+      isTitle: true,
+      theme: "default-theme",
+    };
+
+    defaultProps.innerFields = [<FieldsBehavior {...fieldProps} key={1} />];
+    defaultProps.value = "video";
+
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <ConditionalField {...defaultProps} />
+      </ThemeProvider>
+    );
+
+    expect(screen.queryByText("Cool title")).not.toBeTruthy();
+  });
+});
+
+interface IConditionalFieldProps {
+  value: string | boolean;
+  options: any[];
+  innerFields: any;
+  onChange: (value: any) => void;
+}

package/src/api/pages.tsx

@@ -75,6 +75,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/page/", "/preview/"],
     method: "GET",
   },
+  PAGE_CHECK: {
+    ...template,
+    endpoint: "/page/check",
+    method: "POST",
+  },
 };
 
 const getPageInfo = async (pageID: number) => {
@@ -154,15 +159,17 @@ const getPageBreadcrumb = async (pageID: number) => {
   return sendRequest(SERVICES.GET_PAGE_BREADCRUMB);
 };
 
-const duplicatePage = async (pageID: number, data: any) => {
+const duplicatePage = async (pageID: number, data?: any, siteID?: number) => {
   const {
     host,
     endpoint: [prefix, suffix],
   } = SERVICES.DUPLICATE_PAGE;
 
-  SERVICES.DUPLICATE_PAGE.dynamicUrl = `${host}${prefix}${pageID}${suffix}`;
+  SERVICES.DUPLICATE_PAGE.dynamicUrl = siteID
+    ? `${host}${prefix}${pageID}${suffix}/${siteID}`
+    : `${host}${prefix}${pageID}${suffix}`;
 
-  return sendRequest(SERVICES.DUPLICATE_PAGE, { ...data });
+  return siteID ? sendRequest(SERVICES.DUPLICATE_PAGE) : sendRequest(SERVICES.DUPLICATE_PAGE, { ...data });
 };
 
 const bulkDelete = async (ids: any) => sendRequest(SERVICES.DELETE_BULK, { ids });
@@ -199,6 +206,10 @@ const getPublicPage = async (pageID: number, entity: string) => {
   return sendRequest(SERVICES.GET_PUPLIC_PAGE);
 };
 
+const pageCheck = async (data: any) => {
+  return sendRequest(SERVICES.PAGE_CHECK, { ...data });
+};
+
 export default {
   getPageInfo,
   updatePage,
@@ -214,4 +225,5 @@ export default {
   bulkRestore,
   sendPagePing,
   getPublicPage,
+  pageCheck,
 };

package/src/api/redirects.tsx

@@ -40,13 +40,15 @@ const SERVICES: { [key: string]: IServiceConfig } = {
 };
 
 const getRedirects = async (params: any, filters?: string) => {
-  const { page, itemsPerPage, pagination } = params;
+  const { page, itemsPerPage, pagination, query, filterBy } = params;
 
   const { host, endpoint } = SERVICES.GET_REDIRECTS;
 
   const filterString = filters || "";
+  const searchQuery = query ? `&query=${query}` : "";
+  const filterQuery = filterBy ? `&filterBy=${filterBy}` : "";
 
-  SERVICES.GET_REDIRECTS.dynamicUrl = `${host}${endpoint}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}${filterString}`;
+  SERVICES.GET_REDIRECTS.dynamicUrl = `${host}${endpoint}?page=${page}&itemsPerPage=${itemsPerPage}&pagination=${pagination}${filterString}${searchQuery}${filterQuery}`;
 
   return sendRequest(SERVICES.GET_REDIRECTS);
 };

package/src/api/sites.tsx

@@ -101,8 +101,10 @@ const SERVICES: { [key: string]: IServiceConfig } = {
   },
 };
 
-const getAllSites = async (token: string) => {
-  return sendInitialRequest(SERVICES.GET_ALL_SITES, token);
+const getAllSites = async (language?: number) => {
+  const { host, endpoint } = SERVICES.GET_ALL_SITES;
+  SERVICES.GET_ALL_SITES.dynamicUrl = language ? `${host}${endpoint}?language=${language}` : "";
+  return sendRequest(SERVICES.GET_ALL_SITES);
 };
 
 const getSiteInfo = async (siteID: number) => {
@@ -138,17 +140,23 @@ const getSitePages = async (params: IGetSitePagesParams, filterQuery?: string):
     endpoint: [prefix, suffix],
   } = SERVICES.GET_SITE_PAGES;
 
-  const { siteID, deleted, page, itemsPerPage, query, filterStructuredData, lang, format } = params;
+  const { siteID, deleted, page, itemsPerPage, query, filterStructuredData, lang, format, filterPages } = params;
 
   const filters = filterQuery ? `${filterQuery}&` : "?";
 
-  SERVICES.GET_SITE_PAGES.dynamicUrl = `${host}${prefix}${siteID}${suffix}${filters}deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}`;
+  SERVICES.GET_SITE_PAGES.dynamicUrl = `${host}${prefix}${siteID}${suffix}${filters}deleted=${deleted}`;
+
+  if (page && itemsPerPage)
+    SERVICES.GET_SITE_PAGES.dynamicUrl =
+      SERVICES.GET_SITE_PAGES.dynamicUrl + `&page=${page}&itemsPerPage=${itemsPerPage}`;
   if (query && query.trim() !== "")
     SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&query=${query}`;
   if (filterStructuredData)
     SERVICES.GET_SITE_PAGES.dynamicUrl =
       SERVICES.GET_SITE_PAGES.dynamicUrl + `&filterStructuredData=${filterStructuredData}`;
   if (format) SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&format=${format}`;
+  if (filterPages)
+    SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&filterPages=${filterPages.join(",")}`;
 
   const dataHeader = {
     ...(lang && { lang }),

package/src/components/Browser/index.tsx

@@ -1,6 +1,4 @@
 import React, { useEffect, useState, useCallback } from "react";
-import { FrameContextConsumer } from "react-frame-component";
-import { StyleSheetManager } from "styled-components";
 
 import * as components from "components";
 import { SiteProvider, builderSSR, ssrHelpers } from "components";
@@ -29,10 +27,14 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     siteID,
     isPreview,
     setSelectedContent,
+    browserRef,
   } = props;
 
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
   const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+  const { id, entity } = content;
+  const domain = window.location.origin;
+  const urlPreview = `${domain}/editor/page-preview`;
 
   const [resolution, setResolution] = useState("desktop");
   const { isVisible, toggleToast, setIsVisible } = useToast();
@@ -80,10 +82,8 @@ const Browser = (props: IBrowserProps): JSX.Element => {
   };
 
   const copyUrl = () => {
-    const { id, entity } = content;
-    const domain = window.location.origin;
-    const url = `${domain}/page-preview/${id}/${entity}`;
-    copyTextToClipboard(url).then(
+    const sharedUrl = `${domain}/page-preview/${id}/${entity}`;
+    copyTextToClipboard(sharedUrl).then(
       function () {
         toggleToast();
       },
@@ -125,16 +125,8 @@ const Browser = (props: IBrowserProps): JSX.Element => {
     </SiteProvider>
   );
 
-  const getStylesFromHeader = () => {
-    const header = document.head.innerHTML;
-
-    return header.replace(/<style data-styled="active" \b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, "");
-  };
-
-  const initialContent = `<!DOCTYPE html><html><head>${getStylesFromHeader()}</head><body><div></div></body></html>`;
-
   return (
-    <S.BrowserWrapper>
+    <S.BrowserWrapper ref={browserRef}>
       <S.NavBar>
         <S.NavUrl>{url}</S.NavUrl>
         {isPreview && (
@@ -164,13 +156,7 @@ const Browser = (props: IBrowserProps): JSX.Element => {
       </S.NavBar>
       {isPreview ? (
         <S.FrameWrapper>
-          <S.StyledFrame width={getWidth(resolution)} height="100%" initialContent={initialContent}>
-            <FrameContextConsumer>
-              {(frameContext: any) => (
-                <StyleSheetManager target={frameContext.document.head}>{Providers}</StyleSheetManager>
-              )}
-            </FrameContextConsumer>
-          </S.StyledFrame>
+          <iframe title="Preview" width={getWidth(resolution)} height="100%" src={urlPreview} allow-scripts />
         </S.FrameWrapper>
       ) : (
         <>{Providers}</>
@@ -195,6 +181,7 @@ interface IBrowserProps {
   disabled?: boolean;
   siteID?: number;
   isPreview?: boolean;
+  browserRef?: any;
 }
 
 export default Browser;

package/src/components/Browser/style.tsx

@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import Frame from "react-frame-component";
 
 const BrowserWrapper = styled.div`
   background-color: ${(p) => p.theme.color.uiBackground01};
@@ -67,8 +66,4 @@ const FrameWrapper = styled.div`
   height: 100%;
 `;
 
-const StyledFrame = styled(Frame)`
-  box-shadow: ${(p) => p.theme.shadow.shadowL};
-`;
-
-export { BrowserWrapper, Wrapper, NavBar, NavUrl, NavActions, IconWrapper, FrameWrapper, StyledFrame };
+export { BrowserWrapper, Wrapper, NavBar, NavUrl, NavActions, IconWrapper, FrameWrapper };

package/src/components/ErrorCenter/index.tsx

@@ -20,15 +20,18 @@ const ErrorCenter = (props: IProps): JSX.Element => {
       goToElement(item.key);
     };
 
+    const icon = item.type === "warning" ? "warning" : "alert";
+
     return (
-      <S.Wrapper key={`${item.editorID}${item.key}`} onClick={handleClick}>
-        <S.Header>
-          <Icon name="alert" size="16" />
-          {item.type}
+      <S.Wrapper key={`${item.editorID}${item.key}`} clickable={!!item.editorID} onClick={handleClick}>
+        <S.Header type={item.type}>
+          <Icon name={icon} size="16" />
+          <S.Type>{item.type}</S.Type>
         </S.Header>
         <S.Content>
           <S.Title>{item.message}</S.Title>
           <S.Subtitle>{item.name}</S.Subtitle>
+          {item.editorID && <S.Link>Go to field</S.Link>}
         </S.Content>
       </S.Wrapper>
     );
@@ -45,7 +48,7 @@ const ErrorCenter = (props: IProps): JSX.Element => {
 interface IProps {
   errors: IErrorItem[];
   actions?: {
-    goToError(editorID: number, tab: string, template: boolean): void;
+    goToError(editorID: number | null, tab: string, template: boolean): void;
   };
 }
 

package/src/components/ErrorCenter/style.tsx

@@ -1,7 +1,6 @@
 import styled from "styled-components";
 
 const ActionMenu = styled.div`
-  padding: 0 ${(p) => p.theme.spacing.s};
   width: ${(p) => `calc(4 * ${p.theme.spacing.l})`};
   max-height: 380px;
   overflow: auto;
@@ -10,16 +9,20 @@ const ActionMenu = styled.div`
 const MenuHeader = styled.div`
   ${(p) => p.theme.textStyle.headingXXS};
   color: ${(p) => p.theme.color.textLowEmphasis};
-  padding-top: ${(p) => p.theme.spacing.xs};
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.s}`};
 `;
 
-const Wrapper = styled.div`
-  padding: ${(p) => p.theme.spacing.s} 0;
+const Wrapper = styled.div<{ clickable: boolean }>`
+  padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
-  cursor: pointer;
+  pointer-events: ${(p) => (p.clickable ? "auto" : "none")};
+  cursor: ${(p) => (p.clickable ? "pointer" : "default")};
+  :hover {
+    background-color: ${(p) => (p.clickable ? p.theme.color.overlayHoverPrimary : "transparent")};
+  }
 `;
 
-const Header = styled.div`
+const Header = styled.div<{ type: string }>`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => p.theme.color.textLowEmphasis};
   display: flex;
@@ -28,7 +31,7 @@ const Header = styled.div`
   svg {
     margin-right: ${(p) => p.theme.spacing.xxs};
     path {
-      fill: ${(p) => p.theme.color.error};
+      fill: ${(p) => (p.type === "warning" ? p.theme.color.interactive02 : p.theme.color.error)};
     }
   }
 `;
@@ -49,4 +52,14 @@ const Subtitle = styled.div`
   color: ${(p) => p.theme.color.textLowEmphasis};
 `;
 
-export { ActionMenu, MenuHeader, Wrapper, Header, Content, Title, Subtitle };
+const Type = styled.span`
+  text-transform: capitalize;
+`;
+
+const Link = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.interactive01};
+  margin-top: ${(p) => p.theme.spacing.xxs};
+`;
+
+export { ActionMenu, MenuHeader, Wrapper, Header, Content, Title, Subtitle, Type, Link };

package/src/components/Fields/ComponentArray/MixableComponentArray/AddItemButton/index.tsx

@@ -1,10 +1,8 @@
 import React, { memo } from "react";
-import { useModal } from "@ax/hooks";
 import { IconAction, SideModal, Tooltip } from "@ax/components";
 
 const AddItemButton = (props: IProps) => {
-  const { handleClick, whiteList, isModuleArr, categories, theme } = props;
-  const { isOpen, toggleModal } = useModal();
+  const { handleClick, whiteList, isModuleArr, categories, theme, isOpen, toggleModal } = props;
   const optionsType = isModuleArr ? "modules" : "components";
   const addAction = whiteList.length <= 1 ? () => handleClick(whiteList[0]) : toggleModal;
 
@@ -35,6 +33,8 @@ interface IProps {
   isModuleArr: boolean;
   categories?: any;
   theme: string;
+  toggleModal: () => void;
+  isOpen: boolean;
 }
 
 export default memo(AddItemButton);

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
-import differenceInSeconds from 'date-fns/differenceInSeconds';
+import differenceInSeconds from "date-fns/differenceInSeconds";
 
 import { IModule } from "@ax/types";
-import { ComponentContainer } from "@ax/components";
+import { ComponentContainer, SideModal } from "@ax/components";
+import { useModal } from "@ax/hooks";
 
 import { getComponentProps, containerToComponentArray, getTypefromKey } from "../helpers";
 import AddItemButton from "./AddItemButton";
@@ -45,18 +46,23 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const type = getTypefromKey(objKey);
   const { contentType = type } = field;
+  const { isOpen, toggleModal } = useModal();
 
   let addModuleAction: any;
   let addComponentAction: any;
-
-  // fix for old not array values
-  const fixedValue = Array.isArray(value) ? value : containerToComponentArray(value);
+  let deleteModuleAction: any;
+  let replaceElementsInCollectionAction: any;
 
   if (actions) {
     addModuleAction = actions.addModuleAction;
     addComponentAction = actions.addComponentAction;
+    deleteModuleAction = actions.deleteModuleAction;
+    replaceElementsInCollectionAction = actions.replaceElementsInCollectionAction;
   }
 
+  // fix for old not array values
+  const fixedValue = Array.isArray(value) ? value : containerToComponentArray(value);
+
   const getText = (name: string, index: number) => {
     return fixedValue.length > 1 ? `#${index + 1} ${name}` : name;
   };
@@ -70,6 +76,17 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const handleAdd = isModuleArr ? handleAddModule : handleAddComponent;
 
+  const handleModuleReplace = (moduleType: string) => {
+    const { modules } = selectedContent;
+    if (isModuleArr) {
+      const currentModule = modules[0];
+      deleteModuleAction(currentModule?.editorID, contentType);
+      handleAddModule(moduleType);
+    } else {
+      replaceElementsInCollectionAction(moduleType);
+    }
+  };
+
   const showAddItemButton = (!maxItems || fixedValue.length < maxItems) && !disabled;
 
   const timeSinceModuleCopy = !!moduleCopy && differenceInSeconds(new Date(), new Date(moduleCopy.date));
@@ -81,6 +98,10 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     timeSinceModuleCopy < eightHoursInSeconds &&
     (whiteList.includes(moduleCopyComponent) || isModuleCopyUnavailable);
 
+  const canReplace = maxItems === 1 && whiteList.length > 1;
+  const displayReplaceSideModal = value.length > 0 && canReplace;
+  const optionsType = isModuleArr ? "modules" : "components";
+
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
   return (
@@ -90,26 +111,26 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
       </S.Title>
       <S.ItemRow>
         <S.Subtitle>{fixedValue && fixedValue.length} items</S.Subtitle>
-        <S.ActionsWrapper>
-          {showPasteModuleButton && (
-            <PasteModuleButton
-              editorID={editorID}
-              isModuleCopyUnavailable={isModuleCopyUnavailable}
-              pasteModule={actions.pasteModuleAction}
-              setNotification={actions.setNotificationAction}
-              setHistoryPush={setHistoryPush}
-            />
-          )}
-          {showAddItemButton && (
-            <AddItemButton
-              whiteList={whiteList}
-              categories={categories}
-              handleClick={handleAdd}
-              isModuleArr={isModuleArr}
-              theme={theme}
-            />
-          )}
-        </S.ActionsWrapper>
+        {showPasteModuleButton && (
+          <PasteModuleButton
+            editorID={editorID}
+            isModuleCopyUnavailable={isModuleCopyUnavailable}
+            pasteModule={actions.pasteModuleAction}
+            setNotification={actions.setNotificationAction}
+            setHistoryPush={setHistoryPush}
+          />
+        )}
+        {showAddItemButton && !disabled && (
+          <AddItemButton
+            isOpen={isOpen}
+            toggleModal={toggleModal}
+            whiteList={whiteList}
+            categories={categories}
+            handleClick={handleAdd}
+            isModuleArr={isModuleArr}
+            theme={theme}
+          />
+        )}
       </S.ItemRow>
       {fixedValue &&
         fixedValue.map((element: any, i: number) => {
@@ -122,6 +143,8 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
           const text = getText(componentTitle || displayName, i);
           return (
             <ComponentContainer
+              actionReplace={toggleModal}
+              canReplace={canReplace}
               isArray={true}
               arrayLength={fixedValue.length}
               index={i}
@@ -141,6 +164,18 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
             />
           );
         })}
+      {displayReplaceSideModal && isOpen && (
+        <SideModal
+          optionsType={optionsType}
+          whiteList={whiteList}
+          categories={categories}
+          toggleModal={toggleModal}
+          isOpen={isOpen}
+          handleClick={handleModuleReplace}
+          theme={theme}
+          showSearch
+        />
+      )}
     </S.Wrapper>
   );
 };

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

@@ -28,6 +28,8 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     canDuplicate,
     parentKey,
     theme,
+    canReplace,
+    actionReplace,
   } = props;
 
   const { isVisible, toggleToast, setIsVisible } = useToast();
@@ -46,7 +48,9 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 
   const whiteListFirstItem: any = whiteList && whiteList[0];
   const hasMultipleOptions: boolean | undefined = whiteList && whiteList.length > 1;
-  const containerOptions: any = objKey && selectedContent[objKey];
+
+  const containerOptions: any =
+    parentKey && objKey ? selectedContent[parentKey][objKey] : objKey && selectedContent[objKey];
 
   let containerText: string = text ? text : getDisplayName(whiteListFirstItem);
   let componentID: number = editorID ? editorID : containerOptions.editorID;
@@ -76,11 +80,11 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
   const copyItem = () => {
     const isCopied = copyModuleAction(editorID);
     isCopied && toggleToast();
-  }
+  };
 
   const copyOpt = {
     label: "copy",
-    icon: "duplicate",
+    icon: "copy",
     action: copyItem,
   };
 
@@ -96,10 +100,17 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     action: removeItem,
   };
 
-  const actionArrayMenuOptions =  [
+  const replaceOpt = {
+    label: "replace",
+    icon: "change",
+    action: () => actionReplace && actionReplace(),
+  };
+
+  const actionArrayMenuOptions = [
     copyOpt,
     ...(canDuplicate ? [duplicateOpt] : []),
-    deleteOpt
+    deleteOpt,
+    ...(canReplace ? [replaceOpt] : []),
   ];
 
   const actionMenuOptions = [
@@ -124,7 +135,8 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 
   const handleOptionClick = (option: any) => actions.addComponentAction(option);
 
-  const handleReplace = (option: any) => actions.replaceModuleAction(option, selectedContent, objKey);
+  const compoundKey = parentKey ? `${parentKey}.${objKey}` : objKey;
+  const handleReplace = (option: any) => actions.replaceModuleAction(option, selectedContent, compoundKey);
 
   const arrayContainerButtonsProps = {
     handleDownClick,
@@ -178,7 +190,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
           theme={theme}
         />
       )}
-        {isVisible && <Toast message="1 module copied to clipboard" setIsVisible={setIsVisible} />}
+      {isVisible && <Toast message="1 module copied to clipboard" setIsVisible={setIsVisible} />}
     </>
   );
 };
@@ -202,6 +214,8 @@ interface IComponentContainerProps {
   canDuplicate?: boolean;
   parentKey?: string;
   theme: string;
+  canReplace?: boolean;
+  actionReplace?: () => void;
 }
 
 export default ComponentContainer;

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

@@ -11,7 +11,7 @@ const ConditionalField = (props: IConditionalFieldProps) => {
   return (
     <S.Wrapper>
       <RadioGroup name="radio" value={value} options={options} onChange={handleChange} />
-      <S.Content>
+      <S.Content data-testid="conditionalFieldContent">
         {innerFields &&
           innerFields.map((item: any) => {
             return value === item.props.field.condition && item;