@imposium-hub/components 2.12.4 → 2.13.0-0

package/src/components/app-wrapper/AppWrapper.tsx

@@ -10,7 +10,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 import { initPendo } from '../../utils/pendo';
 import { TOKEN_TYPE, FlagsProvider } from '@innovid/feature-flags-react';
-import { useMemo } from 'react';
 
 export interface IAppWrapperProps {
     appLabel: string;
@@ -251,7 +250,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             if (crmApi && crmBaseUrl) {
                 crmApi.init(crmBaseUrl, getAccessTokenSilently);
             }
-            api.getAccessData(false)
+            api.getAccessData(false, storyId)
                 .then((freshAccess: any) => {
                     props.setAccessData(freshAccess);
                     propagateCreds(freshAccess);
@@ -259,7 +258,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
                 .catch((e: Error) => {
                     setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_ORG);
 
-                    // Attempt to get the access data again without the org ID, so we can at least shoe the user the org dropdown
+                    // Attempt to get the access data again without the org ID, so we can at least show the user the org dropdown
                     api.init(baseUrl, getAccessTokenSilently, null);
                     if (crmApi && crmBaseUrl) {
                         crmApi.init(crmBaseUrl, getAccessTokenSilently);
@@ -295,17 +294,15 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
         innerContent = children;
     }
 
-    const featureFlagsConfig = useMemo(() => {
-        return {
-            gatewayUrl: baseUrl,
-            gatewayToken: auth0Token,
-            projectId: growthBookId,
-            tokenType: TOKEN_TYPE.AUTH0_BEARER,
-            initialContext: {
-                email: user?.userEmail
-            }
-        };
-    }, [baseUrl, auth0Token, growthBookId, user?.userEmail]);
+    const featureFlagsConfig = {
+        gatewayUrl: baseUrl,
+        gatewayToken: auth0Token,
+        projectId: growthBookId,
+        tokenType: TOKEN_TYPE.AUTH0_BEARER,
+        initialContext: {
+            email: user?.userEmail
+        }
+    };
 
     const content = (
         <div

package/src/components/header/Header.tsx

@@ -544,11 +544,9 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     </span>
 
                     <span className='inner-right'>
+                        {CrMLink}
                         {storyToggle}
-                        <div className='additional-buttons'>
-                            {additionalButtons}
-                            {CrMLink}
-                        </div>
+                        <div className='additional-buttons'>{additionalButtons}</div>
                         {accountDropdownToggle}
                         <a
                             href='https://support.flashtalking.com/hc/en-us/sections/25515903148819-Imposium'

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { CrMPublishUI } from './publish/CrMPublishUI';
 import Button from '../button/Button';
 import SelectField from '../select-field/SelectField';
 import HRule from '../h-rule/HRule';
@@ -23,6 +24,8 @@ 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;
@@ -34,7 +37,7 @@ interface IPublishWizardProps {
     checkStoryForErrors(): any;
     addViewer(c: any): void;
     exportExperiences: () => void;
-    publishVersion: (api: IImposiumAPI, sId: string) => any;
+    publishVersion: (api: IImposiumAPI, sId: string, creativeIds?: string[]) => any;
     batchesList: any;
     onClose(): any;
     api: IImposiumAPI;
@@ -94,6 +97,7 @@ interface IPublishWizardState {
     next: boolean;
     nextStep: boolean;
     publishError: string;
+    selectedCreatives: string[];
 }
 
 interface IBigButtonProps {
@@ -140,7 +144,8 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             error: false,
             next: false,
             nextStep: false,
-            publishError: null
+            publishError: null,
+            selectedCreatives: []
         };
         this.emailWorkflow = React.createRef();
         this.hiddenFileInputRef = React.createRef();
@@ -301,7 +306,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
         if (fromCrM) {
             this.props
-                .publishVersion(api, id)
+                .publishVersion(api, id, this.state.selectedCreatives)
                 .then(() => {
                     this.setState({ screenIndex: 1 });
                 })
@@ -331,15 +336,37 @@ 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 lowerButtons = [];
@@ -347,6 +374,15 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         // publish and skip buttons
         if (screenIndex === 0) {
             // publish
+
+            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;
             lowerButtons.push(
                 <Button
                     tooltip={copy.publish.btnPublish}
@@ -355,7 +391,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     key='btn-publish'
                     onClick={() => this.handlePublish()}
                     color='primary'>
-                    {copy.publish.btnPublish}
+                    {btnCopy}
                 </Button>
             );
 
@@ -434,28 +470,47 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     }
 
     private renderPublish() {
+        const { fromCrM, story } = this.props;
         const { publishing } = this.props.publishData;
-        const disabledForCrM = this.shouldDisablePublishButtonForCrM();
         const { publishError } = this.state;
-        const errorCopy = publishError
-            ? publishError
-            : disabledForCrM
-            ? copy.publish.noVariablesError
-            : null;
-
+        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 error = errorCopy ? (
             <p className='publish-error'>
                 <span className='icon'>{ICON_EXCLAIMATION_TRIANGLE}</span>&nbsp;&nbsp;{errorCopy}
             </p>
         ) : null;
-        return (
-            <div>
-                <h2>{copy.publish.publishStepTitle}</h2>
-                <HRule />
-                <p>{publishing ? copy.publish.publishInProgress : copy.publish.publishStepDesc}</p>
-                {error}
-            </div>
-        );
+
+        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>
+            );
+        }
     }
 
     private renderDistributionOptions() {
@@ -487,86 +542,6 @@ 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}
@@ -609,26 +584,14 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     {accessKeyDropdown}
 
                     <div className='link-wrapper'>
-                        {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}
-                                    />
-                                );
-                            }
-                        })}
+                        <DistributeOptions
+                            story={story}
+                            fromCrM={fromCrM}
+                            onSelectOption={this.onSelectOption}
+                            selectedComposition={selectedComposition}
+                            publishDataset={publishDataset}
+                            creativeManagerBaseUrl={creativeManagerBaseUrl}
+                        />
                     </div>
                 </div>
             </div>
@@ -816,3 +779,140 @@ export const BigLink: React.FC<IBigLinkProps> = (p: IBigLinkProps) => {
         </a>
     );
 };
+
+export const DistributeOptions = ({
+    story,
+    fromCrM,
+    onSelectOption,
+    selectedComposition,
+    publishDataset,
+    creativeManagerBaseUrl
+}) => {
+    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) => onSelectOption(2)
+              },
+              {
+                  label: (
+                      <span>
+                          {ICON_EMAIL}&nbsp;{copy.publish.btnEmail}
+                      </span>
+                  ),
+                  onClick: (e) => onSelectOption(3)
+              },
+              {
+                  label: (
+                      <span>
+                          {ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}
+                      </span>
+                  ),
+                  onClick: (e) => onSelectOption(5)
+              },
+              {
+                  label: (
+                      <span>
+                          {ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}
+                      </span>
+                  ),
+                  onClick: (e) => onSelectOption(6)
+              },
+              {
+                  label: (
+                      <span>
+                          {ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}
+                      </span>
+                  ),
+                  onClick: (e) => onSelectOption(7)
+              },
+              {
+                  label: (
+                      <span>
+                          {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
+                      </span>
+                  ),
+                  onClick: (e) => onSelectOption(8)
+              }
+          ]
+        : [
+              {
+                  label: (
+                      <span>
+                          {ICON_DOWNLOAD}&nbsp;{copy.publish.btnRunTestBatch}
+                      </span>
+                  ),
+                  onClick: (e) => onSelectOption(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) => onSelectOption(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}
+                        />
+                    );
+                }
+            })}
+        </>
+    );
+};

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import CheckboxField from '../../checkbox-field/CheckboxField';
+import { canBePublishedTo } from './CrMPublishUI';
+interface ICrMPublishCreativeSelectCellProps {
+    cell: any;
+    onSelectChange: (creativeId: string, selected: boolean) => void;
+    selectedCreatives: string[];
+}
+
+export const CrMPublishCreativeSelectCell: React.FC<ICrMPublishCreativeSelectCellProps> = (
+    props
+) => {
+    const { cell, onSelectChange, selectedCreatives } = props;
+    const creativeId = cell.row.original.creativeId;
+    const isSelected = selectedCreatives.includes(creativeId);
+    const showCheckbox = canBePublishedTo(cell.row.original.approvalStatus);
+    if (showCheckbox) {
+        return (
+            <CheckboxField
+                label=''
+                propagate={false}
+                value={isSelected}
+                onChange={(selected) => onSelectChange(creativeId, selected)}
+            />
+        );
+    } else {
+        return null;
+    }
+};

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import CheckboxField from '../../checkbox-field/CheckboxField';
+import { canBePublishedTo } from './CrMPublishUI';
+
+interface ICrMPublishCreativeSelectHeaderProps {
+    onSelectChange: (selected: boolean) => void;
+    selectedCreatives: string[];
+    creativeConfig: any[];
+}
+
+export const CrMPublishCreativeSelectHeader: React.FC<ICrMPublishCreativeSelectHeaderProps> = (
+    props
+) => {
+    const { onSelectChange, selectedCreatives, creativeConfig } = props;
+
+    const publishableCreatives = creativeConfig.filter((creative) =>
+        canBePublishedTo(creative.approvalStatus)
+    );
+
+    const publishableCreativeIds = publishableCreatives.map((creative) => creative.creativeId);
+    const allPublishableSelected =
+        publishableCreativeIds.length > 0 &&
+        publishableCreativeIds.every((id) => selectedCreatives.includes(id));
+
+    return (
+        <CheckboxField
+            label=''
+            propagate={false}
+            value={allPublishableSelected}
+            onChange={(selected) => onSelectChange(selected)}
+        />
+    );
+};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { renderTooltip, renderTooltipProps } from '../../Tooltip';
+import { canBePublishedTo } from './CrMPublishUI';
+import * as copy from '../../../constants/copy';
+
+interface ICrMPublishNameCellProps {
+    cell: any;
+}
+
+export const CrMPublishNameCell: React.FC<ICrMPublishNameCellProps> = (props) => {
+    const { cell } = props;
+    const canBePublished = canBePublishedTo(cell.row.original.approvalStatus);
+    const tooltipId = `publish-name-${cell.row.original.creativeId}`;
+
+    if (canBePublished) {
+        return <div className={`crm-publish-name`}>{cell.row.original.creativeName}</div>;
+    } else {
+        return (
+            <div
+                className={`crm-publish-name disabled`}
+                {...renderTooltipProps(tooltipId, copy.publish.disabledCreativeTooltip)}>
+                {cell.row.original.creativeName}
+                {renderTooltip(tooltipId, copy.publish.disabledCreativeTooltip)}
+            </div>
+        );
+    }
+};

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Button } from '../../..';
+import { ICON_EYE } from '../../../constants/icons';
+
+interface ICrMPublishPreviewCellProps {
+    cell: any;
+    crmBaseUrl: string;
+    creativeLibraryId: string;
+}
+
+export const CrMPublishPreviewCell: React.FC<ICrMPublishPreviewCellProps> = (props) => {
+    const { cell, crmBaseUrl, creativeLibraryId } = props;
+    const creativeId = cell.row.original.creativeId;
+    const previewUrl = `${crmBaseUrl}/library/${creativeLibraryId}/creative/${creativeId}/versions/`;
+
+    return (
+        <a
+            href={previewUrl}
+            target='_blank'>
+            <Button
+                style='subtle'
+                size='small'>
+                {ICON_EYE}
+            </Button>
+        </a>
+    );
+};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CREATIVE_STATUS_LABELS } from '../../../constants/publish';
+
+interface ICrMPublishStatusCellProps {
+    cell: any;
+}
+
+export const CrMPublishStatusCell: React.FC<ICrMPublishStatusCellProps> = (props) => {
+    const { cell } = props;
+    return (
+        CREATIVE_STATUS_LABELS[cell.row.original.approvalStatus] || cell.row.original.approvalStatus
+    );
+};