@imposium-hub/components 2.16.0-0 → 3.0.0-0

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

@@ -1,8 +1,5 @@
 import * as React from 'react';
-import { CrMPublishUI } from './publish/CrMPublishUI';
 import Button from '../button/Button';
-import ChangeReportTree from '../change-report/ChangeReportTree';
-import { IChangeReportSection } from '../../constants/snippets';
 import SelectField from '../select-field/SelectField';
 import HRule from '../h-rule/HRule';
 import {
@@ -26,8 +23,6 @@ import PublishStatusIndicator from './publish/PublishStatusIndicator';
 import { bindActionCreators } from 'redux';
 import { publishVersion } from '../../redux/actions/publish';
 import { connect } from 'react-redux';
-import { CRM_INTEGRATED_PROJECT_TYPES } from '../../constants/publish';
-import { useFlag } from '@innovid/feature-flags-react';
 
 interface IPublishWizardProps {
     fromCrM?: boolean;
@@ -39,12 +34,7 @@ interface IPublishWizardProps {
     checkStoryForErrors(): any;
     addViewer(c: any): void;
     exportExperiences: () => void;
-    publishVersion: (
-        api: IImposiumAPI,
-        sId: string,
-        message?: string,
-        creativeIds?: string[]
-    ) => any;
+    publishVersion: (api: IImposiumAPI, sId: string) => any;
     batchesList: any;
     onClose(): any;
     api: IImposiumAPI;
@@ -79,7 +69,6 @@ interface IPublishWizardProps {
     publishData: any;
     onDeleteBatch?: (batchId: string) => any;
     onBackBtn?: () => void;
-    auditLogEnabled?: boolean;
 }
 
 export interface ICredential {
@@ -105,10 +94,6 @@ interface IPublishWizardState {
     next: boolean;
     nextStep: boolean;
     publishError: string;
-    selectedCreatives: string[];
-    changeReport: IChangeReportSection[] | null;
-    publishNotes: string;
-    publishTriggered: boolean;
 }
 
 interface IBigButtonProps {
@@ -137,12 +122,8 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             publishData: { unpublished_changes }
         } = props;
 
-        const hasReviewStep = !!props.auditLogEnabled;
-        const screenIndex = hasReviewStep
-            ? 0
-            : unpublished_changes === undefined || unpublished_changes === true
-            ? 0
-            : 1;
+        const screenIndex =
+            unpublished_changes === undefined || unpublished_changes === true ? 0 : 1;
 
         this.state = {
             compositions: [],
@@ -159,50 +140,28 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             error: false,
             next: false,
             nextStep: false,
-            publishError: null,
-            selectedCreatives: [],
-            changeReport: null,
-            publishNotes: '',
-            publishTriggered: false
+            publishError: null
         };
         this.emailWorkflow = React.createRef();
         this.hiddenFileInputRef = React.createRef();
     }
 
     public componentDidUpdate(prevProps, prevState) {
-        const hasReviewStep = !!this.props.auditLogEnabled;
-        // 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 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 === publishScreenIndex &&
+            this.state.screenIndex === 0 &&
             !this.state.publishError
         ) {
             this.setState({
-                screenIndex: distributionScreenIndex
+                screenIndex: 1
             });
         }
     }
 
     public componentDidMount() {
-        const { story, api, handleError, activeComposition, auditLogEnabled } = this.props;
-
-        if (auditLogEnabled) {
-            api.getAuditLog(story.id)
-                .then((entries) => {
-                    const currentEntry = entries?.[0];
-                    const report = currentEntry?.id === 'current' ? currentEntry.changes : null;
-                    this.setState({ changeReport: report });
-                })
-                .catch(() => {
-                    this.setState({ changeReport: [] });
-                });
-        }
-
+        const { story, api, handleError, activeComposition } = this.props;
         // Pull in all of the access creds for the composition dropdown
         api.getAssets({ type: ASSET_TYPES.VIDEO_COMPOSITION }, story.id)
             .then((res) => {
@@ -333,31 +292,27 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     };
 
     private handlePublish() {
-        this.setState({ publishTriggered: true });
         const {
             story: { id },
             api,
             handleError,
             fromCrM
         } = this.props;
-        const distributionScreenIndex = 1;
-
-        const { publishNotes } = this.state;
 
         if (fromCrM) {
             this.props
-                .publishVersion(api, id, publishNotes, this.state.selectedCreatives)
+                .publishVersion(api, id)
                 .then(() => {
-                    this.setState({ screenIndex: distributionScreenIndex });
+                    this.setState({ screenIndex: 1 });
                 })
                 .catch((e) => {
                     this.setState({ publishError: e });
                 });
         } else {
-            this.props.publishVersion(api, id, publishNotes).catch((e) => {
+            this.props.publishVersion(api, id).catch((e) => {
                 handleError(e);
             });
-            this.setState({ screenIndex: distributionScreenIndex });
+            this.setState({ screenIndex: 1 });
         }
     }
 
@@ -376,77 +331,22 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const { story, project, fromCrM } = this.props;
         const variables = story ? story.acts[project.actId].inventory : {};
         const varLength = variables ? Object.keys(variables).length : 0;
-        const projectType = story.creativeId
-            ? CRM_INTEGRATED_PROJECT_TYPES.SINGLE_CREATIVE
-            : CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE;
 
         if (fromCrM && varLength === 0) {
             return true;
-        } else if (
-            fromCrM &&
-            this.state.selectedCreatives.length === 0 &&
-            projectType === CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE
-        ) {
-            return true;
         }
         return false;
     }
 
-    private getErrorCopyForCrMPublish() {
-        const { story, project } = this.props;
-        const variables = story ? story.acts[project.actId].inventory : {};
-        const varLength = variables ? Object.keys(variables).length : 0;
-
-        if (varLength === 0) {
-            return copy.publish.noVariablesError;
-        } else if (this.state.selectedCreatives.length === 0) {
-            return null;
-        }
-    }
-
     private renderLowerButtons() {
         const { screenIndex, done, error, next } = this.state;
-        const { fromCrM, story } = this.props;
         const { publishing } = this.props.publishData;
         const disabledForCrM = this.shouldDisablePublishButtonForCrM();
-        const hasReviewStep = !!this.props.auditLogEnabled;
-        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}
-                    key='btn-skip'
-                    size={'large'}
-                    onClick={() => this.setState({ screenIndex: distributionScreenIndex })}
-                    color='primary'>
-                    {copy.publish.btnSkip}
-                </Button>
-            );
-            lowerButtons.push(
-                <Button
-                    tooltip={copy.publish.btnPublish}
-                    size={'large'}
-                    key='btn-publish-review'
-                    disabled={publishing}
-                    onClick={() => this.handlePublish()}
-                    color='primary'>
-                    {copy.publish.btnPublish}
-                </Button>
-            );
-        } 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;
-            const btnCopy = fromCrM
-                ? projectType === CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE
-                    ? `Publish to ${this.state.selectedCreatives.length} Creatives`
-                    : 'Publish to Creative Manager'
-                : copy.publish.btnPublish;
+        // publish and skip buttons
+        if (screenIndex === 0) {
+            // publish
             lowerButtons.push(
                 <Button
                     tooltip={copy.publish.btnPublish}
@@ -455,22 +355,23 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     key='btn-publish'
                     onClick={() => this.handlePublish()}
                     color='primary'>
-                    {btnCopy}
+                    {copy.publish.btnPublish}
                 </Button>
             );
 
+            // skip publish
             lowerButtons.push(
                 <Button
                     tooltip={copy.publish.btnSkip}
                     key='btn-skip'
                     size={'large'}
-                    onClick={() => this.setState({ screenIndex: distributionScreenIndex })}
+                    onClick={() => this.setState({ screenIndex: 1 })}
                     color='primary'>
                     {copy.publish.btnSkip}
                 </Button>
             );
         } else {
-            // Distribution and sub-screens: Back button (and Done/Finish if applicable)
+            // display button when emailworkflow downloading state is true to close the modal
             if (done || error) {
                 lowerButtons.push(
                     <Button
@@ -484,21 +385,14 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                 );
             }
 
-            // Back button: from distribution → go to review/publish (screen 0)
-            // from sub-screens → go back to distribution
-            // Disable back to review if publishing or already published
-            const backIndex = screenIndex === distributionScreenIndex ? 0 : distributionScreenIndex;
-            const disableBack =
-                hasReviewStep &&
-                screenIndex === distributionScreenIndex &&
-                (publishing || this.state.publishTriggered);
+            const backIndex = screenIndex === 1 ? 0 : 1;
 
+            // back button
             lowerButtons.push(
                 <Button
                     tooltip={copy.publish.btnBack}
                     size={'large'}
                     key='btn-back'
-                    disabled={disableBack}
                     onClick={() =>
                         this.setState(
                             {
@@ -520,6 +414,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                 </Button>
             );
 
+            // reimport after column align
             if (error) {
                 lowerButtons.push(
                     <Button
@@ -538,75 +433,29 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         return lowerButtons;
     }
 
-    private renderReviewChanges() {
-        const { changeReport, publishNotes } = this.state;
-        return (
-            <div className='publish-wizard-step publish-wizard-step--review'>
-                <h2>{copy.publish.reviewChangesStepTitle}</h2>
-                <HRule />
-                <p>{copy.publish.reviewChangesDescription}</p>
-                <ChangeReportTree
-                    sections={changeReport}
-                    defaultExpanded={true}
-                    emptyMessage={copy.publish.noChangesMessage}
-                    loadingMessage={copy.publish.loadingChangesMessage}
-                />
-                <div className='publish-notes-wrapper'>
-                    <label className='publish-notes-label'>{copy.publish.publishNotesLabel}</label>
-                    <textarea
-                        className='publish-notes-textarea'
-                        value={publishNotes}
-                        maxLength={copy.publish.publishNotesMaxLength}
-                        onChange={(e) => this.setState({ publishNotes: e.target.value })}
-                        placeholder={copy.publish.publishNotesPlaceholder}
-                    />
-                </div>
-            </div>
-        );
-    }
-
     private renderPublish() {
-        const { fromCrM, story } = this.props;
         const { publishing } = this.props.publishData;
+        const disabledForCrM = this.shouldDisablePublishButtonForCrM();
         const { publishError } = this.state;
-        const errorCopyForCrM = this.getErrorCopyForCrMPublish();
-        const errorCopy = publishError ? publishError : errorCopyForCrM ? errorCopyForCrM : null;
-        const projectType = story.creativeId
-            ? CRM_INTEGRATED_PROJECT_TYPES.SINGLE_CREATIVE
-            : CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE;
+        const errorCopy = publishError
+            ? publishError
+            : disabledForCrM
+            ? copy.publish.noVariablesError
+            : null;
+
         const error = errorCopy ? (
             <p className='publish-error'>
                 <span className='icon'>{ICON_EXCLAIMATION_TRIANGLE}</span>&nbsp;&nbsp;{errorCopy}
             </p>
         ) : null;
-
-        if (fromCrM) {
-            return (
-                <CrMPublishUI
-                    projectType={projectType}
-                    selectedCreatives={this.state.selectedCreatives}
-                    onUpdateSelectedCreatives={(c) => this.setState({ selectedCreatives: c })}
-                    onError={(e) => this.setState({ publishError: e })}
-                    publishing={publishing}
-                    error={error}
-                    creativeLibraryId={story.creativeLibraryId}
-                    projectId={story.id}
-                    api={this.props.api}
-                    crmBaseUrl={this.props.creativeManagerBaseUrl}
-                />
-            );
-        } else {
-            return (
-                <div>
-                    <h2>{copy.publish.publishStepTitle}</h2>
-                    <HRule />
-                    <p>
-                        {publishing ? copy.publish.publishInProgress : copy.publish.publishStepDesc}
-                    </p>
-                    {error}
-                </div>
-            );
-        }
+        return (
+            <div>
+                <h2>{copy.publish.publishStepTitle}</h2>
+                <HRule />
+                <p>{publishing ? copy.publish.publishInProgress : copy.publish.publishStepDesc}</p>
+                {error}
+            </div>
+        );
     }
 
     private renderDistributionOptions() {
@@ -638,6 +487,86 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             });
         }
 
+        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.creativeId}/versions/`
+                  }
+              ];
+
+        if (publishDataset) {
+            const indexes = [0, 2, 3];
+            distributionOptions = distributionOptions.reduce((acc, value, index) => {
+                if (!indexes.includes(index)) {
+                    acc.push(value);
+                }
+                return acc;
+            }, []);
+        }
+
         const compDropdown = !fromCrM ? (
             <SelectField
                 label={copy.project.compName}
@@ -680,15 +609,26 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     {accessKeyDropdown}
 
                     <div className='link-wrapper'>
-                        <DistributeOptions
-                            story={story}
-                            fromCrM={fromCrM}
-                            onSelectOption={this.onSelectOption}
-                            selectedComposition={selectedComposition}
-                            publishDataset={publishDataset}
-                            creativeManagerBaseUrl={creativeManagerBaseUrl}
-                            hasReviewStep={!!this.props.auditLogEnabled}
-                        />
+                        {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>
             </div>
@@ -698,9 +638,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     private nextClickHandler = () => {
         this.setState({ nextStep: true, error: false });
 
-        const exportIndex = 7;
-        const crmExportIndex = 8;
-        if (this.state.screenIndex === exportIndex || this.state.screenIndex === crmExportIndex) {
+        if (this.state.screenIndex === 7 || this.state.screenIndex === 8) {
             this.emailWorkflow.current.getWrappedInstance().proceedWithExport();
         }
     };
@@ -753,21 +691,15 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             })?.name || '';
 
         const variables = story ? story.acts[project.actId].inventory : {};
-        const hasReviewStep = !!this.props.auditLogEnabled;
-
         return (
             <div className='publish-wizard'>
                 <div className='publish-wizard-header'>
                     {copy.publish.publishTitle}
-                    <PublishStatusIndicator
-                        api={api}
-                        storyId={story.id}
-                    />
+                    <PublishStatusIndicator api={api} />
                 </div>
                 {/* <PaneErrorBoundry>*/}
                 <div>
-                    {hasReviewStep && screenIndex === 0 && this.renderReviewChanges()}
-                    {!hasReviewStep && screenIndex === 0 && this.renderPublish()}
+                    {screenIndex === 0 && this.renderPublish()}
                     {screenIndex === 1 && this.renderDistributionOptions()}
                     {screenIndex === 2 && (
                         <WebpageHosted
@@ -836,19 +768,7 @@ const mapDispatchToProps = (dispatch) => {
     return bindActionCreators({ publishVersion }, dispatch);
 };
 
-const ConnectedPublishWizard = connect(mapStateToProps, mapDispatchToProps)(PublishWizard);
-
-const PublishWizardWithFlag = (props) => {
-    const auditLogEnabled = useFlag('feature.IMPOSIUM_EDITOR.AUDIT_LOG');
-    return (
-        <ConnectedPublishWizard
-            {...props}
-            auditLogEnabled={auditLogEnabled}
-        />
-    );
-};
-
-export default PublishWizardWithFlag;
+export default connect(mapStateToProps, mapDispatchToProps)(PublishWizard);
 
 export const BigButton: React.FC<IBigButtonProps> = (p) => (
     <div
@@ -859,7 +779,7 @@ export const BigButton: React.FC<IBigButtonProps> = (p) => (
     </div>
 );
 
-export const TabContent: React.FC<React.PropsWithChildren> = ({ children }) => (
+export const TabContent: React.FC = ({ children }) => (
     <div className='tab-content'>
         <div className='settings-tab'>
             <div className='integration-details'>{children}</div>
@@ -896,143 +816,3 @@ export const BigLink: React.FC<IBigLinkProps> = (p: IBigLinkProps) => {
         </a>
     );
 };
-
-export const DistributeOptions = ({
-    story,
-    fromCrM,
-    onSelectOption,
-    selectedComposition,
-    publishDataset,
-    creativeManagerBaseUrl,
-    hasReviewStep = false
-}) => {
-    const shift = 0;
-    const selectOption = (index: number) => onSelectOption(index + shift);
-    const isPrerendersEnabled = useFlag('feature.IMPOSIUM_EDITOR.PRERENDERS_CRM_WORKFLOW');
-
-    const getCrMLink = (creativeLibraryId: string, creativeId?: string) => {
-        if (creativeId) {
-            return `${creativeManagerBaseUrl}/library/${creativeLibraryId}/creative/${creativeId}/versions/`;
-        } else {
-            return `${creativeManagerBaseUrl}/library/${creativeLibraryId}`;
-        }
-    };
-
-    let distributionOptions: any = !fromCrM
-        ? [
-              {
-                  label: (
-                      <span>
-                          {ICON_GLOBE}&nbsp;{copy.publish.btnWebsite}
-                      </span>
-                  ),
-                  onClick: (e) => selectOption(2)
-              },
-              {
-                  label: (
-                      <span>
-                          {ICON_EMAIL}&nbsp;{copy.publish.btnEmail}
-                      </span>
-                  ),
-                  onClick: (e) => selectOption(3)
-              },
-              {
-                  label: (
-                      <span>
-                          {ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}
-                      </span>
-                  ),
-                  onClick: (e) => selectOption(5)
-              },
-              {
-                  label: (
-                      <span>
-                          {ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}
-                      </span>
-                  ),
-                  onClick: (e) => selectOption(6)
-              },
-              {
-                  label: (
-                      <span>
-                          {ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}
-                      </span>
-                  ),
-                  onClick: (e) => selectOption(7)
-              },
-              {
-                  label: (
-                      <span>
-                          {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
-                      </span>
-                  ),
-                  onClick: (e) => selectOption(8)
-              }
-          ]
-        : [
-              {
-                  label: (
-                      <span>
-                          {ICON_DOWNLOAD}&nbsp;{copy.publish.btnRunTestBatch}
-                      </span>
-                  ),
-                  onClick: (e) => selectOption(7)
-              },
-              {
-                  label: (
-                      <span>
-                          {ICON_UP_RIGHT_FROM_SQUARE}&nbsp;{copy.publish.btnCrM}
-                      </span>
-                  ),
-                  link: getCrMLink(story.creativeLibraryId, story.creativeId)
-              }
-          ];
-
-    if (publishDataset) {
-        const indexes = [0, 2, 3];
-        distributionOptions = distributionOptions.reduce((acc, value, index) => {
-            if (!indexes.includes(index)) {
-                acc.push(value);
-            }
-            return acc;
-        }, []);
-    }
-
-    if (fromCrM && isPrerendersEnabled) {
-        distributionOptions.push({
-            label: (
-                <span>
-                    {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
-                </span>
-            ),
-            onClick: (e) => selectOption(8),
-            style: { width: 'calc(100% - 4px)' }
-        });
-    }
-
-    return (
-        <>
-            {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}
-                            style={option.style}
-                        />
-                    );
-                }
-            })}
-        </>
-    );
-};