@imposium-hub/components 3.0.0-1 → 3.0.0-3

package/dist/styles.css

@@ -1395,6 +1395,14 @@ body a {
   width: calc(100% - 5px);
   margin-left: 5px;
 }
+.filterable-cell-wrapper .form-field-buttons {
+  position: absolute;
+  height: 18px;
+  top: 4px;
+  right: 0px;
+  background: #1d1d1d;
+  z-index: 1000;
+}
 .checkbox-field .checkbox {
   display: inline-block;
   background: #1d1d1d;
@@ -1506,6 +1514,9 @@ body a {
   width: calc(100% - 30px);
   margin: 0px;
 }
+.slider-field input.toggle {
+  width: calc(100% - 30px - 18px);
+}
 .slider-field .val {
   display: inline-block;
   vertical-align: top;
@@ -1520,6 +1531,47 @@ body a {
   box-sizing: border-box;
   background: #272727;
 }
+.slider-field .checkbox {
+  display: inline-block;
+  background: #1d1d1d;
+  border: none;
+  color: #dfdfdf;
+  font-size: 12px;
+  box-sizing: border-box;
+  vertical-align: top;
+  height: 20px;
+  width: 100%;
+  font-family: 'Roboto Condensed', sans-serif;
+  border-radius: 0;
+  appearance: none;
+  line-height: 10px;
+  border: 1px solid #353535;
+  border-radius: 2px;
+  width: 18px;
+  height: 18px;
+  padding: 2px;
+  cursor: pointer;
+}
+.slider-field .checkbox:hover {
+  background: #151515;
+}
+.slider-field .checkbox:focus {
+  background: #151515;
+}
+.slider-field .checkbox:disabled {
+  color: rgba(223, 223, 223, 0.4);
+  background: #1d1d1d;
+  pointer-events: none;
+}
+.slider-field .checkbox:disabled:focus {
+  background: #1d1d1d;
+}
+.slider-field .checkbox:disabled:hover {
+  background: #1d1d1d;
+}
+.slider-field .checkbox .fa-check {
+  margin-left: 1px;
+}
 .color-field .form-field-content.label-top .picker {
   top: 40px;
 }

package/dist/styles.less

@@ -1465,6 +1465,14 @@ body{
 	}
 }
 
+.filterable-cell-wrapper .form-field-buttons{
+	position:absolute;
+	height: 18px;
+	top:4px;
+	right:0px;
+	background:@inputBackground;
+	z-index: 1000;
+}
 
 .checkbox-field{
 	
@@ -1549,6 +1557,10 @@ body{
 	input{
 		width:calc(100% - @sliderValWidth);
 		margin:0px;
+
+		&.toggle{
+			width:calc(100% - @sliderValWidth - 18px);
+		}
 	}
 
 	.val{
@@ -1565,6 +1577,21 @@ body{
 		box-sizing:border-box;
 		background:lighten(@inputBackground, 4%);
 	}
+
+	.checkbox{
+		.inputMixin;
+		line-height: 10px;
+		border: 1px solid @backgroundLight;
+		border-radius: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
+		cursor: pointer;
+
+		.fa-check {
+			margin-left: 1px;
+		}
+	}
 }
 
 .color-field{

package/less/components/form-field.less

@@ -131,6 +131,14 @@
 	}
 }
 
+.filterable-cell-wrapper .form-field-buttons{
+	position:absolute;
+	height: 18px;
+	top:4px;
+	right:0px;
+	background:@inputBackground;
+	z-index: 1000;
+}
 
 .checkbox-field{
 	
@@ -215,6 +223,10 @@
 	input{
 		width:calc(100% - @sliderValWidth);
 		margin:0px;
+
+		&.toggle{
+			width:calc(100% - @sliderValWidth - 18px);
+		}
 	}
 
 	.val{
@@ -231,6 +243,21 @@
 		box-sizing:border-box;
 		background:lighten(@inputBackground, 4%);
 	}
+
+	.checkbox{
+		.inputMixin;
+		line-height: 10px;
+		border: 1px solid @backgroundLight;
+		border-radius: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
+		cursor: pointer;
+
+		.fa-check {
+			margin-left: 1px;
+		}
+	}
 }
 
 .color-field{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imposium-hub/components",
-    "version": "3.0.0-1",
+    "version": "3.0.0-3",
     "description": "React & Typescript component / asset library for Imposium front-ends",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",
@@ -62,8 +62,8 @@
         "hotkeys-js": "^3.6.12",
         "localforage": "^1.7.3",
         "react": "^17.0.1",
-        "react-dnd": "^14.0.2",
-        "react-dnd-html5-backend": "^14.0.0",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^17.0.2",
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",
@@ -75,7 +75,7 @@
         "smpte-timecode": "^1.2.3"
     },
     "devDependencies": {
-        "@auth0/auth0-react": "^2.3.0",
+        "@auth0/auth0-react": "^2.4.0",
         "@fortawesome/fontawesome-svg-core": "^6.7.1",
         "@fortawesome/free-brands-svg-icons": "^6.7.1",
         "@fortawesome/free-solid-svg-icons": "^6.7.1",
@@ -102,6 +102,7 @@
         "@typescript-eslint/parser": "^5.26.0",
         "axios": "^1.9.0",
         "concurrently": "^7.1.0",
+        "dpop": "^2.1.1",
         "eslint": "^8.14.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-import": "^2.26.0",
@@ -115,8 +116,8 @@
         "onchange": "^7.1.0",
         "prettier": "^2.6.2",
         "react": "^17.0.1",
-        "react-dnd": "^14.0.2",
-        "react-dnd-html5-backend": "^14.0.0",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^17.0.2",
         "react-dropzone": "^10.1.6",
         "react-redux": "^5.0.7",

package/src/Util.ts

@@ -53,7 +53,13 @@ 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 {
@@ -87,6 +93,9 @@ export const parameterizeServiceUrl = (
             case 6:
             case 8:
                 return `${url}/${activeOrg}/${activeStory}`;
+            case 11:
+            case 12:
+                return `${url}`;
             default:
                 return `${url}/${activeOrg}`;
         }

package/src/components/assets/AssetsTableAssetIdFilter.tsx

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

package/src/components/assets/AssetsTableTagsFilter.tsx

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

package/src/components/assets/AssetsUploadMenu.tsx

@@ -148,7 +148,7 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
 
     public render() {
         const {
-            assetUploads: { uploads },
+            assetUploads,
             editor: {
                 fromCrM,
                 showUploadsMenu,
@@ -163,6 +163,8 @@ class AssetsUploadMenu extends React.PureComponent<IAssetsUploadMenuProps, IAsse
             },
             assetTags
         } = this.props;
+
+        const uploads = assetUploads?.uploads || [];
         const disable = uploads.length > 0 ? false : true;
 
         let uploadsListInner;

package/src/components/field-wrapper/FieldWrapper.tsx

@@ -14,6 +14,7 @@ interface IFieldWrapperProps {
     width?: string | number;
     labelPosition?: string;
     labelWidth?: string | number;
+    header?: boolean;
 }
 
 interface IFieldWrapperState {
@@ -87,7 +88,7 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
     }
 
     public render() {
-        const { label, width, customClass } = this.props;
+        const { label, width, customClass, header } = this.props;
         const labelJSX = this.renderLabel();
 
         const style = {};
@@ -100,19 +101,22 @@ class FieldWrapper extends React.PureComponent<IFieldWrapperProps, IFieldWrapper
         }
 
         return (
-            <div
-                className={`form-field ${customClass} ${this.getLabelClass()}`}
-                style={style}>
-                {labelJSX}
+            <>
+                {header && this.renderButtons()}
                 <div
-                    className={`form-field-content ${this.getLabelClass()}`}
-                    {...fieldProps}>
-                    {this.props.children}
-                    {this.renderButtons()}
+                    className={`form-field ${customClass} ${this.getLabelClass()}`}
+                    style={style}>
+                    {labelJSX}
+                    <div
+                        className={`form-field-content ${this.getLabelClass()}`}
+                        {...fieldProps}>
+                        {this.props.children}
+                        {!header && this.renderButtons()}
+                    </div>
+                    {renderTooltip(this.tooltipId, this.props.tooltip)}
+                    {this.renderInfo()}
                 </div>
-                {renderTooltip(this.tooltipId, this.props.tooltip)}
-                {this.renderInfo()}
-            </div>
+            </>
         );
     }
 

package/src/components/header/Header.tsx

@@ -211,6 +211,7 @@ class ImposiumHeader extends React.PureComponent<IHeaderProps, IHeaderState> {
                                 api.cacheActiveStory(activeServiceId, orgId, storyId);
                             } else {
                                 pushRoute(`/${orgId}`);
+                                api.cacheActiveStory(activeServiceId, orgId);
                             }
                         })
                         .catch((e) => {

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

@@ -729,7 +729,9 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
         };
 
         if (!publishDataset) {
-            emailOptions.push(downloadSampleCsv);
+            if (!batchError) {
+                emailOptions.push(downloadSampleCsv);
+            }
             emailOptions.push(selectCsv);
         } else {
             emailOptions.push(uploadDataset);
@@ -793,7 +795,7 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
 
         const downloadCSV = (
             <>
-                {this.props.error ? (this.props.next ? downloadCSVDiv : '') : downloadCSVDiv}
+                {downloadCSVDiv}
                 {this.renderColumnMap()}
             </>
         );
@@ -869,6 +871,13 @@ class EmailWorkflow extends React.PureComponent<IEmailWorkflowProps, IEmailWorkf
                             />
                         );
                     })}
+                    {batchError && (
+                        <BigButton
+                            label={downloadCsvLabel}
+                            disabled={downloading}
+                            onClick={() => this.downloadCsv()}
+                        />
+                    )}
                 </div>
             </div>
         );

package/src/components/slider-field/SliderField.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import FieldWrapper from '../field-wrapper/FieldWrapper';
 import { IToolTipConfig } from '../Tooltip';
+import { ICON_CHECK } from '../../constants/icons';
 
 interface ISliderFieldProps {
     label?: any;
@@ -15,6 +16,7 @@ interface ISliderFieldProps {
     info?: string;
     labelPosition?: string;
     labelWidth?: string | number;
+    enabledToggle?: boolean;
 }
 
 interface ISliderFieldState {
@@ -69,6 +71,14 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
         }
     }
 
+    private toggle() {
+        if (this.props.value !== undefined && this.props.value !== null) {
+            this.props.onChange(null);
+        } else {
+            this.props.onChange(this.props.defaultValue);
+        }
+    }
+
     public render() {
         const {
             label,
@@ -81,16 +91,15 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
             tooltip,
             info,
             labelPosition,
-            labelWidth
+            labelWidth,
+            enabledToggle
         } = this.props;
         const { tempValue } = this.state;
+        const valueSet = value !== null && value !== undefined;
+        const val = tempValue !== null ? tempValue : !valueSet ? defaultValue : value;
 
-        const val =
-            tempValue !== null
-                ? tempValue
-                : value === null || value === undefined
-                ? defaultValue
-                : value;
+        const showInputs = (enabledToggle && valueSet) || !enabledToggle;
+        const icon = valueSet ? ICON_CHECK : null;
 
         return (
             <FieldWrapper
@@ -101,21 +110,34 @@ class SliderField extends React.PureComponent<ISliderFieldProps, ISliderFieldSta
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
                 width={width}>
-                <input
-                    onChange={(e) => this.rangeInputChange(e)}
-                    type='range'
-                    min={min}
-                    max={max}
-                    value={val}
-                    step={step}
-                />
-
-                <input
-                    className='val'
-                    onChange={(e) => this.numberInputChange(e)}
-                    type='number'
-                    value={val}
-                />
+                {enabledToggle && (
+                    <div
+                        className='checkbox'
+                        onClick={(e) => this.toggle()}>
+                        {icon}
+                    </div>
+                )}
+
+                {showInputs && (
+                    <input
+                        className={enabledToggle ? 'toggle' : ''}
+                        onChange={(e) => this.rangeInputChange(e)}
+                        type='range'
+                        min={min}
+                        max={max}
+                        value={val}
+                        step={step}
+                    />
+                )}
+
+                {showInputs && (
+                    <input
+                        className='val'
+                        onChange={(e) => this.numberInputChange(e)}
+                        type='number'
+                        value={val}
+                    />
+                )}
             </FieldWrapper>
         );
     }

package/src/components/text-field/TextField.tsx

@@ -46,6 +46,7 @@ interface ITextFieldProps {
     labelWidth?: string | number;
     className?: string;
     maxLength?: number;
+    header?: boolean;
 }
 
 interface ITextFieldState {
@@ -487,7 +488,8 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
     }
 
     public render() {
-        const { label, width, tooltip, info, labelPosition, labelWidth, className } = this.props;
+        const { label, width, tooltip, info, labelPosition, labelWidth, className, header } =
+            this.props;
         return (
             <FieldWrapper
                 customClass={`text-field ${className}`}
@@ -497,7 +499,8 @@ class TextField extends React.PureComponent<ITextFieldProps, ITextFieldState> {
                 info={info}
                 labelPosition={labelPosition}
                 labelWidth={labelWidth}
-                width={width}>
+                width={width}
+                header={header}>
                 {this.renderInput()}
             </FieldWrapper>
         );

package/src/services/API.ts

@@ -146,7 +146,7 @@ export interface IImposiumAPI {
     getAssetMap(storyId: string);
     clearStoryCache(storyId: string);
     debugId(id: string);
-    cacheActiveStory(serviceId: any, orgId: string, storyId: string);
+    cacheActiveStory(serviceId: any, orgId: string, storyId?: string);
     getCachedStoryForOrg(serviceId: string, orgId: string);
     getAccessData(includeTotalRenders?: boolean, orgId?: string);
     deleteExperience(experienceId: string, eraseMedia?: boolean);
@@ -1655,16 +1655,21 @@ export default class API {
         });
     };
 
-    public cacheActiveStory = (serviceId, orgId, storyId): Promise<any | Error> => {
+    public cacheActiveStory = (serviceId, orgId, storyId?): Promise<any | Error> => {
         const route = `/service/${serviceId}/${orgId}/active`;
 
+        const data: any = {
+            organization_id: orgId
+        };
+
+        if (storyId) {
+            data['story_id'] = storyId;
+        }
+
         return this.doRequest({
             method: 'POST',
             url: route,
-            data: {
-                story_id: storyId,
-                organization_id: orgId
-            }
+            data
         });
     };
 

package/dist/cjs/components/edit-guide-modal/EditGuideModal.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface IEditGuideModalProps {
-    guide: number;
-    onClose: () => any;
-    onContinue: (e: any) => any;
-    isHorizontal: boolean;
-}
-export declare const EditGuideModal: () => React.JSX.Element;