@imposium-hub/components 2.2.44 → 2.2.45-0

package/src/components/header/Header.tsx

@@ -15,12 +15,17 @@ 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;
 }
 
 export interface IHeaderState {
@@ -160,7 +165,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
     public componentDidUpdate(prevProps: Readonly<IHeaderProps>): void {
         const { accessData } = this.state;
-        const { activeOrganization } = this.props;
+        const { activeOrganization, access } = this.props;
 
         if (activeOrganization !== prevProps.activeOrganization) {
             if (accessData !== null) {
@@ -169,6 +174,12 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 this.getAccessDataHandler();
             }
         }
+
+        if (!_.isEqual(access, accessData)) {
+            this.setState({ accessData: access }, () =>
+                this.parseAccessData(access, activeOrganization)
+            );
+        }
     }
 
     private parseAccessData = (accessData: any, activeOrganization: string): void => {
@@ -312,7 +323,17 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
     };
 
     public render() {
-        const { email, activeOrganization, activeStory, hideStoryPicker, story } = this.props;
+        const {
+            email,
+            activeOrganization,
+            activeStory,
+            hideStoryPicker,
+            story,
+            hideOrgPicker,
+            additionalButtons,
+            showFTLogo,
+            hideDocs
+        } = this.props;
         const {
             accessData,
             showAccountDropdown,
@@ -345,6 +366,14 @@ 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)
@@ -363,6 +392,36 @@ 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'>
@@ -383,33 +442,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         </section>
                     )}
 
-                    <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>
+                    {docsSection}
                 </div>
             );
 
@@ -431,7 +464,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 </button>
             );
 
-            accountDropdownToggle = (
+            accountDropdownToggle = !hideOrgPicker ? (
                 <button
                     id='btn-toggle-orgs'
                     className='btn-toggle-orgs'
@@ -440,6 +473,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                     onClick={() => this.toggleAccountDropdown(!showAccountDropdown)}>
                     {activeFirstChar}
                 </button>
+            ) : (
+                btnLogout
             );
         }
 
@@ -474,7 +509,11 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                         });
                     }}>
                     <div className='story-name'>
-                        {currentStory ? currentStory.name : story ? story.name : ''}
+                        {currentStory
+                            ? currentStory.name
+                            : story
+                            ? story.name
+                            : 'Project Not Found'}
                     </div>
                     {this.renderDropdownChevron(showStoriesDropdown)}
                 </button>
@@ -528,6 +567,19 @@ 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'
@@ -535,16 +587,13 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                 style={headerBorder}>
                 <div className='inner-content'>
                     <span className='inner-left'>
-                        <div className='title'>
-                            <div className='logo' />
-                            <h1 className='heading'>{ImposiumHeader.DEFAULT_TITLE}</h1>
-                        </div>
-
+                        <div className='title'>{logo}</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'
@@ -584,11 +633,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 
                         <div className='orgs-menu-footer'>
                             <div className='email'>{email}</div>
-                            <button
-                                className='btn-logout'
-                                onClick={() => this.doLogout()}>
-                                {ImposiumHeader.LOGOUT_COPY}
-                            </button>
+                            {btnLogout}
                         </div>
                     </div>
                 </ImposiumDropdown>
@@ -600,7 +645,8 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
 const mapStateToProps = (state): any => {
     return {
         auth: state.auth,
-        story: state.story
+        story: state.story,
+        access: state.access
     };
 };
 

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

@@ -5,10 +5,12 @@ import HRule from '../h-rule/HRule';
 import {
     ICON_DOWNLOAD,
     ICON_EMAIL,
+    ICON_EXCLAIMATION_TRIANGLE,
     ICON_GLOBE,
     ICON_HUBSPOT,
     ICON_IMAGE,
-    ICON_PROJECT_DIAGRAM
+    ICON_PROJECT_DIAGRAM,
+    ICON_UP_RIGHT_FROM_SQUARE
 } from '../../constants/icons';
 import { IImposiumAPI } from '../../services/API';
 import * as copy from '../../constants/copy';
@@ -23,6 +25,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;
@@ -34,7 +38,6 @@ interface IPublishWizardProps {
     exportExperiences: () => void;
     publishVersion: (api: IImposiumAPI, sId: string) => any;
     batchesList: any;
-    publishing: boolean;
     onClose(): any;
     api: IImposiumAPI;
     handleError(e): void;
@@ -91,6 +94,7 @@ interface IPublishWizardState {
     error: boolean;
     next: boolean;
     nextStep: boolean;
+    publishError: string;
 }
 
 interface IBigButtonProps {
@@ -134,12 +138,27 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             done: false,
             error: false,
             next: false,
-            nextStep: false
+            nextStep: false,
+            publishError: null
         };
         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
@@ -275,12 +294,25 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const {
             story: { id },
             api,
-            handleError
+            handleError,
+            fromCrM
         } = this.props;
-        this.props.publishVersion(api, id).catch((e) => {
-            handleError(e);
-        });
-        this.setState({ screenIndex: 1 });
+
+        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 });
+        }
     }
 
     private onCloseHandler = () => {
@@ -296,7 +328,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
 
     private renderLowerButtons() {
         const { screenIndex, done, error, next } = this.state;
-        const { publishing } = this.props;
+        const { publishing } = this.props.publishData;
 
         const lowerButtons = [];
 
@@ -383,11 +415,19 @@ 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>{copy.publish.publishStepDesc}</p>
+                <p>{publishing ? copy.publish.publishInProgress : copy.publish.publishStepDesc}</p>
+                {error}
             </div>
         );
     }
@@ -398,7 +438,7 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
         const { compositions, afterEffects, selectedComposition, credentials, accessKey } =
             this.state;
 
-        const { publishDataset } = this.props;
+        const { publishDataset, fromCrM, story, creativeManagerBaseUrl } = this.props;
 
         for (const comp of compositions) {
             compOpts.push({
@@ -421,56 +461,75 @@ class PublishWizard extends React.PureComponent<IPublishWizardProps, IPublishWiz
             });
         }
 
-        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)
-            }
-        ];
+        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/`
+                  }
+              ];
 
         if (publishDataset) {
             const indexes = [0, 2, 3];
@@ -482,41 +541,67 @@ 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>{copy.publish.distributeStepTitle}</h2>
+                <h2>
+                    {!fromCrM
+                        ? copy.publish.distributeStepTitle
+                        : copy.publish.distributeStepTitleFromCrM}
+                </h2>
                 <HRule />
-                <p>{copy.publish.distributeStepDesc}</p>
+                <p>
+                    {!fromCrM
+                        ? copy.publish.distributeStepDesc
+                        : copy.publish.distributeStepDescFromCrM}
+                </p>
                 <HRule />
-                {!this.state.selectedComposition && (
+                {!this.state.selectedComposition && !fromCrM && (
                     <p className={'text-danger'}>{copy.publish.noCompErrorDesc}</p>
                 )}
                 <div style={{ marginTop: '10px' }}>
-                    <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}
-                    />
+                    {compDropdown}
+                    {accessKeyDropdown}
 
                     <div className='link-wrapper'>
-                        {distributionOptions?.map((option, index) => {
-                            return (
-                                <BigButton
-                                    key={index}
-                                    disabled={!selectedComposition}
-                                    label={option.label}
-                                    onClick={option.onClick}
-                                />
-                            );
+                        {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}
+                                    />
+                                );
+                            }
                         })}
                     </div>
                 </div>