@imposium-hub/components 2.8.0-6 → 2.8.0

package/src/components/edit-guide-modal/EditGuideModal.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import Modal from '../modal/Modal';
+import Button from '../button/Button';
+import Section from '../section/Section';
+import NumberField from '../number-field/NumberField';
+
+export interface IEditGuideModalProps {
+    guide: number;
+    onClose: () => any;
+    onContinue: (e) => any;
+    isHorizontal: boolean;
+}
+
+export const EditGuideModal = () => {
+    const [props, setProps] = useState<IEditGuideModalProps>(null);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [guide, setGuide] = useState<number>(null);
+
+    const onOpen = (event) => {
+        setProps({
+            ...event.detail
+        });
+        setIsOpen(true);
+    };
+
+    const onClose = () => setIsOpen(false);
+
+    useEffect(() => {
+        window.addEventListener('openeditguidemodal', onOpen);
+        return () => {
+            window.removeEventListener('openeditguidemodal', onOpen);
+        };
+    }, []);
+
+    useEffect(() => {
+        if (props?.guide) {
+            setGuide(props.guide);
+        }
+    }, [props?.guide]);
+
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            onContinue(guide);
+        }
+    };
+
+    useEffect(() => {
+        if (isOpen) {
+            window.addEventListener('keypress', onKeyDown);
+        } else {
+            window.removeEventListener('keypress', onKeyDown);
+        }
+        return () => {
+            window.removeEventListener('keypress', onKeyDown);
+        };
+    }, [isOpen, onKeyDown]);
+
+    const onContinue = useCallback(
+        (e) => {
+            if (e) {
+                props.onContinue(e);
+                onClose();
+            }
+        },
+        [isOpen]
+    );
+
+    const modal = isOpen && (
+        <Modal
+            onRequestClose={onClose}
+            style={{
+                width: '200px',
+                height: '110px',
+                top: '25%',
+                left: '55%'
+            }}
+            isOpen={true}>
+            <Section
+                title={`Edit ${props.isHorizontal ? 'Horizontal Guide' : 'Vertical Guide'}`}
+                style={{ padding: '10px' }}>
+                <NumberField
+                    label={'Guide Position'}
+                    labelPosition='top'
+                    onChange={(e) => setGuide(Number(e))}
+                    focusOnMount={true}
+                    value={guide}
+                />
+                <Button
+                    onClick={onClose}
+                    style='bold'
+                    color='secondary'>
+                    Cancel
+                </Button>
+                <Button
+                    onClick={() => onContinue(guide)}
+                    style='bold'
+                    color='primary'>
+                    Ok
+                </Button>
+            </Section>
+        </Modal>
+    );
+
+    const PortalContextComponent = () =>
+        ReactDOM.createPortal(modal, document.querySelector('#react-root'));
+
+    return <PortalContextComponent />;
+};

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 = 'royalblue';
+    private static readonly DEFAULT_ACCOUNT_TOGGLE_COLOR: string = '#AF1126';
 
     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 = '';
+        let activeFirstChar: string = 'X';
 
         if (activeOrganizationBlob && activeOrganizationBlob.hasOwnProperty('name')) {
             dropdownToggleColor = string2HexCode(activeOrganizationBlob.name);

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

@@ -17,6 +17,7 @@ interface INumberFieldProps {
     min?: number;
     max?: number;
     onBlur?(e): void;
+    focusOnMount?: boolean;
 }
 
 interface INumberFieldState {
@@ -37,6 +38,9 @@ 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

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/constants/copy.ts

@@ -123,6 +123,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 +131,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/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';

package/src/index.ts

@@ -162,6 +162,7 @@ import StoryTableNameFilter from './components/assets/StoryTableNameFilter';
 import { AppWrapper } from './components/app-wrapper/AppWrapper';
 import { pushRoute, replaceRoute } from './utils/routing';
 import { ProjectDropdown } from './components/header/ProjectDropdown';
+import { EditGuideModal, IEditGuideModalProps } from './components/edit-guide-modal/EditGuideModal';
 
 export {
     ProjectDropdown,
@@ -319,5 +320,7 @@ export {
     Submenu,
     CopyPropIdButton,
     ConfirmModal,
-    IConfirmModalProps
+    IConfirmModalProps,
+    EditGuideModal,
+    IEditGuideModalProps
 };