@imposium-hub/components 1.39.1 → 1.41.0

package/Entry.ts

@@ -66,10 +66,10 @@ import StaticCompositionRenderer from './components/compositions/StaticCompositi
 import { IStaticComposition } from './constants/compositions';
 import ShortcutMenu from './components/shortcut-menu/ShortcutMenu';
 import TextLayer from './components/compositions/TextLayer';
-
 import { ASSET_TYPES } from './constants/assets';
 import Portal from './components/portal/Portal';
 import AssetDetails from './components/asset-details/AssetDetails';
+import PublishWizard from './components/publish-wizard/PublishWizard';
 
 /*
     Redux Handlers / Thunks
@@ -77,6 +77,8 @@ import AssetDetails from './components/asset-details/AssetDetails';
 import auth from './redux/reducers/auth';
 import {login, clearCachedAuth} from './redux/actions/auth';
 import access from './redux/reducers/access';
+import publish from './redux/reducers/publish';
+import {publishVersion, clearStoryPublishStatus, getStoryPublishStatus} from './redux/actions/publish';
 import {
     cacheAccessData, clearCachedAccessList, storyAdded,
     storyNameMutated, orgNameMutated, storyDeleted
@@ -115,6 +117,7 @@ import Timer from './services/Timer';
 import {getFirstStoryInOrg, string2HexCode, toFixed, padStart, parameterizeServiceUrl, scrapeEmail, fitToContainer,
     filterHotkeys, mimetypeConformsToOverlay, validateAssetMimetype, formatDateDefault, validateAccessLevel, formattedTime} from './Util';
 import CompositionRendererLayer from './components/compositions/CompositionRendererLayer';
+import PublishStatusIndicator from './components/publish-wizard/publish/PublishStatusIndicator';
 
 export {
     AppWrapper,
@@ -246,5 +249,11 @@ export {
     TextLayer,
     CompositionRendererLayer,
 
-    ASSET_TYPES
+    ASSET_TYPES,
+    PublishWizard,
+    publish,
+    publishVersion,
+    clearStoryPublishStatus,
+    getStoryPublishStatus,
+    PublishStatusIndicator
 };

package/components/assets/AssetsUploadMenu.tsx

@@ -2,15 +2,19 @@ import * as React from 'react';
 import { assets as copy } from '../../constants/copy';
 import CheckboxField from '../checkbox-field/CheckboxField';
 import DeterminateLoader from '../determinate-loader/DeterminateLoader';
-import { toggleAutoTag, toggleAssignToStory } from '../../redux/actions/asset-uploads';
+import { toggleAutoTag, toggleAssignToStory, cancelAssetUpload } from '../../redux/actions/asset-uploads';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import {ICON_TIMES} from '../../constants/icons';
+import Button from '../button/Button';
+import {IImposiumAPI} from '../../services/API';
 
 interface IAssetsUploadMenuProps {
     assetUploads : any;
     api : any;
     toggleAutoTag : (toggle : boolean) => any;
     toggleAssignToStory : (toggle : boolean) => any;
+    cancelAssetUpload : (fileName : string, api : IImposiumAPI) => any;
 }
 
 class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, {}> {
@@ -18,21 +22,36 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, {}> {
         super(props);
     }
 
+   private handleCancelAssetUpload(fileName : string) {
+        const {api} = this.props;
+        this.props.cancelAssetUpload(fileName, api);
+    }
+
     public render = () : JSX.Element => {
         const {assetUploads: {uploads, autoTag, assignToStory}} = this.props;
-
         let uploadsListInner : JSX.Element[] | JSX.Element;
-
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u : any) => {
                 const {filename, percent} = u;
                 const loader : JSX.Element = (percent < 100)
                     ? (<DeterminateLoader progress = {u.percent} />)
                     : (<span>{copy.uploads.preparePhase}</span>);
+                const closeButton : JSX.Element = (percent < 100) && (
+                    <Button
+                        key = 'btn-cancel'
+                        onClick = {() => this.handleCancelAssetUpload(filename)}
+                        style = 'subtle'
+                    >
+                        {ICON_TIMES}
+                    </Button>
+                );
 
                 return (
                     <div className = 'ongoing-upload' key = {filename}>
-                        <span className = 'upload-filename'>{filename}</span>
+                        <div className='ongoing-upload-inner'>
+                            <div className = 'upload-filename'>{filename}</div>
+                            {closeButton}
+                        </div>
                         {loader}
                     </div>
                 );
@@ -66,7 +85,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, {}> {
 }
 
 const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({toggleAutoTag, toggleAssignToStory}, dispatch);
+    return bindActionCreators({toggleAutoTag, toggleAssignToStory, cancelAssetUpload}, dispatch);
 };
 
 const mapStateToProps = (state) : any => {

package/components/publish-wizard/PublishWizard.tsx

@@ -0,0 +1,477 @@
+import * as React from 'react';
+import Button from '../button/Button';
+import SelectField from '../select-field/SelectField';
+import HRule from '../h-rule/HRule';
+import {ICON_EMAIL, ICON_GLOBE, ICON_HUBSPOT, ICON_PROJECT_DIAGRAM} from '../../constants/icons';
+import {IImposiumAPI} from '../../services/API';
+import * as copy from '../../constants/copy';
+import {ASSET_TYPES} from '../../constants/assets';
+import HubSpotFlow from './publish/HubSpotFlow';
+import APIIntegration from './publish/APIIntegration';
+import WebpageHosted from './publish/WebpageHosted';
+import EmailWorkflow from './publish/EmailWorkflow';
+import PublishStatusIndicator from './publish/PublishStatusIndicator';
+import {bindActionCreators} from 'redux';
+import {publishVersion} from '../../redux/actions/publish';
+import {connect} from 'react-redux';
+
+interface IPublishWizardProps {
+    story : any;
+    project : any;
+    updateEditorConfig(c) : void;
+    editor : any;
+    updateScene(d) : void;
+    editStory(s) : void;
+    checkStoryForErrors() : any;
+    addViewer(c : any) : void;
+    exportExperiences : () => void;
+    publishVersion : (api : IImposiumAPI, sId : string) => any;
+    batchesList : any;
+    publishing : boolean;
+    onClose() : any;
+    api : IImposiumAPI;
+    handleError(e) : void;
+    createFreshBatch : (e : string) => any;
+    getBatches : () => any;
+    getBatchExport : (batchId : string) => any;
+    importBatchFromCsv : (storyId : string, batchId : string, batchName : string, csvFile : File, accessKey : string, compId : string) => any;
+    handleNotification? : (n) => void;
+    batchJobs : any;
+    renderBatch : (batchId : string, batchName ? : string) => any;
+}
+
+export interface ICredential {
+    name : string;
+    access_key_id : string;
+    secret_access_key : string;
+    user_id : string;
+}
+
+interface IPublishWizardState {
+    compositions : any[];
+    selectedComposition : any;
+    newPublish : boolean;
+    queryRunning : boolean;
+    status : string;
+    publishMessage : string;
+    screenIndex : number;
+    accessKey : string;
+    credentials : ICredential[];
+    done : boolean;
+}
+
+interface IBigButtonProps {
+    label? : any;
+    distributionOptions? : any[];
+    key? : any;
+    selected? : boolean;
+    disabled? : boolean;
+    onClick? : (...args) => any;
+    style? : any;
+}
+
+interface IBigLinkProps {
+    label : any;
+    link : string;
+}
+
+class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWizardState> {
+    private readonly hiddenFileInputRef : any;
+    constructor(props) {
+        super(props);
+        this.state = {
+            compositions: [],
+            selectedComposition: null,
+            newPublish: true,
+            status: '',
+            queryRunning: true,
+            publishMessage: '',
+            screenIndex: 0,
+            accessKey: null,
+            credentials: [],
+            done: false,
+        };
+        this.hiddenFileInputRef = React.createRef();
+    }
+
+    public componentDidMount() {
+
+        const {story, api, handleError} = this.props;
+
+        // Pull in all of the access creds for the composition dropdown
+        api.getAssets({type: ASSET_TYPES.VIDEO_COMPOSITION}, story.id).then((res) => {
+            this.setState({
+                compositions: res.assets
+            });
+        }).catch((credsError) => {
+            handleError(copy.integration.errorPullingComps);
+        });
+
+        // Pull in all of the access creds for the credentials dropdown
+        api.getAccssCredentials().then((creds) => {
+
+            // if the user has no credentials, create some "default" credentials
+            if (creds.length === 0) {
+                api.createAccessCredentials('default').then((resp) => {
+                    const { credentials } = this.state;
+                    const newCreds = [...credentials, ...[resp]];
+                    this.setState({credentials: newCreds, accessKey: resp[0].access_key_id});
+                });
+            } else {
+                this.setState({
+                    credentials: creds,
+                    accessKey: creds[0].access_key_id
+                });
+            }
+
+        }).catch((credsError) => {
+            handleError(copy.integration.errorGettingCreds);
+        });
+    }
+
+    private checkStatus() {
+
+        const {project: {storyId}, api, handleError} = this.props;
+
+        if (storyId) {
+
+            this.setState({
+                queryRunning: true,
+                newPublish: false,
+                status: ''
+            }, () => {
+
+                api.getStoryStatus(storyId).then((resStatus) => {
+
+                    if (resStatus) {
+
+                        if (resStatus.publishing) {
+
+                            this.setState({status: copy.header.publishing}, () => {
+                                this.pollStatus(resStatus.job_id);
+                            });
+
+                        }
+                    } else {
+                        this.setState({queryRunning: false, status: copy.header.working});
+                    }
+
+                }).catch((e) => {
+                    this.setState({queryRunning: false}, () => {
+                        if (e.response.status === 404) {
+                            this.setState({queryRunning: false, status: copy.header.working});
+                        } else {
+                            handleError(copy.header.statusError);
+                            this.setState({
+                                status: '',
+                            });
+                        }
+                    });
+                });
+            });
+        }
+    }
+
+    private pollStatus(jobId) {
+        const {api, handleError} = this.props;
+        api.pollJob(jobId).then(() => {
+            this.checkStatus();
+        }).catch(() => {
+            handleError(copy.header.publishPollError);
+            this.setState({
+                status: '',
+            });
+        });
+    }
+
+    public onSelectOption = (index)  => {
+        this.setState({screenIndex: index, done: false});
+    }
+
+    public onCompositionChange = (e) => {
+        this.setState({selectedComposition: e});
+    }
+
+    public onCredentialsChange = (e) => {
+        this.setState({accessKey: e});
+    }
+
+    private handlePublish() {
+
+        const {story: {id}, api, handleError} = this.props;
+        this.props.publishVersion(api, id).catch((e) => {
+            handleError(e);
+        });
+        this.setState({screenIndex: 1});
+    }
+
+    private renderLowerButtons() {
+
+        const {screenIndex, done} = this.state;
+        const {publishing} = this.props;
+
+        const lowerButtons = [];
+
+        // publish and skip buttons
+        if (screenIndex === 0) {
+
+            // publish
+            lowerButtons.push(<Button
+                tooltip = {copy.publish.btnPublish}
+                size={'large'}
+                disabled = {publishing}
+                key = 'btn-publish'
+                onClick={() => this.handlePublish()}
+                color = 'primary'>
+                {copy.publish.btnPublish}
+            </Button>);
+
+            // skip publish
+            lowerButtons.push(<Button
+                tooltip = {copy.publish.btnSkip}
+                key = 'btn-skip'
+                size={'large'}
+                onClick={() => this.setState({screenIndex: 1})}
+                color = 'primary'>
+                {copy.publish.btnSkip}
+            </Button>);
+        } else {
+            // display button when emailworkflow downloading state is true to close the modal
+            if (done) {
+                lowerButtons.push(<Button
+                    tooltip = {copy.publish.btnFinished}
+                    size={'large'}
+                    key = 'btn-finish'
+                    onClick={() => this.props.onClose()}
+                    color = 'primary'>
+                    {copy.publish.btnFinished}
+                </Button>);
+            }
+            const backIndex = (screenIndex === 1) ? 0 : 1;
+            // back button
+            lowerButtons.push(<Button
+                tooltip = {copy.publish.btnBack}
+                size={'large'}
+                key = 'btn-back'
+                onClick={() => this.setState({screenIndex: backIndex})}
+                color = 'primary'>
+                {copy.publish.btnBack}
+            </Button>);
+        }
+
+        return lowerButtons;
+    }
+
+    private renderPublish() {
+        return <div>
+            <h2>{copy.publish.publishStepTitle}</h2>
+            <HRule/>
+            <p>{copy.publish.publishStepDesc}</p>
+        </div>;
+    }
+
+    private renderDistributionOptions() {
+
+        const compOpts = [];
+        const credOpts = [];
+        const {compositions, selectedComposition, credentials, accessKey} = this.state;
+
+        for (const comp of compositions) {
+            compOpts.push({
+                value: comp.id,
+                label: comp.name
+            });
+        }
+
+        for (const cred of credentials) {
+            credOpts.push({
+                value: cred.access_key_id,
+                label: cred.name
+            });
+        }
+
+        const  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)
+            },
+        ];
+
+        return (
+            <div>
+                <h2>{copy.publish.distributeStepTitle}</h2>
+                <HRule/>
+                <p>{copy.publish.distributeStepDesc}</p>
+                <HRule/>
+                <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}/>
+
+                {distributionOptions?.map((option, index) => {
+                    return (
+                        <BigButton
+                            key={index}
+                            label={option.label}
+                            onClick={option.onClick}
+                        />
+                    );
+                })}
+           </div>
+        );
+    }
+
+    private onDoneHandler = () => {
+        this.setState({done: true});
+    }
+
+    public render() {
+        const {
+            story,
+            api,
+            handleError,
+            createFreshBatch,
+            getBatches,
+            getBatchExport,
+            importBatchFromCsv,
+            handleNotification,
+            renderBatch,
+            batchJobs
+        } = this.props;
+
+        const {screenIndex, status, selectedComposition, compositions, accessKey} = this.state;
+        const compName = compositions.find((comp) => {
+            return comp.id === selectedComposition;
+        })?.name || '';
+
+        return (
+            <div className='publish-wizard'>
+                <div className = 'publish-wizard-header'>
+                    {copy.publish.publishTitle}
+                    <PublishStatusIndicator api={api}/>
+                </div>
+                {/*<PaneErrorBoundry>*/}
+                <div>
+                    {screenIndex === 0 && this.renderPublish()}
+                    {screenIndex === 1 && this.renderDistributionOptions()}
+                    {screenIndex === 2 && <WebpageHosted story={story} compositionId={selectedComposition} accessKey={accessKey}  />}
+                    {screenIndex === 3 &&
+                    <EmailWorkflow
+                        api={api}
+                        story={story}
+                        onDone={this.onDoneHandler}
+                        status={status}
+                        renderBatch={renderBatch}
+                        batchJobs={batchJobs}
+                        accessKey = {accessKey}
+                        compositionId = {selectedComposition}
+                        compositionName = {compName}
+                        handleError={handleError}
+                        createFreshBatch={createFreshBatch}
+                        getBatches={getBatches}
+                        getBatchExport={getBatchExport}
+                        importBatchFromCsv={importBatchFromCsv}
+                    />}
+                    {
+                        screenIndex === 5 &&
+                        <HubSpotFlow
+                            handleError={handleError}
+                            status={status}
+                            accessKey = {accessKey}
+                            story={story}
+                            handleNotification={handleNotification}
+                            compositionId = {selectedComposition}
+                    />
+                    }
+                    {screenIndex === 6 && <APIIntegration/>}
+                    {screenIndex === 7 &&
+                    <EmailWorkflow
+                        api={api}
+                        renderBatch={renderBatch}
+                        batchJobs={batchJobs}
+                        story={story}
+                        onDone={this.onDoneHandler}
+                        status={status}
+                        accessKey = {accessKey}
+                        compositionId = {selectedComposition}
+                        compositionName = {compName}
+                        handleError={handleError}
+                        createFreshBatch={createFreshBatch}
+                        getBatches={getBatches}
+                        getBatchExport={getBatchExport}
+                        importBatchFromCsv={importBatchFromCsv}
+                    />}
+                    <br/>
+                    <HRule/>
+                    <div className = 'lower-buttons'>{this.renderLowerButtons()}</div>
+                </div>
+                {/*</PaneErrorBoundry>*/}
+            </div>
+        );
+    }
+}
+
+const mapDispatchToProps = (dispatch) => {
+    return bindActionCreators({publishVersion}, dispatch);
+};
+
+export default connect (null, mapDispatchToProps)(PublishWizard);
+
+export const BigButton : React.FC<IBigButtonProps> = (p) => (
+    <div className = {`big-link ${(p.disabled) ? 'disabled' : ''}`} onClick = {() => p.onClick()} style={p.style}>
+        <h1 style={{color: p.selected && '#2d8ceb' }}>{p.label}</h1>
+    </div>
+);
+
+export const TabContent = ({children}) =>  <div className = 'tab-content'>
+    <div className = 'settings-tab'>
+        <div className='integration-details'>
+            {children}
+        </div>
+    </div>
+</div>;
+
+export const TabHeader = (props : {title : string, className? : StyleSheet | any}) => {
+    const {className, title} = props;
+    return (
+        <div className = 'tab-header'>
+            <div className={className ? className : 'tab-header-option active'}>
+                {title}
+            </div>
+        </div>
+    );
+};
+
+export const WizardError = (props : {title : string, description : string}) => {
+    const {description, title} = props;
+    return <div className = 'publish-wizard-error'>
+        <h3>{title}</h3>
+        <p>{description}</p>
+    </div>;
+};
+
+export const BigLink : React.FC<IBigLinkProps> = (p : IBigLinkProps) => {
+    return <a className = 'big-link' target = '_blank' href = {p.link}>
+        <h1>{p.label}</h1>
+    </a>;
+};

package/components/publish-wizard/publish/APIIntegration.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import HRule from '../../h-rule/HRule';
+import {BigLink} from '../PublishWizard';
+import {documentationLinks} from './WebpageHosted';
+import * as copy from '../../../constants/copy';
+
+class APIIntegration extends  React.PureComponent {
+    public render() {
+        return (
+            <div>
+                <h2>{copy.integration.documentation}</h2>
+                <HRule/>
+                <p>{copy.integration.docParagraph}</p>
+                {documentationLinks?.map((link) =>   {
+                    return (
+                        <BigLink
+                            key={link.key}
+                            label = {link.label}
+                            link = {link.link}
+                        />
+                    );
+                })}
+            </div>
+        );
+    }
+}
+
+export default APIIntegration;