@pushwoosh/smart-components-kit 1.0.71 → 1.0.73

package/ResendModal/ResendModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type ResendModalProps } from './types';
+export declare const ResendModal: ({ isOpen, onClose, applicationCode, message, emailTemplate: providedEmailTemplate, }: ResendModalProps) => React.JSX.Element | null;

package/ResendModal/ResendModal.js

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { Button, FieldBox, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, NativeInput } from '@pushwoosh/dumb-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal, useAsync, Vertical } from '@pushwoosh/kit-helpers';
+import { EditIcon } from '@pushwoosh/kit-icons';
+import { Paragraph, Text } from '@pushwoosh/kit-typography';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import { parseMessageProperties } from './hooks/helpers';
+import { useResend } from './hooks/useResend';
+export const ResendModal = ({
+  isOpen,
+  onClose,
+  applicationCode,
+  message,
+  emailTemplate: providedEmailTemplate
+}) => {
+  const {
+    history,
+    rpcGateway
+  } = useSPAContext();
+  const {
+    resendEmail
+  } = useResend();
+  const parsedProps = useMemo(() => parseMessageProperties(message.properties), [message]);
+  const emailTemplateResult = useAsync(async () => {
+    if (providedEmailTemplate) {
+      return providedEmailTemplate;
+    }
+    const presetCode = parsedProps.preset || message.preset;
+    if (!presetCode) {
+      return null;
+    }
+    const {
+      emailTemplate
+    } = await rpcGateway.emailTemplates.Get({
+      code: presetCode
+    });
+    return emailTemplate;
+  }, [providedEmailTemplate, parsedProps.preset, message.preset, rpcGateway]);
+  const effectiveEmailTemplate = providedEmailTemplate || emailTemplateResult.value;
+  const methods = useForm({
+    mode: 'onChange',
+    defaultValues: {
+      presetSubject: ''
+    }
+  });
+  const {
+    control,
+    clearErrors,
+    handleSubmit,
+    watch,
+    reset
+  } = methods;
+  const {
+    presetSubject
+  } = watch();
+  useEffect(() => {
+    var _effectiveEmailTempla;
+    if (!isOpen) {
+      reset({
+        presetSubject: ''
+      });
+      return;
+    }
+    if (!(effectiveEmailTemplate !== null && effectiveEmailTemplate !== void 0 && (_effectiveEmailTempla = effectiveEmailTemplate.content) !== null && _effectiveEmailTempla !== void 0 && _effectiveEmailTempla.subject)) {
+      reset({
+        presetSubject: ''
+      });
+      return;
+    }
+    const {
+      subject
+    } = effectiveEmailTemplate.content;
+    const subjectValue = subject.default || subject.en || Object.values(subject)[0] || '';
+    reset({
+      presetSubject: subjectValue
+    });
+  }, [isOpen, effectiveEmailTemplate, reset]);
+  const {
+    isMultilanguage
+  } = useMemo(() => {
+    var _effectiveEmailTempla2;
+    if (!(effectiveEmailTemplate !== null && effectiveEmailTemplate !== void 0 && (_effectiveEmailTempla2 = effectiveEmailTemplate.content) !== null && _effectiveEmailTempla2 !== void 0 && _effectiveEmailTempla2.subject)) {
+      return {
+        isMultilanguage: false
+      };
+    }
+    const {
+      subject
+    } = effectiveEmailTemplate.content;
+    const subjectKeys = Object.keys(subject);
+    const isMulti = subjectKeys.length > 1 || subjectKeys.length === 1 && !subject.default;
+    return {
+      isMultilanguage: isMulti
+    };
+  }, [effectiveEmailTemplate]);
+  const editMessageUrl = useMemo(() => {
+    if (!message || !applicationCode) return '';
+    const type = message.type === 'Email' ? 'email' : 'push';
+    const queryParams = new URLSearchParams({
+      type,
+      message: message.code
+    });
+    const props = message.properties || {};
+    if (props.campaignCode) queryParams.set('campaign', props.campaignCode);
+    if (props.preset) queryParams.set('preset', props.preset);
+    if (props.filter_code) queryParams.set('segment', props.filter_code);
+    if (props.rich_media_code) queryParams.set('inapp', props.rich_media_code);
+    return `/applications/${applicationCode}/one-time-messages/edit?${queryParams.toString()}`;
+  }, [applicationCode, message]);
+  const handleResend = useCallback(async () => {
+    const res = await resendEmail(applicationCode, message, presetSubject);
+    if (res) {
+      onClose();
+    }
+  }, [applicationCode, message, onClose, presetSubject, resendEmail]);
+  if (!message) return null;
+  return React.createElement(Modal, {
+    size: "medium",
+    isOpen: isOpen,
+    onClose: onClose
+  }, React.createElement(ModalHeader, null, React.createElement(ModalTitle, null, "Resend to non-openers")), React.createElement(ModalBody, null, React.createElement(Vertical, {
+    "$gap": 16
+  }, React.createElement(Paragraph, null, "This action will send a one-time email campaign to recipients who didn't open the original message. The subject above will be used. Before resending, you can edit the campaign if needed."), React.createElement(Controller, {
+    control: control,
+    name: "presetSubject",
+    rules: {
+      required: 'This field cannot be empty'
+    },
+    render: ({
+      field,
+      fieldState
+    }) => {
+      var _fieldState$error;
+      return React.createElement(FieldBox, {
+        title: "subject LINE",
+        error: !!fieldState.error && React.createElement(Text, {
+          "$color": Color.DANGER
+        }, (_fieldState$error = fieldState.error) === null || _fieldState$error === void 0 ? void 0 : _fieldState$error.message)
+      }, React.createElement(NativeInput, {
+        value: field.value ?? '',
+        disabled: isMultilanguage,
+        "$isErrored": fieldState.invalid,
+        name: field.name,
+        onChange: ({
+          target: {
+            value
+          }
+        }) => {
+          if (value) {
+            clearErrors('presetSubject');
+          }
+          field.onChange(value);
+        }
+      }));
+    }
+  }))), React.createElement(ModalFooter, null, React.createElement(Horizontal, {
+    "$justifyContent": "space-between"
+  }, React.createElement(Button, {
+    color: "secondary",
+    icon: React.createElement(EditIcon, {
+      size: "medium",
+      view: "lined"
+    }),
+    onClick: handleSubmit(() => {
+      history.push(editMessageUrl);
+    })
+  }, "Edit before resend"), React.createElement(Horizontal, {
+    "$gap": 8
+  }, React.createElement(Button, {
+    color: "secondary",
+    onClick: onClose
+  }, "Cancel"), React.createElement(Button, {
+    color: "primary",
+    onClick: handleSubmit(() => {
+      handleResend();
+    })
+  }, "Resend now")))));
+};

package/ResendModal/hooks/helpers.d.ts

@@ -0,0 +1 @@
+export declare const parseMessageProperties: (properties: Record<string, string> | null | undefined) => Record<string, string>;

package/ResendModal/hooks/helpers.js

@@ -0,0 +1,14 @@
+export const parseMessageProperties = properties => Object.entries(properties ?? {}).reduce((acc, [key, value]) => {
+  if (!value) {
+    return acc;
+  }
+  try {
+    const parsedValue = JSON.parse(value);
+    if (parsedValue && typeof parsedValue.default === 'string') {
+      acc[key] = parsedValue.default;
+    }
+  } catch {
+    console.warn(`Could not parse property "${key}"`);
+  }
+  return acc;
+}, {});

package/ResendModal/hooks/mappers.d.ts

@@ -0,0 +1,36 @@
+import { type Message } from '@pushwoosh/rpc-v2-http-api-data/messages';
+export interface ResendEmailRequest {
+    request: {
+        application: string;
+        notifications: Array<{
+            transactionId: string;
+            preset?: string;
+            campaign?: string;
+            subject?: string;
+            send_date: string;
+            timezone?: string;
+            devices_filter: string;
+            from: {
+                name: string;
+                email: string;
+            };
+            'reply-to'?: {
+                name: string;
+                email: string;
+            };
+            email_type: string;
+            email_category?: string;
+            use_auto_registration?: boolean;
+            created_via?: string;
+            capping_days?: number;
+            capping_count?: number;
+            capping_exclude?: boolean;
+            capping_avoid?: boolean;
+            send_rate?: number;
+            send_rate_avoid?: boolean;
+        }>;
+    };
+}
+export declare class ResendEmailPayloadMapper {
+    static getPayload(applicationCode: string, originalMessage: Message, newSubject: string): ResendEmailRequest;
+}

package/ResendModal/hooks/mappers.js

@@ -0,0 +1,34 @@
+import { v4 } from 'uuid';
+import { parseMessageProperties } from './helpers';
+export class ResendEmailPayloadMapper {
+  static getPayload(applicationCode, originalMessage, newSubject) {
+    const props = parseMessageProperties(originalMessage.properties);
+    const devicesFilter = `((Event("${applicationCode}", "PW_EmailSent", date daysago lte 365, count eq 1, attribute "message_code" eq "${originalMessage.code}")) \\ (Event("${applicationCode}", "PW_EmailOpen", date daysago lte 365, count eq 1, attribute "message_code" eq "${originalMessage.code}")))`;
+    return {
+      request: {
+        application: applicationCode,
+        notifications: [{
+          transactionId: v4(),
+          preset: props.preset,
+          campaign: props.campaignCode,
+          subject: newSubject,
+          send_date: 'now',
+          timezone: props.timezone,
+          devices_filter: devicesFilter,
+          from: {
+            name: props.email_from_name || '',
+            email: props.email_from_email || ''
+          },
+          'reply-to': props.email_reply_email ? {
+            name: props.email_reply_name || '',
+            email: props.email_reply_email
+          } : undefined,
+          email_type: props.email_type || 'marketing',
+          email_category: props.email_category,
+          use_auto_registration: true,
+          created_via: 'email cp'
+        }]
+      }
+    };
+  }
+}

package/ResendModal/hooks/useResend.d.ts

@@ -0,0 +1,4 @@
+import type { Message } from '@pushwoosh/rpc-v2-http-api-data/messages';
+export declare const useResend: () => {
+    resendEmail: (applicationCode: string, originalMessage: Message, newSubject: string) => Promise<boolean>;
+};

package/ResendModal/hooks/useResend.js

@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import { useToast } from '@pushwoosh/dumb-components';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import { ResendEmailPayloadMapper } from './mappers';
+export const useResend = () => {
+  const {
+    httpClient,
+    helpers: {
+      getJsonApiUrl
+    }
+  } = useSPAContext();
+  const {
+    openToast
+  } = useToast();
+  const resendEmail = useCallback(async (applicationCode, originalMessage, newSubject) => {
+    const payload = ResendEmailPayloadMapper.getPayload(applicationCode, originalMessage, newSubject);
+    try {
+      const res = await httpClient.post(getJsonApiUrl('createEmailMessage'), {
+        body: payload.request,
+        withAuthorization: true
+      });
+      if ((res === null || res === void 0 ? void 0 : res.status_code) !== 200) {
+        openToast({
+          title: (res === null || res === void 0 ? void 0 : res.status_message) || 'Failed to resend message',
+          type: 'error'
+        });
+        return false;
+      }
+      openToast({
+        title: 'Message resent successfully',
+        type: 'success'
+      });
+      return true;
+    } catch (error) {
+      openToast({
+        title: (error === null || error === void 0 ? void 0 : error.message) || 'Internal error',
+        type: 'error'
+      });
+      return false;
+    }
+  }, [httpClient, getJsonApiUrl, openToast]);
+  return {
+    resendEmail
+  };
+};

package/ResendModal/index.d.ts

@@ -0,0 +1,3 @@
+export { ResendModal } from './ResendModal';
+export type { ResendModalProps, ResendFormValues } from './types';
+export { useResend } from './hooks/useResend';

package/ResendModal/index.js

@@ -0,0 +1,2 @@
+export { ResendModal } from './ResendModal';
+export { useResend } from './hooks/useResend';

package/ResendModal/types.d.ts

@@ -0,0 +1,12 @@
+import type { EmailTemplate } from '@pushwoosh/rpc-v2-http-api-data/accounts';
+import type { Message } from '@pushwoosh/rpc-v2-http-api-data/messages';
+export type ResendModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    applicationCode: string;
+    message: Message;
+    emailTemplate?: EmailTemplate;
+};
+export interface ResendFormValues {
+    presetSubject: string;
+}

package/ResendModal/types.js

@@ -0,0 +1 @@
+export {};

package/index.d.ts

@@ -1,4 +1,3 @@
-export * from '@pushwoosh/spa-context';
 export * from './hooks';
 export * from './CampaignsConfigurationDrawer';
 export * from './DynamicContentPicker';
@@ -7,6 +6,7 @@ export * from './EmailTemplatePreview';
 export * from './ExportCSV';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
+export * from './ResendModal';
 export * from './RichMessageEditorSmart';
 export * from './Table';
 export * from './OpenActions';

package/index.js

@@ -1,4 +1,3 @@
-export * from '@pushwoosh/spa-context';
 export * from './hooks';
 export * from './CampaignsConfigurationDrawer';
 export * from './DynamicContentPicker';
@@ -7,6 +6,7 @@ export * from './EmailTemplatePreview';
 export * from './ExportCSV';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';
+export * from './ResendModal';
 export * from './RichMessageEditorSmart';
 export * from './Table';
 export * from './OpenActions';

package/package.json

@@ -38,6 +38,7 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
+    "@types/uuid": "^8.3.4",
     "pre-commit": "^1.2.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -47,5 +48,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.0.71"
+  "version": "1.0.73"
 }