@imposium-hub/components 1.62.0 → 1.62.2

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

@@ -16,6 +16,7 @@ import { CRM_PLACEMENT_VARS } from '../../../constants/publish';
 
 interface IEmailWorkflowProps {
     story: any;
+    activeDataset: any;
     variables: any;
     createFreshBatch: (e: string) => any;
     getBatches: () => any;
@@ -23,7 +24,6 @@ interface IEmailWorkflowProps {
     importBatchFromCsv: (
         storyId: string,
         batchId: string,
-        batchName: string,
         csvFile: File,
         accessKey: string,
         compId: string,
@@ -31,6 +31,17 @@ interface IEmailWorkflowProps {
         addMedia: boolean,
         overrides?: any
     ) => any;
+    publishDataset: boolean;
+    activeDatasetId?: string;
+    importBatchFromDataset: (
+        batchId: string,
+        datasetId: string,
+        accessKey: string,
+        compId: string,
+        embed: boolean,
+        addMedia: boolean,
+        overrides?: any
+    ) => any;
     renderBatch: (batchId: string, postRenderActions?: any) => any;
     status: string;
     accessKey: string;
@@ -43,6 +54,7 @@ interface IEmailWorkflowProps {
     handleError: (e) => any;
     batchJobs: any;
     isExport?: boolean;
+    isEmail?: boolean;
     updateAssociation: (
         api: IImposiumAPI,
         colIndex: number,
@@ -78,6 +90,7 @@ interface IEmailWorkflowState {
     batchError: string;
     creativeManagerOverrides: CrMOverrides;
     waitingForPublish: boolean;
+    hasUploadDataset: boolean;
 }
 
 class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkflowState> {
@@ -114,7 +127,8 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                 notification_email: '',
                 placement_type: 'crm-adstudio'
             },
-            waitingForPublish: false
+            waitingForPublish: false,
+            hasUploadDataset: false
         };
 
         this.hiddenFileInputRef = React.createRef();
@@ -124,19 +138,20 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         this.getInventory();
     }
 
-    public componentDidUpdate(
-        prevProps: Readonly<IEmailWorkflowProps>,
-        prevState: Readonly<IEmailWorkflowState>
-    ): void {
+    public componentDidUpdate(prevProps: Readonly<IEmailWorkflowProps>): void {
         const {
             activeBatch: {
                 data: { columns }
             },
             batchJobs: { missing },
-            publishData: { publishing }
+            publishData: { publishing },
+            publishDataset,
+            isExport,
+            isEmail,
+            isCrM
         } = this.props;
 
-        const { waitingForPublish } = this.state;
+        const { waitingForPublish, hasUploadDataset } = this.state;
         if (missing.length >= 0 && columns) {
             const varArray = this.getVarArray();
             const colArray = this.getColArray();
@@ -144,7 +159,15 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         }
 
         if (!publishing && prevProps.publishData.publishing && waitingForPublish) {
-            this.createFreshBatch();
+            if (publishDataset) {
+                this.createFreshBatchFromDataset();
+            } else {
+                this.createFreshBatchFromCsv();
+            }
+        }
+
+        if (((isExport && !isCrM) || isEmail) && !hasUploadDataset && publishDataset) {
+            this.doUploadDataset();
         }
     }
 
@@ -188,7 +211,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         }
     }
 
-    private createFreshBatch() {
+    private createFreshBatchFromCsv() {
         const { handleError } = this.props;
 
         const file = this.hiddenFileInputRef.current.files[0];
@@ -196,9 +219,26 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         this.props
             .createFreshBatch(this.getBatchName())
             .then((res) => {
-                const { id, name, story_id } = res;
+                const { id, story_id } = res;
+                this.setState({ selectedBatchId: id });
+                this.importBatchFromCsv({ story_id, id, file });
+            })
+            .catch((e) => {
+                handleError(e);
+                this.setState({ uploadComplete: false, uploading: false });
+                throw e;
+            });
+    }
+
+    private createFreshBatchFromDataset() {
+        const { handleError } = this.props;
+
+        this.props
+            .createFreshBatch(this.getBatchName())
+            .then((res) => {
+                const { id } = res;
                 this.setState({ selectedBatchId: id });
-                this.importBatch({ story_id, id, name, file });
+                this.importBatchFromDataset({ id });
             })
             .catch((e) => {
                 handleError(e);
@@ -273,6 +313,24 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         return batchName;
     }
 
+    private doUploadDataset() {
+        const {
+            publishData: { publishing }
+        } = this.props;
+
+        this.setState({
+            uploading: true,
+            renderedBatch: false,
+            hasUploadDataset: true
+        });
+
+        if (publishing) {
+            this.setState({ waitingForPublish: true });
+        } else {
+            this.createFreshBatchFromDataset();
+        }
+    }
+
     private doUploadCsv = (uploadEvt): void => {
         const {
             publishData: { publishing }
@@ -286,7 +344,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         if (publishing) {
             this.setState({ waitingForPublish: true });
         } else {
-            this.createFreshBatch();
+            this.createFreshBatchFromCsv();
         }
     };
 
@@ -306,21 +364,42 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         this.renderBatch({ id });
     }
 
-    private importBatch({ story_id, id, name, file }) {
+    private importBatchFromCsv({ story_id, id, file }) {
         const { accessKey, compositionId, isExport, onError } = this.props;
         onError(false); // reset the parent error
         this.props
-            .importBatchFromCsv(
-                story_id,
+            .importBatchFromCsv(story_id, id, file, accessKey, compositionId, !isExport, isExport)
+            .then(() => {
+                if (this.props.batchJobs.missing.length > 0) {
+                    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 });
+                }
+            })
+            .catch((e) => {
+                this.setState({ uploadComplete: false, uploading: false });
+                throw e;
+            });
+    }
+
+    private importBatchFromDataset({ id }) {
+        const { accessKey, compositionId, isExport, onError, activeDatasetId } = this.props;
+        onError(false); // reset the parent error
+        this.props
+            .importBatchFromDataset(
                 id,
-                name,
-                file,
+                activeDatasetId,
                 accessKey,
                 compositionId,
                 !isExport,
                 isExport
             )
-            .then((e) => {
+            .then(() => {
                 if (this.props.batchJobs.missing.length > 0) {
                     onError(true); // set the error to true
                 }
@@ -408,7 +487,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     }
 
     public renderLabel() {
-        const { isExport, batchJobs } = this.props;
+        const { isExport, batchJobs, publishDataset } = this.props;
         const { renderedBatch, selectedBatchId, uploading, uploadComplete } = this.state;
 
         if (
@@ -437,9 +516,11 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                 </span>
             );
         }
+
         return (
             <span>
-                {ICON_UPLOAD}&nbsp;{copy.publish.uploadCsv}
+                {ICON_UPLOAD}&nbsp;
+                {publishDataset ? copy.publish.uploadDataset : copy.publish.uploadCsv}
             </span>
         );
     }
@@ -584,26 +665,43 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         const {
             isExport,
             batchJobs: { missing, renders },
-            isCrM
+            isCrM,
+            publishDataset
         } = this.props;
 
-        const emailOptions = [
-            {
-                label: (
-                    <span>
-                        {ICON_DOWNLOAD}&nbsp;{copy.publish.downloadSampleCsvLink}
-                    </span>
-                ),
-                onClick: () => this.downloadSampleCsv(),
-                key: 'download-sample'
-            },
-            {
-                label: this.renderLabel(),
-                onClick: () => this.selectCsv(),
-                key: 'upload',
-                disabled: isExport ? uploadComplete || uploading : uploading
-            }
-        ];
+        const emailOptions = [];
+
+        const downloadSampleCsv = {
+            label: (
+                <span>
+                    {ICON_DOWNLOAD}&nbsp;{copy.publish.downloadSampleCsvLink}
+                </span>
+            ),
+            onClick: () => this.downloadSampleCsv(),
+            key: 'download-sample'
+        };
+
+        const selectCsv = {
+            label: this.renderLabel(),
+            onClick: () => this.selectCsv(),
+            key: 'upload',
+            disabled: isExport ? uploadComplete || uploading : uploading
+        };
+
+        const uploadDataset = {
+            label: this.renderLabel(),
+            onClick: () => this.doUploadDataset(),
+            key: 'upload',
+            disabled: isExport ? uploadComplete || uploading : uploading
+        };
+
+        if (!publishDataset) {
+            emailOptions.push(downloadSampleCsv);
+            emailOptions.push(selectCsv);
+        } else {
+            emailOptions.push(uploadDataset);
+        }
+
         const downloadCsvLabel = downloading ? (
             <span>
                 <Spinner />
@@ -667,11 +765,17 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             </>
         );
 
+        console.log(this.props.activeDataset);
+        const title = publishDataset
+            ? copy.publish.datasetTitle.replace('[dataset_name]', this.props.activeDataset?.name)
+            : copy.publish.emailTitle;
+        const desc = publishDataset ? '' : copy.publish.emailDesc;
+
         const uploadCSV = (
             <div>
-                <h2>{copy.publish.emailTitle}</h2>
+                <h2>{title}</h2>
                 <HRule />
-                <p>{copy.publish.emailDesc}</p>
+                <p>{desc}</p>
                 <input
                     type='file'
                     style={{ display: 'none' }}
@@ -726,7 +830,8 @@ const mapStateToProps = (state): any => {
     return {
         activeBatch: state.activeBatch,
         batchesList: state.batchesList,
-        publishData: state.publish
+        publishData: state.publish,
+        activeDataset: state.datasets.present.activeDataset
     };
 };
 

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

@@ -133,12 +133,14 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
 
     private getInventoryDefaults() {
         const { variables } = this.props;
+        const inventoryOverrides = this.props.editor?.inventoryOverrides;
         const newInv = {};
 
         for (const i in variables) {
             if (variables.hasOwnProperty(i)) {
+                const override = inventoryOverrides ? inventoryOverrides[i] : null;
                 const inv = variables[i];
-                newInv[inv.id] = this.getVariableValue(inv.previewItem);
+                newInv[inv.id] = override ? override : this.getVariableValue(inv.previewItem);
             }
         }
 
@@ -192,7 +194,10 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
             this.createExperience();
         }
 
-        if (prevProps.variables !== this.props.variables) {
+        if (
+            prevProps.variables !== this.props.variables ||
+            prevProps.editor?.inventoryOverrides !== this.props.editor?.inventoryOverrides
+        ) {
             const inventoryOptions = this.getInventoryOptions();
             const inventory = this.getInventoryDefaults();
 

package/src/constants/copy.ts

@@ -149,8 +149,12 @@ export const publish = {
     emailTitle: 'STEP 3: Upload a CSV file with your user information in it.',
     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.',
+    datasetTitle: 'STEP 3: Render batch using dataset: [dataset_name]',
+    datasetDesc:
+        'You can select or modified the Dataset 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',
+    uploadDataset: 'Proceed with Dataset',
     generatingLink: 'STEP 4: Generating embed links',
     downloadLink: 'STEP 5: Download Your CSV file',
     btnDownload: 'Download CSV',

package/src/services/API.ts

@@ -67,6 +67,14 @@ export interface IImposiumAPI {
         compId?: string,
         addMedia?: boolean
     ): Promise<any | Error>;
+    importBatchDataFromDataset(
+        batchId: string,
+        datasetId: string,
+        embed?: boolean,
+        accessKey?: string,
+        compId?: string,
+        addMedia?: boolean
+    ): Promise<any | Error>;
     updateBatchColumns(batchId: string, columns: any);
     insertNewRow(batchId: string, rowIndex: number);
     updateCellValue(batchId: string, colIndex: number, rowIndex: number, value: string);
@@ -717,6 +725,34 @@ export default class API {
         });
     };
 
+    public importBatchDataFromDataset = (
+        batchId: string,
+        datasetId: string,
+        embed: boolean = false,
+        accessKey: string = null,
+        compId: string = null,
+        addMedia: boolean = false
+    ): Promise<any | Error> => {
+        const formData: FormData = new FormData();
+
+        if (embed && accessKey && compId) {
+            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) {
+            formData.append('include_media', 'true');
+        }
+        return this.doRequest({
+            method: 'POST',
+            url: `/batch/${batchId}/data/from-dataset/${datasetId}`,
+            data: formData
+        });
+    };
+
     public updateBatchColumns = (batchId: string, columns: any[]): Promise<any | Error> => {
         return this.doRequest({
             method: 'PUT',