@imposium-hub/components 2.16.0-0 → 3.0.0-0

package/src/Util.ts

@@ -53,13 +53,7 @@ export const checkStoryId = (storyId: string, orgId: string, access: any): any =
 
 export const getLastModifiedStoryInOrg = (orgId: string, access: any): string => {
     const activeOrg: any = getActiveOrg(orgId, access);
-
-    if (activeOrg.stories.length === 0) {
-        return null;
-    }
-
     const sortByLastModified = activeOrg.stories.sort((a, b) => b.date_modified - a.date_modified);
-
     if (sortByLastModified[0]) {
         return sortByLastModified[0].id;
     } else {
@@ -93,9 +87,6 @@ export const parameterizeServiceUrl = (
             case 6:
             case 8:
                 return `${url}/${activeOrg}/${activeStory}`;
-            case 11:
-            case 12:
-                return `${url}`;
             default:
                 return `${url}/${activeOrg}`;
         }

package/src/components/advanced-number-field/AdvancedNumberField.tsx

@@ -18,17 +18,6 @@ interface IAdvancedNumberFieldProps {
     max?: number;
     toggleRef?: any;
     labelWidth?: string | number;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride: string;
-
-    previewMultiplier?: number;
 }
 
 interface IAdvancedNumberFieldState {
@@ -132,6 +121,7 @@ class AdvancedNumberField extends React.PureComponent<
         let error: string = null;
 
         const {
+            label,
             placeholder,
             width,
             readOnly,
@@ -141,16 +131,7 @@ class AdvancedNumberField extends React.PureComponent<
             labelPosition,
             min,
             max,
-            labelWidth,
-            override,
-            showCopyPropIds,
-            propKey,
-            inventory,
-            setOverride,
-            removeOverride,
-            onClose,
-            activeOverride,
-            previewMultiplier
+            labelWidth
         } = this.props;
 
         const { showDropDown } = this.state;
@@ -192,23 +173,13 @@ class AdvancedNumberField extends React.PureComponent<
         return (
             <FieldWrapper
                 customClass={`advanced-number-field ${this.state.error ? 'invalid' : ''}`}
-                label={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 buttons={buttons}
                 info={error}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='number'
-                previewMultiplier={previewMultiplier}>
+                width={width}>
                 <input
                     type='button'
                     className='minus-font-size'

package/src/components/app-wrapper/AppWrapper.tsx

@@ -3,27 +3,19 @@ import Header from '../header/Header';
 import { getLastModifiedStoryInOrg, validateAccessLevel } from '../../Util';
 import { ConfirmModal } from '../confirm-modal/ConfirmModal';
 import { IImposiumAPI } from '../../services/API';
-import { ICrmApi } from '../../services/CrmApi';
 import { useAuth0 } from '@auth0/auth0-react';
-import { configureHistory, replaceRoute } from '../../utils/routing';
+import { replaceRoute } from '../../utils/routing';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExclamationTriangle } from '@fortawesome/pro-light-svg-icons';
 import { initPendo } from '../../utils/pendo';
-import { TOKEN_TYPE, FlagsProvider } from '@innovid/feature-flags-react';
-import { useMemo } from 'react';
-
-export interface ICompatibleHistory {
-    push: (route: string) => void;
-    replace: (route: string) => void;
-}
+import { EditGuideModal } from '../edit-guide-modal/EditGuideModal';
+import { ReplaceFilesModal } from '../replace-files-modal/ReplaceFilesModal';
 
 export interface IAppWrapperProps {
     appLabel: string;
     environment: string;
     baseUrl: string;
-    crmBaseUrl?: string;
     api: IImposiumAPI;
-    crmApi?: ICrmApi;
     organizationId: string;
     serviceId: number;
     unsavedChanges?: boolean;
@@ -36,9 +28,6 @@ export interface IAppWrapperProps {
     hideStoryPicker?: boolean;
     hideDocs?: boolean;
     hideOrgPicker?: boolean;
-    growthBookId?: string;
-    history: ICompatibleHistory;
-    children?: React.ReactNode;
 }
 
 export const APP_WRAPPER_ERROR_STATES = {
@@ -60,32 +49,17 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
         hideOrgPicker,
         CrMLink,
         baseUrl,
-        crmBaseUrl,
         api,
-        crmApi,
         serviceId,
         unsavedChanges,
         saveStory,
         environment,
         appLabel,
-        allowNoStories,
-        growthBookId,
-        history
+        allowNoStories
     } = props;
     const { isAuthenticated, isLoading, getAccessTokenSilently, loginWithRedirect, logout, user } =
         useAuth0();
     const [errorState, setErrorState] = React.useState(null);
-    const [auth0Token, setAuth0Token] = React.useState(null);
-
-    configureHistory(history);
-
-    React.useEffect(() => {
-        void getAccessTokenSilently().then((token) => {
-            if (token) {
-                setAuth0Token(token);
-            }
-        });
-    }, []);
 
     React.useEffect(() => {
         if (user) {
@@ -155,9 +129,6 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
                 }
 
                 api.init(baseUrl, getAccessTokenSilently, initialOrganizationId);
-                if (crmApi && crmBaseUrl) {
-                    crmApi.init(crmBaseUrl, getAccessTokenSilently);
-                }
                 onAuthenticated(initialOrganizationId, initialStoryId);
                 setBlockRender(false);
                 setErrorState(null);
@@ -183,16 +154,10 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
 
             if (validAccessLevel) {
                 api.init(baseUrl, getAccessTokenSilently, organization_id);
-                if (crmApi && crmBaseUrl) {
-                    crmApi.init(crmBaseUrl, getAccessTokenSilently);
-                }
                 onAuthenticated(organization_id, story_id);
 
                 if (!hideStoryPicker) {
-                    const route = story_id
-                        ? `/${organization_id}/${story_id}`
-                        : `/${organization_id}`;
-                    replaceRoute(route);
+                    replaceRoute(`/${organization_id}/${story_id}`);
                 } else {
                     replaceRoute(`/${organization_id}`);
                 }
@@ -210,9 +175,6 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
 
             if (validAccessLevel) {
                 api.init(baseUrl, getAccessTokenSilently, initialOrganizationId);
-                if (crmApi && crmBaseUrl) {
-                    crmApi.init(crmBaseUrl, getAccessTokenSilently);
-                }
 
                 if (hideStoryPicker) {
                     onAuthenticated(initialOrganizationId, null);
@@ -253,10 +215,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
         // If we're authenticated, get the access token, pull the access data, and propagate back to the parent component
         if (isAuthenticated) {
             try {
-                const token = await getAccessTokenSilently();
-                if (token !== auth0Token) {
-                    setAuth0Token(token);
-                }
+                await getAccessTokenSilently();
             } catch (e) {
                 // Trigger a logout if we can't get the access token
                 onLogout();
@@ -264,10 +223,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
 
             const orgId = organizationId ? organizationId : null;
             api.init(baseUrl, getAccessTokenSilently, orgId);
-            if (crmApi && crmBaseUrl) {
-                crmApi.init(crmBaseUrl, getAccessTokenSilently);
-            }
-            api.getAccessData(false, storyId)
+            api.getAccessData(false)
                 .then((freshAccess: any) => {
                     props.setAccessData(freshAccess);
                     propagateCreds(freshAccess);
@@ -275,11 +231,8 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
                 .catch((e: Error) => {
                     setErrorState(APP_WRAPPER_ERROR_STATES.UNAUTHORIZED_ORG);
 
-                    // Attempt to get the access data again without the org ID, so we can at least show the user the org dropdown
+                    // Attempt to get the access data again without the org ID, so we can at least shoe the user the org dropdown
                     api.init(baseUrl, getAccessTokenSilently, null);
-                    if (crmApi && crmBaseUrl) {
-                        crmApi.init(crmBaseUrl, getAccessTokenSilently);
-                    }
                     api.getAccessData(false).then((freshAccess: any) => {
                         props.setAccessData(freshAccess);
                     });
@@ -288,7 +241,7 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             // If we're not loading, and we're not authenticated, call login, and cache story + org ID from URL if it's there
         } else if (!isLoading && !isAuthenticated) {
             void loginWithRedirect({
-                appState: { returnTo: window.location.pathname + window.location.search }
+                appState: { returnTo: window.location.href }
             });
         }
     };
@@ -304,26 +257,14 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
         innerContent = (
             <AppWrapperErrors
                 error={errorState}
-                email={user?.userEmail}
+                email={user.userEmail}
             />
         );
     } else if (!blockRender) {
         innerContent = children;
     }
 
-    const featureFlagsConfig = useMemo(() => {
-        return {
-            gatewayUrl: baseUrl,
-            gatewayToken: auth0Token,
-            projectId: growthBookId,
-            tokenType: TOKEN_TYPE.AUTH0_BEARER,
-            initialContext: {
-                email: user?.userEmail
-            }
-        };
-    }, [baseUrl, auth0Token, growthBookId, user?.userEmail]);
-
-    const content = (
+    return (
         <div
             id='app'
             className='app'>
@@ -346,16 +287,10 @@ export const AppWrapper: React.FC<IAppWrapperProps> = (props) => {
             />
             {innerContent}
             <ConfirmModal />
+            <EditGuideModal />
+            <ReplaceFilesModal />
         </div>
     );
-
-    const render = auth0Token ? (
-        <FlagsProvider config={featureFlagsConfig}>{content}</FlagsProvider>
-    ) : (
-        content
-    );
-
-    return render;
 };
 
 export const ERROR_HEADINGS = {
@@ -381,9 +316,14 @@ export const ERROR_DESCRIPTIONS = {
 export interface AppWrappeErrorProps {
     error: string;
     email: string;
+    onCreateStory?: () => void;
 }
 
-export const AppWrapperErrors: React.FC<AppWrappeErrorProps> = ({ error, email }) => {
+export const AppWrapperErrors: React.FC<AppWrappeErrorProps> = ({
+    error,
+    email,
+    onCreateStory
+}) => {
     return (
         <div className='no-access'>
             <FontAwesomeIcon

package/src/components/assets/AssetsTableAssetIdFilter.tsx

@@ -20,7 +20,6 @@ class AssetsTableAssetIdFilter extends React.PureComponent<IAssetsTableAssetIdFi
                 submittableType='search'
                 value={assetFilters.id}
                 doSubmit={(n) => this.props.updateFilters({ id: n })}
-                header={true}
             />
         );
     };

package/src/components/assets/AssetsTableNameFilter.tsx

@@ -20,7 +20,6 @@ class AssetsTableNameFilter extends React.PureComponent<IAssetsTableNameFilterPr
                 submittableType='search'
                 value={assetFilters.name}
                 doSubmit={(n) => this.props.updateFilters({ name: n })}
-                header={true}
             />
         );
     };

package/src/components/assets/AssetsTablePreviewCell.tsx

@@ -11,7 +11,6 @@ import {
 interface IAssetsTablePreviewCell {
     cell: any;
     showMedia: boolean;
-    asset: any;
     onClick(): void;
     onRequestClose(): void;
 }
@@ -44,15 +43,12 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
     }
 
     public render() {
-        const { cell, showMedia, asset } = this.props;
+        const { cell, showMedia } = this.props;
         const playbackSettings = {
             autoPlay: true,
             loop: false
         };
 
-        const url = asset?.url || cell.row.original.url;
-        const width = asset?.width || cell.row.original.width;
-        const height = asset?.height || cell.row.original.height;
         return (
             <div
                 ref={this.iconRef}
@@ -62,17 +58,25 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
                 {cell.row.values.type === ASSET_TYPES.IMAGE && showMedia && (
                     <ImagePreview
                         style={{
-                            ...getMediaPreviewStyle(width, height, this.iconRef)
+                            ...getMediaPreviewStyle(
+                                cell.row.original.width,
+                                cell.row.original.height,
+                                this.iconRef
+                            )
                         }}
-                        url={url}
+                        url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
                 )}
                 {cell.row.values.type === ASSET_TYPES.VIDEO && showMedia && (
                     <VideoPreview
                         playbackSettings={playbackSettings}
-                        style={getMediaPreviewStyle(width, height, this.iconRef)}
-                        url={url}
+                        style={getMediaPreviewStyle(
+                            cell.row.original.width,
+                            cell.row.original.height,
+                            this.iconRef
+                        )}
+                        url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
                 )}
@@ -80,7 +84,7 @@ class AssetsTablePreviewCell extends React.PureComponent<IAssetsTablePreviewCell
                     <AudioPreview
                         playbackSettings={playbackSettings}
                         style={getMediaPreviewStyle(5, 1, this.iconRef)}
-                        url={url}
+                        url={cell.row.original.url}
                         onRequestClose={this.evtHandlers.onClose}
                     />
                 )}

package/src/components/assets/AssetsTableTagsFilter.tsx

@@ -19,7 +19,6 @@ class AssetsTableTagsFilter extends React.PureComponent<IAssetsTableTagsFilterPr
                 submittableType='search'
                 value={assetFilters.tags}
                 doSubmit={(t) => this.props.updateFilters({ tags: t })}
-                header={true}
             />
         );
     };

package/src/components/assets/AssetsTypeIcon.tsx

@@ -24,8 +24,6 @@ interface IAssetsTypeIconProps {
 }
 
 const AssetsTypeIcon: React.FC<IAssetsTypeIconProps> = (p: IAssetsTypeIconProps) => {
-    if (!p.type) return null;
-
     const style = {
         color: ASSET_COLORS[p.type]
     };

package/src/components/assets/AssetsUploadMenu.tsx

@@ -148,7 +148,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
     public render() {
         const {
-            assetUploads,
+            assetUploads: { uploads },
             editor: {
                 fromCrM,
                 showUploadsMenu,
@@ -163,8 +163,6 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
             },
             assetTags
         } = this.props;
-
-        const uploads = assetUploads?.uploads || [];
         const disable = uploads.length > 0 ? false : true;
 
         let uploadsListInner;
@@ -230,7 +228,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
         const delimiterSelector = tagByDelimiter && (
             <SelectField
-                width='10%'
+                width='35%'
                 options={DELIMITER_OPTIONS}
                 value={delimiter}
                 onChange={(c) => {
@@ -304,7 +302,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                     ref={this.menuRef}>
                     <div className='uploads-controls'>
                         <CheckboxField
-                            width='10%'
+                            width='50%'
                             label={copy.uploads.autoTagDelimiter}
                             value={tagByDelimiter}
                             onChange={() =>
@@ -313,20 +311,20 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
                         />
                         {delimiterSelector}
                         <CheckboxField
-                            width='10%'
+                            width='50%'
                             label={copy.uploads.manualTagging}
                             value={tagManually}
                             onChange={() => this.uploadsSetting({ tagManually: !tagManually })}
                         />
                         <CheckboxField
-                            width='10%'
+                            width='50%'
                             label={copy.uploads.autoTagFilname}
                             value={tagByFileName}
                             onChange={() => this.uploadsSetting({ tagByFileName: !tagByFileName })}
                         />
                         {!fromCrM && (
                             <CheckboxField
-                                width='10%'
+                                width='50%'
                                 label={copy.uploads.assignToProjectInput}
                                 info={copy.uploads.assignToProjectInfo}
                                 value={!assignToStory}

package/src/components/button-group-field/ButtonGroupField.tsx

@@ -1,9 +1,6 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig, renderTooltip, renderTooltipProps } from '../Tooltip';
-import { getOverrideHandler } from '../../constants/variables';
-import Button from '../button/Button';
-import { ICON_TIMES } from '../../constants/icons';
 
 interface IButtonGroupOption {
     value: string | boolean;
@@ -25,15 +22,6 @@ interface IButtonGroupFieldProps {
     labelPosition?: string;
     labelWidth?: string | number;
     disabled?: boolean;
-
-    override?: any;
-    showCopyPropIds?: boolean;
-    propKey?: string;
-    setOverride?(e): void;
-    removeOverride?(): void;
-    inventory?: any;
-    onClose?(e: boolean): void;
-    activeOverride?: string;
 }
 
 class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
@@ -62,114 +50,55 @@ class ButtonGroupField extends React.PureComponent<IButtonGroupFieldProps> {
         }
     };
 
-    public renderRemoveButton() {
-        const { removeOverride } = this.props;
-        return (
-            <div className='item'>
-                <div className='buttons'>
-                    <Button
-                        style='subtle'
-                        color='danger'
-                        onClick={() => removeOverride()}>
-                        {ICON_TIMES}
-                    </Button>
-                </div>
-            </div>
-        );
-    }
-
     public render = (): JSX.Element => {
-        const {
-            options,
-            width,
-            tooltip,
-            info,
-            labelPosition,
-            labelWidth,
-            disabled,
-            propKey,
-            showCopyPropIds,
-            inventory,
-            override,
-            setOverride,
-            onClose,
-            onChange,
-            activeOverride,
-            removeOverride
-        } = this.props;
-
+        const { value, label, options, width, tooltip, info, labelPosition, labelWidth, disabled } =
+            this.props;
         const optionStyle: any = { width: `${100 / options.length}%` };
 
-        const inputField = () => {
-            const { hasOverride, previewItem } = getOverrideHandler(propKey, override, inventory);
-            const value = hasOverride ? previewItem : this.props.value;
-            return (
-                <div className={`${hasOverride ? 'override_variable text' : ''}`}>
-                    <div className='button-group'>
-                        {options.map((option, i) => {
-                            const optionKey = option.value;
-                            const optionLabel = option.label;
-                            const icon = option.icon ? option.icon : null;
-                            const tooltipId = `${optionKey}-${i}`;
-                            const activeOption = optionKey === value;
-                            const activeClass = activeOption
-                                ? 'active'
-                                : disabled
-                                ? 'disabled'
-                                : '';
-                            const onClick = !activeOption
-                                ? () => {
-                                      onChange(optionKey);
-                                  }
-                                : null;
-
-                            return (
-                                <div
-                                    key={`option-${optionKey}`}
-                                    style={optionStyle}
-                                    className={`button-group-option ${activeClass} ${
-                                        hasOverride ? 'disabled' : ''
-                                    }`}
-                                    {...renderTooltipProps(tooltipId, option.tooltip)}
-                                    onClick={
-                                        typeof option.onDoubleClick === 'function'
-                                            ? () =>
-                                                  this.handleMultipleClicks(
-                                                      onClick,
-                                                      option.onDoubleClick
-                                                  )
-                                            : onClick
-                                    }>
-                                    {!icon ? optionLabel : icon}
-                                    {renderTooltip(tooltipId, option.tooltip)}
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-            );
-        };
-
         return (
             <FieldWrapper
                 customClass='button-group-field'
-                label={this.props.label}
+                label={label}
                 tooltip={tooltip}
                 info={info}
                 labelPosition={labelPosition}
                 width={width}
-                labelWidth={labelWidth}
-                propKey={propKey}
-                showCopyPropIds={showCopyPropIds}
-                inventory={inventory}
-                setOverride={setOverride}
-                onClose={onClose}
-                activeOverride={activeOverride}
-                removeOverride={removeOverride}
-                override={override}
-                type='text'
-                buttonGroup={true}>
-                {inputField()}
+                labelWidth={labelWidth}>
+                <div className='button-group'>
+                    {options.map((option, i) => {
+                        const optionKey = option.value;
+                        const optionLabel = option.label;
+                        const icon = option.icon ? option.icon : null;
+                        const tooltipId = `${optionKey}-${i}`;
+                        const activeOption = optionKey === value;
+                        const activeClass = activeOption ? 'active' : disabled ? 'disabled' : '';
+                        const onClick = !activeOption
+                            ? () => {
+                                  this.props.onChange(optionKey);
+                              }
+                            : null;
+
+                        return (
+                            <div
+                                key={`option-${optionKey}`}
+                                style={optionStyle}
+                                className={`button-group-option ${activeClass}`}
+                                {...renderTooltipProps(tooltipId, option.tooltip)}
+                                onClick={
+                                    typeof option.onDoubleClick === 'function'
+                                        ? () =>
+                                              this.handleMultipleClicks(
+                                                  onClick,
+                                                  option.onDoubleClick
+                                              )
+                                        : onClick
+                                }>
+                                {!icon ? optionLabel : icon}
+                                {renderTooltip(tooltipId, option.tooltip)}
+                            </div>
+                        );
+                    })}
+                </div>
             </FieldWrapper>
         );
     };