Add media app and listeners on Marketplace and Content Freestyle apps

src/apps/content-editor/src/app/views/ItemEdit/FreestyleWrapper.tsx

@@ -1,8 +1,12 @@
 import Cookies from "js-cookie";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useSelector } from "react-redux";
 import { AppState } from "../../../../../../shell/store/types";
-import { useParams } from "react-router";
+import { MemoryRouter, useParams } from "react-router";
+import { IconButton } from "@zesty-io/material";
+import { GridCloseIcon } from "@mui/x-data-grid-pro";
+import { Dialog } from "@mui/material";
+import { MediaApp } from "../../../../../media/src/app";
 
 export const FreestyleWrapper = () => {
   const { modelZUID, itemZUID } = useParams<{
@@ -15,6 +19,21 @@ export const FreestyleWrapper = () => {
   // @ts-expect-error CONFIG not typed
   const [sessionToken] = useState(Cookies.get(CONFIG.COOKIE_NAME));
 
+  const [showZestyDAM, setShowZestyDAM] = useState(false);
+
+  const handleZestyDAMRequest = (event: MessageEvent) => {
+    if (event.data.type === "ZESTY_DAM_REQUEST") {
+      setShowZestyDAM(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("message", handleZestyDAMRequest);
+    return () => {
+      window.removeEventListener("message", handleZestyDAMRequest);
+    };
+  }, []);
+
   const handleLoad = () => {
     // Send users session into frame on load
     iframeRef.current?.contentWindow.postMessage(
@@ -33,14 +52,60 @@ export const FreestyleWrapper = () => {
   };
 
   return (
-    <iframe
-      // @ts-expect-error CONFIG not typed
-      src={`${CONFIG.URL_APPS}/freestyle/`}
-      ref={iframeRef}
-      allow="clipboard-write"
-      height="100%"
-      width="100%"
-      onLoad={handleLoad}
-    ></iframe>
+    <>
+      <iframe
+        // @ts-expect-error CONFIG not typed
+        src={`${CONFIG.URL_APPS}/freestyle/`}
+        ref={iframeRef}
+        allow="clipboard-write"
+        height="100%"
+        width="100%"
+        onLoad={handleLoad}
+      ></iframe>
+      {showZestyDAM && (
+        <MemoryRouter>
+          <Dialog
+            open
+            fullScreen
+            sx={{ my: 2.5, mx: 10 }}
+            PaperProps={{
+              style: {
+                borderRadius: "4px",
+                overflow: "hidden",
+              },
+            }}
+            onClose={() => setShowZestyDAM(false)}
+          >
+            <IconButton
+              sx={{
+                position: "fixed",
+                right: 5,
+                top: 0,
+              }}
+              onClick={() => setShowZestyDAM(false)}
+            >
+              <GridCloseIcon sx={{ color: "common.white" }} />
+            </IconButton>
+            <MediaApp
+              limitSelected={1}
+              isSelectDialog={true}
+              showHeaderActions={false}
+              addImagesCallback={(images) => {
+                iframeRef.current.contentWindow.postMessage(
+                  {
+                    type: "ZESTY_DAM_RESPONSE",
+                    source: "zesty",
+                    payload: images,
+                  },
+                  // @ts-expect-error CONFIG not typed
+                  `${CONFIG.URL_APPS}/freestyle/`
+                );
+                setShowZestyDAM(false);
+              }}
+            />
+          </Dialog>
+        </MemoryRouter>
+      )}
+    </>
   );
 };

src/apps/marketplace/src/app/view/CustomApp.js

@@ -2,13 +2,16 @@ import Cookies from "js-cookie";
 import cx from "classnames";
 import { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { Route, Switch } from "react-router";
-import { Box } from "@mui/material";
+import { MemoryRouter, Route, Switch } from "react-router";
+import { Box, Dialog } from "@mui/material";
 
 import { NotFound } from "shell/components/NotFound";
 import { InstallApp } from "../components/InstallApp";
 
 import styles from "./CustomApp.less";
+import { IconButton } from "@zesty-io/material";
+import { GridCloseIcon } from "@mui/x-data-grid-pro";
+import { MediaApp } from "../../../../media/src/app";
 export default function CustomApp() {
   return (
     <main className={cx(styles.CustomApp)}>
@@ -30,6 +33,8 @@ function LoadApp(props) {
   const instance = useSelector((state) => state.instance);
   const [sessionToken] = useState(Cookies.get(CONFIG.COOKIE_NAME));
 
+  const [showZestyDAM, setShowZestyDAM] = useState(false);
+
   useEffect(() => {
     if (frame.current) {
       // TODO need too rethink this. The goal was to allow posting messages from other locations within core
@@ -54,6 +59,19 @@ function LoadApp(props) {
     }
   }, [frame.current, app]);
 
+  const handleZestyDAMRequest = (event) => {
+    if (event.data.type === "ZESTY_DAM_REQUEST") {
+      setShowZestyDAM(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener("message", handleZestyDAMRequest);
+    return () => {
+      window.removeEventListener("message", handleZestyDAMRequest);
+    };
+  }, []);
+
   return app ? (
     <Box className={styles.IframeContainer}>
       <iframe
@@ -64,6 +82,49 @@ function LoadApp(props) {
         allow="clipboard-write"
         scrolling="yes"
       ></iframe>
+      {showZestyDAM && (
+        <MemoryRouter>
+          <Dialog
+            open
+            fullScreen
+            sx={{ my: 2.5, mx: 10 }}
+            PaperProps={{
+              style: {
+                borderRadius: "4px",
+                overflow: "hidden",
+              },
+            }}
+            onClose={() => setShowZestyDAM(false)}
+          >
+            <IconButton
+              sx={{
+                position: "fixed",
+                right: 5,
+                top: 0,
+              }}
+              onClick={() => setShowZestyDAM(false)}
+            >
+              <GridCloseIcon sx={{ color: "common.white" }} />
+            </IconButton>
+            <MediaApp
+              limitSelected={1}
+              isSelectDialog={true}
+              showHeaderActions={false}
+              addImagesCallback={(images) => {
+                frame.current.contentWindow.postMessage(
+                  {
+                    type: "ZESTY_DAM_RESPONSE",
+                    source: "zesty",
+                    payload: images,
+                  },
+                  app.url
+                );
+                setShowZestyDAM(false);
+              }}
+            />
+          </Dialog>
+        </MemoryRouter>
+      )}
     </Box>
   ) : (
     <NotFound