diff --git a/src/Pages/ProductCatlogue/Productcatalogue.jsx b/src/Pages/ProductCatlogue/Productcatalogue.jsx new file mode 100644 index 0000000..f22ae87 --- /dev/null +++ b/src/Pages/ProductCatlogue/Productcatalogue.jsx @@ -0,0 +1,3046 @@ +import { useDispatch } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; +import Buttons from '../../Components/Forms/Buttons'; +import { + ArrowRightOutlined, + DownloadOutlined, + EditOutlined, + MailOutlined, + MessageOutlined, + WhatsAppOutlined, +} from '@ant-design/icons'; +import { changeBreadCrumb } from '../../Features/AppPage/CenterPage'; +import { useEffect, useState } from 'react'; +import { Skeleton, Form, Input, Button } from 'antd'; +import './Productcatalogue.scss'; +import FormHeader from '../PageComponents/FormHeader'; +import CatalogueTemplate1 from './CatalogueTemplate1'; +import CatalogueTemplate2 from './CatalogueTemplate2'; +import CatalogueTemplate3 from './CatalogueTemplate3'; +import CatalogueTemplate4 from './CatalogueTemplate4'; +import CatalogueTemplate5 from './CatalogueTemplate5'; +import { DropDowns } from '../../Components/Forms/DropDown'; +import { getSession, pdfDiv, printDiv } from '../../Services/Others'; +import { Emailsend } from '../../Features/PurchaseOrder/PurchaseOrder'; +import { DefaultModal } from '../../Components/Modal/DefaultModal'; +import { + changeCataloguecheckboxdata, + changeCataloguedata, + deleteProductCatalogue, + GetProductCatalogueByTypeData, + ProductCatalogue, +} from '../../Features/ProductCatlog/ProductCatlogue'; +const subDirectory = import.meta.env.ENV_BASE_URL; + +const Productcatlogue = () => { + const navigate = useNavigate(); + const dispatch = useDispatch(); + const [form] = Form.useForm(); + const CompId = getSession('CompId'); + const BranchId = getSession('BranchId'); + const AppId = getSession('AppId'); + const UserId = getSession('UserId'); + const [iSEmail, setiSEmail] = useState(false); + const [template, setTemplate] = useState(); + const [selectedTemplateData, setSelectedTemplateData] = useState(); + const [catelogueData, setCatelogueData] = useState(''); + + const items = [ + { + name: 'Home', + link: `${subDirectory}app-page/home`, + }, + { + name: 'Catalogue', + link: `${subDirectory}setting/product-catalogue`, + }, + ]; + + useEffect(() => { + dispatch(changeBreadCrumb({ items: items })); + Configdata(); + }, []); + + const Configdata = async () => { + let response = await dispatch(ProductCatalogue()).unwrap(); + if (response?.data?.statusCode == 1) { + setTemplate(response?.data?.data); + } + }; + const handleDropDownChange = (value) => { + dispatch(changeCataloguedata([])); + if (value) { + const selectedOption = template?.find((item) => item?.ConfigId === value); + if (selectedOption) { + getProductCataloguedata(value); + setSelectedTemplateData({ + ConfigId: selectedOption.ConfigId, + ConfigName: selectedOption.ConfigName, + }); + } + } else { + setSelectedTemplateData(''); + } + }; + + const handleEditCatalogue = (editData) => { + navigate(`${subDirectory}setting/product-catalogue-list`, { + state: { editMode: true, catalogueData: editData }, + }); + }; + + const getProductCataloguedata = async (config) => { + const data = { + AppId, + BranchId, + CompId, + CatalogType: config, + }; + const response = await dispatch( + GetProductCatalogueByTypeData(data) + ).unwrap(); + if (response?.data?.statusCode == 1) { + const catalogueData = response?.data?.data?.map((item, index) => ({ + key: index, + selectedRowKeys: index, + ProdId: item.ProdId, + templateName: item.templateName, + ProdName: item.ProdName, + Price: item.MRP, + UomName: `${item.Size} ${item.UomName}`, + ProdLogo: item.ProdLogo, + OfferDtl: item.OfferDtl, + ...item, + })); + console.log(catalogueData, 'catalogueDataswdsads'); + + dispatch(changeCataloguedata(catalogueData)); + setCatelogueData(catalogueData); + // setCatelogueData(catalogueData) + } else { + setCatelogueData(''); + } + }; + + const deleteCatelogue = async () => { + const data = { + AppId, + BranchId, + CompId, + CatalogType: selectedTemplateData?.ConfigId, + ActiveStatus: 'D', + UpdatedBy: UserId, + }; + const response = await dispatch(deleteProductCatalogue(data)).unwrap(); + if (response?.data?.statusCode == 1) { + setCatelogueData(''); + dispatch(changeCataloguedata()); + } + }; + const currentSelectedTemplate = selectedTemplateData?.ConfigName; + + const CatLog1 = ``; + + const CatLog2 = ``; + + const CatLog3 = ``; + + const CatLog4 = ``; + + const CatLog5 = ``; + + const CatLog6 = ``; + + const handleDownload = async () => { + const StyleName = { + 'Catalogue 1': CatLog1, + 'Catalogue 2': CatLog2, + 'Catalogue 3': CatLog3, + 'Catalogue 4': CatLog4, + 'Catalogue 5': CatLog5, + 'Catalogue 6': CatLog6, + }; + + const StyleIDs = { + 'Catalogue 1': 'CatLog1', + 'Catalogue 2': 'CatLog2', + 'Catalogue 3': 'CatLog3', + 'Catalogue 4': 'CatLog4', + 'Catalogue 5': 'CatLog5', + 'Catalogue 6': 'CatLog6', + }; + + const StyleId = StyleIDs[selectedTemplateData?.ConfigName]; + const Style = StyleName[selectedTemplateData?.ConfigName]; + + await printDiv(StyleId, Style); + }; + const handleEmailClick = async (ProductDetails, record) => { + const toEmail = record?.custEmail; + const StyleName = { + 'Catalogue 1': CatLog1, + 'Catalogue 2': CatLog2, + 'Catalogue 3': CatLog3, + 'Catalogue 4': CatLog4, + 'Catalogue 5': CatLog5, + 'Catalogue 6': CatLog6, + }; + + const StyleIDs = { + 'Catalogue 1': 'CatLog1', + 'Catalogue 2': 'CatLog2', + 'Catalogue 3': 'CatLog3', + 'Catalogue 4': 'CatLog4', + 'Catalogue 5': 'CatLog5', + 'Catalogue 6': 'CatLog6', + }; + + const StyleId = StyleIDs[selectedTemplateData?.ConfigName]; + const Style = StyleName[selectedTemplateData?.ConfigName]; + if (toEmail) { + try { + const blob = await pdfDiv(StyleId, Style); + console.log(blob, 'blobblob'); + + const payload = { + fileBlob: blob, + toEmail: toEmail, + type: 'Catalogue', + messageTemplatesList: [], + }; + + const res = await dispatch(Emailsend(payload))?.unwrap(); + + console.log('✅ API Response:', res?.data || res); + setMessage({ type: 'success', data: 'Email sent successfully' }); + } catch (error) { + setMessage({ type: 'error', data: 'Email failed to send' }); + console.error('❌ Email send failed:', error); + } + } else { + setiSEmail(true); + } + }; + + const handleSendEmailWithEnteredEmail = async (values) => { + const recordWithEmail = { custEmail: values.email }; + setiSEmail(false); + await handleEmailClick(catelogueData, recordWithEmail); + setPendingRecord(null); + form.resetFields(); + }; + // const handleWhatsApp = () => { + // const message = `Check out our catalogue: ${currentSelectedTemplate} with ${combinedData.length} products`; + // const url = `https://wa.me/?text=${encodeURIComponent(message)}`; + // window.open(url, '_blank'); + // }; + + // const handleMessage = () => { + // const message = `Check out our catalogue: ${currentSelectedTemplate} with ${combinedData.length} products`; + // if (navigator.share) { + // navigator.share({ text: message }); + // } else { + // navigator.clipboard.writeText(message); + // alert('Message copied to clipboard!'); + // } + // }; + + return ( +
+
+ +
+
+
+ ({ + value: option?.ConfigId, + label: option?.ConfigName, + }))} + label="Catalogue" + className="field-DropDown" + onChangeFunction={(e) => { + handleDropDownChange(e); + }} + valueData={currentSelectedTemplate} + /> +
+ {/* Selected Catalogue Edit Section */} + {catelogueData && ( +
+ } + size="small" + handleSubmit={() => handleEditCatalogue(catelogueData)} + /> +
+ )} + + {/* Selected Catalogue Delete Section */} + {catelogueData && ( +
+ } + size="small" + handleSubmit={() => deleteCatelogue()} + /> +
+ )} +
+ } + htmlType={true} + handleSubmit={() => { + dispatch(changeCataloguedata('')); + dispatch(changeCataloguecheckboxdata('')); + navigate(`${subDirectory}setting/product-catalogue-list`); + }} + /> +
+
+ {catelogueData && ( + + )} + {/* + */} + {catelogueData && ( + + )} +
+
+
+
+ {(() => { + switch (currentSelectedTemplate) { + case 'Catalogue 1': + return ; + case 'Catalogue 2': + return ; + case 'Catalogue 3': + return ; + case 'Catalogue 4': + return ( + + ); + case 'Catalogue 5': + return ; + case 'Catalogue 6': + return ( + + ); + default: + return ( +
+ +

+ Please select a catalogue template from history +

+
+ ); + } + })()} +
+
+ setiSEmail(false)} + footer={false} + children={ +
+
+ + + + + +
+
+ } + /> +
+ ); +}; + +export default Productcatlogue;