@bikdotai/bik-component-library 0.0.867 → 0.0.868-beta.0

package/dist/esm/components/schedule-builder/ScheduleEndPicker.js

@@ -0,0 +1,105 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { COLORS as s } from "../../constants/Theme.js";
+import { BodySecondary as R } from "../TypographyStyle.js";
+import { RECURRENCE_END_MODE as e } from "./model.js";
+import { FieldColumn as u, FieldLabel as N, EndsRow as O, Row as p, RunCountInputWrapper as D, EndDateWrapper as _ } from "./ScheduleBuilder.styled.js";
+import { MAX_RECURRENCE_RUNS as m } from "./ScheduleHelper.js";
+import { RadioButton as l } from "../radioButton/RadioButton.js";
+import { Input as S } from "../input/Input.js";
+import { DatePickerWrapper as h } from "../datePicker/DatePickerWrapper.js";
+const c = s.background.inverseLight, F = ({
+  value: o,
+  onChange: t,
+  minEndDate: f,
+  "data-test": A
+}) => {
+  const n = o?.endMode ?? e.NEVER;
+  return /* @__PURE__ */ a(u, { "data-test": A, children: [
+    /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(R, { color: s.content.primary, children: "Ends" }) }),
+    /* @__PURE__ */ a(O, { children: [
+      /* @__PURE__ */ r(
+        l,
+        {
+          isActive: n === e.NEVER,
+          label: "Never",
+          value: e.NEVER,
+          onValueChange: () => t({ endMode: e.NEVER }),
+          activeColor: c,
+          skipSelectingOff: n === e.NEVER
+        }
+      ),
+      /* @__PURE__ */ a(p, { gap: 8, children: [
+        /* @__PURE__ */ r(
+          l,
+          {
+            isActive: n === e.AFTER_RUNS,
+            label: "After",
+            value: e.AFTER_RUNS,
+            onValueChange: () => t({ endMode: e.AFTER_RUNS }),
+            activeColor: c,
+            skipSelectingOff: n === e.AFTER_RUNS
+          }
+        ),
+        /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(
+          S,
+          {
+            variant: "small",
+            type: "number",
+            placeholder: String(m),
+            value: o?.endAfterRuns ? String(o.endAfterRuns) : "",
+            state: n === e.AFTER_RUNS ? "none" : "disabled",
+            onChangeText: (i) => {
+              const d = i.replace(/\D/g, "");
+              if (!d) {
+                t({ endAfterRuns: void 0 });
+                return;
+              }
+              t({
+                endAfterRuns: Math.min(
+                  Number(d),
+                  m
+                )
+              });
+            }
+          }
+        ) }),
+        /* @__PURE__ */ r(R, { color: s.content.primary, children: "runs" })
+      ] }),
+      /* @__PURE__ */ a(p, { gap: 8, children: [
+        /* @__PURE__ */ r(
+          l,
+          {
+            isActive: n === e.ON_DATE,
+            label: "On",
+            value: e.ON_DATE,
+            onValueChange: () => t({ endMode: e.ON_DATE }),
+            activeColor: c,
+            skipSelectingOff: n === e.ON_DATE
+          }
+        ),
+        /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(
+          h,
+          {
+            val: o?.endOnDate ? new Date(o.endOnDate * 1e3) : void 0,
+            disabled: n !== e.ON_DATE,
+            onChange: (i) => {
+              const d = Array.isArray(i) ? i[0] : i;
+              if (!d) return;
+              const E = new Date(d);
+              E.setHours(23, 59, 59, 0), t({
+                endMode: e.ON_DATE,
+                endOnDate: Math.floor(E.getTime() / 1e3)
+              });
+            },
+            calendarProps: { minDate: f },
+            pickerStyles: { top: 8, zIndex: 4 }
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  F as ScheduleEndPicker
+};
+//# sourceMappingURL=ScheduleEndPicker.js.map

package/dist/esm/components/schedule-builder/ScheduleEndPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScheduleEndPicker.js","sources":["../../../../src/components/schedule-builder/ScheduleEndPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { DatePickerWrapper } from '../datePicker';\nimport { Input } from '../input';\nimport { RadioButton } from '../radioButton';\nimport { BodySecondary } from '../TypographyStyle';\nimport { RECURRENCE_END_MODE, RecurrenceValue } from './model';\nimport {\n\tEndDateWrapper,\n\tEndsRow,\n\tFieldColumn,\n\tFieldLabel,\n\tRow,\n\tRunCountInputWrapper,\n} from './ScheduleBuilder.styled';\nimport { MAX_RECURRENCE_RUNS } from './ScheduleHelper';\n\n/**\n * Radios in this section read brand purple when selected. The library defaults\n * to the positive green, which is not what the design shows.\n */\nconst RADIO_ACTIVE_COLOR = COLORS.background.inverseLight;\n\nexport interface ScheduleEndPickerProps {\n\tvalue: RecurrenceValue;\n\tonChange: (patch: Partial<RecurrenceValue>) => void;\n\t/** Earliest selectable end date — normally the series' own start date. */\n\tminEndDate?: Date;\n\t'data-test'?: string;\n}\n\n/**\n * \"Never / After N runs / On <date>\".\n *\n * The run-count input and the end-date picker stay mounted and go disabled with\n * their mode rather than unmounting, so the row keeps its width and the controls\n * do not jump as the merchant switches between them.\n */\nexport const ScheduleEndPicker: React.FC<ScheduleEndPickerProps> = ({\n\tvalue,\n\tonChange,\n\tminEndDate,\n\t'data-test': dataTest,\n}) => {\n\tconst endMode = value?.endMode ?? RECURRENCE_END_MODE.NEVER;\n\n\treturn (\n\t\t<FieldColumn data-test={dataTest}>\n\t\t\t<FieldLabel>\n\t\t\t\t<BodySecondary color={COLORS.content.primary}>Ends</BodySecondary>\n\t\t\t</FieldLabel>\n\t\t\t<EndsRow>\n\t\t\t\t<RadioButton\n\t\t\t\t\tisActive={endMode === RECURRENCE_END_MODE.NEVER}\n\t\t\t\t\tlabel=\"Never\"\n\t\t\t\t\tvalue={RECURRENCE_END_MODE.NEVER}\n\t\t\t\t\tonValueChange={() => onChange({ endMode: RECURRENCE_END_MODE.NEVER })}\n\t\t\t\t\tactiveColor={RADIO_ACTIVE_COLOR}\n\t\t\t\t\t// Inert only once selected — an end mode is always required, so the\n\t\t\t\t\t// active option cannot be clicked off.\n\t\t\t\t\tskipSelectingOff={endMode === RECURRENCE_END_MODE.NEVER}\n\t\t\t\t/>\n\n\t\t\t\t<Row gap={8}>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={endMode === RECURRENCE_END_MODE.AFTER_RUNS}\n\t\t\t\t\t\tlabel=\"After\"\n\t\t\t\t\t\tvalue={RECURRENCE_END_MODE.AFTER_RUNS}\n\t\t\t\t\t\tonValueChange={() =>\n\t\t\t\t\t\t\tonChange({ endMode: RECURRENCE_END_MODE.AFTER_RUNS })\n\t\t\t\t\t\t}\n\t\t\t\t\t\tactiveColor={RADIO_ACTIVE_COLOR}\n\t\t\t\t\t\tskipSelectingOff={endMode === RECURRENCE_END_MODE.AFTER_RUNS}\n\t\t\t\t\t/>\n\t\t\t\t\t<RunCountInputWrapper>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tplaceholder={String(MAX_RECURRENCE_RUNS)}\n\t\t\t\t\t\t\tvalue={value?.endAfterRuns ? String(value.endAfterRuns) : ''}\n\t\t\t\t\t\t\tstate={\n\t\t\t\t\t\t\t\tendMode === RECURRENCE_END_MODE.AFTER_RUNS ? 'none' : 'disabled'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonChangeText={(input: string) => {\n\t\t\t\t\t\t\t\tconst digitsOnly = input.replace(/\\D/g, '');\n\t\t\t\t\t\t\t\tif (!digitsOnly) {\n\t\t\t\t\t\t\t\t\tonChange({ endAfterRuns: undefined });\n\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tendAfterRuns: Math.min(\n\t\t\t\t\t\t\t\t\t\tNumber(digitsOnly),\n\t\t\t\t\t\t\t\t\t\tMAX_RECURRENCE_RUNS,\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</RunCountInputWrapper>\n\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>runs</BodySecondary>\n\t\t\t\t</Row>\n\n\t\t\t\t<Row gap={8}>\n\t\t\t\t\t<RadioButton\n\t\t\t\t\t\tisActive={endMode === RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t\tlabel=\"On\"\n\t\t\t\t\t\tvalue={RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t\tonValueChange={() =>\n\t\t\t\t\t\t\tonChange({ endMode: RECURRENCE_END_MODE.ON_DATE })\n\t\t\t\t\t\t}\n\t\t\t\t\t\tactiveColor={RADIO_ACTIVE_COLOR}\n\t\t\t\t\t\tskipSelectingOff={endMode === RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t/>\n\t\t\t\t\t<EndDateWrapper>\n\t\t\t\t\t\t<DatePickerWrapper\n\t\t\t\t\t\t\tval={\n\t\t\t\t\t\t\t\tvalue?.endOnDate ? new Date(value.endOnDate * 1000) : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tdisabled={endMode !== RECURRENCE_END_MODE.ON_DATE}\n\t\t\t\t\t\t\tonChange={(picked: Date | Date[]) => {\n\t\t\t\t\t\t\t\tconst dateValue = Array.isArray(picked) ? picked[0] : picked;\n\t\t\t\t\t\t\t\tif (!dateValue) return;\n\t\t\t\t\t\t\t\t// End of the chosen day, so a run landing that day still fires.\n\t\t\t\t\t\t\t\tconst endOfDay = new Date(dateValue);\n\t\t\t\t\t\t\t\tendOfDay.setHours(23, 59, 59, 0);\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tendMode: RECURRENCE_END_MODE.ON_DATE,\n\t\t\t\t\t\t\t\t\tendOnDate: Math.floor(endOfDay.getTime() / 1000),\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tcalendarProps={{ minDate: minEndDate }}\n\t\t\t\t\t\t\tpickerStyles={{ top: 8, zIndex: 4 }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</EndDateWrapper>\n\t\t\t\t</Row>\n\t\t\t</EndsRow>\n\t\t</FieldColumn>\n\t);\n};\n"],"names":["RADIO_ACTIVE_COLOR","COLORS","ScheduleEndPicker","value","onChange","minEndDate","dataTest","endMode","RECURRENCE_END_MODE","jsxs","FieldColumn","jsx","FieldLabel","BodySecondary","EndsRow","RadioButton","Row","RunCountInputWrapper","Input","MAX_RECURRENCE_RUNS","input","digitsOnly","EndDateWrapper","DatePickerWrapper","picked","dateValue","endOfDay"],"mappings":"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"}

package/dist/esm/components/schedule-builder/ScheduleFrequencyPicker.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { RecurrenceValue } from './model';
+export interface ScheduleFrequencyPickerProps {
+    value: RecurrenceValue;
+    onChange: (patch: Partial<RecurrenceValue>) => void;
+    /**
+     * Width of the frequency menu. Defaults to matching its button — pass a
+     * measured width when the button sits in a narrow column and the menu should
+     * still be readable.
+     */
+    frequencyMenuWidth?: string;
+    'data-test'?: string;
+}
+/**
+ * Frequency, plus whichever "Repeat on" picker that frequency needs.
+ *
+ * Daily needs no picker, weekly needs day chips, monthly needs a preset dropdown
+ * and — for Custom — the 1-31 date grid. All three live here so a caller does not
+ * have to know which control belongs to which frequency.
+ */
+export declare const ScheduleFrequencyPicker: React.FC<ScheduleFrequencyPickerProps>;

package/dist/esm/components/schedule-builder/ScheduleFrequencyPicker.js

@@ -0,0 +1,136 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { COLORS as o } from "../../constants/Theme.js";
+import y from "../../icons/Informational/General/Info.js";
+import { ChipSelectorGroup as O } from "../chip-selector/ChipSelectorGroup.js";
+import { BodySecondary as a, BodyCaption as u } from "../TypographyStyle.js";
+import { RECURRENCE_FREQUENCY as c, MONTHLY_REPEAT_OPTION as h } from "./model.js";
+import { Column as g, FieldsRow as A, DateFieldColumn as C, FieldLabel as s, FrequencyDropdownSlot as M, FieldColumn as b, CaptionWithIcon as m, Row as W, MonthDateGridSlot as N } from "./ScheduleBuilder.styled.js";
+import { ScheduleHelper as P, getSkippedMonthCaption as Y, LAST_DAY_CHIP_VALUE as R, DAY_CHIP_OPTIONS as k, CHIP_WIDTH as v, DATE_CHIP_OPTIONS as w } from "./ScheduleHelper.js";
+import { Dropdown as T } from "../dropdown/Dropdown.js";
+const E = [
+  { label: "Daily", value: c.DAILY },
+  { label: "Weekly", value: c.WEEKLY },
+  { label: "Monthly", value: c.MONTHLY }
+], H = [
+  { label: "First", value: h.FIRST },
+  { label: "Last", value: h.LAST },
+  { label: "Custom", value: h.CUSTOM }
+], Q = ({ value: l, onChange: d, frequencyMenuWidth: L, "data-test": D }) => {
+  const i = new P(l), f = i.frequency === c.WEEKLY, p = i.frequency === c.MONTHLY, I = p && l?.monthlyRepeatOption === h.CUSTOM, S = Y(l?.datesOfMonth), _ = [
+    ...l?.datesOfMonth ?? [],
+    ...l?.lastDaySelected ? [R] : []
+  ];
+  return /* @__PURE__ */ n(g, { gap: 12, "data-test": D, children: [
+    /* @__PURE__ */ n(A, { children: [
+      /* @__PURE__ */ n(C, { children: [
+        /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Select frequency" }) }),
+        /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+          T,
+          {
+            size: "default",
+            isSearchable: !1,
+            isMultiSelect: !1,
+            options: E,
+            buttonWidth: "100%",
+            width: L || "100%",
+            placeHolderHeight: "48px",
+            placeHolder: "Select frequency",
+            value: E.find(
+              (t) => t.value === i.frequency
+            )?.label,
+            onSelect: (t) => {
+              const r = Array.isArray(t) ? t[0] : t;
+              r?.value && d({
+                frequency: r.value
+              });
+            }
+          }
+        ) })
+      ] }),
+      !f && !p && /* @__PURE__ */ e(C, { "aria-hidden": !0 }),
+      f && /* @__PURE__ */ n(b, { children: [
+        /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Repeat on" }) }),
+        /* @__PURE__ */ e(
+          O,
+          {
+            "data-test": "recurrence-days-of-week",
+            ariaLabel: "Repeat on",
+            chipWidth: v,
+            options: k,
+            value: l?.daysOfWeek ?? [],
+            onChange: (t) => d({
+              daysOfWeek: t.filter(
+                (r) => typeof r == "number"
+              )
+            })
+          }
+        ),
+        i.isMissingWeeklyDays && /* @__PURE__ */ n(m, { children: [
+          /* @__PURE__ */ e(y, { size: 16, color: o.content.negative }),
+          /* @__PURE__ */ e(u, { color: o.content.negative, children: "Select day(s) above to send this weekly recurring" })
+        ] })
+      ] }),
+      p && /* @__PURE__ */ n(b, { children: [
+        /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Repeat every" }) }),
+        /* @__PURE__ */ n(W, { gap: 8, children: [
+          /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(
+            T,
+            {
+              size: "default",
+              isSearchable: !1,
+              isMultiSelect: !1,
+              options: H,
+              buttonWidth: "100%",
+              width: "220px",
+              placeHolderHeight: "48px",
+              placeHolder: "Select",
+              value: H.find(
+                (t) => t.value === l?.monthlyRepeatOption
+              )?.label,
+              onSelect: (t) => {
+                const r = Array.isArray(t) ? t[0] : t;
+                r?.value && d({
+                  monthlyRepeatOption: r.value
+                });
+              }
+            }
+          ) }),
+          /* @__PURE__ */ e(a, { color: o.content.primary, children: "day of the month" })
+        ] })
+      ] })
+    ] }),
+    I && /* @__PURE__ */ n(N, { children: [
+      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(a, { color: o.content.primary, children: "Repeat on" }) }),
+      /* @__PURE__ */ e(
+        O,
+        {
+          "data-test": "recurrence-dates-of-month",
+          ariaLabel: "Repeat on dates",
+          chipWidth: v,
+          options: w,
+          size: "small",
+          wrap: !0,
+          value: _,
+          onChange: (t) => d({
+            datesOfMonth: t.filter(
+              (r) => typeof r == "number"
+            ),
+            lastDaySelected: t.includes(R)
+          })
+        }
+      ),
+      !!S && /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ e(y, { size: 16, color: o.content.secondary }),
+        /* @__PURE__ */ e(u, { color: o.content.secondary, children: S })
+      ] }),
+      i.isMissingMonthlyDates && /* @__PURE__ */ n(m, { children: [
+        /* @__PURE__ */ e(y, { size: 16, color: o.content.negative }),
+        /* @__PURE__ */ e(u, { color: o.content.negative, children: "Select day(s) above to send this monthly recurring" })
+      ] })
+    ] })
+  ] });
+};
+export {
+  Q as ScheduleFrequencyPicker
+};
+//# sourceMappingURL=ScheduleFrequencyPicker.js.map

package/dist/esm/components/schedule-builder/ScheduleFrequencyPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScheduleFrequencyPicker.js","sources":["../../../../src/components/schedule-builder/ScheduleFrequencyPicker.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport Info from '../../icons/Informational/General/Info';\nimport { ChipSelectorGroup } from '../chip-selector';\nimport { Dropdown, DropdownOption, SingleOption } from '../dropdown';\nimport { BodyCaption, BodySecondary } from '../TypographyStyle';\nimport {\n\tMONTHLY_REPEAT_OPTION,\n\tRECURRENCE_FREQUENCY,\n\tRecurrenceValue,\n} from './model';\nimport {\n\tCaptionWithIcon,\n\tColumn,\n\tDateFieldColumn,\n\tFieldColumn,\n\tFieldLabel,\n\tFieldsRow,\n\tFrequencyDropdownSlot,\n\tMonthDateGridSlot,\n\tRow,\n} from './ScheduleBuilder.styled';\nimport {\n\tCHIP_WIDTH,\n\tDATE_CHIP_OPTIONS,\n\tDAY_CHIP_OPTIONS,\n\tgetSkippedMonthCaption,\n\tLAST_DAY_CHIP_VALUE,\n\tScheduleHelper,\n} from './ScheduleHelper';\n\nconst FREQUENCY_OPTIONS: SingleOption[] = [\n\t{ label: 'Daily', value: RECURRENCE_FREQUENCY.DAILY },\n\t{ label: 'Weekly', value: RECURRENCE_FREQUENCY.WEEKLY },\n\t{ label: 'Monthly', value: RECURRENCE_FREQUENCY.MONTHLY },\n];\n\n/** \"Repeat every\" presets for a monthly recurrence. */\nconst MONTHLY_REPEAT_OPTIONS: SingleOption[] = [\n\t{ label: 'First', value: MONTHLY_REPEAT_OPTION.FIRST },\n\t{ label: 'Last', value: MONTHLY_REPEAT_OPTION.LAST },\n\t{ label: 'Custom', value: MONTHLY_REPEAT_OPTION.CUSTOM },\n];\n\nexport interface ScheduleFrequencyPickerProps {\n\tvalue: RecurrenceValue;\n\tonChange: (patch: Partial<RecurrenceValue>) => void;\n\t/**\n\t * Width of the frequency menu. Defaults to matching its button — pass a\n\t * measured width when the button sits in a narrow column and the menu should\n\t * still be readable.\n\t */\n\tfrequencyMenuWidth?: string;\n\t'data-test'?: string;\n}\n\n/**\n * Frequency, plus whichever \"Repeat on\" picker that frequency needs.\n *\n * Daily needs no picker, weekly needs day chips, monthly needs a preset dropdown\n * and — for Custom — the 1-31 date grid. All three live here so a caller does not\n * have to know which control belongs to which frequency.\n */\nexport const ScheduleFrequencyPicker: React.FC<\n\tScheduleFrequencyPickerProps\n> = ({ value, onChange, frequencyMenuWidth, 'data-test': dataTest }) => {\n\tconst helper = new ScheduleHelper(value);\n\tconst isWeekly = helper.frequency === RECURRENCE_FREQUENCY.WEEKLY;\n\tconst isMonthly = helper.frequency === RECURRENCE_FREQUENCY.MONTHLY;\n\tconst isCustomMonthly =\n\t\tisMonthly && value?.monthlyRepeatOption === MONTHLY_REPEAT_OPTION.CUSTOM;\n\n\tconst skippedMonthCaption = getSkippedMonthCaption(value?.datesOfMonth);\n\n\t/** The last-day sentinel rides alongside the numeric dates in one chip group. */\n\tconst monthlyChipValue: (string | number)[] = [\n\t\t...(value?.datesOfMonth ?? []),\n\t\t...(value?.lastDaySelected ? [LAST_DAY_CHIP_VALUE] : []),\n\t];\n\n\treturn (\n\t\t<Column gap={12} data-test={dataTest}>\n\t\t\t<FieldsRow>\n\t\t\t\t{/*\n          Same flex share as the Start date column above it, per the design\n          where both fields are 337px halves of the 690px row.\n        */}\n\t\t\t\t<DateFieldColumn>\n\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\tSelect frequency\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t<FrequencyDropdownSlot>\n\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t\tisSearchable={false}\n\t\t\t\t\t\t\tisMultiSelect={false}\n\t\t\t\t\t\t\toptions={FREQUENCY_OPTIONS}\n\t\t\t\t\t\t\tbuttonWidth=\"100%\"\n\t\t\t\t\t\t\twidth={frequencyMenuWidth || '100%'}\n\t\t\t\t\t\t\tplaceHolderHeight=\"48px\"\n\t\t\t\t\t\t\tplaceHolder=\"Select frequency\"\n\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\tFREQUENCY_OPTIONS.find(\n\t\t\t\t\t\t\t\t\t(option) => option.value === helper.frequency,\n\t\t\t\t\t\t\t\t)?.label\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonSelect={(\n\t\t\t\t\t\t\t\tselected: DropdownOption | DropdownOption[] | null,\n\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\tconst normalized = (\n\t\t\t\t\t\t\t\t\tArray.isArray(selected) ? selected[0] : selected\n\t\t\t\t\t\t\t\t) as SingleOption | null;\n\t\t\t\t\t\t\t\tif (!normalized?.value) return;\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tfrequency: normalized.value as RECURRENCE_FREQUENCY,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FrequencyDropdownSlot>\n\t\t\t\t</DateFieldColumn>\n\t\t\t\t{/*\n          Holds the other half of the row when no picker follows, so the\n          frequency field stays the same width as Start date instead of\n          stretching across the whole row.\n        */}\n\t\t\t\t{!isWeekly && !isMonthly && <DateFieldColumn aria-hidden />}\n\t\t\t\t{isWeekly && (\n\t\t\t\t\t<FieldColumn>\n\t\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tRepeat on\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t\t<ChipSelectorGroup\n\t\t\t\t\t\t\tdata-test=\"recurrence-days-of-week\"\n\t\t\t\t\t\t\tariaLabel=\"Repeat on\"\n\t\t\t\t\t\t\tchipWidth={CHIP_WIDTH}\n\t\t\t\t\t\t\toptions={DAY_CHIP_OPTIONS}\n\t\t\t\t\t\t\tvalue={value?.daysOfWeek ?? []}\n\t\t\t\t\t\t\tonChange={(days) =>\n\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\tdaysOfWeek: days.filter(\n\t\t\t\t\t\t\t\t\t\t(day): day is number => typeof day === 'number',\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t})\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{helper.isMissingWeeklyDays && (\n\t\t\t\t\t\t\t<CaptionWithIcon>\n\t\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.negative}>\n\t\t\t\t\t\t\t\t\tSelect day(s) above to send this weekly recurring\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</CaptionWithIcon>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</FieldColumn>\n\t\t\t\t)}\n\t\t\t\t{isMonthly && (\n\t\t\t\t\t<FieldColumn>\n\t\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tRepeat every\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t\t<Row gap={8}>\n\t\t\t\t\t\t\t<FrequencyDropdownSlot>\n\t\t\t\t\t\t\t\t<Dropdown\n\t\t\t\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t\t\t\tisSearchable={false}\n\t\t\t\t\t\t\t\t\tisMultiSelect={false}\n\t\t\t\t\t\t\t\t\toptions={MONTHLY_REPEAT_OPTIONS}\n\t\t\t\t\t\t\t\t\tbuttonWidth=\"100%\"\n\t\t\t\t\t\t\t\t\twidth=\"220px\"\n\t\t\t\t\t\t\t\t\tplaceHolderHeight=\"48px\"\n\t\t\t\t\t\t\t\t\tplaceHolder=\"Select\"\n\t\t\t\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\t\t\t\tMONTHLY_REPEAT_OPTIONS.find(\n\t\t\t\t\t\t\t\t\t\t\t(option) => option.value === value?.monthlyRepeatOption,\n\t\t\t\t\t\t\t\t\t\t)?.label\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect={(\n\t\t\t\t\t\t\t\t\t\tselected: DropdownOption | DropdownOption[] | null,\n\t\t\t\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\t\t\t\tconst normalized = (\n\t\t\t\t\t\t\t\t\t\t\tArray.isArray(selected) ? selected[0] : selected\n\t\t\t\t\t\t\t\t\t\t) as SingleOption | null;\n\t\t\t\t\t\t\t\t\t\tif (!normalized?.value) return;\n\t\t\t\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\t\t\t\tmonthlyRepeatOption:\n\t\t\t\t\t\t\t\t\t\t\t\tnormalized.value as MONTHLY_REPEAT_OPTION,\n\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FrequencyDropdownSlot>\n\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\tday of the month\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</Row>\n\t\t\t\t\t</FieldColumn>\n\t\t\t\t)}\n\t\t\t</FieldsRow>\n\n\t\t\t{isCustomMonthly && (\n\t\t\t\t<MonthDateGridSlot>\n\t\t\t\t\t<FieldLabel>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\tRepeat on\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</FieldLabel>\n\t\t\t\t\t<ChipSelectorGroup\n\t\t\t\t\t\tdata-test=\"recurrence-dates-of-month\"\n\t\t\t\t\t\tariaLabel=\"Repeat on dates\"\n\t\t\t\t\t\tchipWidth={CHIP_WIDTH}\n\t\t\t\t\t\toptions={DATE_CHIP_OPTIONS}\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\twrap\n\t\t\t\t\t\tvalue={monthlyChipValue}\n\t\t\t\t\t\tonChange={(selected) =>\n\t\t\t\t\t\t\tonChange({\n\t\t\t\t\t\t\t\tdatesOfMonth: selected.filter(\n\t\t\t\t\t\t\t\t\t(item): item is number => typeof item === 'number',\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\tlastDaySelected: selected.includes(LAST_DAY_CHIP_VALUE),\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t{!!skippedMonthCaption && (\n\t\t\t\t\t\t<CaptionWithIcon>\n\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.secondary} />\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t\t{skippedMonthCaption}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</CaptionWithIcon>\n\t\t\t\t\t)}\n\t\t\t\t\t{helper.isMissingMonthlyDates && (\n\t\t\t\t\t\t<CaptionWithIcon>\n\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.negative} />\n\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.negative}>\n\t\t\t\t\t\t\t\tSelect day(s) above to send this monthly recurring\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t</CaptionWithIcon>\n\t\t\t\t\t)}\n\t\t\t\t</MonthDateGridSlot>\n\t\t\t)}\n\t\t</Column>\n\t);\n};\n"],"names":["FREQUENCY_OPTIONS","RECURRENCE_FREQUENCY","MONTHLY_REPEAT_OPTIONS","MONTHLY_REPEAT_OPTION","ScheduleFrequencyPicker","value","onChange","frequencyMenuWidth","dataTest","helper","ScheduleHelper","isWeekly","isMonthly","isCustomMonthly","skippedMonthCaption","getSkippedMonthCaption","monthlyChipValue","LAST_DAY_CHIP_VALUE","jsxs","Column","FieldsRow","DateFieldColumn","jsx","FieldLabel","BodySecondary","COLORS","FrequencyDropdownSlot","Dropdown","option","selected","normalized","FieldColumn","ChipSelectorGroup","CHIP_WIDTH","DAY_CHIP_OPTIONS","days","day","CaptionWithIcon","Info","BodyCaption","Row","MonthDateGridSlot","DATE_CHIP_OPTIONS","item"],"mappings":"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"}

package/dist/esm/components/schedule-builder/ScheduleHelper.d.ts

@@ -0,0 +1,110 @@
+import { ChipOption } from '../chip-selector';
+import { RECURRENCE_END_MODE, RECURRENCE_FREQUENCY, RecurrenceSummary, RecurrenceValue } from './model';
+/** How many upcoming runs the preview shows by default. */
+export declare const UPCOMING_RUNS_PREVIEW_COUNT = 3;
+/** Upper bound on `endAfterRuns`, matching the 3-digit input in the design. */
+export declare const MAX_RECURRENCE_RUNS = 999;
+/**
+ * Width of a single chip in the "Repeat on" pickers.
+ *
+ * Shared by the weekly day chips and the monthly date chips: both grids are
+ * drawn to the same 44px square in the design, and the monthly grid's 337px
+ * width assumes it, so the two cannot be sized independently.
+ */
+export declare const CHIP_WIDTH = 44;
+/** Highest date the monthly grid offers. */
+export declare const MAX_DATE_OF_MONTH = 31;
+/** Sentinel chip value for "Last day of the month", which is not a date. */
+export declare const LAST_DAY_CHIP_VALUE = "LAST_DAY";
+/** Short day labels, indexed by JS day number (0 = Sunday). */
+export declare const DAY_LABELS: string[];
+/** Selecting all seven days is stored as DAILY rather than a full weekly set. */
+export declare const DAYS_IN_WEEK = 7;
+/**
+ * Chips for the weekly "Repeat on" picker. Only the first letter is shown, so
+ * each chip carries the full day name for screen readers — S, T and S repeat.
+ */
+export declare const DAY_CHIP_OPTIONS: ChipOption[];
+/**
+ * Chips for the monthly "Repeat on" grid — 1 to 31, then "Last day of the
+ * month" as an independent option rather than an alias for the 31st.
+ */
+export declare const DATE_CHIP_OPTIONS: ChipOption[];
+/**
+ * "1st", "22nd", "13th" — the 11/12/13 exception is why this is not a plain
+ * lookup on the last digit.
+ */
+export declare const ordinal: (value: number) => string;
+/**
+ * "Mon", "Mon and Tue", "Mon, Tue and Thu" — no Oxford comma, and always "and"
+ * rather than "&". Shared by the weekly day names and the monthly ordinals.
+ */
+export declare const joinList: (items: string[]) => string;
+/** Caption warning that a chosen date does not exist in every month. */
+export declare const getSkippedMonthCaption: (datesOfMonth: number[] | undefined) => string | null;
+/**
+ * Works out when a recurring campaign actually runs.
+ *
+ * Kept free of React so the schedule preview and the eventual publish payload
+ * can both read run dates from one place.
+ */
+export declare class ScheduleHelper {
+    private readonly recurrence;
+    constructor(recurrence: RecurrenceValue | undefined);
+    get frequency(): RECURRENCE_FREQUENCY;
+    get endMode(): RECURRENCE_END_MODE;
+    /** Days a weekly recurrence repeats on, as JS day indices. */
+    get daysOfWeek(): number[];
+    /** Dates a monthly recurrence repeats on (1–31). */
+    get datesOfMonth(): number[];
+    /** Whether a monthly recurrence also runs on the last day of every month. */
+    get lastDaySelected(): boolean;
+    /** A weekly recurrence cannot run until at least one day is picked. */
+    get isMissingWeeklyDays(): boolean;
+    /** A monthly recurrence needs at least one date, or the last-day option. */
+    get isMissingMonthlyDates(): boolean;
+    /** True when the current selection cannot produce any run dates. */
+    get isMissingRunDays(): boolean;
+    /**
+     * Advances a date by one day.
+     *
+     * Every frequency walks day by day so `isRunDay` decides what counts. Monthly
+     * cannot use `setMonth`: it rolls a 31st into the following month for shorter
+     * months (31 Jan -> 3 Mar), whereas a missing date must skip that month
+     * outright.
+     */
+    private addInterval;
+    /** Last calendar date of the month the given date falls in. */
+    private static lastDateOfMonth;
+    /** Whether a candidate date is one the campaign actually runs on. */
+    private isRunDay;
+    /**
+     * Next `limit` run dates from `startDate`, respecting the end rule.
+     *
+     * Returns fewer than `limit` when the recurrence ends first, which is what
+     * lets the preview stop honestly instead of inventing runs.
+     */
+    computeUpcomingRuns(startDate: Date | null | undefined, limit?: number): Date[];
+    /**
+     * The days a weekly recurrence runs on, in Monday-first display order rather
+     * than the Sunday-first order the chip values are indexed by.
+     *
+     * Mon–Fri exactly collapses to "weekday", Sat+Sun to "weekend". All seven is
+     * not handled here — that is normalised to DAILY when the day is selected.
+     */
+    private get weeklyDayPhrase();
+    private get monthlyDatePhrase();
+    /**
+     * The semibold phrase after "Repeats". Weekly and monthly name the days they
+     * run on; daily is a plain adverb.
+     */
+    private get frequencyLabel();
+    /** The text following the time, which differs per end mode. */
+    private get endClause();
+    /**
+     * Summary shown under the upcoming runs, split so the frequency and time can
+     * be rendered in semibold as the design shows:
+     * "Repeats **daily** at **10:00 AM** with no end date, you can cancel anytime."
+     */
+    buildSummary(runs: Date[]): RecurrenceSummary | null;
+}

package/dist/esm/components/schedule-builder/ScheduleHelper.js

@@ -0,0 +1,196 @@
+import { format as d } from "date-fns";
+import { RECURRENCE_FREQUENCY as a, RECURRENCE_END_MODE as u, MONTHLY_REPEAT_OPTION as D } from "./model.js";
+const E = 3, m = 999, L = 44, g = 31, M = "LAST_DAY", O = 1600, y = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], C = 7, I = y.map(
+  (t, e) => ({
+    value: e,
+    label: t.charAt(0),
+    ariaLabel: t
+  })
+), Y = [
+  ...Array.from({ length: g }, (t, e) => ({
+    value: e + 1,
+    label: String(e + 1)
+  })),
+  {
+    value: M,
+    label: "Last day of the month",
+    fitContent: !0
+  }
+], _ = [1, 2, 3, 4, 5], N = [0, 6], R = [1, 2, 3, 4, 5, 6, 0], S = {
+  29: "Skipped most Februaries.",
+  30: "Skipped in February.",
+  31: "Skipped in months without a 31st (Apr, Jun, Sep, Nov)."
+}, A = (t) => {
+  if ([11, 12, 13].includes(t % 100)) return `${t}th`;
+  switch (t % 10) {
+    case 1:
+      return `${t}st`;
+    case 2:
+      return `${t}nd`;
+    case 3:
+      return `${t}rd`;
+    default:
+      return `${t}th`;
+  }
+}, h = (t) => t.length <= 1 ? t[0] ?? "" : t.length === 2 ? `${t[0]} and ${t[1]}` : `${t.slice(0, -1).join(", ")} and ${t[t.length - 1]}`, k = (t) => {
+  const e = (t ?? []).map((n) => S[n]).filter(Boolean);
+  return e.length ? e.join(" ") : null;
+};
+class f {
+  recurrence;
+  constructor(e) {
+    this.recurrence = e ?? {};
+  }
+  get frequency() {
+    return this.recurrence.frequency ?? a.DAILY;
+  }
+  get endMode() {
+    return this.recurrence.endMode ?? u.NEVER;
+  }
+  /** Days a weekly recurrence repeats on, as JS day indices. */
+  get daysOfWeek() {
+    return this.recurrence.daysOfWeek ?? [];
+  }
+  /** Dates a monthly recurrence repeats on (1–31). */
+  get datesOfMonth() {
+    return this.recurrence.datesOfMonth ?? [];
+  }
+  /** Whether a monthly recurrence also runs on the last day of every month. */
+  get lastDaySelected() {
+    return !!this.recurrence.lastDaySelected;
+  }
+  /** A weekly recurrence cannot run until at least one day is picked. */
+  get isMissingWeeklyDays() {
+    return this.frequency === a.WEEKLY && !this.daysOfWeek.length;
+  }
+  /** A monthly recurrence needs at least one date, or the last-day option. */
+  get isMissingMonthlyDates() {
+    return this.frequency === a.MONTHLY && !this.datesOfMonth.length && !this.lastDaySelected;
+  }
+  /** True when the current selection cannot produce any run dates. */
+  get isMissingRunDays() {
+    return this.isMissingWeeklyDays || this.isMissingMonthlyDates;
+  }
+  /**
+   * Advances a date by one day.
+   *
+   * Every frequency walks day by day so `isRunDay` decides what counts. Monthly
+   * cannot use `setMonth`: it rolls a 31st into the following month for shorter
+   * months (31 Jan -> 3 Mar), whereas a missing date must skip that month
+   * outright.
+   */
+  addInterval(e) {
+    const n = new Date(e);
+    return n.setDate(n.getDate() + 1), n;
+  }
+  /** Last calendar date of the month the given date falls in. */
+  static lastDateOfMonth(e) {
+    return new Date(e.getFullYear(), e.getMonth() + 1, 0).getDate();
+  }
+  /** Whether a candidate date is one the campaign actually runs on. */
+  isRunDay(e) {
+    if (this.frequency === a.WEEKLY)
+      return this.daysOfWeek.includes(e.getDay());
+    if (this.frequency === a.MONTHLY) {
+      const n = e.getDate();
+      return this.datesOfMonth.includes(n) ? !0 : this.lastDaySelected && n === f.lastDateOfMonth(e);
+    }
+    return !0;
+  }
+  /**
+   * Next `limit` run dates from `startDate`, respecting the end rule.
+   *
+   * Returns fewer than `limit` when the recurrence ends first, which is what
+   * lets the preview stop honestly instead of inventing runs.
+   */
+  computeUpcomingRuns(e, n = E) {
+    if (!e || Number.isNaN(e.getTime())) return [];
+    if (this.isMissingRunDays) return [];
+    const s = [], { endAfterRuns: r } = this.recurrence, c = this.endMode === u.AFTER_RUNS && typeof r == "number" && r > 0 ? Math.min(r, n) : n, o = this.endMode === u.ON_DATE && this.recurrence.endOnDate ? this.recurrence.endOnDate * 1e3 : null;
+    let i = new Date(e), l = 0;
+    for (; s.length < c && l <= O && !(o !== null && i.getTime() > o); )
+      this.isRunDay(i) && s.push(new Date(i)), i = this.addInterval(i), l += 1;
+    return s;
+  }
+  /**
+   * The days a weekly recurrence runs on, in Monday-first display order rather
+   * than the Sunday-first order the chip values are indexed by.
+   *
+   * Mon–Fri exactly collapses to "weekday", Sat+Sun to "weekend". All seven is
+   * not handled here — that is normalised to DAILY when the day is selected.
+   */
+  get weeklyDayPhrase() {
+    const e = this.daysOfWeek;
+    if (!e.length) return "";
+    const n = (r) => e.length === r.length && r.every((c) => e.includes(c));
+    if (n(_)) return "weekday";
+    if (n(N)) return "weekend";
+    const s = R.filter((r) => e.includes(r)).map(
+      (r) => y[r]
+    );
+    return h(s);
+  }
+  get monthlyDatePhrase() {
+    if (this.recurrence?.monthlyRepeatOption === D.FIRST)
+      return "on the first day";
+    const e = [...this.datesOfMonth].sort((n, s) => n - s).map(A);
+    return this.lastDaySelected ? e.length ? `on the ${h([...e, "the last day"])}` : "on the last day" : e.length ? `on the ${h(e)}` : "";
+  }
+  /**
+   * The semibold phrase after "Repeats". Weekly and monthly name the days they
+   * run on; daily is a plain adverb.
+   */
+  get frequencyLabel() {
+    switch (this.frequency) {
+      case a.WEEKLY: {
+        const e = this.weeklyDayPhrase;
+        return e ? `every ${e}` : "weekly";
+      }
+      case a.MONTHLY: {
+        const e = this.monthlyDatePhrase;
+        return e ? `${e} of every month` : "monthly";
+      }
+      default:
+        return "daily";
+    }
+  }
+  /** The text following the time, which differs per end mode. */
+  get endClause() {
+    if (this.endMode === u.AFTER_RUNS) {
+      const e = this.recurrence.endAfterRuns;
+      return e ? ` and ends after ${e} ${e === 1 ? "run" : "runs"}.` : ".";
+    }
+    return this.endMode === u.ON_DATE ? this.recurrence.endOnDate ? ` and ends on ${d(
+      new Date(this.recurrence.endOnDate * 1e3),
+      "d MMM yyyy"
+    )}.` : "." : " with no end date, you can cancel anytime.";
+  }
+  /**
+   * Summary shown under the upcoming runs, split so the frequency and time can
+   * be rendered in semibold as the design shows:
+   * "Repeats **daily** at **10:00 AM** with no end date, you can cancel anytime."
+   */
+  buildSummary(e) {
+    return e.length ? {
+      frequencyLabel: this.frequencyLabel,
+      timeLabel: d(e[0], "h:mm a"),
+      tail: this.endClause
+    } : null;
+  }
+}
+export {
+  L as CHIP_WIDTH,
+  Y as DATE_CHIP_OPTIONS,
+  C as DAYS_IN_WEEK,
+  I as DAY_CHIP_OPTIONS,
+  y as DAY_LABELS,
+  M as LAST_DAY_CHIP_VALUE,
+  g as MAX_DATE_OF_MONTH,
+  m as MAX_RECURRENCE_RUNS,
+  f as ScheduleHelper,
+  E as UPCOMING_RUNS_PREVIEW_COUNT,
+  k as getSkippedMonthCaption,
+  h as joinList,
+  A as ordinal
+};
+//# sourceMappingURL=ScheduleHelper.js.map