@imposium-hub/components 1.58.8 → 1.59.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "1.58.8",
+    "version": "1.59.1",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -54,7 +54,7 @@
         "@fortawesome/pro-light-svg-icons": "^6.1.1",
         "@fortawesome/pro-solid-svg-icons": "^6.1.1",
         "@fortawesome/react-fontawesome": "^0.1.18",
-        "@imposium-hub/react-textarea-autocomplete": "^4.9.5",
+        "@imposium-hub/react-textarea-autocomplete": "^4.9.6",
         "axios": "^0.21.1",
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
@@ -80,7 +80,7 @@
         "@fortawesome/react-fontawesome": "^0.1.18",
         "@imposium-hub/eslint-config": "^1.1.0",
         "@imposium-hub/prettier-config": "^2.1.0",
-        "@imposium-hub/react-textarea-autocomplete": "^4.9.5",
+        "@imposium-hub/react-textarea-autocomplete": "^4.9.6",
         "@storybook/addon-actions": "^6.4.22",
         "@storybook/addon-docs": "^6.4.22",
         "@storybook/addon-essentials": "^6.4.22",

package/src/components/assets/AssetsUploadMenu.tsx

@@ -81,8 +81,8 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps> {
                     />
                     <CheckboxField
                         width='50%'
-                        label={copy.uploads.assignToStoryInput}
-                        info={copy.uploads.assignToStoryInfo}
+                        label={copy.uploads.assignToProjectInput}
+                        info={copy.uploads.assignToProjectInfo}
                         value={assignToStory}
                         onChange={() => this.props.toggleAssignToStory(!assignToStory)}
                     />

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

@@ -7,6 +7,7 @@ import {
     ICON_EMAIL,
     ICON_GLOBE,
     ICON_HUBSPOT,
+    ICON_IMAGE,
     ICON_PROJECT_DIAGRAM
 } from '../../constants/icons';
 import { IImposiumAPI } from '../../services/API';
@@ -48,12 +49,13 @@ interface IPublishWizardProps {
         accessKey: string,
         compId: string,
         addEmbed: boolean,
-        addMedia: boolean
+        addMedia: boolean,
+        overrides?: any
     ) => any;
     handleNotification?: (n) => void;
     batchJobs: any;
     activeComposition: string;
-    renderBatch: (batchId: string, batchName?: string) => any;
+    renderBatch: (batchId: string, postRenderActions?: any) => any;
     publishData: any;
 }
 
@@ -430,6 +432,14 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     </span>
                 ),
                 onClick: (e) => this.onSelectOption(7)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(8)
             }
         ];
 
@@ -478,7 +488,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     private nextClickHandler = () => {
         this.setState({ nextStep: true, error: false });
 
-        if (this.state.screenIndex === 7) {
+        if (this.state.screenIndex === 7 || this.state.screenIndex === 8) {
             this.emailWorkflow.current.getWrappedInstance().proceedWithExport();
         }
     };
@@ -487,12 +497,15 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         this.setState({ done: true, error: false });
     };
 
-    private onErrorHandler = () => {
-        this.setState({ error: !this.state.error });
+    private onErrorHandler = (e) => {
+        this.setState({ error: e });
     };
 
     private onNextHandler = (val: boolean) => {
         this.setState({ next: val });
+        if (val === false) {
+            this.setState({ nextStep: false });
+        }
     };
 
     public render() {
@@ -543,9 +556,10 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                             accessKey={accessKey}
                         />
                     )}
-                    {(screenIndex === 3 || screenIndex === 7) && (
+                    {(screenIndex === 3 || screenIndex === 7 || screenIndex === 8) && (
                         <EmailWorkflow
-                            isExport={screenIndex === 7}
+                            isCrM={screenIndex === 8}
+                            isExport={screenIndex === 7 || screenIndex === 8}
                             api={api}
                             story={story}
                             variables={variables}

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/constants/copy.ts

@@ -20,9 +20,9 @@ export const assets = {
         noUploads: 'There are currently no assets uploading...',
         preparePhase: 'Preparing asset...',
         autoTagInput: 'Tag by filename',
-        assignToStoryInput: 'Assign to Story',
-        assignToStoryInfo:
-            'If selected, any assets uploaded will only be available to use with the currently selected story.',
+        assignToProjectInput: 'Assign to Project',
+        assignToProjectInfo:
+            'If selected, any assets uploaded will only be available to use with the currently selected project.',
         uploadButton: 'Upload',
         cancelButton: 'Cancel'
     },
@@ -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',
@@ -125,7 +134,7 @@ export const publish = {
     webpageTitle: 'STEP 3: Webpage',
     webPageHosted: 'Webpage hosted on Imposium',
     webpageDesc:
-        'You can share a demo page that is hosted on Imposium or you can download a sample webpage you can customize and use to generate videos. Please ensure you include a column for every variable on your story.',
+        'You can share a demo page that is hosted on Imposium or you can download a sample webpage you can customize and use to generate videos. Please ensure you include a column for every variable on your project.',
     sampleWebpage: 'Download sample webpage',
 
     // email
@@ -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.',
@@ -152,8 +161,8 @@ export const publish = {
         'Your CSV data file is ready to download with an embed code you can import into your email platform to send out.',
     titleMissingColumns: 'Warning: ',
     csvMissingColumns:
-        '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:',
+        'Some of your column names did not match up with the variables in the project. Please ensure these variables line up and then re-upload the csv: ',
+    csvMatchColumns: 'Please match the column(s) provided to the project variables:',
     // export
     exportBatchOfVideo: 'Export batch of videos',
 
@@ -169,7 +178,9 @@ export const publish = {
     btnAPI: 'API integration',
 
     // export
-    btnExport: 'Export',
+    btnExport: 'Export as Files',
+
+    btnCRM: 'Flashtalking Creative Manager',
 
     // global
     btnPublish: 'Publish',
@@ -179,7 +190,7 @@ export const publish = {
     btnCancel: 'Cancel',
     btnNext: 'Next',
     noCompErrorTitle: 'No Compositions Found',
-    noCompErrorDesc: `You must have at least 1 composition on your story to render and distribute videos.`
+    noCompErrorDesc: `You must have at least 1 composition on your project to render and distribute videos.`
 };
 
 export const integration = {
@@ -200,8 +211,8 @@ export const integration = {
 export const header = {
     publishing: 'Publishing...',
     working: 'Using Working Copy',
-    statusError: 'Error getting story status',
-    publishJobError: 'Error creating publish story job',
+    statusError: 'Error getting project status',
+    publishJobError: 'Error creating publish project job',
     publishPollError: 'Error polling publish job status'
 };
 

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
         });
     };