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

package/src/constants/copy.ts

@@ -127,8 +127,6 @@ export const compositions = {
 };
 
 export const publish = {
-    errorGettingCreatives: 'Error getting creatives linked to project: {{ERR}}',
-    disabledCreativeTooltip: 'You cannot publish a project to a creative with Approved status.',
     uploadAsAssets: 'Upload as Assets',
     noVariablesError:
         'No variables found on the project. Cannot proceed with publishing to Creative Manager until at least one variable is added to the project.',
@@ -147,24 +145,8 @@ export const publish = {
         'Your videos have finished rendering. They will appear in Creative Manager momentarily.',
     renderComplete: 'Render Complete!',
 
-    // review changes
-    reviewChangesStepTitle: 'STEP 1: Review Changes',
-    reviewChangesDescription:
-        'Review the changes made since your last publish. You can publish these changes or skip to distribution.',
-    noChangesMessage: 'No changes detected since last publish.',
-    loadingChangesMessage: 'Loading changes...',
-    publishNotesLabel: 'Publish notes',
-    publishNotesPlaceholder: 'Describe the changes in this version...',
-    publishNotesMaxLength: 2000,
-
-    // change report status labels
-    statusAdded: 'Added',
-    statusRemoved: 'Removed',
-    statusModified: 'Modified',
-
     // publish
     publishStepTitle: 'STEP 1: Publish your Project',
-    publishStepTitleFromCrM: 'STEP 1: Publish your Project to selected Creatives',
     publishStepDesc:
         "Your project needs to be published before your changes can be seen. If you haven't made any changes since the last time you published, you can skip to the next step.",
 
@@ -294,7 +276,7 @@ export const ERROR: any = {
 export const copying: any = {
     copied: 'Copied to clipboard!',
     error: 'Error copying to clipboard.',
-    tooltip: 'Copy to Clipboard'
+    tooltip: 'Copy to clipboard!'
 };
 
 export const confirm: any = {
@@ -302,7 +284,3 @@ export const confirm: any = {
     no: 'No',
     cancel: 'Cancel'
 };
-
-export const fontField = {
-    fontNotFound: 'Font not found'
-};

package/src/constants/icons.tsx

@@ -60,12 +60,6 @@ import { faJs } from '@fortawesome/free-brands-svg-icons/faJs';
 import { faDownload } from '@fortawesome/free-solid-svg-icons/faDownload';
 import { faUpload } from '@fortawesome/free-solid-svg-icons/faUpload';
 import { faCode } from '@fortawesome/free-solid-svg-icons/faCode';
-import { faHashtag } from '@fortawesome/free-solid-svg-icons/faHashtag';
-import { faToggleOn } from '@fortawesome/free-solid-svg-icons/faToggleOn';
-import { faVolumeUp } from '@fortawesome/free-solid-svg-icons/faVolumeUp';
-import { faPalette } from '@fortawesome/free-solid-svg-icons/faPalette';
-import { faQrcode } from '@fortawesome/free-solid-svg-icons/faQrcode';
-import { faEye } from '@fortawesome/free-solid-svg-icons/faEye';
 import {
     faArrowDown,
     faArrowLeft,
@@ -80,13 +74,12 @@ import {
 import { faCircleSmall } from '@fortawesome/pro-solid-svg-icons/faCircleSmall';
 import { faClapperboardPlay } from '@fortawesome/pro-solid-svg-icons/faClapperboardPlay';
 import {
-    faBracketsCurly,
     faCloudArrowUp,
     faFileCirclePlus,
     faFilePen,
     faFilters
 } from '@fortawesome/pro-solid-svg-icons';
-import { faCircleExclamation, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 
 export const ICON_VIDEO = <FontAwesomeIcon icon={faVideo} />;
 
@@ -167,11 +160,6 @@ export const ICON_ALIGN_RIGHT = <FontAwesomeIcon icon={faAlignRight} />;
 export const ICON_ALIGN_CENTER = <FontAwesomeIcon icon={faAlignCenter} />;
 
 export const ICON_BARS = <FontAwesomeIcon icon={faBars} />;
-export const ICON_HASHTAG = <FontAwesomeIcon icon={faHashtag} />;
-export const ICON_TOGGLE_ON = <FontAwesomeIcon icon={faToggleOn} />;
-export const ICON_VOLUME_UP = <FontAwesomeIcon icon={faVolumeUp} />;
-export const ICON_PALETTE = <FontAwesomeIcon icon={faPalette} />;
-export const ICON_QRCODE = <FontAwesomeIcon icon={faQrcode} />;
 
 export const ICON_ARROW_UP = <FontAwesomeIcon icon={faArrowToTop} />;
 
@@ -244,9 +232,3 @@ export const ICON_FILE_ERROR = <FontAwesomeIcon icon={faCircleExclamation} />;
 export const ICON_FILE_ADD = <FontAwesomeIcon icon={faFileCirclePlus} />;
 
 export const ICON_FILE_REPLACE = <FontAwesomeIcon icon={faFilePen} />;
-
-export const ICON_EYE = <FontAwesomeIcon icon={faEye} />;
-
-export const ICON_BRACKET_CURLY = <FontAwesomeIcon icon={faBracketsCurly} />;
-
-export const ICON_WARNING = <FontAwesomeIcon icon={faTriangleExclamation} />;

package/src/constants/publish.ts

@@ -27,39 +27,3 @@ export const CRM_PLACEMENT_VARS = [
 export const ADSTUDIO_POST_RENDER_ACTION = 'crm-adstudio';
 
 export const ASSETS_POST_RENDER_ACTION = 'crm-asset';
-
-export const CREATIVE_STATUSES = {
-    PENDING_APPROVAL: 'PENDING_APPROVAL',
-    UNSUBMITTED: 'UNSUBMITTED',
-    PRODUCTION_INCOMPLETE: 'PRODUCTION_INCOMPLETE',
-    APPROVED: 'APPROVED',
-    REJECTED: 'REJECTED',
-    FAILED: 'FAILED',
-    TRANSCODING: 'TRANSCODING',
-    TRANSCODING_ERROR: 'TRANSCODING_ERROR',
-    SUBMITTED: 'SUBMITTED'
-};
-
-export const CREATIVE_STATUS_LABELS = {
-    PENDING_APPROVAL: 'Pending Approval',
-    UNSUBMITTED: 'Production',
-    PRODUCTION_INCOMPLETE: 'Production',
-    APPROVED: 'Approved',
-    REJECTED: 'Rejected',
-    FAILED: 'Failed',
-    TRANSCODING: 'Transcoding',
-    TRANSCODING_ERROR: 'Transcoding Error',
-    SUBMITTED: 'Submitted'
-};
-
-export const CREATIVE_STATUSES_TO_PUBLISH = [
-    CREATIVE_STATUSES.UNSUBMITTED,
-    CREATIVE_STATUSES.PRODUCTION_INCOMPLETE,
-    CREATIVE_STATUSES.REJECTED,
-    CREATIVE_STATUSES.FAILED
-];
-
-export const CRM_INTEGRATED_PROJECT_TYPES = {
-    SINGLE_CREATIVE: 'SINGLE_CREATIVE',
-    MULTI_CREATIVE: 'MULTI_CREATIVE'
-};

package/src/constants/variables.ts

@@ -6,8 +6,7 @@ export const VARIABLE_TYPES = {
     IMAGE: 'image',
     VIDEO: 'video',
     AUDIO: 'audio',
-    COLOR: 'color',
-    QR_CODE: 'qr_code'
+    COLOR: 'color'
 };
 
 export const BOOLEAN_DEFAULT_OPTIONS = [
@@ -63,19 +62,3 @@ export const RGBAtoHexA = (red, green, blue, alpha) => {
     if (a.length === 1) a = '0' + a;
     return '#' + r + g + b + a;
 };
-
-export const getOverrideHandler = (propKey, override, inventory) => {
-    const propKeys = propKey ? propKey.split('.') : [];
-
-    const getOverride = () => {
-        if (propKeys.length === 0) return undefined;
-        return propKeys.reduce((acc, key) => acc?.[key], override);
-    };
-
-    const hasOverride = getOverride();
-
-    const previewItem =
-        hasOverride && inventory[hasOverride] ? inventory[hasOverride].previewItem.src : null;
-
-    return { hasOverride, previewItem };
-};

package/src/index.ts

@@ -7,7 +7,7 @@ import Button from './components/button/Button';
 import ButtonMenu from './components/button-menu/ButtonMenu';
 import ButtonMenuItem from './components/button-menu/ButtonMenuItem';
 import Card from './components/card/Card';
-import ControlledList, { ControlListType } from './components/controlled-list/ControlledList';
+import ControlledList from './components/controlled-list/ControlledList';
 import DataTable from './components/data-table/DataTable';
 import DataTablePaginator from './components/data-table/DataTablePaginator';
 import Modal from './components/modal/Modal';
@@ -16,7 +16,7 @@ import FieldWrapper from './components/field-wrapper/FieldWrapper';
 import CheckboxField from './components/checkbox-field/CheckboxField';
 import ListField from './components/list-field/ListField';
 import ButtonGroupField from './components/button-group-field/ButtonGroupField';
-import NumberField, { validateNumInput } from './components/number-field/NumberField';
+import NumberField from './components/number-field/NumberField';
 import SelectField from './components/select-field/SelectField';
 import TextField from './components/text-field/TextField';
 import TextAreaField from './components/text-area-field/TextAreaField';
@@ -114,9 +114,8 @@ import batchActions from './redux/actions/active-batch';
 /*
     Statics / Services
  */
-import API, { IElevenLabsOptions, IImposiumAPI } from './services/API';
+import API, { IImposiumAPI } from './services/API';
 import LegacyAPI from './services/API-Legacy';
-import CrmApi, { ICrmApi } from './services/CrmApi';
 import StorageService from './services/Storage';
 import Timer from './services/Timer';
 
@@ -162,14 +161,9 @@ 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';
-import { openConfirmModal } from './utils/modal';
+import { EditGuideModal, IEditGuideModalProps } from './components/edit-guide-modal/EditGuideModal';
+import { openConfirmModal, openReplaceFilesModal } from './utils/modal';
 import { ConfirmModal, IConfirmModalProps } from './components/confirm-modal/ConfirmModal';
-import TextAreaAutocomplete from './components/text-area-autocomplete/TextAreaAutocomplete';
-import IconToggle from './components/icon-toggle/IconToggle';
-import { DEFAULT_FONTS } from './constants/fonts';
-import FontField from './components/font-field/FontField';
-import { IChangeReportNode, IChangeReportSection, IPublishLogEntry } from './constants/snippets';
-import ChangeReportTree from './components/change-report/ChangeReportTree';
 
 export {
     ProjectDropdown,
@@ -266,6 +260,7 @@ export {
     updateAssetData,
     doAssetTableHydration,
     uploadAssets,
+    openReplaceFilesModal,
     replaceAsset,
     selectAsset,
     deselectAsset,
@@ -283,8 +278,6 @@ export {
     batchActions,
     API,
     IImposiumAPI,
-    ICrmApi,
-    CrmApi,
     LegacyAPI,
     StorageService,
     Timer,
@@ -330,16 +323,7 @@ export {
     CopyPropIdButton,
     ConfirmModal,
     IConfirmModalProps,
-    openConfirmModal,
-    IElevenLabsOptions,
-    TextAreaAutocomplete,
-    ControlListType,
-    IconToggle,
-    DEFAULT_FONTS,
-    FontField,
-    validateNumInput,
-    IChangeReportNode,
-    IChangeReportSection,
-    IPublishLogEntry,
-    ChangeReportTree
+    EditGuideModal,
+    IEditGuideModalProps,
+    openConfirmModal
 };

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

@@ -87,7 +87,7 @@ export const deleteAssets = (api: IImposiumAPI, ids: string[], storyId: string):
                 })
                 .catch((errors: Error[]) => {
                     dispatch(toggleLoading(false));
-                    reject(errors);
+                    reject(false);
                 });
         });
     };

package/src/redux/actions/publish.ts

@@ -45,7 +45,7 @@ export const getStoryPublishStatus = (api: IImposiumAPI, storyId: string): any =
                 })
                 .catch((e) => {
                     // 404 = no published version = using working copy
-                    if (e?.response?.status !== 404 && e.error !== 'missing_refresh_token') {
+                    if (e?.response?.status !== 404) {
                         console.error(e);
                         reject(copy.header.publishPollError);
                     }
@@ -74,15 +74,10 @@ export const cancelPublish = (api: IImposiumAPI, storyId: string) => {
     };
 };
 
-export const publishVersion = (
-    api: IImposiumAPI,
-    storyId: string,
-    message?: string,
-    creativeIds?: string[]
-) => {
+export const publishVersion = (api: IImposiumAPI, storyId: string) => {
     return (dispatch) => {
         return new Promise((resolve, reject) => {
-            api.runPublish(storyId, message || '', creativeIds)
+            api.runPublish(storyId, '')
                 .then((d) => {
                     dispatch(getStoryPublishStatus(api, storyId))
                         .then()

package/src/services/API.ts

@@ -4,8 +4,7 @@ import axios, {
     AxiosResponse,
     AxiosError,
     CancelToken,
-    CancelTokenSource,
-    CanceledError
+    CancelTokenSource
 } from 'axios';
 import { isObjEmpty } from '../Util';
 import { JOB_TYPES } from '../constants/api';
@@ -14,7 +13,6 @@ import { API_AUTH_TYPES } from '../components/font-picker/font-manager/constants
 export interface IImposiumAPI {
     init(baseUrl: string, credentials: any, orgId?: string);
     updateProjectVersion(storyId: string);
-    getQrCodeDesigns(storyId: string): Promise<any | Error>;
     getAssets(filters: any, storyId: string, unprocessed?: boolean, showVariables?: boolean);
     getAssetItem(assetId: string);
     uploadAsset(
@@ -51,8 +49,6 @@ export interface IImposiumAPI {
     getStoryStatus(storyId: string);
     revertVersion(storyId: string, versionId: string);
     getStoryVersions(storyId: string);
-    getStoryQRDesigns(creativeLibraryId: string): Promise<any | Error>;
-    getCreativesLinkedToProject(projectId: string): Promise<any | Error>;
     processStoryFile(storyId: string, file_key?: string, url?: string);
     getExperiences(storyId: string, params: any);
     createExperience(
@@ -114,7 +110,7 @@ export interface IImposiumAPI {
     runCut(storyId: string, actId: string, sceneId: string, cutId: string);
     runReRenderCuts(storyId: string, actId: string, sceneId: string);
     runProcessBaseVideo(storyId: string, fileKey: string);
-    runPublish(storyId: string, message: string, creativeIds?: string[]);
+    runPublish(storyId: string, message: string);
     cancelPublish(storyId: string);
     cancelJobPolling();
     getAccssCredentials();
@@ -150,9 +146,9 @@ 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, storyId?: string);
+    getAccessData(includeTotalRenders?: boolean, orgId?: string);
     deleteExperience(experienceId: string, eraseMedia?: boolean);
     exportExperiences(experienceId: string, params: any);
     addOrReplaceNote(experienceId: string, notes: string);
@@ -162,9 +158,6 @@ export interface IImposiumAPI {
     removeQueueAssoc(queueId: string, storyId: string);
     getQueueStories(config: any, itemsPerPage: number);
     cancelAllPendingRequests();
-    getTTSVoices(params: any);
-    getCustomVoice(voiceId: string);
-    getAuditLog(storyId: string): Promise<any | Error>;
     getToken: any;
 }
 
@@ -174,25 +167,10 @@ interface ITTSOptions {
     service: string;
     model?: string;
     speed?: string;
-    stability?: number;
-    similarity?: number;
-    style_exaggeration?: number;
     pause_silences?: boolean;
     minimum_silence_length?: number;
 }
 
-export interface IElevenLabsOptions {
-    page?: number;
-    page_size?: number;
-    selected_voice_id?: string;
-    search?: string;
-    language?: string;
-    accent?: string;
-    use_case?: string;
-    gender?: string;
-    age?: string;
-}
-
 export default class API {
     private http: AxiosInstance;
 
@@ -252,8 +230,7 @@ export default class API {
 
     private doRequest = async (
         config: AxiosRequestConfig,
-        organizationId?: string,
-        storyId?: string
+        organizationId?: string
     ): Promise<any> => {
         if (this.authType === API_AUTH_TYPES.TOKEN) {
             const token = await this.getToken();
@@ -265,10 +242,6 @@ export default class API {
                 headers['X-Imposium-Account-Id'] = organizationId;
             }
 
-            if (storyId) {
-                headers['X-Imposium-Project-Id'] = storyId;
-            }
-
             config.headers = headers;
         }
 
@@ -279,10 +252,7 @@ export default class API {
                 .then((res: AxiosResponse) => {
                     resolve(res.data);
                 })
-                .catch((e: AxiosError | CanceledError<any>) => {
-                    if (axios.isCancel(e)) {
-                        return;
-                    }
+                .catch((e: AxiosError) => {
                     reject(e);
                 });
         });
@@ -295,13 +265,6 @@ export default class API {
         });
     };
 
-    public getQrCodeDesigns = (storyId: string): Promise<any | Error> => {
-        return this.doRequest({
-            method: 'GET',
-            url: `/story/${storyId}/creative-library/qr-code-designs`
-        });
-    };
-
     public saveQueueAssoc = (
         queueId: string,
         storyId: string,
@@ -743,20 +706,6 @@ export default class API {
         });
     };
 
-    public getStoryQRDesigns = (creativeLibraryId: string): Promise<any | Error> => {
-        return this.doRequest({
-            method: 'GET',
-            url: `/story/qr-designs/${creativeLibraryId}`
-        });
-    };
-
-    public getCreativesLinkedToProject = (projectId: string): Promise<any | Error> => {
-        return this.doRequest({
-            method: 'GET',
-            url: `/story/${projectId}/creative-library/creatives`
-        });
-    };
-
     public getExperiences = (storyId: string, params: any): Promise<any | Error> => {
         return this.doRequest({
             method: 'GET',
@@ -1058,22 +1007,14 @@ export default class API {
         });
     };
 
-    public runPublish = (
-        storyId: string,
-        message: string,
-        creativeIds?: string[]
-    ): Promise<any | Error> => {
+    public runPublish = (storyId: string, message: string): Promise<any | Error> => {
         const route = `/job/publish`;
 
-        const jobConfig: any = {
+        const jobConfig = {
             story_id: storyId,
             message
         };
 
-        if (creativeIds) {
-            jobConfig.creative_ids = creativeIds;
-        }
-
         return this.doRequest({
             method: 'POST',
             url: route,
@@ -1663,7 +1604,7 @@ export default class API {
         });
     };
 
-    public textToSpeech = (options: ITTSOptions): Promise<any> => {
+    public textToSpeech = (options): Promise<any> => {
         const { text, voice, service } = options;
 
         let url = `/text-to-speech?text=${encodeURIComponent(
@@ -1678,18 +1619,6 @@ export default class API {
             url += `&speed=${options.speed}`;
         }
 
-        if (options.stability) {
-            url += `&stability=${options.stability}`;
-        }
-
-        if (options.similarity) {
-            url += `&similarity=${options.similarity}`;
-        }
-
-        if (options.style_exaggeration) {
-            url += `&style_exaggeration=${options.style_exaggeration}`;
-        }
-
         if (options.pause_silences) {
             url += `&pause_silences=${options.pause_silences}`;
         }
@@ -1726,21 +1655,16 @@ 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
+            data: {
+                story_id: storyId,
+                organization_id: orgId
+            }
         });
     };
 
@@ -1753,24 +1677,17 @@ export default class API {
         });
     };
 
-    public getAccessData = (
-        getTotalRenders: boolean = false,
-        storyId?: string
-    ): Promise<any | Error> => {
+    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
-            },
-            null,
-            storyId
-        );
+        return this.doRequest({
+            method: 'GET',
+            url: route
+        });
     };
 
     public removeQueueAssoc = (queueId: string, storyId: string): Promise<any> => {
@@ -1813,11 +1730,7 @@ export default class API {
             filter_account_name,
             filter_account_id,
             filter_queue_id,
-            filter_project_version,
-            include_total_renders,
-            include_failed_renders,
-            start,
-            end
+            filter_project_version
         } = config;
         let url = `/queue/stories?items_per_page=${itemsPerPage}&page=${page}&order=${order}&order_direction=${order_direction}`;
 
@@ -1845,84 +1758,9 @@ export default class API {
             url += `&filter_project_version=${filter_project_version}`;
         }
 
-        if (include_total_renders) {
-            url += `&include_total_renders=true`;
-        }
-
-        if (include_failed_renders) {
-            url += `&include_failed_renders=true`;
-        }
-
-        if (include_failed_renders || include_total_renders) {
-            url += `&start=${start}&end=${end}`;
-        }
-
-        return this.doRequest({
-            method: 'GET',
-            url
-        });
-    };
-
-    public getTTSVoices = (params: IElevenLabsOptions): Promise<any> => {
-        const {
-            page,
-            page_size,
-            selected_voice_id,
-            search,
-            language,
-            accent,
-            use_case,
-            gender,
-            age
-        } = params;
-
-        let url = `/text-to-speech/voices?service=ElevenLabs&page=${page}&page_size=${page_size}`;
-
-        if (selected_voice_id) {
-            url += `&selected_voice_id=${selected_voice_id}`;
-        }
-
-        if (search) {
-            url += `&search=${search}`;
-        }
-
-        if (language) {
-            url += `&language=${language}`;
-        }
-
-        if (accent) {
-            url += `&accent=${accent}`;
-        }
-
-        if (use_case) {
-            url += `&use_case=${use_case}`;
-        }
-
-        if (gender) {
-            url += `&gender=${gender}`;
-        }
-
-        if (age) {
-            url += `&age=${age}`;
-        }
-
         return this.doRequest({
             method: 'GET',
             url
         });
     };
-
-    public getCustomVoice = (voiceId: string): Promise<any | Error> => {
-        return this.doRequest({
-            method: 'GET',
-            url: `/text-to-speech/voice?service=ElevenLabs&id=${voiceId}`
-        });
-    };
-
-    public getAuditLog = (storyId: string): Promise<any | Error> => {
-        return this.doRequest({
-            method: 'GET',
-            url: `/story/${storyId}/audit-log`
-        });
-    };
 }

package/src/utils/modal.ts

@@ -1,5 +1,7 @@
 import { IConfirmModalProps } from '../components/confirm-modal/ConfirmModal';
+import { IReplaceFilesModalProps } from '../components/replace-files-modal/ReplaceFilesModal';
 
+export const replaceFilesModalEvent = 'openreplacefilesmodal';
 export const confirmModalEvent = 'openconfirmmodal';
 
 export const openConfirmModal = (detail: IConfirmModalProps) => {
@@ -9,3 +11,11 @@ export const openConfirmModal = (detail: IConfirmModalProps) => {
 
     window.dispatchEvent(event);
 };
+
+export const openReplaceFilesModal = (detail: IReplaceFilesModalProps) => {
+    const event = new CustomEvent(replaceFilesModalEvent, {
+        detail
+    });
+
+    window.dispatchEvent(event);
+};