@imposium-hub/components 1.58.7 → 1.59.0

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

@@ -11,6 +11,8 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import SelectField from '../../select-field/SelectField';
 import { updateAssociation, getBatch, setPage } from '../../../redux/actions/active-batch';
+import TextField from '../../text-field/TextField';
+import { CRM_PLACEMENT_VARS } from '../../../constants/publish';
 
 interface IEmailWorkflowProps {
     story: any;
@@ -26,15 +28,16 @@ interface IEmailWorkflowProps {
         accessKey: string,
         compId: string,
         embed: boolean,
-        addMedia: boolean
+        addMedia: boolean,
+        overrides?: any
     ) => any;
-    renderBatch: (batchId: string, batchName: string) => any;
+    renderBatch: (batchId: string, postRenderActions?: any) => any;
     status: string;
     accessKey: string;
     compositionId: string;
     compositionName: string;
     onDone: () => void;
-    onError: () => void;
+    onError: (error) => void;
     error: boolean;
     api: IImposiumAPI;
     handleError: (e) => any;
@@ -52,6 +55,14 @@ interface IEmailWorkflowProps {
     setPage: (page: number) => any;
     onNext: (val: boolean) => void;
     next: boolean;
+    isCrM: boolean;
+}
+
+interface CrMOverrides {
+    creative_id: string;
+    creative_library_id: string;
+    notification_email: string;
+    placement_type: string;
 }
 
 interface IEmailWorkflowState {
@@ -63,7 +74,8 @@ interface IEmailWorkflowState {
     inventory: any[];
     inventoryKeys: string[];
     missingColumns: string;
-    isMissing: boolean;
+    batchError: string;
+    creativeManagerOverrides: CrMOverrides;
 }
 
 class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkflowState> {
@@ -93,7 +105,13 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             inventory: [],
             inventoryKeys: [],
             missingColumns: '',
-            isMissing: false
+            batchError: '',
+            creativeManagerOverrides: {
+                creative_id: '',
+                creative_library_id: '',
+                notification_email: '',
+                placement_type: 'crm-adstudio'
+            }
         };
 
         this.hiddenFileInputRef = React.createRef();
@@ -175,6 +193,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
 
     public downloadSampleCsv() {
         const { name } = this.props.story;
+        const { isCrM } = this.props;
         const { inventory, inventoryKeys } = this.state;
 
         const maskConfig: any[] = inventoryKeys.map((currKey: string) => ({
@@ -183,6 +202,16 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             show: true
         }));
 
+        if (isCrM) {
+            for (const id of CRM_PLACEMENT_VARS) {
+                maskConfig.push({
+                    id,
+                    name: id,
+                    show: true
+                });
+            }
+        }
+
         const emptyRow: any = maskConfig
             .map((m: any) => m.id)
             .reduce((prevState: any, currId: string) => ({ ...prevState, [currId]: '' }), {});
@@ -242,24 +271,17 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
 
     public proceedWithExport() {
         const {
-            renderBatch,
             activeBatch: {
-                data: { id, name }
+                data: { id }
             }
         } = this.props;
-        renderBatch(id, name)
-            .then(() => {
-                this.setState({ renderedBatch: true });
-            })
-            .catch((e) => {
-                this.props.handleError(copy.publish.renderBatchFailed);
-                this.setState({ renderedBatch: false });
-                throw e;
-            });
+
+        this.renderBatch({ id });
     }
 
     private importBatch({ story_id, id, name, uploadEvt }) {
         const { accessKey, compositionId, isExport, onError } = this.props;
+        onError(false); // reset the parent error
         this.props
             .importBatchFromCsv(
                 story_id,
@@ -271,16 +293,16 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                 !isExport,
                 isExport
             )
-            .then(() => {
+            .then((e) => {
                 if (this.props.batchJobs.missing.length > 0) {
-                    onError();
+                    onError(true); // set the error to true
                 }
 
                 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 });
                 }
             })
             .catch((e) => {
@@ -289,15 +311,49 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             });
     }
 
-    private renderBatch({ id, name }) {
+    private getPostRenderActions() {
+        const CrMUploadAction = { data: {} };
+        const {
+            creativeManagerOverrides: {
+                placement_type,
+                creative_id,
+                creative_library_id,
+                notification_email
+            }
+        } = this.state;
+
+        CrMUploadAction['type'] = placement_type;
+        if (creative_id) {
+            CrMUploadAction.data['creative_id'] = creative_id;
+        }
+        if (creative_library_id) {
+            CrMUploadAction.data['creative_library_id'] = creative_library_id;
+        }
+        if (notification_email) {
+            CrMUploadAction.data['notification_email'] = notification_email;
+        }
+
+        return [CrMUploadAction];
+    }
+
+    private renderBatch({ id }) {
+        const { isCrM } = this.props;
+        const postRenderActions = isCrM ? this.getPostRenderActions() : null;
+        this.setState({ batchError: null });
         this.props
-            .renderBatch(id, name)
+            .renderBatch(id, postRenderActions)
             .then(() => {
-                this.setState({ renderedBatch: true });
+                this.setState({ renderedBatch: true, batchError: '' });
             })
             .catch((e) => {
                 this.props.handleError(copy.publish.renderBatchFailed);
-                this.setState({ renderedBatch: false });
+                this.setState({
+                    renderedBatch: false,
+                    batchError: e.response.data.error,
+                    uploadComplete: false,
+                    uploading: false,
+                    downloading: false
+                });
                 throw e;
             });
     }
@@ -489,11 +545,19 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     }
 
     public render() {
-        const { uploadComplete, uploading, downloading, renderedBatch, selectedBatchId } =
-            this.state;
+        const {
+            uploadComplete,
+            uploading,
+            downloading,
+            renderedBatch,
+            selectedBatchId,
+            batchError,
+            creativeManagerOverrides
+        } = this.state;
         const {
             isExport,
-            batchJobs: { missing, renders }
+            batchJobs: { missing, renders },
+            isCrM
         } = this.props;
 
         const emailOptions = [
@@ -533,28 +597,41 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             </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 downloadCSVDiv =
+            isCrM && uploadComplete && renderedBatch ? (
+                <div>
+                    <h2>{copy.publish.renderComplete}</h2>
+                    <HRule />
+                    <p>{copy.publish.goToCrM}</p>
+                </div>
+            ) : (
+                <div>
+                    <h2>
+                        {uploadComplete && renderedBatch
+                            ? copy.publish.downloadLink
+                            : copy.publish.generatingLink}
+                    </h2>
+                    <HRule />
+                    <p>
+                        {uploadComplete && renderedBatch
+                            ? 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 = (
             <>
@@ -575,6 +652,13 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                     ref={this.hiddenFileInputRef}
                     onChange={this.doUploadCsv}
                 />
+                {isCrM && (
+                    <CrMOptions
+                        options={creativeManagerOverrides}
+                        errorCopy={batchError}
+                        onChange={(c) => this.setState({ creativeManagerOverrides: c })}
+                    />
+                )}
                 <div className='link-wrapper'>
                     {emailOptions?.map((option, index) => {
                         return (
@@ -617,4 +701,54 @@ const mapStateToProps = (state): any => {
         batchesList: state.batchesList
     };
 };
+
+const CrMOptions = ({ options, onChange, errorCopy = '' }) => {
+    const onInputChange = (key, val) => {
+        const newOpts = { ...options };
+        newOpts[key] = val;
+        onChange(newOpts);
+    };
+
+    const e = errorCopy ? (
+        <div className='batch-error'>
+            <p>Error: {errorCopy}</p>
+            <p>{copy.publish.missingFields}</p>
+        </div>
+    ) : null;
+
+    return (
+        <>
+            <HRule />
+            <br />
+            <h2>{copy.publish.crmPlacement}</h2>
+            <p>{copy.publish.crmData}</p>
+            {e}
+            <br />
+            <TextField
+                width={'33%'}
+                labelPosition='top'
+                label={copy.publish.creativeLibraryId}
+                value={options.creative_library_id}
+                onChange={(v) => onInputChange('creative_library_id', v)}
+            />
+            <TextField
+                width={'33%'}
+                labelPosition='top'
+                label={copy.publish.creativeId}
+                value={options.creative_id}
+                onChange={(v) => onInputChange('creative_id', v)}
+            />
+            <TextField
+                width={'33%'}
+                labelPosition='top'
+                label={copy.publish.email}
+                value={options.notification_email}
+                onChange={(v) => onInputChange('notification_email', v)}
+            />
+            <br />
+            <HRule />
+        </>
+    );
+};
+
 export default connect(mapStateToProps, mapDispatchToProps, null, { withRef: true })(EmailWorkflow);

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -768,8 +768,8 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                     tooltip='Download Preview'
                     style='subtle'
                     onClick={() => {
-                        this.download(url, fileName).catch((error) =>
-                            alert(`${ERROR.download.replace('[error]', error)}`)
+                        this.download(url, fileName).catch((e) =>
+                            alert(`${ERROR.download.replace('[error]', e)}`)
                         );
                     }}>
                     {ICON_DOWNLOAD}

package/src/components/text-field/TextField.tsx

@@ -106,10 +106,10 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     public componentDidUpdate = (prevProps, prevState): void => {
-        const { controlled, submittable, value } = this.props;
+        const { controlled, submittable, value, suggestions } = this.props;
         const { editing, internalValue } = this.state;
 
-        if (submittable) {
+        if (submittable && suggestions) {
             this.textAreaRef.onkeydown = (e) => {
                 if (e.key === 'Enter') {
                     this.props.doSubmit(internalValue);

package/src/constants/copy.ts

@@ -105,9 +105,18 @@ export const compositions = {
 };
 
 export const publish = {
+    creativeLibraryId: 'Creative Library ID',
+    creativeId: 'Creative ID',
+    email: 'Notification Email',
+    missingFields: 'Please provide the missing fields and try again!',
+    crmPlacement: 'Creative Manager Placement Variables',
+    crmData: `If your CSV batch data doesn't contain the required Creative Manager placement variables, or you would like to override them, enter the values below before you upload the batch data.`,
     accessKey: 'Access Key',
     tooltipAccessKey: 'API access key to use for this video distribution.',
     publishTitle: 'Publish & Deliver',
+    goToCrM:
+        'Your videos have finished rendering. They will appear in Creative Manager momentarily.',
+    renderComplete: 'Render Complete!',
 
     // publish
     publishStepTitle: 'STEP 1: Publish your Project',
@@ -135,9 +144,9 @@ export const publish = {
     emailDesc:
         'You can download a sample CSV with fields to populate as a starting point. Or you can upload one that already has the data in it.',
     downloadSampleCsvLink: 'Download Sample CSV',
-    uploadCsv: 'Upload Your CSV UserList',
+    uploadCsv: 'Upload Your CSV',
     generatingLink: 'STEP 4: Generating embed links',
-    downloadLink: 'STEP 5: Download Your Userlist CSV file',
+    downloadLink: 'STEP 5: Download Your CSV file',
     btnDownload: 'Download CSV',
     generatingLinkDesc:
         'Please wait while we generate the link for your users. This may take few minutes.',
@@ -169,7 +178,9 @@ export const publish = {
     btnAPI: 'API integration',
 
     // export
-    btnExport: 'Export',
+    btnExport: 'Export as Files',
+
+    btnCRM: 'Flashtalking Creative Manager',
 
     // global
     btnPublish: 'Publish',

package/src/constants/publish.ts

@@ -0,0 +1,24 @@
+export const CRM_PLACEMENT_TYPES = {
+    AD_STUDIO: 'crm-adstudio',
+    VIDEO_BUILDER: 'crm-videobuilder'
+};
+
+export const CRM_PLACEMENT_OPTIONS = [
+    {
+        value: CRM_PLACEMENT_TYPES.AD_STUDIO,
+        label: 'AdStudio'
+    },
+    {
+        value: CRM_PLACEMENT_TYPES.VIDEO_BUILDER,
+        label: 'Video Builder'
+    }
+];
+
+export const CRM_PLACEMENT_VARS = [
+    'creative_library_id',
+    'creative_id',
+    'version-name',
+    'version-id',
+    'clickTag1',
+    'notificiaton_email'
+];

package/src/services/API.ts

@@ -73,7 +73,7 @@ export interface IImposiumAPI {
     duplicateBatch(batchId: string);
     downloadBatchExport(batchId: string, exportId: number);
     deleteBatch(batchId: string);
-    invokeBatchRenderJob(batchId: string);
+    invokeBatchRenderJob(batchId: string, postRenderActions?: any);
     cancelBatchRenderJob(batchId: string);
     getJob(jobId: string);
     pollJob(jobId: string);
@@ -660,6 +660,8 @@ export default class API {
             formData.append('include_email_embed', 'true');
             formData.append('composition_id', compId);
             formData.append('access_key', accessKey);
+        } else if (compId) {
+            formData.append('composition_id', compId);
         }
 
         if (addMedia) {
@@ -1119,13 +1121,22 @@ export default class API {
         });
     };
 
-    public invokeBatchRenderJob = (batchId: string): Promise<any | Error> => {
+    public invokeBatchRenderJob = (
+        batchId: string,
+        postRenderActions?: any
+    ): Promise<any | Error> => {
+        const data = {
+            batch_id: batchId
+        };
+
+        if (postRenderActions) {
+            data['post_render_actions'] = postRenderActions;
+        }
+
         return this.doRequest({
             method: 'POST',
             url: '/job/render-batch',
-            data: {
-                batch_id: batchId
-            }
+            data
         });
     };