@pushwoosh/smart-components-kit 1.0.13 → 1.0.14

package/CampaignsConfigurationDrawer/CampaignsConfigurationDrawer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type CampaignsConfigurationDrawerProps } from './types';
+export declare function CampaignsConfigurationDrawer(props: CampaignsConfigurationDrawerProps): React.JSX.Element;

package/CampaignsConfigurationDrawer/CampaignsConfigurationDrawer.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Drawer, DrawerBody, DrawerHeader } from '@pushwoosh/dumb-components';
+import { Columns, Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { CloseIcon, EmailIcon, MobileIcon, PushIcon, SmsIcon, WhatsappIcon } from '@pushwoosh/kit-icons';
+import { H1, H3 } from '@pushwoosh/kit-typography';
+import { Card } from './components/Card';
+import { CloseButtonWrap } from './styled';
+export function CampaignsConfigurationDrawer(props) {
+  const {
+    applicationCode,
+    segmentCode,
+    isOpen,
+    onClose
+  } = props;
+  return React.createElement(Drawer, {
+    size: "medium",
+    isOpen: isOpen,
+    onClose: onClose
+  }, React.createElement(DrawerHeader, null, React.createElement(Horizontal, {
+    "$justifyContent": "space-between",
+    "$alignItems": "center",
+    "$margin": "0 0 4px"
+  }, React.createElement(H1, null, "Send message"), React.createElement(CloseButtonWrap, {
+    onClick: onClose
+  }, React.createElement(CloseIcon, {
+    size: "medium"
+  })))), React.createElement(DrawerBody, null, React.createElement(Vertical, {
+    "$gap": "32px"
+  }, React.createElement(Horizontal, {
+    "$gap": "6px"
+  }, React.createElement(Card, {
+    title: "One-time push notification",
+    description: "Select or create content, adjust notifications, and choose the best time to send.",
+    icon: PushIcon,
+    href: `/applications/${applicationCode}/one-time-messages/send?type=push&segment=${segmentCode}`
+  }), React.createElement(Card, {
+    title: "One-time email",
+    description: "Select content, set a subject, personalize sender info, and choose a send time.",
+    icon: EmailIcon,
+    href: `/applications/${applicationCode}/one-time-messages/send?type=email&segment=${segmentCode}`
+  })), React.createElement(Vertical, {
+    "$gap": "8px"
+  }, React.createElement(H3, null, "Advanced campaign based by channel"), React.createElement(Columns, {
+    "$sizes": "1fr 1fr",
+    "$gap": "6px"
+  }, React.createElement(Card, {
+    title: "Push notification based",
+    description: "Create a targeted campaign for users and plan follow-up for unopened messages.",
+    icon: PushIcon,
+    href: `/journeys/${applicationCode}/create?channel=push&segment=${segmentCode}`
+  }), React.createElement(Card, {
+    title: "Email based",
+    description: "Create tailored communication strategies with follow-ups based on user actions.",
+    icon: EmailIcon,
+    href: `/journeys/${applicationCode}/create?channel=email&segment=${segmentCode}`
+  }), React.createElement(Card, {
+    title: "In-app based",
+    description: "Display the banner to the intended users and monitor their subsequent actions.",
+    icon: MobileIcon,
+    href: `/journeys/${applicationCode}/create?channel=inapp&segment=${segmentCode}`
+  }), React.createElement(Card, {
+    title: "SMS based",
+    description: "Automate SMS delivery for quick, reliable messaging.",
+    icon: SmsIcon,
+    href: `/journeys/${applicationCode}/create?channel=sms&segment=${segmentCode}`
+  }), React.createElement(Card, {
+    title: "WhatsApp based",
+    description: "Engage your audience on WhatsApp with rich, personalized messages.",
+    icon: WhatsappIcon,
+    href: `/journeys/${applicationCode}/create?channel=whatsapp&segment=${segmentCode}`
+  }))))));
+}

package/CampaignsConfigurationDrawer/components/Card/Card.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type CardProps } from './types';
+export declare function Card(props: CardProps): React.JSX.Element;

package/CampaignsConfigurationDrawer/components/Card/Card.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Text } from '@pushwoosh/kit-typography';
+import { Container, IconWrap, Title } from './styled';
+export function Card(props) {
+  const {
+    title,
+    description,
+    icon: Icon,
+    href
+  } = props;
+  return React.createElement(Container, {
+    href: href
+  }, React.createElement(IconWrap, null, React.createElement(Icon, {
+    color: Color.PRIMARY,
+    size: "medium",
+    view: "lined",
+    type: "mobile",
+    direction: "right"
+  })), React.createElement(Title, null, title), React.createElement(Text, {
+    "$variant": "footnote",
+    "$color": Color.LOCKED
+  }, description));
+}

package/CampaignsConfigurationDrawer/components/Card/index.d.ts

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

package/CampaignsConfigurationDrawer/components/Card/index.js

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

package/CampaignsConfigurationDrawer/components/Card/styled.d.ts

@@ -0,0 +1,4 @@
+import { H4 } from '@pushwoosh/kit-typography';
+export declare const Container: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const IconWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<typeof H4, any, {}, never>;

package/CampaignsConfigurationDrawer/components/Card/styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius, Shadow } from '@pushwoosh/kit-constants';
+import { H4 } from '@pushwoosh/kit-typography';
+export const Container = styled.a.withConfig({
+  displayName: "Container",
+  componentId: "sc-l13y9a-0"
+})(["text-decoration:none;border:1px solid ", ";border-radius:", ";padding:16px;background-color:", ";box-shadow:none;min-width:250px;cursor:pointer;transition:box-shadow 0.15s ease-in;&:hover{box-shadow:", ";text-decoration:none;}&:active{box-shadow:none;opacity:0.5;text-decoration:none;}"], Color.DIVIDER, ShapeRadius.SECTION, Color.CLEAR, Shadow.LARGE);
+export const IconWrap = styled.div.withConfig({
+  displayName: "IconWrap",
+  componentId: "sc-l13y9a-1"
+})(["padding:4px;border-radius:", ";background-color:", ";margin-bottom:8px;width:fit-content;"], ShapeRadius.CONTROL, Color.BRIGHT_LIGHT);
+export const Title = styled(H4).withConfig({
+  displayName: "Title",
+  componentId: "sc-l13y9a-2"
+})(["margin-bottom:2px;color:", ";"], Color.MAIN);

package/CampaignsConfigurationDrawer/components/Card/types.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentType } from 'react';
+export type CardProps = {
+    title: string;
+    description: string;
+    icon: ComponentType<{
+        color?: string;
+        size: 'small' | 'medium';
+        view: 'lined' | 'filled';
+        type: 'desktop' | 'mobile' | 'web' | 'email';
+        direction: 'down' | 'left' | 'right' | 'up';
+    }>;
+    href: string;
+};

package/CampaignsConfigurationDrawer/components/Card/types.js

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

package/CampaignsConfigurationDrawer/index.d.ts

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

package/CampaignsConfigurationDrawer/index.js

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

package/CampaignsConfigurationDrawer/styled.d.ts

@@ -0,0 +1 @@
+export declare const CloseButtonWrap: import("styled-components").StyledComponent<"div", any, {}, never>;

package/CampaignsConfigurationDrawer/styled.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+export const CloseButtonWrap = styled.div.withConfig({
+  displayName: "CloseButtonWrap",
+  componentId: "sc-1kf0icq-0"
+})(["padding:6px;cursor:pointer;border-radius:", ";background-color:transparent;&:hover{background-color:", ";color:", ";}"], ShapeRadius.CONTROL, Color.BRIGHT_LIGHT, Color.PRIMARY_HOVER);

package/CampaignsConfigurationDrawer/types.d.ts

@@ -0,0 +1,6 @@
+export type CampaignsConfigurationDrawerProps = {
+    isOpen: boolean;
+    applicationCode: string;
+    segmentCode: string;
+    onClose: () => void;
+};

package/CampaignsConfigurationDrawer/types.js

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

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -49,5 +49,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "1.0.13"
+  "version": "1.0.14"
 }