@pushwoosh/dumb-components 1.1.87 → 1.1.88

package/FrequencyCapping/FrequencyCappingEdit.d.ts

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

package/FrequencyCapping/FrequencyCappingEdit.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { OpenIcon } from '@pushwoosh/kit-icons';
@@ -17,7 +17,8 @@ export function FrequencyCappingEdit({
   onChange,
   applicationCode,
   editGlobalClicked,
-  isInJourney = false
+  isInJourney = false,
+  isDisabled = false
 }) {
   const {
     enabled,
@@ -28,7 +29,7 @@ export function FrequencyCappingEdit({
   const cappingOption = getCappingOption(enabled, ignoreGlobalCapping);
   const isGlobalCappingDisabled = globalCapping.count === 0 && globalCapping.days === 0;
   const globalCappingLinkText = isGlobalCappingDisabled ? 'Set up' : 'Settings';
-  const onChangeFrequencyCapping = React.useCallback(value => {
+  const onChangeFrequencyCapping = useCallback(value => {
     if (value === CappingTypes.IGNORE) {
       onChange({
         ...capping,
@@ -53,7 +54,7 @@ export function FrequencyCappingEdit({
       });
     }
   }, [capping, onChange]);
-  const onSettingsChange = React.useCallback((messages, days) => {
+  const onSettingsChange = useCallback((messages, days) => {
     onChange({
       ...capping,
       messages,
@@ -70,6 +71,7 @@ export function FrequencyCappingEdit({
     title: "Frequency capping"
   }, React.createElement(Select, {
     name: "cappingOption",
+    isDisabled: isDisabled,
     options: cappingOptions,
     value: cappingOptions.find(option => option.value === cappingOption),
     onChange: newValue => onChangeFrequencyCapping(newValue.value)
@@ -79,15 +81,15 @@ export function FrequencyCappingEdit({
     days: globalCapping.days,
     isInJourney: isInJourney
   }, cappingOption === CappingTypes.GLOBAL && React.createElement(Link, {
+    target: "_blank",
     href: `/applications/${applicationCode}/message-delivery?tab=capping`,
     title: globalCappingLinkText,
-    target: "_blank",
     onClick: editGlobalClicked
   }, React.createElement(LinkWrapper, null, globalCappingLinkText, React.createElement(OpenIcon, {
     size: "small",
     view: "lined",
     as: "span"
-  })))), cappingOption === CappingTypes.CUSTOM && React.createElement(EditCappingSettings, {
+  })))), cappingOption === CappingTypes.CUSTOM && !isDisabled && React.createElement(EditCappingSettings, {
     messages: messages,
     days: days,
     onChange: onSettingsChange

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

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

package/FrequencyCapping/components/Settings/index.js

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

package/FrequencyCapping/types.d.ts

@@ -23,6 +23,7 @@ export type FrequencyCappingEditProps<T extends CappingBase> = {
     editGlobalClicked: () => void;
     applicationCode: string;
     isInJourney?: boolean;
+    isDisabled?: boolean;
 };
 export type FrequencyCappingReadonlyProps<T extends CappingBase> = {
     capping: T;

package/RadioCard/RadioCard.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { RadioCardProps } from './types';
+export declare function RadioCard(props: RadioCardProps): ReactElement;

package/RadioCard/RadioCard.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { H4, Paragraph } from '@pushwoosh/kit-typography';
+import { Radio } from '../Radio';
+import { RootBox } from './styled';
+export function RadioCard(props) {
+  const {
+    title,
+    description,
+    isActive,
+    onClick,
+    children
+  } = props;
+  return React.createElement(RootBox, {
+    isActive: isActive,
+    onClick: onClick
+  }, React.createElement(Vertical, null, React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$justifyContent": "space-between"
+  }, React.createElement(H4, null, title), React.createElement(Radio, {
+    isChecked: isActive
+  })), React.createElement(Paragraph, null, description)), children);
+}

package/RadioCard/index.d.ts

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

package/RadioCard/index.js

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

package/RadioCard/styled.d.ts

@@ -0,0 +1,65 @@
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+export declare const RootBox: 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;
+} & {
+    $padding: number;
+    $alignItems: string;
+    $bgColor: Color;
+    $borderRadius: ShapeRadius;
+    $gap: number;
+} & {
+    isActive?: boolean;
+}, "$gridAutoFlow" | "$alignItems" | "$bgColor" | "$borderRadius" | "$gap" | "$padding">;

package/RadioCard/styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const RootBox = styled(Vertical).attrs({
+  $padding: 16,
+  $alignItems: 'start',
+  $bgColor: Color.CLEAR,
+  $borderRadius: ShapeRadius.SECTION,
+  $gap: 12
+}).withConfig({
+  displayName: "RootBox",
+  componentId: "sc-tkztr1-0"
+})(["width:262px;height:100%;border:", ";box-sizing:border-box;cursor:pointer;"], ({
+  isActive
+}) => isActive ? `2px solid ${Color.PRIMARY}` : `1px solid ${Color.DIVIDER}`);

package/RadioCard/types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface RadioCardProps {
+    title: string;
+    description: string;
+    isActive?: boolean;
+    children?: ReactNode;
+    onClick: () => void;
+}

package/RadioCard/types.js

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

package/index.d.ts

@@ -16,6 +16,7 @@ export { Pagination } from './Pagination';
 export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';
 export { Radio } from './Radio';
+export { RadioCard } from './RadioCard';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton, type SortButtonParams } from './SortButton';

package/index.js

@@ -16,6 +16,7 @@ export { Pagination } from './Pagination';
 export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';
 export { Radio } from './Radio';
+export { RadioCard } from './RadioCard';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton } from './SortButton';

package/package.json

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