@imposium-hub/components 2.6.0-0 → 2.6.0-2

package/src/redux/actions/access.ts

@@ -1,33 +1,31 @@
+import { getOrgIdFromStory } from '../../Util';
+
 export const storyAdded = (storyId: string, storyName: string): any => {
     return (dispatch, getStore) => {
-        const {
-            access,
-            routing: {
-                locationBeforeTransitions: { query }
-            }
-        } = getStore();
-        const orgId: string = query.organization_id;
-
-        const accessData: any = {
-            ...access,
-            organizations: access.organizations.map((o: any) => {
-                if (o.id === orgId) {
-                    return {
-                        ...o,
-                        stories: [
-                            ...o.stories,
-                            {
-                                id: storyId,
-                                name: storyName
-                            }
-                        ].sort((a, b) => a.name.localeCompare(b.name))
-                    };
-                }
+        const { access } = getStore();
+        const orgId = getOrgIdFromStory(storyId, access);
+        if (orgId) {
+            const accessData: any = {
+                ...access,
+                organizations: access.organizations.map((o: any) => {
+                    if (o.id === orgId) {
+                        return {
+                            ...o,
+                            stories: [
+                                ...o.stories,
+                                {
+                                    id: storyId,
+                                    name: storyName
+                                }
+                            ].sort((a, b) => a.name.localeCompare(b.name))
+                        };
+                    }
 
-                return o;
-            })
-        };
-        dispatch({ type: actions.STORY_ADDED, accessData });
+                    return o;
+                })
+            };
+            dispatch({ type: actions.STORY_ADDED, accessData });
+        }
     };
 };
 
@@ -54,61 +52,55 @@ export const orgNameMutated = (orgId: string, newOrgName: string): any => {
 
 export const storyNameMutated = (storyId: string, newStoryName: string): any => {
     return (dispatch, getStore) => {
-        const {
-            access,
-            routing: {
-                locationBeforeTransitions: { query }
-            }
-        } = getStore();
-        const orgId: string = query.organization_id;
+        const { access } = getStore();
 
-        const accessData: any = {
-            ...access,
-            organizations: access.organizations.map((o: any) => {
-                if (o.id === orgId) {
-                    return {
-                        ...o,
-                        stories: o.stories.map((s: any) => {
-                            if (s.id === storyId) {
-                                return { ...s, name: newStoryName };
-                            }
+        const orgId = getOrgIdFromStory(storyId, access);
+        if (orgId) {
+            const accessData: any = {
+                ...access,
+                organizations: access.organizations.map((o: any) => {
+                    if (o.id === orgId) {
+                        return {
+                            ...o,
+                            stories: o.stories.map((s: any) => {
+                                if (s.id === storyId) {
+                                    return { ...s, name: newStoryName };
+                                }
 
-                            return s;
-                        })
-                    };
-                }
+                                return s;
+                            })
+                        };
+                    }
 
-                return o;
-            })
-        };
-        dispatch({ type: actions.STORY_NAME_MUTATION, accessData });
+                    return o;
+                })
+            };
+            dispatch({ type: actions.STORY_NAME_MUTATION, accessData });
+        }
     };
 };
 
 export const storyDeleted = (storyId: string): any => {
     return (dispatch, getStore) => {
-        const {
-            access,
-            routing: {
-                locationBeforeTransitions: { query }
-            }
-        } = getStore();
-        const orgId: string = query.organization_id;
+        const { access } = getStore();
 
-        const accessData: any = {
-            ...access,
-            organizations: access.organizations.map((o: any) => {
-                if (o.id === orgId) {
-                    return {
-                        ...o,
-                        stories: o.stories.filter((s: any) => s.id !== storyId)
-                    };
-                }
+        const orgId = getOrgIdFromStory(storyId, access);
+        if (orgId) {
+            const accessData: any = {
+                ...access,
+                organizations: access.organizations.map((o: any) => {
+                    if (o.id === orgId) {
+                        return {
+                            ...o,
+                            stories: o.stories.filter((s: any) => s.id !== storyId)
+                        };
+                    }
 
-                return o;
-            })
-        };
-        dispatch({ type: actions.STORY_DELETED, accessData });
+                    return o;
+                })
+            };
+            dispatch({ type: actions.STORY_DELETED, accessData });
+        }
     };
 };
 

package/src/services/API.ts

@@ -8,8 +8,10 @@ import axios, {
 } from 'axios';
 import { isObjEmpty } from '../Util';
 import { JOB_TYPES } from '../constants/api';
+import { API_AUTH_TYPES } from '../components/font-picker/font-manager/constants';
 
 export interface IImposiumAPI {
+    init(baseUrl: string, credentials: any, orgId?: string);
     getAssets(filters: any, storyId: string, unprocessed?: boolean, showVariables?: boolean);
     getAssetItem(assetId: string);
     uploadAsset(
@@ -145,9 +147,13 @@ export interface IImposiumAPI {
     getAssetMap(storyId: string);
     clearStoryCache(storyId: string);
     debugId(id: string);
-    cacheActiveStory(serviceId: string, orgId: string, storyId: string);
+    cacheActiveStory(serviceId: any, orgId: string, storyId: string);
     getCachedStoryForOrg(serviceId: string, orgId: string);
     getAccessData(includeTotalRenders?: boolean, orgId?: string);
+    deleteExperience(experienceId: string, eraseMedia?: boolean);
+    exportExperiences(experienceId: string, params: any);
+    addOrReplaceNote(experienceId: string, notes: string);
+    updateModerationStatus(experienceId: string, status: string, reason?: string);
 }
 
 interface ITTSOptions {
@@ -183,38 +189,51 @@ export default class API {
 
     private cancelTokens: object = {};
 
-    constructor(baseURL: string, idToken: string, organizationId?: string) {
+    private getToken;
+
+    private authType;
+
+    public init(baseURL: string, credentials: any, organizationId?: string): void {
         // JWT
         const headers = {
-            'Authorization': `Bearer ${idToken}`,
             'X-Imposium-API-Version': '2.0.2'
-            // 'X-Imposium-Account-Id': organizationId || ''
         };
 
         if (organizationId) {
             headers['X-Imposium-Account-Id'] = organizationId;
         }
-        if (idToken) {
-            this.http = axios.create({
-                baseURL,
-                headers
-            });
 
-            // Basic Access Key
-        } else {
+        // If the token is a string, it's an accessKey, so use the X-Imposium-Access-Key header
+        if (typeof credentials === 'string') {
+            this.authType = API_AUTH_TYPES.ACCESS_KEY;
             this.http = axios.create({
                 baseURL,
                 headers: {
-                    'X-Imposium-Access-Key': `${idToken}`,
+                    'X-Imposium-Access-Key': `${credentials}`,
                     'X-Imposium-API-Version': '2.0.0'
                 }
             });
+        } else {
+            this.authType = API_AUTH_TYPES.TOKEN;
+            this.http = axios.create({
+                baseURL,
+                headers
+            });
         }
 
+        this.getToken = credentials;
         this.awsHttp = axios.create();
     }
 
-    private doRequest = (config: AxiosRequestConfig, reqAlias: string = ''): Promise<any> => {
+    private doRequest = async (config: AxiosRequestConfig, reqAlias: string = ''): Promise<any> => {
+        if (this.authType === API_AUTH_TYPES.TOKEN) {
+            const token = await this.getToken();
+            const headers = {
+                Authorization: `Bearer ${token}`
+            };
+            config.headers = headers;
+        }
+
         return new Promise((resolve, reject) => {
             this.http(config)
                 .then((res: AxiosResponse) => {
@@ -1024,11 +1043,19 @@ export default class API {
         };
 
         return new Promise((resolve, reject) => {
-            this.pollForJob(config, resolve, reject);
+            void this.pollForJob(config, resolve, reject);
         });
     };
 
-    private pollForJob = (config, resolve, reject) => {
+    private pollForJob = async (config, resolve, reject) => {
+        if (this.authType === API_AUTH_TYPES.TOKEN) {
+            const token = await this.getToken();
+            const headers = {
+                Authorization: `Bearer ${token}`
+            };
+            config.headers = headers;
+        }
+
         this.http(config)
             .then((res: AxiosResponse) => {
                 const {
@@ -1041,7 +1068,7 @@ export default class API {
                     resolve(res.data);
                 } else {
                     this.jobPollTimer = setTimeout(() => {
-                        this.pollForJob(config, resolve, reject);
+                        void this.pollForJob(config, resolve, reject);
                     }, this.pollingInterval);
                 }
             })
@@ -1050,7 +1077,15 @@ export default class API {
             });
     };
 
-    private pollForExperience = (config, resolve, reject) => {
+    private pollForExperience = async (config, resolve, reject) => {
+        if (this.authType === API_AUTH_TYPES.TOKEN) {
+            const token = await this.getToken();
+            const headers = {
+                Authorization: `Bearer ${token}`
+            };
+            config.headers = headers;
+        }
+
         this.http(config)
             .then((res: AxiosResponse) => {
                 if (res.data.status === 'failed') {
@@ -1060,14 +1095,14 @@ export default class API {
                 } else if (res.data.output !== undefined) {
                     if (isObjEmpty(res.data.output)) {
                         this.experiencePollTimer = setTimeout(() => {
-                            this.pollForExperience(config, resolve, reject);
+                            void this.pollForExperience(config, resolve, reject);
                         }, this.pollingInterval);
                     } else {
                         resolve(res.data);
                     }
                 } else {
                     this.experiencePollTimer = setTimeout(() => {
-                        this.pollForExperience(config, resolve, reject);
+                        void this.pollForExperience(config, resolve, reject);
                     }, this.pollingInterval);
                 }
             })
@@ -1189,7 +1224,7 @@ export default class API {
             return this.doRequest(config);
         } else {
             return new Promise((resolve, reject) => {
-                this.pollForExperience(config, resolve, reject);
+                void this.pollForExperience(config, resolve, reject);
             });
         }
     };

package/src/utils/modal.ts

@@ -0,0 +1,9 @@
+import { IConfirmModalProps } from '../components/confirm-modal/ConfirmModal';
+
+export const openConfirmModal = (detail: IConfirmModalProps) => {
+    const event = new CustomEvent('openconfirmmodal', {
+        detail
+    });
+
+    window.dispatchEvent(event);
+};

package/src/utils/pendo.ts

@@ -0,0 +1,38 @@
+import { User } from '@auth0/auth0-react';
+declare const pendo;
+
+export const initPendo = (appLabel, environment, userInfo: User) => {
+    if (environment !== 'production') {
+        console.info(
+            '%cPendo%c is %cdisabled%c for local testing',
+            'color: #e247e5; font-weight:bold;',
+            'color:#fff; font-weight:normal;',
+            'color:red; font-weight:bold;',
+            'color:#fff; font-weight:normal;'
+        );
+        return;
+    }
+
+    try {
+        const visitor = {
+            id: userInfo.sub,
+            email: userInfo.email
+        };
+
+        /* eslint-disable no-undef */
+        pendo.initialize({
+            visitor: {
+                ...visitor,
+                environment,
+                product: appLabel,
+                language: navigator.language
+            }
+        });
+        /* eslint-enable no-undef */
+    } catch (err) {
+        console.groupCollapsed('Pendo Init Problem');
+        console.error('Problem Starting up Pendo');
+        console.error(err);
+        console.groupEnd();
+    }
+};

package/src/utils/routing.ts

@@ -1,3 +1,13 @@
+import { browserHistory } from 'react-router';
+
+export const pushRoute = (route): void => {
+    browserHistory.push(route);
+};
+
+export const replaceRoute = (route): void => {
+    browserHistory.replace(route);
+};
+
 export const getDemoURL = (): string => {
     const {
         location: { href }