@pushwoosh/dumb-components 1.1.107 → 1.1.109

package/Badge/maps.d.ts

@@ -7,6 +7,7 @@ export declare const BadgeColorToColorMap: {
     purple: Color;
     sky: Color;
     locked: Color;
+    black: Color;
 };
 export declare const BadgeColorToLightColorMap: {
     gray: Color;
@@ -16,4 +17,5 @@ export declare const BadgeColorToLightColorMap: {
     purple: Color;
     sky: Color;
     locked: Color;
+    black: Color;
 };

package/Badge/maps.js

@@ -6,7 +6,8 @@ export const BadgeColorToColorMap = {
   red: Color.DANGER,
   purple: Color.EXCEPTIONAL,
   sky: Color.BRIGHT,
-  locked: Color.LOCKED
+  locked: Color.LOCKED,
+  black: Color.MAIN
 };
 export const BadgeColorToLightColorMap = {
   gray: Color.SOFT_LIGHT,
@@ -15,5 +16,6 @@ export const BadgeColorToLightColorMap = {
   red: Color.DANGER_LIGHT,
   purple: Color.EXCEPTIONAL_LIGHT,
   sky: Color.BRIGHT_LIGHT,
-  locked: Color.FROZEN
+  locked: Color.FROZEN,
+  black: Color.CLEAR
 };

package/Badge/types.d.ts

@@ -1,5 +1,5 @@
 import type { Ref, ReactNode } from 'react';
-export type BadgeColor = 'gray' | 'green' | 'orange' | 'red' | 'purple' | 'sky' | 'locked';
+export type BadgeColor = 'gray' | 'green' | 'orange' | 'red' | 'purple' | 'sky' | 'locked' | 'black';
 export type BadgeProps = Omit<JSX.IntrinsicElements['div'], 'ref'> & {
     readonly boxRef?: Ref<HTMLDivElement>;
     readonly color: BadgeColor;

package/FrequencyCapping/FrequencyCappingInApps.d.ts

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

package/FrequencyCapping/FrequencyCappingInApps.js

@@ -0,0 +1,49 @@
+import React, { useCallback } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { FieldBox } from '../FieldBox';
+import { Select } from '../Select';
+import { EditInAppCappingSettings } from './components/Settings';
+import { cappingOptions } from './constants';
+import { Container } from './styles';
+import { CappingTypes } from './types';
+export function FrequencyCappingInApps(props) {
+  const {
+    capping,
+    isDisabled,
+    onChange
+  } = props;
+  const options = cappingOptions.filter(({
+    value
+  }) => value !== CappingTypes.GLOBAL);
+  const cappingOption = capping !== null ? CappingTypes.CUSTOM : CappingTypes.IGNORE;
+  const onChangeFrequencyCapping = useCallback(value => {
+    if (value === CappingTypes.IGNORE) {
+      onChange(null);
+    }
+    if (value === CappingTypes.CUSTOM) {
+      onChange({});
+    }
+  }, [onChange]);
+  const onSettingsChange = useCallback(newCapping => {
+    onChange(newCapping);
+  }, [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",
+    isDisabled: isDisabled,
+    options: options,
+    value: options.find(option => option.value === cappingOption),
+    onChange: newValue => onChangeFrequencyCapping(newValue.value)
+  })), capping !== null && !isDisabled && React.createElement(EditInAppCappingSettings, {
+    capping: capping,
+    onChange: onSettingsChange
+  })));
+}

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

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

package/FrequencyCapping/components/Settings/EditCappingSettings.js

@@ -0,0 +1,34 @@
+import React, { useCallback } 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 = useCallback(value => {
+    onChange(value, days);
+  }, [days, onChange]);
+  const onDaysChange = 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\u00A0maximum\u00A0of"), React.createElement(NumberPicker, {
+    value: messages,
+    minValue: 1,
+    maxValue: 1000,
+    onChange: value => onMessagesChange(value)
+  }), React.createElement(Paragraph, null, "messages per"), React.createElement(NumberPicker, {
+    maxValue: 30,
+    minValue: 1,
+    value: days,
+    onChange: value => onDaysChange(value)
+  }), React.createElement(Paragraph, null, "day(s)"));
+}

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

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

package/FrequencyCapping/components/Settings/EditInAppCappingSettings.js

@@ -0,0 +1,143 @@
+import React, { useCallback } from 'react';
+import { Columns, Vertical } from '@pushwoosh/kit-helpers';
+import { Paragraph, Text } from '@pushwoosh/kit-typography';
+import { Checkbox } from '../../../Checkbox';
+import { NumberPicker } from '../../../NumberPicker';
+export function EditInAppCappingSettings(props) {
+  var _capping$total, _capping$perDays, _capping$perDays2, _capping$leastDays;
+  const {
+    capping,
+    onChange
+  } = props;
+  const hasTotal = capping.total !== undefined;
+  const hasPerDays = capping.perDays !== undefined;
+  const hasLeastDays = capping.leastDays !== undefined;
+  const onTotalToggle = useCallback(() => {
+    const next = {
+      ...capping
+    };
+    if (hasTotal) {
+      delete next.total;
+    } else {
+      next.total = {
+        count: 1
+      };
+    }
+    onChange(next);
+  }, [capping, hasTotal, onChange]);
+  const onTotalCountChange = useCallback(count => {
+    onChange({
+      ...capping,
+      total: {
+        count
+      }
+    });
+  }, [capping, onChange]);
+  const onPerDaysToggle = useCallback(() => {
+    const next = {
+      ...capping
+    };
+    if (hasPerDays) {
+      delete next.perDays;
+    } else {
+      next.perDays = {
+        count: 1,
+        days: 1
+      };
+    }
+    onChange(next);
+  }, [capping, hasPerDays, onChange]);
+  const onPerDaysCountChange = useCallback(count => {
+    onChange({
+      ...capping,
+      perDays: {
+        ...capping.perDays,
+        count
+      }
+    });
+  }, [capping, onChange]);
+  const onPerDaysDaysChange = useCallback(days => {
+    onChange({
+      ...capping,
+      perDays: {
+        ...capping.perDays,
+        days
+      }
+    });
+  }, [capping, onChange]);
+  const onLeastDaysToggle = useCallback(() => {
+    const next = {
+      ...capping
+    };
+    if (hasLeastDays) {
+      delete next.leastDays;
+    } else {
+      next.leastDays = {
+        count: 1
+      };
+    }
+    onChange(next);
+  }, [capping, hasLeastDays, onChange]);
+  const onLeastDaysCountChange = useCallback(count => {
+    onChange({
+      ...capping,
+      leastDays: {
+        count
+      }
+    });
+  }, [capping, onChange]);
+  return React.createElement(Vertical, {
+    "$gap": 8
+  }, React.createElement(Paragraph, null, "Limit frequency of displaying this In-App to a particular user"), React.createElement(Columns, {
+    "$sizes": "100px 80px auto",
+    "$alignItems": "center",
+    "$justifyContent": "start",
+    "$gap": 8
+  }, React.createElement(Checkbox, {
+    label: "Limited to",
+    isChecked: hasTotal,
+    onChange: onTotalToggle
+  }), React.createElement(NumberPicker, {
+    value: ((_capping$total = capping.total) === null || _capping$total === void 0 ? void 0 : _capping$total.count) ?? 1,
+    minValue: 1,
+    maxValue: 1000,
+    isDisabled: !hasTotal,
+    onChange: onTotalCountChange
+  }), React.createElement(Text, null, "total impressions")), React.createElement(Columns, {
+    "$sizes": "100px 80px auto 80px auto",
+    "$alignItems": "center",
+    "$justifyContent": "start",
+    "$gap": 8
+  }, React.createElement(Checkbox, {
+    label: "Limited to",
+    isChecked: hasPerDays,
+    onChange: onPerDaysToggle
+  }), React.createElement(NumberPicker, {
+    value: ((_capping$perDays = capping.perDays) === null || _capping$perDays === void 0 ? void 0 : _capping$perDays.count) ?? 1,
+    minValue: 1,
+    maxValue: 1000,
+    isDisabled: !hasPerDays,
+    onChange: onPerDaysCountChange
+  }), React.createElement(Text, null, "impressions in"), React.createElement(NumberPicker, {
+    value: ((_capping$perDays2 = capping.perDays) === null || _capping$perDays2 === void 0 ? void 0 : _capping$perDays2.days) ?? 1,
+    minValue: 1,
+    maxValue: 366,
+    isDisabled: !hasPerDays,
+    onChange: onPerDaysDaysChange
+  }), React.createElement(Text, null, "day(s)")), React.createElement(Columns, {
+    "$sizes": "100px 80px auto",
+    "$alignItems": "center",
+    "$justifyContent": "start",
+    "$gap": 8
+  }, React.createElement(Checkbox, {
+    label: "Enable",
+    isChecked: hasLeastDays,
+    onChange: onLeastDaysToggle
+  }), React.createElement(NumberPicker, {
+    value: ((_capping$leastDays = capping.leastDays) === null || _capping$leastDays === void 0 ? void 0 : _capping$leastDays.count) ?? 1,
+    minValue: 1,
+    maxValue: 366,
+    isDisabled: !hasLeastDays,
+    onChange: onLeastDaysCountChange
+  }), React.createElement(Text, null, "day(s) interval between impressions")));
+}

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

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

package/FrequencyCapping/components/Settings/index.js

@@ -1,34 +1,2 @@
-import React, { useCallback } 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 = useCallback(value => {
-    onChange(value, days);
-  }, [days, onChange]);
-  const onDaysChange = 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\u00A0maximum\u00A0of"), React.createElement(NumberPicker, {
-    value: messages,
-    minValue: 1,
-    maxValue: 1000,
-    onChange: value => onMessagesChange(value)
-  }), React.createElement(Paragraph, null, "messages per"), React.createElement(NumberPicker, {
-    maxValue: 30,
-    minValue: 1,
-    value: days,
-    onChange: value => onDaysChange(value)
-  }), React.createElement(Paragraph, null, "day(s)"));
-}
+export { EditCappingSettings } from './EditCappingSettings';
+export { EditInAppCappingSettings } from './EditInAppCappingSettings';

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

@@ -0,0 +1,10 @@
+import type { CappingInAppBase } from '../../types';
+export type EditCappingSettingsProps = {
+    messages: number;
+    days: number;
+    onChange: (messages: number, days: number) => void;
+};
+export type EditInAppCappingSettingsProps = {
+    capping: CappingInAppBase;
+    onChange: (capping: CappingInAppBase) => void;
+};

package/FrequencyCapping/components/Settings/types.js

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

package/FrequencyCapping/index.d.ts

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

package/FrequencyCapping/index.js

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

package/FrequencyCapping/styles.js

@@ -12,4 +12,4 @@ export const IconWrapper = styled(Horizontal).withConfig({
 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;"]);
+})(["display:inline-flex;align-items:center;justify-content:start;text-decoration:none;gap:4px;"]);

package/FrequencyCapping/types.d.ts

@@ -13,6 +13,18 @@ export type CappingBase = {
     days: number;
     ignoreGlobalCapping: boolean;
 };
+export type CappingInAppBase = {
+    total?: {
+        count: number;
+    };
+    perDays?: {
+        count: number;
+        days: number;
+    };
+    leastDays?: {
+        count: number;
+    };
+};
 export type FrequencyCappingEditProps<T extends CappingBase> = {
     capping: T;
     globalCapping: {
@@ -35,3 +47,8 @@ export type FrequencyCappingReadonlyProps<T extends CappingBase> = {
     editGlobalClicked: () => void;
     isInJourney?: boolean;
 };
+export type FrequencyCappingInAppsProps = {
+    capping: CappingInAppBase | null;
+    isDisabled?: boolean;
+    onChange: (newCappingState: CappingInAppBase | null) => void;
+};

package/index.d.ts

@@ -41,7 +41,7 @@ export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { RichMessageEditor, RichMessageViewer, type DynamicContent, } from './RichMessageEditor';
-export { FrequencyCappingEdit, FrequencyCappingReadonly, type LocalCapping, } from './FrequencyCapping';
+export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps, type LocalCapping, type CappingInAppBase, } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly, type SendRateBase, type SendRateEditProps, type SendRateReadonlyProps, } from './SendRate';
 export { Alert } from './Alert';
 export { ApplicationPreloader, type ApplicationPreloaderProps, } from './ApplicationPreloader';

package/index.js

@@ -41,7 +41,7 @@ export { EnhancedInput, SearchInput } from './EnhancedInput';
 export { Chip } from './Chip';
 export { RichmediaPreview, useRichmediaHtml } from './RichmediaPreview';
 export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
-export { FrequencyCappingEdit, FrequencyCappingReadonly } from './FrequencyCapping';
+export { FrequencyCappingEdit, FrequencyCappingReadonly, FrequencyCappingInApps } from './FrequencyCapping';
 export { SendRateEdit, SendRateReadonly } from './SendRate';
 export { Alert } from './Alert';
 export { ApplicationPreloader } from './ApplicationPreloader';

package/package.json

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