@pushwoosh/smart-components-kit 1.0.57 → 1.0.59

package/ModalCloningJourney/ModalCloningJourney.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type ModalCloningJourneyProps } from './types';
+export declare function ModalCloningJourney({ journeyId, journeyTitle, onAfterClone, onCancel, isOpen }: ModalCloningJourneyProps): React.JSX.Element;

package/ModalCloningJourney/ModalCloningJourney.js

@@ -0,0 +1,234 @@
+import React, { useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+import { FieldBox, Modal, ModalBody, ModalHeader, ModalFooter, NativeInput, Select, Button, Banner } from '@pushwoosh/dumb-components';
+import { Horizontal, trackMixpanelEvent, useAsync, Vertical } from '@pushwoosh/kit-helpers';
+import { H3, Paragraph } from '@pushwoosh/kit-typography';
+import { useSPAContext } from '../context';
+export function ModalCloningJourney({
+  journeyId,
+  journeyTitle,
+  onAfterClone,
+  onCancel,
+  isOpen
+}) {
+  var _applicationsOptions$, _errors$title, _errors$destination, _errors$todo;
+  const params = useParams();
+  const {
+    applicationCode
+  } = params;
+  const [applicationsOptions, setApplicationsOptions] = useState([]);
+  const [isCloning, setIsCloning] = useState(false);
+  const {
+    rpcGateway,
+    rpcGatewayJourney
+  } = useSPAContext();
+  const applications = useAsync(async () => {
+    const appsRaw = await rpcGateway.applications.List({
+      perPage: 10000
+    });
+    return appsRaw.applications.map(({
+      iconUrl,
+      code,
+      title,
+      platforms
+    }) => ({
+      code,
+      title,
+      iconUrl,
+      platforms: Object.values(platforms).map(({
+        isConfigured,
+        isActive,
+        properties
+      }) => ({
+        isConfigured,
+        isActive,
+        properties
+      }))
+    }));
+  }, [rpcGateway]);
+  useEffect(() => {
+    if (applications.value && applications.value.length > 0) {
+      const filteredApplications = applications.value.reduce((acc, item) => {
+        if (item.platforms.length > 0) {
+          acc.push({
+            label: item.title,
+            value: item.code
+          });
+        }
+        return acc;
+      }, []);
+      setApplicationsOptions(filteredApplications);
+    }
+  }, [applications]);
+  const contentOptions = [{
+    label: 'Keep messages content',
+    value: 'keep'
+  }, {
+    label: 'Clear messages content',
+    value: 'clear'
+  }];
+  const {
+    watch,
+    setValue,
+    setError,
+    clearErrors,
+    handleSubmit,
+    formState: {
+      errors
+    },
+    reset
+  } = useForm({
+    defaultValues: {
+      title: `${journeyTitle} (copy)`,
+      destination: applicationsOptions.length > 0 ? [(_applicationsOptions$ = applicationsOptions.find(({
+        value
+      }) => value === applicationCode)) === null || _applicationsOptions$ === void 0 ? void 0 : _applicationsOptions$.value].filter(Boolean) : [],
+      todo: 'keep'
+    }
+  });
+  const values = watch();
+  useEffect(() => {
+    var _applicationsOptions$2;
+    reset({
+      title: `${journeyTitle} (copy)`,
+      destination: applicationsOptions.length > 0 ? [(_applicationsOptions$2 = applicationsOptions.find(({
+        value
+      }) => value === applicationCode)) === null || _applicationsOptions$2 === void 0 ? void 0 : _applicationsOptions$2.value].filter(Boolean) : [],
+      todo: 'keep'
+    });
+  }, [journeyTitle, applicationsOptions, applicationCode, reset]);
+  const onFormSubmit = handleSubmit(async data => {
+    let hasError = false;
+    if (!data.title) {
+      setError('title', {
+        message: 'Name is required'
+      });
+      hasError = true;
+    }
+    if (data.destination.length === 0) {
+      setError('destination', {
+        message: 'Project is required'
+      });
+      hasError = true;
+    }
+    if (!hasError) {
+      const {
+        todo,
+        destination,
+        title
+      } = data;
+      setIsCloning(true);
+      try {
+        await rpcGatewayJourney.journey.CloneJourneys({
+          journeyUuids: [journeyId],
+          destAppCodes: destination,
+          cloneWithContent: todo === 'keep',
+          sourceAppCode: applicationCode,
+          title
+        });
+        if (destination.length > 1 || destination.length === 1 && destination[0] !== applicationCode) {
+          trackMixpanelEvent({
+            name: 'CloneJourneyToAnotherApp'
+          });
+        }
+        onAfterClone === null || onAfterClone === void 0 || onAfterClone(destination.includes(applicationCode));
+      } finally {
+        setIsCloning(false);
+      }
+    }
+  });
+  const handleDestinationChange = newValue => {
+    if (newValue.length > 5) {
+      setError('destination', {
+        message: 'Maximum 5 projects'
+      });
+    } else {
+      setValue('destination', newValue.map(item => item.value));
+      if (newValue.length > 0) {
+        clearErrors('destination');
+      }
+    }
+  };
+  const isCloningToAnotherProject = applicationsOptions.length > 0 && (values.destination.length === 1 && values.destination[0] !== applicationCode || values.destination.length > 1);
+  const howItWorks = () => {
+    if (isCloningToAnotherProject) {
+      return values.todo === 'keep' ? 'How it works: Each project will get its own copy of presets. Editing presets applies changes across all campaigns in one project.' : 'How it works: Message content will be cleared in cloned campaigns. You need to select existing presets or create new content for your messages.';
+    } else {
+      return values.todo === 'keep' ? 'Message content will be copied to the cloned campaign. Editing presets applies changes across all campaigns in one project.' : 'Message content will be cleared in cloned campaign. You need to select an existing preset or create new content for your messages.';
+    }
+  };
+  return React.createElement(Modal, {
+    size: "medium",
+    isOpen: isOpen
+  }, React.createElement(ModalHeader, null, React.createElement(H3, null, "Clone campaign")), React.createElement(ModalBody, null, React.createElement(Vertical, {
+    "$gap": 24
+  }, React.createElement(Paragraph, null, "The campaign structure, settings, selected events, segments, and content will be copied. You can duplicate it within the current project or clone it to other projects."), React.createElement(FieldBox, {
+    error: (_errors$title = errors.title) === null || _errors$title === void 0 ? void 0 : _errors$title.message,
+    title: "Campaign name"
+  }, React.createElement(NativeInput, {
+    disabled: isCloning,
+    placeholder: "ex. Onboarding",
+    name: "title",
+    value: values.title,
+    onChange: e => {
+      setValue('title', e.target.value);
+      if (e.target.value) {
+        clearErrors('title');
+      }
+    }
+  })), React.createElement(FieldBox, {
+    title: "Destination projects",
+    error: (_errors$destination = errors.destination) === null || _errors$destination === void 0 ? void 0 : _errors$destination.message,
+    description: "Maximum 5 projects"
+  }, React.createElement(Select, {
+    isDisabled: isCloning || applications.loading,
+    isLoading: applications.loading,
+    isMulti: true,
+    options: applicationsOptions,
+    name: "destination",
+    isClearable: true,
+    menuPortalTarget: document.querySelector('body'),
+    styles: {
+      menuPortal: base => ({
+        ...base,
+        zIndex: 10001
+      })
+    },
+    onChange: handleDestinationChange,
+    value: values.destination ? applicationsOptions.filter(app => values.destination.includes(app.value)) : []
+  })), React.createElement(FieldBox, {
+    title: "What to do with the content in this campaign?",
+    error: (_errors$todo = errors.todo) === null || _errors$todo === void 0 ? void 0 : _errors$todo.message
+  }, React.createElement(Select, {
+    isDisabled: isCloning,
+    name: "todo",
+    options: contentOptions,
+    onChange: params => setValue('todo', (params === null || params === void 0 ? void 0 : params.value) ?? 'keep'),
+    value: contentOptions.find(item => item.value === values.todo),
+    menuPortalTarget: document.querySelector('body'),
+    styles: {
+      menuPortal: base => ({
+        ...base,
+        zIndex: 10001
+      })
+    }
+  }), React.createElement(Vertical, {
+    "$gap": 24
+  }, React.createElement(Paragraph, null, "How it works:", ' ', howItWorks()), isCloningToAnotherProject && values.todo === 'keep' && React.createElement(Banner, {
+    view: "ghost",
+    type: "warning",
+    title: "Preset changes don\u2019t sync across projects"
+  }))))), React.createElement(ModalFooter, null, React.createElement(Horizontal, {
+    "$justifyContent": "end",
+    "$gap": 8
+  }, React.createElement(Button, {
+    color: "secondary",
+    onClick: onCancel,
+    isDisabled: isCloning
+  }, "Cancel"), React.createElement(Button, {
+    color: "primary",
+    onClick: onFormSubmit,
+    isLoading: isCloning
+  }, "Clone"))));
+}

package/ModalCloningJourney/index.d.ts

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

package/ModalCloningJourney/index.js

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

package/ModalCloningJourney/types.d.ts

@@ -0,0 +1,23 @@
+export interface CloningJourneyValues {
+    title: string;
+    destination: string[];
+    todo: string;
+}
+export interface ApplicationPlatforms {
+    isConfigured: boolean;
+    isActive: boolean;
+    properties: Record<string, string>;
+}
+export interface Application {
+    code: string;
+    title: string;
+    iconUrl: string;
+    platforms: ApplicationPlatforms[];
+}
+export interface ModalCloningJourneyProps {
+    journeyId: string;
+    journeyTitle: string;
+    isOpen: boolean;
+    onAfterClone?: (isClonedToCurrentApp: boolean) => void;
+    onCancel: () => void;
+}

package/ModalCloningJourney/types.js

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

package/index.d.ts

@@ -11,3 +11,4 @@ export * from './RichMessageEditorSmart';
 export * from './Table';
 export * from './OpenActions';
 export * from './SystemParcel';
+export * from './ModalCloningJourney';

package/index.js

@@ -10,4 +10,5 @@ export * from './LanguagesSelector';
 export * from './RichMessageEditorSmart';
 export * from './Table';
 export * from './OpenActions';
-export * from './SystemParcel';
+export * from './SystemParcel';
+export * from './ModalCloningJourney';

package/package.json

@@ -27,6 +27,7 @@
     "@pushwoosh/kit-icons": "^2.1.6",
     "@pushwoosh/kit-typography": "^1.7.3",
     "idb-keyval": "^6.2.2",
+    "react-hook-form": "^7.68.0",
     "react-router-dom": "^5.3.4"
   },
   "devDependencies": {
@@ -52,5 +53,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.0.57"
+  "version": "1.0.59"
 }