@imposium-hub/components 2.3.11-0 → 2.4.0-1

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

@@ -5,10 +5,12 @@ import HRule from '../h-rule/HRule';
 import {
     ICON_DOWNLOAD,
     ICON_EMAIL,
+    ICON_EXCLAIMATION_TRIANGLE,
     ICON_GLOBE,
     ICON_HUBSPOT,
     ICON_IMAGE,
-    ICON_PROJECT_DIAGRAM
+    ICON_PROJECT_DIAGRAM,
+    ICON_UP_RIGHT_FROM_SQUARE
 } from '../../constants/icons';
 import { IImposiumAPI } from '../../services/API';
 import * as copy from '../../constants/copy';
@@ -23,8 +25,11 @@ import { publishVersion } from '../../redux/actions/publish';
 import { connect } from 'react-redux';
 
 interface IPublishWizardProps {
+    fromCrM?: boolean;
+    creativeManagerBaseUrl?: string;
     story: any;
     project: any;
+    updateEditorConfig(c): void;
     editor: any;
     updateScene(d): void;
     editStory(s): void;
@@ -33,7 +38,6 @@ interface IPublishWizardProps {
     exportExperiences: () => void;
     publishVersion: (api: IImposiumAPI, sId: string) => any;
     batchesList: any;
-    publishing: boolean;
     onClose(): any;
     api: IImposiumAPI;
     handleError(e): void;
@@ -66,7 +70,6 @@ interface IPublishWizardProps {
     renderBatch: (batchId: string, postRenderActions?: any) => any;
     publishData: any;
     onDeleteBatch?: (batchId: string) => any;
-    onBackBtn?: () => void;
 }
 
 export interface ICredential {
@@ -91,6 +94,7 @@ interface IPublishWizardState {
     error: boolean;
     next: boolean;
     nextStep: boolean;
+    publishError: string;
 }
 
 interface IBigButtonProps {
@@ -134,12 +138,27 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             done: false,
             error: false,
             next: false,
-            nextStep: false
+            nextStep: false,
+            publishError: null
         };
         this.emailWorkflow = React.createRef();
         this.hiddenFileInputRef = React.createRef();
     }
 
+    public componentDidUpdate(prevProps, prevState) {
+        // If we just finished publushing, and we're on the first screen still go to the second screen
+        if (
+            prevProps.publishData.publishing &&
+            !this.props.publishData.publishing &&
+            this.state.screenIndex === 0 &&
+            !this.state.publishError
+        ) {
+            this.setState({
+                screenIndex: 1
+            });
+        }
+    }
+
     public componentDidMount() {
         const { story, api, handleError, activeComposition } = this.props;
         // Pull in all of the access creds for the composition dropdown
@@ -275,12 +294,25 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const {
             story: { id },
             api,
-            handleError
+            handleError,
+            fromCrM
         } = this.props;
-        this.props.publishVersion(api, id).catch((e) => {
-            handleError(e);
-        });
-        this.setState({ screenIndex: 1 });
+
+        if (fromCrM) {
+            this.props
+                .publishVersion(api, id)
+                .then(() => {
+                    this.setState({ screenIndex: 1 });
+                })
+                .catch((e) => {
+                    this.setState({ publishError: e });
+                });
+        } else {
+            this.props.publishVersion(api, id).catch((e) => {
+                handleError(e);
+            });
+            this.setState({ screenIndex: 1 });
+        }
     }
 
     private onCloseHandler = () => {
@@ -296,7 +328,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
     private renderLowerButtons() {
         const { screenIndex, done, error, next } = this.state;
-        const { publishing } = this.props;
+        const { publishing } = this.props.publishData;
 
         const lowerButtons = [];
 
@@ -350,20 +382,13 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     size={'large'}
                     key='btn-back'
                     onClick={() =>
-                        this.setState(
-                            {
-                                screenIndex: backIndex,
-                                next: false,
-                                nextStep: false,
-                                error: false,
-                                done: false
-                            },
-                            () => {
-                                if (this.props.onBackBtn) {
-                                    this.props.onBackBtn();
-                                }
-                            }
-                        )
+                        this.setState({
+                            screenIndex: backIndex,
+                            next: false,
+                            nextStep: false,
+                            error: false,
+                            done: false
+                        })
                     }
                     color='primary'>
                     {copy.publish.btnBack}
@@ -390,11 +415,19 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     }
 
     private renderPublish() {
+        const { publishing } = this.props.publishData;
+        const { publishError } = this.state;
+        const error = publishError ? (
+            <p className='publish-error'>
+                <span className='icon'>{ICON_EXCLAIMATION_TRIANGLE}</span>&nbsp;&nbsp;{publishError}
+            </p>
+        ) : null;
         return (
             <div>
                 <h2>{copy.publish.publishStepTitle}</h2>
                 <HRule />
-                <p>{copy.publish.publishStepDesc}</p>
+                <p>{publishing ? copy.publish.publishInProgress : copy.publish.publishStepDesc}</p>
+                {error}
             </div>
         );
     }
@@ -405,7 +438,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const { compositions, afterEffects, selectedComposition, credentials, accessKey } =
             this.state;
 
-        const { publishDataset } = this.props;
+        const { publishDataset, fromCrM, story, creativeManagerBaseUrl } = this.props;
 
         for (const comp of compositions) {
             compOpts.push({
@@ -428,56 +461,75 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             });
         }
 
-        let distributionOptions = [
-            {
-                label: (
-                    <span>
-                        {ICON_GLOBE}&nbsp;{copy.publish.btnWebsite}
-                    </span>
-                ),
-                onClick: (e) => this.onSelectOption(2)
-            },
-            {
-                label: (
-                    <span>
-                        {ICON_EMAIL}&nbsp;{copy.publish.btnEmail}
-                    </span>
-                ),
-                onClick: (e) => this.onSelectOption(3)
-            },
-            {
-                label: (
-                    <span>
-                        {ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}
-                    </span>
-                ),
-                onClick: (e) => this.onSelectOption(5)
-            },
-            {
-                label: (
-                    <span>
-                        {ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}
-                    </span>
-                ),
-                onClick: (e) => this.onSelectOption(6)
-            },
-            {
-                label: (
-                    <span>
-                        {ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}
-                    </span>
-                ),
-                onClick: (e) => this.onSelectOption(7)
-            },
-            {
-                label: (
-                    <span>
-                        {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
-                    </span>
-                ),
-                onClick: (e) => this.onSelectOption(8)
-            }
-        ];
+        let distributionOptions = !fromCrM
+            ? [
+                  {
+                      label: (
+                          <span>
+                              {ICON_GLOBE}&nbsp;{copy.publish.btnWebsite}
+                          </span>
+                      ),
+                      onClick: (e) => this.onSelectOption(2)
+                  },
+                  {
+                      label: (
+                          <span>
+                              {ICON_EMAIL}&nbsp;{copy.publish.btnEmail}
+                          </span>
+                      ),
+                      onClick: (e) => this.onSelectOption(3)
+                  },
+                  {
+                      label: (
+                          <span>
+                              {ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}
+                          </span>
+                      ),
+                      onClick: (e) => this.onSelectOption(5)
+                  },
+                  {
+                      label: (
+                          <span>
+                              {ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}
+                          </span>
+                      ),
+                      onClick: (e) => this.onSelectOption(6)
+                  },
+                  {
+                      label: (
+                          <span>
+                              {ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}
+                          </span>
+                      ),
+                      onClick: (e) => this.onSelectOption(7)
+                  },
+                  {
+                      label: (
+                          <span>
+                              {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
+                          </span>
+                      ),
+                      onClick: (e) => this.onSelectOption(8)
+                  }
+              ]
+            : [
+                  {
+                      label: (
+                          <span>
+                              {ICON_DOWNLOAD}&nbsp;{copy.publish.btnRunTestBatch}
+                          </span>
+                      ),
+                      onClick: (e) => this.onSelectOption(7)
+                  },
+                  {
+                      label: (
+                          <span>
+                              {ICON_UP_RIGHT_FROM_SQUARE}&nbsp;{copy.publish.btnCrM}
+                          </span>
+                      ),
+                      link: `${creativeManagerBaseUrl}/library/${story.creativeLibraryId}/creative/${story.creativeLibraryId}/versions/`
+                  }
+              ];
 
         if (publishDataset) {
             const indexes = [0, 2, 3];
@@ -489,41 +541,67 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             }, []);
         }
 
+        const compDropdown = !fromCrM ? (
+            <SelectField
+                label={copy.project.compName}
+                value={selectedComposition}
+                onChange={this.onCompositionChange}
+                options={compOpts}
+                tooltip={copy.project.tooltipCompId}
+            />
+        ) : null;
+
+        const accessKeyDropdown = !fromCrM ? (
+            <SelectField
+                label={copy.publish.accessKey}
+                value={accessKey}
+                onChange={this.onCredentialsChange}
+                options={credOpts}
+                tooltip={copy.publish.tooltipAccessKey}
+            />
+        ) : null;
+
         return (
             <div>
-                <h2>{copy.publish.distributeStepTitle}</h2>
+                <h2>
+                    {!fromCrM
+                        ? copy.publish.distributeStepTitle
+                        : copy.publish.distributeStepTitleFromCrM}
+                </h2>
                 <HRule />
-                <p>{copy.publish.distributeStepDesc}</p>
+                <p>
+                    {!fromCrM
+                        ? copy.publish.distributeStepDesc
+                        : copy.publish.distributeStepDescFromCrM}
+                </p>
                 <HRule />
-                {!this.state.selectedComposition && (
+                {!this.state.selectedComposition && !fromCrM && (
                     <p className={'text-danger'}>{copy.publish.noCompErrorDesc}</p>
                 )}
                 <div style={{ marginTop: '10px' }}>
-                    <SelectField
-                        label={copy.project.compName}
-                        value={selectedComposition}
-                        onChange={this.onCompositionChange}
-                        options={compOpts}
-                        tooltip={copy.project.tooltipCompId}
-                    />
-                    <SelectField
-                        label={copy.publish.accessKey}
-                        value={accessKey}
-                        onChange={this.onCredentialsChange}
-                        options={credOpts}
-                        tooltip={copy.publish.tooltipAccessKey}
-                    />
+                    {compDropdown}
+                    {accessKeyDropdown}
 
                     <div className='link-wrapper'>
-                        {distributionOptions?.map((option, index) => {
-                            return (
-                                <BigButton
-                                    key={index}
-                                    disabled={!selectedComposition}
-                                    label={option.label}
-                                    onClick={option.onClick}
-                                />
-                            );
+                        {distributionOptions?.map((option: any, index) => {
+                            if (option.link) {
+                                return (
+                                    <BigLink
+                                        key={index}
+                                        label={option.label}
+                                        link={option.link}
+                                    />
+                                );
+                            } else {
+                                return (
+                                    <BigButton
+                                        key={index}
+                                        disabled={!selectedComposition}
+                                        label={option.label}
+                                        onClick={option.onClick}
+                                    />
+                                );
+                            }
                         })}
                     </div>
                 </div>

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

@@ -488,7 +488,12 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     }
 
     public renderLabel() {
-        const { isExport, batchJobs, publishDataset } = this.props;
+        const {
+            isExport,
+            batchJobs,
+            publishDataset,
+            batchesList: { error }
+        } = this.props;
         const { renderedBatch, selectedBatchId, uploading, uploadComplete } = this.state;
 
         if (
@@ -507,6 +512,10 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             );
         }
 
+        if (batchJobs.failed && error[selectedBatchId]) {
+            return <>{error[selectedBatchId].error}</>;
+        }
+
         if (uploading) {
             const uploadingCopy = isExport
                 ? copy.publish.importingData
@@ -661,14 +670,9 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             batchError,
             creativeManagerOverrides
         } = this.state;
-
         const {
             isExport,
             batchJobs: { missing, renders, failed },
-            batchesList: {
-                error,
-                selected: { name }
-            },
             isCrM,
             publishDataset
         } = this.props;
@@ -772,49 +776,13 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         const title = publishDataset
             ? copy.publish.datasetTitle.replace('[dataset_name]', this.props.activeDataset?.name)
             : copy.publish.emailTitle;
-
         const desc = publishDataset ? '' : copy.publish.emailDesc;
 
-        const showBatchError = () => {
-            if (failed && error && error[selectedBatchId]) {
-                let errorMsg: JSX.Element = <></>;
-                let errorExpMsg: JSX.Element = <></>;
-                if (error[selectedBatchId]) {
-                    const { experience } = error[selectedBatchId];
-                    errorMsg = <span className='error-title'>{error[selectedBatchId].error}</span>;
-                    errorExpMsg = experience?.error ? <div>{experience.error}</div> : <></>;
-                }
-
-                return (
-                    <div className='batch-job-error'>
-                        <h2>{`Batch "${name}" stopped due to errors.`}</h2>
-                        <table>
-                            <thead></thead>
-                            <tbody>
-                                <tr>
-                                    <td>Batch ID:</td>
-                                    <td>{selectedBatchId}</td>
-                                </tr>
-                                <tr>
-                                    <td>First Error:</td>
-                                    <td>
-                                        {errorMsg}
-                                        <br />
-                                        {errorExpMsg}
-                                    </td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                );
-            }
-        };
         const uploadCSV = (
             <div>
                 <h2>{title}</h2>
                 <HRule />
                 <p>{desc}</p>
-                {showBatchError()}
                 <input
                     type='file'
                     style={{ display: 'none' }}

package/src/components/select-field/SelectField.tsx

@@ -7,7 +7,7 @@ import { copying } from '../../constants/copy';
 
 interface ISelectFieldProps {
     buttons?: any;
-    label?: any;
+    label?: string;
     selectRef?: any;
     options: any;
     disable?: boolean;
@@ -61,9 +61,6 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
         }
 
         this.props.onChange(val);
-        if (this.props.selectRef?.current) {
-            this.props.selectRef.current.blur();
-        }
     }
 
     public render() {

package/src/components/slider-field/SliderField.tsx

@@ -3,7 +3,7 @@ import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
 
 interface ISliderFieldProps {
-    label?: any;
+    label?: string;
     value: number;
     width?: string | number;
     min: number;

package/src/components/smpte-field/SMPTEField.tsx

@@ -5,7 +5,7 @@ import { TIMECODE } from '../../constants/timecode';
 import { getSMPTE } from '../../Util';
 
 interface ISMPTEFieldProps {
-    label?: any;
+    label?: string;
     placeholder?: string;
     readOnly?: boolean;
     tooltip?: IToolTipConfig | string;

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

@@ -509,9 +509,9 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                                             api.cancelExperiencePolling().then(
                                                                 () => {
                                                                     onError(
-                                                                        copy.runExpError.replace(
-                                                                            '[error]',
-                                                                            e.error
+                                                                        copy.runExpIdError.replace(
+                                                                            '[expId]',
+                                                                            experienceId
                                                                         )
                                                                     );
 
@@ -572,13 +572,9 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                 .catch((e) => {
                                     this.resetState();
                                     if (onError) {
-                                        if (e.error) {
-                                            onError(copy.runExpError.replace('[error]', e.error));
-                                        } else {
-                                            onError(
-                                                copy.runExpIdError.replace('[expId]', experienceId)
-                                            );
-                                        }
+                                        onError(
+                                            copy.runExpIdError.replace('[expId]', experienceId)
+                                        );
                                     }
                                 });
                         }

package/src/components/text-area-field/TextAreaField.tsx

@@ -9,7 +9,7 @@ interface ITextAreaFieldProps {
     buttons?: any;
     controlled?: boolean;
     disabled?: boolean;
-    label?: any;
+    label?: string;
     placeholder?: string;
     readOnly?: boolean;
     value: string;

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

@@ -23,7 +23,7 @@ interface ITextFieldProps {
     disabled?: boolean;
     submittable?: boolean;
     focusOnMount?: boolean;
-    label?: any;
+    label?: string;
     placeholder?: string;
     readOnly?: boolean;
     value?: string;

package/src/constants/copy.ts

@@ -1,7 +1,6 @@
 export const assets = {
     tooltipFilter: 'Filter by Asset type',
     previewNotAvailable: 'Preview Not Available for this Asset Type',
-    dropAsset: 'Drop file(s) here.',
     iconTypes: {
         filter: 'Filter By Type',
         lut: 'LUT',
@@ -18,15 +17,15 @@ export const assets = {
         after_effects: 'After Effects'
     },
     uploads: {
-        noUploads: 'No files selected, drag and drop files here to begin.',
+        noUploads: 'There are currently no assets uploading...',
         preparePhase: 'Preparing asset...',
         autoTagFilname: 'Tag by file name',
         autoTagDelimiter: 'Tag by Delimiter',
         delimiterOptions: 'Delimiter Options',
         manualTagging: 'Tag Manually',
-        assignToProjectInput: 'Make Global',
+        assignToProjectInput: 'Assign to Project',
         assignToProjectInfo:
-            'If selected, any assets uploaded will be available to use with all projects on the current organization.',
+            'If selected, any assets uploaded will only be available to use with the currently selected project.',
         uploadButton: 'Upload',
         cancelButton: 'Cancel'
     },
@@ -77,7 +76,6 @@ export const previewer = {
 };
 
 export const compositions = {
-    tooltipPropId: 'Copy Property ID',
     name: 'Name',
     width: 'Width',
     height: 'Height',
@@ -117,6 +115,9 @@ export const compositions = {
 };
 
 export const publish = {
+    publishInProgress: 'Publish to Creative Manager in progress',
+    btnRunTestBatch: 'Run Test Batch',
+    btnCrM: 'Creative Manager',
     creativeLibraryId: 'Creative Library ID',
     creativeId: 'Creative ID',
     email: 'Notification Email',
@@ -137,8 +138,11 @@ export const publish = {
 
     // distribute
     distributeStepTitle: 'STEP 2: How do you want your users to view their video?',
+    distributeStepTitleFromCrM: 'STEP 2: Run a test batch or return to Creative Manager?',
     distributeStepDesc:
         'Select which Composition you want to deliver, access credentials you want to use, and distribution channel.',
+    distributeStepDescFromCrM:
+        'You can run a test batch to preview a sample data set, or return to Creative Manager where you can publish the final version set.',
     compositionError: 'Please Select Composition',
 
     // webpage

package/src/constants/icons.tsx

@@ -37,6 +37,7 @@ import { faFont } from '@fortawesome/free-solid-svg-icons/faFont';
 import { faAlignLeft } from '@fortawesome/free-solid-svg-icons/faAlignLeft';
 import { faAlignRight } from '@fortawesome/free-solid-svg-icons/faAlignRight';
 import { faAlignCenter } from '@fortawesome/free-solid-svg-icons/faAlignCenter';
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons/faUpRightFromSquare';
 import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
 import { faArrowToTop } from '@fortawesome/pro-light-svg-icons/faArrowToTop';
 import { faArrowToBottom } from '@fortawesome/pro-light-svg-icons/faArrowToBottom';
@@ -212,3 +213,5 @@ export const ICON_CENTER_ANCHOR = <FontAwesomeIcon icon={faCircleSmall} />;
 export const ICON_CLAPPERBOARD_PLAY = <FontAwesomeIcon icon={faClapperboardPlay} />;
 
 export const ICON_CODE = <FontAwesomeIcon icon={faCode} />;
+
+export const ICON_UP_RIGHT_FROM_SQUARE = <FontAwesomeIcon icon={faUpRightFromSquare} />;