@pushwoosh/smart-components-kit 1.0.24 → 1.0.26

package/ExportCSV/ExportCsvBanner/ExportCsvBanner.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type TaskInfo_args, type GetLastTasksRequest, type Status } from '@pushwoosh/rpc-v2-http-api-data/pushwoosh_export_messages_v2';
+export type ExportTask = {
+    id: number;
+    status: Status;
+    filename?: string;
+    args?: TaskInfo_args;
+    progressTitle: string;
+    resultSubTitle: string;
+};
+type ExportCsvBannerProps = {
+    exportTask: ExportTask | undefined;
+    updateExportTask: (exportTask: Partial<ExportTask>) => void;
+    showLastExportLocalStorageKey: string;
+    lastTasksParams?: GetLastTasksRequest;
+};
+export declare const ExportCsvBanner: ({ exportTask, updateExportTask, showLastExportLocalStorageKey, lastTasksParams, }: ExportCsvBannerProps) => React.JSX.Element | null;
+export {};

package/ExportCSV/ExportCsvBanner/ExportCsvBanner.js

@@ -0,0 +1,121 @@
+import React, { useEffect } from 'react';
+import { ExportResult, ProgressBar, Button } from '@pushwoosh/dumb-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { DangerTriangleIcon, DownloadIcon } from '@pushwoosh/kit-icons';
+import { useExportService } from '../useExportService';
+import { useExportVisibility } from './hooks/useExportVisibility';
+export const ExportCsvBanner = ({
+  exportTask,
+  updateExportTask,
+  showLastExportLocalStorageKey,
+  lastTasksParams
+}) => {
+  const {
+    getLastTasks,
+    getStatus,
+    clearExport,
+    taskResult,
+    progress,
+    error
+  } = useExportService();
+  const {
+    isHidden,
+    hide,
+    show
+  } = useExportVisibility(showLastExportLocalStorageKey);
+  useEffect(() => {
+    if (!exportTask) {
+      return;
+    }
+    if (exportTask.id && (exportTask.status === 'STATUS_PENDING' || exportTask.status === 'STATUS_UNSPECIFIED')) {
+      clearExport();
+      getStatus({
+        uid: exportTask.id
+      });
+      show();
+    }
+  }, [clearExport, exportTask, getStatus, show]);
+  useEffect(() => {
+    if (taskResult) {
+      updateExportTask({
+        status: 'STATUS_SUCCESS',
+        filename: taskResult.data.file
+      });
+    }
+  }, [taskResult, updateExportTask]);
+  useEffect(() => {
+    if (error) {
+      updateExportTask({
+        status: 'STATUS_FAILED'
+      });
+    }
+  }, [error, updateExportTask]);
+  useEffect(() => {
+    if (lastTasksParams && !isHidden) {
+      getLastTasks(lastTasksParams).then(res => {
+        if (res.length > 0) {
+          const {
+            id,
+            result,
+            status,
+            args
+          } = res[0];
+          const {
+            data
+          } = result;
+          updateExportTask({
+            id,
+            status,
+            filename: data.file,
+            args,
+            progressTitle: 'Exporting list:',
+            resultSubTitle: 'Result:'
+          });
+        }
+      });
+    }
+  }, [getLastTasks, isHidden, lastTasksParams, updateExportTask]);
+  if (!exportTask || isHidden) return null;
+  const {
+    filename,
+    status,
+    resultSubTitle,
+    progressTitle
+  } = exportTask;
+  return React.createElement(Horizontal, {
+    "$padding": 8,
+    "$alignItems": "center",
+    "$border": `1px solid ${Color.DIVIDER}`,
+    "$borderRadius": ShapeRadius.SECTION,
+    "$bgColor": Color.CLEAR
+  }, status === 'STATUS_SUCCESS' && React.createElement(ExportResult, {
+    type: "success",
+    title: "Exporting complete",
+    subtitle: `${resultSubTitle} ${filename}`,
+    handleClose: hide,
+    rightSlot: React.createElement("a", {
+      href: `/api/v2/statistics/exportMessagesStatistics/download/${filename}`,
+      download: filename
+    }, React.createElement(Button, {
+      color: "secondary",
+      size: "compact",
+      icon: React.createElement(DownloadIcon, {
+        size: "small",
+        view: "filled"
+      })
+    }, "Download CSV"))
+  }), status === 'STATUS_PENDING' && React.createElement(ProgressBar, {
+    title: progressTitle,
+    percentValue: progress
+  }), status === 'STATUS_FAILED' && React.createElement(ExportResult, {
+    type: "error",
+    title: "Export failed",
+    subtitle: "Please try again",
+    leftSlotIcon: React.createElement(DangerTriangleIcon, {
+      size: "medium",
+      view: "filled"
+    }),
+    handleClose: hide
+  }));
+};

package/ExportCSV/ExportCsvBanner/hooks/useExportVisibility.d.ts

@@ -0,0 +1,5 @@
+export declare const useExportVisibility: (key: string) => {
+    isHidden: boolean;
+    hide: () => void;
+    show: () => void;
+};

package/ExportCSV/ExportCsvBanner/hooks/useExportVisibility.js

@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+export const useExportVisibility = key => {
+  const [isHidden, setIsHidden] = useState(() => Boolean(+(localStorage.getItem(key) ?? 0)));
+  const hide = useCallback(() => {
+    localStorage.setItem(key, '1');
+    setIsHidden(true);
+  }, [key]);
+  const show = useCallback(() => {
+    localStorage.setItem(key, '0');
+    setIsHidden(false);
+  }, [key]);
+  return {
+    isHidden,
+    hide,
+    show
+  };
+};

package/ExportCSV/ExportCsvBanner/index.d.ts

@@ -0,0 +1,2 @@
+export { ExportCsvBanner } from './ExportCsvBanner';
+export type { ExportTask } from './ExportCsvBanner';

package/ExportCSV/ExportCsvBanner/index.js

@@ -0,0 +1 @@
+export { ExportCsvBanner } from './ExportCsvBanner';

package/ExportCSV/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ExportCsvBanner';
+export * from './useExportService';

package/ExportCSV/index.js

@@ -0,0 +1,2 @@
+export * from './ExportCsvBanner';
+export * from './useExportService';

package/ExportCSV/useExportService/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MAX_RETRIES = 180;
+export declare const API_CHECK_INTERVAL = 1000;

package/ExportCSV/useExportService/constants.js

@@ -0,0 +1,2 @@
+export const MAX_RETRIES = 180;
+export const API_CHECK_INTERVAL = 1000;

package/ExportCSV/useExportService/index.d.ts

@@ -0,0 +1 @@
+export * from './useExportService';

package/ExportCSV/useExportService/index.js

@@ -0,0 +1 @@
+export * from './useExportService';

package/ExportCSV/useExportService/useExportService.d.ts

@@ -0,0 +1,12 @@
+import type { StatusRequest, StatusResponse, ResultRequest, ResultResponse, ExportRequest, GetLastTasksRequest, TaskInfo, ResultResponse_result } from '@pushwoosh/rpc-v2-http-api-data/pushwoosh_export_messages_v2';
+export declare const useExportService: () => {
+    getLastTasks: (params: GetLastTasksRequest) => Promise<TaskInfo[]>;
+    startExport: (params: ExportRequest) => Promise<number>;
+    getStatus: (params: StatusRequest) => Promise<StatusResponse>;
+    getResult: (params: ResultRequest) => Promise<ResultResponse>;
+    clearExport: () => void;
+    error: string;
+    progress: number;
+    isTaskInProgress: boolean;
+    taskResult: ResultResponse_result | undefined;
+};

package/ExportCSV/useExportService/useExportService.js

@@ -0,0 +1,119 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { API_CHECK_INTERVAL, MAX_RETRIES } from './constants';
+import { useSPAContext } from '../../context';
+export const useExportService = () => {
+  const [error, setError] = useState('');
+  const [progress, setProgress] = useState(0);
+  const [isTaskInProgress, setIsTaskInProgress] = useState(false);
+  const [taskResult, setTaskResult] = useState();
+  const timeoutStatusRef = useRef(null);
+  const retriesRef = useRef(0);
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const clearExport = useCallback(() => {
+    setError('');
+    setIsTaskInProgress(false);
+    setTaskResult(undefined);
+    setProgress(0);
+  }, []);
+  const clearStatusTimeout = useCallback(() => {
+    if (timeoutStatusRef.current) {
+      clearTimeout(timeoutStatusRef.current);
+      timeoutStatusRef.current = null;
+    }
+  }, []);
+  const startExport = useCallback(async params => {
+    try {
+      clearExport();
+      setIsTaskInProgress(true);
+      const {
+        uid
+      } = await rpcGateway.exportStatistics.Export(params);
+      return uid;
+    } catch (err) {
+      setError(err === null || err === void 0 ? void 0 : err.message);
+      setIsTaskInProgress(false);
+      return 0;
+    }
+  }, [clearExport, rpcGateway.exportStatistics]);
+  const getResult = useCallback(async params => {
+    try {
+      const result = await rpcGateway.exportStatistics.Result(params);
+      setTaskResult(result.result);
+      return result;
+    } catch (err) {
+      setError(err === null || err === void 0 ? void 0 : err.message);
+      return err;
+    } finally {
+      setIsTaskInProgress(false);
+    }
+  }, [rpcGateway]);
+  const getStatus = useCallback(async params => {
+    try {
+      const result = await rpcGateway.exportStatistics.Status(params);
+      switch (result.status) {
+        case 'STATUS_PENDING':
+          if (result.progress > progress) {
+            setProgress(Math.round(result.progress));
+          }
+          clearStatusTimeout();
+          if (retriesRef.current < MAX_RETRIES) {
+            retriesRef.current += 1;
+            timeoutStatusRef.current = setTimeout(() => {
+              getStatus(params);
+              clearStatusTimeout();
+            }, API_CHECK_INTERVAL);
+          } else {
+            setError('Max retries reached. Please try again later.');
+            setIsTaskInProgress(false);
+          }
+          break;
+        case 'STATUS_SUCCESS':
+          getResult(params);
+          retriesRef.current = 0;
+          setIsTaskInProgress(false);
+          break;
+        case 'STATUS_FAILED':
+          setError('Error. File has not been generated. Please contact with our support team');
+          setIsTaskInProgress(false);
+          retriesRef.current = 0;
+          throw new Error('Export failed');
+        default:
+          break;
+      }
+      return result;
+    } catch (err) {
+      setError('Export failed. File not found');
+      setIsTaskInProgress(false);
+      retriesRef.current = 0;
+      return err;
+    }
+  }, [clearStatusTimeout, getResult, progress, rpcGateway]);
+  const getLastTasks = useCallback(async params => {
+    try {
+      const {
+        tasks
+      } = await rpcGateway.exportStatistics.GetLastTasks(params);
+      return tasks;
+    } catch (err) {
+      setError(err === null || err === void 0 ? void 0 : err.message);
+      return err;
+    }
+  }, [rpcGateway]);
+  useEffect(() => () => {
+    clearStatusTimeout();
+    setIsTaskInProgress(false);
+  }, [clearStatusTimeout]);
+  return {
+    getLastTasks,
+    startExport,
+    getStatus,
+    getResult,
+    clearExport,
+    error,
+    progress,
+    isTaskInProgress,
+    taskResult
+  };
+};

package/context/types.d.ts

@@ -1,7 +1,8 @@
 import { type History } from 'history';
 import type { GrpcBridge } from '@pushwoosh/grpc-bridge';
 import type { GrpcClient, HttpClient, RpcClient } from '@pushwoosh/http-client';
-import type { API } from '@pushwoosh/rpc-v2-http-api-data';
+import type { API as RpcGatewayJourneyAPI } from '@pushwoosh/rpc-gateway-journey-data';
+import type { API as RpcGatewayAPI } from '@pushwoosh/rpc-v2-http-api-data';
 import type { SessionStore } from '@pushwoosh/session-store';
 export type SPAContextType = {
     readonly history: History;
@@ -10,7 +11,8 @@ export type SPAContextType = {
     readonly grpcClient: GrpcClient;
     readonly grpcBridge: GrpcBridge;
     readonly sessionStore: SessionStore;
-    readonly rpcGateway: API;
+    readonly rpcGateway: RpcGatewayAPI;
+    readonly rpcGatewayJourney: RpcGatewayJourneyAPI;
     readonly language: string;
     readonly helpers: {
         getApiOrigin: (name: string) => string;

package/index.d.ts

@@ -5,3 +5,4 @@ export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';
 export * from './CampaignsConfigurationDrawer';
+export * from './ExportCSV';

package/index.js

@@ -4,4 +4,5 @@ export * from './DynamicContentPickerForm';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';
-export * from './CampaignsConfigurationDrawer';
+export * from './CampaignsConfigurationDrawer';
+export * from './ExportCSV';

package/package.json

@@ -43,6 +43,7 @@
     "@pushwoosh/grpc-bridge": "^1.5.36",
     "@pushwoosh/http-client": "^2.5.0",
     "@pushwoosh/rpc-v2-http-api-data": "^0.1.501",
+    "@pushwoosh/rpc-gateway-journey-data": "^0.26.206",
     "@pushwoosh/session-store": "^2.5.0",
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
@@ -50,5 +51,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "1.0.24"
+  "version": "1.0.26"
 }