@imposium-hub/components 2.16.0 → 3.0.0-1

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

package/src/components/text-area-autocomplete/TextAreaAutocomplete.tsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import ReactTextareaAutocomplete from '@imposium-hub/react-textarea-autocomplete';
-import FieldWrapper from '../field-wrapper/FieldWrapper';
-import Spinner from '../spinner/Spinner';
-
-interface ITextAreaAutocompleteProps {
-    options: any;
-    variables: any;
-    varsData: any;
-    variableItem: any;
-    onChange?(e: any): void;
-    label?: any;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
-}
-
-const TextAreaAutocomplete = (props: ITextAreaAutocompleteProps) => {
-    const {
-        options,
-        showCopyPropIds,
-        inventory,
-        override,
-        setOverride,
-        removeOverride,
-        onClose,
-        propKey,
-        varsData,
-        variableItem,
-        onChange,
-        activeOverride,
-        label
-    } = props;
-
-    return (
-        <FieldWrapper
-            label={label}
-            labelPosition='top'
-            customClass='text-area-field autocomplete'
-            propKey={propKey}
-            showCopyPropIds={showCopyPropIds}
-            inventory={inventory}
-            setOverride={setOverride}
-            onClose={onClose}
-            activeOverride={activeOverride}
-            removeOverride={removeOverride}
-            override={override}
-            type='textarea'>
-            <ReactTextareaAutocomplete
-                key='text-autocomplete'
-                onChange={(e) => onChange(e.target.value)}
-                value={options['content']}
-                loadingComponent={() => <Spinner />}
-                movePopupAsYouType
-                minChar={0}
-                tabOrEnter={true}
-                trigger={{
-                    '{': {
-                        dataProvider: (d) => {
-                            const filtered = varsData.filter((f) =>
-                                f.name.toLowerCase().startsWith(d)
-                            );
-                            return filtered;
-                        },
-                        component: variableItem,
-                        output: (value) => `{{${value.name}}}`
-                    }
-                }}
-            />
-        </FieldWrapper>
-    );
-};
-
-export default TextAreaAutocomplete;