AUA_main with MOB-11507 merged

.eslintrc

@@ -67,5 +67,5 @@
         ]
       }
     }
-  },
+  }
 }

.github/workflows/ci.yml

@@ -17,13 +17,17 @@ jobs:
 
     steps:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
-      - name: Use Node.js 16.3.0
+      - name: Use Node.js 18.12.0
         uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
-          node-version: '16.3.0'
+          node-version: '18.12.0'
           cache: 'yarn'
       - run: yarn install --frozen-lockfile
       - run: yarn prepublishOnly
       - run: node index.node.js
       - run: yarn test
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
       - run: yarn check-deps

.github/workflows/publish.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
-      - name: Use Node.js 16.3.0
+      - name: Use Node.js 18.12.0
         uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
         with:
-          node-version: '16.3.0'
+          node-version: '18.12.0'
           cache: 'yarn'
       - run: yarn install --frozen-lockfile
       - run: yarn test

CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Requirements
 
-This project (along with the sample app) both require a minimum Node version of 16.3.0 or greater. [Download NodeJS here.](https://nodejs.org/en/) Alternatively, you can use a tool such as [nvm](https://github.com/nvm-sh/nvm) to install another version of node and switch to that.
+This project (along with the sample app) both require a minimum Node version of 18.12.0 or greater. [Download NodeJS here.](https://nodejs.org/en/) Alternatively, you can use a tool such as [nvm](https://github.com/nvm-sh/nvm) to install another version of node and switch to that.
 
 This project also uses [yarn package manager.](https://yarnpkg.com/getting-started/install) You'll need to install that as well to run the commands within this project.
 

README.md

@@ -84,6 +84,19 @@ To install the SDK, use Yarn, npm, or a `script` tag:
   <script src="https://unpkg.com/@iterable/web-sdk/index.js"></script>
   ```
 
+⚠️ Node.js Version Requirement
+Important: This SDK requires Node.js as defined in `package.json`.
+
+Please ensure your development environment meets the minimum required Node.js version. Depending on your current setup, you may already be using a compatible version. If not, you will need to upgrade Node.js to proceed with installation and use of the SDK.
+
+You can check your current Node version by running:
+
+```bash
+node -v
+```
+
+If an upgrade is needed, we recommend using nvm or your preferred version manager for easy installation.
+
 # Functions
 
 Iterable's Web SDK exposes the following functions, which you can use in your
@@ -94,6 +107,7 @@ Iterable's API, see the [API Overview](https://support.iterable.com/hc/articles/
 
 | Method Name                                                                       | Description |
 | --------------------------------------------------------------------------------- | ----------- |
+| [`baseIterableRequest`](#baseiterablerequest)                                     |  Executes a custom API request to Iterable, using an extended request configuration for validation and optional features. Valid for web API keys and their supported endpoints only. [Learn more](https://support.iterable.com/hc/articles/360043464871-API-Keys#client-side-keys)  |
 | [`filterHiddenInAppMessages`](#filterhiddeninappmessages)                         | From an array of passed-in in-app messages, filters out messages that have already been read, messages that should not be displayed, and messages that only contain JSON data. |
 | [`filterOnlyReadAndNeverTriggerMessages`](#filteronlyreadandnevertriggermessages) | From an array of passed-in in-app messages, filters out messages that have already been read and messages that should not be displayed. |
 | [`getInAppMessages`](#getInAppMessages)                                           | Fetches in-app messages by calling [`GET /api/inApp/getMessages`](https://support.iterable.com/hc/articles/204780579#get-api-inapp-getmessages). |
@@ -127,6 +141,37 @@ Notes:
   automatically track `inAppClick`  events or handle custom CTAs. This will impact
   analytics for all Safari and mobile iOS users.
 
+## `baseIterableRequest`
+
+Executes a custom API request to Iterable, using an extended request configuration for validation and optional features. Valid for web API keys and their supported endpoints only. [Learn more](https://support.iterable.com/hc/articles/360043464871-API-Keys#client-side-keys) 
+
+```ts
+function baseIterableRequest(
+  payload: ExtendedRequestConfig
+): IterablePromise<T = any>
+```
+
+Parameters:
+- `payload` - A request config see [`ExtendedRequestConfig`](#ExtendedRequestConfig)
+
+Example:
+```ts
+baseIterableRequest<IterableResponse>({
+        method: 'GET',
+        url: '/embedded-messaging/messages',
+        params: {
+          placementIds: [1, 2, 3],
+          platform: 'Web',
+          sdkVersion: '1.0.0',
+          packageName: 'pkgName'
+        }
+      });
+```
+
+See also:
+
+- [`IterablePromise`](#iterablepromise)
+
 ## `filterHiddenInAppMessages`
 
 From an array of passed-in in-app messages, filters out messages that have
@@ -1793,6 +1838,20 @@ type IterableErrorStatus =
   | 'InvalidJwtPayload';
 ```
 
+## `ExtendedRequestConfig`
+
+An extension of the AxiosRequestConfig
+
+```ts
+  interface ExtendedRequestConfig extends AxiosRequestConfig {
+    validation?: {
+      data?: AnySchema;
+      params?: AnySchema;
+    };
+    sendBeacon?: boolean;
+  }
+```
+
 ## `IterablePromise`
 
 A promise.
@@ -2314,12 +2373,24 @@ For example:
 - If your in-app is positioned in the center and your browser if at 700px, your
   in-app message will grow to take up 100% of the screen.
 
-This chart also implies that yout in-app message is taking 100% of its container. 
+This chart also implies that your in-app message is taking 100% of its container. 
 Your results may vary if you add, for example, a `max-width: 200px` CSS rule to 
-your message HTML. 
+your message HTML, as it would not apply to the enclosing iframe.
+
+For Center, Top-Right, and Bottom-Right positions, you can set a custom `maxWidth`
+by including it in your getInAppMessages payload like this:
+
+```ts
+const { request } = getInAppMessages({
+  count: 20,
+  packageName: 'my-website',
+  maxWidth: '900px'
+});
+```
 
-Regardless of how you write your CSS, these rules take effect. So, when creating
-an in-app message, it is best to stick with percentage-based CSS widths.
+`maxWidth` accepts any valid CSS max-width value (e.g., px, em, %, ch).
+It is optional—-most in-app messages render well with default sizing, so set it
+only if needed for your use case.
 
 ## How do I add custom callbacks to handle link clicks on in-app and embedded messages?
 

example/.env.example

@@ -1,5 +1,13 @@
-# To make requests from this example app make sure you first create an .env file
-# and add the API key and JWT Secret to it like so (and uncomment the keys):
+# Optional environment variables for local development. Start by creating a
+# called .env and add these values to it and change them appropriately.
+# Remember to uncomment the variables!
 
+# Set your API key and JWT Secret here to make requests from this example app.
 # API_KEY=1234
-# JWT_SECRET=1234
+# JWT_SECRET=1234
+
+# Convenience variable to automatically set the login email during testing.
+# LOGIN_EMAIL=email@email.com
+
+# You can set the URL for the JWT generator here if desired
+# JWT_GENERATOR=http://localhost:5000/generate

example/package.json

@@ -8,7 +8,7 @@
     "directory": "https://github.com/Iterable/iterable-web-sdk/example"
   },
   "engines": {
-    "node": ">= 16.3.0"
+    "node": ">= 18.12.0"
   },
   "author": "Iterable",
   "license": "MIT",
@@ -45,14 +45,16 @@
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-webpack-plugin": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
-    "jest": "^27.3.1",
+    "jest": "^27.5.1",
     "mini-css-extract-plugin": "^2.5.2",
     "prettier": "^2.2.1",
     "ts-jest": "^27.0.7",
     "typescript": "^4.6.4",
-    "webpack": "^5.76.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.7.3"
+    "webpack": "^5.99.9",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.1"
   },
-  "dependencies": {}
+  "dependencies": {
+    "axios": "^1.9.0"
+  }
 }

example/src/index.ts

@@ -1,37 +1,28 @@
-import './styles/index.css';
-import axios from 'axios';
 import {
-  initialize,
-  getInAppMessages,
-  updateUserEmail,
+  DisplayOptions,
   GenerateJWTPayload,
+  getInAppMessages,
   HandleLinks,
-  DisplayOptions
+  InAppMessage,
+  initialize,
+  updateUserEmail
+  // eslint-disable-next-line import/no-unresolved
 } from '@iterable/web-sdk';
+import axios from 'axios';
+import './styles/index.css';
 
 ((): void => {
   /* set token in the SDK */
   const { setEmail, logout } = initialize(
     process.env.API_KEY || '',
-    async ({ email }: GenerateJWTPayload) => {
-      return axios
+    async ({ email }: GenerateJWTPayload) =>
+      axios
         .post(
-          'http://localhost:5000/generate',
-          {
-            exp_minutes: 2,
-            email,
-            jwt_secret: process.env.JWT_SECRET
-          },
-          {
-            headers: {
-              'Content-Type': 'application/json'
-            }
-          }
+          process.env.JWT_GENERATOR || 'http://localhost:5000/generate',
+          { exp_minutes: 2, email, jwt_secret: process.env.JWT_SECRET },
+          { headers: { 'Content-Type': 'application/json' } }
         )
-        .then((response: any) => {
-          return response.data?.token;
-        });
-    }
+        .then((response: { data: { token: string } }) => response.data?.token)
   );
 
   const {
@@ -50,7 +41,7 @@ import {
       rightOffset: '20px',
       topOffset: '20px',
       bottomOffset: '20px',
-      handleLinks: HandleLinks['ExternalNewTab'],
+      handleLinks: HandleLinks.ExternalNewTab,
       closeButton: {
         color: 'white'
         // position: 'top-right',
@@ -60,7 +51,7 @@ import {
         // topOffset: '6%'
       }
     },
-    { display: DisplayOptions['Deferred'] }
+    { display: DisplayOptions.Deferred }
   );
 
   const startBtn = document.getElementById('start');
@@ -75,18 +66,23 @@ import {
       startBtn.setAttribute('aria-disabled', 'true');
       startBtn.className = 'disabled';
       request()
-        .then((response: any) => {
-          triggerDisplayMessages(response.data.inAppMessages);
-          startBtn.innerText = `${response.data.inAppMessages.length} total messages retrieved!`;
-        })
+        .then(
+          (response: { data: { inAppMessages: Partial<InAppMessage>[] } }) => {
+            const { inAppMessages } = response.data || {};
+            triggerDisplayMessages(inAppMessages);
+            startBtn.innerText = `${inAppMessages.length} total messages retrieved!`;
+          }
+        )
         // eslint-disable-next-line no-console
         .catch(console.warn);
     }
   };
 
   const handleLoginClick = (event: MouseEvent) => {
     const email =
-      localStorage.getItem('iterable-email') || 'iterable.tester@gmail.com';
+      process.env.LOGIN_EMAIL ||
+      localStorage.getItem('iterable-email') ||
+      'iterable.tester@gmail.com';
 
     /* disable login btn */
     if (loginBtn.getAttribute('aria-disabled') !== 'true') {