mirror of
https://github.com/temetro/temetro.git
synced 2026-08-21 07:26:45 +00:00
frontend: in-dialog wallet-sync stepper for record changes
When the selected patient has a linked wallet, create/edit dialogs now show a two-step stepper: after saving, step 2 offers to push the change to the patient's wallet (reusing pushWalletUpdate + approval polling). Added a shared useWalletSync hook and DialogStepper/WalletSyncStep components, wired into the appointment, invoice, prescription, patient-edit, and scribe dialogs. Falls back to the old close-on-save when the patient has no wallet. Added walletSync.* keys to all locales. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import { ApiError } from "@/lib/api-client";
|
||||
import {
|
||||
getWalletLink,
|
||||
getWalletUpdate,
|
||||
pushWalletUpdate,
|
||||
type WalletUpdate,
|
||||
} from "@/lib/wallet-updates";
|
||||
|
||||
export type WalletSyncState =
|
||||
| "idle"
|
||||
| "pending"
|
||||
| "approved"
|
||||
| "denied"
|
||||
| "error";
|
||||
|
||||
// Shared wallet-sync logic for create/edit dialogs. It resolves whether the
|
||||
// selected patient has a linked wallet, then (after the primary save) can push
|
||||
// the change to their phone and poll until they approve/deny it — the same
|
||||
// mechanism as the standalone WalletPushDialog, lifted out for reuse.
|
||||
export function useWalletSync(fileNumber: string | null | undefined) {
|
||||
const [linked, setLinked] = useState(false);
|
||||
const [checking, setChecking] = useState(false);
|
||||
const [state, setState] = useState<WalletSyncState>("idle");
|
||||
const [update, setUpdate] = useState<WalletUpdate | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Resolve link status whenever the chosen patient changes. A 404 simply means
|
||||
// "not wallet-backed", so failures collapse to `linked = false`.
|
||||
useEffect(() => {
|
||||
if (!fileNumber) {
|
||||
setLinked(false);
|
||||
return;
|
||||
}
|
||||
let active = true;
|
||||
setChecking(true);
|
||||
getWalletLink(fileNumber)
|
||||
.then(() => {
|
||||
if (active) setLinked(true);
|
||||
})
|
||||
.catch(() => {
|
||||
if (active) setLinked(false);
|
||||
})
|
||||
.finally(() => {
|
||||
if (active) setChecking(false);
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [fileNumber]);
|
||||
|
||||
// Poll the pushed update until the patient approves/denies it.
|
||||
useEffect(() => {
|
||||
if (state !== "pending" || !update || update.resolvedAt) return;
|
||||
let active = true;
|
||||
const timer = setInterval(async () => {
|
||||
try {
|
||||
const fresh = await getWalletUpdate(update.id);
|
||||
if (!active) return;
|
||||
setUpdate(fresh);
|
||||
if (fresh.status === "approved") setState("approved");
|
||||
else if (fresh.status === "denied") setState("denied");
|
||||
if (fresh.resolvedAt) clearInterval(timer);
|
||||
} catch {
|
||||
/* keep polling */
|
||||
}
|
||||
}, 3000);
|
||||
return () => {
|
||||
active = false;
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, [state, update]);
|
||||
|
||||
const push = useCallback(
|
||||
async (changes: string[]) => {
|
||||
if (!fileNumber) return;
|
||||
setError(null);
|
||||
setState("pending");
|
||||
try {
|
||||
const created = await pushWalletUpdate({ fileNumber, changes });
|
||||
setUpdate(created);
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : "generic");
|
||||
setState("error");
|
||||
}
|
||||
},
|
||||
[fileNumber],
|
||||
);
|
||||
|
||||
const reset = useCallback(() => {
|
||||
setState("idle");
|
||||
setUpdate(null);
|
||||
setError(null);
|
||||
}, []);
|
||||
|
||||
return { linked, checking, state, update, error, push, reset };
|
||||
}
|
||||
|
||||
export type UseWalletSync = ReturnType<typeof useWalletSync>;
|
||||
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import { Check, Loader2, Send, X } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DialogFooter, DialogPanel } from "@/components/ui/dialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import type { UseWalletSync } from "./use-wallet-sync";
|
||||
|
||||
// Two-step header shown at the top of a dialog when the selected patient has a
|
||||
// linked wallet: "Details" → "Sync to wallet".
|
||||
export function DialogStepper({ step }: { step: "form" | "wallet" }) {
|
||||
const { t } = useTranslation();
|
||||
const steps = [
|
||||
{ key: "form", label: t("walletSync.step1") },
|
||||
{ key: "wallet", label: t("walletSync.step2") },
|
||||
] as const;
|
||||
const activeIndex = step === "form" ? 0 : 1;
|
||||
|
||||
return (
|
||||
<div className="mt-3 flex items-center gap-2">
|
||||
{steps.map((s, i) => {
|
||||
const done = i < activeIndex;
|
||||
const active = i === activeIndex;
|
||||
return (
|
||||
<div className="flex flex-1 items-center gap-2" key={s.key}>
|
||||
<span
|
||||
className={cn(
|
||||
"flex size-5 shrink-0 items-center justify-center rounded-full text-[11px] font-semibold transition-colors",
|
||||
done && "bg-primary text-primary-foreground",
|
||||
active && "bg-primary/15 text-primary ring-1 ring-primary/40",
|
||||
!done && !active && "bg-muted text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{done ? <Check className="size-3" /> : i + 1}
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"text-xs font-medium",
|
||||
active || done ? "text-foreground" : "text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
{i < steps.length - 1 && (
|
||||
<span
|
||||
className={cn(
|
||||
"ml-1 h-px flex-1",
|
||||
done ? "bg-primary/40" : "bg-border",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Step 2 body + footer: offer to push the just-saved change to the patient's
|
||||
// wallet, then show the approval status. Rendered in place of the form's
|
||||
// DialogPanel/DialogFooter, so it returns them as a fragment.
|
||||
export function WalletSyncStep({
|
||||
patientName,
|
||||
summary,
|
||||
sync,
|
||||
onDone,
|
||||
}: {
|
||||
patientName: string;
|
||||
summary: string;
|
||||
sync: UseWalletSync;
|
||||
onDone: () => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const { state, update, error, push } = sync;
|
||||
const status = update?.status ?? "pending";
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogPanel className="min-h-0 flex-1 overflow-y-auto">
|
||||
{state === "idle" || state === "error" ? (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-medium text-foreground text-sm">
|
||||
{t("walletSync.prompt", { name: patientName })}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("walletSync.promptBody")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{t("walletSync.changesLabel")}
|
||||
</span>
|
||||
<div className="rounded-lg border bg-muted/50 px-3 py-2 text-foreground text-sm">
|
||||
{summary}
|
||||
</div>
|
||||
</div>
|
||||
{error && (
|
||||
<p className="text-destructive text-sm" role="alert">
|
||||
{error === "generic" ? t("walletSync.errors.generic") : error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center gap-4 py-6 text-center">
|
||||
{status === "approved" ? (
|
||||
<div className="flex size-12 items-center justify-center rounded-full bg-success/15 text-success">
|
||||
<Check className="size-6" />
|
||||
</div>
|
||||
) : status === "denied" ? (
|
||||
<div className="flex size-12 items-center justify-center rounded-full bg-destructive/15 text-destructive">
|
||||
<X className="size-6" />
|
||||
</div>
|
||||
) : (
|
||||
<Loader2 className="size-8 animate-spin text-muted-foreground" />
|
||||
)}
|
||||
<div className="flex flex-col gap-1">
|
||||
<p className="font-medium text-foreground text-sm">
|
||||
{t(`walletPush.status.${status}.title`)}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t(`walletPush.status.${status}.body`)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogPanel>
|
||||
|
||||
<DialogFooter>
|
||||
{state === "idle" || state === "error" ? (
|
||||
<>
|
||||
<Button onClick={onDone} type="button" variant="outline">
|
||||
{t("walletSync.skip")}
|
||||
</Button>
|
||||
<Button onClick={() => push([summary])} type="button">
|
||||
<Send className="size-4" />
|
||||
{t("walletSync.send")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<Button onClick={onDone} type="button">
|
||||
{t("walletSync.done")}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user