@imposium-hub/components 2.12.4 → 2.13.0

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/asset-list.ts

@@ -87,7 +87,7 @@ export const deleteAssets = (api: IImposiumAPI, ids: string[], storyId: string):
                 })
                 .catch((errors: Error[]) => {
                     dispatch(toggleLoading(false));
-                    reject(false);
+                    reject(errors);
                 });
         });
     };

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()

package/src/services/API.ts

@@ -52,6 +52,7 @@ export interface IImposiumAPI {
     revertVersion(storyId: string, versionId: string);
     getStoryVersions(storyId: string);
     getStoryQRDesigns(creativeLibraryId: string): Promise<any | Error>;
+    getCreativesLinkedToProject(projectId: string): Promise<any | Error>;
     processStoryFile(storyId: string, file_key?: string, url?: string);
     getExperiences(storyId: string, params: any);
     createExperience(
@@ -113,7 +114,7 @@ export interface IImposiumAPI {
     runCut(storyId: string, actId: string, sceneId: string, cutId: string);
     runReRenderCuts(storyId: string, actId: string, sceneId: string);
     runProcessBaseVideo(storyId: string, fileKey: string);
-    runPublish(storyId: string, message: string);
+    runPublish(storyId: string, message: string, creativeIds?: string[]);
     cancelPublish(storyId: string);
     cancelJobPolling();
     getAccssCredentials();
@@ -151,7 +152,7 @@ export interface IImposiumAPI {
     debugId(id: string);
     cacheActiveStory(serviceId: any, orgId: string, storyId?: string);
     getCachedStoryForOrg(serviceId: string, orgId: string);
-    getAccessData(includeTotalRenders?: boolean, orgId?: string);
+    getAccessData(includeTotalRenders?: boolean, storyId?: string);
     deleteExperience(experienceId: string, eraseMedia?: boolean);
     exportExperiences(experienceId: string, params: any);
     addOrReplaceNote(experienceId: string, notes: string);
@@ -238,7 +239,8 @@ export default class API {
 
     private doRequest = async (
         config: AxiosRequestConfig,
-        organizationId?: string
+        organizationId?: string,
+        storyId?: string
     ): Promise<any> => {
         if (this.authType === API_AUTH_TYPES.TOKEN) {
             const token = await this.getToken();
@@ -250,6 +252,10 @@ export default class API {
                 headers['X-Imposium-Account-Id'] = organizationId;
             }
 
+            if (storyId) {
+                headers['X-Imposium-Project-Id'] = storyId;
+            }
+
             config.headers = headers;
         }
 
@@ -731,6 +737,13 @@ export default class API {
         });
     };
 
+    public getCreativesLinkedToProject = (projectId: string): Promise<any | Error> => {
+        return this.doRequest({
+            method: 'GET',
+            url: `/story/${projectId}/creative-library/creatives`
+        });
+    };
+
     public getExperiences = (storyId: string, params: any): Promise<any | Error> => {
         return this.doRequest({
             method: 'GET',
@@ -1032,14 +1045,22 @@ export default class API {
         });
     };
 
-    public runPublish = (storyId: string, message: string): Promise<any | Error> => {
+    public runPublish = (
+        storyId: string,
+        message: string,
+        creativeIds?: string[]
+    ): Promise<any | Error> => {
         const route = `/job/publish`;
 
-        const jobConfig = {
+        const jobConfig: any = {
             story_id: storyId,
             message
         };
 
+        if (creativeIds) {
+            jobConfig.creative_ids = creativeIds;
+        }
+
         return this.doRequest({
             method: 'POST',
             url: route,
@@ -1719,17 +1740,24 @@ export default class API {
         });
     };
 
-    public getAccessData = (getTotalRenders: boolean = false): Promise<any | Error> => {
+    public getAccessData = (
+        getTotalRenders: boolean = false,
+        storyId?: string
+    ): Promise<any | Error> => {
         let route = `/access`;
 
         if (getTotalRenders) {
             route += '?include_total_renders=true';
         }
 
-        return this.doRequest({
-            method: 'GET',
-            url: route
-        });
+        return this.doRequest(
+            {
+                method: 'GET',
+                url: route
+            },
+            null,
+            storyId
+        );
     };
 
     public removeQueueAssoc = (queueId: string, storyId: string): Promise<any> => {