Skip to content

Commit b5e963f

Browse files
mprew97Geoff-at-iterablelauren-mulkernpauljung14
authored
[MOB-11737]: Resolve Main Branch Conflicts with UUA Branch (#522)
* bump version (#482) * [MOB-11001] adding codecov to web-sdk (#487) * [MOB-11346] exposing baseIterableRequest (#489) * [MOB-11346] exposing baseIterableRequest * Update README.md Co-authored-by: lauren-mulkern <104173927+lauren-mulkern@users.noreply.github.com> * Update README.md Co-authored-by: lauren-mulkern <104173927+lauren-mulkern@users.noreply.github.com> * [MOB-11346] adding example for readme --------- Co-authored-by: lauren-mulkern <104173927+lauren-mulkern@users.noreply.github.com> * [MOB-11441] Bump axios dependency version (#494) * [MOB-11441] Bump axios version * [MOB-11441] Bump axios version in react app * [MOB-11449] Upgrade jest dependency (#496) * [MOB-11449] Upgrade jest dependency in react sample app * [MOB-11449] Upgrade jest dependency in sample app * [MOB-11449] Upgrade jest dependency req * [MOB-11443] Bump express dependency version (#495) * [MOB-11443] Bump express dependency version * [MOB-11443] Bump express dependency version in sample app * [MOB-11443] Bump express dependency version in react sample app * [MOB-11443] Remove expess from package.json * [MOB-11427] Add maxWidth to getInAppMessages payload (#491) * [MOB-11427] Add maxWidth to getinappmessages payload * [MOB-11427] Include ESLint as workspace formatter * Revert "[MOB-11427] Include ESLint as workspace formatter" This reverts commit 63639ea. * [MOB-11427] Update tests and refactor * [MOB-11427] Add test * [MOB-11427] Update README * [MOB-11439] Upgrade Web SDK version to v1.2.0 (#499) * [MOB-11487] Upgrade webpack dependency (#500) * [MOB-11503] Fix eslint errors on vanilla JS sample app (#501) * [MOB-11503] Fix lint formatting errors on axios post request params * [MOB-11503] Cleanup * [MOB-11503] Reorder imports * [MOB-11503] Support login email in env * [MOB-11524] Support non-JWT requests in react sample app (#505) * [MOB-11524] Add USE_JWT to env example * [MOB-11524] Add lint exception for sample app * [MOB-11524] Support non-JWT requests in react sample app * [MOB-11524] Fix init * [MOB-11524] Use await * [MOB-11524] Set auth token for non-jwt logins after a logout * [MOB-11524] Set auth token for non-jwt logins after a logout * [MOB-11524] Create helper fn * [MOB-11524] Undo autoformat * [MOB-11524] Resolve linter error * [MOB-11507] Upgrade webpack-dev-server and node (#502) * [MOB-11507] Upgrade webpack-dev-server * [MOB-11507] Upgrade webpack-dev-server in /react-example * [MOB-11507] Upgrade webpack-dev-server in /example * [MOB-11507] Update env comments * [MOB-11507] Update node engine requirement * [MOB-11507] Upgrade webpack-cli * [MOB-11507] Upgrade webpack-cli in /example * [MOB-11507] Remove iterable from dependencies in /react-example * [MOB-11507] Upgrade webpack-cli in /react-example * [MOB-11507] Update node in ci config * [MOB-11507] Update lint config * [MOB-11507] Update README * [MOB-11616] Resolve Remaining Vulnerable Security Dependencies (#508) * [MOB-11616] Resolve braces vulnerability * [MOB-11616] Resolve micromatch vulnerability * [MOB-11616] Resolve babel runtime vulnerability * [MOB-11554] Resolve lint warnings (#506) * [MOB-11554] Resolve lint warnings in Users * [MOB-11554] Resolve lint warnings in Commerce * [MOB-11554] Resolve lint warnings in EventsForm * [MOB-11554] Resolve lint warnings in EmbeddedMsgsImpressionTracker * [MOB-11554] Resolve lint warnings in EmbeddedMsgs * [MOB-11554] Resolve lint warnings in EmbeddedForm * [MOB-11554] Clean up lint disables * [MOB-11618] Dedupe lockfiles (#509) * [MOB-11618] Dedupe lockfiles * [MOB-11618] Reinstall * [MOB-11575] Bump version to v2.0.0 (#510) * [MOB-11701] Test Publish (#514) * [MOB-11702] Add .nvmrc config to project (#513) * [MOB-11702] Add .nvmrc config to project * [MOB-11702] Add newline * [MOB-11702] Remove comments * [MOB-11716] Add build steps to publish workflow (#517) * [MOB-11717] Update version to v2.1.0 (#518) * fix UUA and base functionality * fix linting errors * fix up tests * update tests (WIP) * add new test suite to cover UUA logic on auth --------- Co-authored-by: Geoff Kim <67926468+Geoff-at-iterable@users.noreply.github.com> Co-authored-by: lauren-mulkern <104173927+lauren-mulkern@users.noreply.github.com> Co-authored-by: Paul Jung <paul.jung@iterable.com>
1 parent 7f58464 commit b5e963f

53 files changed

Lines changed: 5226 additions & 4071 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,5 +67,5 @@
6767
]
6868
}
6969
}
70-
},
70+
}
7171
}

‎.github/workflows/ci.yml‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,17 @@ jobs:
1717

1818
steps:
1919
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
20-
- name: Use Node.js 16.3.0
20+
- name: Use Node.js 18.12.0
2121
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
2222
with:
23-
node-version: '16.3.0'
23+
node-version: '18.12.0'
2424
cache: 'yarn'
2525
- run: yarn install --frozen-lockfile
2626
- run: yarn prepublishOnly
2727
- run: node index.node.js
2828
- run: yarn test
29+
- name: Upload coverage reports to Codecov
30+
uses: codecov/codecov-action@v5
31+
with:
32+
token: ${{ secrets.CODECOV_TOKEN }}
2933
- run: yarn check-deps

‎.github/workflows/publish.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,15 @@ jobs:
1010
runs-on: ubuntu-latest
1111
steps:
1212
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
13-
- name: Use Node.js 16.3.0
13+
- name: Use Node.js 18.12.0
1414
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
1515
with:
16-
node-version: '16.3.0'
16+
node-version: '18.12.0'
1717
cache: 'yarn'
1818
- run: yarn install --frozen-lockfile
1919
- run: yarn test
20+
- run: yarn build
21+
- run: yarn build:node
2022
- uses: JS-DevTools/npm-publish@19c28f1ef146469e409470805ea4279d47c3d35c # v3.1.1
2123
with:
2224
token: ${{ secrets.NPM_TOKEN }}

‎.nvmrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
18.12.0

‎CONTRIBUTING.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Requirements
22

3-
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.
3+
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.
44

55
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.
66

‎README.md‎

Lines changed: 75 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,19 @@ To install the SDK, use Yarn, npm, or a `script` tag:
8484
<script src="https://unpkg.com/@iterable/web-sdk/index.js"></script>
8585
```
8686

87+
⚠️ Node.js Version Requirement
88+
Important: This SDK requires Node.js as defined in `package.json`.
89+
90+
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.
91+
92+
You can check your current Node version by running:
93+
94+
```bash
95+
node -v
96+
```
97+
98+
If an upgrade is needed, we recommend using nvm or your preferred version manager for easy installation.
99+
87100
# Functions
88101

89102
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/
94107

95108
| Method Name | Description |
96109
| --------------------------------------------------------------------------------- | ----------- |
110+
| [`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) |
97111
| [`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. |
98112
| [`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. |
99113
| [`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:
127141
automatically track `inAppClick` events or handle custom CTAs. This will impact
128142
analytics for all Safari and mobile iOS users.
129143

144+
## `baseIterableRequest`
145+
146+
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)
147+
148+
```ts
149+
function baseIterableRequest(
150+
payload: ExtendedRequestConfig
151+
): IterablePromise<T = any>
152+
```
153+
154+
Parameters:
155+
- `payload` - A request config see [`ExtendedRequestConfig`](#ExtendedRequestConfig)
156+
157+
Example:
158+
```ts
159+
baseIterableRequest<IterableResponse>({
160+
method: 'GET',
161+
url: '/embedded-messaging/messages',
162+
params: {
163+
placementIds: [1, 2, 3],
164+
platform: 'Web',
165+
sdkVersion: '1.0.0',
166+
packageName: 'pkgName'
167+
}
168+
});
169+
```
170+
171+
See also:
172+
173+
- [`IterablePromise`](#iterablepromise)
174+
130175
## `filterHiddenInAppMessages`
131176

132177
From an array of passed-in in-app messages, filters out messages that have
@@ -1793,6 +1838,20 @@ type IterableErrorStatus =
17931838
| 'InvalidJwtPayload';
17941839
```
17951840

1841+
## `ExtendedRequestConfig`
1842+
1843+
An extension of the AxiosRequestConfig
1844+
1845+
```ts
1846+
interface ExtendedRequestConfig extends AxiosRequestConfig {
1847+
validation?: {
1848+
data?: AnySchema;
1849+
params?: AnySchema;
1850+
};
1851+
sendBeacon?: boolean;
1852+
}
1853+
```
1854+
17961855
## `IterablePromise`
17971856

17981857
A promise.
@@ -2314,12 +2373,24 @@ For example:
23142373
- If your in-app is positioned in the center and your browser if at 700px, your
23152374
in-app message will grow to take up 100% of the screen.
23162375

2317-
This chart also implies that yout in-app message is taking 100% of its container.
2376+
This chart also implies that your in-app message is taking 100% of its container.
23182377
Your results may vary if you add, for example, a `max-width: 200px` CSS rule to
2319-
your message HTML.
2378+
your message HTML, as it would not apply to the enclosing iframe.
2379+
2380+
For Center, Top-Right, and Bottom-Right positions, you can set a custom `maxWidth`
2381+
by including it in your getInAppMessages payload like this:
2382+
2383+
```ts
2384+
const { request } = getInAppMessages({
2385+
count: 20,
2386+
packageName: 'my-website',
2387+
maxWidth: '900px'
2388+
});
2389+
```
23202390

2321-
Regardless of how you write your CSS, these rules take effect. So, when creating
2322-
an in-app message, it is best to stick with percentage-based CSS widths.
2391+
`maxWidth` accepts any valid CSS max-width value (e.g., px, em, %, ch).
2392+
It is optional—-most in-app messages render well with default sizing, so set it
2393+
only if needed for your use case.
23232394

23242395
## How do I add custom callbacks to handle link clicks on in-app and embedded messages?
23252396

‎example/.env.example‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
# To make requests from this example app make sure you first create an .env file
2-
# and add the API key and JWT Secret to it like so (and uncomment the keys):
1+
# Optional environment variables for local development. Start by creating a
2+
# called .env and add these values to it and change them appropriately.
3+
# Remember to uncomment the variables!
34

5+
# Set your API key and JWT Secret here to make requests from this example app.
46
# API_KEY=1234
5-
# JWT_SECRET=1234
7+
# JWT_SECRET=1234
8+
9+
# Convenience variable to automatically set the login email during testing.
10+
# LOGIN_EMAIL=email@email.com
11+
12+
# You can set the URL for the JWT generator here if desired
13+
# JWT_GENERATOR=http://localhost:5000/generate

‎example/package.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"directory": "https://github.com/Iterable/iterable-web-sdk/example"
99
},
1010
"engines": {
11-
"node": ">= 16.3.0"
11+
"node": ">= 18.12.0"
1212
},
1313
"author": "Iterable",
1414
"license": "MIT",
@@ -45,14 +45,16 @@
4545
"eslint-plugin-prettier": "^3.3.1",
4646
"eslint-webpack-plugin": "^3.1.0",
4747
"html-webpack-plugin": "^5.5.0",
48-
"jest": "^27.3.1",
48+
"jest": "^27.5.1",
4949
"mini-css-extract-plugin": "^2.5.2",
5050
"prettier": "^2.2.1",
5151
"ts-jest": "^27.0.7",
5252
"typescript": "^4.6.4",
53-
"webpack": "^5.76.0",
54-
"webpack-cli": "^4.9.1",
55-
"webpack-dev-server": "^4.7.3"
53+
"webpack": "^5.99.9",
54+
"webpack-cli": "^6.0.1",
55+
"webpack-dev-server": "^5.2.1"
5656
},
57-
"dependencies": {}
57+
"dependencies": {
58+
"axios": "^1.9.0"
59+
}
5860
}

‎example/src/index.ts‎

Lines changed: 26 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,28 @@
1-
import './styles/index.css';
2-
import axios from 'axios';
31
import {
4-
initialize,
5-
getInAppMessages,
6-
updateUserEmail,
2+
DisplayOptions,
73
GenerateJWTPayload,
4+
getInAppMessages,
85
HandleLinks,
9-
DisplayOptions
6+
InAppMessage,
7+
initialize,
8+
updateUserEmail
9+
// eslint-disable-next-line import/no-unresolved
1010
} from '@iterable/web-sdk';
11+
import axios from 'axios';
12+
import './styles/index.css';
1113

1214
((): void => {
1315
/* set token in the SDK */
1416
const { setEmail, logout } = initialize(
1517
process.env.API_KEY || '',
16-
async ({ email }: GenerateJWTPayload) => {
17-
return axios
18+
async ({ email }: GenerateJWTPayload) =>
19+
axios
1820
.post(
19-
'http://localhost:5000/generate',
20-
{
21-
exp_minutes: 2,
22-
email,
23-
jwt_secret: process.env.JWT_SECRET
24-
},
25-
{
26-
headers: {
27-
'Content-Type': 'application/json'
28-
}
29-
}
21+
process.env.JWT_GENERATOR || 'http://localhost:5000/generate',
22+
{ exp_minutes: 2, email, jwt_secret: process.env.JWT_SECRET },
23+
{ headers: { 'Content-Type': 'application/json' } }
3024
)
31-
.then((response: any) => {
32-
return response.data?.token;
33-
});
34-
}
25+
.then((response: { data: { token: string } }) => response.data?.token)
3526
);
3627

3728
const {
@@ -50,7 +41,7 @@ import {
5041
rightOffset: '20px',
5142
topOffset: '20px',
5243
bottomOffset: '20px',
53-
handleLinks: HandleLinks['ExternalNewTab'],
44+
handleLinks: HandleLinks.ExternalNewTab,
5445
closeButton: {
5546
color: 'white'
5647
// position: 'top-right',
@@ -60,7 +51,7 @@ import {
6051
// topOffset: '6%'
6152
}
6253
},
63-
{ display: DisplayOptions['Deferred'] }
54+
{ display: DisplayOptions.Deferred }
6455
);
6556

6657
const startBtn = document.getElementById('start');
@@ -75,18 +66,23 @@ import {
7566
startBtn.setAttribute('aria-disabled', 'true');
7667
startBtn.className = 'disabled';
7768
request()
78-
.then((response: any) => {
79-
triggerDisplayMessages(response.data.inAppMessages);
80-
startBtn.innerText = `${response.data.inAppMessages.length} total messages retrieved!`;
81-
})
69+
.then(
70+
(response: { data: { inAppMessages: Partial<InAppMessage>[] } }) => {
71+
const { inAppMessages } = response.data || {};
72+
triggerDisplayMessages(inAppMessages);
73+
startBtn.innerText = `${inAppMessages.length} total messages retrieved!`;
74+
}
75+
)
8276
// eslint-disable-next-line no-console
8377
.catch(console.warn);
8478
}
8579
};
8680

8781
const handleLoginClick = (event: MouseEvent) => {
8882
const email =
89-
localStorage.getItem('iterable-email') || 'iterable.tester@gmail.com';
83+
process.env.LOGIN_EMAIL ||
84+
localStorage.getItem('iterable-email') ||
85+
'iterable.tester@gmail.com';
9086

9187
/* disable login btn */
9288
if (loginBtn.getAttribute('aria-disabled') !== 'true') {

0 commit comments

Comments
 (0)