Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | 1026x 1143x 1143x 1143x 3697x 1004x 1x 1x 1x 1004x 108x 1035x 366x 1x | import React from "react";
import { useTranslation } from "react-i18next";
import { useLocale } from "~app/hooks/use-locale";
import { formatCurrency } from "~app/utils/currency";
import { Checkbox } from "~components/checkbox";
import { Icon } from "~components/icons";
import { Text } from "~components/text";
import { View } from "~components/view";
import type { ViewHandle } from "~components/view.base";
import type { ReceiptItemId } from "~db/ids";
import { round } from "~utils/math";
import { useReceiptContext } from "./context";
type InnerProps = {
itemsRef: React.RefObject<Record<ReceiptItemId, ViewHandle | null>>;
};
export const ReceiptEmptyItems: React.FC<InnerProps> = ({ itemsRef }) => {
const { t } = useTranslation("receipts");
const { currencyCode, items } = useReceiptContext();
const locale = useLocale();
const emptyItems = items.filter((item) => item.consumers.length === 0);
const onEmptyItemClick = React.useCallback(
(id: ReceiptItemId) => {
const matchedItem = itemsRef.current[id];
Iif (!matchedItem) {
return;
}
matchedItem.scrollIntoView();
},
[itemsRef],
);
if (emptyItems.length === 0) {
return;
}
return (
<View className="gap-2" testID="receipt-empty-items">
<Text variant="h4">{t("item.noParticipantsItemsSection.label")}</Text>
{emptyItems.map((item) => (
<Checkbox
key={item.id}
color="warning"
isSelected
onValueChange={() => onEmptyItemClick(item.id)}
icon={<Icon name="arrow-down" className="text-foreground size-4" />}
>
{t("item.noParticipantsItemsSection.itemLabel", {
name: item.name,
amount: formatCurrency(
locale,
currencyCode,
round(item.quantity * item.price),
),
})}
</Checkbox>
))}
</View>
);
};
|