@imposium-hub/components 2.12.4 → 2.13.0

package/dist/styles.less

@@ -1131,6 +1131,7 @@ body{
             .filterable-cell-wrapper {
                 display: flex;
                 align-items: center;
+                justify-content: space-between;
             }
 
             .filterable-cell-wrapper {
@@ -1866,13 +1867,14 @@ body{
                 border:none;
             }
 
-            .additional-buttons{
+            .creativeMgrBtn {
+                position: relative;
+                top: 1px;
                 margin-right:10px;
+            }
 
-                .creativeMgrBtn {
-                    position: relative;
-                    top: 1px;
-                }
+            .additional-buttons{
+                margin-right:10px;
             }
             
             .btn-help {
@@ -2236,8 +2238,22 @@ body{
 
 
 .publish-wizard{
-
-    padding-top:30px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-top: 30px;
+    box-sizing: border-box;
+    
+    > div:first-of-type {
+        flex: 1;
+    }
+    
+    .lower-buttons {
+        margin-top: auto;
+        padding-bottom: 5px;
+        width: 100%;
+        text-align: center;
+    }
 
     .missingColumns{
         margin: 15px;
@@ -2310,13 +2326,6 @@ body{
         background-color: @backgroundLight;
     }
 
-    .lower-buttons{
-        margin-top:10px;
-        left:0px;
-        width:100%;
-        text-align: center;
-    }
-
     .link-wrapper{
         display: flex;
         flex-wrap: wrap;
@@ -2417,6 +2426,16 @@ body{
     }
 }
 
+.crm-publish-name{
+    background: @backgroundDark;
+    width: 100%;
+    padding-left: 5px;
+
+    &.disabled{
+       opacity: 0.5;
+    }
+}
+
 @sectionPadding:7px 5px 5px 5px;
 @sectionHeaderHeight:25px;
 @loaderHeight:6px;

package/less/components/data-table.less

@@ -82,6 +82,7 @@
             .filterable-cell-wrapper {
                 display: flex;
                 align-items: center;
+                justify-content: space-between;
             }
 
             .filterable-cell-wrapper {

package/less/components/header.less

@@ -193,13 +193,14 @@
                 border:none;
             }
 
-            .additional-buttons{
+            .creativeMgrBtn {
+                position: relative;
+                top: 1px;
                 margin-right:10px;
+            }
 
-                .creativeMgrBtn {
-                    position: relative;
-                    top: 1px;
-                }
+            .additional-buttons{
+                margin-right:10px;
             }
             
             .btn-help {

package/less/components/publish-wizard.less

@@ -1,7 +1,21 @@
 
 .publish-wizard{
-
-    padding-top:30px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-top: 30px;
+    box-sizing: border-box;
+    
+    > div:first-of-type {
+        flex: 1;
+    }
+    
+    .lower-buttons {
+        margin-top: auto;
+        padding-bottom: 5px;
+        width: 100%;
+        text-align: center;
+    }
 
     .missingColumns{
         margin: 15px;
@@ -74,13 +88,6 @@
         background-color: @backgroundLight;
     }
 
-    .lower-buttons{
-        margin-top:10px;
-        left:0px;
-        width:100%;
-        text-align: center;
-    }
-
     .link-wrapper{
         display: flex;
         flex-wrap: wrap;
@@ -179,4 +186,14 @@
       font-weight: bold;
       font-size:14px;
     }
+}
+
+.crm-publish-name{
+    background: @backgroundDark;
+    width: 100%;
+    padding-left: 5px;
+
+    &.disabled{
+       opacity: 0.5;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "2.12.4",
+    "version": "2.13.0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

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

@@ -251,7 +251,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 +259,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);

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;
+    }
+};