feat: barcode image output in PrintBarcodeModal

src/modals/PrintBarcodeModal/PrintBarcodeModal.tsx

@@ -7,6 +7,9 @@ import { notifications } from "../../shared/lib/notifications.ts";
 import PrintBarcodeContainer from "./PrintBarcodeContainer.tsx";
 import { base64ToBlob } from "../../shared/lib/utils.ts";
 
+// Barcode image aspects ratio should be equal 58/40
+const BARCODE_IMAGE_RATIO = 1.45;
+
 type Props = {
     productId: number;
     defaultQuantity?: number;
@@ -16,6 +19,7 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
     const [quantity, setQuantity] = useState(defaultQuantity);
     const [barcode, setBarcode] = useState<string | undefined>();
     const [barcodeData, setBarcodeData] = useState<BarcodeSchema | undefined>();
+    const [barcodeImageUrl, setBarcodeImageUrl] = useState<string | undefined>();
 
     const { product, refetch } = useGetProductById(productId);
 
@@ -63,9 +67,18 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
             setBarcodeData(barcode);
         });
     };
+    const fetchBarcodeImage = () => {
+        if (!product) return;
+        ProductService.getProductBarcodeImage({
+            productId: product.id,
+        }).then(res => {
+            if (res.barcodeImageUrl) setBarcodeImageUrl(res.barcodeImageUrl);
+        });
+    }
     useEffect(() => {
         if (!product) return;
         if (product.barcodes.length === 1) setBarcode(product.barcodes[0]);
+        fetchBarcodeImage();
     }, [product]);
 
     useEffect(() => {
@@ -78,13 +91,23 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
             <Flex
                 gap={rem(10)}
                 direction={"column"}>
-                <Select
-                    value={barcode}
-                    onChange={value => setBarcode(value || undefined)}
-                    data={product?.barcodes}
-                    label={"Штрихкод"}
-                    placeholder={"Выберите штрихкод"}
-                />
+                {
+                    barcodeImageUrl ? (
+                        <object style={{
+                            alignSelf: "center",
+                            aspectRatio: BARCODE_IMAGE_RATIO,
+                            width: "240px",
+                        }} data={barcodeImageUrl} />
+                    ) : (
+                        <Select
+                            value={barcode}
+                            onChange={value => setBarcode(value || undefined)}
+                            data={product?.barcodes}
+                            label={"Штрихкод"}
+                            placeholder={"Выберите штрихкод"}
+                        />
+                    )
+                }
                 <NumberInput
                     label={"Количество копий"}
                     placeholder={"Введите количество копий"}
@@ -99,20 +122,24 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
                 <Flex
                     direction={"column"}
                     gap={rem(10)}>
-                    <Flex gap={rem(10)}>
-                        <Button
-                            onClick={() => onAddClick()}
-                            variant={"default"}
-                            fullWidth>
-                            Добавить вручную
-                        </Button>
-                        <Button
-                            onClick={() => onGenerateClick()}
-                            variant={"default"}
-                            fullWidth>
-                            Сгенерировать
-                        </Button>
-                    </Flex>
+                    {
+                        !barcodeImageUrl && (
+                            <Flex gap={rem(10)}>
+                                <Button
+                                    onClick={() => onAddClick()}
+                                    variant={"default"}
+                                    fullWidth>
+                                    Добавить вручную
+                                </Button>
+                                <Button
+                                    onClick={() => onGenerateClick()}
+                                    variant={"default"}
+                                    fullWidth>
+                                    Сгенерировать
+                                </Button>
+                            </Flex>
+                        )
+                    }
                     <Button
                         size={"lg"}
                         disabled={!barcode}