@imposium-hub/components 2.6.0-1 → 2.6.0-3

package/src/components/app-wrapper/AppWrapper.tsx

@@ -7,13 +7,16 @@ import { useAuth0 } from '@auth0/auth0-react';
 import { replaceRoute } from '../../utils/routing';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
+import { initPendo } from '../../utils/pendo';
 
 export interface IAppWrapperProps {
+    appLabel: string;
+    environment: string;
     baseUrl: string;
     api: IImposiumAPI;
     organizationId: string;
     serviceId: number;
-    unsavedChanges: boolean;
+    unsavedChanges?: boolean;
     setAccessData(getAccessData): void;
     onAuthenticated: (orgId: string, storyId?: string) => any;
     allowNoStories?: boolean;
@@ -48,12 +51,20 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
         serviceId,
         unsavedChanges,
         saveStory,
+        environment,
+        appLabel,
         allowNoStories
     } = props;
     const { isAuthenticated, isLoading, getAccessTokenSilently, loginWithRedirect, logout, user } =
         useAuth0();
     const [errorState, setErrorState] = React.useState(null);
 
+    React.useEffect(() => {
+        if (user) {
+            initPendo(appLabel, environment, user);
+        }
+    }, [user]);
+
     React.useEffect(() => {
         void doCheckSession(true);
     }, [isAuthenticated, isLoading]);
@@ -142,7 +153,12 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             if (validAccessLevel) {
                 api.init(baseUrl, getAccessTokenSilently, organization_id);
                 onAuthenticated(organization_id, story_id);
-                replaceRoute(`/${organization_id}/${story_id}`);
+
+                if (!hideStoryPicker) {
+                    replaceRoute(`/${organization_id}/${story_id}`);
+                } else {
+                    replaceRoute(`/${organization_id}`);
+                }
                 setBlockRender(false);
                 setErrorState(null);
             } else {
@@ -228,6 +244,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             id='app'
             className='app'>
             <Header
+                email={user?.userEmail}
                 errorState={errorState}
                 saveStory={saveStory}
                 onLogout={onLogout}

package/src/components/header/Header.tsx

@@ -21,6 +21,7 @@ import { header } from '../../constants/copy';
 import { ProjectDropdown } from './ProjectDropdown';
 import { APP_WRAPPER_ERROR_STATES } from '../app-wrapper/AppWrapper';
 export interface IHeaderProps {
+    email: string;
     auth0: any;
     api: IImposiumAPI;
     errorState?: string;
@@ -189,7 +190,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     };
 
     private toggleAccountDropdown = (toggle: boolean, orgId: string = ''): void => {
-        const { api, activeServiceId, unsavedChanges } = this.props;
+        const { api, activeServiceId, unsavedChanges, hideStoryPicker } = this.props;
         if (toggle) {
             this.setState({ showAccountDropdown: true });
         } else {
@@ -202,7 +203,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     api.getCachedStoryForOrg(activeServiceId, orgId)
                         .then((res) => {
                             storyId = res.story_id ? res.story_id : lastModified;
-                            if (storyId) {
+                            if (storyId && !hideStoryPicker) {
                                 pushRoute(`/${orgId}/${storyId}`);
                                 api.cacheActiveStory(activeServiceId, orgId, storyId);
                             } else {
@@ -299,7 +300,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             access,
             api,
             access: { organizations },
-            errorState
+            errorState,
+            email
         } = this.props;
         const {
             showAccountDropdown,
@@ -474,8 +476,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             });
         }
 
-        const email = '';
-        // const email = scrapeEmail(auth);
         // TODO: plug this back in
         const orgSelect = () => {
             return (

package/src/index.ts

@@ -129,7 +129,6 @@ import {
     toFixed,
     padStart,
     parameterizeServiceUrl,
-    scrapeEmail,
     fitToContainer,
     filterHotkeys,
     mimetypeConformsToOverlay,
@@ -139,7 +138,8 @@ import {
     formattedTime,
     getSMPTE,
     checkStoryId,
-    IMAGE_EXTENSIONS
+    IMAGE_EXTENSIONS,
+    getOrgIdFromStory
 } from './Util';
 import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 import { getMediaPreviewStyle } from './utils/assets';
@@ -281,8 +281,8 @@ export {
     getFirstStoryInOrg,
     string2HexCode,
     parameterizeServiceUrl,
-    scrapeEmail,
     fitToContainer,
+    getOrgIdFromStory,
     formattedTime,
     filterHotkeys,
     mimetypeConformsToOverlay,

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

@@ -150,6 +150,10 @@ export interface IImposiumAPI {
     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 {

package/src/utils/pendo.ts

@@ -1,31 +1,8 @@
-/**
- * [initPendo description]
- * 	This initalizes the Pendo Help system in the application
- * 		The Pendo script should be added to the DOM in `index.html`
- * 	This function takes the user object and sets some initial information on Pendo for tracking
- * 		For full documentation of Pendo object please see Pendo Docs
- *
- * 		To prevent application breaking things, we wrap both groups in a try/catch
- * 		This allows our Application to work regardless of the status of Pendo
- * 		*************************************************************
- * 		 We DO NOT WANT TO BREAK OUR APP if a 3rd party script fails
- *    	*************************************************************
- *
- * @param  {object} userInfo User object from crm/v1/user
- *                           Each application's `user/` endpoint returns slightly different data
- *                           The `visitor` object will need to be adjusted based on the data returned
- *                           	We should always have access to:
- *                           	id
- *                           	email
- *                           	full_name
- *
- * @return {undefined}          Nothing
- */
-
+import { User } from '@auth0/auth0-react';
 declare const pendo;
 
-export const initPendo = (environment, userInfo) => {
-    if (/dev/gi.test(environment)) {
+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;',
@@ -39,7 +16,7 @@ export const initPendo = (environment, userInfo) => {
     try {
         const visitor = {
             id: userInfo.sub,
-            email: userInfo['https://imposium.com/email']
+            email: userInfo.email
         };
 
         /* eslint-disable no-undef */
@@ -47,7 +24,7 @@ export const initPendo = (environment, userInfo) => {
             visitor: {
                 ...visitor,
                 environment,
-                product: 'Imposium Project Editor',
+                product: appLabel,
                 language: navigator.language
             }
         });