Dave
1c48c74bd2
After an invoice photo, exact matches are marked collected (with undo); uncertain ones are listed. Still off unless enabled in Settings > Beta. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
56 lines
2 KiB
TypeScript
56 lines
2 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { ScanSearch } from 'lucide-react';
|
|
import { RUN_EVENT, invoiceCheckBase } from '@/lib/invoiceCheck';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface InvoiceCheckProps {
|
|
poNumber: string;
|
|
/** Invoice pages already uploaded for this PO; the helper needs at least one. */
|
|
pages: number;
|
|
size?: 'sm' | 'lg';
|
|
}
|
|
|
|
// Beta helper trigger. Renders nothing unless the driver switched it on in
|
|
// Settings → Beta, so the normal PO buttons are untouched. It asks
|
|
// InvoiceMatchHost (on the page) to match the invoice, either when the driver
|
|
// taps the button or automatically right after a new invoice page uploads.
|
|
export default function InvoiceCheck({ poNumber, pages, size = 'sm' }: InvoiceCheckProps) {
|
|
const [enabled, setEnabled] = useState(false);
|
|
const prevPages = useRef<number | null>(null);
|
|
|
|
const trigger = () => window.dispatchEvent(new CustomEvent(RUN_EVENT, { detail: { poNumber } }));
|
|
|
|
useEffect(() => {
|
|
setEnabled(Boolean(invoiceCheckBase()));
|
|
}, []);
|
|
|
|
// A new invoice page just went up: check it straight away.
|
|
useEffect(() => {
|
|
const before = prevPages.current;
|
|
prevPages.current = pages;
|
|
if (before !== null && pages > before && poNumber && invoiceCheckBase()) trigger();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [pages]);
|
|
|
|
if (!enabled || !poNumber || pages === 0) return null;
|
|
|
|
const lg = size === 'lg';
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={trigger}
|
|
aria-label={`Match the invoice for PO ${poNumber} to your items (beta)`}
|
|
className={cn(
|
|
lg
|
|
? 'h-12 w-full rounded-xl text-[15px] font-semibold flex items-center justify-center gap-2 touch-manipulation'
|
|
: 'h-9 px-3 rounded-lg text-[13px] font-semibold flex items-center gap-1.5 touch-manipulation',
|
|
'bg-[#efeaf7] text-[#6c5a99] active:bg-[#ded5ef]',
|
|
)}
|
|
>
|
|
<ScanSearch size={lg ? 18 : 14} aria-hidden="true" />
|
|
<span>{lg ? 'Match invoice (beta)' : 'Match'}</span>
|
|
</button>
|
|
);
|
|
}
|