@imposium-hub/components 2.2.44 → 2.2.45-0

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -57,6 +57,7 @@ interface IStoryPreviewerState {
     isTimeOut: boolean;
     error: boolean;
     jobLogLoading: boolean;
+    errorMsg: string;
 }
 
 class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPreviewerState> {
@@ -86,7 +87,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             isTimeOut: false,
             compositionOverride: null,
             error: false,
-            jobLogLoading: false
+            jobLogLoading: false,
+            errorMsg: ''
         };
 
         this.timer = new Timer({
@@ -191,7 +193,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     public componentDidUpdate(prevProps, prevState) {
         if (!prevProps.editor?.autoRender && this.props.editor?.autoRender) {
             this.props.updateEditorConfig({ autoRender: false });
-            this.createExperience();
+            this.evtHandlers.gotExperience = null;
+            this.props.api.cancelExperiencePolling().then(() => this.createExperience());
         }
 
         if (
@@ -225,7 +228,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                 const { experienceId } = this.state;
 
                 api.cancelExperiencePolling().then(() => {
-                    onError(copy.runExpError.replace('[expId]', experienceId));
+                    onError(copy.runExpIdError.replace('[expId]', experienceId));
 
                     this.resetState(
                         true,
@@ -507,8 +510,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                                                 () => {
                                                                     onError(
                                                                         copy.runExpError.replace(
-                                                                            '[expId]',
-                                                                            experienceId
+                                                                            '[error]',
+                                                                            e.error
                                                                         )
                                                                     );
 
@@ -516,7 +519,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                                                         true,
                                                                         () => {
                                                                             this.setState({
-                                                                                isTimeOut: true
+                                                                                isTimeOut: true,
+                                                                                errorMsg: e.error
                                                                             });
                                                                         },
                                                                         experienceId
@@ -525,7 +529,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                                             );
                                                         } else {
                                                             onError(
-                                                                copy.runExpError.replace(
+                                                                copy.runExpIdError.replace(
                                                                     '[expId]',
                                                                     experienceId
                                                                 )
@@ -569,10 +573,10 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                     this.resetState();
                                     if (onError) {
                                         if (e.error) {
-                                            onError(e.error);
+                                            onError(copy.runExpError.replace('[error]', e.error));
                                         } else {
                                             onError(
-                                                copy.runExpError.replace('[expId]', experienceId)
+                                                copy.runExpIdError.replace('[expId]', experienceId)
                                             );
                                         }
                                     }
@@ -652,7 +656,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
     }
 
     private renderViewerContent() {
-        const { rendering, experience, timeElapsed, activeOutput, isTimeOut } = this.state;
+        const { rendering, experience, timeElapsed, activeOutput, isTimeOut, errorMsg } =
+            this.state;
 
         const { api, onError } = this.props;
 
@@ -676,6 +681,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                     <p>
                         {copy.time}&nbsp;{formattedTime(timeElapsed)}
                     </p>
+                    <br />
+                    <p>{`${copy.runExpError.replace('[error]', errorMsg)}`}</p>
                 </div>
             );
         } else if (experience && activeOutput) {

package/src/constants/copy.ts

@@ -58,7 +58,8 @@ export const previewer = {
     time: 'Time Elapsed:',
     expRunning: 'Rendering Experience',
     runExpStart: 'Creating Experience',
-    runExpError: 'Error running experience - ID: [expId]',
+    runExpIdError: 'Error running experience - ID: [expId]',
+    runExpError: 'Error running experience: [error]',
     triggerExpError: 'Error triggering experience - ID: [expId]',
     expId: 'Running Experience - ID: [expId]',
     createExpError: 'Error creating experience',
@@ -114,6 +115,9 @@ export const compositions = {
 };
 
 export const publish = {
+    publishInProgress: 'Publish to Creative Manager in progress',
+    btnRunTestBatch: 'Run Test Batch',
+    btnCrM: 'Creative Manager',
     creativeLibraryId: 'Creative Library ID',
     creativeId: 'Creative ID',
     email: 'Notification Email',
@@ -134,8 +138,11 @@ export const publish = {
 
     // distribute
     distributeStepTitle: 'STEP 2: How do you want your users to view their video?',
+    distributeStepTitleFromCrM: 'STEP 2: Run a test batch or return to Creative Manager?',
     distributeStepDesc:
         'Select which Composition you want to deliver, access credentials you want to use, and distribution channel.',
+    distributeStepDescFromCrM:
+        'You can run a test batch to preview a sample data set, or return to Creative Manager where you can publish the final version set.',
     compositionError: 'Please Select Composition',
 
     // webpage

package/src/constants/icons.tsx

@@ -37,6 +37,7 @@ import { faFont } from '@fortawesome/free-solid-svg-icons/faFont';
 import { faAlignLeft } from '@fortawesome/free-solid-svg-icons/faAlignLeft';
 import { faAlignRight } from '@fortawesome/free-solid-svg-icons/faAlignRight';
 import { faAlignCenter } from '@fortawesome/free-solid-svg-icons/faAlignCenter';
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons/faUpRightFromSquare';
 import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
 import { faArrowToTop } from '@fortawesome/pro-light-svg-icons/faArrowToTop';
 import { faArrowToBottom } from '@fortawesome/pro-light-svg-icons/faArrowToBottom';
@@ -212,3 +213,5 @@ export const ICON_CENTER_ANCHOR = <FontAwesomeIcon icon={faCircleSmall} />;
 export const ICON_CLAPPERBOARD_PLAY = <FontAwesomeIcon icon={faClapperboardPlay} />;
 
 export const ICON_CODE = <FontAwesomeIcon icon={faCode} />;
+
+export const ICON_UP_RIGHT_FROM_SQUARE = <FontAwesomeIcon icon={faUpRightFromSquare} />;

package/src/index.ts

@@ -80,14 +80,7 @@ import {
     clearStoryPublishStatus,
     getStoryPublishStatus
 } from './redux/actions/publish';
-import {
-    cacheAccessData,
-    clearCachedAccessList,
-    storyAdded,
-    storyNameMutated,
-    orgNameMutated,
-    storyDeleted
-} from './redux/actions/access';
+import { storyAdded, storyNameMutated, orgNameMutated, storyDeleted } from './redux/actions/access';
 import { resetFilters, updateFilters } from './redux/actions/asset-filters';
 import {
     getAssets,
@@ -235,8 +228,6 @@ export {
     login,
     clearCachedAuth,
     access,
-    cacheAccessData,
-    clearCachedAccessList,
     storyAdded,
     storyNameMutated,
     orgNameMutated,

package/src/redux/actions/access.ts

@@ -1,29 +1,7 @@
-import SessionService from '../../services/Session';
-
-export const ACCESS_CACHE_KEY: string = 'imposium_access_list';
-
-export const cacheAccessData = (accessData: any): any => {
-    doCacheAccessData(accessData);
-    return { type: actions.SET, accessData };
-};
-
-export const clearCachedAccessList = (): any => {
-    try {
-        localStorage.removeItem(ACCESS_CACHE_KEY);
-    } catch (e) {
-        console.warn('Failed to clear access list cache from local storage.');
-    }
-
-    return { type: actions.CLEAR };
-};
-
 export const storyAdded = (storyId: string, storyName: string): any => {
     return (dispatch, getStore) => {
         const {
             access,
-            auth: {
-                idTokenPayload: { exp }
-            },
             routing: {
                 locationBeforeTransitions: { query }
             }
@@ -49,24 +27,13 @@ export const storyAdded = (storyId: string, storyName: string): any => {
                 return o;
             })
         };
-
-        SessionService.updateSession(
-            { stories_hash: SessionService.generateStoriesHash(accessData) },
-            exp
-        );
-        doCacheAccessData(accessData);
         dispatch({ type: actions.STORY_ADDED, accessData });
     };
 };
 
 export const orgNameMutated = (orgId: string, newOrgName: string): any => {
     return (dispatch, getStore) => {
-        const {
-            access,
-            auth: {
-                idTokenPayload: { exp }
-            }
-        } = getStore();
+        const { access } = getStore();
 
         const accessData: any = {
             ...access,
@@ -81,12 +48,6 @@ export const orgNameMutated = (orgId: string, newOrgName: string): any => {
                 return o;
             })
         };
-
-        SessionService.updateSession(
-            { stories_hash: SessionService.generateOrgsHash(accessData) },
-            exp
-        );
-        doCacheAccessData(accessData);
         dispatch({ type: actions.ORG_NAME_MUTATION, accessData });
     };
 };
@@ -95,9 +56,6 @@ export const storyNameMutated = (storyId: string, newStoryName: string): any =>
     return (dispatch, getStore) => {
         const {
             access,
-            auth: {
-                idTokenPayload: { exp }
-            },
             routing: {
                 locationBeforeTransitions: { query }
             }
@@ -123,12 +81,6 @@ export const storyNameMutated = (storyId: string, newStoryName: string): any =>
                 return o;
             })
         };
-
-        SessionService.updateSession(
-            { stories_hash: SessionService.generateOrgsHash(accessData) },
-            exp
-        );
-        doCacheAccessData(accessData);
         dispatch({ type: actions.STORY_NAME_MUTATION, accessData });
     };
 };
@@ -137,9 +89,6 @@ export const storyDeleted = (storyId: string): any => {
     return (dispatch, getStore) => {
         const {
             access,
-            auth: {
-                idTokenPayload: { exp }
-            },
             routing: {
                 locationBeforeTransitions: { query }
             }
@@ -159,25 +108,14 @@ export const storyDeleted = (storyId: string): any => {
                 return o;
             })
         };
-
-        SessionService.updateSession(
-            {
-                story_id: '',
-                stories_hash: SessionService.generateStoriesHash(accessData)
-            },
-            exp
-        );
-        doCacheAccessData(accessData);
         dispatch({ type: actions.STORY_DELETED, accessData });
     };
 };
 
-const doCacheAccessData = (accessData: any): any => {
-    try {
-        localStorage.setItem(ACCESS_CACHE_KEY, JSON.stringify(accessData));
-    } catch (e) {
-        console.warn('Failed to cache access list in local storage.');
-    }
+export const setAccessData = (accessData: any): any => {
+    return (dispatch) => {
+        dispatch({ type: actions.SET, accessData });
+    };
 };
 
 const actions = {

package/src/redux/actions/publish.ts

@@ -12,13 +12,17 @@ export const getStoryPublishStatus = (api: IImposiumAPI, storyId: string): any =
             api.getStoryStatus(storyId)
                 .then((resStatus) => {
                     if (resStatus) {
+                        if (resStatus.status === 'failed') {
+                            reject(resStatus.message);
+                        }
+
                         dispatch({ type: publish.UPDATE_PUBLISH_STATUS, data: resStatus });
+
                         if (resStatus.publishing) {
                             const jobId = resStatus.job_id;
                             api.pollJob(jobId)
                                 .then(() => {
                                     return dispatch(getStoryPublishStatus(api, storyId));
-                                    // Error polling job
                                 })
                                 .catch((e) => {
                                     api.cancelJobPolling()
@@ -29,7 +33,6 @@ export const getStoryPublishStatus = (api: IImposiumAPI, storyId: string): any =
                                             reject(f);
                                             throw f;
                                         });
-                                    console.error(e);
                                     reject(copy.header.publishPollError);
                                 });
                         }
@@ -73,7 +76,7 @@ export const publishVersion = (api: IImposiumAPI, storyId: string) => {
         return new Promise((resolve, reject) => {
             api.runPublish(storyId, '')
                 .then((d) => {
-                    dispatch(getStoryPublishStatus(api, storyId));
+                    return dispatch(getStoryPublishStatus(api, storyId));
                 })
                 .catch(() => {
                     reject(copy.header.publishJobError);

package/src/redux/reducers/access.ts

@@ -1,12 +1,9 @@
-import actions, { ACCESS_CACHE_KEY } from '../actions/access';
+import actions from '../actions/access';
 
-let initialState: any = null;
-
-try {
-    initialState = JSON.parse(localStorage.getItem(ACCESS_CACHE_KEY));
-} catch (e) {
-    console.warn('Cached access data was malformed or missing, redirected to login.');
-}
+const initialState: any = {
+    organizations: [],
+    services: []
+};
 
 const access = (state = initialState, action) => {
     switch (action.type) {

package/src/services/Session.ts

@@ -6,23 +6,19 @@ export interface IHubSession {
     sub: string;
     organization_id: string;
     story_id: string;
-    stories_hash: number;
-    orgs_hash: number;
 }
 
 export default class SessionService {
-    private static readonly LAST_STORY_ID_CACHE: string = 'imp_hub_last_story_id';
+    private static readonly LOGIN_STORY_ID_CACHE: string = 'imp_hub_last_story_id';
 
-    private static readonly LAST_ORG_ID_CACHE: string = 'imp_hub_last_org_id';
+    private static readonly LOGIN_ORG_ID_CACHE: string = 'imp_hub_last_org_id';
 
     private static readonly SESSION_COOKIE_NAME: string = 'auth_state';
 
     private static readonly FRESH_COOKIE: IHubSession = {
         sub: '',
         organization_id: '',
-        story_id: '',
-        stories_hash: 0,
-        orgs_hash: 0
+        story_id: ''
     };
 
     /*
@@ -65,75 +61,27 @@ export default class SessionService {
         Cookies.remove(SessionService.SESSION_COOKIE_NAME, { domain });
     };
 
-    public static buildFreshSession = (freshIdentity: IIdentity, freshAccess: any): void => {
+    public static buildFreshSession = (
+        freshIdentity: IIdentity,
+        orgId: string = null,
+        storyId: string = null
+    ): void => {
         const {
             idTokenPayload: { sub, exp }
         } = freshIdentity;
-        const { organizations } = freshAccess;
-
-        let cachedOrganizationId: string;
-        let cachedStoryId: string;
-        let organizationId: string = '';
-        let activeStoryId: string = '';
-        let activeOrg: any;
-
-        try {
-            cachedOrganizationId = localStorage.getItem(SessionService.LAST_ORG_ID_CACHE);
-            cachedStoryId = localStorage.getItem(SessionService.LAST_STORY_ID_CACHE);
-        } catch (e) {
-            console.warn('Failed to look up cached hub settings', e);
-        }
-
-        // Check if org exists in access data fetched from imposium
-        if (cachedOrganizationId) {
-            activeOrg = freshAccess.organizations.find((o: any) => o.id === cachedOrganizationId);
-
-            if (typeof activeOrg === 'object' && activeOrg.hasOwnProperty('id')) {
-                organizationId = cachedOrganizationId;
-            }
-        }
 
-        // If the cached org id matched up with an org record, check to see if the cached story id also
-        // matches an existing story
-        if (
-            cachedStoryId &&
-            organizationId &&
-            activeOrg.stories &&
-            activeOrg.stories.find((s: any) => s.id === cachedStoryId)
-        ) {
-            activeStoryId = cachedStoryId;
-        }
+        const freshSession: any = {
+            sub
+        };
 
-        // If the cached org id was missing / not belonging to the current org, use the first org id if possible
-        if (
-            !organizationId &&
-            organizations.length > 0 &&
-            typeof organizations[0] === 'object' &&
-            organizations[0].hasOwnProperty('id')
-        ) {
-            organizationId = organizations[0].id;
+        if (orgId) {
+            freshSession.organization_id = orgId;
         }
 
-        // Same for story id if the cache was missing / belonging to a different org
-        if (
-            !activeStoryId &&
-            organizations &&
-            organizations[0] &&
-            organizations[0].stories.length > 0 &&
-            typeof organizations[0].stories[0] === 'object' &&
-            organizations[0].stories[0].hasOwnProperty('id')
-        ) {
-            activeStoryId = organizations[0].stories[0].id;
+        if (storyId) {
+            freshSession.story_id = storyId;
         }
 
-        const freshSession: IHubSession = {
-            sub,
-            organization_id: organizationId,
-            story_id: activeStoryId,
-            stories_hash: SessionService.generateStoriesHash(freshAccess),
-            orgs_hash: SessionService.generateOrgsHash(freshAccess)
-        };
-
         SessionService.storeSession(freshSession, exp);
     };
 
@@ -145,69 +93,35 @@ export default class SessionService {
         Cookies.set(SessionService.SESSION_COOKIE_NAME, cookieData, { domain, expires: expiry });
     };
 
-    public static updateSession = (values: any, auth0Expiry: number): void => {
-        const prevCookieData: IHubSession = SessionService.getSession();
-        const nextCookieData: IHubSession = { ...prevCookieData, ...values };
-
-        if (values.hasOwnProperty('organization_id')) {
-            try {
-                localStorage.setItem(SessionService.LAST_ORG_ID_CACHE, values.organization_id);
-            } catch (e) {
-                console.warn('Failed to cache last organization id selected', e);
-            }
-        }
-
-        if (values.hasOwnProperty('story_id')) {
-            try {
-                localStorage.setItem(SessionService.LAST_STORY_ID_CACHE, values.story_id);
-            } catch (e) {
-                console.warn('Failed to cache last story id selected', e);
-            }
-        }
-
-        SessionService.storeSession(nextCookieData, auth0Expiry);
+    public static cacheOrgId = (organizationId: string): void => {
+        localStorage.setItem(SessionService.LOGIN_ORG_ID_CACHE, organizationId);
     };
 
-    /*
-        Hash org ids on an account so distributed apps can detected if this state changed (i.e new org got added)
-     */
-    public static generateOrgsHash = (accessData: any): number => {
-        const allOrgIdsStringified: string = accessData.organizations.map((o) => o.id).join('');
+    public static clearCachedOrgId = () => {
+        localStorage.removeItem(SessionService.LOGIN_ORG_ID_CACHE);
+    };
 
-        return SessionService.string2Hash(allOrgIdsStringified);
+    public static getCachedOrgId = (): string => {
+        return localStorage.getItem(SessionService.LOGIN_ORG_ID_CACHE);
     };
 
-    /*
-        Hash a combination of story ids & names on an account so distributed apps can detect if this state changed
-     */
-    public static generateStoriesHash = (accessData: any): number => {
-        const allStories: any[] = accessData.organizations.reduce(
-            (p, c) => [...p, ...c.stories],
-            []
-        );
-        const allStoriesStringified: string = allStories
-            .map((story) => `${story.id}${story.name}`)
-            .join('');
-
-        return SessionService.string2Hash(allStoriesStringified);
+    public static cacheStoryId = (storyId: string): void => {
+        localStorage.setItem(SessionService.LOGIN_STORY_ID_CACHE, storyId);
     };
 
-    /*
-        Generate hash from string
-     */
-    private static string2Hash = (s: string): number => {
-        let hash: number = 0;
+    public static clearCachedStoryId = (): void => {
+        localStorage.removeItem(SessionService.LOGIN_STORY_ID_CACHE);
+    };
 
-        if (s.length === 0) {
-            return hash;
-        }
+    public static getCachedStoryId = (): string => {
+        return localStorage.getItem(SessionService.LOGIN_STORY_ID_CACHE);
+    };
 
-        for (let i = 0; i < s.length; i++) {
-            hash = (hash << 5) - hash + s.charCodeAt(i);
-            hash |= 0;
-        }
+    public static updateSession = (values: any, auth0Expiry: number): void => {
+        const prevCookieData: IHubSession = SessionService.getSession();
+        const nextCookieData: IHubSession = { ...prevCookieData, ...values };
 
-        return hash;
+        SessionService.storeSession(nextCookieData, auth0Expiry);
     };
 
     /*