@pushwoosh/smart-components-kit 1.0.23 → 1.0.25

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { FieldBox, NativeInput, Select, Spinner } from '@pushwoosh/dumb-components';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { useDynamicContentTags } from './hooks';
-import { TagPickerDiv } from './styled';
+import { SimpleTagPickerDiv } from './styled';
 const defaultDynamicContent = {
   tagName: '',
   modifier: 'regular',
@@ -21,7 +21,7 @@ export const SimpleDynamicContentPickerFormSmart = ({
     }
   }, [asyncResult.loading, update]);
   if (asyncResult.loading) {
-    return React.createElement(TagPickerDiv, null, React.createElement(Horizontal, {
+    return React.createElement(SimpleTagPickerDiv, null, React.createElement(Horizontal, {
       "$placeItems": "center",
       "$padding": 36
     }, React.createElement(Spinner, {
@@ -33,7 +33,7 @@ export const SimpleDynamicContentPickerFormSmart = ({
     name: '',
     modifiers: ['regular']
   };
-  return React.createElement(TagPickerDiv, null, React.createElement(FieldBox, {
+  return React.createElement(SimpleTagPickerDiv, null, React.createElement(FieldBox, {
     title: "Tag"
   }, React.createElement(Vertical, {
     "$gap": 8

package/DynamicContentPickerForm/VariedDynamicContentPickerFormSmart.js

@@ -5,7 +5,7 @@ import { DynamicContentCustomPickerForm } from './DynamicContentCustomPickerForm
 import { DynamicContentEventPickerForm } from './DynamicContentEventPickerForm';
 import { DynamicContentTagPickerForm } from './DynamicContentTagPickerForm';
 import { useVariedDynamicContentTags } from './hooks';
-import { TagPickerDiv } from './styled';
+import { VariedTagPickerDiv } from './styled';
 import { createDefaultDynamicContent } from './utils';
 const defaultVariedDynamicContent = {
   kind: 'tag',
@@ -39,7 +39,7 @@ export const VariedDynamicContentPickerFormSmart = ({
     update();
   }, [asyncResult.loading, update]);
   if (asyncResult.loading) {
-    return React.createElement(TagPickerDiv, null, React.createElement(Horizontal, {
+    return React.createElement(VariedTagPickerDiv, null, React.createElement(Horizontal, {
       "$placeItems": "center",
       "$padding": 36
     }, React.createElement(Spinner, {
@@ -47,7 +47,7 @@ export const VariedDynamicContentPickerFormSmart = ({
     })));
   }
   const isValidDc = vdc.kind === 'tag' && vdc.dc.tagName !== '' && vdc.dc.modifier !== '' || vdc.kind === 'event' && vdc.dc.eventName !== '' && vdc.dc.attribute !== '' || vdc.kind === 'customText' && vdc.dc.text !== '';
-  return React.createElement(TagPickerDiv, null, React.createElement(Vertical, {
+  return React.createElement(VariedTagPickerDiv, null, React.createElement(Vertical, {
     "$gap": 8
   }, React.createElement(FieldBox, {
     title: "Variable Type"

package/DynamicContentPickerForm/styled.d.ts

@@ -1,5 +1,5 @@
 import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
-export declare const TagPickerDiv: import("styled-components").StyledComponent<"div", any, {
+export declare const SimpleTagPickerDiv: import("styled-components").StyledComponent<"div", any, {
     $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
     $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
     $bgColor?: string | undefined;
@@ -58,6 +58,67 @@ export declare const TagPickerDiv: import("styled-components").StyledComponent<"
     $gap: number;
     $padding: number;
     $borderRadius: ShapeRadius;
+}, "$gridAutoFlow" | "$borderRadius" | "$gap" | "$padding">;
+export declare const VariedTagPickerDiv: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $bgColor?: string | undefined;
+    $border?: string | ({
+        top?: string | undefined;
+        right?: string | undefined;
+        bottom?: string | undefined;
+        left?: string | undefined;
+    } | {
+        horizontal: string;
+        top?: string | undefined;
+        bottom?: string | undefined;
+    } | {
+        vertical: string;
+        right?: string | undefined;
+        left?: string | undefined;
+    }) | undefined;
+    $borderRadius?: (string | number) | undefined;
+    $boxShadow?: string | undefined;
+    $gap?: (string | number) | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $padding?: (string | number) | ({
+        top?: (string | number) | undefined;
+        right?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    } | {
+        horizontal: string | number;
+        top?: (string | number) | undefined;
+        bottom?: (string | number) | undefined;
+    } | {
+        vertical: string | number;
+        right?: (string | number) | undefined;
+        left?: (string | number) | undefined;
+    }) | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $gap: number;
+    $padding: number;
+    $borderRadius: ShapeRadius;
+} & {
     $border: string;
     $bgColor: Color;
     $boxShadow: Shadow;

package/DynamicContentPickerForm/styled.js

@@ -1,14 +1,19 @@
 import styled from 'styled-components';
 import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
-export const TagPickerDiv = styled(Vertical).attrs({
+export const SimpleTagPickerDiv = styled(Vertical).attrs({
   $gap: 16,
   $padding: 16,
-  $borderRadius: ShapeRadius.CONTROL,
+  $borderRadius: ShapeRadius.CONTROL
+}).withConfig({
+  displayName: "SimpleTagPickerDiv",
+  componentId: "sc-17kpm8h-0"
+})(["width:240px;"]);
+export const VariedTagPickerDiv = styled(SimpleTagPickerDiv).attrs({
   $border: `1px solid ${Color.FORM}`,
   $bgColor: Color.FROZEN,
   $boxShadow: Shadow.REGULAR
 }).withConfig({
-  displayName: "TagPickerDiv",
-  componentId: "sc-17kpm8h-0"
-})(["width:240px;"]);
+  displayName: "VariedTagPickerDiv",
+  componentId: "sc-17kpm8h-1"
+})([""]);

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/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

@@ -18,7 +18,7 @@
   "dependencies": {
     "@emoji-mart/react": "^1.1.1",
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^1.0.74",
+    "@pushwoosh/dumb-components": "^1.1.2",
     "@pushwoosh/kit-constants": "^1.6.9",
     "@pushwoosh/kit-helpers": "^4.8.1",
     "@pushwoosh/kit-icons": "^2.1.2",
@@ -50,5 +50,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "1.0.23"
+  "version": "1.0.25"
 }