Android_Retail/src/Pages/BookingScreen/Forms/DirectSale/DirectSale.jsx

import {
  lazy,
  Suspense,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import { Input, Select, Button } from 'antd';
import {
  DeleteOutlined,
  SaveOutlined,
  PrinterOutlined,
} from '@ant-design/icons';
import { Tables } from '../../../../Components/Tables/Table.jsx';
import { useDispatch } from 'react-redux';
import {
  postProductData,
  getDirectSaleProducts,
  getAllProductShortCodes,
  deleteProductData,
  getDirectSaleSearchedProduct,
} from '../../../../Features/ProductPage/ProductPage.js';
import { getSession, printDiv } from '../../../../Services/Others.js';
import { Messages } from '../../../../Components/Notifications/Messages.jsx';
import { FaStarOfLife } from 'react-icons/fa6';
import { IoMdRefresh } from 'react-icons/io';
import StickerPrintModel from '../../../Product/StickerPrintModal.jsx';
import { getPageStyle, style } from '../../../Product/Printstyles.js';
import {
  getBarcodeSessionsIDs,
  getBarcodeTemplate,
} from '../../../../Features/Barcode/Barcode.js';
import {
  generateBarcode,
  generateQRCode,
  generateQRCodeCopy,
} from '../../../../Services/utils.js';
import useBarcodeGenerator from './useBarcodeQRGenerator.js';
// Jsx File
const StickerPrintTemplates = lazy(
  () => import('../../../Product/StickerTemplates.jsx')
);
// SCss
import '../../../../Styles/BookingScreen/Components/OtherConponents/Reprint/BSReprint.scss';
const DirectSale = ({
  UomData = [],
  TaxData = [],
  ProductTypeData = [],
  ProdCatData = [],
  ProdSubCatData = [],
  SupplierData = [],
  activeTab = null,
}) => {
  const formRef = useRef();
  const tableRef = useRef();
  const searchInputRef = useRef();
  const dispatch = useDispatch();
  const [messageType, setMessageType] = useState(null);
  const [messageData, setMessageData] = useState(null);
  const [currentPage, setCurrentPage] = useState(1);

  const CompId = getSession('CompId');
  const BranchId = getSession('BranchId');
  const AppId = getSession('AppId');
  const UserId = getSession('UserId');

  const [dataSource, setDataSource] = useState([]);
  const [editingKey, setEditingKey] = useState(null);

  const [copies, setCopies] = useState(null);
  const [dropdownValue, setDropdownValue] = useState(null);
  const [multiProduct, setMultiProduct] = useState(false);
  const [printReady, setPrintReady] = useState(false);
  const [printProductName, setPrintProductName] = useState(false);
  const [productShortCodes, setAllProductShortCodes] = useState([]);
  const [searchText, setSearchText] = useState('');
  console.log(searchText, 'searchText');
  const [stickerPrintModalOpen, setStickerPrintModalOpen] = useState(false);
  const [barcodeTemplateDetails, setBarcodeTemplateDetails] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]);
  const [labelPrintData, setLabelPrintData] = useState(null);
  const [prodId, setProdId] = useState(null);
  const [nickName, setNickName] = useState(null);
  const [crossData, setCrossData] = useState(null);
  const [triggerState, setTriggerState] = useState(1);
  const [templateOptions, setTemplateOptions] = useState({
    mrp: false,
    barcode: false,
    color: false,
    eDate: false,
    mDate: false,
    sellingPrice: false,
    productName: false,
    value: '',
    secondValue: '',
    qrcode: false,
    codeType: '',
  });

  console.log(searchText != null && searchText != '', 'filteredProducts');

  const { qrBase64, barcodeBase64 } = useBarcodeGenerator(prodId);

  const handleAdd = () => {
    setDataSource([
      {
        key: dataSource.length + 1,
        productName: '',
        shortCode: '',
        sellingPrice: '',
        uom: null,
        tax: null,
        prodId: null,
        size: null,
        uomName: null,
        activeStatus: 'A',
      },
      ...dataSource,
    ]);
  };

  const handleDelete = async (record) => {
    if (record?.prodId) {
      if (searchText != null && searchText !== '') {
        setSearchText('');
        setCurrentPage(1);
        if (searchInputRef.current) {
          searchInputRef.current.value = '';
        }
      }
      const deleteData = {
        ProdId: record.prodId,
        ActiveStatus: record.activeStatus === 'A' ? 'D' : 'A',
        UpdatedBy: UserId,
      };
      const response = await dispatch(deleteProductData(deleteData))?.unwrap();
      if (response?.data?.statusCode === 1) {
        setMessageData(
          record.activeStatus === 'A'
            ? 'Product De-Activated Successfully'
            : 'Product Activated Successfully'
        );
        setMessageType('success');
        await fetchDirectSaleProducts();
      } else {
        setMessageData(response?.data?.response || 'Failed to update status');
        setMessageType('error');
      }
      return;
    } else {
      // const { key } = record;
      // setDataSource(dataSource.filter(item => item.key !== key));
      setMessageData('Atleast one empty row should be in table.');
      setMessageType('warning');
    }
  };

  const handleChange = useCallback(
    (key, field, value) => {
      if (searchText) {
        setFilteredProducts((prev) =>
          prev.map((item) =>
            item.key === key ? { ...item, [field]: value } : item
          )
        );
      } else {
        setDataSource((prev) =>
          prev.map((item) =>
            item.key === key ? { ...item, [field]: value } : item
          )
        );
      }
    },
    [searchText]
  );

  const handleSave = async (record) => {
    if (
      !record.productName ||
      !record.sellingPrice ||
      !record.uom ||
      !record.tax ||
      !record?.shortCode
    ) {
      setMessageData('Please fill all the required fields!');
      setMessageType('warning');
      return;
    }

    const exists = isShortCodeDuplicate(record?.shortCode, record?.prodId);

    if (exists) {
      setMessageData('Short code already exists for another product');
      setMessageType('error');
      return;
    }

    const postData = {
      ProdName: record.productName,
      Size: '1',
      UOM: record.uom,
      MRP: record.sellingPrice,
      SellPrice: record.sellingPrice,
      TaxId: record.tax,
      CompId: CompId,
      BranchId: BranchId,
      AppId: AppId,
      ProdType: ProductTypeData?.find((item) => item.ConfigName === 'Product')
        ?.ConfigId,
      ProdCat: ProdCatData?.find((item) => item.ConfigName === 'General')
        ?.ConfigId,
      ProdSubCat: ProdSubCatData?.find((item) => item.ConfigName === 'General')
        ?.ConfigId,
      QtyBasedPrice: 'N',
      ProdQtywisePriceDetails: [],
      StockAvailable: 'N',
      TokenAvailable: 'N',
      InwardDate: new Date().toJSON(),
      SuppId: SupplierData?.find(
        (item) => item.SuppName?.toLowerCase() === 'self'
      )?.SuppId,
      AutoGenerateQr: 'N',
      QRCode: null,
      CreatedBy: UserId,
      ProdLogo: '',
      Cess: 0,
      ProdShortCode: record?.shortCode,
    };

    try {
      if (record?.prodId) {
        console.log('Updating Product');
      } else {
        const response = await dispatch(postProductData(postData)).unwrap();
        if (response?.data?.statusCode === 1) {
          const prodId = response?.data?.ProductDetails?.[0]?.ProdId;
          const size = response?.data?.ProductDetails?.[0]?.Size;
          const uomName = response?.data?.ProductDetails?.[0]?.UomName;
          const totalProducts = response?.data?.ProductDetails?.[0]?.TotalCount;
          setSearchText((currentSearchText) => {
            if (currentSearchText != null && currentSearchText !== '') {
              setCurrentPage(1);
              setTriggerState((prev) => prev + 1);
              if (searchInputRef.current) {
                searchInputRef.current.value = '';
              }
              return '';
            } else {
              setDataSource((prev) =>
                prev.map((item) =>
                  item.key === record.key
                    ? { ...item, prodId, size, uomName, totalProducts }
                    : { ...item, totalProducts }
                )
              );
            }
            return currentSearchText;
          });
          setMessageData('Product saved successfully!');
          setMessageType('success');
          return;
        }
      }
    } catch (error) {
      console.error('Error saving product:', error);
    }
  };

  const handlePrint = async (record) => {
    const exists = isShortCodeDuplicate(record?.shortCode, record?.prodId);
    if (exists) {
      setMessageData(
        'Short code already exists for another product. Cannot print.'
      );
      setMessageType('error');
      return;
    }
    setStickerPrintModalOpen(true);
    setLabelPrintData({
      ...record,
      MRP: record?.sellingPrice || 0,
      SellPrice: record?.sellingPrice || 0,
    });
    setProdId(record?.shortCode + '' + record?.sellingPrice);
  };

  const columns = useMemo(
    () => [
      {
        title: 'SL.No',
        width: 50,
        align: 'center',
        render: (_, __, index) => (currentPage - 1) * 10 + index + 1,
      },
      {
        title: () => (
          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
            Product Name
            <span>
              <FaStarOfLife size={10} color="red" className="requiredIcons" />
            </span>
          </div>
        ),
        dataIndex: 'productName',
        width: 150,
        render: (text, record) =>
          record.prodId && editingKey !== record.key ? (
            <div>{text}</div>
          ) : (
            <Input
              value={text}
              onChange={(e) =>
                handleChange(record.key, 'productName', e.target.value)
              }
              placeholder="Enter product name"
            />
          ),
      },
      {
        title: () => (
          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
            Short Code
            <span>
              <FaStarOfLife size={10} color="red" className="requiredIcons" />
            </span>
          </div>
        ),
        dataIndex: 'shortCode',
        width: 100,
        render: (text, record) =>
          record.prodId && editingKey !== record.key ? (
            <div>{text}</div>
          ) : (
            <Input
              value={text}
              onInput={(e) => {
                const originalValue = e.target.value;
                const hasNonAlpha = /[^a-zA-Z]/.test(originalValue);
                if (hasNonAlpha) {
                  setMessageData('Enter Alphabet Characters only');
                  setMessageType('warning');
                }
              }}
              onChange={(e) => {
                const value = e.target.value
                  .replace(/[^a-zA-Z]/g, '')
                  .toUpperCase();
                const exists = isShortCodeDuplicate(value, record?.prodId);
                if (exists && value) {
                  setMessageData(
                    'Short code already exists for another product'
                  );
                  setMessageType('error');
                }
                handleChange(record.key, 'shortCode', value);
              }}
              placeholder="Short Code"
            />
          ),
      },
      {
        title: () => (
          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
            Selling Price
            <span>
              <FaStarOfLife size={10} color="red" className="requiredIcons" />
            </span>
          </div>
        ),
        dataIndex: 'sellingPrice',
        width: 120,
        render: (text, record) =>
          record.prodId && editingKey !== record.key ? (
            <div>{text}</div>
          ) : (
            <Input
              value={text}
              onChange={(e) => {
                const value = e.target.value.replace(/[^0-9.]/g, '');
                const parts = value.split('.');
                const formatted =
                  parts.length > 2
                    ? `${parts[0]}.${parts.slice(1).join('')}`
                    : value;
                handleChange(record.key, 'sellingPrice', formatted);
              }}
              placeholder="0.00"
            />
          ),
      },
      {
        title: () => (
          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
            UOM
            <span>
              <FaStarOfLife size={10} color="red" className="requiredIcons" />
            </span>
          </div>
        ),
        dataIndex: 'uom',
        width: 60,
        render: (text, record) =>
          record.prodId && editingKey !== record.key ? (
            <div>
              {UomData?.find((item) => item.ConfigId === text)?.ConfigName ||
                '-'}
            </div>
          ) : (
            <Select
              disabled={record?.prodId}
              className="uom-select"
              value={text}
              onChange={(value) => handleChange(record.key, 'uom', value)}
              placeholder="UOM"
              style={{ width: '100%' }}
              options={UomData?.map((item) => ({
                value: item.ConfigId,
                label: item.ConfigName,
              }))}
            />
          ),
      },
      {
        title: () => (
          <div style={{ textWrap: 'nowrap', display: 'flex', gap: '4px  ' }}>
            Tax
            <span>
              <FaStarOfLife size={10} color="red" className="requiredIcons" />
            </span>
          </div>
        ),
        dataIndex: 'tax',
        width: 70,
        render: (text, record) => {
          if (record.prodId && editingKey !== record.key) {
            const tax = TaxData?.find((item) => item.TaxId === text);
            return (
              <div>
                {tax ? tax?.TaxIdName + ' - ' + `${tax?.TaxPercentage}%` : '-'}
              </div>
            );
          }

          return (
            <Select
              className="tax-select"
              value={text}
              disabled={record?.prodId}
              onChange={(value) => handleChange(record.key, 'tax', value)}
              placeholder="Tax"
              style={{ width: '100%' }}
              options={TaxData?.map((item) => ({
                value: item.TaxId,
                label: `${item.TaxIdName} - ${item.TaxPercentage}%`,
              }))}
            />
          );
        },
      },
      {
        title: 'Save / Print',
        width: 90,
        align: 'center',
        render: (_, record) => {
          const existingProduct = record?.prodId;

          return (
            <div
              className="directsaleBTN"
              style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}
            >
              {!existingProduct && (
                <Button
                  icon={<SaveOutlined />}
                  size="small"
                  disabled={existingProduct}
                  className="save-btn"
                  onClick={() => handleSave(record)}
                >
                  Save
                  {/* {!existingProduct ? 'Save' : 'Update'} */}
                </Button>
              )}
              {existingProduct && (
                <Button
                  icon={<PrinterOutlined />}
                  size="small"
                  disabled={!existingProduct}
                  onClick={() => handlePrint(record)}
                >
                  Print
                </Button>
              )}
            </div>
          );
        },
      },
      {
        title: 'Action',
        width: 60,
        align: 'center',
        render: (_, record) => {
          if (record?.activeStatus === 'A') {
            return (
              <DeleteOutlined
                onClick={() => handleDelete(record)}
                style={{ color: 'red', cursor: 'pointer', fontSize: '18px' }}
              />
            );
          } else {
            return (
              <IoMdRefresh
                style={{ color: 'blue', cursor: 'pointer', fontSize: '18px' }}
                onClick={() => handleDelete(record)}
              />
            );
          }
        },
      },
    ],
    [searchText, editingKey, productShortCodes, UomData, TaxData]
  );

  useEffect(() => {
    if (activeTab === 'directSale' && AppId && CompId && BranchId) {
      fetchDirectSaleProducts();
      fetchAllProductShortCodes();
    }
  }, [activeTab, AppId, BranchId, CompId, currentPage, triggerState]);

  useEffect(() => {
    if (dataSource.every((row) => row.prodId)) {
      handleAdd();
    }
  }, [dataSource]);

  useEffect(() => {
    const timer = setTimeout(() => {
      if (searchText) {
        fetchSearchedProducts();
      } else {
        setFilteredProducts([
          {
            key: 1,
            productName: '',
            shortCode: '',
            sellingPrice: '',
            uom: null,
            tax: null,
            prodId: null,
            size: null,
            uomName: null,
            activeStatus: 'A',
          },
        ]);
      }
    }, 500);

    return () => clearTimeout(timer);
  }, [searchText, AppId, BranchId, CompId]);

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (
        tableRef.current &&
        !tableRef.current.contains(event.target) &&
        !event.target.closest('.ant-select-dropdown')
      ) {
        setEditingKey(null);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

  useEffect(() => {
    if (
      activeTab === 'directSale' &&
      AppId &&
      CompId &&
      BranchId &&
      stickerPrintModalOpen
    ) {
      getBarcodeSessionData();
      fetchBarcodeTemplateDetails();
    }
  }, [activeTab, AppId, BranchId, CompId, stickerPrintModalOpen]);

  const fetchSearchedProducts = async () => {
    try {
      const data = {
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
        prodName: searchText,
      };
      const response = await dispatch(
        getDirectSaleSearchedProduct(data)
      )?.unwrap();
      if (
        response?.data?.data?.length > 0 &&
        response?.data?.statusCode === 1
      ) {
        const products = response?.data?.data?.map((item, index) => ({
          key: index + 1,
          productName: item.ProdName,
          shortCode: item.ProdShortCode,
          sellingPrice: item.SellPrice,
          uom: item.UOM,
          tax: item.TaxId,
          prodId: item.ProdId,
          activeStatus: item?.ActiveStatus,
          size: item.Size || 1,
          uomName: item.UomName || 'PCS',
          totalProducts: item?.TotalCount,
        }));
        setFilteredProducts([
          {
            key: products.length + 1,
            productName: '',
            shortCode: '',
            sellingPrice: '',
            uom: null,
            tax: null,
            prodId: null,
            size: null,
            uomName: null,
            activeStatus: 'A',
          },
          ...products,
        ]);
      } else {
        setFilteredProducts([
          {
            key: 1,
            productName: '',
            shortCode: '',
            sellingPrice: '',
            uom: null,
            tax: null,
            prodId: null,
            size: null,
            uomName: null,
            activeStatus: 'A',
          },
        ]);
      }
    } catch (error) {
      console.error(error?.message);
    }
  };

  const isShortCodeDuplicate = useCallback(
    (code, prodId) => {
      return productShortCodes.some(
        (item) =>
          item.ProdShortCode.toUpperCase() === code.toUpperCase() &&
          item.ProdId !== prodId
      );
    },
    [productShortCodes]
  );

  const fetchBarcodeTemplateDetails = async () => {
    const response = await dispatch(
      getBarcodeTemplate({ compId: CompId, appId: AppId, branchId: BranchId })
    ).unwrap();
    if (response?.data?.statusCode === 1 && response?.data?.data?.length > 0) {
      const { TemplateDetails } = response?.data?.data?.[0];
      setBarcodeTemplateDetails(TemplateDetails);
    } else {
      setBarcodeTemplateDetails([]);
    }
  };

  const getBarcodeSessionData = async () => {
    try {
      let response = await dispatch(getBarcodeSessionsIDs()).unwrap();
      if (
        response?.data?.statusCode === 1 &&
        response?.data?.data?.length > 0
      ) {
        setCrossData(
          response?.data?.data?.filter(
            (item) => !item.ConfigName?.includes('100X13 (55MM Printable Gold)')
          ) || []
        );
      } else {
        setCrossData([]);
      }
    } catch (error) {
      console.error('Error fetching barcode session data:', error);
    }
  };

  const fetchDirectSaleProducts = async () => {
    try {
      const data = {
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
        page: currentPage,
      };

      const response = await dispatch(getDirectSaleProducts(data))?.unwrap();
      if (
        response?.data?.statusCode === 1 &&
        response?.data?.data?.length > 0
      ) {
        const products = response?.data?.data?.map((item, index) => ({
          key: index + 1,
          productName: item.ProdName,
          shortCode: item.ProdShortCode,
          sellingPrice: item.SellPrice,
          uom: item.UOM,
          tax: item.TaxId,
          prodId: item.ProdId,
          activeStatus: item?.ActiveStatus,
          size: item.Size || 1,
          uomName: item.UomName || 'PCS',
          totalProducts: item?.TotalCount,
        }));
        setDataSource([
          {
            key: products.length + 1,
            productName: '',
            shortCode: '',
            sellingPrice: '',
            uom: null,
            tax: null,
            prodId: null,
            size: null,
            uomName: null,
            activeStatus: 'A',
          },
          ...products,
        ]);
      } else {
        setDataSource([]);
      }
    } catch (error) {
      console.error('Error fetching direct sale products:', error);
    }
  };

  const fetchAllProductShortCodes = async () => {
    try {
      const data = {
        AppId: AppId,
        CompId: CompId,
        BranchId: BranchId,
      };

      const response = await dispatch(getAllProductShortCodes(data))?.unwrap();
      if (
        response?.data?.statusCode === 1 &&
        response?.data?.data?.length > 0
      ) {
        setAllProductShortCodes(response?.data?.data);
      } else {
        setAllProductShortCodes([]);
      }

      console.log(response);
    } catch (error) {
      console.error('Error fetching product short codes:', error);
    }
  };

  const handlePageChange = (current) => {
    setCurrentPage(current);
  };

  const onFinish = async () => {
    const template = barcodeTemplateDetails?.find(
      (find) => find.SessionName === dropdownValue
    );
    const templateAvailable = template === undefined ? false : true;

    if (templateAvailable) {
      const checkComponent = (name) =>
        template?.OptionDetails?.some((some) => some.OptionName === name);
      const mrp = checkComponent('MRP');
      const barcode = checkComponent('Barcode');
      const color = checkComponent('Color');
      const eDate = checkComponent('E Date');
      const mDate = checkComponent('M Date');
      const sellingPrice = checkComponent('Selling Price');
      const productName = checkComponent('Product Name');
      const qrcode = checkComponent('Qrcode');
      const position = template.Position !== '' ? template.Position : '';
      const positionString =
        template.PositionString !== '' ? template.PositionString : '';

      setTemplateOptions({
        mrp: mrp,
        barcode: barcode,
        color: color,
        eDate: eDate,
        mDate: mDate,
        sellingPrice: sellingPrice,
        productName: productName,
        value: position,
        secondValue: positionString,
        qrcode: qrcode,
        codeType: template?.CodeType,
      });
    }

    setPrintReady(true);

    setTimeout(async () => {
      switch (dropdownValue) {
        case '15X15 6cross': // COMPLETE
          await printDiv(
            templateAvailable ? 'label-15X156cross' : 'StickerPrints0',
            style + getPageStyle(92)
          );
          handleModalClose();
          break;
        case '22X35 3cross': // Need to check
          await printDiv(
            templateAvailable ? '22X353cross' : 'StickerPrints1',
            style + getPageStyle(105)
          );
          handleModalClose();
          break;
        case '25X25 4cross': // COMPLETE
          await printDiv(
            templateAvailable ? '25X254cross' : 'StickerPrints2',
            style + getPageStyle(100)
          );
          handleModalClose();
          break;
        case '25X50 2cross': //Need to check
          await printDiv(
            templateAvailable ? '25X502cross' : 'StickerPrints3',
            style + getPageStyle(100)
          );
          handleModalClose();
          break;
        case '50X30 Single': // COMPLETE
          await printDiv(
            templateAvailable ? '50X30Single' : 'StickerPrints4',
            style
          );
          handleModalClose();
          break;
        case '50X25 Single': // COMPLETE
          await printDiv(
            templateAvailable ? '50X25Single' : 'StickerPrints5',
            style
          );
          handleModalClose();
          break;
        case '100X13 (55MM Printable)': //Need to check
          await printDiv(
            templateAvailable ? '100X13(55MMPrintable)' : 'StickerPrints6',
            style
          );
          handleModalClose();
          break;
        case '100X15 (70MM Printable)': // COMPLETE
          await printDiv(
            templateAvailable ? '100X15(70MMPrintable)' : 'StickerPrints7',
            style
          );
          handleModalClose();
          break;
        case '100X150': // COMPLETE
          await printDiv(
            templateAvailable ? '100X150' : 'StickerPrints8',
            style
          );
          handleModalClose();
          setPrintReady(false);
          break;
        default:
          alert('! Select correct cross ');
          setPrintReady(false);
      }
    }, 100);
  };

  const CoresOnChange = (params) => {
    setDropdownValue(params);
    formRef.current?.setFieldsValue({ Cross: params });
    const template = barcodeTemplateDetails?.find(
      (find) => find.SessionName === params
    );
    const checkComponent = (name) =>
      template?.OptionDetails?.some((some) => some.OptionName === name);
    const productName = checkComponent('Product Name');
    setPrintProductName(productName);
  };

  const CopiesOnChange = (params) => {
    setCopies(params);
    formRef.current?.setFieldsValue({ Copies: params });
  };

  const handleModalClose = () => {
    setCopies(null);
    setDropdownValue('');
    setStickerPrintModalOpen(false);
    setLabelPrintData(null);
    setNickName(null);
    setProdId(null);
    setMultiProduct(false);
    formRef?.current?.resetFields();
    setPrintReady(false);
  };

  const imageTagBarcodeAndQR = useCallback(
    (w = 'auto', fs = '6px', codeData = null) => {
      const currentCode = codeData || prodId;
      return (
        (templateOptions.barcode || templateOptions.qrcode) && (
          <>
            <img
              style={{ width: w }}
              src={
                templateOptions.codeType === 'B'
                  ? !multiProduct
                    ? barcodeBase64
                    : generateBarcode(currentCode)
                  : !multiProduct
                    ? qrBase64
                    : generateQRCode(QrandbarcodeDatas, currentCode)
              }
              alt="Barcode"
            />
            {templateOptions.codeType !== 'B' && (
              <p style={{ margin: '0', padding: '0', fontSize: fs }}>
                {currentCode}
              </p>
            )}
          </>
        )
      );
    },
    [templateOptions, multiProduct, barcodeBase64, qrBase64, prodId]
  );

  const onComplete = useCallback(() => {
    setMessageType(null);
    setMessageData(null);
  }, []);

  return (
    <Suspense fallback={<span>Loading ...</span>}>
      <div className="direct-sale-container">
        <Messages
          messageType={messageType}
          messageData={messageData}
          onComplete={onComplete}
        />
        <div className="bsreprintmodaltable-search">
          <input
            ref={searchInputRef}
            type="text"
            placeholder="Search Product / Short Code..."
            onChange={(e) => {
              setSearchText(e.target.value);
              setCurrentPage(1);
            }}
          />
        </div>
        <div
          style={{
            marginBottom: '10px',
            color: '#666',
            fontSize: '14px',
            fontStyle: 'italic',
          }}
        >
          Note: Click on a row to modify the product details
        </div>
        <div className="DirectSaleTable" ref={tableRef}>
          <Tables
            rowKey="prodId"
            data={
              searchText != null && searchText != ''
                ? filteredProducts
                : dataSource
            }
            dataSource={
              searchText != null && searchText != ''
                ? filteredProducts
                : dataSource
            }
            columns={columns}
            onRow={(record) => ({
              onClick: () => record.prodId && setEditingKey(record.key),
            })}
            ownPagination={true}
            pagination={{
              current: currentPage,
              onChange: handlePageChange,
              total:
                searchText != null && searchText != ''
                  ? filteredProducts?.length
                  : (dataSource[dataSource.length - 1]?.totalProducts || 0) + 1,
              pageSize: 11,
              showSizeChanger: false,
              hideOnSinglePage: true,
            }}
            bordered
          />
        </div>

        {stickerPrintModalOpen && (
          <StickerPrintModel
            open={stickerPrintModalOpen}
            handleCancel={handleModalClose}
            formRef={formRef}
            onFinish={onFinish}
            MultiCode={multiProduct}
            activeTab={null}
            setActiveTab={() => {}}
            selectedRecords={null}
            coresdata={crossData}
            dropdownValue={dropdownValue}
            CoresOnChange={CoresOnChange}
            barcodeTemplateDetails={barcodeTemplateDetails}
            detail={labelPrintData}
            proName={labelPrintData?.productName}
            nickName={nickName}
            ProdId={
              labelPrintData?.shortCode + '' + labelPrintData?.sellingPrice
            }
            size={labelPrintData?.size}
            // valueStyleColumn={valueStyleColumn}
            // secondValueStyle={secondValueStyle}
            // valueStyleRow={valueStyleRow}
            CopiesOnChange={CopiesOnChange}
            printProductName={printProductName}
            totalCopies={null}
            setstockWiseQrcode={null}
            setProductWiseQrcode={null}
            setNickName={setNickName}
            templateOptions={templateOptions}
          />
        )}

        {printReady && (
          <StickerPrintTemplates
            selectedRecords={null}
            copies={copies}
            nickName={nickName}
            proName={labelPrintData?.productName}
            ProdId={
              labelPrintData?.shortCode + '' + labelPrintData?.sellingPrice
            }
            size={labelPrintData?.size + ' ' + labelPrintData?.uomName}
            detail={labelPrintData}
            templateOptions={templateOptions}
            base64Image={qrBase64}
            QrandbarcodeDatas={null}
            MultiCode={multiProduct}
            generateQRCodeCopy={(code) => generateQRCodeCopy(null, code)}
            generateCodeImage={(code, codeType = 'Q') =>
              generateCodeImage(code, codeType, null)
            }
            imageTagBarcodeAndQR={imageTagBarcodeAndQR}
            dropdownValue={dropdownValue}
            barcodeTemplateDetails={barcodeTemplateDetails}
          />
        )}
      </div>
    </Suspense>
  );
};

export default DirectSale;