@imposium-hub/components 2.6.0-0 → 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/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

@@ -159,8 +159,13 @@ import { resetStoryFilter, updateStoryFilter } from './redux/actions/story-filte
 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,
     ImposiumHeader,
     ImposiumDropdown,

package/src/services/API.ts

@@ -8,8 +8,10 @@ import axios, {
 } from 'axios';
 import { isObjEmpty } from '../Util';
 import { JOB_TYPES } from '../constants/api';
+import { API_AUTH_TYPES } from '../components/font-picker/font-manager/constants';
 
 export interface IImposiumAPI {
+    init(baseUrl: string, credentials: any, orgId?: string);
     getAssets(filters: any, storyId: string, unprocessed?: boolean, showVariables?: boolean);
     getAssetItem(assetId: string);
     uploadAsset(
@@ -145,7 +147,7 @@ export interface IImposiumAPI {
     getAssetMap(storyId: string);
     clearStoryCache(storyId: string);
     debugId(id: string);
-    cacheActiveStory(serviceId: string, orgId: string, storyId: string);
+    cacheActiveStory(serviceId: any, orgId: string, storyId: string);
     getCachedStoryForOrg(serviceId: string, orgId: string);
     getAccessData(includeTotalRenders?: boolean, orgId?: string);
 }
@@ -183,38 +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 = {
-            'Authorization': `Bearer ${idToken}`,
             'X-Imposium-API-Version': '2.0.2'
-            // 'X-Imposium-Account-Id': organizationId || ''
         };
 
         if (organizationId) {
             headers['X-Imposium-Account-Id'] = organizationId;
         }
-        if (idToken) {
-            this.http = axios.create({
-                baseURL,
-                headers
-            });
 
-            // Basic Access Key
-        } else {
+        // 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: {
-                    'X-Imposium-Access-Key': `${idToken}`,
+                    'X-Imposium-Access-Key': `${credentials}`,
                     'X-Imposium-API-Version': '2.0.0'
                 }
             });
+        } else {
+            this.authType = API_AUTH_TYPES.TOKEN;
+            this.http = axios.create({
+                baseURL,
+                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) => {
@@ -1024,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 {
@@ -1041,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);
                 }
             })
@@ -1050,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') {
@@ -1060,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);
                 }
             })
@@ -1189,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);
             });
         }
     };

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 }