@eifi1/ui-kit 0.35.0 → 0.37.0

package/src/notifications/notification-types-setting.tsx

@@ -0,0 +1,309 @@
+import { useId, useState } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type { LabelOverride } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
+import { Card } from "../components/card";
+import { Select } from "../components/select";
+import { Skeleton } from "../components/skeleton";
+import { Switch } from "../components/switch";
+import { SectionLabel } from "../components/text";
+import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes";
+import { SettingsCardTitle } from "../settings/settings-heading";
+import { settle, useMounted } from "../account/account-parts";
+import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts";
+import type { WriteOverlay } from "./notification-parts";
+import type { NotificationsLabels } from "./notifications-labels";
+import type {
+  DigestCadence,
+  NotificationSettingsPatch,
+  NotificationSwitches,
+  NotificationTypeEntry,
+  NotificationTypeGroup,
+  NotificationTypesValue,
+} from "./notification-types";
+
+/** Is this a development build? Dead code in a consumer's production bundle; on under
+ *  vitest, where a type the card cannot draw is a bug a test should fail on (as
+ *  `SettingsSection`'s catalogue check). */
+function devChecks(): boolean {
+  return Boolean(import.meta.env?.DEV);
+}
+
+export interface NotificationTypesSettingProps<Id extends string = string>
+  extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
+  /** The app's words for its types, in its order. Where an app types its ids. */
+  types: readonly NotificationTypeEntry<Id>[];
+  /** The `GET`'s `types` (§3.2); `undefined` while the first load runs. */
+  value: NotificationTypesValue | undefined;
+  /** The settings are loading. */
+  loading?: boolean;
+  /**
+   * Save one change — `PATCH /notifications/settings` with this body: one switch per
+   * call (`{types: {digest: {app: true}}}`), or `{digest_cadence}`. The switch shows its
+   * new state while the call runs and goes back if it rejects; hand the card the
+   * PATCH's answer (or refetch) when it resolves.
+   */
+  onChange: (patch: NotificationSettingsPatch<Id>) => Promise<unknown> | void;
+  /** Headings over the types, in the app's words (keksdose's three). Without them, one
+   *  list in the order of `types`. In development every type the server answered must
+   *  be in one. */
+  groups?: readonly NotificationTypeGroup<Id>[];
+  /** The digest type and the account's cadence: a cadence `Select` under that type
+   *  while it is on. */
+  digest?: { type: Id; cadence: DigestCadence };
+  /** Under a type while it is on — keksdose's low-balance threshold field. */
+  renderExtra?: (id: Id) => ReactNode;
+  /** The account's address is unverified: every e-mail switch says
+   *  `labels.emailUnverified` under it (decision 16). */
+  emailUnverified?: boolean;
+  /** Nothing can be changed (the switches stay readable). */
+  disabled?: boolean;
+  /** The app's own words for a failed save, or `undefined` for the kit's `failed`. */
+  describeError?: (error: unknown) => ReactNode | undefined;
+  labels?: LabelOverride<NotificationsLabels>;
+}
+
+/** One drawn type: the app's words and the server's switches. */
+interface Row<Id extends string> {
+  entry: NotificationTypeEntry<Id>;
+  switches: NotificationSwitches;
+}
+
+/** A switch's key in the write overlay. */
+const switchKey = (id: string, channel: "app" | "email") => `${id}.${channel}`;
+const CADENCE_KEY = "digest_cadence";
+
+/**
+ * What the person hears about, and how (docs/notifications-harmonization.md §2.1–§2.3,
+ * §4.2): one row per type the SERVER answered, the app's words on it, a switch for "in
+ * the app" and "By e-mail" under it where the type offers mail. Where the app has no
+ * "in the app" channel (Kurvenschmiede), the e-mail switch is the row's own, with the
+ * type's label.
+ *
+ * **The server's list is the only list.** The card keeps no defaults and no list of
+ * types: it draws what `value` holds, in the order of `groups`, else of `types`. A type
+ * the app names that the server did not answer is not drawn (kastlan's tenant receives
+ * neither of its types). In development a type the server answered with no entry in
+ * `types`, or in no group when `groups` is given, throws — keksdose's compile-time
+ * `_EVERY_TYPE_IS_GROUPED`, now at run time, since the list is the server's.
+ *
+ * **Each flip saves at once**, one switch per call; the switch shows its new state while
+ * the call runs and goes back if it rejects, with the failure said under the card. The
+ * digest's cadence and the app's extra field (`renderExtra`) show under their type while
+ * it is on.
+ *
+ * Under a write lock the switches are `commit` controls exempt from billing: a lapsed
+ * plan never keeps a person from turning notifications off (billing §12.13).
+ */
+export function NotificationTypesSetting<Id extends string = string>({
+  types,
+  value,
+  loading,
+  onChange,
+  groups,
+  digest,
+  renderExtra,
+  emailUnverified = false,
+  disabled = false,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}: NotificationTypesSettingProps<Id>) {
+  const labels = useNotificationsLabels(labelsProp);
+  const overlay = useWriteOverlay<boolean>(value);
+  const cadenceOverlay = useWriteOverlay<DigestCadence>(digest?.cadence);
+  const [failure, setFailure] = useState<ReactNode>(null);
+  const mounted = useMounted();
+  const groupId = useId();
+
+  const answered = value ? Object.keys(value) : [];
+  const entries = new Map(types.map((entry) => [entry.id as string, entry]));
+  if (value && devChecks()) {
+    const unnamed = answered.filter((id) => !entries.has(id));
+    if (unnamed.length) {
+      throw new Error(
+        `NotificationTypesSetting: the server answered ${unnamed.map((id) => `"${id}"`).join(", ")} with no entry in \`types\` — give every type the server can send its words.`,
+      );
+    }
+    if (groups) {
+      const grouped = new Set<string>(groups.flatMap((group) => group.types));
+      const loose = answered.filter((id) => !grouped.has(id));
+      if (loose.length) {
+        throw new Error(
+          `NotificationTypesSetting: ${loose.map((id) => `"${id}"`).join(", ")} is in no group — a type in no group is drawn nowhere, and could not be turned off.`,
+        );
+      }
+    }
+  }
+
+  const rowOf = (id: Id): Row<Id> | null => {
+    const switches = value?.[id];
+    const entry = entries.get(id);
+    if (!switches || !entry || (switches.app === null && switches.email === null)) return null;
+    return { entry, switches };
+  };
+  const rowsOf = (ids: readonly Id[]) => ids.map(rowOf).filter((row): row is Row<Id> => row !== null);
+
+  const shown = (id: string, channel: "app" | "email", server: boolean): boolean => {
+    const key = switchKey(id, channel);
+    return overlay.get(key) ?? server;
+  };
+  /** The row's own switch: `app`, or `email` where the app has no `app` channel. */
+  const rowOn = ({ entry, switches }: Row<Id>) =>
+    switches.app !== null
+      ? shown(entry.id, "app", switches.app)
+      : shown(entry.id, "email", switches.email === true);
+
+  const save = <V,>(key: string, patch: NotificationSettingsPatch<Id>, which: WriteOverlay<V>, next: V) => {
+    if (which.pending(key)) return;
+    setFailure(null);
+    which.set(key, next);
+    settle(() => onChange(patch)).then(
+      () => {
+        if (mounted.current) which.settle(key, true);
+      },
+      (error: unknown) => {
+        if (!mounted.current) return;
+        which.settle(key, false);
+        setFailure(describeFailure(describeError?.(error), labels.failed));
+      },
+    );
+  };
+
+  const flip = (id: Id, channel: "app" | "email", on: boolean) =>
+    save(
+      switchKey(id, channel),
+      { types: { [id]: { [channel]: on } } as NotificationSettingsPatch<Id>["types"] },
+      overlay,
+      on,
+    );
+
+  const cadence = cadenceOverlay.get(CADENCE_KEY) ?? digest?.cadence;
+
+  const unverifiedLine = emailUnverified ? (
+    <span className="block" data-email-unverified="">
+      {labels.emailUnverified}
+    </span>
+  ) : null;
+
+  const renderRow = (row: Row<Id>) => {
+    const { entry, switches } = row;
+    const on = rowOn(row);
+    const emailOnly = switches.app === null;
+    const both = !emailOnly && switches.email !== null;
+    const cadenceSelect =
+      on && digest?.type === entry.id && cadence ? (
+        <Select
+          label={labels.digestCadence}
+          value={cadence}
+          disabled={disabled}
+          commit={COMMIT_EXCEPT_BILLING}
+          onChange={(event) => {
+            const next = event.target.value as DigestCadence;
+            if (next !== cadence) save(CADENCE_KEY, { digest_cadence: next }, cadenceOverlay, next);
+          }}
+          className="max-w-44"
+        >
+          <option value="weekly">{labels.digestWeekly}</option>
+          <option value="monthly">{labels.digestMonthly}</option>
+        </Select>
+      ) : null;
+    const extra = on ? renderExtra?.(entry.id) : null;
+    const description =
+      emailOnly && unverifiedLine ? (
+        <>
+          {entry.description !== undefined && <span className="block">{entry.description}</span>}
+          {unverifiedLine}
+        </>
+      ) : (
+        entry.description
+      );
+    return (
+      <div
+        key={entry.id}
+        data-notification-type={entry.id}
+        // A row with two switches is a group named by its type, so "By e-mail" is heard
+        // with the type it belongs to.
+        role={both ? "group" : undefined}
+        aria-label={both ? entry.label : undefined}
+        className="space-y-2"
+      >
+        <Switch
+          label={entry.label}
+          description={description}
+          checked={on}
+          disabled={disabled}
+          commit={COMMIT_EXCEPT_BILLING}
+          onCheckedChange={(next) => flip(entry.id, emailOnly ? "email" : "app", next)}
+        />
+        {both && (
+          <div className="ps-4">
+            <Switch
+              size="sm"
+              label={labels.byEmail}
+              description={unverifiedLine ?? undefined}
+              checked={shown(entry.id, "email", switches.email === true)}
+              disabled={disabled}
+              commit={COMMIT_EXCEPT_BILLING}
+              onCheckedChange={(next) => flip(entry.id, "email", next)}
+            />
+          </div>
+        )}
+        {(cadenceSelect || hasContent(extra)) && (
+          <div className="ps-4 space-y-2">
+            {cadenceSelect}
+            {extra}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  let body: ReactNode;
+  if (loading || value === undefined) {
+    body = <Skeleton lines={3} label={labels.typesLoading} />;
+  } else if (groups) {
+    const drawn = groups
+      .map((group) => ({ group, rows: rowsOf(group.types) }))
+      .filter(({ rows }) => rows.length > 0);
+    body =
+      drawn.length === 0 ? (
+        <p className={CARD_DESCRIPTION_CLASS}>{labels.typesEmpty}</p>
+      ) : (
+        drawn.map(({ group, rows }) => {
+          const headingId = `${groupId}-${group.id}`;
+          return (
+            <div key={group.id} role="group" aria-labelledby={headingId} className="space-y-3">
+              <SectionLabel as="div" size="xs" id={headingId}>
+                {group.label}
+              </SectionLabel>
+              {rows.map(renderRow)}
+            </div>
+          );
+        })
+      );
+  } else {
+    const rows = rowsOf(types.map((entry) => entry.id));
+    body =
+      rows.length === 0 ? (
+        <p className={CARD_DESCRIPTION_CLASS}>{labels.typesEmpty}</p>
+      ) : (
+        <div className="space-y-3">{rows.map(renderRow)}</div>
+      );
+  }
+
+  return (
+    <Card {...rest} className={cn("p-4 space-y-3", className)}>
+      <div>
+        <SettingsCardTitle>{labels.typesTitle}</SettingsCardTitle>
+        <div className={CARD_DESCRIPTION_CLASS}>{labels.typesDescription}</div>
+      </div>
+      {body}
+      <FailureLine>{failure}</FailureLine>
+    </Card>
+  );
+}

package/src/notifications/notification-types.ts

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+
+/**
+ * The shapes the notification cards share (docs/notifications-harmonization.md §3.2,
+ * §3.5, §4.2): the server's `GET /notifications/settings` answer, the parts of its
+ * `PATCH` the cards send, one push device, and the app's words for its types.
+ *
+ * Types only — the kit keeps no list of notification types and no defaults (§2.1): the
+ * server's registry is the one list, and the cards draw what it answers.
+ */
+
+/** The digest's cadence, one for the account (§2.5): Monday, or the 1st, in its zone. */
+export type DigestCadence = "weekly" | "monthly";
+
+/**
+ * One type's two switches in the `GET` (§3.2). `null` where the type does not offer
+ * that channel: `email` for a type with no mail, `app` in an app with no "in the app"
+ * channel (Kurvenschmiede: `{app: null, email: true}`). An unset switch already reads as
+ * its default — the server fills it in.
+ */
+export interface NotificationSwitches {
+  app: boolean | null;
+  email: boolean | null;
+}
+
+/** The `GET`'s `types`: every type the account can receive, in the registry's order. */
+export type NotificationTypesValue = Readonly<Record<string, NotificationSwitches>>;
+
+/**
+ * The app's words for one of its types — where an app TYPES its ids, so its own maps
+ * (keksdose's inbox icons) are keyed on the same list (§5.1). The kit draws the type
+ * only when the server answered it.
+ */
+export interface NotificationTypeEntry<Id extends string = string> {
+  id: Id;
+  /** The switch's label: what the person hears about. */
+  label: string;
+  /** The line under it, attached to the switch. */
+  description?: ReactNode;
+}
+
+/** A heading over some of the types, in the app's words (keksdose's "Budget", "Scans &
+ *  sharing", "Summaries & news"). */
+export interface NotificationTypeGroup<Id extends string = string> {
+  /** A stable key for the group. */
+  id: string;
+  label: ReactNode;
+  /** The group's types, in the order they are drawn. */
+  types: readonly Id[];
+}
+
+/**
+ * The parts of `PATCH /notifications/settings` (§3.2) the cards send. Omitted keeps; a
+ * type's `null` puts both its switches back to their defaults; `quiet_hours_*: null`
+ * clears a time. One switch per call from the types card (`{types: {digest: {app:
+ * true}}}`), or `{digest_cadence}`; quiet hours send a time, with the device's zone the
+ * first time; the zone picker sends `{timezone}`.
+ */
+export interface NotificationSettingsPatch<Id extends string = string> {
+  types?: Partial<Record<Id, { app?: boolean; email?: boolean } | null>>;
+  digest_cadence?: DigestCadence;
+  quiet_hours_start?: string | null;
+  quiet_hours_end?: string | null;
+  timezone?: string;
+}
+
+/** One registered push device, as `GET /notifications/devices` lists it (§3.5), oldest
+ *  first. The owner gets the whole endpoint, which marks "this device". */
+export interface PushDeviceItem<Id extends string | number = string> {
+  id: Id;
+  endpoint: string;
+  /** The browser's user agent at registration; `null` when it sent none. */
+  user_agent: string | null;
+  /** ISO date-time. */
+  created_at: string;
+  /** ISO date-time of the last delivery the push service accepted, or `null`. */
+  last_success_at: string | null;
+  /** Failed deliveries in a row; the server removes the device at 10. */
+  failure_count: number;
+}

package/src/notifications/notifications-labels.ts

@@ -0,0 +1,238 @@
+// The words of the notification cards (docs/notifications-harmonization.md §4.2), in a
+// module with no component code: the English catalogue (src/i18n/defaults.ts) imports
+// them without the components, so `en` loads as one chunk like the other languages
+// (0.34, KS U8). The cards read it through `useKitLabels("notifications", …)`.
+
+/** The ten IANA regions `Intl` lists zones under — keksdose's `tz_region_*` — in the
+ *  kit's words. A region a runtime adds later keeps its IANA name. */
+export interface NotificationRegionLabels {
+  Africa: string;
+  America: string;
+  Antarctica: string;
+  Arctic: string;
+  Asia: string;
+  Atlantic: string;
+  Australia: string;
+  Europe: string;
+  Indian: string;
+  Pacific: string;
+}
+
+/**
+ * Every string the notification parts render — the `notifications` namespace of
+ * `<UiKitProvider labels>`, overridable per instance through `labels`: the types card,
+ * quiet hours and the zone picker, this device's push, the device list, and the
+ * unsubscribe page. Cancel is `common.cancel`.
+ */
+export interface NotificationsLabels {
+  /* ── The types card ─────────────────────────────────────────────────── */
+  /** The types card's title. */
+  typesTitle: string;
+  /** The line under it. */
+  typesDescription: string;
+  /** The e-mail switch under a type that offers mail. */
+  byEmail: string;
+  /** Under every e-mail switch while the account's address is unverified (decision 16):
+   *  no notification mail goes to an unverified address. */
+  emailUnverified: string;
+  /** The digest's cadence select. */
+  digestCadence: string;
+  digestWeekly: string;
+  digestMonthly: string;
+  /** While the settings load. */
+  typesLoading: string;
+  /** The server answered no types for this account. */
+  typesEmpty: string;
+
+  /* ── Quiet hours ────────────────────────────────────────────────────── */
+  quietTitle: string;
+  /** The line under the title; `inbox`: the app keeps an inbox, which a held push still
+   *  reaches. */
+  quietDescription: (inbox: boolean) => string;
+  /** The start time's label. */
+  quietFrom: string;
+  /** The end time's label. */
+  quietUntil: string;
+  /** One time set, the other not: quiet hours fail open until both are. */
+  quietIncomplete: string;
+  /** The zone picker's label. */
+  timeZone: string;
+  /** Given the device's zone, as the picker names it, when it differs from the one the
+   *  server applies. */
+  deviceZone: (zone: string) => string;
+  /** The button that takes the device's zone. */
+  useDeviceZone: string;
+  /** The zone picker's region headings. */
+  regions: NotificationRegionLabels;
+
+  /* ── This device ────────────────────────────────────────────────────── */
+  pushTitle: string;
+  pushDescription: string;
+  /** The browser has no push. */
+  unsupported: string;
+  /** iOS outside the installed app, given the app's name. */
+  iosInstall: (app: string) => string;
+  /** The server has no VAPID keys. */
+  notConfigured: string;
+  /** The browser's permission is denied. */
+  blocked: string;
+  /** This device gets notifications for the signed-in account. */
+  on: string;
+  off: string;
+  /** This browser's subscription belongs to another account. */
+  otherAccount: string;
+  enable: string;
+  disable: string;
+  sendTest: string;
+  /** Turning on did not finish (the permission prompt dismissed, a refusal). */
+  enableFailed: string;
+  /** No service worker, or one that is not ready in 10 s. */
+  noServiceWorker: string;
+  /** The browser's push service did not answer in 15 s. */
+  pushTimeout: string;
+  /** Given how many devices the push service accepted the test for (≥ 1). */
+  testSent: (count: number) => string;
+  /** The test reached no device. */
+  testNone: string;
+  testFailed: string;
+  /** The explainer before the browser's one permission prompt. */
+  explainerTitle: string;
+  explainerBody: (app: string) => string;
+  explainerHint: string;
+  explainerContinue: string;
+
+  /* ── The device list ────────────────────────────────────────────────── */
+  devicesTitle: string;
+  devicesDescription: string;
+  devicesLoading: string;
+  devicesEmpty: string;
+  /** A device whose user agent says nothing the kit recognises. */
+  unknownDevice: string;
+  /** The chip on this browser's row. */
+  thisDevice: string;
+  /** Given the registration date, formatted. */
+  added: (date: string) => string;
+  /** Given the last accepted delivery, formatted. */
+  lastDelivery: (date: string) => string;
+  noDelivery: string;
+  /** Given the failed deliveries in a row (≥ 1). */
+  failures: (count: number) => string;
+  /** A row's button, visible text — and the confirm's answer. */
+  remove: string;
+  /** The same button's accessible name, given the device: it starts with `remove`. */
+  removeItem: (device: string) => string;
+  /** The question the row asks before it removes. */
+  removePrompt: string;
+
+  /* ── The unsubscribe page ───────────────────────────────────────────── */
+  unsubscribeTitle: string;
+  /** Given the type's name in the app's words. */
+  unsubscribeAbout: (type: string) => string;
+  /** No type name to give. */
+  unsubscribeGeneric: string;
+  stopThese: string;
+  stopAll: (app: string) => string;
+  stoppedThese: string;
+  stoppedAll: (app: string) => string;
+  /** Account mail is not a notification, and keeps coming. */
+  accountMail: string;
+  turnBackOn: string;
+  openSettings: string;
+  /** A token the server refused, or one that does not parse. */
+  invalidLink: string;
+
+  /* ── Every card ─────────────────────────────────────────────────────── */
+  /** A request failed, and the app had no words of its own. */
+  failed: string;
+}
+
+export const DEFAULT_NOTIFICATIONS_LABELS: NotificationsLabels = {
+  typesTitle: "Notify me about",
+  typesDescription: "Choose what you hear about, and how.",
+  byEmail: "By e-mail",
+  emailUnverified: "Confirm your address to receive these.",
+  digestCadence: "Frequency",
+  digestWeekly: "Weekly",
+  digestMonthly: "Monthly",
+  typesLoading: "Loading notification settings…",
+  typesEmpty: "There are no notifications for this account.",
+
+  quietTitle: "Quiet hours",
+  quietDescription: (inbox) =>
+    inbox
+      ? "No push notifications during this window. They still reach your inbox."
+      : "No push notifications during this window.",
+  quietFrom: "From",
+  quietUntil: "Until",
+  quietIncomplete: "Set both a start and an end time. Quiet hours take effect once both are set.",
+  timeZone: "Time zone",
+  deviceZone: (zone) => `This device is in ${zone}.`,
+  useDeviceZone: "Use it",
+  regions: {
+    Africa: "Africa",
+    America: "Americas",
+    Antarctica: "Antarctica",
+    Arctic: "Arctic",
+    Asia: "Asia",
+    Atlantic: "Atlantic",
+    Australia: "Australia",
+    Europe: "Europe",
+    Indian: "Indian Ocean",
+    Pacific: "Pacific",
+  },
+
+  pushTitle: "Push notifications",
+  pushDescription: "Notifications on this device, also while the app is closed.",
+  unsupported: "This browser doesn’t support push notifications.",
+  iosInstall: (app) =>
+    `On iPhone or iPad, add ${app} to your Home Screen first: iOS delivers notifications only to the installed app.`,
+  notConfigured: "Push notifications aren’t set up on this server.",
+  blocked: "Notifications are blocked in this browser’s settings.",
+  on: "Notifications are on for this device.",
+  off: "Notifications are off for this device.",
+  otherAccount:
+    "This browser gets notifications for another account. Turn them on here to get them for the account you’re signed in with.",
+  enable: "Turn on notifications",
+  disable: "Turn off",
+  sendTest: "Send a test",
+  enableFailed: "Couldn’t turn on notifications.",
+  noServiceWorker: "Couldn’t reach the app’s service worker. Reload the page and try again.",
+  pushTimeout: "The browser’s push service didn’t answer. Check your connection and try again.",
+  testSent: (count) => (count === 1 ? "Test sent to 1 device" : `Test sent to ${count} devices`),
+  testNone: "No device accepted the test. Turn notifications on for this device first.",
+  testFailed: "Couldn’t send a test notification.",
+  explainerTitle: "Turn on notifications?",
+  explainerBody: (app) =>
+    `${app} sends a notification only for the kinds you choose, and you can turn them off at any time.`,
+  explainerHint: "Your browser asks for permission next.",
+  explainerContinue: "Continue",
+
+  devicesTitle: "Notification devices",
+  devicesDescription: "Every device that gets push notifications for your account. Remove any you no longer use.",
+  devicesLoading: "Loading devices…",
+  devicesEmpty: "No device gets notifications yet.",
+  unknownDevice: "Unknown device",
+  thisDevice: "This device",
+  added: (date) => `Added ${date}`,
+  lastDelivery: (date) => `Last delivery ${date}`,
+  noDelivery: "No delivery yet",
+  failures: (count) =>
+    count === 1 ? "1 failed delivery in a row" : `${count} failed deliveries in a row`,
+  remove: "Remove",
+  removeItem: (device) => `Remove ${device}`,
+  removePrompt: "Stop sending notifications to this device?",
+
+  unsubscribeTitle: "E-mail notifications",
+  unsubscribeAbout: (type) => `You get e-mails about: ${type}.`,
+  unsubscribeGeneric: "You get notification e-mails.",
+  stopThese: "Stop these e-mails",
+  stopAll: (app) => `Stop all notification e-mails from ${app}`,
+  stoppedThese: "Done. You won’t get these e-mails any more.",
+  stoppedAll: (app) => `Done. You won’t get notification e-mails from ${app} any more.`,
+  accountMail: "E-mails about your account still come.",
+  turnBackOn: "You can turn them back on at any time in Settings.",
+  openSettings: "Open Settings",
+  invalidLink: "This link doesn’t work any more. You can turn e-mails off in Settings instead.",
+
+  failed: "That didn’t work. Please try again.",
+};