@imposium-hub/components 2.2.45-0 → 2.2.45

package/src/components/publish-wizard/PublishWizard.tsx

@@ -5,12 +5,10 @@ import HRule from '../h-rule/HRule';
 import {
     ICON_DOWNLOAD,
     ICON_EMAIL,
-    ICON_EXCLAIMATION_TRIANGLE,
     ICON_GLOBE,
     ICON_HUBSPOT,
     ICON_IMAGE,
-    ICON_PROJECT_DIAGRAM,
-    ICON_UP_RIGHT_FROM_SQUARE
+    ICON_PROJECT_DIAGRAM
 } from '../../constants/icons';
 import { IImposiumAPI } from '../../services/API';
 import * as copy from '../../constants/copy';
@@ -25,8 +23,6 @@ import { publishVersion } from '../../redux/actions/publish';
 import { connect } from 'react-redux';
 
 interface IPublishWizardProps {
-    fromCrM?: boolean;
-    creativeManagerBaseUrl?: string;
     story: any;
     project: any;
     updateEditorConfig(c): void;
@@ -38,6 +34,7 @@ interface IPublishWizardProps {
     exportExperiences: () => void;
     publishVersion: (api: IImposiumAPI, sId: string) => any;
     batchesList: any;
+    publishing: boolean;
     onClose(): any;
     api: IImposiumAPI;
     handleError(e): void;
@@ -94,7 +91,6 @@ interface IPublishWizardState {
     error: boolean;
     next: boolean;
     nextStep: boolean;
-    publishError: string;
 }
 
 interface IBigButtonProps {
@@ -138,27 +134,12 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             done: false,
             error: false,
             next: false,
-            nextStep: false,
-            publishError: null
+            nextStep: false
         };
         this.emailWorkflow = React.createRef();
         this.hiddenFileInputRef = React.createRef();
     }
 
-    public componentDidUpdate(prevProps, prevState) {
-        // If we just finished publushing, and we're on the first screen still go to the second screen
-        if (
-            prevProps.publishData.publishing &&
-            !this.props.publishData.publishing &&
-            this.state.screenIndex === 0 &&
-            !this.state.publishError
-        ) {
-            this.setState({
-                screenIndex: 1
-            });
-        }
-    }
-
     public componentDidMount() {
         const { story, api, handleError, activeComposition } = this.props;
         // Pull in all of the access creds for the composition dropdown
@@ -294,25 +275,12 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const {
             story: { id },
             api,
-            handleError,
-            fromCrM
+            handleError
         } = this.props;
-
-        if (fromCrM) {
-            this.props
-                .publishVersion(api, id)
-                .then(() => {
-                    this.setState({ screenIndex: 1 });
-                })
-                .catch((e) => {
-                    this.setState({ publishError: e });
-                });
-        } else {
-            this.props.publishVersion(api, id).catch((e) => {
-                handleError(e);
-            });
-            this.setState({ screenIndex: 1 });
-        }
+        this.props.publishVersion(api, id).catch((e) => {
+            handleError(e);
+        });
+        this.setState({ screenIndex: 1 });
     }
 
     private onCloseHandler = () => {
@@ -328,7 +296,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
     private renderLowerButtons() {
         const { screenIndex, done, error, next } = this.state;
-        const { publishing } = this.props.publishData;
+        const { publishing } = this.props;
 
         const lowerButtons = [];
 
@@ -415,19 +383,11 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     }
 
     private renderPublish() {
-        const { publishing } = this.props.publishData;
-        const { publishError } = this.state;
-        const error = publishError ? (
-            <p className='publish-error'>
-                <span className='icon'>{ICON_EXCLAIMATION_TRIANGLE}</span>&nbsp;&nbsp;{publishError}
-            </p>
-        ) : null;
         return (
             <div>
                 <h2>{copy.publish.publishStepTitle}</h2>
                 <HRule />
-                <p>{publishing ? copy.publish.publishInProgress : copy.publish.publishStepDesc}</p>
-                {error}
+                <p>{copy.publish.publishStepDesc}</p>
             </div>
         );
     }
@@ -438,7 +398,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const { compositions, afterEffects, selectedComposition, credentials, accessKey } =
             this.state;
 
-        const { publishDataset, fromCrM, story, creativeManagerBaseUrl } = this.props;
+        const { publishDataset } = this.props;
 
         for (const comp of compositions) {
             compOpts.push({
@@ -461,75 +421,56 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             });
         }
 
-        let distributionOptions = !fromCrM
-            ? [
-                  {
-                      label: (
-                          <span>
-                              {ICON_GLOBE}&nbsp;{copy.publish.btnWebsite}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(2)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_EMAIL}&nbsp;{copy.publish.btnEmail}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(3)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(5)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(6)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(7)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(8)
-                  }
-              ]
-            : [
-                  {
-                      label: (
-                          <span>
-                              {ICON_DOWNLOAD}&nbsp;{copy.publish.btnRunTestBatch}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(7)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_UP_RIGHT_FROM_SQUARE}&nbsp;{copy.publish.btnCrM}
-                          </span>
-                      ),
-                      link: `${creativeManagerBaseUrl}/library/${story.creativeLibraryId}/creative/${story.creativeLibraryId}/versions/`
-                  }
-              ];
+        let distributionOptions = [
+            {
+                label: (
+                    <span>
+                        {ICON_GLOBE}&nbsp;{copy.publish.btnWebsite}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(2)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_EMAIL}&nbsp;{copy.publish.btnEmail}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(3)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(5)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(6)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(7)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(8)
+            }
+        ];
 
         if (publishDataset) {
             const indexes = [0, 2, 3];
@@ -541,67 +482,41 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             }, []);
         }
 
-        const compDropdown = !fromCrM ? (
-            <SelectField
-                label={copy.project.compName}
-                value={selectedComposition}
-                onChange={this.onCompositionChange}
-                options={compOpts}
-                tooltip={copy.project.tooltipCompId}
-            />
-        ) : null;
-
-        const accessKeyDropdown = !fromCrM ? (
-            <SelectField
-                label={copy.publish.accessKey}
-                value={accessKey}
-                onChange={this.onCredentialsChange}
-                options={credOpts}
-                tooltip={copy.publish.tooltipAccessKey}
-            />
-        ) : null;
-
         return (
             <div>
-                <h2>
-                    {!fromCrM
-                        ? copy.publish.distributeStepTitle
-                        : copy.publish.distributeStepTitleFromCrM}
-                </h2>
+                <h2>{copy.publish.distributeStepTitle}</h2>
                 <HRule />
-                <p>
-                    {!fromCrM
-                        ? copy.publish.distributeStepDesc
-                        : copy.publish.distributeStepDescFromCrM}
-                </p>
+                <p>{copy.publish.distributeStepDesc}</p>
                 <HRule />
-                {!this.state.selectedComposition && !fromCrM && (
+                {!this.state.selectedComposition && (
                     <p className={'text-danger'}>{copy.publish.noCompErrorDesc}</p>
                 )}
                 <div style={{ marginTop: '10px' }}>
-                    {compDropdown}
-                    {accessKeyDropdown}
+                    <SelectField
+                        label={copy.project.compName}
+                        value={selectedComposition}
+                        onChange={this.onCompositionChange}
+                        options={compOpts}
+                        tooltip={copy.project.tooltipCompId}
+                    />
+                    <SelectField
+                        label={copy.publish.accessKey}
+                        value={accessKey}
+                        onChange={this.onCredentialsChange}
+                        options={credOpts}
+                        tooltip={copy.publish.tooltipAccessKey}
+                    />
 
                     <div className='link-wrapper'>
-                        {distributionOptions?.map((option: any, index) => {
-                            if (option.link) {
-                                return (
-                                    <BigLink
-                                        key={index}
-                                        label={option.label}
-                                        link={option.link}
-                                    />
-                                );
-                            } else {
-                                return (
-                                    <BigButton
-                                        key={index}
-                                        disabled={!selectedComposition}
-                                        label={option.label}
-                                        onClick={option.onClick}
-                                    />
-                                );
-                            }
+                        {distributionOptions?.map((option, index) => {
+                            return (
+                                <BigButton
+                                    key={index}
+                                    disabled={!selectedComposition}
+                                    label={option.label}
+                                    onClick={option.onClick}
+                                />
+                            );
                         })}
                     </div>
                 </div>

package/src/constants/copy.ts

@@ -115,9 +115,6 @@ 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',
@@ -138,11 +135,8 @@ 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,7 +37,6 @@ 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';
@@ -213,5 +212,3 @@ 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,7 +80,14 @@ import {
     clearStoryPublishStatus,
     getStoryPublishStatus
 } from './redux/actions/publish';
-import { storyAdded, storyNameMutated, orgNameMutated, storyDeleted } from './redux/actions/access';
+import {
+    cacheAccessData,
+    clearCachedAccessList,
+    storyAdded,
+    storyNameMutated,
+    orgNameMutated,
+    storyDeleted
+} from './redux/actions/access';
 import { resetFilters, updateFilters } from './redux/actions/asset-filters';
 import {
     getAssets,
@@ -228,6 +235,8 @@ export {
     login,
     clearCachedAuth,
     access,
+    cacheAccessData,
+    clearCachedAccessList,
     storyAdded,
     storyNameMutated,
     orgNameMutated,

package/src/redux/actions/access.ts

@@ -1,7 +1,29 @@
+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 }
             }
@@ -27,13 +49,24 @@ 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 } = getStore();
+        const {
+            access,
+            auth: {
+                idTokenPayload: { exp }
+            }
+        } = getStore();
 
         const accessData: any = {
             ...access,
@@ -48,6 +81,12 @@ 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 });
     };
 };
@@ -56,6 +95,9 @@ export const storyNameMutated = (storyId: string, newStoryName: string): any =>
     return (dispatch, getStore) => {
         const {
             access,
+            auth: {
+                idTokenPayload: { exp }
+            },
             routing: {
                 locationBeforeTransitions: { query }
             }
@@ -81,6 +123,12 @@ 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 });
     };
 };
@@ -89,6 +137,9 @@ export const storyDeleted = (storyId: string): any => {
     return (dispatch, getStore) => {
         const {
             access,
+            auth: {
+                idTokenPayload: { exp }
+            },
             routing: {
                 locationBeforeTransitions: { query }
             }
@@ -108,14 +159,25 @@ 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 });
     };
 };
 
-export const setAccessData = (accessData: any): any => {
-    return (dispatch) => {
-        dispatch({ type: actions.SET, 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.');
+    }
 };
 
 const actions = {

package/src/redux/actions/publish.ts

@@ -12,17 +12,13 @@ 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()
@@ -33,6 +29,7 @@ export const getStoryPublishStatus = (api: IImposiumAPI, storyId: string): any =
                                             reject(f);
                                             throw f;
                                         });
+                                    console.error(e);
                                     reject(copy.header.publishPollError);
                                 });
                         }
@@ -76,7 +73,7 @@ export const publishVersion = (api: IImposiumAPI, storyId: string) => {
         return new Promise((resolve, reject) => {
             api.runPublish(storyId, '')
                 .then((d) => {
-                    return dispatch(getStoryPublishStatus(api, storyId));
+                    dispatch(getStoryPublishStatus(api, storyId));
                 })
                 .catch(() => {
                     reject(copy.header.publishJobError);

package/src/redux/reducers/access.ts

@@ -1,9 +1,12 @@
-import actions from '../actions/access';
+import actions, { ACCESS_CACHE_KEY } from '../actions/access';
 
-const initialState: any = {
-    organizations: [],
-    services: []
-};
+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 access = (state = initialState, action) => {
     switch (action.type) {