@pushwoosh/dumb-components 1.1.30 → 1.1.31

package/Chip/Chip.d.ts

@@ -3,6 +3,7 @@ export declare const Chip: React.ForwardRefExoticComponent<{
     $variant?: import("./Chip.types").ChipVariant;
     $selected?: boolean;
     $onClose?: React.HTMLAttributes<HTMLDivElement>["onClick"];
+    $readOnly?: boolean;
     as?: string;
 } & {
     children?: React.ReactNode | undefined;

package/Chip/Chip.js

@@ -4,6 +4,7 @@ import { ChipStyled } from './styles';
 export const Chip = forwardRef(({
   $variant = 'primary',
   $selected,
+  $readOnly,
   $onClose,
   children,
   as,
@@ -14,6 +15,7 @@ export const Chip = forwardRef(({
     "$variant": $variant,
     "$selected": $selected,
     "$closeable": !!$onClose,
+    "$readOnly": $readOnly,
     as: as,
     ...rest
   }, children, $onClose && React.createElement(CloseIcon, {

package/Chip/Chip.types.d.ts

@@ -4,5 +4,6 @@ export type ChipProps = PropsWithChildren<{
     $variant?: ChipVariant;
     $selected?: boolean;
     $onClose?: HTMLAttributes<HTMLDivElement>['onClick'];
+    $readOnly?: boolean;
     as?: string;
 }> & HTMLAttributes<HTMLDivElement>;

package/Chip/styles.d.ts

@@ -3,4 +3,5 @@ export declare const ChipStyled: import("styled-components").StyledComponent<"di
     $variant: ChipVariant;
     $selected?: boolean;
     $closeable?: boolean;
+    $readOnly?: boolean;
 }, never>;

package/Chip/styles.js

@@ -8,8 +8,20 @@ export const ChipStyled = styled.div.withConfig({
   $closeable
 }) => $closeable ? '4px' : '8px', ({
   $variant,
-  $selected
-}) => $selected ? Color.CLEAR : variants[$variant].color, ({
+  $selected,
+  $readOnly
+}) => {
+  if ($readOnly) {
+    return Color.MAIN;
+  }
+  return $selected ? Color.CLEAR : variants[$variant].color;
+}, ({
   $variant,
-  $selected
-}) => $selected ? Color.MAIN : variants[$variant].background);
+  $selected,
+  $readOnly
+}) => {
+  if ($readOnly) {
+    return Color.SOFT_LIGHT;
+  }
+  return $selected ? Color.MAIN : variants[$variant].background;
+});

package/FrequencyCapping/FrequencyCappingEdit.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type CappingBase, type FrequencyCappingEditProps } from './types';
+export declare function FrequencyCappingEdit<T extends CappingBase>({ capping, globalCapping, onChange, applicationCode }: FrequencyCappingEditProps<T>): React.JSX.Element;

package/FrequencyCapping/FrequencyCappingEdit.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { OpenIcon } from '@pushwoosh/kit-icons';
+import { Description } from './components/Description';
+import { EditCappingSettings } from './components/Settings';
+import { getCappingOption, getCappingOptions } from './helpers/getCappingOption';
+import { CappingTypes } from './types';
+import { FieldBox } from '../FieldBox';
+import { Link } from '../Link';
+import { Select } from '../Select';
+import { Container, LinkWrapper } from './styles';
+export function FrequencyCappingEdit({
+  capping,
+  globalCapping,
+  onChange,
+  applicationCode
+}) {
+  const {
+    enabled,
+    messages,
+    days,
+    ignoreGlobalCapping
+  } = capping;
+  const cappingOption = getCappingOption(enabled, ignoreGlobalCapping);
+  const isGlobalCappingDisabled = globalCapping.count === 0 && globalCapping.days === 0;
+  const globalCappingLinkText = isGlobalCappingDisabled ? 'Set up' : 'Settings';
+  const cappingOptions = getCappingOptions(isGlobalCappingDisabled);
+  const onChangeFrequencyCapping = React.useCallback(value => {
+    if (value === CappingTypes.IGNORE) {
+      onChange({
+        ...capping,
+        enabled: false,
+        ignoreGlobalCapping: true
+      });
+    }
+    if (value === CappingTypes.CUSTOM) {
+      onChange({
+        ...capping,
+        enabled: true,
+        ignoreGlobalCapping: false,
+        messages: 5,
+        days: 1
+      });
+    }
+    if (value === CappingTypes.GLOBAL) {
+      onChange({
+        ...capping,
+        enabled: false,
+        ignoreGlobalCapping: false
+      });
+    }
+  }, [capping, onChange]);
+  const onSettingsChange = React.useCallback((messages, days) => {
+    onChange({
+      ...capping,
+      messages,
+      days
+    });
+  }, [capping, onChange]);
+  return React.createElement(Container, {
+    "$padding": 16,
+    "$bgColor": Color.SOFT_LIGHT,
+    "$borderRadius": 8
+  }, React.createElement(Vertical, {
+    "$gap": 12
+  }, React.createElement(FieldBox, {
+    title: "Frequency capping"
+  }, React.createElement(Select, {
+    name: "cappingOption",
+    options: cappingOptions,
+    value: cappingOptions.find(option => option.value === cappingOption),
+    onChange: newValue => onChangeFrequencyCapping(newValue.value)
+  })), React.createElement(Description, {
+    cappingOption: cappingOption,
+    messages: globalCapping.count,
+    days: globalCapping.days
+  }, cappingOption === CappingTypes.GLOBAL && React.createElement(Link, {
+    href: `/applications/${applicationCode}/message-delivery-settings?tab=capping`,
+    title: globalCappingLinkText
+  }, React.createElement(LinkWrapper, null, globalCappingLinkText, React.createElement(OpenIcon, {
+    size: "small",
+    view: "lined",
+    as: "span"
+  })))), cappingOption === CappingTypes.CUSTOM && React.createElement(EditCappingSettings, {
+    messages: messages,
+    days: days,
+    onChange: onSettingsChange
+  })));
+}

package/FrequencyCapping/FrequencyCappingReadonly.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type CappingBase, type FrequencyCappingReadonlyProps } from './types';
+export declare function FrequencyCappingReadonly<T extends CappingBase>({ capping, globalCapping, applicationCode }: FrequencyCappingReadonlyProps<T>): React.JSX.Element;

package/FrequencyCapping/FrequencyCappingReadonly.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { OpenIcon } from '@pushwoosh/kit-icons';
+import { Link } from '../Link';
+import { getCappingOption } from './helpers/getCappingOption';
+import { getReadonlyCappingIcon, getReadonlyCappingLabel } from './helpers/getReadonlyCappingHelpers';
+import { CappingTypes } from './types';
+export function FrequencyCappingReadonly({
+  capping,
+  globalCapping,
+  applicationCode
+}) {
+  const cappingOption = getCappingOption(capping === null || capping === void 0 ? void 0 : capping.enabled, capping === null || capping === void 0 ? void 0 : capping.ignoreGlobalCapping);
+  const isGlobalCappingDisabled = globalCapping.count === 0 && globalCapping.days === 0;
+  const globalCappingLinkText = isGlobalCappingDisabled ? 'Set up' : 'Settings';
+  const label = getReadonlyCappingLabel(cappingOption, isGlobalCappingDisabled, capping, globalCapping);
+  const checkIcon = getReadonlyCappingIcon(cappingOption, isGlobalCappingDisabled);
+  return React.createElement(Vertical, {
+    "$gap": 24
+  }, React.createElement(Horizontal, {
+    "$gap": 8,
+    "$justifyContent": "start",
+    "$alignItems": "center"
+  }, checkIcon, label, cappingOption === CappingTypes.GLOBAL && React.createElement(Link, {
+    href: `/applications/${applicationCode}/message-delivery-settings?tab=capping`,
+    title: globalCappingLinkText
+  }, React.createElement(Horizontal, {
+    "$gap": 4,
+    "$justifyContent": "start",
+    "$alignItems": "center"
+  }, globalCappingLinkText, React.createElement(OpenIcon, {
+    size: "small",
+    view: "lined"
+  })))));
+}

package/FrequencyCapping/components/Condition/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type ConditionProps = {
+    messages: number;
+    days: number;
+    tooltip?: string;
+};
+export declare function Condition({ messages, days, tooltip }: ConditionProps): React.JSX.Element;
+export {};

package/FrequencyCapping/components/Condition/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { HelpRoundIcon } from '@pushwoosh/kit-icons';
+import { ChipWithinTextContainer } from './styles';
+import { Chip } from '../../../Chip';
+import { Tooltip } from '../../../Tooltip';
+export function Condition({
+  messages,
+  days,
+  tooltip
+}) {
+  return React.createElement(ChipWithinTextContainer, null, tooltip ? React.createElement(Tooltip, {
+    content: tooltip,
+    position: "top-middle"
+  }, React.createElement(Chip, {
+    "$variant": "primary",
+    "$readOnly": true,
+    as: "span"
+  }, `${messages} messages per ${days} ${days > 1 ? 'days' : 'day'}`, React.createElement(HelpRoundIcon, {
+    as: "span",
+    size: "small",
+    view: "lined",
+    color: Color.PHANTOM
+  }))) : React.createElement(Chip, {
+    "$variant": "primary",
+    "$readOnly": true,
+    as: "span"
+  }, `${messages} messages per ${days} ${days > 1 ? 'days' : 'day'}`));
+}

package/FrequencyCapping/components/Condition/styles.d.ts

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

package/FrequencyCapping/components/Condition/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const ChipWithinTextContainer = styled.span.withConfig({
+  displayName: "ChipWithinTextContainer",
+  componentId: "sc-pqahx9-0"
+})(["margin:0 8px;span{line-height:1;}"]);

package/FrequencyCapping/components/Description/index.d.ts

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from 'react';
+import { CappingTypes } from '../../types';
+type Props = {
+    cappingOption: CappingTypes;
+    messages: number;
+    days: number;
+    children?: ReactNode;
+};
+export declare function Description(props: Props): React.JSX.Element | undefined;
+export {};

package/FrequencyCapping/components/Description/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Paragraph } from '@pushwoosh/kit-typography';
+import { CappingTypes } from '../../types';
+import { Condition } from '../Condition';
+export function Description(props) {
+  const {
+    cappingOption,
+    messages,
+    days,
+    children
+  } = props;
+  if (cappingOption === CappingTypes.GLOBAL) {
+    if (messages === 0 && days === 0) {
+      return React.createElement(Paragraph, null, "To ensure you don\u2019t overwhelm your subscribers with excessive communication, consider setting up Global frequency capping.", ' ', children);
+    }
+    return React.createElement(Paragraph, null, "Under the current setup, If the user receives more than", React.createElement(Condition, {
+      messages: messages,
+      days: days
+    }), ", this message will not be delivered, and the user will proceed to the next step.", ' ', children);
+  }
+  if (cappingOption === CappingTypes.CUSTOM) {
+    return React.createElement(Paragraph, null, "Instead of Global frequency capping, the limit of sent messages you set will be used. If the subscriber exceeds the limit of received messages, they will not receive this message and will proceed to the next step.", ' ', children);
+  }
+  if (cappingOption === CappingTypes.IGNORE) {
+    return React.createElement(Paragraph, null, "The user will receive this message regardless, even if they have exceeded the set message limits for the channel. Use with caution to avoid sending too many messages.", ' ', children);
+  }
+}

package/FrequencyCapping/components/Settings/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    messages: number;
+    days: number;
+    onChange: (messages: number, days: number) => void;
+};
+export declare function EditCappingSettings(props: Props): React.JSX.Element;
+export {};

package/FrequencyCapping/components/Settings/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Paragraph } from '@pushwoosh/kit-typography';
+import { NumberPicker } from '../../../NumberPicker';
+export function EditCappingSettings(props) {
+  const {
+    messages,
+    days,
+    onChange
+  } = props;
+  const onMessagesChange = React.useCallback(value => {
+    onChange(value, days);
+  }, [days, onChange]);
+  const onDaysChange = React.useCallback(value => {
+    onChange(messages, value);
+  }, [messages, onChange]);
+  return React.createElement(Horizontal, {
+    "$gap": 12,
+    "$alignItems": "center",
+    style: {
+      gridTemplateColumns: '145px 70px 90px 70px 40px'
+    }
+  }, React.createElement(Paragraph, null, "Limit to a maximum of"), React.createElement(NumberPicker, {
+    onChange: value => onMessagesChange(value),
+    value: messages,
+    minValue: 1,
+    maxValue: 1000
+  }), React.createElement(Paragraph, null, "messages per"), React.createElement(NumberPicker, {
+    maxValue: 30,
+    minValue: 1,
+    onChange: value => onDaysChange(value),
+    value: days
+  }), React.createElement(Paragraph, null, "day(s)"));
+}

package/FrequencyCapping/helpers/getCappingOption.d.ts

@@ -0,0 +1,6 @@
+import { CappingTypes } from '../types';
+export declare const getCappingOption: (enabled: boolean, ignoreGlobalCapping: boolean) => CappingTypes;
+export declare const getCappingOptions: (isGlobalCappingDisabled: boolean) => {
+    value: CappingTypes;
+    label: string;
+}[];

package/FrequencyCapping/helpers/getCappingOption.js

@@ -0,0 +1,20 @@
+import { CappingTypes } from '../types';
+export const getCappingOption = (enabled, ignoreGlobalCapping) => {
+  if (enabled) {
+    return CappingTypes.CUSTOM;
+  }
+  if (ignoreGlobalCapping) {
+    return CappingTypes.IGNORE;
+  }
+  return CappingTypes.GLOBAL;
+};
+export const getCappingOptions = isGlobalCappingDisabled => [{
+  value: CappingTypes.GLOBAL,
+  label: `Use global frequency capping settings${isGlobalCappingDisabled ? ' (currently inactive)' : ''}`
+}, {
+  value: CappingTypes.IGNORE,
+  label: 'Send messages without global frequency capping'
+}, {
+  value: CappingTypes.CUSTOM,
+  label: 'Use custom frequency capping'
+}];

package/FrequencyCapping/helpers/getReadonlyCappingHelpers.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type CappingBase, CappingTypes } from '../types';
+export declare function getReadonlyCappingIcon(cappingOption: CappingTypes, isGlobalCappingDisabled: boolean): React.JSX.Element;
+export declare function getReadonlyCappingLabel<T extends CappingBase>(cappingOption: CappingTypes, isGlobalCappingDisabled: boolean, capping: T, globalCapping: {
+    count: number;
+    days: number;
+}): React.JSX.Element;

package/FrequencyCapping/helpers/getReadonlyCappingHelpers.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { CheckRoundIcon, CloseRoundIcon, HelpRoundIcon } from '@pushwoosh/kit-icons';
+import { Paragraph } from '@pushwoosh/kit-typography';
+import { Tooltip } from '../../Tooltip';
+import { Condition } from '../components/Condition';
+import { IconWrapper } from '../styles';
+import { CappingTypes } from '../types';
+export function getReadonlyCappingIcon(cappingOption, isGlobalCappingDisabled) {
+  if (cappingOption === CappingTypes.GLOBAL && isGlobalCappingDisabled) {
+    return React.createElement(CloseRoundIcon, {
+      size: "small",
+      view: "filled",
+      color: Color.LOCKED
+    });
+    ;
+  }
+  return React.createElement(CheckRoundIcon, {
+    size: "small",
+    view: "filled",
+    type: "fill",
+    color: Color.BRIGHT
+  });
+}
+export function getReadonlyCappingLabel(cappingOption, isGlobalCappingDisabled, capping, globalCapping) {
+  const tooltip = getReadonlyTooltip(cappingOption, isGlobalCappingDisabled);
+  if (cappingOption === CappingTypes.CUSTOM) {
+    return React.createElement(Paragraph, null, "Custom frequency capping for this message:", React.createElement(Condition, {
+      messages: capping.messages,
+      days: capping.days,
+      tooltip: tooltip
+    }));
+  }
+  if (cappingOption === CappingTypes.IGNORE) {
+    return React.createElement(Horizontal, {
+      "$alignItems": "center",
+      "$gap": 4,
+      "$justifyContent": "start"
+    }, "Send messages without global frequency capping", React.createElement(Tooltip, {
+      content: tooltip,
+      position: "top-middle"
+    }, React.createElement(IconWrapper, {
+      "$padding": "4px 0"
+    }, React.createElement(HelpRoundIcon, {
+      size: "small",
+      view: "lined"
+    }))));
+  }
+  return isGlobalCappingDisabled ? React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$gap": 4,
+    "$justifyContent": "start"
+  }, "Global frequency capping is not active for this channel", React.createElement(Tooltip, {
+    content: tooltip,
+    position: "top-middle"
+  }, React.createElement(IconWrapper, {
+    "$padding": "4px 0"
+  }, React.createElement(HelpRoundIcon, {
+    size: "small",
+    view: "lined"
+  })))) : React.createElement(Paragraph, null, "Global frequency capping:", React.createElement(Condition, {
+    messages: globalCapping.count,
+    days: globalCapping.days,
+    tooltip: tooltip
+  }));
+}
+function getReadonlyTooltip(cappingOption, isGlobalCappingDisabled) {
+  if (cappingOption === CappingTypes.CUSTOM) {
+    return 'If the subscriber exceeds the limit of received messages, they will not receive this message and will proceed to the next step';
+  }
+  if (cappingOption === CappingTypes.IGNORE) {
+    return 'The user will receive this message regardless, even if they have exceeded the set limits for the channel';
+  }
+  if (isGlobalCappingDisabled) {
+    return 'Messages will be sent without global limits because capping is currently not active for this channel';
+  }
+  return 'If the subscriber exceeds the limit of received messages, they will not receive this message and will proceed to the next step';
+}

package/FrequencyCapping/index.d.ts

@@ -0,0 +1,3 @@
+export { FrequencyCappingEdit } from './FrequencyCappingEdit';
+export { FrequencyCappingReadonly } from './FrequencyCappingReadonly';
+export type { FrequencyCappingEditProps, FrequencyCappingReadonlyProps, CappingBase as LocalCapping } from './types';

package/FrequencyCapping/index.js

@@ -0,0 +1,2 @@
+export { FrequencyCappingEdit } from './FrequencyCappingEdit';
+export { FrequencyCappingReadonly } from './FrequencyCappingReadonly';

package/FrequencyCapping/styles.d.ts

@@ -0,0 +1,113 @@
+export declare const Container: 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;
+}, "$gridAutoFlow">;
+export declare const IconWrapper: 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;
+}, "$gridAutoFlow">;
+export declare const LinkWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

package/FrequencyCapping/styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+export const Container = styled(Vertical).withConfig({
+  displayName: "Container",
+  componentId: "sc-1z3915-0"
+})(["max-width:560px;"]);
+export const IconWrapper = styled(Horizontal).withConfig({
+  displayName: "IconWrapper",
+  componentId: "sc-1z3915-1"
+})(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);
+export const LinkWrapper = styled.span.withConfig({
+  displayName: "LinkWrapper",
+  componentId: "sc-1z3915-2"
+})(["display:inline-flex;gap:4px;align-items:center;justify-content:start;text-decoration:none;"]);

package/FrequencyCapping/types.d.ts

@@ -0,0 +1,32 @@
+export declare enum CappingTypes {
+    GLOBAL = "global",
+    IGNORE = "ignore",
+    CUSTOM = "custom"
+}
+export type CappingOption = {
+    label: string;
+    value: CappingTypes;
+};
+export type CappingBase = {
+    enabled: boolean;
+    messages: number;
+    days: number;
+    ignoreGlobalCapping: boolean;
+};
+export type FrequencyCappingEditProps<T extends CappingBase> = {
+    capping: T;
+    globalCapping: {
+        count: number;
+        days: number;
+    };
+    onChange: (newCappingState: T) => void;
+    applicationCode: string;
+};
+export type FrequencyCappingReadonlyProps<T extends CappingBase> = {
+    capping: T;
+    globalCapping: {
+        count: number;
+        days: number;
+    };
+    applicationCode: string;
+};

package/FrequencyCapping/types.js

@@ -0,0 +1,6 @@
+export var CappingTypes;
+(function (CappingTypes) {
+  CappingTypes["GLOBAL"] = "global";
+  CappingTypes["IGNORE"] = "ignore";
+  CappingTypes["CUSTOM"] = "custom";
+})(CappingTypes || (CappingTypes = {}));

package/SendRate/SendRateEdit.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type SendRateBase } from './types';
+export type SendRateEditProps<T extends SendRateBase> = {
+    sendRate: T;
+    globalSendRate: {
+        count: number;
+        seconds: number;
+    };
+    onChange: (newSendRateState: T) => void;
+    applicationCode: string;
+    minValue: number;
+    maxValue: number;
+};
+export declare function SendRateEdit<T extends SendRateBase>({ sendRate, globalSendRate, onChange, applicationCode, minValue, maxValue }: SendRateEditProps<T>): React.JSX.Element;

package/SendRate/SendRateEdit.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { OpenIcon } from '@pushwoosh/kit-icons';
+import { Description } from './components/Description';
+import { EditSendRateSettings } from './components/Settings';
+import { getSendRateOptions } from './helpers/getSendRateOptions';
+import { FieldBox } from '../FieldBox';
+import { Link } from '../Link';
+import { Select } from '../Select';
+import { Container, LinkWrapper } from './styles';
+export function SendRateEdit({
+  sendRate,
+  globalSendRate,
+  onChange,
+  applicationCode,
+  minValue,
+  maxValue
+}) {
+  const {
+    sendRate: count,
+    policy
+  } = sendRate;
+  const isGlobalSendRateDisabled = globalSendRate.count === 0 && globalSendRate.count === 0;
+  const globalSendRateLinkText = isGlobalSendRateDisabled ? 'Set up' : 'Settings';
+  const sendRateOptions = getSendRateOptions(isGlobalSendRateDisabled);
+  const onChangeSendRate = React.useCallback(value => {
+    if (value === 'CUSTOM') {
+      onChange({
+        ...sendRate,
+        policy: value,
+        sendRate: minValue
+      });
+    } else {
+      onChange({
+        ...sendRate,
+        policy: value
+      });
+    }
+  }, [onChange, sendRate, minValue]);
+  const onSettingsChange = React.useCallback(count => {
+    onChange({
+      ...sendRate,
+      sendRate: count
+    });
+  }, [sendRate, onChange]);
+  return React.createElement(Container, {
+    "$padding": 16,
+    "$bgColor": Color.SOFT_LIGHT,
+    "$borderRadius": 8
+  }, React.createElement(Vertical, {
+    "$gap": 12
+  }, React.createElement(FieldBox, {
+    title: "Send rate"
+  }, React.createElement(Select, {
+    name: "sendRateOption",
+    options: sendRateOptions,
+    value: sendRateOptions.find(option => option.value === policy),
+    onChange: newValue => onChangeSendRate(newValue.value)
+  })), React.createElement(Description, {
+    sendRateOption: policy,
+    messages: globalSendRate.count,
+    seconds: globalSendRate.seconds
+  }, policy === 'GLOBAL' && React.createElement(Link, {
+    href: `/applications/${applicationCode}/message-delivery-settings?tab=sendRate`,
+    title: globalSendRateLinkText
+  }, React.createElement(LinkWrapper, null, globalSendRateLinkText, React.createElement(OpenIcon, {
+    size: "small",
+    view: "lined",
+    as: "span"
+  })))), policy === 'CUSTOM' && React.createElement(EditSendRateSettings, {
+    messages: count,
+    onChange: onSettingsChange,
+    minValue: minValue,
+    maxValue: maxValue
+  })));
+}

package/SendRate/SendRateReadonly.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type SendRateBase } from './types';
+export type SendRateReadonlyProps<T extends SendRateBase> = {
+    sendRate: T;
+    globalSendRate: {
+        count: number;
+        seconds: number;
+    };
+    applicationCode: string;
+};
+export declare function SendRateReadonly<T extends SendRateBase>({ sendRate, globalSendRate, applicationCode }: SendRateReadonlyProps<T>): React.JSX.Element;

package/SendRate/SendRateReadonly.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { OpenIcon } from '@pushwoosh/kit-icons';
+import { Link } from '../Link';
+import { getReadonlySendRateIcon, getReadonlySendRateLabel } from './helpers/getReadonlySendRateHelpers';
+export function SendRateReadonly({
+  sendRate,
+  globalSendRate,
+  applicationCode
+}) {
+  const {
+    policy
+  } = sendRate;
+  const isGlobalSendRateDisabled = globalSendRate.count === 0 && globalSendRate.seconds === 0;
+  const globalSendRateLinkText = isGlobalSendRateDisabled ? 'Set up' : 'Settings';
+  const label = getReadonlySendRateLabel(sendRate, isGlobalSendRateDisabled, globalSendRate);
+  const checkIcon = getReadonlySendRateIcon(policy, isGlobalSendRateDisabled);
+  return React.createElement(Vertical, {
+    "$gap": 24
+  }, React.createElement(Horizontal, {
+    "$gap": 8,
+    "$justifyContent": "start",
+    "$alignItems": "center"
+  }, checkIcon, label, policy === 'GLOBAL' && React.createElement(Link, {
+    href: `/applications/${applicationCode}/message-delivery-settings?tab=sendRate`,
+    title: globalSendRateLinkText
+  }, React.createElement(Horizontal, {
+    "$gap": 4,
+    "$justifyContent": "start",
+    "$alignItems": "center"
+  }, globalSendRateLinkText, React.createElement(OpenIcon, {
+    size: "small",
+    view: "lined"
+  })))));
+}

package/SendRate/components/Condition/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type ConditionProps = {
+    messages: number;
+    tooltip?: string;
+};
+export declare function Condition({ messages }: ConditionProps): React.JSX.Element;
+export {};

package/SendRate/components/Condition/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChipWithinTextContainer } from './styles';
+import { Chip } from '../../../Chip';
+export function Condition({
+  messages
+}) {
+  return React.createElement(ChipWithinTextContainer, null, React.createElement(Chip, {
+    "$variant": "primary",
+    "$readOnly": true,
+    as: "span"
+  }, `${messages} messages per 1 sec`));
+}

package/SendRate/components/Condition/styles.d.ts

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

package/SendRate/components/Condition/styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const ChipWithinTextContainer = styled.span.withConfig({
+  displayName: "ChipWithinTextContainer",
+  componentId: "sc-1emj3bf-0"
+})(["margin:0 8px;span{line-height:1;}"]);

package/SendRate/components/Description/index.d.ts

@@ -0,0 +1,10 @@
+import React, { type ReactNode } from 'react';
+import { type SendRatePolicy } from '../../types';
+type DescriptionProps = {
+    sendRateOption: SendRatePolicy;
+    messages: number;
+    seconds: number;
+    children?: ReactNode;
+};
+export declare function Description(props: DescriptionProps): React.JSX.Element | undefined;
+export {};

package/SendRate/components/Description/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Paragraph } from '@pushwoosh/kit-typography';
+import { Condition } from '../Condition';
+export function Description(props) {
+  const {
+    sendRateOption,
+    messages,
+    seconds,
+    children
+  } = props;
+  if (sendRateOption === 'GLOBAL') {
+    if (messages === 0 && seconds === 0) {
+      return React.createElement(Paragraph, null, "To ensure you don\u2019t overload your systems or backend during high-volume campaigns, consider setting up Global send rate control.", ' ', children);
+    }
+    return React.createElement(Paragraph, null, "This message will use the Global send rate limit of", React.createElement(Condition, {
+      messages: messages
+    }), "to help reduce backend load.", ' ', children);
+  }
+  if (sendRateOption === 'CUSTOM') {
+    return React.createElement(Paragraph, null, "Instead of using the Global send rate, a custom delivery speed will be applied. Messages will be sent at the rate defined below.", ' ', children);
+  }
+  if (sendRateOption === 'IGNORE') {
+    return React.createElement(Paragraph, null, "This message will be sent as fast as possible, regardless of any Global send rate limits. Use with caution to avoid overloading your backend or creating delivery spikes.", ' ', children);
+  }
+}

package/SendRate/components/Settings/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type Props = {
+    messages: number;
+    onChange: (messages: number) => void;
+    minValue: number;
+    maxValue: number;
+};
+export declare function EditSendRateSettings(props: Props): React.JSX.Element;
+export {};

package/SendRate/components/Settings/index.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Paragraph } from '@pushwoosh/kit-typography';
+import { NumberPicker } from '../../../NumberPicker';
+export function EditSendRateSettings(props) {
+  const {
+    messages,
+    onChange,
+    minValue,
+    maxValue
+  } = props;
+  const onMessagesChange = React.useCallback(value => {
+    onChange(value);
+  }, [onChange]);
+  return React.createElement(Horizontal, {
+    "$gap": 12,
+    "$alignItems": "center",
+    style: {
+      gridTemplateColumns: '145px 70px 150px'
+    }
+  }, React.createElement(Paragraph, null, "Limit to a maximum of"), React.createElement(NumberPicker, {
+    onChange: value => onMessagesChange(value),
+    value: messages,
+    minValue: minValue,
+    maxValue: maxValue
+  }), React.createElement(Paragraph, null, "messages per 1 sec"));
+}

package/SendRate/helpers/getReadonlySendRateHelpers.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type SendRateBase, type SendRatePolicy } from '../types';
+export declare function getReadonlySendRateIcon(sendRateOption: SendRatePolicy, isGlobalSendRateDisabled: boolean): React.JSX.Element;
+export declare function getReadonlySendRateLabel<T extends SendRateBase>(sendRateOption: T, isGlobalSendRateDisabled: boolean, globalSendRate: {
+    count: number;
+    seconds: number;
+}): React.JSX.Element;

package/SendRate/helpers/getReadonlySendRateHelpers.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { CheckRoundIcon, CloseRoundIcon, HelpRoundIcon } from '@pushwoosh/kit-icons';
+import { Paragraph } from '@pushwoosh/kit-typography';
+import { Tooltip } from '../../Tooltip';
+import { Condition } from '../components/Condition';
+import { IconWrapper } from '../styles';
+export function getReadonlySendRateIcon(sendRateOption, isGlobalSendRateDisabled) {
+  if (sendRateOption === 'GLOBAL' && isGlobalSendRateDisabled) {
+    return React.createElement(CloseRoundIcon, {
+      size: "small",
+      view: "filled",
+      color: Color.LOCKED
+    });
+    ;
+  }
+  return React.createElement(CheckRoundIcon, {
+    size: "small",
+    view: "filled",
+    type: "fill",
+    color: Color.BRIGHT
+  });
+}
+export function getReadonlySendRateLabel(sendRateOption, isGlobalSendRateDisabled, globalSendRate) {
+  const {
+    policy,
+    sendRate
+  } = sendRateOption;
+  const tooltip = getReadonlyTooltip(policy, isGlobalSendRateDisabled);
+  if (policy === 'CUSTOM') {
+    return React.createElement(Paragraph, null, "Custom send rate for this message:", React.createElement(Condition, {
+      messages: sendRate
+    }));
+  }
+  if (policy === 'IGNORE') {
+    return React.createElement(Horizontal, {
+      "$alignItems": "center",
+      "$gap": 4,
+      "$justifyContent": "start"
+    }, "Send messages without send rate", React.createElement(Tooltip, {
+      content: tooltip,
+      position: "top-middle"
+    }, React.createElement(IconWrapper, {
+      "$padding": "4px 0"
+    }, React.createElement(HelpRoundIcon, {
+      size: "small",
+      view: "lined"
+    }))));
+  }
+  return isGlobalSendRateDisabled ? React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$gap": 4,
+    "$justifyContent": "start"
+  }, "Global send rate is not active for this channel", React.createElement(Tooltip, {
+    content: tooltip,
+    position: "top-middle"
+  }, React.createElement(IconWrapper, {
+    "$padding": "4px 0"
+  }, React.createElement(HelpRoundIcon, {
+    size: "small",
+    view: "lined"
+  })))) : React.createElement(Paragraph, null, "Global send rate:", React.createElement(Condition, {
+    messages: globalSendRate.count
+  }));
+}
+function getReadonlyTooltip(sendRateOption, isGlobalSendRateDisabled) {
+  if (sendRateOption === 'CUSTOM') {
+    return '';
+  }
+  if (sendRateOption === 'IGNORE') {
+    return 'Messages will be sent without rate limits, if possible, because no send rate is applied to this message';
+  }
+  if (isGlobalSendRateDisabled) {
+    return 'Messages will be sent as fast as possible because the global send rate limit is currently not active for this channel';
+  }
+  return '';
+}

package/SendRate/helpers/getSendRateOptions.d.ts

@@ -0,0 +1,2 @@
+import { type SendRateOption } from '../types';
+export declare const getSendRateOptions: (isGlobalSendRateDisabled: boolean) => SendRateOption[];

package/SendRate/helpers/getSendRateOptions.js

@@ -0,0 +1,10 @@
+export const getSendRateOptions = isGlobalSendRateDisabled => [{
+  value: 'GLOBAL',
+  label: `Use global send rate settings${isGlobalSendRateDisabled ? ' (currently inactive)' : ''}`
+}, {
+  value: 'IGNORE',
+  label: 'Send messages without send rate'
+}, {
+  value: 'CUSTOM',
+  label: 'Use custom send rate'
+}];

package/SendRate/index.d.ts

@@ -0,0 +1,2 @@
+export { SendRateEdit, type SendRateEditProps } from './SendRateEdit';
+export { SendRateReadonly, type SendRateReadonlyProps } from './SendRateReadonly';

package/SendRate/index.js

@@ -0,0 +1,2 @@
+export { SendRateEdit } from './SendRateEdit';
+export { SendRateReadonly } from './SendRateReadonly';

package/SendRate/styles.d.ts

@@ -0,0 +1,113 @@
+export declare const Container: 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;
+}, "$gridAutoFlow">;
+export declare const IconWrapper: 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;
+}, "$gridAutoFlow">;
+export declare const LinkWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;

package/SendRate/styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Color } from '@pushwoosh/kit-constants';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+export const Container = styled(Vertical).withConfig({
+  displayName: "Container",
+  componentId: "sc-18un4me-0"
+})(["max-width:560px;"]);
+export const IconWrapper = styled(Horizontal).withConfig({
+  displayName: "IconWrapper",
+  componentId: "sc-18un4me-1"
+})(["color:", ";&:hover{color:", ";cursor:pointer;}"], Color.PHANTOM, Color.PRIMARY_HOVER);
+export const LinkWrapper = styled.span.withConfig({
+  displayName: "LinkWrapper",
+  componentId: "sc-18un4me-2"
+})(["display:inline-flex;gap:4px;align-items:center;justify-content:start;text-decoration:none;"]);

package/SendRate/types.d.ts

@@ -0,0 +1,9 @@
+export type SendRatePolicy = 'UNKNOWN' | 'GLOBAL' | 'CUSTOM' | 'IGNORE';
+export type SendRateBase<K extends SendRatePolicy = SendRatePolicy> = {
+    sendRate: number;
+    policy: K;
+};
+export type SendRateOption = {
+    label: string;
+    value: SendRatePolicy;
+};

package/SendRate/types.js

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

package/index.d.ts

@@ -36,4 +36,6 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent } from './RichMessageEditor';
+export { FrequencyCappingEdit, FrequencyCappingReadonly, type LocalCapping } from './FrequencyCapping';
+export { SendRateEdit, SendRateReadonly } from './SendRate';
 export { Alert } from './Alert';

package/index.js

@@ -36,4 +36,6 @@ export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
+export { FrequencyCappingEdit, FrequencyCappingReadonly } from './FrequencyCapping';
+export { SendRateEdit, SendRateReadonly } from './SendRate';
 export { Alert } from './Alert';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.30",
+  "version": "1.1.31",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",