wizards 0.4.1 → 0.4.2

package/modules/whatsapp/ui/Settings.tsx

@@ -1,141 +0,0 @@
-import { Button, Card, Input, Label, Spinner } from "@engenty-wizards/web/ui";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useState } from "react";
-import { type AccountView, api, errorText, KEY, t } from "./app";
-import { Shown } from "./parts";
-
-/** Settings → WhatsApp: the number, the token, and what to enter in the Meta app. */
-export function SettingsSection() {
-  const cache = useQueryClient();
-  const account = useQuery({
-    queryKey: [KEY, "account"],
-    queryFn: () => api().get<AccountView>("/account"),
-  });
-  const [form, setForm] = useState({
-    phoneNumberId: "",
-    number: "",
-    accessToken: "",
-    appSecret: "",
-    template: "",
-  });
-  const [to, setTo] = useState("");
-  useEffect(() => {
-    if (account.data) {
-      setForm((f) => ({
-        ...f,
-        phoneNumberId: account.data.phoneNumberId,
-        number: account.data.number,
-        template: account.data.template,
-      }));
-    }
-  }, [account.data]);
-  const refresh = () => cache.invalidateQueries({ queryKey: [KEY] });
-  const save = useMutation({
-    mutationFn: () =>
-      api().put<AccountView>("/account", {
-        phoneNumberId: form.phoneNumberId,
-        number: form.number,
-        accessToken: form.accessToken || undefined,
-        appSecret: form.appSecret || undefined,
-        template: form.template || null,
-      }),
-    onSuccess: async () => {
-      setForm((f) => ({ ...f, accessToken: "", appSecret: "" }));
-      await refresh();
-    },
-  });
-  const remove = useMutation({
-    mutationFn: () => api().del<AccountView>("/account"),
-    onSuccess: refresh,
-  });
-  const test = useMutation({
-    mutationFn: () => api().post<{ ok: boolean }>("/account/test", { to }),
-  });
-  const set = (key: keyof typeof form) => (e: React.ChangeEvent<HTMLInputElement>) =>
-    setForm((f) => ({ ...f, [key]: e.target.value }));
-  const data = account.data;
-  return (
-    <section className="flex flex-col gap-2.5">
-      <h2 className="px-1 font-display font-semibold text-lg leading-tight">{t("title")}</h2>
-      <Card className="flex flex-col gap-4 p-5 text-[0.875rem]">
-        <p className="text-[0.8125rem] text-ink-3">{t("intro")}</p>
-        {account.isLoading ? <Spinner className="mx-auto" /> : null}
-        <div>
-          <Label hint={t("phoneNumberIdHint")}>{t("phoneNumberId")}</Label>
-          <Input value={form.phoneNumberId} onChange={set("phoneNumberId")} autoComplete="off" />
-        </div>
-        <div>
-          <Label hint={t("numberHint")}>{t("number")}</Label>
-          <Input value={form.number} onChange={set("number")} inputMode="numeric" />
-        </div>
-        <div>
-          <Label hint={data?.hasToken ? t("tokenKept") : t("tokenHint")}>{t("token")}</Label>
-          <Input
-            type="password"
-            value={form.accessToken}
-            onChange={set("accessToken")}
-            placeholder={data?.hasToken ? "••••••••" : ""}
-            autoComplete="new-password"
-          />
-        </div>
-        <div>
-          <Label hint={t("secretHint")}>{t("secret")}</Label>
-          <Input
-            type="password"
-            value={form.appSecret}
-            onChange={set("appSecret")}
-            placeholder={data?.hasSecret ? "••••••••" : ""}
-            autoComplete="new-password"
-          />
-        </div>
-        <div>
-          <Label hint={t("templateHint")}>{t("template")}</Label>
-          <Input value={form.template} onChange={set("template")} autoComplete="off" />
-        </div>
-        <div className="flex items-center gap-3">
-          <Button onClick={() => save.mutate()} busy={save.isPending}>
-            {t("save")}
-          </Button>
-          {data?.connected ? (
-            <Button variant="ghost" onClick={() => remove.mutate()} busy={remove.isPending}>
-              {t("disconnect")}
-            </Button>
-          ) : null}
-          {save.isSuccess ? (
-            <span className="text-[0.8125rem] text-ink-3">{t("saved")}</span>
-          ) : null}
-        </div>
-        {save.error ? <p className="text-[0.8125rem] text-rose">{errorText(save.error)}</p> : null}
-      </Card>
-      {data?.connected ? (
-        <Card className="flex flex-col gap-4 p-5 text-[0.875rem]">
-          <div className="font-medium">{t("meta")}</div>
-          <p className="text-[0.8125rem] text-ink-3">{t("metaHint")}</p>
-          <Shown label={t("webhook")} value={data.webhook} />
-          {data.verifyToken ? <Shown label={t("verifyToken")} value={data.verifyToken} /> : null}
-          <div>
-            <Label>{t("testTo")}</Label>
-            <div className="flex items-center gap-2">
-              <Input
-                value={to}
-                onChange={(e) => setTo(e.target.value)}
-                placeholder="+43 660 …"
-                inputMode="tel"
-                className="max-w-xs"
-              />
-              <Button variant="secondary" onClick={() => test.mutate()} busy={test.isPending}>
-                {t("sendTest")}
-              </Button>
-            </div>
-            {test.isSuccess ? (
-              <p className="mt-2 text-[0.8125rem] text-ink-3">{t("testSent")}</p>
-            ) : null}
-            {test.error ? (
-              <p className="mt-2 text-[0.8125rem] text-rose">{errorText(test.error)}</p>
-            ) : null}
-          </div>
-        </Card>
-      ) : null}
-    </section>
-  );
-}

package/modules/whatsapp/ui/Share.tsx

@@ -1,60 +0,0 @@
-import type { StudioShareSectionProps } from "@engenty-wizards/plugin-sdk/studio";
-import { Input } from "@engenty-wizards/web/ui";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useState } from "react";
-import { api, type Binding, errorText, KEY, t } from "./app";
-
-/**
- * In the share dialog's settings, while WhatsApp is on: the keyword that picks the wizard. Its
- * number, its link and the QR code the dialog shows itself, from the runner's address.
- */
-export function ShareSection({ wizard }: StudioShareSectionProps) {
-  const cache = useQueryClient();
-  const binding = useQuery({
-    queryKey: [KEY, "binding", wizard.id],
-    queryFn: () => api().get<Binding>(`/binding/${wizard.id}`),
-  });
-  const [draft, setDraft] = useState<string | null>(null);
-  const save = useMutation({
-    mutationFn: (keyword: string) => api().put<Binding>(`/binding/${wizard.id}`, { keyword }),
-    onSuccess: async () => {
-      setDraft(null);
-      // The dialog's row shows the keyword and the link that writes it.
-      await Promise.all([
-        cache.invalidateQueries({ queryKey: [KEY, "binding", wizard.id] }),
-        cache.invalidateQueries({ queryKey: ["wizard-runners", wizard.id] }),
-      ]);
-    },
-  });
-  if (!binding.data) {
-    return null;
-  }
-  const keyword = draft ?? binding.data.keyword;
-  const commit = () => {
-    if (draft?.trim() && draft.trim() !== binding.data?.keyword) {
-      save.mutate(draft);
-    } else {
-      setDraft(null);
-    }
-  };
-  return (
-    <div className="flex flex-col gap-1.5">
-      <label className="flex flex-col gap-1.5">
-        <span className="font-medium text-[0.875rem]">{t("keyword")}</span>
-        <Input
-          value={keyword}
-          onChange={(e) => setDraft(e.target.value)}
-          onBlur={commit}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.currentTarget.blur();
-            }
-          }}
-          className="max-w-xs"
-        />
-      </label>
-      <p className="text-[0.8125rem] text-ink-3">{t("keywordHint")}</p>
-      {save.error ? <p className="text-[0.8125rem] text-rose">{errorText(save.error)}</p> : null}
-    </div>
-  );
-}

package/modules/whatsapp/ui/app.ts

@@ -1,54 +0,0 @@
-import type { StudioPluginContext } from "@engenty-wizards/plugin-sdk/studio";
-import { messages } from "./messages";
-
-/** The studio this half was handed, and its words. */
-
-let current: StudioPluginContext | null = null;
-let translate: ((key: string, vars?: Record<string, string | number>) => string) | null = null;
-
-export function setStudio(studio: StudioPluginContext) {
-  current = studio;
-  translate = studio.i18n.register(messages) as typeof translate;
-}
-
-export function studio(): StudioPluginContext {
-  if (!current) {
-    throw new Error("The WhatsApp plugin is not loaded.");
-  }
-  return current;
-}
-
-export type Key = keyof (typeof messages)["de"];
-export const t = (key: Key, vars?: Record<string, string | number>) =>
-  translate?.(key, vars) ?? key;
-export const api = () => studio().api;
-
-export const KEY = "whatsapp";
-
-/** What a failed request says, in the person's language. */
-export function errorText(error: unknown): string {
-  const body = (error as { body?: { code?: string; error?: string } } | null)?.body;
-  const code = body?.code;
-  const message = body?.error ?? (error instanceof Error ? error.message : String(error));
-  if (code && `error_${code}` in messages.de) {
-    return t(`error_${code}` as Key, { message });
-  }
-  return t("error_other", { message });
-}
-
-export interface AccountView {
-  connected: boolean;
-  phoneNumberId: string;
-  number: string;
-  hasToken: boolean;
-  hasSecret: boolean;
-  template: string;
-  verifyToken: string | null;
-  webhook: string;
-}
-
-export interface Binding {
-  keyword: string;
-  link: string | null;
-  number: string | null;
-}

package/modules/whatsapp/ui/messages.ts

@@ -1,80 +0,0 @@
-/** The studio half's words. `de` is the source. */
-export const messages = {
-  de: {
-    title: "WhatsApp",
-    intro:
-      "Wizards laufen in einem WhatsApp-Thread auf der eigenen Business-Nummer. Dafür braucht es eine Meta-App mit dem Produkt WhatsApp: die ID der Telefonnummer und einen dauerhaften Access Token aus dem Meta-Dashboard.",
-    phoneNumberId: "Phone number ID",
-    phoneNumberIdHint: "Im Meta-Dashboard unter WhatsApp → API-Setup.",
-    number: "Nummer",
-    numberHint: "Mit Ländervorwahl, nur Ziffern: 43660…",
-    token: "Access Token",
-    tokenHint: "Ein dauerhafter Token eines System-Users mit whatsapp_business_messaging.",
-    tokenKept: "Ist hinterlegt. Leer lassen, um ihn zu behalten.",
-    secret: "App Secret",
-    secretHint: "Freiwillig. Damit wird jede Nachricht von Meta auf ihre Signatur geprüft.",
-    template: "Template",
-    templateHint:
-      "Freiwillig. Der Name eines genehmigten Utility-Templates mit einem Platzhalter im Text: damit meldet sich der Wizard nach einem Tag Stille mit dem Link.",
-    save: "Speichern",
-    saved: "Gespeichert.",
-    disconnect: "Trennen",
-    meta: "In der Meta-App eintragen",
-    metaHint:
-      "Unter WhatsApp → Konfiguration: die Webhook-Adresse und den Verify Token eintragen, dann das Feld „messages“ abonnieren.",
-    webhook: "Webhook-Adresse",
-    verifyToken: "Verify Token",
-    copy: "Kopieren",
-    copied: "Kopiert",
-    testTo: "Testnachricht an",
-    sendTest: "Senden",
-    testSent: "Angekommen? Dann passt alles.",
-    keyword: "Stichwort",
-    keywordHint:
-      "Wer dieses Wort an die Nummer schreibt, startet den Wizard. Der Link und der QR-Code schreiben es vor.",
-    error_bad_keyword:
-      "Ein Stichwort besteht aus Buchstaben, Ziffern, Leerzeichen und Bindestrichen, bis zu 40.",
-    error_keyword_taken: "Ein anderer Wizard hat dieses Stichwort schon.",
-    error_no_token: "Es braucht einen Access Token.",
-    error_provider: "WhatsApp hat die Nachricht nicht angenommen: {message}",
-    error_other: "{message}",
-  },
-  en: {
-    title: "WhatsApp",
-    intro:
-      "Wizards run in a WhatsApp thread on your own business number. It takes a Meta app with the WhatsApp product: the phone number's ID and a permanent access token from the Meta dashboard.",
-    phoneNumberId: "Phone number ID",
-    phoneNumberIdHint: "In the Meta dashboard under WhatsApp → API setup.",
-    number: "Number",
-    numberHint: "With the country code, digits only: 43660…",
-    token: "Access token",
-    tokenHint: "A permanent token of a system user with whatsapp_business_messaging.",
-    tokenKept: "Is set. Leave empty to keep it.",
-    secret: "App secret",
-    secretHint: "Optional. With it, every message from Meta is checked for its signature.",
-    template: "Template",
-    templateHint:
-      "Optional. The name of an approved utility template with one placeholder in its text: the wizard reaches back with the link after a day of silence.",
-    save: "Save",
-    saved: "Saved.",
-    disconnect: "Disconnect",
-    meta: "Enter in the Meta app",
-    metaHint:
-      "Under WhatsApp → Configuration: enter the webhook address and the verify token, then subscribe to the “messages” field.",
-    webhook: "Webhook address",
-    verifyToken: "Verify token",
-    copy: "Copy",
-    copied: "Copied",
-    testTo: "Test message to",
-    sendTest: "Send",
-    testSent: "Arrived? Then everything is set.",
-    keyword: "Keyword",
-    keywordHint:
-      "Whoever writes this word to the number starts the wizard. The link and the QR code write it for them.",
-    error_bad_keyword: "A keyword is letters, digits, spaces and dashes, up to 40.",
-    error_keyword_taken: "Another wizard has this keyword already.",
-    error_no_token: "An access token is needed.",
-    error_provider: "WhatsApp did not take the message: {message}",
-    error_other: "{message}",
-  },
-} as const;

package/modules/whatsapp/ui/parts.tsx

@@ -1,36 +0,0 @@
-import { IconButton } from "@engenty-wizards/web/ui";
-import { Check, Copy } from "lucide-react";
-import { useState } from "react";
-import { t } from "./app";
-
-/** A value to take along: the webhook address, the verify token, the link. */
-export function CopyButton({ text }: { text: string }) {
-  const [done, setDone] = useState(false);
-  return (
-    <IconButton
-      label={t(done ? "copied" : "copy")}
-      className="size-8"
-      onClick={() => {
-        void navigator.clipboard.writeText(text).then(() => {
-          setDone(true);
-          setTimeout(() => setDone(false), 1500);
-        });
-      }}
-    >
-      {done ? <Check className="size-4" /> : <Copy className="size-4" />}
-    </IconButton>
-  );
-}
-
-/** A value shown as it is, with the button that copies it. */
-export function Shown({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex items-center gap-2">
-      <div className="min-w-0 flex-1">
-        <div className="text-[0.8125rem] text-ink-3">{label}</div>
-        <div className="select-all truncate font-mono text-[0.8125rem]">{value}</div>
-      </div>
-      <CopyButton text={value} />
-    </div>
-  );
-}

package/modules/whatsapp/ui/plugin.tsx

@@ -1,20 +0,0 @@
-import { defineStudioPlugin } from "@engenty-wizards/plugin-sdk/studio";
-import { MessageCircle } from "lucide-react";
-import { setStudio, t } from "./app";
-import { SettingsSection } from "./Settings";
-import { ShareSection } from "./Share";
-
-/**
- * The studio half: the number and the token in the settings, and the keyword with its link
- * under the WhatsApp row of the share dialog. Everything talks to src/plugin.ts.
- */
-export default defineStudioPlugin((studio) => {
-  setStudio(studio);
-  studio.registerSettingsSection({
-    id: "whatsapp",
-    label: () => t("title"),
-    icon: MessageCircle,
-    component: SettingsSection,
-  });
-  studio.registerShareSection({ runner: "whatsapp", component: ShareSection });
-});