AUT Feature

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iterable/web-sdk",
   "description": "Iterable SDK for JavaScript and Node.",
-  "version": "1.1.2",
+  "version": "1.2.0-beta",
   "homepage": "https://iterable.com/",
   "repository": {
     "type": "git",
@@ -74,7 +74,7 @@
     "@types/jest": "^27.0.2",
     "@types/node": "^12.7.1",
     "@types/throttle-debounce": "^2.1.0",
-    "@types/uuid": "^9.0.2",
+    "@types/uuid": "^9.0.8",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
     "@webpack-cli/serve": "^1.6.0",

react-example/.eslintrc

@@ -1,13 +1,8 @@
 {
-  "extends": [
-    "../.eslintrc",
-    "plugin:react/recommended"
-  ],
+  "extends": ["../.eslintrc", "plugin:react/recommended"],
   "rules": {
     "@typescript-eslint/no-empty-interface": "off",
-    "react/react-in-jsx-scope": "off",
+    "react/react-in-jsx-scope": "off"
   },
-  "ignorePatterns": [
-    "node_modules/"
-  ]
-}
+  "ignorePatterns": ["node_modules/"]
+}

react-example/src/components/EventsForm.tsx

@@ -28,10 +28,9 @@ export const EventsForm: FC<Props> = ({
   );
 
   const [trackEvent, setTrackEvent] = useState<string>('');
-
   const [isTrackingEvent, setTrackingEvent] = useState<boolean>(false);
 
-  const handleTrack = (e: FormEvent<HTMLFormElement>) => {
+  const handleTrack = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setTrackingEvent(true);
 
@@ -50,7 +49,6 @@ export const EventsForm: FC<Props> = ({
       })
       .catch((e: any) => {
         setTrackResponse(JSON.stringify(e.response.data));
-        setTrackingEvent(false);
       });
   };
 

react-example/src/components/LoginFormWithoutJWT.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { ChangeEvent, FC, FormEvent, useState } from 'react';
+import styled from 'styled-components';
+
+import { IdentityResolution } from '@iterable/web-sdk';
+import { TextField as _TextField } from './TextField';
+import { Button as _Button } from './Button';
+
+import { useUser } from '../context/Users';
+
+const TextField = styled(_TextField)``;
+
+const Button = styled(_Button)`
+  margin-left: 0.4em;
+  max-width: 425px;
+`;
+
+const Form = styled.form`
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: flex-end;
+  height: 100%;
+
+  ${TextField} {
+    align-self: stretch;
+    margin-top: 5px;
+  }
+`;
+
+const StyledDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const Error = styled.div`
+  color: red;
+`;
+
+interface Props {
+  setEmail: (email: string) => Promise<void>;
+  setUserId: (
+    userId: string,
+    identityResolution?: IdentityResolution
+  ) => Promise<void>;
+  logout: () => void;
+}
+
+export const LoginFormWithoutJWT: FC<Props> = ({
+  setEmail,
+  setUserId,
+  logout
+}) => {
+  const [useEmail, setUseEmail] = useState<boolean>(true);
+  const [user, updateUser] = useState<string>(process.env.LOGIN_EMAIL || '');
+
+  const [error, setError] = useState<string>('');
+
+  const [isEditingUser, setEditingUser] = useState<boolean>(false);
+
+  const { loggedInUser, setLoggedInUser } = useUser();
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const setUser = useEmail ? setEmail : setUserId;
+
+    setUser(user)
+      .then(() => {
+        setEditingUser(false);
+        setLoggedInUser({ type: 'user_update', data: user });
+      })
+      .catch(() => setError('Something went wrong!'));
+  };
+
+  const handleLogout = () => {
+    logout();
+    setLoggedInUser({ type: 'user_update', data: '' });
+  };
+
+  const handleEditUser = () => {
+    updateUser(loggedInUser);
+    setEditingUser(true);
+  };
+
+  const handleCancelEditUser = () => {
+    updateUser('');
+    setEditingUser(false);
+  };
+
+  const handleRadioChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setUseEmail(e.target.value === 'email');
+  };
+
+  const first5 = loggedInUser.substring(0, 5);
+  const last9 = loggedInUser.substring(loggedInUser.length - 9);
+
+  return (
+    <>
+      {loggedInUser && !isEditingUser ? (
+        <>
+          <Button onClick={handleEditUser}>
+            Logged in as {`${first5}...${last9}`} (change)
+          </Button>
+          <Button onClick={handleLogout}>Logout</Button>
+        </>
+      ) : (
+        <StyledDiv>
+          <Form>
+            <div>
+              <input
+                type="radio"
+                id="userId"
+                name="userId"
+                value="userId"
+                checked={!useEmail}
+                onChange={handleRadioChange}
+              />
+              <label>UserId</label>
+            </div>
+            <div>
+              <input
+                type="radio"
+                id="email"
+                name="email"
+                value="email"
+                checked={useEmail}
+                onChange={handleRadioChange}
+              />
+              <label>Email</label>
+            </div>
+          </Form>
+          <Form onSubmit={handleSubmit} data-qa-login-form>
+            <TextField
+              onChange={(e) => updateUser(e.target.value)}
+              value={user}
+              placeholder="e.g. [email protected]"
+              required
+              data-qa-login-input
+            />
+            <Button type="submit">{isEditingUser ? 'Change' : 'Login'}</Button>
+            {isEditingUser && (
+              <Button onClick={handleCancelEditUser}>Cancel</Button>
+            )}
+          </Form>
+          {error && <Error>{error}</Error>}
+        </StyledDiv>
+      )}
+    </>
+  );
+};
+
+export default LoginFormWithoutJWT;

react-example/src/index.tsx

@@ -14,6 +14,7 @@ import { EmbeddedMessage } from './views/Embedded';
 import { Link } from './components/Link';
 import { LoginForm } from './components/LoginForm';
 import { EmbeddedMsgs } from './views/EmbeddedMsgs';
+import AUTTesting from './views/AUTTesting';
 
 import { UserProvider } from './context/Users';
 import { EmbeddedMsgsImpressionTracker } from './views/EmbeddedMsgsImpressionTracker';
@@ -45,7 +46,8 @@ const HomeLink = styled(Link)`
     authToken: process.env.API_KEY || '',
     configOptions: {
       isEuIterableService: false,
-      dangerouslyAllowJsPopups: true
+      dangerouslyAllowJsPopups: true,
+      enableAnonActivation: true
     },
     generateJWT: ({ email, userID }) =>
       axios
@@ -65,8 +67,15 @@ const HomeLink = styled(Link)`
         )
         .then((response: any) => response.data?.token)
   };
-  const { setEmail, setUserID, logout, refreshJwtToken } =
-    initializeWithConfig(initializeParams);
+  const {
+    setEmail,
+    setUserID,
+    logout,
+    refreshJwtToken,
+    setVisitorUsageTracked
+  } = initializeWithConfig(initializeParams);
+
+  const handleConsent = (consent?: boolean) => setVisitorUsageTracked(consent);
 
   const container = document.getElementById('root');
   const root = createRoot(container);
@@ -98,6 +107,10 @@ const HomeLink = styled(Link)`
                 path="/embedded-msgs-impression-tracker"
                 element={<EmbeddedMsgsImpressionTracker />}
               />
+              <Route
+                path="/aut-testing"
+                element={<AUTTesting setConsent={handleConsent} />}
+              />
             </Routes>
           </RouteWrapper>
         </UserProvider>

react-example/src/indexWithoutJWT.tsx

@@ -0,0 +1,100 @@
+import { initializeWithConfig, WithoutJWTParams } from '@iterable/web-sdk';
+import ReactDOM from 'react-dom';
+import './styles/index.css';
+
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import styled from 'styled-components';
+import { Home } from './views/Home';
+import { Commerce } from './views/Commerce';
+import { Events } from './views/Events';
+import { Users } from './views/Users';
+import { InApp } from './views/InApp';
+import LoginFormWithoutJWT from './components/LoginFormWithoutJWT';
+import AUTTesting from './views/AUTTesting';
+import { EmbeddedMsgs } from './views/EmbeddedMsgs';
+import { EmbeddedMessage } from './views/Embedded';
+import { EmbeddedMsgsImpressionTracker } from './views/EmbeddedMsgsImpressionTracker';
+import { Link } from './components/Link';
+import { UserProvider } from './context/Users';
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-flow: column;
+`;
+
+const RouteWrapper = styled.div`
+  width: 90%;
+  margin: 0 auto;
+`;
+
+const HeaderWrapper = styled.div`
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: space-between;
+  margin: 1em;
+`;
+
+const HomeLink = styled(Link)`
+  width: 100px;
+`;
+
+((): void => {
+  // Here we are testing it using NON-JWT based project.
+  const initializeParams: WithoutJWTParams = {
+    authToken: process.env.API_KEY || '',
+    configOptions: {
+      isEuIterableService: false,
+      dangerouslyAllowJsPopups: true,
+      enableAnonActivation: true,
+      onAnonUserCreated: (userId: string) => {
+        console.log('onAnonUserCreated', userId);
+      }
+    }
+  };
+
+  const { setUserID, logout, setEmail, setVisitorUsageTracked } =
+    initializeWithConfig(initializeParams);
+
+  const handleConsent = (consent?: boolean) => setVisitorUsageTracked(consent);
+
+  // eslint-disable-next-line react/no-deprecated
+  ReactDOM.render(
+    <BrowserRouter>
+      <Wrapper>
+        <UserProvider>
+          <HeaderWrapper>
+            <HomeLink renderAsButton to="/">
+              Home
+            </HomeLink>
+            <LoginFormWithoutJWT
+              setEmail={setEmail}
+              setUserId={setUserID}
+              logout={logout}
+            />
+          </HeaderWrapper>
+          <RouteWrapper>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/commerce" element={<Commerce />} />
+              <Route path="/events" element={<Events />} />
+              <Route path="/users" element={<Users />} />
+              <Route path="/inApp" element={<InApp />} />
+              <Route path="/embedded-msgs" element={<EmbeddedMsgs />} />
+              <Route path="/embedded" element={<EmbeddedMessage />} />
+              <Route
+                path="/embedded-msgs-impression-tracker"
+                element={<EmbeddedMsgsImpressionTracker />}
+              />
+              <Route
+                path="/aut-testing"
+                element={<AUTTesting setConsent={handleConsent} />}
+              />
+            </Routes>
+          </RouteWrapper>
+        </UserProvider>
+      </Wrapper>
+    </BrowserRouter>,
+    document.getElementById('root')
+  );
+})();