feat: barcode image output in PrintBarcodeModal

src/components/BarcodeImageDropzone/BarcodeImageDropzone.tsx

@@ -121,12 +121,7 @@ const BarcodeImageDropzone: FC<Props> = (props: Props) => {
                 accept={[
                     "image/png",
                     "image/jpeg",
-                    "image/bmp",
-                    "image/tiff",
-                    "image/x-icon",
                     "image/webp",
-                    "image/svg+xml",
-                    "image/heic",
                 ]}
                 multiple={false}
                 onDrop={onDrop}>

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,6 +91,14 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
             <Flex
                 gap={rem(10)}
                 direction={"column"}>
+                {
+                    barcodeImageUrl ? (
+                        <object style={{
+                            alignSelf: "center",
+                            aspectRatio: BARCODE_IMAGE_RATIO,
+                            width: "240px",
+                        }} data={barcodeImageUrl} />
+                    ) : (
                         <Select
                             value={barcode}
                             onChange={value => setBarcode(value || undefined)}
@@ -85,6 +106,8 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
                             label={"Штрихкод"}
                             placeholder={"Выберите штрихкод"}
                         />
+                    )
+                }
                 <NumberInput
                     label={"Количество копий"}
                     placeholder={"Введите количество копий"}
@@ -99,6 +122,8 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
                 <Flex
                     direction={"column"}
                     gap={rem(10)}>
+                    {
+                        !barcodeImageUrl && (
                             <Flex gap={rem(10)}>
                                 <Button
                                     onClick={() => onAddClick()}
@@ -113,6 +138,8 @@ const PrintBarcodeModal = ({ innerProps }: ContextModalProps<Props>) => {
                                     Сгенерировать
                                 </Button>
                             </Flex>
+                        )
+                    }
                     <Button
                         size={"lg"}
                         disabled={!barcode}