frontend: scan a patient's wallet code in Import from a patient app

Adds a Scan button beside the wallet-number field in the import dialog,
reusing the BarcodeScanner. A scanned QR or 2D barcode from the patient's
wallet app drops the wallet number straight into the field. i18n added to
all locales.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
2026-07-18 23:34:56 +03:00
parent 0754ce96a4
commit b285158fec
6 changed files with 48 additions and 8 deletions
@@ -1,11 +1,12 @@
"use client";
import { Check, Loader2, QrCode, Smartphone, X } from "lucide-react";
import { Check, Loader2, QrCode, ScanLine, Smartphone, X } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import QRCodeSvg from "react-qr-code";
import { PatientFormDialog } from "@/components/chat/patient-form-dialog";
import { BarcodeScanner } from "@/components/scan/barcode-scanner";
import { Button } from "@/components/ui/button";
import {
Dialog,
@@ -63,6 +64,15 @@ export function ImportFromWalletDialog({
const { t } = useTranslation();
const [mode, setMode] = useState<Mode>("number");
const [walletNumber, setWalletNumber] = useState("");
const [scanOpen, setScanOpen] = useState(false);
// Scanning the wallet code shown on the patient's phone (QR or 2D barcode)
// drops its wallet number straight into the field.
const handleScan = (value: string) => {
setScanOpen(false);
setMode("number");
setWalletNumber(value.trim());
};
const [temporary, setTemporary] = useState(false);
const [durationHours, setDurationHours] = useState<number>(24);
const [phase, setPhase] = useState<Phase>("form");
@@ -302,13 +312,25 @@ export function ImportFromWalletDialog({
<span className="text-xs text-muted-foreground">
{t("patients.importApp.walletLabel")}
</span>
<Input
autoFocus
disabled={phase === "requesting"}
onChange={(e) => setWalletNumber(e.target.value)}
placeholder={t("patients.importApp.walletPlaceholder")}
value={walletNumber}
/>
<div className="flex items-center gap-2">
<Input
autoFocus
disabled={phase === "requesting"}
onChange={(e) => setWalletNumber(e.target.value)}
placeholder={t("patients.importApp.walletPlaceholder")}
value={walletNumber}
/>
<Button
aria-label={t("patients.importApp.scan")}
disabled={phase === "requesting"}
onClick={() => setScanOpen(true)}
size="icon"
type="button"
variant="outline"
>
<ScanLine className="size-4" />
</Button>
</div>
</label>
) : (
<p className="text-sm text-muted-foreground">
@@ -411,6 +433,14 @@ export function ImportFromWalletDialog({
patient={request.draft}
/>
) : null}
<BarcodeScanner
description={t("patients.importApp.scanHint")}
onDetected={handleScan}
onOpenChange={setScanOpen}
open={scanOpen}
title={t("patients.importApp.scan")}
/>
</>
);
}
@@ -302,6 +302,8 @@
"qrCaption": "امسح هذا في تطبيق المريض",
"generateQr": "عرض رمز QR",
"walletLabel": "رقم محفظة المريض",
"scan": "امسح رمز المريض",
"scanHint": "امسح رمز QR أو الباركود الظاهر في تطبيق محفظة المريض.",
"walletPlaceholder": "tmw_…",
"tempLabel": "مشاركة مؤقتة",
"tempHint": "يُحذف السجل تلقائيًا من هذه العيادة عند انتهاء فترة المشاركة.",
@@ -298,6 +298,8 @@
"qrCaption": "Dies in der Patienten-App scannen",
"generateQr": "QR-Code anzeigen",
"walletLabel": "Patienten-Wallet-Nummer",
"scan": "Code des Patienten scannen",
"scanHint": "Scanne den QR- oder Barcode aus der Wallet-App des Patienten.",
"walletPlaceholder": "tmw_…",
"tempLabel": "Temporär teilen",
"tempHint": "Die Akte wird automatisch aus dieser Klinik gelöscht, wenn das Freigabefenster endet.",
@@ -298,6 +298,8 @@
"qrCaption": "Scan this in the patient app",
"generateQr": "Show QR code",
"walletLabel": "Patient wallet number",
"scan": "Scan patient's code",
"scanHint": "Scan the QR or barcode shown in the patient's wallet app.",
"walletPlaceholder": "tmw_…",
"tempLabel": "Share temporarily",
"tempHint": "The record is automatically deleted from this clinic when the share window ends.",
@@ -298,6 +298,8 @@
"qrCaption": "Scannez ceci dans l'application patient",
"generateQr": "Afficher le code QR",
"walletLabel": "Numéro de portefeuille du patient",
"scan": "Scanner le code du patient",
"scanHint": "Scannez le QR code ou le code-barres affiché dans l'app portefeuille du patient.",
"walletPlaceholder": "tmw_…",
"tempLabel": "Partager temporairement",
"tempHint": "Le dossier est automatiquement supprimé de cette clinique à la fin de la période de partage.",
@@ -298,6 +298,8 @@
"qrCaption": "Ku sawir tan app-ka bukaanka",
"generateQr": "Tus koodhka QR",
"walletLabel": "Lambarka wallet-ka bukaanka",
"scan": "Iskaan garee koodhka bukaanka",
"scanHint": "Iskaan garee koodhka QR ama barcode ee ka muuqda abka wallet-ka bukaanka.",
"walletPlaceholder": "tmw_…",
"tempLabel": "Wadaag si ku meel gaar ah",
"tempHint": "Diiwaanka si toos ah ayaa looga tirtirayaa rugtan marka daaqadda wadaagista dhammaato.",