@pushwoosh/dumb-components 1.1.119 → 1.1.120

package/FrequencyCapping/FrequencyCappingInApps.js

@@ -1,30 +1,56 @@
 import React, { useCallback } 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 { EditInAppCappingSettings } from './components/Settings';
+import { getCappingOption } from './helpers/getCappingOption';
+import { CappingTypes } from './types';
 import { FieldBox } from '../FieldBox';
+import { Link } from '../Link';
 import { Select } from '../Select';
-import { EditInAppCappingSettings } from './components/Settings';
 import { cappingOptions } from './constants';
-import { Container } from './styles';
-import { CappingTypes } from './types';
+import { Container, LinkWrapper } from './styles';
 export function FrequencyCappingInApps(props) {
   const {
     capping,
-    isDisabled,
-    onChange
+    globalCapping,
+    onChange,
+    editGlobalClicked,
+    applicationCode,
+    isInJourney = false,
+    isDisabled = false
   } = props;
-  const options = cappingOptions.filter(({
-    value
-  }) => value !== CappingTypes.GLOBAL);
-  const cappingOption = capping !== null ? CappingTypes.CUSTOM : CappingTypes.IGNORE;
+  const {
+    enabled,
+    ignoreGlobalCapping
+  } = capping;
+  const cappingOption = getCappingOption(enabled, ignoreGlobalCapping);
+  const isGlobalCappingDisabled = globalCapping.count === 0 && globalCapping.days === 0;
+  const globalCappingLinkText = isGlobalCappingDisabled ? 'Set up' : 'Settings';
   const onChangeFrequencyCapping = useCallback(value => {
     if (value === CappingTypes.IGNORE) {
-      onChange(null);
+      onChange({
+        ...capping,
+        enabled: false,
+        ignoreGlobalCapping: true
+      });
     }
     if (value === CappingTypes.CUSTOM) {
-      onChange({});
+      onChange({
+        ...capping,
+        enabled: true,
+        ignoreGlobalCapping: false
+      });
     }
-  }, [onChange]);
+    if (value === CappingTypes.GLOBAL) {
+      onChange({
+        ...capping,
+        enabled: false,
+        ignoreGlobalCapping: false
+      });
+    }
+  }, [capping, onChange]);
   const onSettingsChange = useCallback(newCapping => {
     onChange(newCapping);
   }, [onChange]);
@@ -39,10 +65,25 @@ export function FrequencyCappingInApps(props) {
   }, React.createElement(Select, {
     name: "cappingOption",
     isDisabled: isDisabled,
-    options: options,
-    value: options.find(option => option.value === cappingOption),
+    options: cappingOptions,
+    value: cappingOptions.find(option => option.value === cappingOption),
     onChange: newValue => onChangeFrequencyCapping(newValue.value)
-  })), capping !== null && !isDisabled && React.createElement(EditInAppCappingSettings, {
+  })), React.createElement(Description, {
+    cappingOption: cappingOption,
+    messages: globalCapping.count,
+    days: globalCapping.days,
+    isInJourney: isInJourney,
+    variant: "in-app"
+  }, cappingOption === CappingTypes.GLOBAL && React.createElement(Link, {
+    target: "_blank",
+    href: `/applications/${applicationCode}/message-delivery?tab=capping`,
+    title: globalCappingLinkText,
+    onClick: editGlobalClicked
+  }, React.createElement(LinkWrapper, null, globalCappingLinkText, React.createElement(OpenIcon, {
+    size: "small",
+    view: "lined",
+    as: "span"
+  })))), cappingOption === CappingTypes.CUSTOM && !isDisabled && React.createElement(EditInAppCappingSettings, {
     capping: capping,
     onChange: onSettingsChange
   })));

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

@@ -1,9 +1,8 @@
 import React from 'react';
 type ChipFrequencyCappingProps = {
-    messages: number;
-    days: number;
+    text: string;
     tooltip?: string;
     $inText?: boolean;
 };
-export declare function ChipFrequencyCapping({ messages, days, tooltip, $inText }: ChipFrequencyCappingProps): React.JSX.Element;
+export declare function ChipFrequencyCapping({ text, tooltip, $inText }: ChipFrequencyCappingProps): React.JSX.Element;
 export {};

package/FrequencyCapping/components/Condition/index.js

@@ -5,8 +5,7 @@ import { ChipWithinTextContainer } from './styles';
 import { Chip } from '../../../Chip';
 import { Tooltip } from '../../../Tooltip';
 export function ChipFrequencyCapping({
-  messages,
-  days,
+  text,
   tooltip,
   $inText = false
 }) {
@@ -19,7 +18,7 @@ export function ChipFrequencyCapping({
     "$variant": "primary",
     "$readOnly": true,
     as: "span"
-  }, `${messages} messages per ${days} ${days > 1 ? 'days' : 'day'}`, React.createElement(HelpRoundIcon, {
+  }, text, React.createElement(HelpRoundIcon, {
     as: "span",
     size: "small",
     view: "lined",
@@ -28,5 +27,5 @@ export function ChipFrequencyCapping({
     "$variant": "primary",
     "$readOnly": true,
     as: "span"
-  }, messages === 0 && days === 0 ? 'unlimited' : `${messages} messages per ${days} ${days > 1 ? 'days' : 'day'}`));
+  }, text));
 }

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

@@ -1,11 +1,12 @@
 import React, { type ReactNode } from 'react';
-import { CappingTypes } from '../../types';
+import { type CappingTypes } from '../../types';
 type Props = {
     cappingOption: CappingTypes;
     messages: number;
     days: number;
     children?: ReactNode;
     isInJourney: boolean;
+    variant?: 'message' | 'in-app';
 };
-export declare function Description(props: Props): React.JSX.Element | undefined;
+export declare function Description(props: Props): React.JSX.Element;
 export {};

package/FrequencyCapping/components/Description/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Paragraph } from '@pushwoosh/kit-typography';
-import { CappingTypes } from '../../types';
+import { getDescriptionMessages } from '../../helpers/getDescriptionMessages';
 import { ChipFrequencyCapping } from '../Condition';
 export function Description(props) {
   const {
@@ -8,27 +8,22 @@ export function Description(props) {
     messages,
     days,
     children,
-    isInJourney
+    isInJourney,
+    variant = 'message'
   } = props;
-  if (cappingOption === CappingTypes.GLOBAL) {
-    if (messages === 0 && days === 0) {
-      return React.createElement(Paragraph, null, "This message will use an", React.createElement(ChipFrequencyCapping, {
-        days: 0,
-        messages: 0,
-        "$inText": true
-      }), "global frequency capping because limit isn\u2019t set.", ' ', children);
-    }
-    return React.createElement(Paragraph, null, "Under the current setup, If the user receives more than", React.createElement(ChipFrequencyCapping, {
-      messages: messages,
-      days: days,
-      "$inText": true
-    }), `, this message will not be delivered${isInJourney ? ', 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${isInJourney ? ', 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);
-  }
+  const {
+    prefix,
+    chip,
+    suffix
+  } = getDescriptionMessages({
+    cappingOption,
+    variant,
+    messages,
+    days,
+    isInJourney
+  });
+  return React.createElement(Paragraph, null, prefix, chip && React.createElement(ChipFrequencyCapping, {
+    text: chip,
+    "$inText": true
+  }), suffix, ' ', children);
 }

package/FrequencyCapping/helpers/getCappingChipText.d.ts

@@ -0,0 +1,3 @@
+type Unit = 'message' | 'in-app';
+export declare function getCappingChipText(messages: number, days: number, unit?: Unit): string;
+export {};

package/FrequencyCapping/helpers/getCappingChipText.js

@@ -0,0 +1,18 @@
+const unitLabels = {
+  message: {
+    singular: 'message',
+    plural: 'messages'
+  },
+  'in-app': {
+    singular: 'in-app',
+    plural: 'in-apps'
+  }
+};
+export function getCappingChipText(messages, days, unit = 'message') {
+  if (messages === 0 && days === 0) {
+    return 'unlimited';
+  }
+  const unitLabel = messages === 1 ? unitLabels[unit].singular : unitLabels[unit].plural;
+  const daysLabel = days > 1 ? 'days' : 'day';
+  return `${messages} ${unitLabel} per ${days} ${daysLabel}`;
+}

package/FrequencyCapping/helpers/getDescriptionMessages.d.ts

@@ -0,0 +1,16 @@
+import { CappingTypes } from '../types';
+type Variant = 'message' | 'in-app';
+type Params = {
+    cappingOption: CappingTypes;
+    variant: Variant;
+    messages: number;
+    days: number;
+    isInJourney: boolean;
+};
+export type DescriptionMessages = {
+    prefix: string;
+    chip?: string;
+    suffix?: string;
+};
+export declare function getDescriptionMessages(params: Params): DescriptionMessages;
+export {};

package/FrequencyCapping/helpers/getDescriptionMessages.js

@@ -0,0 +1,66 @@
+import { CappingTypes } from '../types';
+import { getCappingChipText } from './getCappingChipText';
+export function getDescriptionMessages(params) {
+  const {
+    cappingOption
+  } = params;
+  if (cappingOption === CappingTypes.GLOBAL) {
+    return getGlobalMessages(params);
+  }
+  if (cappingOption === CappingTypes.CUSTOM) {
+    return getCustomMessages(params);
+  }
+  return getIgnoreMessages();
+}
+function getGlobalMessages({
+  variant,
+  messages,
+  days,
+  isInJourney
+}) {
+  const isUnset = messages === 0 && days === 0;
+  if (variant === 'in-app') {
+    if (isUnset) {
+      return {
+        prefix: 'This in-app will use a global frequency capping because limit isn’t set.'
+      };
+    }
+    return {
+      prefix: 'Under the current setup, If the user receives more than',
+      chip: getCappingChipText(messages, days, 'in-app'),
+      suffix: 'this in-app will not be delivered.'
+    };
+  }
+  if (isUnset) {
+    return {
+      prefix: 'This message will use an',
+      chip: getCappingChipText(0, 0),
+      suffix: 'global frequency capping because limit isn’t set.'
+    };
+  }
+  const journeySuffix = isInJourney ? ', and the user will proceed to the next step' : '';
+  return {
+    prefix: 'Under the current setup, If the user receives more than',
+    chip: getCappingChipText(messages, days),
+    suffix: `, this message will not be delivered${journeySuffix}.`
+  };
+}
+function getCustomMessages({
+  variant,
+  isInJourney
+}) {
+  if (variant === 'in-app') {
+    return {
+      prefix: 'Instead of Global frequency capping, the limit of shown in-apps you set will be used. ' + 'If the subscriber exceeds the limit of received in-apps, they will not see the in-app again.'
+    };
+  }
+  const journeySuffix = isInJourney ? ', and will proceed to the next step' : '';
+  return {
+    prefix: '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${journeySuffix}.`
+  };
+}
+function getIgnoreMessages() {
+  return {
+    prefix: '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.'
+  };
+}

package/FrequencyCapping/helpers/getReadonlyCappingHelpers.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { HelpRoundIcon } from '@pushwoosh/kit-icons';
+import { getCappingChipText } from './getCappingChipText';
 import { Tooltip } from '../../Tooltip';
 import { ChipFrequencyCapping } from '../components/Condition';
 import { IconWrapper } from '../styles';
@@ -9,8 +10,7 @@ export function getReadonlyCappingLabel(cappingOption, isGlobalCappingDisabled,
   const tooltip = getReadonlyTooltip(cappingOption, isInJourney);
   if (cappingOption === CappingTypes.CUSTOM) {
     return React.createElement(React.Fragment, null, "Custom frequency capping for this message:", React.createElement(ChipFrequencyCapping, {
-      messages: capping.messages,
-      days: capping.days,
+      text: getCappingChipText(capping.messages, capping.days),
       tooltip: tooltip
     }));
   }
@@ -30,11 +30,9 @@ export function getReadonlyCappingLabel(cappingOption, isGlobalCappingDisabled,
     }))));
   }
   return isGlobalCappingDisabled ? React.createElement(React.Fragment, null, "Global frequency capping:", React.createElement(ChipFrequencyCapping, {
-    days: 0,
-    messages: 0
+    text: getCappingChipText(0, 0)
   }), "because limit isn\u2019t set") : React.createElement(React.Fragment, null, "Global frequency capping:", React.createElement(ChipFrequencyCapping, {
-    messages: globalCapping.count,
-    days: globalCapping.days,
+    text: getCappingChipText(globalCapping.count, globalCapping.days),
     tooltip: tooltip
   }));
 }

package/FrequencyCapping/types.d.ts

@@ -14,6 +14,8 @@ export type CappingBase = {
     ignoreGlobalCapping: boolean;
 };
 export type CappingInAppBase = {
+    enabled: boolean;
+    ignoreGlobalCapping: boolean;
     total?: {
         count: number;
     };
@@ -48,7 +50,14 @@ export type FrequencyCappingReadonlyProps<T extends CappingBase> = {
     isInJourney?: boolean;
 };
 export type FrequencyCappingInAppsProps = {
-    capping: CappingInAppBase | null;
+    capping: CappingInAppBase;
+    globalCapping: {
+        count: number;
+        days: number;
+    };
+    onChange: (newCappingState: CappingInAppBase) => void;
+    editGlobalClicked: () => void;
+    applicationCode: string;
+    isInJourney?: boolean;
     isDisabled?: boolean;
-    onChange: (newCappingState: CappingInAppBase | null) => void;
 };

package/NumberPicker/NumberPicker.js

@@ -85,6 +85,7 @@ export function NumberPicker({
     value: localValue,
     placeholder: placeholder,
     isDisabled: isDisabled,
+    disabled: isDisabled,
     onChange: handleChange,
     onKeyDown: handleKeyDown,
     onKeyUp: resetAutoDiff,

package/package.json

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