@imposium-hub/components 2.15.0-3 → 2.16.0

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

@@ -39,7 +39,12 @@ interface IPublishWizardProps {
     checkStoryForErrors(): any;
     addViewer(c: any): void;
     exportExperiences: () => void;
-    publishVersion: (api: IImposiumAPI, sId: string, creativeIds?: string[]) => any;
+    publishVersion: (
+        api: IImposiumAPI,
+        sId: string,
+        message?: string,
+        creativeIds?: string[]
+    ) => any;
     batchesList: any;
     onClose(): any;
     api: IImposiumAPI;
@@ -103,6 +108,7 @@ interface IPublishWizardState {
     selectedCreatives: string[];
     changeReport: IChangeReportSection[] | null;
     publishNotes: string;
+    publishTriggered: boolean;
 }
 
 interface IBigButtonProps {
@@ -156,7 +162,8 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             publishError: null,
             selectedCreatives: [],
             changeReport: null,
-            publishNotes: ''
+            publishNotes: '',
+            publishTriggered: false
         };
         this.emailWorkflow = React.createRef();
         this.hiddenFileInputRef = React.createRef();
@@ -164,9 +171,11 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
     public componentDidUpdate(prevProps, prevState) {
         const hasReviewStep = !!this.props.auditLogEnabled;
-        // If we just finished publishing, advance from the Publish screen to the Distribution screen
-        const publishScreenIndex = hasReviewStep ? 1 : 0;
-        const distributionScreenIndex = hasReviewStep ? 2 : 1;
+        // If we just finished publishing, advance to the Distribution screen
+        // When hasReviewStep: screen 0 = Review Changes, screen 1 = Distribution
+        // When !hasReviewStep: screen 0 = Publish, screen 1 = Distribution
+        const publishScreenIndex = 0;
+        const distributionScreenIndex = hasReviewStep ? 1 : 1;
         if (
             prevProps.publishData.publishing &&
             !this.props.publishData.publishing &&
@@ -190,7 +199,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     this.setState({ changeReport: report });
                 })
                 .catch(() => {
-                    this.setState({ changeReport: null });
+                    this.setState({ changeReport: [] });
                 });
         }
 
@@ -324,18 +333,20 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     };
 
     private handlePublish() {
+        this.setState({ publishTriggered: true });
         const {
             story: { id },
             api,
             handleError,
             fromCrM
         } = this.props;
-        const hasReviewStep = !!this.props.auditLogEnabled;
-        const distributionScreenIndex = hasReviewStep ? 2 : 1;
+        const distributionScreenIndex = 1;
+
+        const { publishNotes } = this.state;
 
         if (fromCrM) {
             this.props
-                .publishVersion(api, id, this.state.selectedCreatives)
+                .publishVersion(api, id, publishNotes, this.state.selectedCreatives)
                 .then(() => {
                     this.setState({ screenIndex: distributionScreenIndex });
                 })
@@ -343,7 +354,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     this.setState({ publishError: e });
                 });
         } else {
-            this.props.publishVersion(api, id).catch((e) => {
+            this.props.publishVersion(api, id, publishNotes).catch((e) => {
                 handleError(e);
             });
             this.setState({ screenIndex: distributionScreenIndex });
@@ -382,7 +393,12 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     }
 
     private getErrorCopyForCrMPublish() {
-        const { story, project } = this.props;
+        const { story, project, fromCrM } = this.props;
+
+        if (!fromCrM) {
+            return null;
+        }
+
         const variables = story ? story.acts[project.actId].inventory : {};
         const varLength = variables ? Object.keys(variables).length : 0;
 
@@ -399,12 +415,12 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const { publishing } = this.props.publishData;
         const disabledForCrM = this.shouldDisablePublishButtonForCrM();
         const hasReviewStep = !!this.props.auditLogEnabled;
-        const publishScreenIndex = hasReviewStep ? 1 : 0;
-        const distributionScreenIndex = hasReviewStep ? 2 : 1;
+        const distributionScreenIndex = 1;
         const lowerButtons = [];
 
         if (hasReviewStep && screenIndex === 0) {
             // Review Changes step: Skip and Publish buttons (no Back)
+            // Publish triggers the actual publish and goes to Distribution
             lowerButtons.push(
                 <Button
                     tooltip={copy.publish.btnSkip}
@@ -420,13 +436,14 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     tooltip={copy.publish.btnPublish}
                     size={'large'}
                     key='btn-publish-review'
-                    onClick={() => this.setState({ screenIndex: publishScreenIndex })}
+                    disabled={publishing}
+                    onClick={() => this.handlePublish()}
                     color='primary'>
                     {copy.publish.btnPublish}
                 </Button>
             );
-        } else if (screenIndex === publishScreenIndex) {
-            // Publish step: Publish and Skip buttons
+        } else if (!hasReviewStep && screenIndex === 0) {
+            // Non-review path: original Publish step
             const projectType = story.creativeId
                 ? CRM_INTEGRATED_PROJECT_TYPES.SINGLE_CREATIVE
                 : CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE;
@@ -447,7 +464,6 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                 </Button>
             );
 
-            // skip publish
             lowerButtons.push(
                 <Button
                     tooltip={copy.publish.btnSkip}
@@ -458,19 +474,6 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     {copy.publish.btnSkip}
                 </Button>
             );
-
-            if (hasReviewStep) {
-                lowerButtons.push(
-                    <Button
-                        tooltip={copy.publish.btnBack}
-                        size={'large'}
-                        key='btn-back'
-                        onClick={() => this.setState({ screenIndex: 0 })}
-                        color='primary'>
-                        {copy.publish.btnBack}
-                    </Button>
-                );
-            }
         } else {
             // Distribution and sub-screens: Back button (and Done/Finish if applicable)
             if (done || error) {
@@ -486,18 +489,21 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                 );
             }
 
-            // Back button: from distribution → go to publish step
+            // Back button: from distribution → go to review/publish (screen 0)
             // from sub-screens → go back to distribution
-            const backIndex =
-                screenIndex === distributionScreenIndex
-                    ? publishScreenIndex
-                    : distributionScreenIndex;
+            // Disable back to review if publishing or already published
+            const backIndex = screenIndex === distributionScreenIndex ? 0 : distributionScreenIndex;
+            const disableBack =
+                hasReviewStep &&
+                screenIndex === distributionScreenIndex &&
+                (publishing || this.state.publishTriggered);
 
             lowerButtons.push(
                 <Button
                     tooltip={copy.publish.btnBack}
                     size={'large'}
                     key='btn-back'
+                    disabled={disableBack}
                     onClick={() =>
                         this.setState(
                             {
@@ -555,6 +561,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     <textarea
                         className='publish-notes-textarea'
                         value={publishNotes}
+                        maxLength={copy.publish.publishNotesMaxLength}
                         onChange={(e) => this.setState({ publishNotes: e.target.value })}
                         placeholder={copy.publish.publishNotesPlaceholder}
                     />
@@ -572,6 +579,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const projectType = story.creativeId
             ? CRM_INTEGRATED_PROJECT_TYPES.SINGLE_CREATIVE
             : CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE;
+
         const error = errorCopy ? (
             <p className='publish-error'>
                 <span className='icon'>{ICON_EXCLAIMATION_TRIANGLE}</span>&nbsp;&nbsp;{errorCopy}
@@ -696,9 +704,8 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     private nextClickHandler = () => {
         this.setState({ nextStep: true, error: false });
 
-        const hasReviewStep = !!this.props.auditLogEnabled;
-        const exportIndex = hasReviewStep ? 8 : 7;
-        const crmExportIndex = hasReviewStep ? 9 : 8;
+        const exportIndex = 7;
+        const crmExportIndex = 8;
         if (this.state.screenIndex === exportIndex || this.state.screenIndex === crmExportIndex) {
             this.emailWorkflow.current.getWrappedInstance().proceedWithExport();
         }
@@ -758,30 +765,28 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             <div className='publish-wizard'>
                 <div className='publish-wizard-header'>
                     {copy.publish.publishTitle}
-                    <PublishStatusIndicator api={api} />
+                    <PublishStatusIndicator
+                        api={api}
+                        storyId={story.id}
+                    />
                 </div>
                 {/* <PaneErrorBoundry>*/}
                 <div>
                     {hasReviewStep && screenIndex === 0 && this.renderReviewChanges()}
-                    {screenIndex === (hasReviewStep ? 1 : 0) && this.renderPublish()}
-                    {screenIndex === (hasReviewStep ? 2 : 1) && this.renderDistributionOptions()}
-                    {screenIndex === (hasReviewStep ? 3 : 2) && (
+                    {!hasReviewStep && screenIndex === 0 && this.renderPublish()}
+                    {screenIndex === 1 && this.renderDistributionOptions()}
+                    {screenIndex === 2 && (
                         <WebpageHosted
                             story={story}
                             compositionId={selectedComposition}
                             accessKey={accessKey}
                         />
                     )}
-                    {(screenIndex === (hasReviewStep ? 4 : 3) ||
-                        screenIndex === (hasReviewStep ? 8 : 7) ||
-                        screenIndex === (hasReviewStep ? 9 : 8)) && (
+                    {(screenIndex === 3 || screenIndex === 7 || screenIndex === 8) && (
                         <EmailWorkflow
-                            isCrM={screenIndex === (hasReviewStep ? 9 : 8)}
-                            isExport={
-                                screenIndex === (hasReviewStep ? 8 : 7) ||
-                                screenIndex === (hasReviewStep ? 9 : 8)
-                            }
-                            isEmail={screenIndex === (hasReviewStep ? 4 : 3)}
+                            isCrM={screenIndex === 8}
+                            isExport={screenIndex === 7 || screenIndex === 8}
+                            isEmail={screenIndex === 3}
                             api={api}
                             story={story}
                             variables={variables}
@@ -807,7 +812,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                             ref={this.emailWorkflow}
                         />
                     )}
-                    {screenIndex === (hasReviewStep ? 6 : 5) && (
+                    {screenIndex === 5 && (
                         <HubSpotFlow
                             handleError={handleError}
                             status={status}
@@ -817,7 +822,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                             compositionId={selectedComposition}
                         />
                     )}
-                    {screenIndex === (hasReviewStep ? 7 : 6) && <APIIntegration />}
+                    {screenIndex === 6 && <APIIntegration />}
                     <br />
                     <HRule />
                     <div className='lower-buttons'>{this.renderLowerButtons()}</div>
@@ -907,7 +912,7 @@ export const DistributeOptions = ({
     creativeManagerBaseUrl,
     hasReviewStep = false
 }) => {
-    const shift = hasReviewStep ? 1 : 0;
+    const shift = 0;
     const selectOption = (index: number) => onSelectOption(index + shift);
     const isPrerendersEnabled = useFlag('feature.IMPOSIUM_EDITOR.PRERENDERS_CRM_WORKFLOW');