@imposium-hub/components 2.9.0-0 → 2.9.0-10

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

@@ -12,7 +12,13 @@ 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 { CRM_PLACEMENT_VARS } from '../../../constants/publish';
+import {
+    ADSTUDIO_POST_RENDER_ACTION,
+    ASSET_NAME_VAR,
+    ASSETS_POST_RENDER_ACTION,
+    CRM_PLACEMENT_VARS
+} from '../../../constants/publish';
+import CheckboxField from '../../checkbox-field/CheckboxField';
 
 interface IEmailWorkflowProps {
     story: any;
@@ -69,12 +75,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;
 }
 
@@ -124,7 +130,6 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
             creativeManagerOverrides: {
                 creative_id: '',
                 creative_library_id: '',
-                notification_email: '',
                 placement_type: 'crm-adstudio'
             },
             waitingForPublish: false,
@@ -266,6 +271,8 @@ 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 = '';
@@ -288,12 +295,27 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         });
 
         if (isCrM) {
-            for (const id of CRM_PLACEMENT_VARS) {
-                maskConfig.push({
-                    id,
-                    name: id,
-                    show: true
-                });
+            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
+                    });
+                }
             }
         }
 
@@ -436,12 +458,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
     private getPostRenderActions() {
         const CrMUploadAction = { data: {} };
         const {
-            creativeManagerOverrides: {
-                placement_type,
-                creative_id,
-                creative_library_id,
-                notification_email
-            }
+            creativeManagerOverrides: { placement_type, creative_id, creative_library_id }
         } = this.state;
 
         CrMUploadAction['type'] = placement_type;
@@ -451,9 +468,6 @@ 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];
     }
@@ -911,10 +925,8 @@ const CrMOptions: React.FC<ICrMOptionsProps> = ({ options, onChange, errorCopy =
         </div>
     ) : null;
 
-    return (
+    const standardInterface = (
         <>
-            <HRule />
-            <br />
             <h2>{copy.publish.crmPlacement}</h2>
             <p>{copy.publish.crmData}</p>
             {e}
@@ -933,14 +945,44 @@ 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.email}
-                value={options.notification_email}
-                onChange={(v) => onInputChange('notification_email', v)}
+                label={copy.publish.creativeLibraryId}
+                value={options.creative_library_id}
+                onChange={(v) => onInputChange('creative_library_id', 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/replace-files-modal/ReplaceFilesModal.tsx

@@ -0,0 +1,217 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import Modal from '../modal/Modal';
+import Button from '../button/Button';
+import CheckboxField from '../checkbox-field/CheckboxField';
+import Section from '../section/Section';
+import { assets as copy } from '../../constants/copy';
+import { replaceFilesModalEvent } from '../../utils/modal';
+
+export interface IReplaceFilesModalProps {
+    onUpload: (f) => any;
+    onInstantUpload: (f) => any;
+    onApplyToAll: (e) => any;
+    onClose: () => void;
+    applyToAll: boolean;
+    existedAssets: any[];
+    existedAssetIds: any[];
+}
+
+export const ReplaceFilesModal = () => {
+    const [props, setProps] = useState<IReplaceFilesModalProps>(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [applyToAll, setApplyToAll] = useState<boolean>();
+    const [height, setHeight] = useState(200);
+    const [index, setIndex] = useState<number>(0);
+
+    const replaceFileModalRef = useRef(null);
+
+    useEffect(() => {
+        if (replaceFileModalRef.current) {
+            const {
+                current: { clientHeight }
+            } = replaceFileModalRef;
+            setHeight(clientHeight + 40);
+        }
+    });
+
+    const onOpen = (event) => {
+        setProps({
+            ...event.detail
+        });
+        setIsOpen(true);
+    };
+
+    const onClose = () => {
+        props.onClose();
+        setIsOpen(false);
+    };
+
+    const onReplaceHandler = (curApplyToAll, curIndex, file, assetId) => {
+        const newIndex = curIndex + 1;
+
+        if (curApplyToAll && curIndex === 0) {
+            const updatedAssets = props.existedAssets.map((asset, i) => {
+                const updatefile = asset;
+                updatefile['assetId'] = props.existedAssetIds[i];
+                return updatefile;
+            });
+
+            props.onInstantUpload(updatedAssets);
+            setIndex(0);
+            setIsOpen(false);
+        } else if (curApplyToAll) {
+            const updatedAssets = [];
+
+            for (let i = 0; i < props.existedAssets.length; i++) {
+                const updateFile =
+                    curIndex === 0
+                        ? props.existedAssets[i]
+                        : [
+                              ...props.existedAssets.slice(0, curIndex - 1),
+                              ...props.existedAssets.slice(curIndex)
+                          ][i];
+
+                if (updateFile) {
+                    updateFile['assetId'] =
+                        curIndex === 0
+                            ? props.existedAssetIds[i]
+                            : [
+                                  ...props.existedAssetIds.slice(0, curIndex - 1),
+                                  ...props.existedAssetIds.slice(curIndex)
+                              ][i];
+                    updatedAssets.push(updateFile);
+                    props.onInstantUpload(updatedAssets);
+                    setIndex(0);
+                    onClose();
+                }
+            }
+        } else {
+            if (newIndex === props.existedAssets.length) {
+                setIndex(0);
+                onClose();
+            } else {
+                setIndex(newIndex);
+            }
+
+            const updateFile = file;
+            updateFile['assetId'] = assetId;
+            props.onUpload([updateFile]);
+        }
+    };
+
+    const onAsNewHandler = (curApplyToAll, curIndex, file) => {
+        const newIndex = curIndex + 1;
+
+        if (curApplyToAll) {
+            props.onUpload(
+                curIndex === 0 ? props.existedAssets : props.existedAssets.slice(curIndex)
+            );
+
+            setIndex(0);
+            onClose();
+        } else {
+            if (newIndex === props.existedAssets.length) {
+                setIndex(0);
+                onClose();
+            } else {
+                setIndex(newIndex);
+            }
+
+            props.onUpload([file]);
+        }
+    };
+
+    const onApplyToAllHandler = (e) => {
+        setApplyToAll(e);
+        props.onApplyToAll(e);
+    };
+
+    const onReplace = useCallback(
+        (curApplyToAll, curIndex, file, assetId) =>
+            onReplaceHandler(curApplyToAll, curIndex, file, assetId),
+        [isOpen]
+    );
+
+    const onApplyToAll = useCallback((e) => onApplyToAllHandler(e), [isOpen]);
+
+    const onAsNew = useCallback(
+        (curApplyToAll, curIndex, file) => onAsNewHandler(curApplyToAll, curIndex, file),
+        [isOpen]
+    );
+
+    useEffect(() => {
+        window.addEventListener(replaceFilesModalEvent, onOpen);
+        return () => {
+            window.removeEventListener(replaceFilesModalEvent, onOpen);
+        };
+    }, []);
+
+    const modal = () => {
+        if (isOpen) {
+            const file = props.existedAssets[index];
+            const assetId = props.existedAssetIds[index];
+            const name = file.name.slice(0, file.name.lastIndexOf('.'));
+            return (
+                <Modal
+                    onRequestClose={onClose}
+                    wrapperStyle={{
+                        left: '0px',
+                        width: '100%'
+                    }}
+                    style={{
+                        width: '400px',
+                        height: `${height}px`,
+                        top: 'calc(50% - 150px)',
+                        left: 'calc((100% - 400px) / 2)'
+                    }}
+                    isOpen={true}>
+                    <Section>
+                        <div
+                            className='replace-files-modal'
+                            ref={replaceFileModalRef}>
+                            <p>{copy.uploads.title.replace('[name]', name)}</p>
+                            <div className='replace-files-buttons'>
+                                <div className='checkbox'>
+                                    <CheckboxField
+                                        label={copy.uploads.applyAll}
+                                        value={applyToAll}
+                                        onChange={onApplyToAll}
+                                    />
+                                </div>
+                                <div className='buttons'>
+                                    <Button
+                                        onClick={() => onAsNew(applyToAll, index, file)}
+                                        size='large'
+                                        style='bold'
+                                        color='primary'>
+                                        {copy.uploads.keepBoth}
+                                    </Button>
+                                    <Button
+                                        onClick={() => onReplace(applyToAll, index, file, assetId)}
+                                        size='large'
+                                        style='bold'
+                                        color='primary'>
+                                        {copy.uploads.replace}
+                                    </Button>
+                                    <Button
+                                        onClick={onClose}
+                                        size='large'
+                                        style='bold'
+                                        color='default'>
+                                        {copy.uploads.cancelButton}
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </Section>
+                </Modal>
+            );
+        }
+    };
+
+    const PortalContextComponent = () =>
+        ReactDOM.createPortal(modal(), document.querySelector('#react-root'));
+
+    return <PortalContextComponent />;
+};

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

@@ -1,6 +1,7 @@
 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;
@@ -15,6 +16,7 @@ interface ISliderFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
+    enabledToggle?: boolean;
 }
 
 interface ISliderFieldState {
@@ -69,6 +71,14 @@ 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,
@@ -81,16 +91,15 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
             tooltip,
             info,
             labelPosition,
-            labelWidth
+            labelWidth,
+            enabledToggle
         } = this.props;
         const { tempValue } = this.state;
+        const valueSet = value !== null && value !== undefined;
+        const val = tempValue !== null ? tempValue : !valueSet ? defaultValue : value;
 
-        const val =
-            tempValue !== null
-                ? tempValue
-                : value === null || value === undefined
-                ? defaultValue
-                : value;
+        const showInputs = (enabledToggle && valueSet) || !enabledToggle;
+        const icon = valueSet ? ICON_CHECK : null;
 
         return (
             <FieldWrapper
@@ -101,21 +110,34 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
                 width={width}>
-                <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}
-                />
+                {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}
+                    />
+                )}
             </FieldWrapper>
         );
     }

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

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

package/src/components/tabs/Tabs.tsx

@@ -95,7 +95,8 @@ class Tabs extends React.PureComponent<ITabsProps, ITabsState> {
                 const content = React.cloneElement(option.content, {
                     active,
                     width,
-                    height
+                    height,
+                    key: option.key
                 });
 
                 contentArray.push(content);

package/src/components/text-field/TextField.tsx

@@ -46,6 +46,7 @@ interface ITextFieldProps {
     labelWidth?: string | number;
     className?: string;
     maxLength?: number;
+    header?: boolean;
 }
 
 interface ITextFieldState {
@@ -487,7 +488,8 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     public render() {
-        const { label, width, tooltip, info, labelPosition, labelWidth, className } = this.props;
+        const { label, width, tooltip, info, labelPosition, labelWidth, className, header } =
+            this.props;
         return (
             <FieldWrapper
                 customClass={`text-field ${className}`}
@@ -497,7 +499,8 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}>
+                width={width}
+                header={header}>
                 {this.renderInput()}
             </FieldWrapper>
         );

package/src/constants/copy.ts

@@ -28,7 +28,11 @@ export const assets = {
         assignToProjectInfo:
             'If selected, any assets uploaded will be available to use with all projects on the current organization.',
         uploadButton: 'Upload',
-        cancelButton: 'Cancel'
+        cancelButton: 'Cancel',
+        title: `An asset named "[name]" already exists in this project. Do you want to replace it with the one you're uploading?`,
+        keepBoth: 'Keep Both',
+        replace: 'Replace',
+        applyAll: 'Apply To All'
     },
     tags: {
         add: 'Add new tag',
@@ -123,6 +127,7 @@ export const compositions = {
 };
 
 export const publish = {
+    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.',
     publishInProgress: 'Publish to Creative Manager in progress',
@@ -130,7 +135,6 @@ export const publish = {
     btnCrM: 'Creative Manager',
     creativeLibraryId: 'Creative Library ID',
     creativeId: 'Creative ID',
-    email: 'Notification Email',
     missingFields: 'Please provide the missing fields and try again!',
     crmPlacement: 'Creative Manager Placement Variables',
     crmData: `If your CSV batch data doesn't contain the required Creative Manager placement variables, or you would like to override them, enter the values below before you upload the batch data.`,

package/src/constants/icons.tsx

@@ -73,7 +73,12 @@ import {
 } from '@fortawesome/pro-light-svg-icons';
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
-import { faCloudArrowUp, faFilters } from '@fortawesome/pro-solid-svg-icons';
+import {
+    faCloudArrowUp,
+    faFileCirclePlus,
+    faFilePen,
+    faFilters
+} from '@fortawesome/pro-solid-svg-icons';
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
@@ -223,3 +228,7 @@ export const ICON_UP_RIGHT_FROM_SQUARE = <FontAwesomeIcon icon={faUpRightFromSqu
 export const ICON_FILE_UPLOAD = <FontAwesomeIcon icon={faCloudArrowUp} />;
 
 export const ICON_FILE_ERROR = <FontAwesomeIcon icon={faCircleExclamation} />;
+
+export const ICON_FILE_ADD = <FontAwesomeIcon icon={faFileCirclePlus} />;
+
+export const ICON_FILE_REPLACE = <FontAwesomeIcon icon={faFilePen} />;

package/src/constants/publish.ts

@@ -14,11 +14,16 @@ export const CRM_PLACEMENT_OPTIONS = [
     }
 ];
 
+export const ASSET_NAME_VAR = 'asset-name';
+
 export const CRM_PLACEMENT_VARS = [
     'creative_library_id',
     'creative_id',
     'version-name',
     'version-id',
-    'clickTag1',
-    'notificiaton_email'
+    'clickTag1'
 ];
+
+export const ADSTUDIO_POST_RENDER_ACTION = 'crm-adstudio';
+
+export const ASSETS_POST_RENDER_ACTION = 'crm-asset';