@elliemae/pui-app-sdk 6.0.0-alpha.3 → 6.0.0-alpha.4

package/dist/esm/utils/window.js

@@ -17,12 +17,13 @@ const getViewportSize = () => ({
     window.innerHeight || 0
   )
 });
-const convertBreakpointToNumber = (breakpoint) => Number(breakpoint.replace("px", ""));
+const convertBreakpointToNumber = (breakpoint) => Number(breakpoint?.replace("px", ""));
 const getCurrentBreakpoint = () => {
   const { width } = getViewportSize();
   const { breakpoints } = getDefaultTheme();
   if (width <= convertBreakpointToNumber(breakpoints.small)) return "small";
   if (width <= convertBreakpointToNumber(breakpoints.medium)) return "medium";
+  if (width <= convertBreakpointToNumber(breakpoints.xsmall)) return "xsmall";
   return "large";
 };
 const getAssetPath = () => {

package/dist/esm/view/breakpoint/use-breakpoint.js

@@ -11,9 +11,10 @@ const useBreakpoint = () => {
     [
       `(max-width: ${theme.breakpoints.small})`,
       `(max-width: ${theme.breakpoints.medium})`,
-      `(max-width: ${theme.breakpoints.large})`
+      `(max-width: ${theme.breakpoints.large})`,
+      `(max-width: ${theme.breakpoints.xsmall})`
     ],
-    ["small", "medium", "large"],
+    ["small", "medium", "large", "xsmall"],
     "large"
   );
   const dispatch = useAppDispatch();

package/dist/esm/view/error-toast/index.js

@@ -1,6 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, memo } from "react";
-import { ToastPosition, ToastType, DSToast, toast } from "@elliemae/ds-toast";
+import {
+  ToastPosition,
+  ToastType,
+  DSToast,
+  toast
+} from "@elliemae/ds-toast";
 import { useAppSelector, useAppDispatch } from "../../data/react.js";
 import { actions as error } from "../../data/error/index.js";
 const ErrorToast = memo((props) => {
@@ -8,15 +13,27 @@ const ErrorToast = memo((props) => {
   const dispatch = useAppDispatch();
   useEffect(() => {
     if (storeError && (storeError?.description || storeError?.messageText)) {
-      const toastProps = {
+      const {
+        position,
+        messageTitle,
+        type,
+        description,
+        messageText: storeMessageText,
+        messageComponent,
+        ...toastOptions
+      } = {
         position: ToastPosition.TOP_RIGHT,
         messageTitle: "Error",
         type: ToastType.ERROR,
         ...props,
         ...storeError
       };
-      const messageText = toastProps.description || toastProps.messageText;
-      if (messageText) toast({ messageText, ...toastProps }, {});
+      const messageText = description || storeMessageText;
+      if (messageText)
+        toast(
+          { messageText, messageTitle, type, messageComponent },
+          { position, ...toastOptions }
+        );
       dispatch(error.clear());
     }
   }, [storeError, props, dispatch]);

package/dist/esm/view/fields/combo-box/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSComboBox } from "@elliemae/ds-form";
+import { DSComboBox } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/date-input/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSDateInput } from "@elliemae/ds-form";
+import { DSDateInput } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/date-picker/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSDatePicker } from "@elliemae/ds-date-picker";
+import { DSDatePicker } from "@elliemae/ds-legacy-date-picker";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/form-item-layout/index.js

@@ -1,10 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { DSFormItemLayout } from "@elliemae/ds-form";
-import { get } from "react-hook-form";
-import { ConnectForm } from "../connect-form.js";
-const FormItemLayout = ({ name, ...rest }) => /* @__PURE__ */ jsx(ConnectForm, { children: ({
-  formState: { errors }
-}) => {
+import { DSFormItemLayout } from "@elliemae/ds-legacy-form";
+import { useFormState, get } from "react-hook-form";
+const FormItemLayout = ({ name, ...rest }) => {
+  const { errors } = useFormState({ name });
   const errorField = get(errors, name);
   const hasError = !!errorField;
   const validationMessage = errorField?.message;
@@ -17,7 +15,7 @@ const FormItemLayout = ({ name, ...rest }) => /* @__PURE__ */ jsx(ConnectForm, {
       ...rest
     }
   );
-} });
+};
 export {
   FormItemLayout
 };

package/dist/esm/view/fields/form-layout-block-item/index.js

@@ -2,15 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import {
   DSFormLayoutBlockItem
 } from "@elliemae/ds-form-layout-blocks";
-import { get } from "react-hook-form";
-import { ConnectForm } from "../connect-form.js";
+import { useFormState, get } from "react-hook-form";
 const FormLayoutBlockItem = ({
   inputID,
   label,
   ...rest
-}) => /* @__PURE__ */ jsx(ConnectForm, { children: ({
-  formState: { errors }
 }) => {
+  const { errors } = useFormState({ name: inputID });
   const errorField = get(errors, inputID);
   const hasError = !!errorField;
   const validationMessage = errorField?.message;
@@ -24,7 +22,7 @@ const FormLayoutBlockItem = ({
       ...rest
     }
   );
-} });
+};
 export {
   FormLayoutBlockItem
 };

package/dist/esm/view/fields/input-mask/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSInputMask, MASK_TYPES, MASK_PIPES } from "@elliemae/ds-form";
+import { DSInputMask, MASK_TYPES, MASK_PIPES } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/large-text-box/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSLargeInputText } from "@elliemae/ds-form";
+import { DSLargeInputText } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/masked-input-text/index.js

@@ -18,11 +18,11 @@ const MaskedInputText = ({
   const opts = React.useMemo(
     () => ({
       ...maskOpts,
-      onChange: (_, maskedValue) => setValue(name, maskedValue, {
+      onChange: ((_, maskedValue) => setValue(name, maskedValue, {
         shouldValidate: true,
         shouldDirty: true,
         shouldTouch: true
-      }),
+      })),
       valueSetter: setVal
     }),
     [maskOpts, name, setValue]

package/dist/esm/view/fields/radio-group/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSRadioGroup } from "@elliemae/ds-form";
+import { DSRadioGroup } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/fields/text-box/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { DSTextBox } from "@elliemae/ds-form";
+import { DSTextBox } from "@elliemae/ds-legacy-form";
 import {
   Controller
 } from "react-hook-form";

package/dist/esm/view/form/submit-button/index.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
-import { DSButtonV2 } from "@elliemae/ds-button";
+import { DSButtonV2 } from "@elliemae/ds-button-v2";
 const FormSubmitButton = ({ ...rest }) => {
   const {
     formState,

package/dist/esm/view/guest-microapp.js

@@ -0,0 +1,196 @@
+import { jsx } from "react/jsx-runtime";
+import { memo, useLayoutEffect, useRef, useCallback, useMemo } from "react";
+import styled from "styled-components";
+import { useDispatch } from "react-redux";
+import { buildLogRocketQueryParams } from "@elliemae/pui-logrocket";
+import {
+  MicroAppManager
+} from "../utils/micro-frontend/types.js";
+import { getAppBridge } from "../utils/micro-frontend/app-bridge.js";
+import { getSSFHost } from "../utils/micro-frontend/ssf-host.js";
+import { waitMessage } from "../data/wait-message/actions.js";
+import {
+  getLogger,
+  getMicroFrontEndAppConfig
+} from "../utils/micro-frontend/index.js";
+const Div = styled.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  overflow: hidden;
+`;
+const useAppRenderer = (props) => {
+  const {
+    id,
+    history,
+    homeRoute,
+    initialRoute,
+    onLoadComplete,
+    onUnloadComplete,
+    containerId,
+    ssfAppOptions,
+    disableWaitMessage = false
+  } = props;
+  const dispatch = useDispatch();
+  const stableSsfAppOptions = useMemo(
+    () => ssfAppOptions ?? {},
+    [ssfAppOptions]
+  );
+  const getConfig = useCallback(
+    () => getMicroFrontEndAppConfig({
+      id
+    }),
+    [id]
+  );
+  useLayoutEffect(() => {
+    let isMounted = true;
+    let appBridge = null;
+    let ssfHost = null;
+    let unloadInProgress = Promise.resolve();
+    let instanceId = null;
+    (async () => {
+      await unloadInProgress;
+      if (!disableWaitMessage) {
+        dispatch(waitMessage.open());
+      }
+      try {
+        const {
+          microappManager = MicroAppManager.APPSDK,
+          hostUrl,
+          title,
+          name,
+          ssfAppOptions: configSsfAppOptions = {}
+        } = getConfig();
+        const mergedSsfAppOptions = {
+          ...configSsfAppOptions,
+          ...stableSsfAppOptions
+        };
+        if (microappManager === MicroAppManager.SSF) {
+          ssfHost = getSSFHost();
+          if (!ssfHost)
+            throw new Error(`Failed to load ${id}, SSFHost not initialized`);
+          if (!hostUrl)
+            throw new Error(`Failed to load ${id}, hostUrl not configured`);
+          if (isMounted) {
+            const { searchParams, ...guestOptions } = mergedSsfAppOptions;
+            const ssfUrlObj = new URL(hostUrl);
+            if (initialRoute) {
+              const resolved = new URL(initialRoute, ssfUrlObj.origin);
+              ssfUrlObj.pathname = resolved.pathname;
+              ssfUrlObj.search = resolved.search;
+            }
+            const lrParams = buildLogRocketQueryParams();
+            if (lrParams) {
+              ssfUrlObj.search += (ssfUrlObj.search ? "&" : "?") + lrParams;
+            }
+            const targetElement = document.getElementById(containerId);
+            if (!targetElement)
+              throw new Error(
+                `Failed to load ${id}, container element '${containerId ?? ""}' not found`
+              );
+            const guest = ssfHost.loadGuest({
+              id,
+              url: ssfUrlObj.toString(),
+              title: title ?? name,
+              targetElement,
+              searchParams,
+              onLoad: onLoadComplete,
+              options: guestOptions
+            });
+            instanceId = guest.id;
+          }
+        } else {
+          appBridge = await getAppBridge();
+          if (!appBridge)
+            throw new Error(`Failed to load ${id}, AppBridge not initialized`);
+          if (isMounted) {
+            instanceId = await appBridge.openApp({
+              id,
+              frameOptions: {
+                containerId,
+                queryParams: buildLogRocketQueryParams()
+              },
+              history,
+              homeRoute,
+              initialRoute
+            });
+            setTimeout(() => {
+              try {
+                onLoadComplete?.(instanceId);
+              } catch (ex) {
+                getLogger().warn({
+                  message: `onLoadComplete callback failed for ${id}`,
+                  exception: ex
+                });
+              }
+            }, 0);
+          }
+        }
+      } catch (ex) {
+        getLogger().error({
+          message: `Failed to load ${id}`,
+          exception: ex
+        });
+        isMounted = false;
+        if (appBridge && instanceId)
+          unloadInProgress = appBridge.closeApp(instanceId);
+        if (ssfHost && instanceId)
+          unloadInProgress = Promise.resolve(ssfHost.unloadGuest(instanceId));
+        throw ex;
+      } finally {
+        if (!disableWaitMessage) {
+          dispatch(waitMessage.close());
+        }
+      }
+    })();
+    return () => {
+      isMounted = false;
+      if (ssfHost && instanceId) {
+        unloadInProgress = Promise.resolve(ssfHost.unloadGuest(instanceId));
+      } else if (appBridge && instanceId) {
+        unloadInProgress = appBridge.closeApp(instanceId);
+      }
+      unloadInProgress.then(() => {
+        instanceId = null;
+        setTimeout(() => {
+          try {
+            onUnloadComplete?.();
+          } catch (ex) {
+            getLogger().warn({
+              message: `onUnloadComplete callback failed for ${id}`,
+              exception: ex
+            });
+          }
+        }, 0);
+      }).catch((ex) => {
+        getLogger().warn({
+          message: `Failed to unload ${id}`,
+          exception: ex
+        });
+      });
+    };
+  }, [
+    containerId,
+    dispatch,
+    history,
+    homeRoute,
+    initialRoute,
+    id,
+    onLoadComplete,
+    onUnloadComplete,
+    getConfig,
+    stableSsfAppOptions,
+    disableWaitMessage
+  ]);
+};
+const GuestMicroApp = memo(
+  (props) => {
+    const containerId = useRef(crypto.randomUUID());
+    useAppRenderer({ ...props, containerId: containerId.current });
+    return /* @__PURE__ */ jsx(Div, { id: containerId.current });
+  }
+);
+export {
+  GuestMicroApp
+};

package/dist/esm/view/login/index.js

@@ -13,7 +13,8 @@ const Login = ({
   disableRememberMe,
   useCompactIdpPage,
   isSSO,
-  children
+  children,
+  isConsumerUser
 }) => {
   const [userAuthorized, setUserAuthorized] = useState(false);
   const dispatch = useAppDispatch();
@@ -30,7 +31,8 @@ const Login = ({
       userId,
       disableRememberMe,
       useCompactIdpPage,
-      isSSO
+      isSSO,
+      isConsumerUser
     }).then(({ authorized }) => {
       if (authorized) setUserAuthorized(true);
       dispatch({ type: LOGIN_SUCCESS });
@@ -48,7 +50,8 @@ const Login = ({
     userId,
     disableRememberMe,
     useCompactIdpPage,
-    isSSO
+    isSSO,
+    isConsumerUser
   ]);
   return userAuthorized ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
 };

package/dist/esm/view/micro-app/app-factory/index.js

@@ -1,3 +1,4 @@
+import { ScriptLoader, StyleLoader } from "@elliemae/pui-app-bridge";
 import { persistentStorage } from "../../../utils/web-storage.js";
 import { CMicroAppHost } from "../../../utils/micro-frontend/host.js";
 import { getLogger } from "../../../utils/micro-frontend/index.js";
@@ -7,15 +8,6 @@ import {
   getCurrentBreakpoint,
   getViewportSize
 } from "../../../utils/window.js";
-import {
-  addStylesToDOM,
-  removeDynamicImportedStyles
-} from "../resources/style.js";
-import {
-  addScriptToDOM,
-  removeDynamicImportedScripts,
-  removePrefetchLinks
-} from "../resources/script.js";
 import {
   getAppManifest,
   getFullFileNameofAssetsFromManifest
@@ -24,6 +16,8 @@ const cssType = /\.css$/;
 const isCss = (fileName) => cssType.test(fileName);
 const activeApps = {};
 const getPathName = (url) => url ? new URL(url).pathname : "";
+const scriptLoader = new ScriptLoader(getLogger());
+const styleLoader = new StyleLoader(getLogger());
 const getAppNotFoundError = (id, uuid) => `Application ${id} with instance id ${uuid} is not found. Most probably the appId property of app.config.json is not set to ${id}`;
 const getMicroAppGuestFromWindow = ({
   id,
@@ -120,20 +114,7 @@ const addAppToActiveAppList = (id, uuid, elementIds) => {
   activeApps[`${id}-${uuid}`] = { elementIds };
   const host = CMicroAppHost.getInstance();
   if (host) host.activeGuests[`${id}-${uuid}`] = getRef && getRef() || {};
-  return Promise.resolve();
 };
-const waitAndInitApplication = (appConfig, requests) => (
-  // wait for all assets to get downloaded
-  Promise.all(requests).then(addAppToActiveAppList.bind(null, appConfig.id, appConfig.uuid)).then(initApplication.bind(null, appConfig)).catch((err) => {
-    const logRecord = logRecords.APP_INIT_FAILED(
-      appConfig.id,
-      appConfig.uuid,
-      err.message
-    );
-    getLogger().error({ ...logRecord, exception: err });
-    throw new Error(logRecord.message);
-  })
-);
 const removeAssetsFromDOM = (id, uuid, documentEle = document) => {
   const host = CMicroAppHost.getInstance();
   if (host) delete host.activeGuests[`${id}-${uuid}`];
@@ -192,21 +173,36 @@ const removeAppFromGlobalVariable = (id, uuid) => {
   }
 };
 const loadApp = async (appConfig) => {
-  const { id, uuid, documentEle } = appConfig;
+  const { name, id, hostUrl = "", uuid, documentEle, isJsModule } = appConfig;
   addAppToGlobalVariable({ id, uuid, documentEle });
   try {
     getLogger().info(logRecords.APP_LOADING(id, uuid));
     let assets = appConfig.files;
     const manifest = await getAppManifest(appConfig);
     assets = getFullFileNameofAssetsFromManifest(manifest, appConfig.files);
-    let counter = 0;
-    const requests = assets.map((fileName) => {
-      counter += 1;
-      return !isCss(fileName) ? addScriptToDOM(appConfig, fileName, counter) : addStylesToDOM(appConfig, fileName, counter);
-    });
-    await waitAndInitApplication(appConfig, requests);
+    const cssAssets = assets.filter((fileName) => isCss(fileName));
+    const jsAssets = assets.filter((fileName) => !isCss(fileName));
+    const loadOptions = {
+      name,
+      hostUrl,
+      documentEle,
+      isESMModule: isJsModule
+    };
+    const styleElementIds = await styleLoader.load(cssAssets, loadOptions);
+    const scriptElementIds = await scriptLoader.load(jsAssets, loadOptions);
+    addAppToActiveAppList(appConfig.id, appConfig.uuid, [
+      ...styleElementIds,
+      ...scriptElementIds
+    ]);
+    await initApplication(appConfig);
     getLogger().info(logRecords.APP_LOADING_COMPLETE(id, uuid));
   } catch (err) {
+    const logRecord = logRecords.APP_INIT_FAILED(
+      appConfig.id,
+      appConfig.uuid,
+      err.message
+    );
+    getLogger().error({ ...logRecord, exception: err });
     removeAppFromGlobalVariable(id, uuid);
     throw err;
   }
@@ -222,9 +218,9 @@ const unloadApp = ({
   const app = getMicroAppGuestFromWindow({ id, uuid });
   if (!app) return;
   removeAssetsFromDOM(id, uuid, documentEle);
-  removeDynamicImportedScripts(hostUrl, documentEle);
-  removePrefetchLinks(hostUrl, documentEle);
-  removeDynamicImportedStyles(hostUrl, documentEle);
+  scriptLoader.removeDynamicImportedScripts(hostUrl, documentEle);
+  scriptLoader.removePrefetchLinks(hostUrl, documentEle);
+  styleLoader.removeDynamicImportedStyles(hostUrl, documentEle);
   removeAppFromGlobalVariable(id, uuid);
   getLogger().info(logRecords.APP_UNLOADING_COMPLETE(id, uuid));
 };

package/dist/esm/view/micro-app/resources/manifest.js

@@ -3,6 +3,15 @@ import { removeDoubleSlash } from "../../../utils/url.js";
 import { getLogger } from "../../../utils/micro-frontend/index.js";
 import { logRecords } from "../../../utils/log-records.js";
 const getUnVersionedManifestPath = (path) => path.replace(/\/\d+\.\d+/, "/latest");
+const isValidHttpUrl = (fileName) => {
+  let url;
+  try {
+    url = new URL(fileName);
+  } catch (_) {
+    return false;
+  }
+  return url.protocol === "http:" || url.protocol === "https:";
+};
 const getAppManifest = async ({
   hostUrl,
   manifestPath
@@ -40,6 +49,7 @@ const getAppManifest = async ({
 const getFullFileNameofAssetsFromManifest = (manifest, assetNames = []) => assetNames.reduce((assets, assetName) => {
   const fullFileName = manifest[assetName];
   if (fullFileName) assets.push(fullFileName);
+  else if (isValidHttpUrl(assetName)) assets.push(assetName);
   else {
     const logRecord = logRecords.ASSET_NOT_FOUND_IN_MANIFEST(assetName);
     getLogger().error(logRecord);

package/dist/esm/view/micro-app/resources/script.js

@@ -2,7 +2,8 @@ import { removeDoubleSlash } from "../../../utils/url.js";
 const APP_SCRIPT_ID_PREFIX = "emui-script-";
 const HEAD_SCRIPTS = /(?:emuiDiagnostics|global|global-prod|emuiUserMonitoring)(?:..*)?.js/;
 const isHeadScript = (scriptSrc) => HEAD_SCRIPTS.test(scriptSrc);
-const addScriptToDOM = ({ name, hostUrl, documentEle }, fileName, index) => {
+const isJSDOM = () => window.navigator.userAgent.includes("jsdom");
+const addScriptToDOM = ({ name, hostUrl, documentEle }, fileName, index, isJsModule = false) => {
   if (!hostUrl)
     throw new Error("Unable to add scripts to DOM. hostUrl is required.");
   return new Promise((resolve, reject) => {
@@ -13,7 +14,8 @@ const addScriptToDOM = ({ name, hostUrl, documentEle }, fileName, index) => {
     ele.src = removeDoubleSlash(url.href);
     ele.onload = resolve.bind(null, ele.id);
     ele.onerror = reject.bind(null, ele.id);
-    ele.async = false;
+    if (isJSDOM() || !isJsModule) ele.async = false;
+    else ele.type = "module";
     if (isHeadScript(ele.src)) documentEle.head.appendChild(ele);
     else documentEle.body.appendChild(ele);
   });

package/dist/esm/view/micro-iframe-app/iframe/index.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
-import { memo, useRef } from "react";
+import { memo, useRef, useMemo } from "react";
 import styled from "styled-components";
+import { buildLogRocketQueryParams } from "@elliemae/pui-logrocket";
 import { IFRAME_CONTAINER_ID_PREFIX } from "./const.js";
 const Div = styled.div`
   display: flex;
@@ -21,14 +22,18 @@ const IFrame = memo(
   ({ id, name: title, src, sandbox, onFrameReady }) => {
     const frameRef = useRef(null);
     const sandboxProps = sandbox ? { sandbox } : {};
+    const srcWithParams = useMemo(
+      () => `${src}${src.includes("?") ? "&" : "?"}${buildLogRocketQueryParams()}`,
+      [src]
+    );
     return /* @__PURE__ */ jsx(Div, { children: /* @__PURE__ */ jsx(
       Iframe,
       {
         id: `${IFRAME_CONTAINER_ID_PREFIX}${id}`,
         ref: frameRef,
         title,
-        src,
-        scrolling: "no",
+        src: srcWithParams,
+        "data-testid": `${IFRAME_CONTAINER_ID_PREFIX}${id}`,
         ...sandboxProps,
         onLoad: () => frameRef?.current?.contentDocument && onFrameReady(frameRef.current.contentDocument)
       }

package/dist/esm/view/micro-iframe-app/iframe.html

@@ -32,7 +32,7 @@
         startVirtualPageMonitoringWithAutoEnd: function () {},
       };
     </script> -->
-    <script>
+    <script nonce="__CSP_NONCE__">
       (function (i, s, o, g, r, a, m) {
         i['GoogleAnalyticsObject'] = r;
         (i[r] =
@@ -53,7 +53,7 @@
         'ga',
       );
     </script>
-    <style>
+    <style nonce="__CSP_NONCE__">
       .full-width {
         width: 100%;
       }
@@ -70,11 +70,10 @@
       <strong>JavaScript has been disabled on your browser</strong>, please
       <strong>enable JS</strong> to make this app work.</noscript
     >
-    <div id="pui-app-container-" class="full-width full-height"></div>
-    <script>
-      LogRocket.init('fds38t/ice-mortgage-technology', {
-        mergeIframes: true,
-      });
-    </script>
+    <div
+      id="pui-app-container-"
+      data-testid="pui-app-container-"
+      class="full-width full-height"
+    ></div>
   </body>
 </html>

package/dist/esm/view/micro-iframe-app/use-frame-loaded.js

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { trackActivity } from "../../utils/session.js";
 import { CMicroAppHost } from "../../utils/micro-frontend/host.js";
 import { getMicroFrontEndAppConfig } from "../../utils/micro-frontend/index.js";
+import { APP_CONTAINER_ID_PREFIX } from "../micro-app/const.js";
 const addBaseTag = (id, documentEle) => {
   const { hostUrl, manifestPath } = getMicroFrontEndAppConfig({
     id
@@ -13,9 +14,10 @@ const addBaseTag = (id, documentEle) => {
   documentEle.getElementsByTagName("head")[0].appendChild(base);
 };
 const updateContainerId = (id, documentEle) => {
-  const ele = documentEle.getElementById("pui-app-container-");
+  const ele = documentEle.getElementById(APP_CONTAINER_ID_PREFIX);
   if (ele) {
     ele.id = `${ele.id}${id}`;
+    ele.dataset.testid = ele.id;
   }
 };
 const useFrameLoaded = ({ id, documentEle }) => {