@imposium-hub/components 2.11.4 → 2.11.5-0

package/dist/styles.css

@@ -1023,6 +1023,7 @@ body a {
 .ip-table-wrapper .ip-table .ip-table-filter .filterable-cell-wrapper {
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 .ip-table-wrapper .ip-table .ip-table-header .filterable-cell-wrapper,
 .ip-table-wrapper .ip-table .ip-table-filter .filterable-cell-wrapper {
@@ -1861,12 +1862,13 @@ body a {
 .imposium-header .inner-content .inner-right a {
   border: none;
 }
-.imposium-header .inner-content .inner-right .additional-buttons {
-  margin-right: 10px;
-}
-.imposium-header .inner-content .inner-right .additional-buttons .creativeMgrBtn {
+.imposium-header .inner-content .inner-right .creativeMgrBtn {
   position: relative;
   top: 1px;
+  margin-right: 10px;
+}
+.imposium-header .inner-content .inner-right .additional-buttons {
+  margin-right: 10px;
 }
 .imposium-header .inner-content .inner-right .btn-help {
   -webkit-touch-callout: none;
@@ -2486,6 +2488,14 @@ body a {
   font-weight: bold;
   font-size: 14px;
 }
+.crm-publish-name {
+  background: #161616;
+  width: 100%;
+  padding-left: 5px;
+}
+.crm-publish-name.disabled {
+  opacity: 0.5;
+}
 .section {
   position: absolute;
   width: 100%;

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 {
@@ -2417,6 +2419,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

@@ -179,4 +179,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.11.4",
+    "version": "2.11.5-0",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",

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';
@@ -34,7 +35,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 +95,7 @@ interface IPublishWizardState {
     next: boolean;
     nextStep: boolean;
     publishError: string;
+    selectedCreatives: string[];
 }
 
 interface IBigButtonProps {
@@ -140,7 +142,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 +304,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 });
                 })
@@ -334,12 +337,27 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
         if (fromCrM && varLength === 0) {
             return true;
+        } else if (fromCrM && this.state.selectedCreatives.length === 0) {
+            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 } = this.props;
         const { publishing } = this.props.publishData;
         const disabledForCrM = this.shouldDisablePublishButtonForCrM();
         const lowerButtons = [];
@@ -347,6 +365,10 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         // publish and skip buttons
         if (screenIndex === 0) {
             // publish
+
+            const btnCopy = fromCrM
+                ? `Publish to ${this.state.selectedCreatives.length} Creatives`
+                : copy.publish.btnPublish;
             lowerButtons.push(
                 <Button
                     tooltip={copy.publish.btnPublish}
@@ -355,7 +377,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     key='btn-publish'
                     onClick={() => this.handlePublish()}
                     color='primary'>
-                    {copy.publish.btnPublish}
+                    {btnCopy}
                 </Button>
             );
 
@@ -434,28 +456,44 @@ 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 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
+                    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,195 @@
+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 } 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 {
+    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 {
+        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);
+            });
+    }, []);
+
+    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>
+    );
+};
+
+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} />;