@imposium-hub/components 1.45.4 → 1.46.0

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

@@ -2,87 +2,102 @@ import * as React from 'react';
 import Button from '../button/Button';
 import SelectField from '../select-field/SelectField';
 import HRule from '../h-rule/HRule';
-import {ICON_DOWNLOAD, ICON_EMAIL, ICON_GLOBE, ICON_HUBSPOT, ICON_PROJECT_DIAGRAM} from '../../constants/icons';
-import {IImposiumAPI} from '../../services/API';
+import {
+    ICON_DOWNLOAD,
+    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 { 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';
+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, addEmbed : boolean, addMedia : boolean) => any;
-    handleNotification? : (n) => void;
-    batchJobs : any;
-    activeComposition : string;
-    renderBatch : (batchId : string, batchName ? : string) => any;
-    publishData : any;
+    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,
+        addEmbed: boolean,
+        addMedia: boolean
+    ) => any;
+    handleNotification?: (n) => void;
+    batchJobs: any;
+    activeComposition: string;
+    renderBatch: (batchId: string, batchName?: string) => any;
+    publishData: any;
 }
 
 export interface ICredential {
-    name : string;
-    access_key_id : string;
-    secret_access_key : string;
-    user_id : string;
+    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;
-    error : boolean;
-    next : boolean;
-    nextStep : boolean;
+    compositions: any[];
+    selectedComposition: any;
+    newPublish: boolean;
+    queryRunning: boolean;
+    status: string;
+    publishMessage: string;
+    screenIndex: number;
+    accessKey: string;
+    credentials: ICredential[];
+    done: boolean;
+    error: boolean;
+    next: boolean;
+    nextStep: boolean;
 }
 
 interface IBigButtonProps {
-    label? : any;
-    distributionOptions? : any[];
-    key? : any;
-    selected? : boolean;
-    disabled? : boolean;
-    onClick? : (...args) => any;
-    style? : any;
+    label?: any;
+    distributionOptions?: any[];
+    key?: any;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: (...args) => any;
+    style?: any;
 }
 
 interface IBigLinkProps {
-    label : any;
-    link : string;
+    label: any;
+    link: string;
 }
 
 class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWizardState> {
-    public emailWorkflow : any;
-    private readonly hiddenFileInputRef : any;
+    public emailWorkflow: any;
+    private readonly hiddenFileInputRef: any;
     constructor(props) {
         super(props);
         this.state = {
@@ -98,132 +113,143 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             done: false,
             error: false,
             next: false,
-            nextStep: false,
+            nextStep: false
         };
         this.emailWorkflow = React.createRef();
         this.hiddenFileInputRef = React.createRef();
     }
 
     public componentDidMount() {
-
-        const {story, api, handleError, activeComposition} = this.props;
+        const { story, api, handleError, activeComposition } = this.props;
 
         // Pull in all of the access creds for the composition dropdown
-        api.getAssets({type: ASSET_TYPES.VIDEO_COMPOSITION}, story.id).then((res) => {
-            const firstCompId = (res.assets[0]) ? res.assets[0].id : null;
-            const compId = (activeComposition) ? activeComposition : firstCompId;
-            this.setState({
-                compositions: res.assets,
-                selectedComposition: compId
-            });
-        }).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 {
+        api.getAssets({ type: ASSET_TYPES.VIDEO_COMPOSITION }, story.id)
+            .then((res) => {
+                const firstCompId = res.assets[0] ? res.assets[0].id : null;
+                const compId = activeComposition ? activeComposition : firstCompId;
                 this.setState({
-                    credentials: creds,
-                    accessKey: creds[0].access_key_id
+                    compositions: res.assets,
+                    selectedComposition: compId
                 });
-            }
+            })
+            .catch((credsError) => {
+                handleError(copy.integration.errorPullingComps);
+            });
 
-        }).catch((credsError) => {
-            handleError(copy.integration.errorGettingCreds);
-        });
+        // 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;
+        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: '',
+            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: '',
+        const { api, handleError } = this.props;
+        api.pollJob(jobId)
+            .then(() => {
+                this.checkStatus();
+            })
+            .catch(() => {
+                handleError(copy.header.publishPollError);
+                this.setState({
+                    status: ''
+                });
             });
-        });
     }
 
-    public onSelectOption = (index)  => {
-        const {publishing} = this.props.publishData;
+    public onSelectOption = (index) => {
+        const { publishing } = this.props.publishData;
         if (publishing) {
-            alert('WARNING: Your publish is still in progress, your changes will not be present in the rendered videos until the publish is complete');
+            alert(
+                'WARNING: Your publish is still in progress, your changes will not be present in the rendered videos until the publish is complete'
+            );
         }
-        this.setState({screenIndex: index, done: false});
-    }
+        this.setState({ screenIndex: index, done: false });
+    };
 
     public onCompositionChange = (e) => {
-        this.setState({selectedComposition: e});
-    }
+        this.setState({ selectedComposition: e });
+    };
 
     public onCredentialsChange = (e) => {
-        this.setState({accessKey: e});
-    }
+        this.setState({ accessKey: e });
+    };
 
     private handlePublish() {
-
-        const {story: {id}, api, handleError} = this.props;
+        const {
+            story: { id },
+            api,
+            handleError
+        } = this.props;
         this.props.publishVersion(api, id).catch((e) => {
             handleError(e);
         });
-        this.setState({screenIndex: 1});
+        this.setState({ screenIndex: 1 });
     }
 
     private renderLowerButtons() {
-
         const { screenIndex, done, error, next } = this.state;
         const { publishing } = this.props;
 
@@ -231,69 +257,80 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
         // 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>);
+            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>);
+            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 || error) {
-                lowerButtons.push(<Button
-                    tooltip = { error ? copy.publish.btnCancel : copy.publish.btnFinished }
-                    size={'large'}
-                    key = 'btn-finish'
-                    onClick={() => this.props.onClose()}
-                    color = 'primary'>
-                    { error ? copy.publish.btnCancel : copy.publish.btnFinished }
-                </Button>);
+                lowerButtons.push(
+                    <Button
+                        tooltip={error ? copy.publish.btnCancel : copy.publish.btnFinished}
+                        size={'large'}
+                        key='btn-finish'
+                        onClick={() => this.props.onClose()}
+                        color='primary'>
+                        {error ? copy.publish.btnCancel : copy.publish.btnFinished}
+                    </Button>
+                );
             }
 
-            const backIndex = (screenIndex === 1) ? 0 : 1;
+            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,
-                    next: false,
-                    nextStep: false,
-                    error: false,
-                    done: false,
-                })}
-                color = 'primary'>
-                {copy.publish.btnBack}
-            </Button>);
+            lowerButtons.push(
+                <Button
+                    tooltip={copy.publish.btnBack}
+                    size={'large'}
+                    key='btn-back'
+                    onClick={() =>
+                        this.setState({
+                            screenIndex: backIndex,
+                            next: false,
+                            nextStep: false,
+                            error: false,
+                            done: false
+                        })
+                    }
+                    color='primary'>
+                    {copy.publish.btnBack}
+                </Button>
+            );
 
             // reimport after column align
-            if ( error ) {
-                lowerButtons.push(<Button
-                    tooltip = {copy.publish.btnNext}
-                    size={'large'}
-                    key = 'btn-next'
-                    color = 'primary'
-                    disabled = {!next}
-                    onClick={() => this.nextClickHandler()}>
-                    {copy.publish.btnNext}
-                </Button>);
+            if (error) {
+                lowerButtons.push(
+                    <Button
+                        tooltip={copy.publish.btnNext}
+                        size={'large'}
+                        key='btn-next'
+                        color='primary'
+                        disabled={!next}
+                        onClick={() => this.nextClickHandler()}>
+                        {copy.publish.btnNext}
+                    </Button>
+                );
             }
         }
 
@@ -301,18 +338,19 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     }
 
     private renderPublish() {
-        return <div>
-            <h2>{copy.publish.publishStepTitle}</h2>
-            <HRule/>
-            <p>{copy.publish.publishStepDesc}</p>
-        </div>;
+        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;
+        const { compositions, selectedComposition, credentials, accessKey } = this.state;
 
         for (const comp of compositions) {
             compOpts.push({
@@ -328,89 +366,110 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             });
         }
 
-        const  distributionOptions = [
+        const distributionOptions = [
             {
-                label : <span>{ICON_GLOBE}&nbsp;{copy.publish.btnWebsite}</span>,
+                label: (
+                    <span>
+                        {ICON_GLOBE}&nbsp;{copy.publish.btnWebsite}
+                    </span>
+                ),
                 onClick: (e) => this.onSelectOption(2)
             },
             {
-                label : <span>{ICON_EMAIL}&nbsp;{copy.publish.btnEmail}</span>,
+                label: (
+                    <span>
+                        {ICON_EMAIL}&nbsp;{copy.publish.btnEmail}
+                    </span>
+                ),
                 onClick: (e) => this.onSelectOption(3)
             },
             {
-                label : <span>{ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}</span>,
+                label: (
+                    <span>
+                        {ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}
+                    </span>
+                ),
                 onClick: (e) => this.onSelectOption(5)
             },
             {
-                label : <span>{ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}</span>,
+                label: (
+                    <span>
+                        {ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}
+                    </span>
+                ),
                 onClick: (e) => this.onSelectOption(6)
             },
             {
-                label : <span>{ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}</span>,
+                label: (
+                    <span>
+                        {ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}
+                    </span>
+                ),
                 onClick: (e) => this.onSelectOption(7)
-            },
+            }
         ];
 
         return (
             <div>
                 <h2>{copy.publish.distributeStepTitle}</h2>
-                <HRule/>
+                <HRule />
                 <p>{copy.publish.distributeStepDesc}</p>
-                <HRule/>
+                <HRule />
                 {!this.state.selectedComposition && (
                     <p className={'text-danger'}>{copy.publish.noCompErrorDesc}</p>
                 )}
-                <div style={{marginTop: '10px'}}>
-                <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, index) => {
-                        return (
-                            <BigButton
-                                key={index}
-                                disabled={!this.state.selectedComposition}
-                                label={option.label}
-                                onClick={option.onClick}
-                            />
-                        );
-                    })}
-                </div>
+                <div style={{ marginTop: '10px' }}>
+                    <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, index) => {
+                            return (
+                                <BigButton
+                                    key={index}
+                                    disabled={!this.state.selectedComposition}
+                                    label={option.label}
+                                    onClick={option.onClick}
+                                />
+                            );
+                        })}
+                    </div>
                 </div>
-           </div>
+            </div>
         );
     }
 
     private nextClickHandler = () => {
-
-        this.setState({nextStep: true, error: false});
+        this.setState({ nextStep: true, error: false });
 
         if (this.state.screenIndex === 7) {
             this.emailWorkflow.current.getWrappedInstance().proceedWithExport();
         }
-    }
+    };
 
     private onDoneHandler = () => {
         this.setState({ done: true, error: false });
-    }
+    };
 
     private onErrorHandler = () => {
-        this.setState({error: !this.state.error});
-    }
+        this.setState({ error: !this.state.error });
+    };
 
-    private onNextHandler = (val : boolean) => {
-        this.setState({next: val});
-    }
+    private onNextHandler = (val: boolean) => {
+        this.setState({ next: val });
+    };
 
     public render() {
         const {
@@ -427,63 +486,78 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             batchJobs
         } = this.props;
 
-        const {screenIndex, status, selectedComposition, compositions, accessKey, error, nextStep} = this.state;
-        const compName = compositions.find((comp) => {
-            return comp.id === selectedComposition;
-        })?.name || '';
-
-        const variables = (story) ? story.acts[project.actId].inventory : {};
+        const {
+            screenIndex,
+            status,
+            selectedComposition,
+            compositions,
+            accessKey,
+            error,
+            nextStep
+        } = this.state;
+        const compName =
+            compositions.find((comp) => {
+                return comp.id === selectedComposition;
+            })?.name || '';
+
+        const variables = story ? story.acts[project.actId].inventory : {};
 
         return (
             <div className='publish-wizard'>
-                <div className = 'publish-wizard-header'>
+                <div className='publish-wizard-header'>
                     {copy.publish.publishTitle}
-                    <PublishStatusIndicator api={api}/>
+                    <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 || screenIndex === 7) &&
-                    <EmailWorkflow
-                        isExport = {screenIndex === 7}
-                        api={api}
-                        story={story}
-                        variables= {variables}
-                        onDone={this.onDoneHandler}
-                        onError={this.onErrorHandler}
-                        onNext={this.onNextHandler}
-                        error={error}
-                        status={status}
-                        renderBatch={renderBatch}
-                        batchJobs={batchJobs}
-                        accessKey = {accessKey}
-                        compositionId = {selectedComposition}
-                        compositionName = {compName}
-                        handleError={handleError}
-                        createFreshBatch={createFreshBatch}
-                        getBatches={getBatches}
-                        getBatchExport={getBatchExport}
-                        importBatchFromCsv={importBatchFromCsv}
-                        next={nextStep}
-                        ref={this.emailWorkflow}
-                    />}
-                    {
-                        screenIndex === 5 &&
+                    {screenIndex === 2 && (
+                        <WebpageHosted
+                            story={story}
+                            compositionId={selectedComposition}
+                            accessKey={accessKey}
+                        />
+                    )}
+                    {(screenIndex === 3 || screenIndex === 7) && (
+                        <EmailWorkflow
+                            isExport={screenIndex === 7}
+                            api={api}
+                            story={story}
+                            variables={variables}
+                            onDone={this.onDoneHandler}
+                            onError={this.onErrorHandler}
+                            onNext={this.onNextHandler}
+                            error={error}
+                            status={status}
+                            renderBatch={renderBatch}
+                            batchJobs={batchJobs}
+                            accessKey={accessKey}
+                            compositionId={selectedComposition}
+                            compositionName={compName}
+                            handleError={handleError}
+                            createFreshBatch={createFreshBatch}
+                            getBatches={getBatches}
+                            getBatchExport={getBatchExport}
+                            importBatchFromCsv={importBatchFromCsv}
+                            next={nextStep}
+                            ref={this.emailWorkflow}
+                        />
+                    )}
+                    {screenIndex === 5 && (
                         <HubSpotFlow
                             handleError={handleError}
                             status={status}
-                            accessKey = {accessKey}
+                            accessKey={accessKey}
                             story={story}
                             handleNotification={handleNotification}
-                            compositionId = {selectedComposition}
-                    />
-                    }
-                    {screenIndex === 6 && <APIIntegration/>}
-                    <br/>
-                    <HRule/>
-                    <div className = 'lower-buttons'>{this.renderLowerButtons()}</div>
+                            compositionId={selectedComposition}
+                        />
+                    )}
+                    {screenIndex === 6 && <APIIntegration />}
+                    <br />
+                    <HRule />
+                    <div className='lower-buttons'>{this.renderLowerButtons()}</div>
                 </div>
                 {/* </PaneErrorBoundry>*/}
             </div>
@@ -496,46 +570,51 @@ const mapStateToProps = (state) => ({
 });
 
 const mapDispatchToProps = (dispatch) => {
-    return bindActionCreators({publishVersion}, dispatch);
+    return bindActionCreators({ publishVersion }, dispatch);
 };
 
-export default connect (mapStateToProps, mapDispatchToProps)(PublishWizard);
+export default connect(mapStateToProps, mapDispatchToProps)(PublishWizard);
 
-export const BigButton : React.FC<IBigButtonProps> = (p) => (
-    <div className = {`big-link ${(p.disabled) && 'disabled'}`} onClick = {() => p.onClick()} style={p.style}>
+export const BigButton: React.FC<IBigButtonProps> = (p) => (
+    <div
+        className={`big-link ${p.disabled && 'disabled'}`}
+        onClick={() => p.onClick()}
+        style={p.style}>
         <h1>{p.label}</h1>
     </div>
 );
 
-export const TabContent = ({children}) =>  <div className = 'tab-content'>
-    <div className = 'settings-tab'>
-        <div className='integration-details'>
-            {children}
+export const TabContent = ({ children }) => (
+    <div className='tab-content'>
+        <div className='settings-tab'>
+            <div className='integration-details'>{children}</div>
         </div>
     </div>
-</div>;
+);
 
-export const TabHeader = (props : {title : string, className? : StyleSheet | any}) => {
-    const {className, title} = props;
+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 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 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>;
+export const BigLink: React.FC<IBigLinkProps> = (p: IBigLinkProps) => {
+    return (
+        <a className='big-link' target='_blank' href={p.link}>
+            <h1>{p.label}</h1>
+        </a>
+    );
 };