@imposium-hub/components 2.2.45-0 → 2.2.46-0

package/src/components/data-table/DataTable.tsx

@@ -265,7 +265,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                                 {...column.getHeaderProps()}
                                                 className={`ip-table-header ${
                                                     column.canSort ? 'ip-sortable' : ''
-                                                }`}>
+                                                } ${column.pin ? 'pin' : ''}`}>
                                                 {!searchable && (
                                                     <div
                                                         {...toggleProps}
@@ -371,7 +371,7 @@ const DataTable: React.FC<IDataTableProps> = (props: IDataTableProps) => {
                                 {...cell.getCellProps()}
                                 className={`ip-table-col ${
                                     cell.column.overflowVisible ? 'overflow-visible' : ''
-                                }`.trim()}>
+                                } ${cell.column.pin ? 'pin' : ''}`.trim()}>
                                 {cell.render('Cell')}
                             </td>
                         ));

package/src/components/header/Header.tsx

@@ -15,16 +15,12 @@ export interface IHeaderProps {
     activeOrganization: string;
     activeStory?: string;
     hideStoryPicker?: boolean;
-    hideOrgPicker?: boolean;
     onOrganizationChange?: (orgId: any) => any;
     onStoryChange?: (story: any) => any;
     logout: (...args) => any;
-    additionalButtons?: any[];
     auth: any;
     story: any;
     baseUrl: any;
-    hideDocs?: boolean;
-    showFTLogo?: boolean;
     access: any;
 }
 
@@ -310,7 +306,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
         this.setState({ dataLoading: true });
 
-        // SessionService.getAccessData(idToken, baseUrl, true, activeOrganization)
         SessionService.getAccessData(idToken, baseUrl)
             .then((res) => {
                 this.setState({ dataLoading: false, accessData: res }, () =>
@@ -323,17 +318,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     };
 
     public render() {
-        const {
-            email,
-            activeOrganization,
-            activeStory,
-            hideStoryPicker,
-            story,
-            hideOrgPicker,
-            additionalButtons,
-            showFTLogo,
-            hideDocs
-        } = this.props;
+        const { email, activeOrganization, activeStory, hideStoryPicker, story } = this.props;
         const {
             accessData,
             showAccountDropdown,
@@ -366,14 +351,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
         let serviceDropdownToggle: JSX.Element;
         let serviceDropdownMenu: JSX.Element;
 
-        const btnLogout = (
-            <button
-                className='btn-logout'
-                onClick={() => this.doLogout()}>
-                {ImposiumHeader.LOGOUT_COPY}
-            </button>
-        );
-
         if (accessData) {
             activeService = servicesByOrganization.find((s: any) =>
                 window.location.href.includes(s.url)
@@ -392,36 +369,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 .filter((s: any) => !s.private && ImposiumHeader.PRIVATE_IDS.indexOf(s.id) > -1)
                 .map((s: any) => this.renderServiceAnchor(s, activeOrganization, activeStory));
 
-            const docsSection = !hideDocs ? (
-                <section className='service-menu-section'>
-                    <div className='service-menu-heading'>{ImposiumHeader.DOCS_HEADER}</div>
-
-                    <div className='service-menu-anchors'>
-                        <div className='anchor-wrapper doc'>
-                            <a
-                                target='__blank'
-                                href={ImposiumHeader.API_DOCS_LINK}>
-                                <div className='icon-fixed'>
-                                    <ServiceIcon iconName='FaCogs' />
-                                </div>
-                                {ImposiumHeader.API_DOCS_LINK_COPY}
-                            </a>
-                        </div>
-
-                        <div className='anchor-wrapper doc'>
-                            <a
-                                target='__blank'
-                                href={ImposiumHeader.SDK_DOCS_LINK}>
-                                <div className='icon-fixed'>
-                                    <ServiceIcon iconName='FaJsSquare' />
-                                </div>
-                                {ImposiumHeader.SDK_DOCS_LINK_COPY}
-                            </a>
-                        </div>
-                    </div>
-                </section>
-            ) : null;
-
             serviceDropdownMenu = (
                 <div className='service-menu'>
                     <section className='service-menu-section'>
@@ -442,7 +389,33 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         </section>
                     )}
 
-                    {docsSection}
+                    <section className='service-menu-section'>
+                        <div className='service-menu-heading'>{ImposiumHeader.DOCS_HEADER}</div>
+
+                        <div className='service-menu-anchors'>
+                            <div className='anchor-wrapper doc'>
+                                <a
+                                    target='__blank'
+                                    href={ImposiumHeader.API_DOCS_LINK}>
+                                    <div className='icon-fixed'>
+                                        <ServiceIcon iconName='FaCogs' />
+                                    </div>
+                                    {ImposiumHeader.API_DOCS_LINK_COPY}
+                                </a>
+                            </div>
+
+                            <div className='anchor-wrapper doc'>
+                                <a
+                                    target='__blank'
+                                    href={ImposiumHeader.SDK_DOCS_LINK}>
+                                    <div className='icon-fixed'>
+                                        <ServiceIcon iconName='FaJsSquare' />
+                                    </div>
+                                    {ImposiumHeader.SDK_DOCS_LINK_COPY}
+                                </a>
+                            </div>
+                        </div>
+                    </section>
                 </div>
             );
 
@@ -464,7 +437,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 </button>
             );
 
-            accountDropdownToggle = !hideOrgPicker ? (
+            accountDropdownToggle = (
                 <button
                     id='btn-toggle-orgs'
                     className='btn-toggle-orgs'
@@ -473,8 +446,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     onClick={() => this.toggleAccountDropdown(!showAccountDropdown)}>
                     {activeFirstChar}
                 </button>
-            ) : (
-                btnLogout
             );
         }
 
@@ -567,19 +538,6 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
             );
         }
 
-        const logo = showFTLogo ? (
-            <>
-                <div className='ft-logo' />
-                &nbsp;&nbsp;|&nbsp;&nbsp;
-                <h1 className='heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
-            </>
-        ) : (
-            <>
-                <div className='logo' />
-                <h1 className='heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
-            </>
-        );
-
         return (
             <nav
                 id='imposium-header'
@@ -587,13 +545,16 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 style={headerBorder}>
                 <div className='inner-content'>
                     <span className='inner-left'>
-                        <div className='title'>{logo}</div>
+                        <div className='title'>
+                            <div className='logo' />
+                            <h1 className='heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
+                        </div>
+
                         {serviceDropdownToggle}
                     </span>
 
                     <span className='inner-right'>
                         {storyToggle}
-                        <div className='additional-buttons'>{additionalButtons}</div>
                         {accountDropdownToggle}
                         <a
                             href='https://support.flashtalking.com/hc/en-us/sections/25515903148819-Imposium'
@@ -633,7 +594,11 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
                         <div className='orgs-menu-footer'>
                             <div className='email'>{email}</div>
-                            {btnLogout}
+                            <button
+                                className='btn-logout'
+                                onClick={() => this.doLogout()}>
+                                {ImposiumHeader.LOGOUT_COPY}
+                            </button>
                         </div>
                     </div>
                 </ImposiumDropdown>

package/src/components/list-field/ListField.tsx

@@ -10,7 +10,7 @@ import { ICON_PLUS } from '../../constants/icons';
 interface IListFieldProps {
     buttons?: any;
     disabled?: boolean;
-    label?: string;
+    label?: any;
     options: any;
     placeholder?: string;
     tooltip?: IToolTipConfig | string;

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

@@ -4,7 +4,7 @@ import { IToolTipConfig } from '../Tooltip';
 
 interface INumberFieldProps {
     buttons?: any;
-    label?: string;
+    label?: any;
     placeholder?: string;
     readOnly?: boolean;
     value: number;

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

@@ -5,12 +5,10 @@ import HRule from '../h-rule/HRule';
 import {
     ICON_DOWNLOAD,
     ICON_EMAIL,
-    ICON_EXCLAIMATION_TRIANGLE,
     ICON_GLOBE,
     ICON_HUBSPOT,
     ICON_IMAGE,
-    ICON_PROJECT_DIAGRAM,
-    ICON_UP_RIGHT_FROM_SQUARE
+    ICON_PROJECT_DIAGRAM
 } from '../../constants/icons';
 import { IImposiumAPI } from '../../services/API';
 import * as copy from '../../constants/copy';
@@ -25,11 +23,8 @@ import { publishVersion } from '../../redux/actions/publish';
 import { connect } from 'react-redux';
 
 interface IPublishWizardProps {
-    fromCrM?: boolean;
-    creativeManagerBaseUrl?: string;
     story: any;
     project: any;
-    updateEditorConfig(c): void;
     editor: any;
     updateScene(d): void;
     editStory(s): void;
@@ -38,6 +33,7 @@ interface IPublishWizardProps {
     exportExperiences: () => void;
     publishVersion: (api: IImposiumAPI, sId: string) => any;
     batchesList: any;
+    publishing: boolean;
     onClose(): any;
     api: IImposiumAPI;
     handleError(e): void;
@@ -70,6 +66,7 @@ interface IPublishWizardProps {
     renderBatch: (batchId: string, postRenderActions?: any) => any;
     publishData: any;
     onDeleteBatch?: (batchId: string) => any;
+    onBackBtn?: () => void;
 }
 
 export interface ICredential {
@@ -94,7 +91,6 @@ interface IPublishWizardState {
     error: boolean;
     next: boolean;
     nextStep: boolean;
-    publishError: string;
 }
 
 interface IBigButtonProps {
@@ -138,27 +134,12 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             done: false,
             error: false,
             next: false,
-            nextStep: false,
-            publishError: null
+            nextStep: false
         };
         this.emailWorkflow = React.createRef();
         this.hiddenFileInputRef = React.createRef();
     }
 
-    public componentDidUpdate(prevProps, prevState) {
-        // If we just finished publushing, and we're on the first screen still go to the second screen
-        if (
-            prevProps.publishData.publishing &&
-            !this.props.publishData.publishing &&
-            this.state.screenIndex === 0 &&
-            !this.state.publishError
-        ) {
-            this.setState({
-                screenIndex: 1
-            });
-        }
-    }
-
     public componentDidMount() {
         const { story, api, handleError, activeComposition } = this.props;
         // Pull in all of the access creds for the composition dropdown
@@ -294,25 +275,12 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const {
             story: { id },
             api,
-            handleError,
-            fromCrM
+            handleError
         } = this.props;
-
-        if (fromCrM) {
-            this.props
-                .publishVersion(api, id)
-                .then(() => {
-                    this.setState({ screenIndex: 1 });
-                })
-                .catch((e) => {
-                    this.setState({ publishError: e });
-                });
-        } else {
-            this.props.publishVersion(api, id).catch((e) => {
-                handleError(e);
-            });
-            this.setState({ screenIndex: 1 });
-        }
+        this.props.publishVersion(api, id).catch((e) => {
+            handleError(e);
+        });
+        this.setState({ screenIndex: 1 });
     }
 
     private onCloseHandler = () => {
@@ -328,7 +296,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
     private renderLowerButtons() {
         const { screenIndex, done, error, next } = this.state;
-        const { publishing } = this.props.publishData;
+        const { publishing } = this.props;
 
         const lowerButtons = [];
 
@@ -382,13 +350,20 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
                     size={'large'}
                     key='btn-back'
                     onClick={() =>
-                        this.setState({
-                            screenIndex: backIndex,
-                            next: false,
-                            nextStep: false,
-                            error: false,
-                            done: false
-                        })
+                        this.setState(
+                            {
+                                screenIndex: backIndex,
+                                next: false,
+                                nextStep: false,
+                                error: false,
+                                done: false
+                            },
+                            () => {
+                                if (this.props.onBackBtn) {
+                                    this.props.onBackBtn();
+                                }
+                            }
+                        )
                     }
                     color='primary'>
                     {copy.publish.btnBack}
@@ -415,19 +390,11 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
     }
 
     private renderPublish() {
-        const { publishing } = this.props.publishData;
-        const { publishError } = this.state;
-        const error = publishError ? (
-            <p className='publish-error'>
-                <span className='icon'>{ICON_EXCLAIMATION_TRIANGLE}</span>&nbsp;&nbsp;{publishError}
-            </p>
-        ) : null;
         return (
             <div>
                 <h2>{copy.publish.publishStepTitle}</h2>
                 <HRule />
-                <p>{publishing ? copy.publish.publishInProgress : copy.publish.publishStepDesc}</p>
-                {error}
+                <p>{copy.publish.publishStepDesc}</p>
             </div>
         );
     }
@@ -438,7 +405,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const { compositions, afterEffects, selectedComposition, credentials, accessKey } =
             this.state;
 
-        const { publishDataset, fromCrM, story, creativeManagerBaseUrl } = this.props;
+        const { publishDataset } = this.props;
 
         for (const comp of compositions) {
             compOpts.push({
@@ -461,75 +428,56 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             });
         }
 
-        let distributionOptions = !fromCrM
-            ? [
-                  {
-                      label: (
-                          <span>
-                              {ICON_GLOBE}&nbsp;{copy.publish.btnWebsite}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(2)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_EMAIL}&nbsp;{copy.publish.btnEmail}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(3)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(5)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(6)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(7)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(8)
-                  }
-              ]
-            : [
-                  {
-                      label: (
-                          <span>
-                              {ICON_DOWNLOAD}&nbsp;{copy.publish.btnRunTestBatch}
-                          </span>
-                      ),
-                      onClick: (e) => this.onSelectOption(7)
-                  },
-                  {
-                      label: (
-                          <span>
-                              {ICON_UP_RIGHT_FROM_SQUARE}&nbsp;{copy.publish.btnCrM}
-                          </span>
-                      ),
-                      link: `${creativeManagerBaseUrl}/library/${story.creativeLibraryId}/creative/${story.creativeLibraryId}/versions/`
-                  }
-              ];
+        let distributionOptions = [
+            {
+                label: (
+                    <span>
+                        {ICON_GLOBE}&nbsp;{copy.publish.btnWebsite}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(2)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_EMAIL}&nbsp;{copy.publish.btnEmail}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(3)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_HUBSPOT}&nbsp;{copy.publish.btnHubspot}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(5)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_PROJECT_DIAGRAM}&nbsp;{copy.publish.btnAPI}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(6)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_DOWNLOAD}&nbsp;{copy.publish.btnExport}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(7)
+            },
+            {
+                label: (
+                    <span>
+                        {ICON_IMAGE}&nbsp;{copy.publish.btnCRM}
+                    </span>
+                ),
+                onClick: (e) => this.onSelectOption(8)
+            }
+        ];
 
         if (publishDataset) {
             const indexes = [0, 2, 3];
@@ -541,67 +489,41 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             }, []);
         }
 
-        const compDropdown = !fromCrM ? (
-            <SelectField
-                label={copy.project.compName}
-                value={selectedComposition}
-                onChange={this.onCompositionChange}
-                options={compOpts}
-                tooltip={copy.project.tooltipCompId}
-            />
-        ) : null;
-
-        const accessKeyDropdown = !fromCrM ? (
-            <SelectField
-                label={copy.publish.accessKey}
-                value={accessKey}
-                onChange={this.onCredentialsChange}
-                options={credOpts}
-                tooltip={copy.publish.tooltipAccessKey}
-            />
-        ) : null;
-
         return (
             <div>
-                <h2>
-                    {!fromCrM
-                        ? copy.publish.distributeStepTitle
-                        : copy.publish.distributeStepTitleFromCrM}
-                </h2>
+                <h2>{copy.publish.distributeStepTitle}</h2>
                 <HRule />
-                <p>
-                    {!fromCrM
-                        ? copy.publish.distributeStepDesc
-                        : copy.publish.distributeStepDescFromCrM}
-                </p>
+                <p>{copy.publish.distributeStepDesc}</p>
                 <HRule />
-                {!this.state.selectedComposition && !fromCrM && (
+                {!this.state.selectedComposition && (
                     <p className={'text-danger'}>{copy.publish.noCompErrorDesc}</p>
                 )}
                 <div style={{ marginTop: '10px' }}>
-                    {compDropdown}
-                    {accessKeyDropdown}
+                    <SelectField
+                        label={copy.project.compName}
+                        value={selectedComposition}
+                        onChange={this.onCompositionChange}
+                        options={compOpts}
+                        tooltip={copy.project.tooltipCompId}
+                    />
+                    <SelectField
+                        label={copy.publish.accessKey}
+                        value={accessKey}
+                        onChange={this.onCredentialsChange}
+                        options={credOpts}
+                        tooltip={copy.publish.tooltipAccessKey}
+                    />
 
                     <div className='link-wrapper'>
-                        {distributionOptions?.map((option: any, index) => {
-                            if (option.link) {
-                                return (
-                                    <BigLink
-                                        key={index}
-                                        label={option.label}
-                                        link={option.link}
-                                    />
-                                );
-                            } else {
-                                return (
-                                    <BigButton
-                                        key={index}
-                                        disabled={!selectedComposition}
-                                        label={option.label}
-                                        onClick={option.onClick}
-                                    />
-                                );
-                            }
+                        {distributionOptions?.map((option, index) => {
+                            return (
+                                <BigButton
+                                    key={index}
+                                    disabled={!selectedComposition}
+                                    label={option.label}
+                                    onClick={option.onClick}
+                                />
+                            );
                         })}
                     </div>
                 </div>