@griddo/ax 1.62.8 → 1.63.0

package/src/modules/Content/OptionTable/index.tsx

@@ -1,8 +1,10 @@
 import React, { useReducer, useEffect, useLayoutEffect } from "react";
 import { connect } from "react-redux";
 
+import { IDataPack, IRootState } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { getStructuredDataTitle, getThumbnailProps, isGlobalStructuredData } from "@ax/helpers";
+import { dataPacksActions } from "@ax/containers/Settings";
 import { MenuItem, RadioGroup } from "@ax/components";
 
 import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelectedType, setOption } from "./store";
@@ -10,7 +12,17 @@ import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelec
 import * as S from "./style";
 
 const OptionTable = (props: IOptionTableProps): JSX.Element => {
-  const { selectData, selectPage, filters, values, selectedValue, setIsStructuredData, theme } = props;
+  const {
+    selectData,
+    selectPage,
+    filters,
+    values,
+    selectedValue,
+    setIsStructuredData,
+    theme,
+    getDataPack,
+    dataPacks,
+  } = props;
 
   const filterOptions = (value: string, objKey: string) => values.filter((item: any) => item[objKey] === value);
   const currentOption = filterOptions(selectedValue, "value");
@@ -50,6 +62,14 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     // eslint-disable-next-line
   }, []);
 
+  useEffect(() => {
+    if (currentType !== "static") {
+      const dataPack = dataPacks.find((pack) => pack.templates.some((template) => template.id === state.selectedOption));
+      dataPack && getDataPack(dataPack.id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.selectedOption]);
+
   const setValue = (value: string, isStructuredData: boolean) => {
     setIsStructuredData(isStructuredData);
     isStructuredData ? selectData(value) : selectPage(value);
@@ -133,14 +153,21 @@ interface IOptionTableProps {
   selectData: (value: string) => void;
   selectPage: (value: string) => void;
   setIsStructuredData: (isActive: boolean) => void;
+  getDataPack: (id: string) => void;
   filters: any;
   values: any;
   selectedValue: string;
   theme: string;
+  dataPacks: IDataPack[];
 }
 
+const mapStateToProps = (state: IRootState) => ({
+  dataPacks: state.dataPacks.activated,
+});
+
 const mapDispatchToProps = {
   setIsStructuredData: structuredDataActions.setIsActive,
+  getDataPack: dataPacksActions.getSiteDataPack,
 };
 
-export default connect(null, mapDispatchToProps)(OptionTable);
+export default connect(mapStateToProps, mapDispatchToProps)(OptionTable);

package/src/modules/Content/PageItem/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, useState } from "react";
 
 import { useModal } from "@ax/hooks";
 import { getHumanLastModifiedDate, getTemplateDisplayName, slugify } from "@ax/helpers";
-import { IPage, ISite, ISavePageParams, ICheck, IColumn } from "@ax/types";
+import { IPage, ISite, ISavePageParams, ICheck, IColumn, IDataPack } from "@ax/types";
 import { pageStatus, ISetCurrentPageIDAction } from "@ax/containers/PageEditor/interfaces";
 
 import {
@@ -32,6 +32,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     categoryColumns,
     categoryColors,
     addCategoryColors,
+    dataPacks,
   } = props;
   const { isSelected, siteLanguages, page, lang } = item;
   const {
@@ -45,6 +46,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     languageActions,
     duplicatePage,
     removePageFromSite,
+    getDataPack,
   } = functions;
   const { locale } = lang;
   const {
@@ -78,9 +80,14 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
 
   const setRoute = (path: string) => setHistoryPush(path, true);
 
-  const goToPage = () => {
+  const goToPage = async () => {
     const pageID = page.haveDraftPage ? page.haveDraftPage : page.id;
     setCurrentPageID(pageID);
+
+    const { templateId } = item.page;
+    const dataPack = dataPacks.find((pack) => pack.templates.some((template) => template.id === templateId));
+    dataPack && await getDataPack(dataPack.id);
+
     setRoute("pages/editor");
   };
 
@@ -540,6 +547,7 @@ interface IPageItemProps {
     setCurrentPageID(currentPageID: number | null): ISetCurrentPageIDAction;
     duplicatePage(pageID: number, data: any): Promise<void>;
     removePageFromSite(pageID: number): Promise<boolean>;
+    getDataPack: (id: string) => Promise<void>;
   };
   activatedTemplates: any[];
   toggleToast(): void;
@@ -548,6 +556,7 @@ interface IPageItemProps {
   columns: Record<string, IColumn>;
   categoryColors: any;
   addCategoryColors(cats: string[]): void;
+  dataPacks: IDataPack[];
 }
 
 export default memo(PageItem);

package/src/modules/Content/index.tsx

@@ -23,6 +23,7 @@ import { sitesActions } from "@ax/containers/Sites";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { INITIAL_TEMPLATE } from "@ax/containers/PageEditor/constants";
+import { dataPacksActions } from "@ax/containers/Settings";
 import {
   ISetCurrentPageIDAction,
   ISetCurrentPageStatusAction,
@@ -80,6 +81,8 @@ const Content = (props: IProps): JSX.Element => {
     resetPageEditor,
     removePageFromSite,
     importPageFromGlobal,
+    getDataPack,
+    dataPacks,
   } = props;
 
   !currentSiteInfo && setHistoryPush("/sites", false);
@@ -470,6 +473,7 @@ const Content = (props: IProps): JSX.Element => {
         duplicatePage,
         removePageFromSite,
         languageActions: pageLanguageActions,
+        getDataPack: getDataPack,
       };
 
       return (
@@ -484,6 +488,7 @@ const Content = (props: IProps): JSX.Element => {
           columns={columnsState}
           categoryColors={categoryColors}
           addCategoryColors={addCategoryColors}
+          dataPacks={dataPacks}
         />
       );
     });
@@ -637,6 +642,7 @@ const mapStateToProps = (state: IRootState) => ({
   activatedDataPacks: state.dataPacks.activated,
   activatedTemplates: state.dataPacks.templates,
   isLoading: state.app.isLoading,
+  dataPacks: state.dataPacks.activated,
 });
 
 interface IDispatchProps {
@@ -664,6 +670,7 @@ interface IDispatchProps {
   resetPageEditor(): Promise<void>;
   removePageFromSite(pageID: number | number[], refresh?: boolean): Promise<boolean>;
   importPageFromGlobal(pageID: number | number[]): Promise<boolean>;
+  getDataPack: (id: string) => Promise<void>;
 }
 
 const mapDispatchToProps = {
@@ -690,6 +697,7 @@ const mapDispatchToProps = {
   resetPageEditor: pageEditorActions.resetPageEditor,
   removePageFromSite: sitesActions.removePageFromSite,
   importPageFromGlobal: sitesActions.importPageFromGlobal,
+  getDataPack: dataPacksActions.getSiteDataPack,
 };
 
 interface IPagesProps {
@@ -710,6 +718,7 @@ interface IPagesProps {
   activatedDataPacks: IDataPack[];
   activatedTemplates: any[];
   isLoading: boolean;
+  dataPacks: IDataPack[];
 }
 
 type IProps = IPagesProps & IDispatchProps;

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

@@ -1,10 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
-import { themes } from "components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { ConfigPanel, ResizePanel } from "@ax/components";
 import { IBreadcrumbItem, IRootState, ISchema, IUserEditing } from "@ax/types";
-import PageBrowser from "./PageBrowser";
+import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
   const {
@@ -25,8 +24,9 @@ const Editor = (props: IProps) => {
     isLoading,
     isGlobal,
     isEditable,
-    isPreviewMode,
+    isReadOnly,
     userEditing,
+    theme,
   } = props;
 
   const actions = {
@@ -39,12 +39,9 @@ const Editor = (props: IProps) => {
     replaceElementsInCollectionAction: replaceElementsInCollection,
   };
 
-  const defaultTheme = themes.find((theme: any) => theme.default);
-  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
-
   return (
     <ResizePanel
-      leftPanel={<PageBrowser isPreviewMode={isPreviewMode} />}
+      leftPanel={<PageBrowser isReadOnly={isReadOnly} theme={theme} />}
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -59,7 +56,7 @@ const Editor = (props: IProps) => {
           isPage={true}
           isGlobal={isGlobal}
           isEditable={isEditable}
-          isPreviewMode={isPreviewMode}
+          isReadOnly={isReadOnly}
           userEditing={userEditing}
           theme={theme}
         />
@@ -91,7 +88,8 @@ interface IPageBrowserDispatchProps {
   replaceElementsInCollection(newValue: string, reference: string): void;
   isGlobal: boolean;
   isEditable: boolean;
-  isPreviewMode: boolean;
+  isReadOnly: boolean;
+  theme: string;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/GlobalEditor/{Editor/PageBrowser → PageBrowser}/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
-import { themes } from "components";
 
 import { Browser } from "@ax/components";
 import { IBreadcrumbItem, ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
@@ -10,13 +9,16 @@ const PageBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
+    damDomain,
     content: {
       editorContent: { path, slug, canonicalSite },
     },
     selectedEditorID,
     setSelectedContent,
     globalLangs,
-    isPreviewMode,
+    theme,
+    isReadOnly,
+    isPreview,
   } = props;
 
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
@@ -31,11 +33,13 @@ const PageBrowser = (props: IProps) => {
       selectedEditorID={selectedEditorID}
       setSelectedContent={setSelectedContent}
       url={url}
-      theme={themes[0]}
+      theme={theme}
       cloudinaryName={cloudinaryName}
+      damDomain={damDomain}
       siteLangs={globalLangs}
-      disabled={isPreviewMode}
+      disabled={isReadOnly}
       siteID={canonicalSite}
+      isPreview={isPreview}
     />
   );
 };
@@ -45,7 +49,8 @@ interface IEditorStateProps {
   content: any;
   selectedEditorID: number;
   socials: ISocialState;
-  cloudinaryName: string;
+  cloudinaryName: string | null;
+  damDomain: string | null;
   globalLangs: ILanguage[];
   schema: ISchema | Record<string, unknown>;
   breadcrumb: IBreadcrumbItem[];
@@ -55,7 +60,9 @@ interface IEditorStateProps {
 
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
-  isPreviewMode: boolean;
+  theme: string;
+  isReadOnly: boolean;
+  isPreview?: boolean;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;
@@ -65,6 +72,7 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   selectedEditorID: state.pageEditor.selectedEditorID as number,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
+  damDomain: state.app.globalSettings.damDomain,
   globalLangs: state.app.globalLangs,
   schema: state.pageEditor.schema,
   breadcrumb: state.pageEditor.breadcrumb,

package/src/modules/GlobalEditor/Preview/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import PageBrowser from "../PageBrowser";
+import * as S from "./style";
+
+const PreviewBrowser = (props: IProps) => {
+  const { theme } = props;
+  return (
+    <S.BrowserWrapper>
+      <PageBrowser isReadOnly={true} isPreview={true} theme={theme} />
+    </S.BrowserWrapper>
+  );
+};
+
+interface IProps {
+  theme: string;
+}
+
+export default PreviewBrowser;

package/src/modules/GlobalEditor/Preview/style.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const BrowserWrapper = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground01};
+  height: calc(100% - 44px);
+  width: 100%;
+`;
+
+export { BrowserWrapper };

package/src/modules/GlobalEditor/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
+import { themes } from "components";
 import { IErrorItem, IRootState, ISavePageParams, IUserEditing } from "@ax/types";
 import { MainWrapper, Loading, ErrorToast, Notification, Modal } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
@@ -12,6 +13,7 @@ import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty, useModal } from "@ax/hooks";
 import Editor from "./Editor";
+import Preview from "./Preview";
 
 import * as S from "./style";
 
@@ -43,13 +45,18 @@ const GlobalEditor = (props: IProps) => {
 
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
-  const [isPreviewMode, setIsPreviewMode] = useState(false);
+  const [isReadOnly, setIsReadOnly] = useState(false);
+  const [selectedTab, setSelectedTab] = useState("edit");
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
 
   const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
   const isDraft = props.pageStatus === pageStatus.MODIFIED;
   const hasDraft = editorContent.editorContent && editorContent.editorContent.haveDraftPage;
   const isLivePageChanged = editorContent.editorContent && editorContent.editorContent.liveChanged;
+  const structuredData = editorContent.editorContent ? editorContent.editorContent.structuredData : "";
+
+  const defaultTheme = themes.find((theme: any) => theme.default);
+  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
 
   useEffect(() => {
     const { pageID, getPage, setTab, setCurrentSiteInfo, sendPagePing, setStructuredDataFilter } = props;
@@ -80,10 +87,10 @@ const GlobalEditor = (props: IProps) => {
   useEffect(() => {
     const { pageID, sendPagePing, currentUserID } = props;
     if (userEditing && userEditing.id !== currentUserID) {
-      setIsPreviewMode(true);
+      setIsReadOnly(true);
       !isOpen && toggleModal();
     } else {
-      setIsPreviewMode(false);
+      setIsReadOnly(false);
       pageID && sendPagePing(pageID);
       isOpen && toggleModal();
     }
@@ -201,9 +208,14 @@ const GlobalEditor = (props: IProps) => {
     }
   };
 
+  const handleNewTranlation = (isNewTranslation: boolean) => {
+    setSelectedTab("edit");
+    createNewTranslation && createNewTranslation(isNewTranslation);
+  };
+
   const languageActions = {
     setLanguage,
-    createNewTranslation,
+    createNewTranslation: handleNewTranlation,
     getContent: getPage,
   };
 
@@ -226,7 +238,7 @@ const GlobalEditor = (props: IProps) => {
       : undefined;
 
   const downArrowMenu = {
-    displayed: !isPreviewMode,
+    displayed: !isReadOnly,
     button: getPublishButton(props.pageStatus),
     options: [
       {
@@ -286,7 +298,7 @@ const GlobalEditor = (props: IProps) => {
 
   const rightButtonProps = {
     label: isSaving ? "Saving" : getSaveLabel(),
-    disabled: (!isDirty && pageID !== null && !isNewTranslation) || isSaving || isPreviewMode,
+    disabled: (!isDirty && pageID !== null && !isNewTranslation) || isSaving || isReadOnly,
     action: handleSavePage,
   };
 
@@ -357,6 +369,15 @@ const GlobalEditor = (props: IProps) => {
 
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
+  const tabsPreview = {
+    icons: [
+      { name: "edit", text: "Edit mode" },
+      { name: "view", text: "Preview mode" },
+    ],
+    selectedTab,
+    action: (tab: string) => setSelectedTab(tab),
+  };
+
   return isLoading ? (
     <Loading />
   ) : (
@@ -364,6 +385,7 @@ const GlobalEditor = (props: IProps) => {
       <RouteLeavingGuard when={isDirty} action={goToPages} text={modalText} />
       <MainWrapper
         title={pageName}
+        subtitle={structuredData}
         backLink={backLinkRoute}
         rightButton={rightButtonProps}
         downArrowMenu={downArrowMenu}
@@ -380,6 +402,7 @@ const GlobalEditor = (props: IProps) => {
         inversed={true}
         isFromEditor={true}
         pageStatusActions={pageStatusActions}
+        tabs={tabsPreview}
       >
         {errors.length > 0 && (
           <S.NotificationWrapper>
@@ -407,9 +430,13 @@ const GlobalEditor = (props: IProps) => {
           </S.NotificationWrapper>
         )}
         <ErrorToast size="l" />
-        <S.Content>
-          <Editor isGlobal={true} isEditable={isEditable} isPreviewMode={isPreviewMode} />
-        </S.Content>
+        {selectedTab === "edit" ? (
+          <S.Content>
+            <Editor isGlobal={true} isEditable={isEditable} isReadOnly={isReadOnly} theme={theme} />
+          </S.Content>
+        ) : (
+          <Preview theme={theme} />
+        )}
         <Modal
           isOpen={isOpen}
           hide={toggleModal}

package/src/modules/Navigation/Defaults/DefaultsEditor/Editor/DefaultsBrowser/index.tsx

@@ -9,6 +9,7 @@ const DefaultsBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
+    damDomain,
     content,
     selectedEditorID,
     setSelectedContent,
@@ -28,6 +29,7 @@ const DefaultsBrowser = (props: IProps) => {
       url={content.slug}
       theme={theme}
       cloudinaryName={cloudinaryName}
+      damDomain={damDomain}
       siteLangs={siteLangs}
       siteID={siteID}
     />
@@ -40,7 +42,8 @@ interface IEditorStateProps {
   selectedEditorID: number;
   currentSiteInfo: any;
   socials: ISocialState;
-  cloudinaryName: string;
+  cloudinaryName: string | null;
+  damDomain: string | null;
   siteLangs: ILanguage[];
 }
 
@@ -56,6 +59,7 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   currentSiteInfo: state.sites.currentSiteInfo,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
+  damDomain: state.app.globalSettings.damDomain,
   siteLangs: state.sites.currentSiteLanguages,
 });
 

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

@@ -6,7 +6,7 @@ import { sitesActions } from "@ax/containers/Sites";
 import { appActions } from "@ax/containers/App";
 import { ConfigPanel, ResizePanel } from "@ax/components";
 import { IBreadcrumbItem, IRootState, ISchema, ISite, IUserEditing } from "@ax/types";
-import PageBrowser from "./PageBrowser";
+import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
   const {
@@ -32,7 +32,7 @@ const Editor = (props: IProps) => {
     setHistoryPush,
     getGlobalFromLocalPage,
     saveCurrentSiteInfo,
-    isPreviewMode,
+    isReadOnly,
     userEditing,
     site,
   } = props;
@@ -51,7 +51,7 @@ const Editor = (props: IProps) => {
 
   return (
     <ResizePanel
-      leftPanel={<PageBrowser isTemplateActivated={isTemplateActivated} isPreviewMode={isPreviewMode} />}
+      leftPanel={<PageBrowser isTemplateActivated={isTemplateActivated} isReadOnly={isReadOnly} />}
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -68,7 +68,7 @@ const Editor = (props: IProps) => {
           isEditable={isEditable}
           pageTitle={pageTitle}
           setHistoryPush={setHistoryPush}
-          isPreviewMode={isPreviewMode}
+          isReadOnly={isReadOnly}
           userEditing={userEditing}
           theme={site.theme}
         />
@@ -106,7 +106,7 @@ interface IPageBrowserDispatchProps {
   isGlobal: boolean;
   isEditable: boolean;
   pageTitle: string;
-  isPreviewMode: boolean;
+  isReadOnly: boolean;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/PageEditor/{Editor/PageBrowser → PageBrowser}/index.tsx

@@ -9,6 +9,7 @@ const PageBrowser = (props: IProps) => {
   const {
     socials,
     cloudinaryName,
+    damDomain,
     content: {
       editorContent: { path, slug },
       header,
@@ -19,13 +20,14 @@ const PageBrowser = (props: IProps) => {
     currentSiteInfo: { theme, id: siteID },
     siteLangs,
     isTemplateActivated,
-    isPreviewMode,
+    isReadOnly,
+    isPreview,
   } = props;
 
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
   const pathWithoutSlash = path ? (path.endsWith("/") ? path.slice(0, -1) : path) : "";
   const url = `${pathWithoutSlash}${slugWithSlash}`;
-  const disabled = isTemplateActivated === false || isPreviewMode;
+  const disabled = isTemplateActivated === false || isReadOnly;
 
   return (
     <Browser
@@ -39,9 +41,11 @@ const PageBrowser = (props: IProps) => {
       url={url}
       theme={theme}
       cloudinaryName={cloudinaryName}
+      damDomain={damDomain}
       siteLangs={siteLangs}
       disabled={disabled}
       siteID={siteID}
+      isPreview={isPreview}
     />
   );
 };
@@ -52,7 +56,8 @@ interface IEditorStateProps {
   selectedEditorID: number;
   currentSiteInfo: any;
   socials: ISocialState;
-  cloudinaryName: string;
+  cloudinaryName: string | null;
+  damDomain: string | null;
   siteLangs: ILanguage[];
   schema: ISchema | Record<string, unknown>;
   breadcrumb: IBreadcrumbItem[];
@@ -63,7 +68,8 @@ interface IEditorStateProps {
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
   isTemplateActivated: boolean;
-  isPreviewMode: boolean;
+  isReadOnly: boolean;
+  isPreview?: boolean;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;
@@ -74,6 +80,7 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   currentSiteInfo: state.sites.currentSiteInfo,
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
+  damDomain: state.app.globalSettings.damDomain,
   siteLangs: state.sites.currentSiteLanguages,
   schema: state.pageEditor.schema,
   breadcrumb: state.pageEditor.breadcrumb,

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

@@ -0,0 +1,14 @@
+import React from "react";
+
+import PageBrowser from "../PageBrowser";
+import * as S from "./style";
+
+const PreviewBrowser = () => {
+  return (
+    <S.BrowserWrapper>
+      <PageBrowser isTemplateActivated={true} isReadOnly={true} isPreview={true} />
+    </S.BrowserWrapper>
+  );
+};
+
+export default PreviewBrowser;

package/src/modules/PageEditor/Preview/style.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const BrowserWrapper = styled.div`
+  background-color: ${(p) => p.theme.color.uiBackground01};
+  height: calc(100% - 44px);
+  width: 100%;
+`;
+
+export { BrowserWrapper };