@imposium-hub/components 2.5.18 → 2.6.0-1

package/src/components/header/ProjectDropdown.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react';
+import ImposiumDropdown from '../dropdown/Dropdown';
+import StoryTableNameFilter from '../assets/StoryTableNameFilter';
+import { StoryTableTotalRendersCell } from '../assets/StoryTableTotalRendersCell';
+import React from 'react';
+import AssetsTableDateCell from '../assets/AssetsTableDateCell';
+import DataTable from '../data-table/DataTable';
+import { ImposiumHeader } from '../..';
+import _ from 'lodash';
+
+interface IProjectDropdownProps {
+    position: any;
+    api: any;
+    toggleRef: any;
+    show: boolean;
+    storiesArray: any;
+    changeStory(storyRow: any): void;
+    setAccessData(data): void;
+    onClose(): void;
+}
+
+export const ProjectDropdown = (props: IProjectDropdownProps) => {
+    const { toggleRef, changeStory, storiesArray, show, onClose, setAccessData, api, position } =
+        props;
+
+    const [storyFilter, setStoryFilter] = useState({
+        name: ''
+    });
+    const [totalRendersLoading, setTotalRendersLoading] = useState(false);
+    const [order] = useState('date_modified');
+    const [orderDirection] = useState('desc');
+
+    if (!storiesArray) {
+        return null;
+    }
+
+    useEffect(() => {
+        if (show) {
+            setTotalRendersLoading(true);
+            api.getAccessData(true).then((data) => {
+                setAccessData(data);
+                setTotalRendersLoading(false);
+            });
+        }
+    }, [show]);
+
+    const closeProjectDropdown = () => {
+        setStoryFilter({
+            name: ''
+        });
+        onClose();
+    };
+
+    const getStoriesColumns = () => {
+        return [
+            {
+                accessor: 'name',
+                Header: 'Name',
+                width: 115,
+                minWidth: 115,
+                Search: () => (
+                    <StoryTableNameFilter
+                        filter={storyFilter.name}
+                        updateFilter={setStoryFilter}
+                    />
+                ),
+                disableSortBy: false
+            },
+            {
+                accessor: 'total_renders',
+                Header: 'Total Renders',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <StoryTableTotalRendersCell
+                        loading={totalRendersLoading}
+                        cell={cell}
+                        date_created={false}
+                    />
+                )
+            },
+            {
+                accessor: 'last_modified_by',
+                Header: 'Last Modified By',
+                width: 60,
+                minWidth: 60,
+                maxWidth: 60,
+                disableSortBy: true
+            },
+            {
+                accessor: 'date_modified',
+                Header: 'Last Modified',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <AssetsTableDateCell
+                        cell={cell}
+                        date_created={false}
+                    />
+                )
+            },
+            {
+                accessor: 'date_created',
+                Header: 'Created Date',
+                width: 65,
+                minWidth: 65,
+                maxWidth: 65,
+                disableSortBy: false,
+                Cell: (cell: any) => (
+                    <AssetsTableDateCell
+                        cell={cell}
+                        date_created={true}
+                    />
+                )
+            }
+        ];
+    };
+
+    const sortBy =
+        order && orderDirection ? [{ id: order, desc: orderDirection === 'desc' }] : undefined;
+
+    let sortedStories = _.orderBy(storiesArray, ['date_modified'], ['desc']);
+
+    if (storyFilter.name) {
+        const storyFilterLowercase = storyFilter.name.toLowerCase();
+
+        sortedStories = sortedStories.filter((stories) =>
+            stories.name.toLowerCase().includes(storyFilterLowercase)
+        );
+
+        const sortById = sortedStories.filter((stories) =>
+            stories.id.includes(storyFilterLowercase)
+        );
+
+        if (sortById.length > 0) {
+            sortedStories = sortById;
+        }
+    }
+
+    const onRowClick = (r: any) => {
+        onClose();
+        changeStory(r);
+    };
+
+    return (
+        <>
+            <ImposiumDropdown
+                key='stories-dropdown'
+                position={position}
+                show={show}
+                toggleRef={toggleRef}
+                onOutsideClick={closeProjectDropdown}>
+                <div className='stories-menu'>
+                    {
+                        <DataTable
+                            columns={getStoriesColumns()}
+                            data={sortedStories}
+                            sortBy={sortBy}
+                            noDataText={ImposiumHeader.NO_STORIES_COPY}
+                            itemsPerPage={storiesArray.length}
+                            hidePaginator={true}
+                            onRowClick={onRowClick}
+                            keyboardNav={true}
+                        />
+                    }
+                </div>
+            </ImposiumDropdown>
+        </>
+    );
+};

package/src/components/modal/Modal.tsx

@@ -8,7 +8,7 @@ interface IModalProps {
     isOpen: boolean;
     style?: any;
     wrapperStyle?: any;
-    onRequestClose?(e): void;
+    onRequestClose(e): void;
 }
 
 class Modal extends React.PureComponent<IModalProps> {
@@ -49,14 +49,7 @@ class Modal extends React.PureComponent<IModalProps> {
     }
 
     public render() {
-        const { isOpen, style, wrapperStyle, onRequestClose } = this.props;
-        const btnClose = onRequestClose ? (
-            <Button
-                onClick={this.evtHandlers.onClose}
-                customStyles={this.closeStyles}>
-                {ICON_TIMES}
-            </Button>
-        ) : null;
+        const { isOpen, style, wrapperStyle } = this.props;
 
         if (isOpen) {
             return (
@@ -71,7 +64,11 @@ class Modal extends React.PureComponent<IModalProps> {
                         className='modal-container'
                         style={style}>
                         <div className='modal-content'>{this.props.children}</div>
-                        {btnClose}
+                        <Button
+                            onClick={this.evtHandlers.onClose}
+                            customStyles={this.closeStyles}>
+                            {ICON_TIMES}
+                        </Button>
                     </div>
                 </div>
             );

package/src/components/portal/Portal.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, ReactPortal } from 'react';
+import { ReactPortal } from 'react';
 import { useEffect } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -7,7 +7,6 @@ import { createPortal } from 'react-dom';
 // Just wrap desired element in <Portal>{YourElement}</Portal>
 
 interface IPortalProps {
-    children: ReactNode;
     id: string;
 }
 

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

@@ -779,7 +779,7 @@ export const BigButton: React.FC<IBigButtonProps> = (p) => (
     </div>
 );
 
-export const TabContent = ({ children }) => (
+export const TabContent: React.FC = ({ children }) => (
     <div className='tab-content'>
         <div className='settings-tab'>
             <div className='integration-details'>{children}</div>

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

@@ -876,7 +876,13 @@ const mapStateToProps = (state): any => {
     };
 };
 
-const CrMOptions = ({ options, onChange, errorCopy = '' }) => {
+interface ICrMOptionsProps {
+    options: any;
+    onChange(options: any): void;
+    errorCopy: string;
+}
+
+const CrMOptions: React.FC<ICrMOptionsProps> = ({ options, onChange, errorCopy = '' }) => {
     const onInputChange = (key, val) => {
         const newOpts = { ...options };
         newOpts[key] = val;

package/src/constants/copy.ts

@@ -238,6 +238,9 @@ export const integration = {
 };
 
 export const header = {
+    noSave: `Don't Save`,
+    onSave: 'Save',
+    checkUnsaved: 'You have unsaved changes, would you like to save and continue?',
     publishing: 'Publishing...',
     working: 'Using Working Copy',
     statusError: 'Error getting project status',

package/src/index.ts

@@ -1,8 +1,6 @@
 /*
     React Components
  */
-import AppWrapper from './components/app-wrapper/AppWrapper';
-import AuthGate from './components/auth-gate/AuthGate';
 import ImposiumHeader from './components/header/Header';
 import ImposiumDropdown from './components/dropdown/Dropdown';
 import Button from './components/button/Button';
@@ -74,8 +72,6 @@ import SMPTEField from './components/smpte-field/SMPTEField';
 /*
     Redux Handlers / Thunks
  */
-import auth from './redux/reducers/auth';
-import { login, clearCachedAuth } from './redux/actions/auth';
 import access from './redux/reducers/access';
 import publish from './redux/reducers/publish';
 import {
@@ -118,8 +114,6 @@ import batchActions from './redux/actions/active-batch';
 /*
     Statics / Services
  */
-import AuthService, { IIdentity } from './services/Auth0';
-import SessionService, { IHubSession } from './services/Session';
 import API, { IImposiumAPI } from './services/API';
 import LegacyAPI from './services/API-Legacy';
 import StorageService from './services/Storage';
@@ -164,10 +158,15 @@ import AssetsTableAssetIdCell from './components/assets/AssetsTableAssetIdCell';
 import { resetStoryFilter, updateStoryFilter } from './redux/actions/story-filter';
 import storyFilter from './redux/reducers/story-filter';
 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';
 
 export {
+    ProjectDropdown,
+    pushRoute,
+    replaceRoute,
     AppWrapper,
-    AuthGate,
     ImposiumHeader,
     ImposiumDropdown,
     Button,
@@ -239,9 +238,6 @@ export {
     DroppableAssetRenderer,
     PreviewNotAvailable,
     IStaticComposition,
-    auth,
-    login,
-    clearCachedAuth,
     access,
     setAccessData,
     storyAdded,
@@ -276,10 +272,6 @@ export {
     assetActions,
     activeBatch,
     batchActions,
-    AuthService,
-    IIdentity,
-    SessionService,
-    IHubSession,
     API,
     IImposiumAPI,
     LegacyAPI,

package/src/redux/actions/asset-uploads.ts

@@ -410,7 +410,6 @@ const pollAssetJobs = (api, ongoingJobs: any[], timeout: number): void => {
                             );
                         }
                     }
-                    // TODO: handle errored out
                 });
 
                 if (ongoingJobs.length > 0) {

package/src/services/API.ts

@@ -8,10 +8,10 @@ import axios, {
 } from 'axios';
 import { isObjEmpty } from '../Util';
 import { JOB_TYPES } from '../constants/api';
-import { assets as copy } from '../constants/copy';
+import { API_AUTH_TYPES } from '../components/font-picker/font-manager/constants';
 
 export interface IImposiumAPI {
-    updateProjectVersion(storyId: string);
+    init(baseUrl: string, credentials: any, orgId?: string);
     getAssets(filters: any, storyId: string, unprocessed?: boolean, showVariables?: boolean);
     getAssetItem(assetId: string);
     uploadAsset(
@@ -147,6 +147,9 @@ export interface IImposiumAPI {
     getAssetMap(storyId: string);
     clearStoryCache(storyId: string);
     debugId(id: string);
+    cacheActiveStory(serviceId: any, orgId: string, storyId: string);
+    getCachedStoryForOrg(serviceId: string, orgId: string);
+    getAccessData(includeTotalRenders?: boolean, orgId?: string);
 }
 
 interface ITTSOptions {
@@ -182,33 +185,51 @@ export default class API {
 
     private cancelTokens: object = {};
 
-    constructor(baseURL: string, idToken: string, organizationId?: string) {
+    private getToken;
+
+    private authType;
+
+    public init(baseURL: string, credentials: any, organizationId?: string): void {
         // JWT
+        const headers = {
+            'X-Imposium-API-Version': '2.0.2'
+        };
+
         if (organizationId) {
+            headers['X-Imposium-Account-Id'] = organizationId;
+        }
+
+        // If the token is a string, it's an accessKey, so use the X-Imposium-Access-Key header
+        if (typeof credentials === 'string') {
+            this.authType = API_AUTH_TYPES.ACCESS_KEY;
             this.http = axios.create({
                 baseURL,
                 headers: {
-                    'Authorization': `Bearer ${idToken}`,
-                    'X-Imposium-API-Version': '2.0.2',
-                    'X-Imposium-Account-Id': organizationId || ''
+                    'X-Imposium-Access-Key': `${credentials}`,
+                    'X-Imposium-API-Version': '2.0.0'
                 }
             });
-
-            // Basic Access Key
         } else {
+            this.authType = API_AUTH_TYPES.TOKEN;
             this.http = axios.create({
                 baseURL,
-                headers: {
-                    'X-Imposium-Access-Key': `${idToken}`,
-                    'X-Imposium-API-Version': '2.0.0'
-                }
+                headers
             });
         }
 
+        this.getToken = credentials;
         this.awsHttp = axios.create();
     }
 
-    private doRequest = (config: AxiosRequestConfig, reqAlias: string = ''): Promise<any> => {
+    private doRequest = async (config: AxiosRequestConfig, reqAlias: string = ''): Promise<any> => {
+        if (this.authType === API_AUTH_TYPES.TOKEN) {
+            const token = await this.getToken();
+            const headers = {
+                Authorization: `Bearer ${token}`
+            };
+            config.headers = headers;
+        }
+
         return new Promise((resolve, reject) => {
             this.http(config)
                 .then((res: AxiosResponse) => {
@@ -222,21 +243,11 @@ export default class API {
                     if (!axios.isCancel(e) && reqAlias) {
                         this.clearCache(reqAlias);
                     }
-                    if (e.response && (e.response.status === 403 || e.response.status === 401)) {
-                        alert(copy.sessionExpired);
-                    }
                     reject(e);
                 });
         });
     };
 
-    public updateProjectVersion = (storyId: string): Promise<any | Error> => {
-        return this.doRequest({
-            method: 'POST',
-            url: `/story/${storyId}/update-project-version`
-        });
-    };
-
     public saveQueueAssoc = (
         queueId: string,
         storyId: string,
@@ -1028,11 +1039,19 @@ export default class API {
         };
 
         return new Promise((resolve, reject) => {
-            this.pollForJob(config, resolve, reject);
+            void this.pollForJob(config, resolve, reject);
         });
     };
 
-    private pollForJob = (config, resolve, reject) => {
+    private pollForJob = async (config, resolve, reject) => {
+        if (this.authType === API_AUTH_TYPES.TOKEN) {
+            const token = await this.getToken();
+            const headers = {
+                Authorization: `Bearer ${token}`
+            };
+            config.headers = headers;
+        }
+
         this.http(config)
             .then((res: AxiosResponse) => {
                 const {
@@ -1045,7 +1064,7 @@ export default class API {
                     resolve(res.data);
                 } else {
                     this.jobPollTimer = setTimeout(() => {
-                        this.pollForJob(config, resolve, reject);
+                        void this.pollForJob(config, resolve, reject);
                     }, this.pollingInterval);
                 }
             })
@@ -1054,7 +1073,15 @@ export default class API {
             });
     };
 
-    private pollForExperience = (config, resolve, reject) => {
+    private pollForExperience = async (config, resolve, reject) => {
+        if (this.authType === API_AUTH_TYPES.TOKEN) {
+            const token = await this.getToken();
+            const headers = {
+                Authorization: `Bearer ${token}`
+            };
+            config.headers = headers;
+        }
+
         this.http(config)
             .then((res: AxiosResponse) => {
                 if (res.data.status === 'failed') {
@@ -1064,14 +1091,14 @@ export default class API {
                 } else if (res.data.output !== undefined) {
                     if (isObjEmpty(res.data.output)) {
                         this.experiencePollTimer = setTimeout(() => {
-                            this.pollForExperience(config, resolve, reject);
+                            void this.pollForExperience(config, resolve, reject);
                         }, this.pollingInterval);
                     } else {
                         resolve(res.data);
                     }
                 } else {
                     this.experiencePollTimer = setTimeout(() => {
-                        this.pollForExperience(config, resolve, reject);
+                        void this.pollForExperience(config, resolve, reject);
                     }, this.pollingInterval);
                 }
             })
@@ -1193,7 +1220,7 @@ export default class API {
             return this.doRequest(config);
         } else {
             return new Promise((resolve, reject) => {
-                this.pollForExperience(config, resolve, reject);
+                void this.pollForExperience(config, resolve, reject);
             });
         }
     };
@@ -1657,4 +1684,39 @@ export default class API {
             method: 'GET'
         });
     };
+
+    public cacheActiveStory = (serviceId, orgId, storyId): Promise<any | Error> => {
+        const route = `/service/${serviceId}/${orgId}/active`;
+
+        return this.doRequest({
+            method: 'POST',
+            url: route,
+            data: {
+                story_id: storyId,
+                organization_id: orgId
+            }
+        });
+    };
+
+    public getCachedStoryForOrg = (serviceId, orgId): Promise<any | Error> => {
+        const route = `/service/${serviceId}/${orgId}/last_active`;
+
+        return this.doRequest({
+            method: 'GET',
+            url: route
+        });
+    };
+
+    public getAccessData = (getTotalRenders: boolean = false): Promise<any | Error> => {
+        let route = `/access`;
+
+        if (getTotalRenders) {
+            route += '?include_total_renders=true';
+        }
+
+        return this.doRequest({
+            method: 'GET',
+            url: route
+        });
+    };
 }

package/src/utils/modal.ts

@@ -0,0 +1,9 @@
+import { IConfirmModalProps } from '../components/confirm-modal/ConfirmModal';
+
+export const openConfirmModal = (detail: IConfirmModalProps) => {
+    const event = new CustomEvent('openconfirmmodal', {
+        detail
+    });
+
+    window.dispatchEvent(event);
+};

package/src/utils/pendo.ts

@@ -0,0 +1,61 @@
+/**
+ * [initPendo description]
+ * 	This initalizes the Pendo Help system in the application
+ * 		The Pendo script should be added to the DOM in `index.html`
+ * 	This function takes the user object and sets some initial information on Pendo for tracking
+ * 		For full documentation of Pendo object please see Pendo Docs
+ *
+ * 		To prevent application breaking things, we wrap both groups in a try/catch
+ * 		This allows our Application to work regardless of the status of Pendo
+ * 		*************************************************************
+ * 		 We DO NOT WANT TO BREAK OUR APP if a 3rd party script fails
+ *    	*************************************************************
+ *
+ * @param  {object} userInfo User object from crm/v1/user
+ *                           Each application's `user/` endpoint returns slightly different data
+ *                           The `visitor` object will need to be adjusted based on the data returned
+ *                           	We should always have access to:
+ *                           	id
+ *                           	email
+ *                           	full_name
+ *
+ * @return {undefined}          Nothing
+ */
+
+declare const pendo;
+
+export const initPendo = (environment, userInfo) => {
+    if (/dev/gi.test(environment)) {
+        console.info(
+            '%cPendo%c is %cdisabled%c for local testing',
+            'color: #e247e5; font-weight:bold;',
+            'color:#fff; font-weight:normal;',
+            'color:red; font-weight:bold;',
+            'color:#fff; font-weight:normal;'
+        );
+        return;
+    }
+
+    try {
+        const visitor = {
+            id: userInfo.sub,
+            email: userInfo['https://imposium.com/email']
+        };
+
+        /* eslint-disable no-undef */
+        pendo.initialize({
+            visitor: {
+                ...visitor,
+                environment,
+                product: 'Imposium Project Editor',
+                language: navigator.language
+            }
+        });
+        /* eslint-enable no-undef */
+    } catch (err) {
+        console.groupCollapsed('Pendo Init Problem');
+        console.error('Problem Starting up Pendo');
+        console.error(err);
+        console.groupEnd();
+    }
+};

package/src/utils/routing.ts

@@ -1,3 +1,13 @@
+import { browserHistory } from 'react-router';
+
+export const pushRoute = (route): void => {
+    browserHistory.push(route);
+};
+
+export const replaceRoute = (route): void => {
+    browserHistory.replace(route);
+};
+
 export const getDemoURL = (): string => {
     const {
         location: { href }