@imposium-hub/components 1.45.4 → 1.46.0

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import HRule from '../../h-rule/HRule';
 import Spinner from '../../spinner/Spinner';
 import * as copy from '../../../constants/copy';
-import {BigButton} from '../PublishWizard';
+import { BigButton } from '../PublishWizard';
 import { ExportToCsv } from 'export-to-csv';
 import { ICON_DOWNLOAD, ICON_UPLOAD } from '../../../constants/icons';
 import moment from 'moment';
@@ -13,49 +13,63 @@ 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;
-    importBatchFromCsv : (storyId : string, batchId : string, batchName : string, csvFile : File, accessKey : string, compId : string, embed : boolean, addMedia : boolean) => any;
-    renderBatch : (batchId : string, batchName : string) => any;
-    status : string;
-    accessKey : string;
-    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;
+    story: any;
+    variables: any;
+    createFreshBatch: (e: string) => any;
+    getBatches: () => any;
+    getBatchExport: (batchId: string) => any;
+    importBatchFromCsv: (
+        storyId: string,
+        batchId: string,
+        batchName: string,
+        csvFile: File,
+        accessKey: string,
+        compId: string,
+        embed: boolean,
+        addMedia: boolean
+    ) => any;
+    renderBatch: (batchId: string, batchName: string) => any;
+    status: string;
+    accessKey: string;
+    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 {
-    uploadComplete : boolean;
-    selectedBatchId : string;
-    uploading : boolean;
-    downloading : boolean;
-    renderedBatch : boolean;
-    inventory : any[];
-    inventoryKeys : string[];
-    missingColumns : string;
-    isMissing : boolean;
+    uploadComplete: boolean;
+    selectedBatchId: string;
+    uploading: boolean;
+    downloading: boolean;
+    renderedBatch: boolean;
+    inventory: any[];
+    inventoryKeys: string[];
+    missingColumns: string;
+    isMissing: boolean;
 }
 
 class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkflowState> {
-    private readonly hiddenFileInputRef : any;
-    private static readonly PROGRESS_MAX_VALUE : number = 100;
-    private static readonly CSV_EXPORT_CONFIG : any = {
+    private readonly hiddenFileInputRef: any;
+    private static readonly PROGRESS_MAX_VALUE: number = 100;
+    private static readonly CSV_EXPORT_CONFIG: any = {
         fieldSeparator: ',',
         quoteStrings: '"',
         decimalSeparator: '.',
@@ -71,24 +85,29 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         this.state = {
             uploadComplete: false,
             uploading: false,
-            downloading : false,
+            downloading: false,
             selectedBatchId: '',
             renderedBatch: false,
             inventory: [],
             inventoryKeys: [],
             missingColumns: '',
-            isMissing: false,
+            isMissing: false
         };
 
         this.hiddenFileInputRef = React.createRef();
     }
 
-    public componentDidMount() : void {
+    public componentDidMount(): void {
         this.getInventory();
     }
 
     public componentDidUpdate(): void {
-        const { activeBatch: {data : { columns }}, batchJobs: { missing }} = this.props;
+        const {
+            activeBatch: {
+                data: { columns }
+            },
+            batchJobs: { missing }
+        } = this.props;
 
         if (missing.length >= 0 && columns) {
             const varArray = this.getVarArray();
@@ -97,34 +116,38 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         }
     }
 
-    private getVarArray () {
+    private getVarArray() {
         const { variables } = this.props;
 
         return Object.keys(variables).map((key) => {
-            const opt = {...variables[key]};
+            const opt = { ...variables[key] };
             return opt;
         });
     }
 
-    private getColArray(){
-        const { activeBatch: {data : { columns }} } = this.props;
+    private getColArray() {
+        const {
+            activeBatch: {
+                data: { columns }
+            }
+        } = this.props;
 
         return Object.keys(columns).map((i) => {
             return columns[i];
         });
     }
 
-    private checkOnNext(varArray: any, colArray: any ){
-        let required : number = 0;
-        let filled : number = 0;
+    private checkOnNext(varArray: any, colArray: any) {
+        let required: number = 0;
+        let filled: number = 0;
 
-        for (const v of varArray){
+        for (const v of varArray) {
             if (!v.optional) {
-                required++
+                required++;
 
-                colArray.findIndex((c : any) => {
-                    if(c.type === 'UGC' && c.detail === v.id) {
-                        filled++
+                colArray.findIndex((c: any) => {
+                    if (c.type === 'UGC' && c.detail === v.id) {
+                        filled++;
                     }
                 });
 
@@ -135,32 +158,32 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
 
     private getInventory() {
         const { acts } = this.props.story;
-        const actsKeys : string[] = Object.keys(acts);
-        let inventory : any = {};
+        const actsKeys: string[] = Object.keys(acts);
+        let inventory: any = {};
 
-        actsKeys.forEach((actKey : string) => {
-            inventory = {...inventory, ...acts[actKey].inventory};
+        actsKeys.forEach((actKey: string) => {
+            inventory = { ...inventory, ...acts[actKey].inventory };
         });
 
-        const inventoryKeys : string[] = Object.keys(inventory).sort();
+        const inventoryKeys: string[] = Object.keys(inventory).sort();
 
-        this.setState({inventory});
-        this.setState({inventoryKeys});
+        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) => ({
+        const maskConfig: any[] = inventoryKeys.map((currKey: string) => ({
             id: currKey,
             name: inventory[currKey].name,
             show: true
         }));
 
-        const emptyRow : any = maskConfig.map((m : any) => (m.id))
-            .reduce((prevState : any, currId : string) => ({...prevState, [currId]: ''}), {});
+        const emptyRow: any = maskConfig
+            .map((m: any) => m.id)
+            .reduce((prevState: any, currId: string) => ({ ...prevState, [currId]: '' }), {});
 
         const filename = `${alphaNumeric(name)}-batch-template`;
         const exporter = new ExportToCsv({
@@ -171,133 +194,177 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         exporter.generateCsv([emptyRow]);
     }
 
-    private selectCsv = () : void => {
+    private selectCsv = (): void => {
         if (this.hiddenFileInputRef.current) {
             this.hiddenFileInputRef.current.click();
         }
-    }
+    };
 
     private getBatchName() {
-
-        const {story: {name}, compositionName} = this.props;
+        const {
+            story: { name },
+            compositionName
+        } = this.props;
         const date = Date.now();
         const dateStr = moment(date).format('MMDDYY-HHmm');
         const batchName = `${alphaNumeric(name)}-${alphaNumeric(compositionName)}-${dateStr}`;
         return batchName;
     }
 
-    private doUploadCsv = (uploadEvt) : void => {
+    private doUploadCsv = (uploadEvt): void => {
         uploadEvt.persist();
-        const {handleError} = this.props;
+        const { handleError } = this.props;
         this.setState({
             uploading: true,
-            renderedBatch: false,
+            renderedBatch: false
         });
-        this.props.createFreshBatch(this.getBatchName())
+        this.props
+            .createFreshBatch(this.getBatchName())
             .then((res) => {
-                const {id, name, story_id} = res;
-                this.setState({selectedBatchId: id});
-                this.importBatch({story_id, id, name, uploadEvt});
+                const { id, name, story_id } = res;
+                this.setState({ selectedBatchId: id });
+                this.importBatch({ story_id, id, name, uploadEvt });
             })
             .catch((e) => {
                 handleError(e);
-                this.setState({uploadComplete: false, uploading: false});
+                this.setState({ uploadComplete: false, uploading: false });
                 throw e;
             });
-    }
+    };
 
     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) => {
+        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});
+                this.setState({ renderedBatch: false });
                 throw e;
             });
     }
 
-    private importBatch({story_id, id, name, uploadEvt}) {
-        const {accessKey, compositionId, isExport, onError} = this.props;
-        this.props.importBatchFromCsv(story_id, id, name, uploadEvt.target.files[0], accessKey, compositionId, !isExport, isExport)
+    private importBatch({ story_id, id, name, uploadEvt }) {
+        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 ) {
+                if (this.props.batchJobs.missing.length > 0) {
                     onError();
                 }
 
-                this.setState({uploadComplete: true, uploading: false});
+                this.setState({ uploadComplete: true, uploading: false });
                 this.getBatch();
 
                 if (isExport && Object.keys(this.props.batchJobs.missing).length === 0) {
-                    this.renderBatch({id, name});
+                    this.renderBatch({ id, name });
                 }
             })
             .catch((e) => {
-                this.setState({uploadComplete: false, uploading: false});
+                this.setState({ uploadComplete: false, uploading: false });
                 throw e;
             });
     }
 
-    private renderBatch({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 renderBatch({ 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;
+            });
     }
 
     public downloadCsv() {
-        this.setState({
-            downloading: true
-        }, () => {
-            const {status, api, handleError} = this.props;
-            const {selectedBatchId} = this.state;
-            if (status === copy.header.publishing) {
-                handleError(copy.publish.downloadError);
-                return;
-            }
-            this.props.getBatchExport(selectedBatchId).then(() => {
-                this.props.onDone();
-                this.setState({
-                    downloading: false
+        this.setState(
+            {
+                downloading: true
+            },
+            () => {
+                const { status, handleError } = this.props;
+                const { selectedBatchId } = this.state;
+                if (status === copy.header.publishing) {
+                    handleError(copy.publish.downloadError);
+                    return;
+                }
+                this.props.getBatchExport(selectedBatchId).then(() => {
+                    this.props.onDone();
+                    this.setState({
+                        downloading: false
+                    });
                 });
-            });
-        });
+            }
+        );
     }
 
     public renderLabel() {
         const { isExport, batchJobs } = this.props;
         const { renderedBatch, selectedBatchId, uploading, uploadComplete } = this.state;
 
-        if (isExport && uploadComplete && !renderedBatch && Object.keys(this.props.batchJobs.missing).length === 0 ) {
+        if (
+            isExport &&
+            uploadComplete &&
+            !renderedBatch &&
+            Object.keys(this.props.batchJobs.missing).length === 0
+        ) {
             return (
                 <div className={'progress-bar'}>
                     <progress
-                        max = {EmailWorkflow.PROGRESS_MAX_VALUE}
-                        value = {batchJobs.renders[selectedBatchId]}
+                        max={EmailWorkflow.PROGRESS_MAX_VALUE}
+                        value={batchJobs.renders[selectedBatchId]}
                     />
                 </div>
             );
         }
         if (uploading) {
-            const uploadingCopy = (isExport) ? copy.publish.importingData : copy.publish.creatingLinks;
-            return <span><Spinner/>&nbsp;{uploadingCopy}</span>;
+            const uploadingCopy = isExport
+                ? copy.publish.importingData
+                : copy.publish.creatingLinks;
+            return (
+                <span>
+                    <Spinner />
+                    &nbsp;{uploadingCopy}
+                </span>
+            );
         }
-        return <span>{ICON_UPLOAD}&nbsp;{copy.publish.uploadCsv}</span>;
+        return (
+            <span>
+                {ICON_UPLOAD}&nbsp;{copy.publish.uploadCsv}
+            </span>
+        );
     }
 
-    private onAssociationChange(colIndex : any, e : any) {
-
-        const {activeBatch: {data : { columns }}} = this.props;
+    private onAssociationChange(colIndex: any, e: any) {
+        const {
+            activeBatch: {
+                data: { columns }
+            }
+        } = this.props;
 
         // Change the previous association back to static
         const previousColumn = columns.findIndex((col) => {
@@ -313,36 +380,41 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     }
 
     private renderColumnMap() {
-
-        const { activeBatch: {data : { columns }}, batchJobs: { missing }, error } = this.props;
+        const {
+            activeBatch: {
+                data: { columns }
+            },
+            batchJobs: { missing },
+            error
+        } = this.props;
 
         if (missing.length > 0 && columns && error) {
-
             const varArray = this.getVarArray();
             const colArray = this.getColArray();
 
-            const colOpts = colArray.filter((c : any) => {
-                if (c.from_import === 0 ) {
-                    return false;
-                }
-
-                return true;
-            }).map((c, i) => {
+            const colOpts = colArray
+                .filter((c: any) => {
+                    if (c.from_import === 0) {
+                        return false;
+                    }
 
-                const opt : any = {
-                    value: i,
-                    label: c.name
-                };
-                const alignedColIdx = varArray.findIndex((v) => {
-                    return c.detail === v.id;
+                    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;
                 });
 
-                if (alignedColIdx !== -1) {
-                    opt.disabled = true;
-                }
-                return opt;
-            });
-
             // add an empty option to the columns
             colOpts.unshift('');
 
@@ -353,15 +425,15 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                 return (
                     <>
                         <h2>{copy.publish.titleMissingColumns}</h2>
-                        <HRule/>
+                        <HRule />
                         <p className='missingColumns'>{`${copy.publish.csvMissingColumns} ${showMissing}`}</p>
                     </>
                 );
             } else {
                 return (
-                    <div className = 'align-columns' >
+                    <div className='align-columns'>
                         <h2 className='match-columns'>{`${copy.publish.csvMatchColumns}`}</h2>
-                        <HRule/>
+                        <HRule />
 
                         <table>
                             <thead>
@@ -371,26 +443,39 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                                 </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}`}>
+                                {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>
+                                                <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)} />
+                                                <SelectField
+                                                    options={colOpts}
+                                                    value={selectedVal}
+                                                    onChange={(c) =>
+                                                        this.onAssociationChange(c, v.id)
+                                                    }
+                                                />
                                             </td>
-                                        </tr>;
-                                    })
-                                }
+                                        </tr>
+                                    );
+                                })}
                             </tbody>
                         </table>
                     </div>
@@ -400,12 +485,20 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     }
 
     public render() {
-        const {uploadComplete, uploading, downloading, renderedBatch, selectedBatchId} = this.state;
-        const { isExport, batchJobs: { missing, renders } } = this.props;
+        const { uploadComplete, uploading, downloading, renderedBatch, selectedBatchId } =
+            this.state;
+        const {
+            isExport,
+            batchJobs: { missing, renders }
+        } = this.props;
 
         const emailOptions = [
             {
-                label: <span>{ICON_DOWNLOAD}&nbsp;{copy.publish.downloadSampleCsvLink}</span>,
+                label: (
+                    <span>
+                        {ICON_DOWNLOAD}&nbsp;{copy.publish.downloadSampleCsvLink}
+                    </span>
+                ),
                 onClick: () => this.downloadSampleCsv(),
                 key: 'download-sample'
             },
@@ -413,56 +506,83 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                 label: this.renderLabel(),
                 onClick: () => this.selectCsv(),
                 key: 'upload',
-                disabled: isExport ? uploadComplete || uploading : uploading,
-            },
+                disabled: isExport ? uploadComplete || uploading : uploading
+            }
         ];
-        const downloadCsvLabel =  (downloading) ? <span><Spinner/>&nbsp;{copy.publish.exporting}</span> : <span>{ICON_DOWNLOAD}&nbsp;{copy.publish.btnDownload}</span>;
+        const downloadCsvLabel = downloading ? (
+            <span>
+                <Spinner />
+                &nbsp;{copy.publish.exporting}
+            </span>
+        ) : (
+            <span>
+                {ICON_DOWNLOAD}&nbsp;{copy.publish.btnDownload}
+            </span>
+        );
 
-        const reRenderLabel = <div className={'progress-bar'}>
-            <progress
-                max = {EmailWorkflow.PROGRESS_MAX_VALUE}
-                value = {renders[selectedBatchId]}
-            />
-        </div>;
+        const reRenderLabel = (
+            <div className={'progress-bar'}>
+                <progress max={EmailWorkflow.PROGRESS_MAX_VALUE} value={renders[selectedBatchId]} />
+            </div>
+        );
 
-        const downloadCSVDiv = <div>
+        const downloadCSVDiv = (
+            <div>
                 <h2>{uploadComplete ? copy.publish.downloadLink : copy.publish.generatingLink}</h2>
-                <HRule/>
-                <p>{uploadComplete ? copy.publish.downloadDesc : copy.publish.generatingLinkDesc}</p>
-
-                { 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()}
-        </>
+                <HRule />
+                <p>
+                    {uploadComplete ? copy.publish.downloadDesc : copy.publish.generatingLinkDesc}
+                </p>
+
+                {isExport && uploadComplete && !renderedBatch ? (
+                    <BigButton label={reRenderLabel} disabled={isExport} />
+                ) : (
+                    <BigButton
+                        label={downloadCsvLabel}
+                        disabled={downloading}
+                        onClick={() => this.downloadCsv()}
+                    />
+                )}
+            </div>
         );
 
-        const uploadCSV = <div>
-            <h2>{copy.publish.emailTitle}</h2>
-            <HRule/>
-            <p>{copy.publish.emailDesc}</p>
-            <input
-                type='file'
-                style={{display: 'none'}}
-                accept='text/csv'
-                ref={this.hiddenFileInputRef}
-                onChange={this.doUploadCsv}/>
-            <div className = 'link-wrapper'>
-                {emailOptions?.map((option, index) => {
-                    return <BigButton
-                        label={<span>{option.label}</span>}
-                        onClick={option.onClick}
-                        disabled={option?.disabled}
-                        key={option.key}/>;
-                })}
+        const downloadCSV = (
+            <>
+                {this.props.error ? (this.props.next ? downloadCSVDiv : '') : downloadCSVDiv}
+                {this.renderColumnMap()}
+            </>
+        );
+
+        const uploadCSV = (
+            <div>
+                <h2>{copy.publish.emailTitle}</h2>
+                <HRule />
+                <p>{copy.publish.emailDesc}</p>
+                <input
+                    type='file'
+                    style={{ display: 'none' }}
+                    accept='text/csv'
+                    ref={this.hiddenFileInputRef}
+                    onChange={this.doUploadCsv}
+                />
+                <div className='link-wrapper'>
+                    {emailOptions?.map((option, index) => {
+                        return (
+                            <BigButton
+                                label={<span>{option.label}</span>}
+                                onClick={option.onClick}
+                                disabled={option?.disabled}
+                                key={option.key}
+                            />
+                        );
+                    })}
+                </div>
             </div>
-        </div>;
+        );
 
-        return (( isExport && Object.keys(missing).length === 0 ) ? renderedBatch : uploadComplete) ? downloadCSV : uploadCSV;
+        return (isExport && Object.keys(missing).length === 0 ? renderedBatch : uploadComplete)
+            ? downloadCSV
+            : uploadCSV;
     }
 }
 
@@ -470,16 +590,21 @@ const alphaNumeric = (str) => {
     return str.replace(/\W/g, '');
 };
 
-const mapDispatchToProps = (dispatch) : any => {
-    return bindActionCreators({
-        updateAssociation, getBatch, setPage
-    }, dispatch);
+const mapDispatchToProps = (dispatch): any => {
+    return bindActionCreators(
+        {
+            updateAssociation,
+            getBatch,
+            setPage
+        },
+        dispatch
+    );
 };
 
-const mapStateToProps = (state) : any => {
+const mapStateToProps = (state): any => {
     return {
         activeBatch: state.activeBatch,
-        batchesList: state.batchesList,
+        batchesList: state.batchesList
     };
 };
 export default connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(EmailWorkflow);