diff --git a/src/apps/content-editor/src/app/views/ItemEdit/FreestyleWrapper.tsx b/src/apps/content-editor/src/app/views/ItemEdit/FreestyleWrapper.tsx index f7b9383c8f..e58728ade1 100644 --- a/src/apps/content-editor/src/app/views/ItemEdit/FreestyleWrapper.tsx +++ b/src/apps/content-editor/src/app/views/ItemEdit/FreestyleWrapper.tsx @@ -1,8 +1,17 @@ import Cookies from "js-cookie"; -import { useRef, useState } from "react"; +import { MutableRefObject, forwardRef, useRef, useState } from "react"; import { useSelector } from "react-redux"; import { AppState } from "../../../../../../shell/store/types"; import { useParams } from "react-router"; +import { withDAM } from "../../../../../../shell/components/withDAM"; + +const IframeComponent = forwardRef( + (props: any, ref: MutableRefObject) => { + return ; + } +); + +const IframeWithDAM = withDAM(IframeComponent); export const FreestyleWrapper = () => { const { modelZUID, itemZUID } = useParams<{ @@ -12,7 +21,6 @@ export const FreestyleWrapper = () => { const iframeRef = useRef(null); const instance = useSelector((state: AppState) => state.instance); - // @ts-expect-error CONFIG not typed const [sessionToken] = useState(Cookies.get(CONFIG.COOKIE_NAME)); const handleLoad = () => { @@ -27,20 +35,18 @@ export const FreestyleWrapper = () => { itemZUID, }, }, - // @ts-expect-error CONFIG not typed `${CONFIG.URL_APPS}/freestyle/` ); }; return ( - + > ); }; diff --git a/src/apps/marketplace/src/app/view/CustomApp.js b/src/apps/marketplace/src/app/view/CustomApp.js index f472d92c21..485871f1fc 100644 --- a/src/apps/marketplace/src/app/view/CustomApp.js +++ b/src/apps/marketplace/src/app/view/CustomApp.js @@ -1,6 +1,6 @@ import Cookies from "js-cookie"; import cx from "classnames"; -import { useEffect, useRef, useState } from "react"; +import { forwardRef, useEffect, useRef, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Route, Switch } from "react-router"; import { Box } from "@mui/material"; @@ -9,6 +9,14 @@ import { NotFound } from "shell/components/NotFound"; import { InstallApp } from "../components/InstallApp"; import styles from "./CustomApp.less"; +import { withDAM } from "../../../../../shell/components/withDAM"; + +const IframeComponent = forwardRef((props, ref) => { + return ; +}); + +const IframeWithDAM = withDAM(IframeComponent); + export default function CustomApp() { return (
@@ -30,6 +38,8 @@ function LoadApp(props) { const instance = useSelector((state) => state.instance); const [sessionToken] = useState(Cookies.get(CONFIG.COOKIE_NAME)); + const freestyleAppZUID = "80-d8abaff6ef-wxs830"; + useEffect(() => { if (frame.current) { // TODO need too rethink this. The goal was to allow posting messages from other locations within core @@ -56,14 +66,25 @@ function LoadApp(props) { return app ? ( - + {app.ZUID === freestyleAppZUID ? ( + + ) : ( + + )} ) : ( + forwardRef((props: any, ref: MutableRefObject) => { + const [showZestyDAM, setShowZestyDAM] = useState(false); + + useEffect(() => { + window.addEventListener("message", handleZestyDAMRequest); + return () => { + window.removeEventListener("message", handleZestyDAMRequest); + }; + }, []); + + const handleZestyDAMRequest = (event: MessageEvent) => { + if ( + event.data.type === "ZESTY_DAM_REQUEST" && + // Ensure the session is valid by checking against the current token + event.data.token === Cookies.get(CONFIG.COOKIE_NAME) + ) { + setShowZestyDAM(true); + } + }; + + return ( + <> + + {showZestyDAM && ( + + setShowZestyDAM(false)} + > + setShowZestyDAM(false)} + > + + + { + ref.current.contentWindow.postMessage( + { + type: "ZESTY_DAM_RESPONSE", + source: "zesty", + payload: images, + }, + `${CONFIG.URL_APPS}/freestyle/` + ); + setShowZestyDAM(false); + }} + /> + + + )} + + ); + });