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

package/src/components/field-wrapper/FieldWrapper.tsx

@@ -3,6 +3,9 @@ import { generateUUID } from '../../Util';
 import { renderTooltipProps, renderTooltip, IToolTipConfig } from '../Tooltip';
 import { ICON_TIMES_CIRCLE, ICON_INFO_CIRCLE } from '../../constants/icons';
 import Button from '../button/Button';
+import { fieldLabel } from '../config-variable-button/ConfigVariableButton';
+import ControlledList from '../controlled-list/ControlledList';
+import { getOverrideHandler } from '../../constants/variables';
 
 interface IFieldWrapperProps {
     buttons?: any;
@@ -15,6 +18,20 @@ interface IFieldWrapperProps {
     labelPosition?: string;
     labelWidth?: string | number;
     header?: boolean;
+
+    type?: any;
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride?: string;
+
+    buttonGroup?: boolean;
+
+    previewMultiplier?: number;
 }
 
 interface IFieldWrapperState {
@@ -43,17 +60,44 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     private getLabelClass() {
-        if (!this.props.label) {
+        const { propKey, label, labelPosition } = this.props;
+
+        if (!label && propKey) {
+            return 'label-left';
+        } else if (!label) {
             return 'no-label';
         } else {
-            const labelPos = this.props.labelPosition ? this.props.labelPosition : 'left';
+            const labelPos = labelPosition ? labelPosition : 'left';
             return `label-${labelPos}`;
         }
     }
 
     private renderLabel() {
         const { showInfo } = this.state;
-        const { info, label, labelWidth } = this.props;
+        const {
+            info,
+            labelWidth,
+            propKey,
+            showCopyPropIds,
+            inventory,
+            setOverride,
+            onClose,
+            activeOverride,
+            removeOverride,
+            type
+        } = this.props;
+
+        const label = fieldLabel(
+            this.props.label,
+            propKey,
+            showCopyPropIds,
+            type,
+            inventory,
+            (o) => setOverride(o),
+            (o) => onClose(o),
+            activeOverride,
+            () => removeOverride()
+        );
 
         const iconInfo = showInfo ? ICON_TIMES_CIRCLE : ICON_INFO_CIRCLE;
         const style = {};
@@ -88,9 +132,39 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     public render() {
-        const { label, width, customClass, header } = this.props;
+        const {
+            label,
+            width,
+            header,
+            propKey,
+            override,
+            inventory,
+            type,
+            customClass,
+            buttonGroup,
+            previewMultiplier
+        } = this.props;
         const labelJSX = this.renderLabel();
 
+        const { hasOverride, previewItem } = getOverrideHandler(propKey, override, inventory);
+
+        const className = hasOverride ? `${customClass} override_variable ${type}` : customClass;
+
+        const children = () => {
+            if (hasOverride && !buttonGroup) {
+                return (
+                    <ControlledList
+                        items={[previewItem]}
+                        removable={true}
+                        type={type}
+                        previewMultiplier={previewMultiplier}
+                    />
+                );
+            } else {
+                return this.props.children;
+            }
+        };
+
         const style = {};
         let fieldProps = {};
         if (!label) {
@@ -104,13 +178,13 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
             <>
                 {header && this.renderButtons()}
                 <div
-                    className={`form-field ${customClass} ${this.getLabelClass()}`}
+                    className={`form-field ${className} ${this.getLabelClass()}`}
                     style={style}>
                     {labelJSX}
                     <div
                         className={`form-field-content ${this.getLabelClass()}`}
                         {...fieldProps}>
-                        {this.props.children}
+                        {children()}
                         {!header && this.renderButtons()}
                     </div>
                     {renderTooltip(this.tooltipId, this.props.tooltip)}

package/src/components/font-field/FontField.tsx

@@ -0,0 +1,78 @@
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import React from 'react';
+import FontPicker from '../font-picker/FontPicker';
+import { fontField } from '../../constants/copy';
+import { DEFAULT_FONTS } from '../../constants/fonts';
+
+interface IFontFieldProps {
+    font: string;
+    availableFonts: any[];
+    apiKey: string;
+    onChange: (font: string) => void;
+    width?: string | number;
+    labelPosition?: string;
+    label?: string;
+
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride: string;
+}
+
+const FontField = (props: IFontFieldProps) => {
+    const {
+        font,
+        availableFonts,
+        apiKey,
+        onChange,
+        width,
+        labelPosition,
+        label,
+        override,
+        showCopyPropIds,
+        propKey,
+        setOverride,
+        removeOverride,
+        inventory,
+        onClose,
+        activeOverride
+    } = props;
+
+    const customAvailableFonts = availableFonts.map((asset) => asset.name);
+    const standardFonts = DEFAULT_FONTS.map((f) => f.name);
+    const availableAssets = [...standardFonts, ...customAvailableFonts].sort();
+    const fontCheck = availableAssets.includes(font);
+    const fontValue = fontCheck ? font : fontField.fontNotFound;
+
+    return (
+        <FieldWrapper
+            customClass='font-field'
+            label={label}
+            labelPosition={labelPosition}
+            width={width}
+            propKey={propKey}
+            showCopyPropIds={showCopyPropIds}
+            inventory={inventory}
+            setOverride={setOverride}
+            onClose={onClose}
+            activeOverride={activeOverride}
+            removeOverride={removeOverride}
+            override={override}
+            type='text'>
+            <FontPicker
+                apiKey={apiKey}
+                activeFontFamily={fontValue}
+                families={availableAssets}
+                defaultFonts={DEFAULT_FONTS}
+                customFonts={availableFonts}
+                onChange={onChange}
+            />
+        </FieldWrapper>
+    );
+};
+
+export default FontField;

package/src/components/header/Header.tsx

@@ -544,9 +544,11 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     </span>
 
                     <span className='inner-right'>
-                        {CrMLink}
                         {storyToggle}
-                        <div className='additional-buttons'>{additionalButtons}</div>
+                        <div className='additional-buttons'>
+                            {additionalButtons}
+                            {CrMLink}
+                        </div>
                         {accountDropdownToggle}
                         <a
                             href='https://support.flashtalking.com/hc/en-us/sections/25515903148819-Imposium'

package/src/components/icon-toggle/IconToggle.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { getConfigVariableButton } from '../config-variable-button/ConfigVariableButton';
+import { getOverrideHandler } from '../../constants/variables';
+
+interface IIconToggleProps {
+    selected: boolean;
+    onChange(selected: boolean): any;
+    icon: any;
+
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride?: string;
+}
+
+const IconToggle: React.FC<IIconToggleProps> = ({
+    icon,
+    selected,
+    onChange,
+    override,
+    showCopyPropIds,
+    propKey,
+    setOverride,
+    removeOverride,
+    inventory,
+    onClose,
+    activeOverride
+}) => {
+    const content = selected ? icon : null;
+
+    const { hasOverride } = getOverrideHandler(propKey, override, inventory);
+
+    const inputField = () => {
+        if (hasOverride || showCopyPropIds) {
+            return getConfigVariableButton(
+                showCopyPropIds,
+                'boolean',
+                inventory,
+                (o) => setOverride(o),
+                (o) => onClose(o),
+                icon,
+                activeOverride,
+                () => removeOverride()
+            );
+        } else {
+            return (
+                <div
+                    className='icon-toggle'
+                    onClick={() => onChange(!selected)}>
+                    {content}
+                </div>
+            );
+        }
+    };
+
+    return inputField();
+};
+
+export default IconToggle;

package/src/components/number-field/NumberField.tsx

@@ -18,6 +18,17 @@ interface INumberFieldProps {
     max?: number;
     onBlur?(e): void;
     focusOnMount?: boolean;
+
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride?: string;
+
+    previewMultiplier?: number;
 }
 
 interface INumberFieldState {
@@ -122,17 +133,24 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
         let error: string = null;
 
         const {
-            label,
             placeholder,
             width,
             readOnly,
-            buttons,
             tooltip,
             info,
             labelPosition,
             labelWidth,
             min,
-            max
+            max,
+            showCopyPropIds,
+            propKey,
+            override,
+            inventory,
+            setOverride,
+            removeOverride,
+            onClose,
+            activeOverride,
+            previewMultiplier
         } = this.props;
         let value: any = this.state.value;
         if (value === null) {
@@ -154,15 +172,23 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
         return (
             <FieldWrapper
                 customClass={`number-field ${this.state.error ? 'invalid' : ''}`}
-                // draggableValue = {true}
-                // onDrag = {(v)=>this.handleLabelDrag(v)}
-                label={label}
+                label={this.props.label}
                 tooltip={tooltip}
-                buttons={buttons}
+                buttons={this.props.buttons}
                 info={error}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}>
+                width={width}
+                propKey={propKey}
+                showCopyPropIds={showCopyPropIds}
+                inventory={inventory}
+                setOverride={setOverride}
+                onClose={onClose}
+                activeOverride={activeOverride}
+                removeOverride={removeOverride}
+                override={override}
+                type='number'
+                previewMultiplier={previewMultiplier}>
                 <input
                     ref={this.inputRef}
                     type='number'

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

@@ -1,5 +1,4 @@
 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';
@@ -24,7 +23,6 @@ import PublishStatusIndicator from './publish/PublishStatusIndicator';
 import { bindActionCreators } from 'redux';
 import { publishVersion } from '../../redux/actions/publish';
 import { connect } from 'react-redux';
-import { CRM_INTEGRATED_PROJECT_TYPES } from '../../constants/publish';
 
 interface IPublishWizardProps {
     fromCrM?: boolean;
@@ -36,7 +34,7 @@ interface IPublishWizardProps {
     checkStoryForErrors(): any;
     addViewer(c: any): void;
     exportExperiences: () => void;
-    publishVersion: (api: IImposiumAPI, sId: string, creativeIds?: string[]) => any;
+    publishVersion: (api: IImposiumAPI, sId: string) => any;
     batchesList: any;
     onClose(): any;
     api: IImposiumAPI;
@@ -96,7 +94,6 @@ interface IPublishWizardState {
     next: boolean;
     nextStep: boolean;
     publishError: string;
-    selectedCreatives: string[];
 }
 
 interface IBigButtonProps {
@@ -143,8 +140,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             error: false,
             next: false,
             nextStep: false,
-            publishError: null,
-            selectedCreatives: []
+            publishError: null
         };
         this.emailWorkflow = React.createRef();
         this.hiddenFileInputRef = React.createRef();
@@ -305,7 +301,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
         if (fromCrM) {
             this.props
-                .publishVersion(api, id, this.state.selectedCreatives)
+                .publishVersion(api, id)
                 .then(() => {
                     this.setState({ screenIndex: 1 });
                 })
@@ -335,37 +331,15 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const { story, project, fromCrM } = this.props;
         const variables = story ? story.acts[project.actId].inventory : {};
         const varLength = variables ? Object.keys(variables).length : 0;
-        const projectType = story.creativeId
-            ? CRM_INTEGRATED_PROJECT_TYPES.SINGLE_CREATIVE
-            : CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE;
 
         if (fromCrM && varLength === 0) {
             return true;
-        } else if (
-            fromCrM &&
-            this.state.selectedCreatives.length === 0 &&
-            projectType === CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE
-        ) {
-            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, story } = this.props;
         const { publishing } = this.props.publishData;
         const disabledForCrM = this.shouldDisablePublishButtonForCrM();
         const lowerButtons = [];
@@ -373,15 +347,6 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         // publish and skip buttons
         if (screenIndex === 0) {
             // publish
-
-            const projectType = story.creativeId
-                ? CRM_INTEGRATED_PROJECT_TYPES.SINGLE_CREATIVE
-                : CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE;
-            const btnCopy = fromCrM
-                ? projectType === CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE
-                    ? `Publish to ${this.state.selectedCreatives.length} Creatives`
-                    : 'Publish to Creative Manager'
-                : copy.publish.btnPublish;
             lowerButtons.push(
                 <Button
                     tooltip={copy.publish.btnPublish}
@@ -390,7 +355,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     key='btn-publish'
                     onClick={() => this.handlePublish()}
                     color='primary'>
-                    {btnCopy}
+                    {copy.publish.btnPublish}
                 </Button>
             );
 
@@ -469,47 +434,28 @@ 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 errorCopyForCrM = this.getErrorCopyForCrMPublish();
-        const errorCopy = publishError ? publishError : errorCopyForCrM ? errorCopyForCrM : null;
-        const projectType = story.creativeId
-            ? CRM_INTEGRATED_PROJECT_TYPES.SINGLE_CREATIVE
-            : CRM_INTEGRATED_PROJECT_TYPES.MULTI_CREATIVE;
+        const errorCopy = publishError
+            ? publishError
+            : disabledForCrM
+            ? copy.publish.noVariablesError
+            : null;
+
         const error = errorCopy ? (
             <p className='publish-error'>
                 <span className='icon'>{ICON_EXCLAIMATION_TRIANGLE}</span>&nbsp;&nbsp;{errorCopy}
             </p>
         ) : null;
-
-        if (fromCrM) {
-            return (
-                <CrMPublishUI
-                    projectType={projectType}
-                    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>
-            );
-        }
+        return (
+            <div>
+                <h2>{copy.publish.publishStepTitle}</h2>
+                <HRule />
+                <p>{publishing ? copy.publish.publishInProgress : copy.publish.publishStepDesc}</p>
+                {error}
+            </div>
+        );
     }
 
     private renderDistributionOptions() {
@@ -519,13 +465,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             this.state;
 
         const { publishDataset, fromCrM, story, creativeManagerBaseUrl } = this.props;
-        const getCrMLink = (creativeLibraryId: string, creativeId?: string) => {
-            if (creativeId) {
-                return `${creativeManagerBaseUrl}/library/${creativeLibraryId}/creative/${creativeId}/versions/`;
-            } else {
-                return `${creativeManagerBaseUrl}/library/${creativeLibraryId}`;
-            }
-        };
+
         for (const comp of compositions) {
             compOpts.push({
                 value: comp.id,
@@ -613,16 +553,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                               {ICON_UP_RIGHT_FROM_SQUARE}&nbsp;{copy.publish.btnCrM}
                           </span>
                       ),
-                      link: getCrMLink(story.creativeLibraryId, story.creativeId)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(8),
-                      style: { width: 'calc(100% - 4px)' }
+                      link: `${creativeManagerBaseUrl}/library/${story.creativeLibraryId}/creative/${story.creativeId}/versions/`
                   }
               ];
 
@@ -694,7 +625,6 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                                         disabled={!selectedComposition}
                                         label={option.label}
                                         onClick={option.onClick}
-                                        style={option.style}
                                     />
                                 );
                             }

package/src/components/select-field/SelectField.tsx

@@ -23,6 +23,15 @@ interface ISelectFieldProps {
     showCopy?: boolean;
     onNotification?(e): void;
     onError?(e): void;
+
+    override?: any;
+    showCopyPropIds?: boolean;
+    propKey?: string;
+    setOverride?(e): void;
+    removeOverride?(): void;
+    inventory?: any;
+    onClose?(e: boolean): void;
+    activeOverride?: string;
 }
 
 class SelectField extends React.PureComponent<ISelectFieldProps> {
@@ -68,7 +77,6 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
 
     public render() {
         const {
-            label,
             showCopy,
             options,
             value,
@@ -80,7 +88,15 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
             info,
             labelPosition,
             labelWidth,
-            disableFirst
+            disableFirst,
+            propKey,
+            override,
+            inventory,
+            setOverride,
+            removeOverride,
+            onClose,
+            showCopyPropIds,
+            activeOverride
         } = this.props;
 
         const selectValue = value === null || value === undefined ? '' : value;
@@ -147,13 +163,22 @@ class SelectField extends React.PureComponent<ISelectFieldProps> {
         return (
             <FieldWrapper
                 customClass='select-field'
-                label={label}
+                label={this.props.label}
                 tooltip={tooltip}
                 buttons={btns}
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}>
+                width={width}
+                propKey={propKey}
+                showCopyPropIds={showCopyPropIds}
+                inventory={inventory}
+                setOverride={setOverride}
+                onClose={onClose}
+                activeOverride={activeOverride}
+                removeOverride={removeOverride}
+                override={override}
+                type='text'>
                 <select
                     value={selectValue}
                     onChange={(e) => this.onChange(e)}