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

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

@@ -0,0 +1,78 @@
+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;
+
+    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
+    } = props;
+
+    return (
+        <FieldWrapper
+            label='Content'
+            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;

package/src/components/variables-dropdown/VariableDropdown.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { ICON_TIMES, ICON_WARNING } from '../../constants/icons';
+import { ControlListType } from '../controlled-list/ControlledList';
+import Button from '../button/Button';
+import { renderTooltip, renderTooltipProps } from '../Tooltip';
+import { generateUUID } from '../../Util';
+
+interface IVariableDropDownProps {
+    returnVariables: boolean;
+    type: ControlListType;
+    inventory: any;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    activeOverride?: string;
+}
+
+const VariableDropDown: React.FC<IVariableDropDownProps> = (props: IVariableDropDownProps) => {
+    const { returnVariables, inventory, setOverride, removeOverride, activeOverride } = props;
+
+    const type = props.type === 'textarea' ? 'text' : props.type;
+    const include = type ? [type.toLowerCase()] : [];
+
+    const variableOptions = [];
+
+    if (returnVariables) {
+        for (const key in inventory) {
+            if (inventory.hasOwnProperty(key)) {
+                const variable = inventory[key];
+
+                if (include.indexOf(variable.type.toLowerCase()) !== -1 || include.length === 0) {
+                    variableOptions.push(variable);
+                }
+            }
+        }
+
+        const warningTooltipId = `imposium-button-${generateUUID()}`;
+        const warning = (
+            <div
+                className='warning'
+                {...renderTooltipProps(warningTooltipId, 'No variable preview')}>
+                {ICON_WARNING}
+                {renderTooltip(warningTooltipId, 'No variable preview')}
+            </div>
+        );
+
+        const removeButton = (
+            <div className='buttons'>
+                <Button
+                    onClick={() => removeOverride()}
+                    size='small'
+                    style='subtle'
+                    color='danger'>
+                    {ICON_TIMES}
+                </Button>
+            </div>
+        );
+
+        const variableOption = () => {
+            const options = variableOptions.map((variable) => {
+                const hasPreviewItem =
+                    variable.previewItem.src !== null && variable.previewItem.src !== undefined;
+
+                const className = `variable-name ${
+                    activeOverride === variable.name ? 'active' : ''
+                }`;
+
+                const showRemoveButton = activeOverride === variable.name ? removeButton : null;
+                const showWarning = !hasPreviewItem && warning;
+
+                const onClickHandler = () => {
+                    if (activeOverride === variable.name) return;
+                    setOverride(variable);
+                };
+
+                return (
+                    <div
+                        className='color-options-menu'
+                        key={variable.id.toString()}>
+                        <div
+                            className='color-option-list'
+                            onClick={onClickHandler}>
+                            <div className={className}>
+                                <p>{variable.name}</p>
+                                {showRemoveButton}
+                                {showWarning}
+                            </div>
+                        </div>
+                    </div>
+                );
+            });
+
+            return options;
+        };
+        return <>{variableOption()}</>;
+    }
+};
+
+export default VariableDropDown;

package/src/constants/copy.ts

@@ -127,8 +127,6 @@ 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.',
@@ -149,7 +147,6 @@ 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.",
 
@@ -287,3 +284,7 @@ export const confirm: any = {
     no: 'No',
     cancel: 'Cancel'
 };
+
+export const fontField = {
+    fontNotFound: 'Font not found'
+};

package/src/constants/fonts.ts

@@ -0,0 +1,296 @@
+export const DEFAULT_FONTS = [
+    {
+        name: 'Arial',
+        family: 'Arial',
+        file: 'Arial.ttf',
+        weight: 400
+    },
+    {
+        name: 'Abril Fatface',
+        family: 'Abril Fatface',
+        file: 'AbrilFatface-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Alfa Slab One',
+        family: 'Alfa Slab One',
+        file: 'AlfaSlabOne-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Amatic SC',
+        family: 'Amatic SC',
+        file: 'AmaticSC-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Anton',
+        family: 'Anton',
+        file: 'Anton-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Assistant',
+        family: 'Assistant',
+        file: 'Assistant-VariableFont_wght.ttf',
+        weight: 400
+    },
+    {
+        name: 'Assistant Bold',
+        family: 'Assistant',
+        file: 'Assistant-VariableFont_wght.ttf',
+        weight: 700
+    },
+    {
+        name: 'Bangers',
+        family: 'Bangers',
+        file: 'Bangers-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Cabin Sketch',
+        family: 'Cabin Sketch',
+        file: 'CabinSketch-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Caveat Brush',
+        family: 'Caveat Brush',
+        file: 'CaveatBrush-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Creepster',
+        family: 'Creepster',
+        file: 'Creepster-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Crete Round',
+        family: 'Crete Round',
+        file: 'CreteRound-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Fjalla One',
+        family: 'Fjalla One',
+        file: 'FjallaOne-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Fredericka the Great',
+        family: 'Fredericka the Great',
+        file: 'FrederickatheGreat-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Gentium Basic',
+        family: 'Gentium Basic',
+        file: 'GentiumBasic-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Lato',
+        family: 'Lato',
+        file: 'Lato-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Lobster',
+        family: 'Lobster',
+        file: 'Lobster-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Love Ya Like A Sister',
+        family: 'Love Ya Like A Sister',
+        file: 'LoveYaLikeASister-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Monoton',
+        family: 'Monoton',
+        file: 'Monoton-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Merriweather',
+        family: 'Merriweather',
+        file: 'Merriweather-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Montserrat',
+        family: 'Montserrat',
+        file: 'Montserrat-VariableFont_wght.ttf',
+        weight: 400
+    },
+    {
+        name: 'Montserrat Bold',
+        family: 'Montserrat',
+        file: 'Montserrat-VariableFont_wght.ttf',
+        weight: 700
+    },
+    {
+        name: 'Montserrat ExtraBold',
+        family: 'Montserrat',
+        file: 'Montserrat-VariableFont_wght.ttf',
+        weight: 800
+    },
+    {
+        name: 'Noto Sans',
+        family: 'Noto Sans',
+        file: 'NotoSans-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Noto Serif',
+        family: 'Noto Serif',
+        file: 'NotoSerif-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Open Sans',
+        family: 'Open Sans',
+        file: 'OpenSans-VariableFont_wdth,wght.ttf',
+        weight: 400
+    },
+    {
+        name: 'Open Sans Condensed',
+        family: 'Open Sans Condensed',
+        file: 'OpenSansCondensed-Light.ttf',
+        weight: 300
+    },
+    {
+        name: 'Oswald',
+        family: 'Oswald',
+        file: 'Oswald-VariableFont_wght.ttf',
+        weight: 400
+    },
+    {
+        name: 'Patua One',
+        family: 'Patua One',
+        file: 'PatuaOne-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Playfair Display',
+        family: 'Playfair Display',
+        file: 'PlayfairDisplay-VariableFont_wght.ttf',
+        weight: 400
+    },
+    {
+        name: 'Poor Story',
+        family: 'Poor Story',
+        file: 'PoorStory-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Poppins',
+        family: 'Poppins',
+        file: 'Poppins-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Poppins Bold',
+        family: 'Poppins',
+        file: 'Poppins-Bold.ttf',
+        weight: 700
+    },
+    {
+        name: 'PT Sans Narrow',
+        family: 'PT Sans Narrow',
+        file: 'PTSansNarrow-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Quicksand',
+        family: 'Quicksand',
+        file: 'Quicksand-VariableFont_wght.ttf',
+        weight: 400
+    },
+    {
+        name: 'Raleway',
+        family: 'Raleway',
+        file: 'Raleway-VariableFont_wght.ttf',
+        weight: 400
+    },
+    {
+        name: 'Raleway Bold',
+        family: 'Raleway',
+        file: 'Raleway-VariableFont_wght.ttf',
+        weight: 700
+    },
+    {
+        name: 'Raleway Black',
+        family: 'Raleway',
+        file: 'Raleway-VariableFont_wght.ttf',
+        weight: 900
+    },
+    {
+        name: 'Roboto',
+        family: 'Roboto',
+        file: 'Roboto-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Roboto Condensed',
+        family: 'Roboto Condensed',
+        file: 'RobotoCondensed-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Rubik',
+        family: 'Rubik',
+        file: 'Rubik-VariableFont_wght.ttf',
+        weight: 400
+    },
+    {
+        name: 'Rubik Bold',
+        family: 'Rubik',
+        file: 'Rubik-VariableFont_wght.ttf',
+        weight: 700
+    },
+    // {
+    //     name: 'Rubik Black',
+    //     family: 'Rubik',
+    //     file: 'Rubik-VariableFont_wght.ttf',
+    //     weight: 900,
+    // },
+    {
+        name: 'Shrikhand',
+        family: 'Shrikhand',
+        file: 'Shrikhand-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Source Sans Pro',
+        family: 'Source Sans Pro',
+        file: 'SourceSansPro-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Suez One',
+        family: 'Suez One',
+        file: 'SuezOne-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Titillium Web',
+        family: 'Titillium Web',
+        file: 'TitilliumWeb-Regular.ttf',
+        weight: 400
+    },
+    {
+        name: 'Titillium Web Black',
+        family: 'Titillium Web',
+        file: 'TitilliumWeb-Black.ttf',
+        weight: 900
+    },
+    {
+        name: 'Varela Round',
+        family: 'Varela Round',
+        file: 'VarelaRound-Regular.ttf',
+        weight: 400
+    }
+];

package/src/constants/icons.tsx

@@ -60,7 +60,6 @@ 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,
@@ -75,12 +74,13 @@ import {
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
 import {
+    faBracketsCurly,
     faCloudArrowUp,
     faFileCirclePlus,
     faFilePen,
     faFilters
 } from '@fortawesome/pro-solid-svg-icons';
-import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { faCircleExclamation, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -234,4 +234,6 @@ export const ICON_FILE_ADD = <FontAwesomeIcon icon={faFileCirclePlus} />;
 
 export const ICON_FILE_REPLACE = <FontAwesomeIcon icon={faFilePen} />;
 
-export const ICON_EYE = <FontAwesomeIcon icon={faEye} />;
+export const ICON_BRACKET_CURLY = <FontAwesomeIcon icon={faBracketsCurly} />;
+
+export const ICON_WARNING = <FontAwesomeIcon icon={faTriangleExclamation} />;

package/src/constants/publish.ts

@@ -27,39 +27,3 @@ 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/constants/variables.ts

@@ -63,3 +63,19 @@ export const RGBAtoHexA = (red, green, blue, alpha) => {
     if (a.length === 1) a = '0' + a;
     return '#' + r + g + b + a;
 };
+
+export const getOverrideHandler = (propKey, override, inventory) => {
+    const propKeys = propKey ? propKey.split('.') : [];
+
+    const getOverride = () => {
+        if (propKeys.length === 0) return undefined;
+        return propKeys.reduce((acc, key) => acc?.[key], override);
+    };
+
+    const hasOverride = getOverride();
+
+    const previewItem =
+        hasOverride && inventory[hasOverride] ? inventory[hasOverride].previewItem.src : null;
+
+    return { hasOverride, previewItem };
+};

package/src/index.ts

@@ -7,7 +7,7 @@ import Button from './components/button/Button';
 import ButtonMenu from './components/button-menu/ButtonMenu';
 import ButtonMenuItem from './components/button-menu/ButtonMenuItem';
 import Card from './components/card/Card';
-import ControlledList from './components/controlled-list/ControlledList';
+import ControlledList, { ControlListType } from './components/controlled-list/ControlledList';
 import DataTable from './components/data-table/DataTable';
 import DataTablePaginator from './components/data-table/DataTablePaginator';
 import Modal from './components/modal/Modal';
@@ -164,6 +164,10 @@ import { pushRoute, replaceRoute } from './utils/routing';
 import { ProjectDropdown } from './components/header/ProjectDropdown';
 import { openConfirmModal } from './utils/modal';
 import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
+import TextAreaAutocomplete from './components/text-area-autocomplete/TextAreaAutocomplete';
+import IconToggle from './components/icon-toggle/IconToggle';
+import { DEFAULT_FONTS } from './constants/fonts';
+import FontField from './components/font-field/FontField';
 
 export {
     ProjectDropdown,
@@ -324,5 +328,10 @@ export {
     CopyPropIdButton,
     ConfirmModal,
     IConfirmModalProps,
-    openConfirmModal
+    openConfirmModal,
+    TextAreaAutocomplete,
+    ControlListType,
+    IconToggle,
+    DEFAULT_FONTS,
+    FontField
 };

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(errors);
+                    reject(false);
                 });
         });
     };

package/src/redux/actions/publish.ts

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