@imposium-hub/components 1.42.4 → 1.43.0

package/Entry.ts

@@ -101,6 +101,8 @@ import assetTags from './redux/reducers/asset-tags';
 import assetUploads from './redux/reducers/asset-uploads';
 import selectedAssets from './redux/reducers/selected-assets';
 import assetActions from './redux/actions/asset-list';
+import activeBatch from './redux/reducers/active-batch';
+import batchActions from './redux/actions/active-batch';
 /*
     Statics / Services
  */
@@ -222,6 +224,9 @@ export {
     addAssetTagToList,
     assetTags,
     assetActions,
+    
+    activeBatch,
+    batchActions,
 
     AuthService,
     IIdentity,

package/components/data-table/DataTable.tsx

@@ -109,7 +109,6 @@ let doubleClickTimeout : number;
 const DataTable : React.FC<IDataTableProps> = (props : IDataTableProps) => {
     const wrapperRef = React.useRef(null);
     const activeRowRef = React.useRef(null);
-
     const [didMount, setDidMount] = React.useState(false);
     const [data, setData] = React.useState([]);
     const [columns, setColumns] = React.useState([]);

package/components/publish-wizard/PublishWizard.tsx

@@ -60,6 +60,9 @@ interface IPublishWizardState {
     accessKey : string;
     credentials : ICredential[];
     done : boolean;
+    error : boolean;
+    next : boolean;
+    nextStep : boolean;
 }
 
 interface IBigButtonProps {
@@ -78,6 +81,7 @@ interface IBigLinkProps {
 }
 
 class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWizardState> {
+    public emailWorkflow : any;
     private readonly hiddenFileInputRef : any;
     constructor(props) {
         super(props);
@@ -92,7 +96,11 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             accessKey: null,
             credentials: [],
             done: false,
+            error: false,
+            next: false,
+            nextStep: false,
         };
+        this.emailWorkflow = React.createRef();
         this.hiddenFileInputRef = React.createRef();
     }
 
@@ -216,8 +224,8 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
     private renderLowerButtons() {
 
-        const {screenIndex, done} = this.state;
-        const {publishing} = this.props;
+        const { screenIndex, done, error, next } = this.state;
+        const { publishing } = this.props;
 
         const lowerButtons = [];
 
@@ -246,26 +254,47 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             </Button>);
         } else {
             // display button when emailworkflow downloading state is true to close the modal
-            if (done) {
+            if (done || error) {
                 lowerButtons.push(<Button
-                    tooltip = {copy.publish.btnFinished}
+                    tooltip = { error ? copy.publish.btnCancel : copy.publish.btnFinished }
                     size={'large'}
                     key = 'btn-finish'
                     onClick={() => this.props.onClose()}
                     color = 'primary'>
-                    {copy.publish.btnFinished}
+                    { error ? copy.publish.btnCancel : 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})}
+                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>);
+            }
         }
 
         return lowerButtons;
@@ -362,13 +391,30 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         );
     }
 
+    private nextClickHandler = () => {
+        this.setState({nextStep: true});
+
+        if (this.state.screenIndex === 7) {
+            this.emailWorkflow.current.getWrappedInstance().proceedWithExport();
+        }
+    }
+
     private onDoneHandler = () => {
-        this.setState({done: true});
+        this.setState({ done: true, error: false });
+    }
+
+    private onErrorHandler = () => {
+        this.setState({error: !this.state.error});
+    }
+
+    private onNextHandler = (val : boolean) => {
+        this.setState({next: val});
     }
 
     public render() {
         const {
             story,
+            project,
             api,
             handleError,
             createFreshBatch,
@@ -380,11 +426,13 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             batchJobs
         } = this.props;
 
-        const {screenIndex, status, selectedComposition, compositions, accessKey} = this.state;
+        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'>
@@ -401,7 +449,11 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                         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}
@@ -413,6 +465,8 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                         getBatches={getBatches}
                         getBatchExport={getBatchExport}
                         importBatchFromCsv={importBatchFromCsv}
+                        next={nextStep}
+                        ref={this.emailWorkflow}
                     />}
                     {
                         screenIndex === 5 &&

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

@@ -7,9 +7,14 @@ import { ExportToCsv } from 'export-to-csv';
 import { ICON_DOWNLOAD, ICON_UPLOAD } from '../../../constants/icons';
 import * as moment from 'moment';
 import { IImposiumAPI } from '../../../services/API';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import SelectField from '../../select-field/SelectField';
+import { updateAssociation, getBatch, setPage } from '../../../redux/actions/active-batch';
 
 interface IEmailWorkflowProps {
     story : any;
+    variables : any;
     createFreshBatch : (e : string) => any;
     getBatches : () => any;
     getBatchExport : (batchId : string) => any;
@@ -20,10 +25,19 @@ interface IEmailWorkflowProps {
     compositionId : string;
     compositionName : string;
     onDone : () => void;
+    onError : () => void;
+    error : boolean;
     api : IImposiumAPI;
     handleError : (e) => any;
     batchJobs : any;
     isExport ? : boolean;
+    updateAssociation : (api : IImposiumAPI, colIndex : number, newType : string, newAssociation : string) => any;
+    getBatch : (api : IImposiumAPI) => any;
+    activeBatch : any;
+    batchesList : any;
+    setPage : (page : number) => any;
+    onNext : ( val : boolean ) => void;
+    next : boolean;
 }
 
 interface IEmailWorkflowState {
@@ -32,6 +46,10 @@ interface IEmailWorkflowState {
     uploading : boolean;
     downloading : boolean;
     renderedBatch : boolean;
+    inventory : any[];
+    inventoryKeys : string[];
+    missingColumns : string;
+    isMissing : boolean;
 }
 
 class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkflowState> {
@@ -45,8 +63,9 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         showTitle: false,
         useTextFile: false,
         useBom: false,
-        useKeysAsHeaders: true,
+        useKeysAsHeaders: true
     };
+
     constructor(props) {
         super(props);
         this.state = {
@@ -55,14 +74,20 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             downloading : false,
             selectedBatchId: '',
             renderedBatch: false,
+            inventory: [],
+            inventoryKeys: [],
+            missingColumns: '',
+            isMissing: false,
         };
         this.hiddenFileInputRef = React.createRef();
     }
 
-    public downloadSampleCsv() {
+    public componentDidMount() : void {
+        this.getInventory();
+    }
 
-        const {name} = this.props.story;
-        const {acts} = this.props.story;
+    private getInventory() {
+        const { acts } = this.props.story;
         const actsKeys : string[] = Object.keys(acts);
         let inventory : any = {};
 
@@ -71,6 +96,16 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         });
 
         const inventoryKeys : string[] = Object.keys(inventory).sort();
+
+        this.setState({inventory});
+        this.setState({inventoryKeys});
+    }
+
+    public downloadSampleCsv() {
+
+        const { name } = this.props.story;
+        const { inventory, inventoryKeys } = this.state;
+
         const maskConfig : any[] = inventoryKeys.map((currKey : string) => ({
             id: currKey,
             name: inventory[currKey].name,
@@ -124,23 +159,48 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             });
     }
 
+    private getBatch = () => {
+        const { api } = this.props;
+        this.props.setPage(1);
+        this.props.getBatch(api);
+    }
+
+    public proceedWithExport() {
+        const { renderBatch, activeBatch: { data: { id, name }}  } = this.props;
+        renderBatch(id, name).then(() => {
+                this.setState({renderedBatch: true});
+            }).catch((e) => {
+                this.props.handleError(copy.publish.renderBatchFailed);
+                this.setState({renderedBatch: false});
+                throw e;
+            });
+    }
+
     private importBatch({story_id, id, name, uploadEvt}) {
-        const {accessKey, compositionId, isExport, handleError} = this.props;
+        const {accessKey, compositionId, isExport, onError} = this.props;
         this.props.importBatchFromCsv(story_id, id, name, uploadEvt.target.files[0], accessKey, compositionId, !isExport, isExport)
             .then(() => {
+
+                if (this.props.batchJobs.missing.length > 0 ) {
+                    onError();
+                }
+
                 this.setState({uploadComplete: true, uploading: false});
-                if (isExport) {
+                this.getBatch();
+
+                if (isExport && Object.keys(this.props.batchJobs.missing).length === 0) {
                     this.renderBatch({id, name});
                 }
             })
             .catch((e) => {
-                const {status, data} = e.response;
-
-                if (status === 400) {
-                    handleError(copy.publish.missingColumns);
-                    alert(copy.publish.csvMissingColumns + data.error);
-                    this.hiddenFileInputRef.current.value = '';
-                }
+                // const {status, data} = e.response;
+                // if (status === 400) {
+                //     handleError(copy.publish.missingColumns);
+                //     this.setState({csvError: true});
+                //     this.setState({csvErrorString: copy.publish.csvMissingColumns + data.error})
+                //     // this.getBatch(id);
+                //     this.hiddenFileInputRef.current.value = '';
+                // }
                 this.setState({uploadComplete: false, uploading: false});
                 throw e;
             });
@@ -168,6 +228,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             }
             this.props.getBatchExport(selectedBatchId).then(() => {
                 this.props.onDone();
+                // this.props.onError();
                 this.setState({
                     downloading: false
                 });
@@ -176,9 +237,10 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     }
 
     public renderLabel() {
-        const {isExport, batchJobs} = this.props;
-        const {renderedBatch, selectedBatchId, uploading, uploadComplete} = this.state;
-        if (isExport && uploadComplete && !renderedBatch) {
+        const { isExport, batchJobs } = this.props;
+        const { renderedBatch, selectedBatchId, uploading, uploadComplete } = this.state;
+
+        if (isExport && uploadComplete && !renderedBatch && Object.keys(this.props.batchJobs.missing).length === 0 ) {
             return (
                 <div className={'progress-bar'}>
                     <progress
@@ -195,9 +257,134 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         return <span>{ICON_UPLOAD}&nbsp;{copy.publish.uploadCsv}</span>;
     }
 
+    private onAssociationChange(colIndex : any, e : any, stillMissingCols : boolean) {
+
+        const {activeBatch: {data : { columns }}} = this.props;
+
+        // Change the previous association back to static
+        const previousColumn = columns.findIndex((col) => {
+            return col.detail === e;
+        });
+        if (previousColumn !== -1) {
+            this.props.updateAssociation(this.props.api, previousColumn, 'Static', null);
+        }
+
+        // Set the new association
+        this.props.updateAssociation(this.props.api, parseInt(colIndex, 10), 'UGC', e);
+
+        this.props.onNext(stillMissingCols);
+    }
+
+    private renderColumnMap() {
+
+        const { activeBatch: {data : { columns }}, batchJobs: { missing }, variables } = this.props;
+
+        if (missing.length >= 0 && columns) {
+
+            const varArray = Object.keys(variables).map((key) => {
+
+                // disable options which are already aligned
+                const opt = {...variables[key]};
+
+                return opt;
+            });
+
+            const colArray = Object.keys(columns).map((i) => {
+                return columns[i];
+            });
+
+            const colOpts = colArray.filter((c : any) => {
+                if (c.from_import === 0 ) {
+                    return false;
+                }
+
+                return true;
+            }).map((c, i) => {
+
+                const opt : any = {
+                    value: i,
+                    label: c.name
+                };
+                const alignedColIdx = varArray.findIndex((v) => {
+                    return c.detail === v.id;
+                });
+
+                if (alignedColIdx !== -1) {
+                    opt.disabled = true;
+                }
+                return opt;
+            });
+
+            // check to see if any required variables are missing
+            let stillMissingCols = false;
+            for (const v of varArray) {
+                if (!v.optional) {
+                    const selectedCol = colArray.findIndex((c : any) => {
+                        return c.detail === v.id;
+                    });
+                    if (selectedCol === -1) {
+                        stillMissingCols = true;
+                        break;
+                    }
+                }
+            }
+
+            // add an empty option to the columns
+            colOpts.unshift('');
+
+            const missingColumn = Object.keys(missing).map((m) => missing[m]);
+            const showMissing = missingColumn.join();
+
+            if (colOpts.length < varArray.length) {
+                return (
+                    <><HRule/><p className='missingColumns'>{`${copy.publish.csvMissingColumns} ${showMissing}`}</p></>
+                );
+            } else {
+                return (
+                    <div className = 'align-columns' >
+                        <HRule/>
+                        <p className='match-columns'>{`${copy.publish.csvMatchColumns}`}</p>
+
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>Variable</th>
+                                    <th>CSV Column</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    varArray.map((v, i) => {
+
+                                        const selectedCol = colArray.findIndex((c : any) => {
+                                            return c.detail === v.id;
+                                        });
+
+                                        const selectedVal = (selectedCol !== undefined && selectedCol !== null) ? selectedCol : '';
+                                        const rClass = (!v.optional) ? 'required' : '';
+
+                                        return <tr key = {`var-${v.id}`} className = {`${rClass}`}>
+                                            <td className='variable'>
+                                                <p>{v.name} { (!v.optional) ? <span style={{ color: 'red' }}> * </span> : null }</p>
+                                            </td>
+                                            <td>
+                                                <SelectField options={colOpts} value={selectedVal} onChange={(c) => this.onAssociationChange(c, v.id, stillMissingCols)} />
+                                            </td>
+                                        </tr>;
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+                );
+            }
+
+        }
+    }
+
     public render() {
         const {uploadComplete, uploading, downloading, renderedBatch, selectedBatchId} = this.state;
-        const {isExport} = this.props;
+        const { isExport, batchJobs: { missing, renders } } = this.props;
 
         const emailOptions = [
             {
@@ -214,16 +401,27 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         ];
         const downloadCsvLabel =  (downloading) ? <span><Spinner/>&nbsp;{copy.publish.exporting}</span> : <span>{ICON_DOWNLOAD}&nbsp;{copy.publish.btnDownload}</span>;
 
-        const downloadCSV = (
-            <div>
+        const reRenderLabel = <div className={'progress-bar'}>
+            <progress
+                max = {EmailWorkflow.PROGRESS_MAX_VALUE}
+                value = {renders[selectedBatchId]}
+            />
+        </div>;
+
+        const downloadCSVDiv = <div>
                 <h2>{uploadComplete ? copy.publish.downloadLink : copy.publish.generatingLink}</h2>
                 <HRule/>
                 <p>{uploadComplete ? copy.publish.downloadDesc : copy.publish.generatingLinkDesc}</p>
-                <BigButton
-                    label={downloadCsvLabel}
-                    disabled = {downloading}
-                    onClick={() => this.downloadCsv()}/>
-            </div>
+
+                { isExport && uploadComplete && !renderedBatch ?
+                <BigButton label={reRenderLabel} disabled={isExport}/> :
+                <BigButton label={downloadCsvLabel} disabled = {downloading} onClick={() => this.downloadCsv()}/>}
+            </div>;
+
+        const downloadCSV = (<>
+            {this.props.error ?  ( this.props.next ?  downloadCSVDiv : '' ) : downloadCSVDiv}
+            {this.renderColumnMap()}
+        </>
         );
 
         const uploadCSV = <div>
@@ -238,7 +436,6 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                 onChange={this.doUploadCsv}/>
             <div className = 'link-wrapper'>
                 {emailOptions?.map((option, index) => {
-
                     return <BigButton
                         label={<span>{option.label}</span>}
                         onClick={option.onClick}
@@ -248,7 +445,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             </div>
         </div>;
 
-        return (isExport ? renderedBatch : uploadComplete) ? downloadCSV : uploadCSV;
+        return (( isExport && Object.keys(missing).length === 0 ) ? renderedBatch : uploadComplete) ? downloadCSV : uploadCSV;
     }
 }
 
@@ -256,4 +453,16 @@ const alphaNumeric = (str) => {
     return str.replace(/\W/g, '');
 };
 
-export default EmailWorkflow;
+const mapDispatchToProps = (dispatch) : any => {
+    return bindActionCreators({
+        updateAssociation, getBatch, setPage
+    }, dispatch);
+};
+
+const mapStateToProps = (state) : any => {
+    return {
+        activeBatch: state.activeBatch,
+        batchesList: state.batchesList,
+    };
+};
+export default connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(EmailWorkflow);

package/components/select-field/SelectField.tsx

@@ -62,7 +62,7 @@ class SelectField extends React.PureComponent<ISelectFieldProps, {}> {
 
     public render() {
 
-        const {label, showCopy,  placeholder, options, value, width, buttons, selectRef, disable, tooltip, info, labelPosition, disableFirst} = this.props;
+        const {label, showCopy, options, value, width, buttons, selectRef, disable, tooltip, info, labelPosition, disableFirst} = this.props;
         let opts = [];
 
         const selectValue = (value === null || value === undefined) ? '' : value;
@@ -91,8 +91,7 @@ class SelectField extends React.PureComponent<ISelectFieldProps, {}> {
 
         if (options) {
             opts = options.map((option , i) => {
-
-                const disabled = (i === 0 && disableFirst) ? true : false;
+                const disabled = (i === 0 && disableFirst || (option.disabled !== undefined && option.disabled)) ? true : false;
                 const optionValue = (option.value !== undefined) ? option.value : option;
                 const optionLabel = (option.label !== undefined) ? option.label : option;
                 return <option disabled = {disabled} key = {`option-${optionValue}`} value = {optionValue}>{optionLabel}</option>;

package/constants/copy.ts

@@ -138,6 +138,7 @@ export const publish = {
     importingData: 'Importing Data... (please wait)',
     downloadDesc: 'Your CSV data file is ready to download with an embed code you can import into your email platform to send out.',
     csvMissingColumns: 'Warning: Some of your column names did not match up with the variables in the story. Please ensure these variables line up and then re-upload the csv: ',
+    csvMatchColumns: 'Please match the column(s) provided to the story variables:',
     // export
     exportBatchOfVideo: 'Export batch of videos',
 
@@ -159,6 +160,8 @@ export const publish = {
     btnSkip: 'Skip',
     btnBack: 'Back',
     btnFinished: 'Done',
+    btnCancel: 'Cancel',
+    btnNext: 'Next',
     noCompErrorTitle: 'No Compositions Found',
     noCompErrorDesc: `You must have at least 1 composition on your story to render and distribute videos.`
 };