Add media app and listeners on Marketplace and Content Freestyle apps (…

…#2693)

https://github.com/zesty-io/manager-ui/assets/10054410/41ce6b94-a10b-4001-b8d4-122bf6027bfa

---------

Co-authored-by: Stuart Runyan <shrunyan@gmail.com>

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<HTMLIFrameElement>) => {
+    return <iframe ref={ref} {...props}></iframe>;
+  }
+);
+
+const IframeWithDAM = withDAM(IframeComponent);
 
 export const FreestyleWrapper = () => {
   const { modelZUID, itemZUID } = useParams<{
@@ -12,7 +21,6 @@ export const FreestyleWrapper = () => {
   const iframeRef = useRef<HTMLIFrameElement | null>(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 (
-    <iframe
-      // @ts-expect-error CONFIG not typed
+    <IframeWithDAM
       src={`${CONFIG.URL_APPS}/freestyle/`}
       ref={iframeRef}
       allow="clipboard-write"
       height="100%"
       width="100%"
       onLoad={handleLoad}
-    ></iframe>
+    ></IframeWithDAM>
   );
 };

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 <iframe ref={ref} {...props}></iframe>;
+});
+
+const IframeWithDAM = withDAM(IframeComponent);
+
 export default function CustomApp() {
   return (
     <main className={cx(styles.CustomApp)}>
@@ -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 ? (
     <Box className={styles.IframeContainer}>
-      <iframe
-        src={app.url}
-        key={app.ZUID}
-        ref={frame}
-        frameBorder="0"
-        allow="clipboard-write"
-        scrolling="yes"
-      ></iframe>
+      {app.ZUID === freestyleAppZUID ? (
+        <IframeWithDAM
+          src={app.url}
+          key={app.ZUID}
+          ref={frame}
+          frameBorder="0"
+          allow="clipboard-write"
+          scrolling="yes"
+        />
+      ) : (
+        <iframe
+          src={app.url}
+          key={app.ZUID}
+          ref={frame}
+          frameBorder="0"
+          allow="clipboard-write"
+          scrolling="yes"
+        ></iframe>
+      )}
     </Box>
   ) : (
     <NotFound

src/globals.d.ts

@@ -0,0 +1,6 @@
+interface Config {
+  COOKIE_NAME: string;
+  URL_APPS: string;
+}
+
+declare var CONFIG: Config;

src/shell/components/withDAM.tsx

@@ -0,0 +1,84 @@
+import React, {
+  ComponentType,
+  MutableRefObject,
+  forwardRef,
+  useEffect,
+  useState,
+} from "react";
+import { MemoryRouter } 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 "../../apps/media/src/app";
+import Cookies from "js-cookie";
+
+export const withDAM = (WrappedComponent: ComponentType) =>
+  forwardRef((props: any, ref: MutableRefObject<HTMLIFrameElement>) => {
+    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 (
+      <>
+        <WrappedComponent ref={ref} {...props} />
+        {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) => {
+                  ref.current.contentWindow.postMessage(
+                    {
+                      type: "ZESTY_DAM_RESPONSE",
+                      source: "zesty",
+                      payload: images,
+                    },
+                    `${CONFIG.URL_APPS}/freestyle/`
+                  );
+                  setShowZestyDAM(false);
+                }}
+              />
+            </Dialog>
+          </MemoryRouter>
+        )}
+      </>
+    );
+  });