diff --git a/packages/admin/src/components/pos/pos-receipt.tsx b/packages/admin/src/components/pos/pos-receipt.tsx index e9bb6f6..d4f2d47 100644 --- a/packages/admin/src/components/pos/pos-receipt.tsx +++ b/packages/admin/src/components/pos/pos-receipt.tsx @@ -1,4 +1,8 @@ -import { useEffect, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' +import { useQuery } from '@tanstack/react-query' +import { queryOptions } from '@tanstack/react-query' +import { api } from '@/lib/api-client' +import { usePOSStore } from '@/stores/pos.store' import JsBarcode from 'jsbarcode' interface ReceiptLineItem { @@ -47,10 +51,51 @@ interface POSReceiptProps { footerText?: string } +function useStoreLogo(companyId?: string) { + const token = usePOSStore((s) => s.token) + const [logoSrc, setLogoSrc] = useState(null) + + const { data: storeData } = useQuery(queryOptions({ + queryKey: ['store'], + queryFn: () => api.get<{ id: string }>('/v1/store'), + enabled: !!token, + })) + + const storeId = companyId ?? storeData?.id + const { data: filesData } = useQuery(queryOptions({ + queryKey: ['files', 'company', storeId ?? ''], + queryFn: () => api.get<{ data: { id: string; path: string }[] }>('/v1/files', { entityType: 'company', entityId: storeId }), + enabled: !!storeId, + })) + + const logoFile = filesData?.data?.find((f) => f.path.includes('/logo-')) + + useEffect(() => { + if (!logoFile || !token) { setLogoSrc(null); return } + let cancelled = false + let blobUrl: string | null = null + async function load() { + try { + const res = await fetch(`/v1/files/serve/${logoFile!.path}`, { + headers: { Authorization: `Bearer ${token}` }, + }) + if (!res.ok || cancelled) return + const blob = await res.blob() + if (!cancelled) { blobUrl = URL.createObjectURL(blob); setLogoSrc(blobUrl) } + } catch { /* ignore */ } + } + load() + return () => { cancelled = true; if (blobUrl) URL.revokeObjectURL(blobUrl) } + }, [logoFile?.path, token]) + + return logoSrc +} + export function POSReceipt({ data, size = 'thermal', footerText }: POSReceiptProps) { const barcodeRef = useRef(null) const { transaction: txn, company, location } = data const isThermal = size === 'thermal' + const logoSrc = useStoreLogo() useEffect(() => { if (barcodeRef.current) { @@ -84,7 +129,11 @@ export function POSReceipt({ data, size = 'thermal', footerText }: POSReceiptPro > {/* Store header */}
-
{company.name}
+ {logoSrc ? ( + {company.name} + ) : ( +
{company.name}
+ )} {location.name !== company.name && (
{location.name}
)}