@imposium-hub/components 2.9.0-14 → 2.9.0-2

package/src/components/assets/AssetsTablePreviewCell.tsx

@@ -11,7 +11,6 @@ import {
 interface IAssetsTablePreviewCell {
     cell: any;
     showMedia: boolean;
-    asset: any;
     onClick(): void;
     onRequestClose(): void;
 }
@@ -44,15 +43,12 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
     }
 
     public render() {
-        const { cell, showMedia, asset } = this.props;
+        const { cell, showMedia } = this.props;
         const playbackSettings = {
             autoPlay: true,
             loop: false
         };
 
-        const url = asset?.url || cell.row.original.url;
-        const width = asset?.width || cell.row.original.width;
-        const height = asset?.height || cell.row.original.height;
         return (
             <div
                 ref={this.iconRef}
@@ -62,17 +58,25 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
                 {cell.row.values.type === ASSET_TYPES.IMAGE && showMedia && (
                     <ImagePreview
                         style={{
-                            ...getMediaPreviewStyle(width, height, this.iconRef)
+                            ...getMediaPreviewStyle(
+                                cell.row.original.width,
+                                cell.row.original.height,
+                                this.iconRef
+                            )
                         }}
-                        url={url}
+                        url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
                 )}
                 {cell.row.values.type === ASSET_TYPES.VIDEO && showMedia && (
                     <VideoPreview
                         playbackSettings={playbackSettings}
-                        style={getMediaPreviewStyle(width, height, this.iconRef)}
-                        url={url}
+                        style={getMediaPreviewStyle(
+                            cell.row.original.width,
+                            cell.row.original.height,
+                            this.iconRef
+                        )}
+                        url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
                 )}
@@ -80,7 +84,7 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
                     <AudioPreview
                         playbackSettings={playbackSettings}
                         style={getMediaPreviewStyle(5, 1, this.iconRef)}
-                        url={url}
+                        url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
                 )}

package/src/components/assets/AssetsTableTagsFilter.tsx

@@ -19,7 +19,6 @@ class AssetsTableTagsFilter extends React.PureComponent<IAssetsTableTagsFilterPr
                 submittableType='search'
                 value={assetFilters.tags}
                 doSubmit={(t) => this.props.updateFilters({ tags: t })}
-                header={true}
             />
         );
     };

package/src/components/assets/AssetsUploadMenu.tsx

@@ -18,7 +18,7 @@ import AssetsTableTagsPivot from './AssetsTableTagsPivot';
 import Tag from '../tag/Tag';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEraser } from '@fortawesome/free-solid-svg-icons';
-import { ICON_FILE_ADD, ICON_FILE_REPLACE, ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
+import { ICON_TIMES, ICON_UPLOAD } from '../../constants/icons';
 import AssetsTableDropzone from './AssetsTableDropzone';
 
 interface IAssetsUploadMenuProps {
@@ -148,7 +148,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
     public render() {
         const {
-            assetUploads,
+            assetUploads: { uploads },
             editor: {
                 fromCrM,
                 showUploadsMenu,
@@ -163,13 +163,10 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
             },
             assetTags
         } = this.props;
-
-        const uploads = assetUploads?.uploads || [];
         const disable = uploads.length > 0 ? false : true;
 
         let uploadsListInner;
         const uploading = [];
-
         if (uploads.length > 0) {
             uploadsListInner = uploads.map((u: any) => {
                 const { filename, percent, tags } = u;
@@ -185,27 +182,21 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                         </Button>
                     );
 
-                    const fileTags =
-                        tags && !u.assetId
-                            ? tags.map((tag: string) => (
-                                  <Tag
-                                      key={tag}
-                                      copy={tag}
-                                      colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
-                                  />
-                              ))
-                            : [];
+                    const fileTags = tags
+                        ? tags.map((tag: string) => (
+                              <Tag
+                                  key={tag}
+                                  copy={tag}
+                                  colorize={AssetsTableTagsPivot.COLORIZE_TAGS}
+                              />
+                          ))
+                        : [];
 
                     return (
                         <div
                             className='ongoing-upload'
                             key={filename}>
                             <div className='ongoing-upload-inner'>
-                                {u.assetId ? (
-                                    <div className='upload-icon'>{ICON_FILE_REPLACE}</div>
-                                ) : (
-                                    <div className='upload-icon'>{ICON_FILE_ADD}</div>
-                                )}
                                 <input
                                     className='upload-filename'
                                     value={filename}

package/src/components/confirm-modal/ConfirmModal.tsx

@@ -4,7 +4,6 @@ import Modal from '../modal/Modal';
 import Button from '../button/Button';
 import { confirm as copy } from '../../constants/copy';
 import Section from '../section/Section';
-import { confirmModalEvent } from '../../utils/modal';
 
 export interface IConfirmModalProps {
     onYes: () => void;
@@ -66,9 +65,9 @@ export const ConfirmModal = () => {
     );
 
     useEffect(() => {
-        window.addEventListener(confirmModalEvent, onOpen);
+        window.addEventListener('openconfirmmodal', onOpen);
         return () => {
-            window.removeEventListener(confirmModalEvent, onOpen);
+            window.removeEventListener('openconfirmmodal', onOpen);
         };
     }, []);
 

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

@@ -14,7 +14,6 @@ interface IFieldWrapperProps {
     width?: string | number;
     labelPosition?: string;
     labelWidth?: string | number;
-    header?: boolean;
 }
 
 interface IFieldWrapperState {
@@ -88,7 +87,7 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     public render() {
-        const { label, width, customClass, header } = this.props;
+        const { label, width, customClass } = this.props;
         const labelJSX = this.renderLabel();
 
         const style = {};
@@ -101,22 +100,19 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
         }
 
         return (
-            <>
-                {header && this.renderButtons()}
+            <div
+                className={`form-field ${customClass} ${this.getLabelClass()}`}
+                style={style}>
+                {labelJSX}
                 <div
-                    className={`form-field ${customClass} ${this.getLabelClass()}`}
-                    style={style}>
-                    {labelJSX}
-                    <div
-                        className={`form-field-content ${this.getLabelClass()}`}
-                        {...fieldProps}>
-                        {this.props.children}
-                        {!header && this.renderButtons()}
-                    </div>
-                    {renderTooltip(this.tooltipId, this.props.tooltip)}
-                    {this.renderInfo()}
+                    className={`form-field-content ${this.getLabelClass()}`}
+                    {...fieldProps}>
+                    {this.props.children}
+                    {this.renderButtons()}
                 </div>
-            </>
+                {renderTooltip(this.tooltipId, this.props.tooltip)}
+                {this.renderInfo()}
+            </div>
         );
     }
 

package/src/components/header/Header.tsx

@@ -73,7 +73,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
     private static readonly SDK_DOCS_LINK: string = 'https://docs.imposium.com/js-sdk/';
 
-    private static readonly DEFAULT_ACCOUNT_TOGGLE_COLOR: string = '#AF1126';
+    private static readonly DEFAULT_ACCOUNT_TOGGLE_COLOR: string = 'royalblue';
 
     private static readonly NO_STORIES_COPY: string = 'No stories were found';
 
@@ -144,7 +144,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 : [];
 
         let dropdownToggleColor: string = ImposiumHeader.DEFAULT_ACCOUNT_TOGGLE_COLOR;
-        let activeFirstChar: string = 'X';
+        let activeFirstChar: string = '';
 
         if (activeOrganizationBlob && activeOrganizationBlob.hasOwnProperty('name')) {
             dropdownToggleColor = string2HexCode(activeOrganizationBlob.name);
@@ -164,7 +164,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         const { activeOrganization, api, activeServiceId, unsavedChanges } = this.props;
 
         const changeStory = () => {
-            api.cancelAllPendingRequests();
             pushRoute(`/${activeOrganization}/${story.id}`);
             api.cacheActiveStory(activeServiceId, activeOrganization, story.id);
         };
@@ -179,8 +178,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
             openConfirmModal({
                 showCancel: true,
-                showNo: true,
                 noLabel: header.noSave,
+                showNo: true,
                 onNo: () => changeStory(),
                 yesLabel: header.onSave,
                 onYes: () => onYes(),
@@ -199,9 +198,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             this.setState({ showAccountDropdown: false });
 
             if (orgId) {
+                const lastModified = getLastModifiedStoryInOrg(orgId, this.props.access);
                 const changeOrg = () => {
-                    api.cancelAllPendingRequests();
-                    const lastModified = getLastModifiedStoryInOrg(orgId, this.props.access);
                     let storyId = lastModified;
                     api.getCachedStoryForOrg(activeServiceId, orgId)
                         .then((res) => {
@@ -211,7 +209,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                                 api.cacheActiveStory(activeServiceId, orgId, storyId);
                             } else {
                                 pushRoute(`/${orgId}`);
-                                api.cacheActiveStory(activeServiceId, orgId);
                             }
                         })
                         .catch((e) => {
@@ -229,8 +226,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
                     openConfirmModal({
                         showCancel: true,
-                        showNo: true,
                         noLabel: header.noSave,
+                        showNo: true,
                         onNo: () => changeOrg(),
                         yesLabel: header.onSave,
                         onYes: () => onYes(),

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

@@ -17,7 +17,6 @@ interface INumberFieldProps {
     min?: number;
     max?: number;
     onBlur?(e): void;
-    focusOnMount?: boolean;
 }
 
 interface INumberFieldState {
@@ -38,9 +37,6 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
     }
 
     public componentDidMount(): void {
-        if (this.props.focusOnMount && this.inputRef.current) {
-            this.inputRef.current.focus();
-        }
         this.setState({
             error: false,
             value: this.props.value
@@ -74,8 +70,8 @@ class NumberField extends React.PureComponent<INumberFieldProps, INumberFieldSta
 
     private onChange(e) {
         let val = e.target.value;
-        if (val === '' || val === null) {
-            val = this.props.min;
+        if (val === '') {
+            val = null;
         } else {
             val = parseFloat(val);
         }

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

@@ -12,13 +12,7 @@ import { connect } from 'react-redux';
 import SelectField from '../../select-field/SelectField';
 import { updateAssociation, getBatch, setPage } from '../../../redux/actions/active-batch';
 import TextField from '../../text-field/TextField';
-import {
-    ADSTUDIO_POST_RENDER_ACTION,
-    ASSET_NAME_VAR,
-    ASSETS_POST_RENDER_ACTION,
-    CRM_PLACEMENT_VARS
-} from '../../../constants/publish';
-import CheckboxField from '../../checkbox-field/CheckboxField';
+import { CRM_PLACEMENT_VARS } from '../../../constants/publish';
 
 interface IEmailWorkflowProps {
     story: any;
@@ -75,12 +69,12 @@ interface IEmailWorkflowProps {
     onNext: (val: boolean) => void;
     next: boolean;
     isCrM: boolean;
-    isCrMAsset?: boolean;
 }
 
 interface CrMOverrides {
     creative_id: string;
     creative_library_id: string;
+    notification_email: string;
     placement_type: string;
 }
 
@@ -130,6 +124,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             creativeManagerOverrides: {
                 creative_id: '',
                 creative_library_id: '',
+                notification_email: '',
                 placement_type: 'crm-adstudio'
             },
             waitingForPublish: false,
@@ -271,8 +266,6 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         const { name } = this.props.story;
         const { isCrM } = this.props;
         const { inventory, inventoryKeys } = this.state;
-        const uploadAsAssets =
-            this.state.creativeManagerOverrides.placement_type === ASSETS_POST_RENDER_ACTION;
 
         const maskConfig: any[] = inventoryKeys.map((currKey: string) => {
             let value = '';
@@ -295,27 +288,12 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         });
 
         if (isCrM) {
-            if (uploadAsAssets) {
-                maskConfig.push(
-                    {
-                        id: ASSET_NAME_VAR,
-                        name: ASSET_NAME_VAR,
-                        show: true
-                    },
-                    {
-                        id: 'creative_library_id',
-                        name: 'creative_library_id',
-                        show: true
-                    }
-                );
-            } else {
-                for (const id of CRM_PLACEMENT_VARS) {
-                    maskConfig.push({
-                        id,
-                        name: id,
-                        show: true
-                    });
-                }
+            for (const id of CRM_PLACEMENT_VARS) {
+                maskConfig.push({
+                    id,
+                    name: id,
+                    show: true
+                });
             }
         }
 
@@ -458,7 +436,12 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     private getPostRenderActions() {
         const CrMUploadAction = { data: {} };
         const {
-            creativeManagerOverrides: { placement_type, creative_id, creative_library_id }
+            creativeManagerOverrides: {
+                placement_type,
+                creative_id,
+                creative_library_id,
+                notification_email
+            }
         } = this.state;
 
         CrMUploadAction['type'] = placement_type;
@@ -468,6 +451,9 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         if (creative_library_id) {
             CrMUploadAction.data['creative_library_id'] = creative_library_id;
         }
+        if (notification_email) {
+            CrMUploadAction.data['notification_email'] = notification_email;
+        }
 
         return [CrMUploadAction];
     }
@@ -729,9 +715,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         };
 
         if (!publishDataset) {
-            if (!batchError) {
-                emailOptions.push(downloadSampleCsv);
-            }
+            emailOptions.push(downloadSampleCsv);
             emailOptions.push(selectCsv);
         } else {
             emailOptions.push(uploadDataset);
@@ -795,7 +779,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
 
         const downloadCSV = (
             <>
-                {downloadCSVDiv}
+                {this.props.error ? (this.props.next ? downloadCSVDiv : '') : downloadCSVDiv}
                 {this.renderColumnMap()}
             </>
         );
@@ -871,13 +855,6 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                             />
                         );
                     })}
-                    {batchError && (
-                        <BigButton
-                            label={downloadCsvLabel}
-                            disabled={downloading}
-                            onClick={() => this.downloadCsv()}
-                        />
-                    )}
                 </div>
             </div>
         );
@@ -934,8 +911,10 @@ const CrMOptions: React.FC<ICrMOptionsProps> = ({ options, onChange, errorCopy =
         </div>
     ) : null;
 
-    const standardInterface = (
+    return (
         <>
+            <HRule />
+            <br />
             <h2>{copy.publish.crmPlacement}</h2>
             <p>{copy.publish.crmData}</p>
             {e}
@@ -954,44 +933,14 @@ const CrMOptions: React.FC<ICrMOptionsProps> = ({ options, onChange, errorCopy =
                 value={options.creative_id}
                 onChange={(v) => onInputChange('creative_id', v)}
             />
-        </>
-    );
-
-    const assetInterface = (
-        <>
-            <h2>{copy.publish.crmPlacement}</h2>
-            <p>{copy.publish.crmData}</p>
-            {e}
-            <br />
             <TextField
                 width={'33%'}
                 labelPosition='top'
-                label={copy.publish.creativeLibraryId}
-                value={options.creative_library_id}
-                onChange={(v) => onInputChange('creative_library_id', v)}
+                label={copy.publish.email}
+                value={options.notification_email}
+                onChange={(v) => onInputChange('notification_email', v)}
             />
-        </>
-    );
-    return (
-        <>
-            <HRule />
             <br />
-            {options['placement_type'] === ASSETS_POST_RENDER_ACTION
-                ? assetInterface
-                : standardInterface}
-            <br />
-            <HRule />
-            <CheckboxField
-                value={options['placement_type'] === ASSETS_POST_RENDER_ACTION ? true : false}
-                label={copy.publish.uploadAsAssets}
-                onChange={(v) => {
-                    if (v === false) {
-                        onInputChange('placement_type', ADSTUDIO_POST_RENDER_ACTION);
-                    } else {
-                        onInputChange('placement_type', ASSETS_POST_RENDER_ACTION);
-                    }
-                }}
-            />
             <HRule />
         </>
     );

package/src/components/slider-field/SliderField.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
-import { ICON_CHECK } from '../../constants/icons';
 
 interface ISliderFieldProps {
     label?: any;
@@ -16,7 +15,6 @@ interface ISliderFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
-    enabledToggle?: boolean;
 }
 
 interface ISliderFieldState {
@@ -71,14 +69,6 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
         }
     }
 
-    private toggle() {
-        if (this.props.value !== undefined && this.props.value !== null) {
-            this.props.onChange(null);
-        } else {
-            this.props.onChange(this.props.defaultValue);
-        }
-    }
-
     public render() {
         const {
             label,
@@ -91,15 +81,16 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
             tooltip,
             info,
             labelPosition,
-            labelWidth,
-            enabledToggle
+            labelWidth
         } = this.props;
         const { tempValue } = this.state;
-        const valueSet = value !== null && value !== undefined;
-        const val = tempValue !== null ? tempValue : !valueSet ? defaultValue : value;
 
-        const showInputs = (enabledToggle && valueSet) || !enabledToggle;
-        const icon = valueSet ? ICON_CHECK : null;
+        const val =
+            tempValue !== null
+                ? tempValue
+                : value === null || value === undefined
+                ? defaultValue
+                : value;
 
         return (
             <FieldWrapper
@@ -110,34 +101,21 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
                 width={width}>
-                {enabledToggle && (
-                    <div
-                        className='checkbox'
-                        onClick={(e) => this.toggle()}>
-                        {icon}
-                    </div>
-                )}
-
-                {showInputs && (
-                    <input
-                        className={enabledToggle ? 'toggle' : ''}
-                        onChange={(e) => this.rangeInputChange(e)}
-                        type='range'
-                        min={min}
-                        max={max}
-                        value={val}
-                        step={step}
-                    />
-                )}
-
-                {showInputs && (
-                    <input
-                        className='val'
-                        onChange={(e) => this.numberInputChange(e)}
-                        type='number'
-                        value={val}
-                    />
-                )}
+                <input
+                    onChange={(e) => this.rangeInputChange(e)}
+                    type='range'
+                    min={min}
+                    max={max}
+                    value={val}
+                    step={step}
+                />
+
+                <input
+                    className='val'
+                    onChange={(e) => this.numberInputChange(e)}
+                    type='number'
+                    value={val}
+                />
             </FieldWrapper>
         );
     }

package/src/components/story-previewer/StoryPreviewer.tsx

@@ -48,7 +48,6 @@ interface IStoryPreviewerProps {
     compositionOptions?: any[];
     editor: any;
     updateEditorConfig(c): void;
-    reRender: boolean;
 }
 
 interface IStoryPreviewerState {
@@ -200,15 +199,7 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         if (!prevProps.editor?.autoRender && this.props.editor?.autoRender) {
             this.props.updateEditorConfig({ autoRender: false });
             this.evtHandlers.gotExperience = null;
-            this.props.api.cancelExperiencePolling().then(() => {
-                if (this.props.editor?.reRender) {
-                    this.setState({ compositionOverride: null }, () =>
-                        this.createExperience(this.props.compositionId)
-                    );
-                } else {
-                    this.createExperience();
-                }
-            });
+            this.props.api.cancelExperiencePolling().then(() => this.createExperience());
         }
 
         if (
@@ -511,17 +502,11 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
                                                     onExperenceLoaded(resVideo);
                                                 }
 
-                                                this.setState(
-                                                    {
-                                                        rendering: false,
-                                                        activeOutput: this.getFirstOutput(resVideo),
-                                                        experience: resVideo
-                                                    },
-                                                    () =>
-                                                        this.props.updateEditorConfig({
-                                                            reRender: false
-                                                        })
-                                                );
+                                                this.setState({
+                                                    rendering: false,
+                                                    activeOutput: this.getFirstOutput(resVideo),
+                                                    experience: resVideo
+                                                });
                                             };
 
                                             api.getExperience(experienceId, true)
@@ -624,12 +609,12 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         );
     }
 
-    private createExperience(compositionId?) {
+    private createExperience() {
         const { storyId, onNotification, onError, api, onExperienceCreated, useWorkingCopy } =
             this.props;
 
         const fastRender = this.props.editor?.fastRender || false;
-        const compId = compositionId ? compositionId : this.getCompId();
+        const compId = this.getCompId();
 
         this.resetState(false, () => {
             this.setState(
@@ -894,7 +879,6 @@ class StoryPreviewer extends React.PureComponent<IStoryPreviewerProps, IStoryPre
         const { storyId } = this.props;
         const renderCopy = experience ? copy.btnReRender : copy.btnRender;
         const compId = this.getCompId();
-
         const btnRender = !rendering ? (
             <Button
                 disabled={!compId}