[MOB-8649]: move env vars to config (#398)

* move env vars to config

* add back env for eu

* update readme

* update again

* another comment change

* rework some

* read me and tests

* huh

* leftover

* update readme and add new wrapper method

* fix test

* strange

* circular dep and cleanup

* change requests

---------

Co-authored-by: mitch prewitt <[email protected]>

Author: mprew97

README.md

@@ -1,4 +1,4 @@
-import { initialize } from '@iterable/web-sdk';
+import { initializeWithConfig, WithJWTParams } from '@iterable/web-sdk';
 import axios from 'axios';
 import ReactDOM from 'react-dom';
 import './styles/index.css';
@@ -38,9 +38,13 @@ const HomeLink = styled(Link)`
 `;
 
 ((): void => {
-  const { setEmail, logout, refreshJwtToken } = initialize(
-    process.env.API_KEY || '',
-    ({ email }) => {
+  const initializeParams: WithJWTParams = {
+    authToken: process.env.API_KEY || '',
+    configOptions: {
+      isEuIterableService: false,
+      dangerouslyAllowJsPopups: true
+    },
+    generateJWT: ({ email }) => {
       return axios
         .post(
           process.env.JWT_GENERATOR || 'http://localhost:5000/generate',
@@ -59,7 +63,9 @@ const HomeLink = styled(Link)`
           return response.data?.token;
         });
     }
-  );
+  };
+  const { setEmail, logout, refreshJwtToken } =
+    initializeWithConfig(initializeParams);
 
   ReactDOM.render(
     <BrowserRouter>

react-example/src/index.tsx

@@ -16,7 +16,7 @@ import {
   validateTokenTime,
   isEmail
 } from './utils';
-import { config } from '../utils/config';
+import { Options, config } from '../utils/config';
 
 const MAX_TIMEOUT = ONE_DAY;
 
@@ -773,3 +773,34 @@ export function initialize(
     }
   };
 }
+
+export interface WithJWTParams {
+  authToken: string;
+  configOptions: Partial<Options>;
+  generateJWT: (payload: GenerateJWTPayload) => Promise<string>;
+}
+
+export interface WithoutJWTParams {
+  authToken: string;
+  configOptions: Partial<Options>;
+}
+
+export interface InitializeParams {
+  authToken: string;
+  configOptions: Partial<Options>;
+  generateJWT?: (payload: GenerateJWTPayload) => Promise<string>;
+}
+
+export function initializeWithConfig(initializeParams: WithJWTParams): WithJWT;
+
+export function initializeWithConfig(
+  initializeParams: WithoutJWTParams
+): WithoutJWT;
+
+export function initializeWithConfig(initializeParams: InitializeParams) {
+  const { authToken, configOptions, generateJWT } = initializeParams;
+  config.setConfig(configOptions ?? {});
+  return generateJWT
+    ? initialize(authToken, generateJWT)
+    : initialize(authToken);
+}

src/authorization/authorization.ts

@@ -18,6 +18,8 @@ const ITERABLE_API_URL = `https://${
   IS_EU_ITERABLE_SERVICE ? EU_ITERABLE_DOMAIN : US_ITERABLE_DOMAIN
 }/api`;
 
+export const EU_ITERABLE_API = `https://${EU_ITERABLE_DOMAIN}/api`;
+
 // Do not set `process.env.BASE_URL` if intending on using the prod or EU APIs.
 export const BASE_URL = process.env.BASE_URL || ITERABLE_API_URL;
 

src/constants.ts

@@ -1,13 +1,13 @@
 import { by } from '@pabra/sortby';
 import {
   ANIMATION_DURATION,
-  dangerouslyAllowJsPopupExecution,
   DEFAULT_CLOSE_BUTTON_OFFSET_PERCENTAGE
 } from 'src/constants';
 import { WebInAppDisplaySettings } from 'src/inapp';
 import { srSpeak } from 'src/utils/srSpeak';
 import { trackInAppDelivery } from '../events';
 import { CloseButtonPosition, InAppMessage } from './types';
+import { config } from 'src/utils/config';
 
 interface Breakpoints {
   smMatches: boolean;
@@ -288,7 +288,9 @@ const generateSecuredIFrame = () => {
   iframe.setAttribute(
     'sandbox',
     `allow-same-origin allow-popups allow-top-navigation ${
-      dangerouslyAllowJsPopupExecution ? 'allow-popups-to-escape-sandbox' : ''
+      config.getConfig('dangerouslyAllowJsPopups')
+        ? 'allow-popups-to-escape-sandbox'
+        : ''
     }`
   );
   /*

src/inapp/utils.ts

@@ -1,5 +1,5 @@
 import Axios, { AxiosRequestConfig } from 'axios';
-import { BASE_URL, STATIC_HEADERS } from './constants';
+import { BASE_URL, STATIC_HEADERS, EU_ITERABLE_API } from './constants';
 import { IterablePromise, IterableResponse } from './types';
 import { AnySchema, ValidationError } from 'yup';
 import { config } from './utils/config';
@@ -35,9 +35,14 @@ export const baseIterableRequest = <T = any>(
         abortEarly: false
       });
     }
+
+    const baseURL = config.getConfig('isEuIterableService')
+      ? EU_ITERABLE_API
+      : config.getConfig('baseURL');
+
     return baseAxiosRequest({
       ...payload,
-      baseURL: config.getConfig('baseURL') || BASE_URL,
+      baseURL,
       headers: {
         ...payload.headers,
         ...STATIC_HEADERS

src/request.ts

@@ -1,18 +1,24 @@
 import { BASE_URL } from '../constants';
 
-interface Options {
+export type Options = {
   logLevel: 'none' | 'verbose';
   baseURL: string;
-}
+  isEuIterableService: boolean;
+  dangerouslyAllowJsPopups: boolean;
+};
 
 const _config = () => {
   let options: Options = {
     logLevel: 'none',
-    baseURL: BASE_URL
+    baseURL: BASE_URL,
+    isEuIterableService: false,
+    dangerouslyAllowJsPopups: false
   };
 
+  const getConfig = <K extends keyof Options>(option: K) => options[option];
+
   return {
-    getConfig: (option: keyof Options) => options[option],
+    getConfig,
     setConfig: (newOptions: Partial<Options>) => {
       options = {
         ...options,

src/utils/config.ts

@@ -8,13 +8,13 @@ function getParsedEnv() {
     return {
       ...env.parsed,
       VERSION: version,
-      IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false,
-      DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION:
-        process.env.DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION || false
+      IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false
     };
   }
 
-  return { VERSION: version };
+  return {
+    VERSION: version
+  };
 }
 
 module.exports = {

webpack.config.js

@@ -8,9 +8,7 @@ function getParsedEnv() {
     return {
       ...env.parsed,
       VERSION: version,
-      IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false,
-      DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION:
-        process.env.DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION || false
+      IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false
     };
   }
 

webpack.dev.config.js

@@ -8,9 +8,7 @@ function getParsedEnv() {
     return {
       ...env.parsed,
       VERSION: version,
-      IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false,
-      DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION:
-        process.env.DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION || false
+      IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false
     };
   }