@elliemae/ssf-host 2.6.6 → 2.7.0

package/dist/cjs/guest.js

@@ -73,6 +73,10 @@ class Guest {
    * remoting object
    */
   #remoting;
+  /**
+   * analytics object
+   */
+  #analyticsObj;
   /**
    * Create object representing guest application
    * @param {GuestOption} option - options for creating a guest application
@@ -86,7 +90,8 @@ class Guest {
       window,
       searchParams = {},
       openMode = import_types.OpenMode.Embed,
-      remoting
+      remoting,
+      analyticsObj
     } = option;
     this.id = guestId;
     this.title = title;
@@ -97,6 +102,7 @@ class Guest {
     this.window = window;
     this.openMode = openMode;
     this.capabilities = {};
+    this.#analyticsObj = analyticsObj;
     this.#remoting = remoting;
   }
   /**
@@ -146,13 +152,32 @@ class Guest {
    * @param {EventObject} event - event object
    * @param {number} timeout - timeout in milliseconds
    */
-  dispatchEvent = (event, timeout) => this.#remoting.invoke({
-    targetWin: this.window,
-    targetOrigin: this.origin,
-    messageType: import_microfe_common.MessageType.ObjectEvent,
-    messageBody: event,
-    responseTimeoutMs: timeout
-  });
+  dispatchEvent = (event, timeout) => {
+    this.#analyticsObj.startTiming(
+      `SSFGuest.event.${event.object.objectId}.${event.eventName}`,
+      {
+        appId: this.id,
+        appUrl: this.url
+      }
+    ).catch(() => {
+    });
+    return this.#remoting.invoke({
+      targetWin: this.window,
+      targetOrigin: this.origin,
+      messageType: import_microfe_common.MessageType.ObjectEvent,
+      messageBody: event,
+      responseTimeoutMs: timeout
+    }).finally(() => {
+      this.#analyticsObj.endTiming(
+        `SSFGuest.event.${event.object.objectId}.${event.eventName}`,
+        {
+          appId: this.id,
+          appUrl: this.url
+        }
+      ).catch(() => {
+      });
+    });
+  };
   /**
    * Send a message without any form of response. fire and forget
    * @param {MessageParam} param - message to be sent

package/dist/cjs/host.js

@@ -49,6 +49,10 @@ class SSFHost {
    * reference to the logger
    */
   #logger;
+  /**
+   * reference to the analytics object
+   */
+  #analyticsObj;
   /**
    * list of guests
    */
@@ -73,7 +77,9 @@ class SSFHost {
   constructor(hostId, option) {
     this.hostId = hostId;
     if (!option?.logger) throw new Error("Logger is required");
+    if (!option?.analyticsObj) throw new Error("Analytics object is required");
     this.#logger = option.logger;
+    this.#analyticsObj = option.analyticsObj;
     this.#correlationId = (0, import_uuid.v4)();
     this.#remoting = new import_microfe_common.Remoting(this.#logger, this.#correlationId);
     if (option?.readyStateCallback && typeof option?.readyStateCallback !== "function")
@@ -87,6 +93,19 @@ class SSFHost {
       `host is initialized. hostId: ${this.hostId}, correlationId: ${this.#correlationId}`
     );
   }
+  #sendBAEvent = (event, data) => {
+    const baEvent = { event, ...data };
+    this.#analyticsObj.sendBAEvent(baEvent).catch(() => {
+    });
+  };
+  #startTiming = (name, options) => {
+    this.#analyticsObj.startTiming(name, options).catch(() => {
+    });
+  };
+  #endTiming = (start, options) => {
+    this.#analyticsObj.endTiming(start, options).catch(() => {
+    });
+  };
   #closeAllPopupGuests = () => {
     for (const guest of this.#guests.values()) {
       if (guest.openMode === import_types.OpenMode.Popup) {
@@ -206,11 +225,16 @@ class SSFHost {
     }
     if (!guest.ready) {
       guest.ready = true;
+      const guestInfo = guest.getInfo();
+      this.#endTiming("SSFHost.loadGuest", {
+        appId: guestInfo.guestId,
+        appUrl: guestInfo.guestUrl
+      });
       this.#dispatchConfigEvent(guest);
       this.#readyStateCallback?.(guest);
       this.#logger.audit({
         message: `Guest is ready`,
-        ...guest.getInfo()
+        ...guestInfo
       });
     }
   };
@@ -355,6 +379,11 @@ class SSFHost {
       });
       return false;
     }
+    const guestInfo = guest.getInfo();
+    this.#startTiming(`SSFHost.call.${objectId}.${body.functionName}`, {
+      appId: guestInfo.guestId,
+      appUrl: guestInfo.guestUrl
+    });
     this.#invoke({
       guest,
       obj,
@@ -372,7 +401,7 @@ class SSFHost {
         requestId,
         scriptingObject: objectId,
         scriptingMethod: body.functionName,
-        ...guest.getInfo()
+        ...guestInfo
       });
     }).catch((ex) => {
       this.#remoting.raiseException({
@@ -386,7 +415,12 @@ class SSFHost {
         requestId,
         scriptingObject: objectId,
         scriptingMethod: body.functionName,
-        ...guest.getInfo()
+        ...guestInfo
+      });
+    }).finally(() => {
+      this.#endTiming(`SSFHost.call.${objectId}.${body.functionName}`, {
+        appId: guestInfo.guestId,
+        appUrl: guestInfo.guestUrl
       });
     });
     return true;
@@ -432,7 +466,11 @@ class SSFHost {
    * @returns reference to the guest object
    */
   #attachGuest = (param) => {
-    const guest = new import_guest.Guest({ ...param, remoting: this.#remoting });
+    const guest = new import_guest.Guest({
+      ...param,
+      remoting: this.#remoting,
+      analyticsObj: this.#analyticsObj
+    });
     guest.init();
     this.#guests.set(param.guestId, guest);
     return guest;
@@ -694,14 +732,23 @@ class SSFHost {
       };
     }
     const guestPromises = [];
+    let timingMetricStarted = false;
     this.#guests.forEach((guest) => {
+      const guestInfo = guest.getInfo();
       if (!targetWindow || targetWindow === guest.window) {
         if (timeout && guest?.capabilities?.eventFeedback) {
           guestPromises.push(guest.dispatchEvent(eventObj, timeout));
+          if (!timingMetricStarted) {
+            this.#startTiming(`SSFHost.event.${scriptingObject.id}.${name}`, {
+              appId: this.hostId,
+              appUrl: window.location.href
+            });
+            timingMetricStarted = true;
+          }
           this.#logger.audit({
             message: "Event dispatched and awaiting feedback",
             scriptingEventId: id,
-            ...guest.getInfo()
+            ...guestInfo
           });
         } else {
           guest.send({
@@ -711,7 +758,7 @@ class SSFHost {
           this.#logger.audit({
             message: "Event dispatched",
             scriptingEventId: id,
-            ...guest.getInfo()
+            ...guestInfo
           });
         }
       }
@@ -729,6 +776,12 @@ class SSFHost {
         exception: ex
       });
       throw ex;
+    }).finally(() => {
+      if (timingMetricStarted)
+        this.#endTiming(`SSFHost.event.${scriptingObject.id}.${name}`, {
+          appId: this.hostId,
+          appUrl: window.location.href
+        });
     });
     return retValue;
   };
@@ -768,6 +821,10 @@ class SSFHost {
     const { openMode = import_types.OpenMode.Embed, popupWindowFeatures = {} } = options;
     const srcUrl = this.#getGuestUrl(url, searchParams);
     let guest = null;
+    this.#startTiming("SSFHost.loadGuest", {
+      appId: guestId,
+      appUrl: srcUrl
+    });
     if (openMode === import_types.OpenMode.Popup) {
       guest = this.#openPopupGuest({
         guestId,

package/dist/cjs/tests/scriptingObjects/analytics.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var analytics_exports = {};
+__export(analytics_exports, {
+  Analytics: () => Analytics
+});
+module.exports = __toCommonJS(analytics_exports);
+var import_microfe_common = require("@elliemae/microfe-common");
+class Analytics extends import_microfe_common.ScriptingObject {
+  constructor() {
+    super("Analytics");
+  }
+  sendBAEvent(event) {
+    console.log("Analytics.sendBAEvent", event);
+    return Promise.resolve();
+  }
+  startTiming(name, options) {
+    console.log("Analytics.perfMarkStart", name);
+    return Promise.resolve(performance.mark(name, { detail: options }));
+  }
+  endTiming(start, options) {
+    console.log("Analytics.perfMarkEnd", start);
+    performance.measure(start, {
+      detail: options,
+      start
+    });
+    return Promise.resolve();
+  }
+}

package/dist/cjs/tests/utils.js

@@ -28,6 +28,7 @@ var import_microfe_common = require("@elliemae/microfe-common");
 var import__ = require("../index.js");
 var import_logger = require("./logger.js");
 var import_utils = require("../utils.js");
+var import_analytics = require("./scriptingObjects/analytics.js");
 const createHost = (name = "IMTProduct") => {
   let host = null;
   const guestReady = new Promise((resolve) => {
@@ -35,7 +36,8 @@ const createHost = (name = "IMTProduct") => {
       logger: import_logger.logger,
       readyStateCallback: (guest) => {
         resolve(guest);
-      }
+      },
+      analyticsObj: new import_analytics.Analytics()
     };
     host = new import__.SSFHost(name, hostOptions);
   });

package/dist/esm/guest.js

@@ -50,6 +50,10 @@ class Guest {
    * remoting object
    */
   #remoting;
+  /**
+   * analytics object
+   */
+  #analyticsObj;
   /**
    * Create object representing guest application
    * @param {GuestOption} option - options for creating a guest application
@@ -63,7 +67,8 @@ class Guest {
       window,
       searchParams = {},
       openMode = OpenMode.Embed,
-      remoting
+      remoting,
+      analyticsObj
     } = option;
     this.id = guestId;
     this.title = title;
@@ -74,6 +79,7 @@ class Guest {
     this.window = window;
     this.openMode = openMode;
     this.capabilities = {};
+    this.#analyticsObj = analyticsObj;
     this.#remoting = remoting;
   }
   /**
@@ -123,13 +129,32 @@ class Guest {
    * @param {EventObject} event - event object
    * @param {number} timeout - timeout in milliseconds
    */
-  dispatchEvent = (event, timeout) => this.#remoting.invoke({
-    targetWin: this.window,
-    targetOrigin: this.origin,
-    messageType: MessageType.ObjectEvent,
-    messageBody: event,
-    responseTimeoutMs: timeout
-  });
+  dispatchEvent = (event, timeout) => {
+    this.#analyticsObj.startTiming(
+      `SSFGuest.event.${event.object.objectId}.${event.eventName}`,
+      {
+        appId: this.id,
+        appUrl: this.url
+      }
+    ).catch(() => {
+    });
+    return this.#remoting.invoke({
+      targetWin: this.window,
+      targetOrigin: this.origin,
+      messageType: MessageType.ObjectEvent,
+      messageBody: event,
+      responseTimeoutMs: timeout
+    }).finally(() => {
+      this.#analyticsObj.endTiming(
+        `SSFGuest.event.${event.object.objectId}.${event.eventName}`,
+        {
+          appId: this.id,
+          appUrl: this.url
+        }
+      ).catch(() => {
+      });
+    });
+  };
   /**
    * Send a message without any form of response. fire and forget
    * @param {MessageParam} param - message to be sent

package/dist/esm/host.js

@@ -35,6 +35,10 @@ class SSFHost {
    * reference to the logger
    */
   #logger;
+  /**
+   * reference to the analytics object
+   */
+  #analyticsObj;
   /**
    * list of guests
    */
@@ -59,7 +63,9 @@ class SSFHost {
   constructor(hostId, option) {
     this.hostId = hostId;
     if (!option?.logger) throw new Error("Logger is required");
+    if (!option?.analyticsObj) throw new Error("Analytics object is required");
     this.#logger = option.logger;
+    this.#analyticsObj = option.analyticsObj;
     this.#correlationId = uuidv4();
     this.#remoting = new Remoting(this.#logger, this.#correlationId);
     if (option?.readyStateCallback && typeof option?.readyStateCallback !== "function")
@@ -73,6 +79,19 @@ class SSFHost {
       `host is initialized. hostId: ${this.hostId}, correlationId: ${this.#correlationId}`
     );
   }
+  #sendBAEvent = (event, data) => {
+    const baEvent = { event, ...data };
+    this.#analyticsObj.sendBAEvent(baEvent).catch(() => {
+    });
+  };
+  #startTiming = (name, options) => {
+    this.#analyticsObj.startTiming(name, options).catch(() => {
+    });
+  };
+  #endTiming = (start, options) => {
+    this.#analyticsObj.endTiming(start, options).catch(() => {
+    });
+  };
   #closeAllPopupGuests = () => {
     for (const guest of this.#guests.values()) {
       if (guest.openMode === OpenMode.Popup) {
@@ -192,11 +211,16 @@ class SSFHost {
     }
     if (!guest.ready) {
       guest.ready = true;
+      const guestInfo = guest.getInfo();
+      this.#endTiming("SSFHost.loadGuest", {
+        appId: guestInfo.guestId,
+        appUrl: guestInfo.guestUrl
+      });
       this.#dispatchConfigEvent(guest);
       this.#readyStateCallback?.(guest);
       this.#logger.audit({
         message: `Guest is ready`,
-        ...guest.getInfo()
+        ...guestInfo
       });
     }
   };
@@ -341,6 +365,11 @@ class SSFHost {
       });
       return false;
     }
+    const guestInfo = guest.getInfo();
+    this.#startTiming(`SSFHost.call.${objectId}.${body.functionName}`, {
+      appId: guestInfo.guestId,
+      appUrl: guestInfo.guestUrl
+    });
     this.#invoke({
       guest,
       obj,
@@ -358,7 +387,7 @@ class SSFHost {
         requestId,
         scriptingObject: objectId,
         scriptingMethod: body.functionName,
-        ...guest.getInfo()
+        ...guestInfo
       });
     }).catch((ex) => {
       this.#remoting.raiseException({
@@ -372,7 +401,12 @@ class SSFHost {
         requestId,
         scriptingObject: objectId,
         scriptingMethod: body.functionName,
-        ...guest.getInfo()
+        ...guestInfo
+      });
+    }).finally(() => {
+      this.#endTiming(`SSFHost.call.${objectId}.${body.functionName}`, {
+        appId: guestInfo.guestId,
+        appUrl: guestInfo.guestUrl
       });
     });
     return true;
@@ -418,7 +452,11 @@ class SSFHost {
    * @returns reference to the guest object
    */
   #attachGuest = (param) => {
-    const guest = new Guest({ ...param, remoting: this.#remoting });
+    const guest = new Guest({
+      ...param,
+      remoting: this.#remoting,
+      analyticsObj: this.#analyticsObj
+    });
     guest.init();
     this.#guests.set(param.guestId, guest);
     return guest;
@@ -680,14 +718,23 @@ class SSFHost {
       };
     }
     const guestPromises = [];
+    let timingMetricStarted = false;
     this.#guests.forEach((guest) => {
+      const guestInfo = guest.getInfo();
       if (!targetWindow || targetWindow === guest.window) {
         if (timeout && guest?.capabilities?.eventFeedback) {
           guestPromises.push(guest.dispatchEvent(eventObj, timeout));
+          if (!timingMetricStarted) {
+            this.#startTiming(`SSFHost.event.${scriptingObject.id}.${name}`, {
+              appId: this.hostId,
+              appUrl: window.location.href
+            });
+            timingMetricStarted = true;
+          }
           this.#logger.audit({
             message: "Event dispatched and awaiting feedback",
             scriptingEventId: id,
-            ...guest.getInfo()
+            ...guestInfo
           });
         } else {
           guest.send({
@@ -697,7 +744,7 @@ class SSFHost {
           this.#logger.audit({
             message: "Event dispatched",
             scriptingEventId: id,
-            ...guest.getInfo()
+            ...guestInfo
           });
         }
       }
@@ -715,6 +762,12 @@ class SSFHost {
         exception: ex
       });
       throw ex;
+    }).finally(() => {
+      if (timingMetricStarted)
+        this.#endTiming(`SSFHost.event.${scriptingObject.id}.${name}`, {
+          appId: this.hostId,
+          appUrl: window.location.href
+        });
     });
     return retValue;
   };
@@ -754,6 +807,10 @@ class SSFHost {
     const { openMode = OpenMode.Embed, popupWindowFeatures = {} } = options;
     const srcUrl = this.#getGuestUrl(url, searchParams);
     let guest = null;
+    this.#startTiming("SSFHost.loadGuest", {
+      appId: guestId,
+      appUrl: srcUrl
+    });
     if (openMode === OpenMode.Popup) {
       guest = this.#openPopupGuest({
         guestId,

package/dist/esm/tests/scriptingObjects/analytics.js

@@ -0,0 +1,25 @@
+import { ScriptingObject } from "@elliemae/microfe-common";
+class Analytics extends ScriptingObject {
+  constructor() {
+    super("Analytics");
+  }
+  sendBAEvent(event) {
+    console.log("Analytics.sendBAEvent", event);
+    return Promise.resolve();
+  }
+  startTiming(name, options) {
+    console.log("Analytics.perfMarkStart", name);
+    return Promise.resolve(performance.mark(name, { detail: options }));
+  }
+  endTiming(start, options) {
+    console.log("Analytics.perfMarkEnd", start);
+    performance.measure(start, {
+      detail: options,
+      start
+    });
+    return Promise.resolve();
+  }
+}
+export {
+  Analytics
+};

package/dist/esm/tests/utils.js

@@ -2,6 +2,7 @@ import { MessageType } from "@elliemae/microfe-common";
 import { SSFHost } from "../index.js";
 import { logger } from "./logger.js";
 import { getOrigin } from "../utils.js";
+import { Analytics } from "./scriptingObjects/analytics.js";
 const createHost = (name = "IMTProduct") => {
   let host = null;
   const guestReady = new Promise((resolve) => {
@@ -9,7 +10,8 @@ const createHost = (name = "IMTProduct") => {
       logger,
       readyStateCallback: (guest) => {
         resolve(guest);
-      }
+      },
+      analyticsObj: new Analytics()
     };
     host = new SSFHost(name, hostOptions);
   });

package/dist/public/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Host</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script src="https://qa.assets.rd.elliemae.io/pui-diagnostics@3"></script><script defer="defer" src="js/emuiSsfHost.bc25f766644bc8cb29c3.js"></script></head><body><header class="bg-indigo-300 h-10 flex place-items-center"><div class="px-2">ICE Mortgage Product</div></header><main class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8"><div class="min-w-0 flex-1 mt-4"><h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">Loan Application</h1></div><div id="successFeedback" class="hidden rounded-md bg-green-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg></div><div class="ml-3"><p class="text-sm font-medium text-green-800">Loan Saved Successfully</p></div></div></div><div id="errorFeedback" class="hidden rounded-md bg-red-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg></div><div class="ml-3"><h3 class="text-sm font-medium text-red-800">Credit Score is not meeting the requirement</h3></div></div></div><div class="mt-2 sm:grid sm:grid-cols-2 sm:gap-2"><form class="px-2 py-2 space-y-8 divide-y divide-gray-200 bg-gray-50"><div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"><div class="space-y-6 sm:space-y-5"><div><h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="firstName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">First name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="firstName" id="firstName" autocomplete="given-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="John" placeholder="John"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="lastName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Last name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="lastName" id="lastName" autocomplete="family-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="Doe" placeholder="Doe"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="ssn" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">SSN</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="ssn" id="ssn" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="123456789" placeholder="123456789"/></div></div></div><div><h3 class="text-lg font-medium leading-6 text-gray-900">Loan Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="amount" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Amount</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="amount" id="amount" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="500000" placeholder="500000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="Term" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Term (years)</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="term" id="term" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="30" placeholder="30"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="downPayment" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Down Payment</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="downPayment" id="downPayment" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="50000" placeholder="50000"/></div></div><div><h3 class="text-lg font-medium leading-6 text-gray-900">Order Services</h3></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><div class="mt-1 sm:mt-0"><button id="title" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-offset-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M7.502 6h7.128A3.375 3.375 0 0118 9.375v9.375a3 3 0 003-3V6.108c0-1.505-1.125-2.811-2.664-2.94a48.972 48.972 0 00-.673-.05A3 3 0 0015 1.5h-1.5a3 3 0 00-2.663 1.618c-.225.015-.45.032-.673.05C8.662 3.295 7.554 4.542 7.502 6zM13.5 3A1.5 1.5 0 0012 4.5h4.5A1.5 1.5 0 0015 3h-1.5z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M3 9.375C3 8.339 3.84 7.5 4.875 7.5h9.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V9.375zM6 12a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V12zm2.25 0a.75.75 0 01.75-.75h3.75a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM6 15a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V15zm2.25 0a.75.75 0 01.75-.75h3.75a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM6 18a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V18zm2.25 0a.75.75 0 01.75-.75h3.75a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg> Title</button></div><div class="mt-1 sm:mt-0"><button id="credit" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-offset-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z" clip-rule="evenodd"/></svg> Credit Score</button></div></div></div></div></div><div class="flex flex-col"><button id="saveLoan" type="button" class="rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button></div></form><div id="aside-container" class="flex flex-col gap-4 items-start mt-4 border-2 p-2 rounded-lg border-dashed border-cyan-300 sm:mt-0"></div></div><div id="bottom-container" class="flex flex-col gap-4 items-start mt-4 p-2 sm:mt-0"></div></main><script src="./init.js" type="module"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Host</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script src="https://qa.assets.rd.elliemae.io/pui-diagnostics@3"></script><script defer="defer" src="js/emuiSsfHost.53895eb92f2e3367ed38.js"></script></head><body><header class="bg-indigo-300 h-10 flex place-items-center"><div class="px-2">ICE Mortgage Product</div></header><main class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8"><div class="min-w-0 flex-1 mt-4"><h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">Loan Application</h1></div><div id="successFeedback" class="hidden rounded-md bg-green-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg></div><div class="ml-3"><p class="text-sm font-medium text-green-800">Loan Saved Successfully</p></div></div></div><div id="errorFeedback" class="hidden rounded-md bg-red-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg></div><div class="ml-3"><h3 class="text-sm font-medium text-red-800">Credit Score is not meeting the requirement</h3></div></div></div><div class="mt-2 sm:grid sm:grid-cols-2 sm:gap-2"><form class="px-2 py-2 space-y-8 divide-y divide-gray-200 bg-gray-50"><div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"><div class="space-y-6 sm:space-y-5"><div><h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="firstName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">First name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="firstName" id="firstName" autocomplete="given-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="John" placeholder="John"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="lastName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Last name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="lastName" id="lastName" autocomplete="family-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="Doe" placeholder="Doe"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="ssn" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">SSN</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="ssn" id="ssn" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="123456789" placeholder="123456789"/></div></div></div><div><h3 class="text-lg font-medium leading-6 text-gray-900">Loan Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="amount" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Amount</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="amount" id="amount" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="500000" placeholder="500000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="Term" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Term (years)</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="term" id="term" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="30" placeholder="30"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="downPayment" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Down Payment</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="downPayment" id="downPayment" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="50000" placeholder="50000"/></div></div><div><h3 class="text-lg font-medium leading-6 text-gray-900">Order Services</h3></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><div class="mt-1 sm:mt-0"><button id="title" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-offset-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M7.502 6h7.128A3.375 3.375 0 0118 9.375v9.375a3 3 0 003-3V6.108c0-1.505-1.125-2.811-2.664-2.94a48.972 48.972 0 00-.673-.05A3 3 0 0015 1.5h-1.5a3 3 0 00-2.663 1.618c-.225.015-.45.032-.673.05C8.662 3.295 7.554 4.542 7.502 6zM13.5 3A1.5 1.5 0 0012 4.5h4.5A1.5 1.5 0 0015 3h-1.5z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M3 9.375C3 8.339 3.84 7.5 4.875 7.5h9.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V9.375zM6 12a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V12zm2.25 0a.75.75 0 01.75-.75h3.75a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM6 15a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V15zm2.25 0a.75.75 0 01.75-.75h3.75a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM6 18a.75.75 0 01.75-.75h.008a.75.75 0 01.75.75v.008a.75.75 0 01-.75.75H6.75a.75.75 0 01-.75-.75V18zm2.25 0a.75.75 0 01.75-.75h3.75a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75z" clip-rule="evenodd"/></svg> Title</button></div><div class="mt-1 sm:mt-0"><button id="credit" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-offset-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z" clip-rule="evenodd"/><path fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z" clip-rule="evenodd"/></svg> Credit Score</button></div></div></div></div></div><div class="flex flex-col"><button id="saveLoan" type="button" class="rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button></div></form><div id="aside-container" class="flex flex-col gap-4 items-start mt-4 border-2 p-2 rounded-lg border-dashed border-cyan-300 sm:mt-0"></div></div><div id="bottom-container" class="flex flex-col gap-4 items-start mt-4 p-2 sm:mt-0"></div></main><script src="./init.js" type="module"></script></body></html>