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

package/dist/esm/view/tests/serverHandlers.js

@@ -0,0 +1,195 @@
+import { rest } from "msw";
+import { readFile } from "fs/promises";
+import path from "node:path";
+import appConfig from "./app.config.json";
+import loanAppManifest from "./loan/latest/manifest.json";
+import latestTaskManifest from "./task/latest/manifest.json";
+import latestAppManifest from "./travelhub/latest/manifest.json";
+import versionedAppManifest from "./travelhub/23.1/manifest.json";
+import latestFlightsManifest from "./flights/latest/manifest.json";
+import versionedFlightsManifest from "./flights/23.1/manifest.json";
+import latestHotelsManifest from "./hotels/latest/manifest.json";
+import versionedHotelsManifest from "./hotels/23.1/manifest.json";
+import { LATEST_VERSION, RELEASE_VERSION } from "./constants.js";
+import { getMajorMinorVersion } from "./utils.js";
+const relMajorMinorVersion = getMajorMinorVersion(RELEASE_VERSION);
+var ResourceType = /* @__PURE__ */ ((ResourceType2) => {
+  ResourceType2["JS"] = "js";
+  ResourceType2["CSS"] = "css";
+  return ResourceType2;
+})(ResourceType || {});
+const manifests = {
+  task: {
+    latest: latestTaskManifest
+  },
+  travelHub: {
+    latest: latestAppManifest
+  },
+  flights: {
+    latest: latestFlightsManifest
+  },
+  hotels: {
+    latest: latestHotelsManifest
+  }
+};
+manifests.task[relMajorMinorVersion] = {};
+manifests.travelHub[relMajorMinorVersion] = versionedAppManifest;
+manifests.flights[relMajorMinorVersion] = versionedFlightsManifest;
+manifests.hotels[relMajorMinorVersion] = versionedHotelsManifest;
+const sendResource = async (res, ctx, filePath, type = "js" /* JS */) => {
+  const fileContent = await readFile(path.join(__dirname, filePath), "utf-8");
+  return res(
+    ctx.status(200),
+    ctx.set(
+      "Content-Type",
+      type === "js" /* JS */ ? "application/javascript" : "text/css"
+    ),
+    ctx.body(fileContent)
+  );
+};
+const getAppResourceHandlers = (urls, baseFolder) => urls.map((url) => {
+  const handler = rest.get(url, async (req, res, ctx) => {
+    const newRes = await sendResource(
+      res,
+      ctx,
+      `${baseFolder}${url}`,
+      url.includes(".css") ? "css" /* CSS */ : "js" /* JS */
+    );
+    return newRes;
+  });
+  return handler;
+});
+const sendJS = async (res, ctx, filePath) => {
+  const fileContent = await readFile(path.join(__dirname, filePath), "utf-8");
+  return res(
+    ctx.status(200),
+    ctx.set("Content-Type", "application/javascript"),
+    ctx.body(fileContent)
+  );
+};
+const getServerHandlers = () => {
+  const relVersion = getMajorMinorVersion(RELEASE_VERSION);
+  const versionedHandlers = [LATEST_VERSION, relVersion].reduce(
+    (prevValue, version) => {
+      prevValue = prevValue.concat([
+        rest.get(
+          `/travelhub/${version}/manifest.json`,
+          (req, res, ctx) => res(ctx.json(manifests.travelHub[version]))
+        ),
+        rest.get(
+          `/subfolder/${version}/manifest.json`,
+          (req, res, ctx) => res(ctx.json(manifests.travelHub[version]))
+        ),
+        rest.get(
+          `/task/${version}/manifest.json`,
+          (req, res, ctx) => res(ctx.json(manifests.task[version]))
+        ),
+        rest.get(
+          `/flights/${version}/manifest.json`,
+          (req, res, ctx) => res(ctx.json(manifests.flights[version]))
+        ),
+        rest.get(
+          `/hotels/${version}/manifest.json`,
+          (req, res, ctx) => res(ctx.json(manifests.hotels[version]))
+        ),
+        ...getAppResourceHandlers(
+          [
+            `/task/${version}/index.js`,
+            `/task/${version}/index.dev.js`,
+            `/travelhub/${version}/app.checksum.js`,
+            `/travelhub/${version}/app.checksum.css`,
+            `/travelhub/${version}/landing.checksum.js`,
+            `/travelhub/${version}/landing.checksum.css`,
+            `/travelhub/${version}/landing.checksum1.js`,
+            `/travelhub/${version}/landing.checksum1.css`,
+            `/flights/${version}/app.checksum.js`,
+            `/flights/${version}/app.checksum.css`,
+            `/flights/${version}/app.checksum1.js`,
+            `/flights/${version}/app.checksum1.css`,
+            `/hotels/${version}/app.checksum.js`,
+            `/hotels/${version}/app.checksum.css`,
+            `/hotels/${version}/app.checksum1.js`,
+            `/hotels/${version}/app.checksum1.css`
+          ],
+          "./"
+        )
+      ]);
+      return prevValue;
+    },
+    []
+  );
+  return versionedHandlers;
+};
+const serverHandlers = [
+  rest.get(
+    "https://www.google-analytics.com/analytics.js",
+    (req, res, ctx) => res(
+      ctx.status(200),
+      ctx.set("Content-Type", "application/javascript"),
+      ctx.body("")
+    )
+  ),
+  rest.get(
+    "/latest/app.config.json",
+    (req, res, ctx) => res(ctx.json(appConfig))
+  ),
+  rest.get(
+    `/${relMajorMinorVersion}/app.config.json`,
+    (req, res, ctx) => res(ctx.json(appConfig))
+  ),
+  // frame html
+  rest.get("/iframe.html", async (req, res, ctx) => {
+    const fileContent = await readFile(
+      path.join(__dirname, "../micro-iframe-app/iframe.html"),
+      "utf-8"
+    );
+    return res(
+      ctx.status(200),
+      ctx.set("Content-Type", "text/html"),
+      ctx.body(fileContent)
+    );
+  }),
+  rest.get("/frame.html", async (req, res, ctx) => {
+    const fileContent = await readFile(
+      path.join(
+        process.cwd(),
+        "node_modules/@elliemae/pui-app-bridge/dist/esm/frame.html"
+      ),
+      "utf-8"
+    );
+    return res(
+      ctx.status(200),
+      ctx.set("Content-Type", "text/html"),
+      ctx.body(fileContent)
+    );
+  }),
+  rest.get("/loan/latest/index.js", async (req, res, ctx) => {
+    const newRes = await sendJS(res, ctx, "./loan/latest/index.js");
+    return newRes;
+  }),
+  // loan microapp handler
+  rest.get(
+    "/loan/latest/manifest.json",
+    (req, res, ctx) => res(ctx.json(loanAppManifest))
+  ),
+  rest.get("/ssfapp/", async (req, res, ctx) => {
+    const fileContent = await readFile(
+      path.join(__dirname, "ssfapp/index.html"),
+      "utf-8"
+    );
+    return res(
+      ctx.status(200),
+      ctx.set("Content-Type", "text/html"),
+      ctx.body(fileContent)
+    );
+  }),
+  rest.get("/ssfapp/latest/index.js", async (req, res, ctx) => {
+    const newRes = await sendJS(res, ctx, "./ssfapp/latest/index.js");
+    return newRes;
+  }),
+  ...getServerHandlers()
+];
+export {
+  getServerHandlers,
+  serverHandlers
+};

package/dist/esm/view/tests/ssfapp/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SSFApp</title>
+    <!-- <script src="https://cdn.mortgagetech.q1.ice.com/ssf-guest"></script> -->
+</head>
+<body>
+    <h1>SSF App</h1>
+    <output id="output"></output>
+    <script src="./latest/index.js"></script>
+</body>
+</html>

package/dist/esm/view/tests/ssfapp/latest/index.js

@@ -0,0 +1,15 @@
+const appId = "ssfapp";
+const output = document.getElementById("output");
+output.textContent = `${appId} starting`;
+window.addEventListener("beforeunload", () => {
+  if (output) {
+    output.textContent += `
+${appId} unloading`;
+  }
+});
+document.addEventListener("load", () => {
+  if (output) {
+    output.textContent += `
+${appId} loaded`;
+  }
+});

package/dist/esm/view/tests/ssfapp/latest/manifest.json

@@ -0,0 +1,3 @@
+{
+  "index.js": "latest/index.js"
+}

package/dist/esm/view/tests/task/latest/index.dev.js

@@ -0,0 +1,66 @@
+const appId = "taskapp";
+const appName = "Task App Dev";
+const appElementId = `pui-app-container-${appId}`;
+const pipelinePath = "/pipeline";
+const pipelineLinkText = "Pipeline";
+const getWindow = () => {
+  try {
+    window.parent.document;
+    return window.parent;
+  } catch (err) {
+    return window;
+  }
+};
+let host = null;
+let parentHistory = null;
+let logger = null;
+const browserWindow = getWindow();
+browserWindow.__TEST__ = browserWindow.__TEST__ ?? {
+  logs: []
+};
+window.emui = window.emui || { uuid: crypto.randomUUID() };
+window.emui.app = {
+  uuid: window.emui.uuid,
+  init: async (options) => {
+    browserWindow.__TEST__.logs.push(`${appId} initializing`);
+    host = options.host;
+    parentHistory = options.history;
+    logger = options.logger;
+  },
+  mount: async () => {
+    browserWindow.__TEST__.logs.push(`${appId} mounting`);
+    const appContainer = document.getElementById(appElementId);
+    if (appContainer) {
+      const mainElement = document.createElement("main");
+      appContainer.appendChild(mainElement);
+      const pageHeaderEle = document.createElement("h1");
+      pageHeaderEle.textContent = appName;
+      mainElement.appendChild(pageHeaderEle);
+      const contentEle = document.createElement("p");
+      contentEle.textContent = "Go to ";
+      mainElement.appendChild(contentEle);
+      const linkEle = document.createElement("a");
+      linkEle.href = "#";
+      linkEle.onclick = () => {
+        parentHistory?.push?.(pipelinePath);
+      };
+      linkEle.textContent = pipelineLinkText;
+      contentEle.appendChild(linkEle);
+      browserWindow.__TEST__.logs.push(`${appId} mounted`);
+    } else {
+      throw new Error(
+        `App container element with id ${appElementId} not found`
+      );
+    }
+  },
+  unmount: () => {
+    browserWindow.__TEST__.logs.push(`${appId} unmounting`);
+    const appContainer = document.getElementById(appElementId);
+    if (appContainer) {
+      appContainer.removeChild(appContainer.getElementsByTagName("main")[0]);
+    }
+    browserWindow.__TEST__.logs.push(`${appId} unmounted`);
+    return Promise.resolve();
+  }
+};
+browserWindow.emui?.registerApp?.({ appId, app: window.emui.app });

package/dist/esm/view/tests/task/latest/index.js

@@ -0,0 +1,66 @@
+const appId = "taskapp";
+const appName = "Task App";
+const appElementId = `pui-app-container-${appId}`;
+const pipelinePath = "/pipeline";
+const pipelineLinkText = "Pipeline";
+const getWindow = () => {
+  try {
+    window.parent.document;
+    return window.parent;
+  } catch (err) {
+    return window;
+  }
+};
+let host = null;
+let parentHistory = null;
+let logger = null;
+const browserWindow = getWindow();
+browserWindow.__TEST__ = browserWindow.__TEST__ ?? {
+  logs: []
+};
+window.emui = window.emui || { uuid: crypto.randomUUID() };
+window.emui.app = {
+  uuid: window.emui.uuid,
+  init: async (options) => {
+    browserWindow.__TEST__.logs.push(`${appId} initializing`);
+    host = options.host;
+    parentHistory = options.history;
+    logger = options.logger;
+  },
+  mount: async () => {
+    browserWindow.__TEST__.logs.push(`${appId} mounting`);
+    const appContainer = document.getElementById(appElementId);
+    if (appContainer) {
+      const mainElement = document.createElement("main");
+      appContainer.appendChild(mainElement);
+      const pageHeaderEle = document.createElement("h1");
+      pageHeaderEle.textContent = appName;
+      mainElement.appendChild(pageHeaderEle);
+      const contentEle = document.createElement("p");
+      contentEle.textContent = "Go to ";
+      mainElement.appendChild(contentEle);
+      const linkEle = document.createElement("a");
+      linkEle.href = "#";
+      linkEle.onclick = () => {
+        parentHistory?.push?.(pipelinePath);
+      };
+      linkEle.textContent = pipelineLinkText;
+      contentEle.appendChild(linkEle);
+      browserWindow.__TEST__.logs.push(`${appId} mounted`);
+    } else {
+      throw new Error(
+        `App container element with id ${appElementId} not found`
+      );
+    }
+  },
+  unmount: () => {
+    browserWindow.__TEST__.logs.push(`${appId} unmounting`);
+    const appContainer = document.getElementById(appElementId);
+    if (appContainer) {
+      appContainer.removeChild(appContainer.getElementsByTagName("main")[0]);
+    }
+    browserWindow.__TEST__.logs.push(`${appId} unmounted`);
+    return Promise.resolve();
+  }
+};
+browserWindow.emui?.registerApp?.({ appId, app: window.emui.app });

package/dist/esm/view/tests/task/latest/manifest.json

@@ -0,0 +1,4 @@
+{
+  "index.js": "latest/index.js",
+  "index.dev.js": "latest/index.dev.js"
+}

package/dist/esm/view/tests/travelhub/23.1/app.checksum.css

@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

package/dist/esm/view/tests/travelhub/23.1/app.checksum.js

@@ -0,0 +1,24 @@
+const appId = "travelhub";
+const appName = "Travel Hub";
+const getWindow = () => {
+  try {
+    window.parent.document;
+    return window.parent;
+  } catch (err) {
+    return window;
+  }
+};
+const browserWindow = getWindow();
+browserWindow.emui = browserWindow.emui || {};
+browserWindow.emui[appId] = browserWindow.emui[appId] || {};
+const mainElement = document.createElement("main");
+mainElement.id = "travelhub";
+const pageHeaderEle = document.createElement("h1");
+pageHeaderEle.id = "header";
+pageHeaderEle.textContent = appName;
+mainElement.appendChild(pageHeaderEle);
+const versionEle = document.createElement("p");
+versionEle.id = "version";
+versionEle.textContent = "Version: 23.1";
+mainElement.appendChild(versionEle);
+document.body.appendChild(mainElement);

package/dist/esm/view/tests/travelhub/23.1/landing.checksum1.css

@@ -0,0 +1,3 @@
+#content {
+  color: green;
+}

package/dist/esm/view/tests/travelhub/23.1/landing.checksum1.js

@@ -0,0 +1,5 @@
+const mainElement = document.getElementById("travelhub");
+const contentEle = document.createElement("p");
+contentEle.id = "greeting";
+contentEle.textContent = "Hello Travellers!";
+mainElement.appendChild(contentEle);

package/dist/esm/view/tests/travelhub/23.1/manifest.json

@@ -0,0 +1,6 @@
+{
+  "app.js": "23.1/app.checksum.js",
+  "landing.js": "23.1/landing.checksum1.js",
+  "app.css": "23.1/app.checksum.css",
+  "landing.css": "23.1/landing.checksum1.css"
+}

package/dist/esm/view/tests/travelhub/latest/app.checksum.css

@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}

package/dist/esm/view/tests/travelhub/latest/app.checksum.js

@@ -0,0 +1,29 @@
+(function() {
+  const appId = "travelhub";
+  const appName = "Travel Hub";
+  const getWindow = () => {
+    try {
+      window.parent.document;
+      return window.parent;
+    } catch (err) {
+      return window;
+    }
+  };
+  const browserWindow = getWindow();
+  browserWindow.emui = browserWindow.emui ?? {};
+  browserWindow.emui[appId] = browserWindow.emui[appId] ?? {};
+  browserWindow.__TEST__ = browserWindow.__TEST__ ?? {
+    logs: []
+  };
+  const mainElement = document.createElement("main");
+  mainElement.id = "travelhub";
+  const pageHeaderEle = document.createElement("h1");
+  pageHeaderEle.id = "header";
+  pageHeaderEle.textContent = appName;
+  mainElement.appendChild(pageHeaderEle);
+  const versionEle = document.createElement("p");
+  versionEle.id = "version";
+  versionEle.textContent = "Version: latest";
+  mainElement.appendChild(versionEle);
+  document.body.appendChild(mainElement);
+})();

package/dist/esm/view/tests/travelhub/latest/landing.checksum.css

@@ -0,0 +1,3 @@
+#content {
+  color: green;
+}

package/dist/esm/view/tests/travelhub/latest/landing.checksum.js

@@ -0,0 +1,7 @@
+(function() {
+  const mainElement = document.getElementById("travelhub");
+  const contentEle = document.createElement("p");
+  contentEle.id = "greeting";
+  contentEle.textContent = "Hello Travellers!";
+  mainElement.appendChild(contentEle);
+})();

package/dist/esm/view/tests/travelhub/latest/manifest.json

@@ -0,0 +1,6 @@
+{
+  "app.js": "latest/app.checksum.js",
+  "landing.js": "latest/landing.checksum.js",
+  "app.css": "latest/app.checksum.css",
+  "landing.css": "latest/landing.checksum.css"
+}

package/dist/esm/view/tests/utils.js

@@ -0,0 +1,33 @@
+import { readFile } from "fs/promises";
+import path from "node:path";
+import { logger as puiLogger, Console } from "@elliemae/pui-diagnostics";
+const getMajorMinorVersion = (version) => version.split(".").slice(0, 2).join(".");
+const sendJS = async (res, ctx, filePath) => {
+  const fileContent = await readFile(path.join(__dirname, filePath), "utf-8");
+  return res.once(
+    ctx.status(200),
+    ctx.set("Content-Type", "application/javascript"),
+    ctx.body(fileContent)
+  );
+};
+const sendJSText = async (res, ctx, fileContent) => res.once(
+  ctx.status(200),
+  ctx.set("Content-Type", "application/javascript"),
+  ctx.body(fileContent)
+);
+const releaseJSThread = () => new Promise((resolve) => {
+  setTimeout(resolve, 0);
+});
+const logger = puiLogger({
+  transport: Console(),
+  index: "microfe",
+  team: "ui platform",
+  appName: "MicroFE Tests"
+});
+export {
+  getMajorMinorVersion,
+  logger,
+  releaseJSThread,
+  sendJS,
+  sendJSText
+};

package/dist/esm/view/wait-message/index.js

@@ -9,6 +9,7 @@ import {
   waitStartEvent,
   waitEndEvent
 } from "../../analytics/user-wait-event.js";
+import { lrTrack } from "../../utils/logrocket.js";
 const StyledCircularIndicator = styled(DSCircularIndeterminateIndicator)`
   position: absolute;
   left: 50%;
@@ -37,6 +38,7 @@ const WaitMessage = memo(
           if (isOpen && ref.current) {
             setShow(true);
             waitStartEvent();
+            lrTrack("wait-spinner-start");
           }
         },
         delay ? 1e3 : 0
@@ -44,6 +46,7 @@ const WaitMessage = memo(
       if (!isOpen) {
         setShow(false);
         waitEndEvent();
+        lrTrack("wait-spinner-end");
       }
     }, [delay, isOpen]);
     useHTMLWaitMessage(isOpen !== null);

package/dist/types/lib/analytics/index.d.ts

@@ -1,10 +1,22 @@
 import { BAEvent } from '@elliemae/pui-micro-frontend-base';
 /**
- * Sends business analytics event
- * @param root0
- * @param root0.data
- * @param root0.self
- * @deprecated use Analytics.sendBAEvent scripting object method instead
+ * Sends a business analytics event to Google Tag Manager data layer.
+ * Can send events to the host app or handle locally.
+ * @param config - Event configuration
+ * @param config.data - The analytics event data
+ * @param config.self - If true, sends to self; if false, sends to host app (default: true)
+ * @deprecated Use Analytics.sendBAEvent scripting object method instead
+ * @example
+ * ```typescript
+ * sendBAEvent({
+ *   data: {
+ *     eventName: 'button_click',
+ *     eventCategory: 'user_interaction',
+ *     eventData: { buttonId: 'submit' }
+ *   },
+ *   self: true
+ * });
+ * ```
  */
 export declare const sendBAEvent: ({ data, self, }: {
     data: BAEvent;

package/dist/types/lib/api/auth/index.d.ts

@@ -33,11 +33,13 @@ export interface IntrospectionResponse extends AxiosResponse {
         encompass_instance_id: string;
         user_name: string;
         bearer_token: string;
+        user_key: string;
     };
 }
 export declare const introspectToken: ({ clientId, accessToken, }: IntrospectRequestParams) => Promise<{
     encompass_instance_id: string;
     user_name: string;
     bearer_token: string;
+    user_key: string;
 }>;
 export {};

package/dist/types/lib/api/users/index.d.ts

@@ -1,5 +1,6 @@
 interface UsersRequestParams {
     userName: string;
+    isConsumerUser: boolean;
 }
-export declare const getUser: ({ userName }: UsersRequestParams) => Promise<Record<string, unknown>>;
+export declare const getUser: ({ userName, isConsumerUser, }: UsersRequestParams) => Promise<Record<string, unknown>>;
 export {};

package/dist/types/lib/communication/http-client/baseQuery.d.ts

@@ -8,7 +8,63 @@ type BaseQueryFunction = BaseQueryFn<{
     params?: AxiosRequestConfig['params'];
     headers?: RequestConfig;
 }, unknown, unknown>;
-export declare const sdkBaseQuery: ({ baseUrl }?: {
+/**
+ * Base query function for RTK Query integration.
+ * Provides automatic error handling, authentication, and token refresh capabilities.
+ * Use this as the baseQuery for RTK Query API slices.
+ * @param config - Configuration options
+ * @param config.baseUrl - Base URL for API requests
+ * @param config.authorization - Authorization token applied to every request;
+ *   overrides the session-stored token. Per-endpoint headers still take precedence.
+ * @returns RTK Query base query function
+ * @example
+ * ```typescript
+ * import { createApi } from '@reduxjs/toolkit/query/react';
+ *
+ * const api = createApi({
+ *   reducerPath: 'api',
+ *   baseQuery: sdkBaseQuery({ baseUrl: 'https://api.example.com' }),
+ *   endpoints: (builder) => ({
+ *     getUser: builder.query({
+ *       query: (id) => ({ url: `/users/${id}`, method: 'GET' })
+ *     })
+ *   })
+ * });
+ * ```
+ * @example Passing a custom authorization token at the slice level:
+ * ```typescript
+ * const api = createApi({
+ *   reducerPath: 'api',
+ *   baseQuery: sdkBaseQuery({
+ *     baseUrl: 'https://api.example.com',
+ *     authorization: 'Bearer my-custom-token',
+ *   }),
+ *   endpoints: (builder) => ({
+ *     getUser: builder.query({
+ *       query: (id) => ({ url: `/users/${id}`, method: 'GET' })
+ *     })
+ *   })
+ * });
+ * ```
+ * @example Overriding the token for a specific endpoint via headers:
+ * ```typescript
+ * const api = createApi({
+ *   reducerPath: 'api',
+ *   baseQuery: sdkBaseQuery({ baseUrl: 'https://api.example.com' }),
+ *   endpoints: (builder) => ({
+ *     getUser: builder.query({
+ *       query: (id) => ({
+ *         url: `/users/${id}`,
+ *         method: 'GET',
+ *         headers: { Authorization: 'Bearer per-endpoint-token' },
+ *       })
+ *     })
+ *   })
+ * });
+ * ```
+ */
+export declare const sdkBaseQuery: ({ baseUrl, authorization, }?: {
     baseUrl?: string;
+    authorization?: string;
 }) => BaseQueryFunction;
 export {};