@imposium-hub/components 2.11.4 → 2.11.5-1

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,7 @@ 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';
 
 interface IPublishWizardProps {
     fromCrM?: boolean;
@@ -34,7 +36,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 +96,7 @@ interface IPublishWizardState {
     next: boolean;
     nextStep: boolean;
     publishError: string;
+    selectedCreatives: string[];
 }
 
 interface IBigButtonProps {
@@ -140,7 +143,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 +305,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 +335,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 +373,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 +390,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     key='btn-publish'
                     onClick={() => this.handlePublish()}
                     color='primary'>
-                    {copy.publish.btnPublish}
+                    {btnCopy}
                 </Button>
             );
 
@@ -434,28 +469,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() {

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

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

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import * as copy from '../../../constants/copy';
+import { DataTable, HRule, Button, IImposiumAPI, TextField } from '../../..';
+import { useEffect, useState, useCallback } from 'react';
+import { ICON_SEARCH } from '../../../constants/icons';
+import {
+    CREATIVE_STATUSES_TO_PUBLISH,
+    CRM_INTEGRATED_PROJECT_TYPES
+} from '../../../constants/publish';
+import { CrMPublishStatusCell } from './CrMPublishStatusCell';
+import { CrMPublishPreviewCell } from './CrMPublishPreviewCell';
+import { CrMPublishNameCell } from './CrMPublishNameCell';
+import { CrMPublishCreativeSelectHeader } from './CrMPublishCreativeSelectHeader';
+import { CrMPublishCreativeSelectCell } from './CrMPublishCreativeSelectCell';
+
+interface ICrmPublishUIProps {
+    projectType: string;
+    publishing: boolean;
+    error: React.ReactNode;
+    api: IImposiumAPI;
+    creativeLibraryId: string;
+    projectId: string;
+    crmBaseUrl: string;
+    selectedCreatives: string[];
+    onUpdateSelectedCreatives: (selectedCreatives) => void;
+    onError: (error: string) => void;
+}
+
+export const CrMPublishUI: React.FC<ICrmPublishUIProps> = (props) => {
+    const {
+        projectType,
+        publishing,
+        error,
+        crmBaseUrl,
+        creativeLibraryId,
+        projectId,
+        api,
+        selectedCreatives,
+        onUpdateSelectedCreatives
+    } = props;
+    const [nameFilter, setNameFilter] = useState('');
+    const [creativeConfig, setCreativeConfig] = useState([]);
+
+    const nameSearch = (
+        <TextField
+            className='creative-name'
+            buttons={[
+                <Button
+                    key='btn-search'
+                    style='subtle'
+                    size='small'>
+                    {ICON_SEARCH}
+                </Button>
+            ]}
+            width='150px'
+            value={nameFilter}
+            onChange={(value) => setNameFilter(value)}
+        />
+    );
+
+    const onSelectChange = useCallback(
+        (creativeId: string, selected: boolean) => {
+            const previouslySelected = [...selectedCreatives];
+            if (selected) {
+                onUpdateSelectedCreatives([...previouslySelected, creativeId]);
+            } else {
+                onUpdateSelectedCreatives(previouslySelected.filter((id) => id !== creativeId));
+            }
+        },
+        [selectedCreatives, onUpdateSelectedCreatives]
+    );
+
+    const onSelectAllChange = useCallback(
+        (selected: boolean) => {
+            if (selected) {
+                const publishableCreativeIds = creativeConfig
+                    .filter((creative) => canBePublishedTo(creative.approvalStatus))
+                    .map((creative) => creative.creativeId);
+                onUpdateSelectedCreatives(publishableCreativeIds);
+            } else {
+                onUpdateSelectedCreatives([]);
+            }
+        },
+        [nameFilter, creativeConfig]
+    );
+
+    const COLUMN_CONFIG = [
+        {
+            accessor: 'selected',
+            width: 25,
+            disableResize: true,
+            disableSortBy: true,
+            Header: () => (
+                <CrMPublishCreativeSelectHeader
+                    onSelectChange={onSelectAllChange}
+                    selectedCreatives={selectedCreatives}
+                    creativeConfig={creativeConfig}
+                />
+            ),
+            Cell: (cell: any) => (
+                <CrMPublishCreativeSelectCell
+                    cell={cell}
+                    onSelectChange={onSelectChange}
+                    selectedCreatives={selectedCreatives}
+                />
+            )
+        },
+        {
+            accessor: 'creativeName',
+            Header: 'Creative Name',
+            width: 250,
+            minWidth: 250,
+            maxWidth: 250,
+            disableSortBy: true,
+            Cell: (cell: any) => <CrMPublishNameCell cell={cell} />,
+            Search: nameSearch
+        },
+        {
+            accessor: 'creativeId',
+            Header: 'ID',
+            width: 75,
+            minWidth: 75,
+            maxWidth: 75,
+            disableSortBy: true
+        },
+        {
+            accessor: 'numberOfVersions',
+            Header: 'Versions',
+            width: 75,
+            minWidth: 75,
+            maxWidth: 75,
+            disableSortBy: true
+        },
+        {
+            accessor: 'approvalStatus',
+            Header: 'Status',
+            width: 75,
+            minWidth: 75,
+            maxWidth: 75,
+            disableSortBy: true,
+            Cell: (cell: any) => <CrMPublishStatusCell cell={cell} />
+        },
+        {
+            accessor: 'preview',
+            Header: 'Preview',
+            width: 50,
+            minWidth: 50,
+            maxWidth: 50,
+            disableSortBy: true,
+            Cell: (cell: any) => (
+                <CrMPublishPreviewCell
+                    cell={cell}
+                    crmBaseUrl={crmBaseUrl}
+                    creativeLibraryId={creativeLibraryId}
+                />
+            )
+        }
+    ];
+
+    useEffect(() => {
+        api.getCreativesLinkedToProject(projectId)
+            .then((res) => {
+                setCreativeConfig(res.creatives);
+            })
+            .catch((err) => {
+                const msg = err.response?.data?.error || err.message;
+                const errorCopy = copy.publish.errorGettingCreatives.replace('{{ERR}}', msg);
+                props.onError(errorCopy);
+            });
+    }, []);
+
+    if (projectType === CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE) {
+        return (
+            <div>
+                <h2>{copy.publish.publishStepTitleFromCrM}</h2>
+                <HRule />
+                <p>{publishing ? copy.publish.publishInProgress : ''}</p>
+                <DataTable
+                    showInterstitial={publishing}
+                    columns={COLUMN_CONFIG}
+                    data={
+                        nameFilter
+                            ? creativeConfig.filter((creative) => {
+                                  return creative.creativeName
+                                      .toLowerCase()
+                                      .includes(nameFilter.toLowerCase());
+                              })
+                            : creativeConfig
+                    }
+                    hidePaginator={true}
+                    itemsPerPage={1000}
+                    tightRows={true}
+                />
+                {error && <p className='publish-error'>{error}</p>}
+            </div>
+        );
+    } else {
+        return (
+            <div>
+                <h2>{copy.publish.publishStepTitle}</h2>
+                <HRule />
+                <p>{publishing ? copy.publish.publishInProgress : copy.publish.publishStepDesc}</p>
+                {error && <p className='publish-error'>{error}</p>}
+            </div>
+        );
+    }
+};
+
+export const canBePublishedTo = (approvalStatus: string) => {
+    return CREATIVE_STATUSES_TO_PUBLISH.includes(approvalStatus);
+};

package/src/constants/copy.ts

@@ -127,6 +127,8 @@ export const compositions = {
 };
 
 export const publish = {
+    errorGettingCreatives: 'Error getting creatives linked to project: {{ERR}}',
+    disabledCreativeTooltip: 'You cannot publish a project to a creative with Approved status.',
     uploadAsAssets: 'Upload as Assets',
     noVariablesError:
         'No variables found on the project. Cannot proceed with publishing to Creative Manager until at least one variable is added to the project.',
@@ -147,6 +149,7 @@ export const publish = {
 
     // publish
     publishStepTitle: 'STEP 1: Publish your Project',
+    publishStepTitleFromCrM: 'STEP 1: Publish your Project to selected Creatives',
     publishStepDesc:
         "Your project needs to be published before your changes can be seen. If you haven't made any changes since the last time you published, you can skip to the next step.",
 

package/src/constants/icons.tsx

@@ -60,6 +60,7 @@ import { faJs } from '@fortawesome/free-brands-svg-icons/faJs';
 import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 import { faUpload } from '@fortawesome/free-solid-svg-icons/faUpload';
 import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
+import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
 import {
     faArrowDown,
     faArrowLeft,
@@ -232,3 +233,5 @@ export const ICON_FILE_ERROR = <FontAwesomeIcon icon={faCircleExclamation} />;
 export const ICON_FILE_ADD = <FontAwesomeIcon icon={faFileCirclePlus} />;
 
 export const ICON_FILE_REPLACE = <FontAwesomeIcon icon={faFilePen} />;
+
+export const ICON_EYE = <FontAwesomeIcon icon={faEye} />;

package/src/constants/publish.ts

@@ -27,3 +27,39 @@ export const CRM_PLACEMENT_VARS = [
 export const ADSTUDIO_POST_RENDER_ACTION = 'crm-adstudio';
 
 export const ASSETS_POST_RENDER_ACTION = 'crm-asset';
+
+export const CREATIVE_STATUSES = {
+    PENDING_APPROVAL: 'PENDING_APPROVAL',
+    UNSUBMITTED: 'UNSUBMITTED',
+    PRODUCTION_INCOMPLETE: 'PRODUCTION_INCOMPLETE',
+    APPROVED: 'APPROVED',
+    REJECTED: 'REJECTED',
+    FAILED: 'FAILED',
+    TRANSCODING: 'TRANSCODING',
+    TRANSCODING_ERROR: 'TRANSCODING_ERROR',
+    SUBMITTED: 'SUBMITTED'
+};
+
+export const CREATIVE_STATUS_LABELS = {
+    PENDING_APPROVAL: 'Pending Approval',
+    UNSUBMITTED: 'Production',
+    PRODUCTION_INCOMPLETE: 'Production',
+    APPROVED: 'Approved',
+    REJECTED: 'Rejected',
+    FAILED: 'Failed',
+    TRANSCODING: 'Transcoding',
+    TRANSCODING_ERROR: 'Transcoding Error',
+    SUBMITTED: 'Submitted'
+};
+
+export const CREATIVE_STATUSES_TO_PUBLISH = [
+    CREATIVE_STATUSES.UNSUBMITTED,
+    CREATIVE_STATUSES.PRODUCTION_INCOMPLETE,
+    CREATIVE_STATUSES.REJECTED,
+    CREATIVE_STATUSES.FAILED
+];
+
+export const CRM_INTEGRATED_PROJECT_TYPES = {
+    SINGLE_CREATIVE: 'SINGLE_CREATIVE',
+    MULTI_CREATIVE: 'MULTI_CREATIVE'
+};

package/src/redux/actions/publish.ts

@@ -74,10 +74,10 @@ export const cancelPublish = (api: IImposiumAPI, storyId: string) => {
     };
 };
 
-export const publishVersion = (api: IImposiumAPI, storyId: string) => {
+export const publishVersion = (api: IImposiumAPI, storyId: string, creativeIds?: string[]) => {
     return (dispatch) => {
         return new Promise((resolve, reject) => {
-            api.runPublish(storyId, '')
+            api.runPublish(storyId, '', creativeIds)
                 .then((d) => {
                     dispatch(getStoryPublishStatus(api, storyId))
                         .then()