@imposium-hub/components 2.11.5-4 → 2.11.6-0

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

@@ -1,33 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,211 +0,0 @@
-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);
-};