From d94188656efbba98de20c5ebac5b9100416d3b69 Mon Sep 17 00:00:00 2001
From: Srinath <msrinath6109@gmail.com>
Date: Wed, 4 Feb 2026 13:42:27 +0530
Subject: [PATCH] added Offer catelogue

---
 .../ProductCatlogue/CatalogueTemplate3.jsx    | 613 ++----------------
 1 file changed, 53 insertions(+), 560 deletions(-)

diff --git a/src/Pages/ProductCatlogue/CatalogueTemplate3.jsx b/src/Pages/ProductCatlogue/CatalogueTemplate3.jsx
index 2346381..9e6dd8b 100644
--- a/src/Pages/ProductCatlogue/CatalogueTemplate3.jsx
+++ b/src/Pages/ProductCatlogue/CatalogueTemplate3.jsx
@@ -1,595 +1,88 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { printDiv, getSession } from '../../Services/Others';
-import shopico from '../../Images/Assets/shop.png';
-
-import {
-  GlobalCataloguedata,
-  Branchname,
-} from '../../Features/ProductCatlog/ProductCatlogue';
-import Footerimg from '../../Images/cate-f.png';
+import { GlobalCataloguedata, Branchname } from '../../Features/ProductCatlog/ProductCatlogue';
 import best from '../../Images/Assets/Cateloge3HeaderImage.svg';
 import '../../Styles/ProductCatalogue/CatalogueTemplate3.scss';
-// import "../../Fonts/OtherFonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf"
 import { FaPhoneVolume } from 'react-icons/fa';
 import { FaLocationDot } from 'react-icons/fa6';
+import { getSession } from '../../Services/Others';
 
-const CatelogueTemplate5 = () => {
+const CatelogueTemplate3 = () => {
   const dispatch = useDispatch();
   const BrId = getSession('BranchId');
   const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
   const [Branchdatas, setBranchdatas] = useState();
-  const [base64Image, setBase64Image] = useState(null);
-
-  const printDocument = () => {
-    window.print();
-  };
 
   useEffect(() => {
+    const Branchdata = async () => {
+      const response = await dispatch(Branchname({ BrId })).unwrap();
+      if (response?.data?.statusCode === 1) {
+        setBranchdatas(response?.data?.data);
+      }
+    };
     Branchdata();
-  }, []);
+  }, [BrId, dispatch]);
 
-  const Branchdata = async () => {
-    let data = { BrId: BrId };
-
-    const response = await dispatch(Branchname(data)).unwrap();
-    if (response?.data?.statusCode == 1) {
-      setBranchdatas(response?.data?.data);
-    }
-  };
-
-  function safeRound(amountStr) {
+  const safeRound = (amountStr) => {
     if (amountStr == null) return '0.00';
-
     const cleaned = String(amountStr).replace(/[^0-9.-]+/g, '');
     const num = Number(cleaned);
-
-    return isNaN(num) ? '0.00' : num.toFixed(2); // return as string with 2 decimals
-  }
-
-  useEffect(() => {
-    async function fetchImage() {
-      try {
-        const base64 = await imageUrlToBase64(Branchdatas?.[0]?.CompLogo);
-        setBase64Image(base64);
-      } catch (error) {
-        console.log('Error converting image', error.message);
-      }
-    }
-    if (Branchdatas?.[0]?.CompLogo) {
-      fetchImage();
-    }
-  }, [Branchdatas?.[0]?.CompLogo]);
-
-  const imageUrlToBase64 = async (url) => {
-    try {
-      const response = await fetch(url);
-      const blob = await response.blob();
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onloadend = () => resolve(reader.result);
-        reader.onerror = reject;
-        reader.readAsDataURL(blob);
-      });
-    } catch (error) {
-      console.error('Error fetching or converting image:', error);
-      throw error;
-    }
-  };
-
-  const style = `<style>  
-
- 
-
-  
-    .CatelogueTemp3-MasterDiv {
-        font-family: 'Inconsolata', monospace; 
-        width: inherit;
-        background: radial-gradient(circle at center, #1A0001, #320000); 
-    }
-    
-    .headerFooterStyle  {
-        display: block;
-        position: fixed;
-        text-align: center;
-        background-color: #f0f0f0;  
-        font-size: 14px;
-      };
-    
-    .CatelogueTemp3-MasterDiv .page-header, .page-header-space {
-      height: 100px;
-    }
-    
-  
-    
-    .CatelogueTemp3-MasterDiv .page-footer {
-      position: fixed;
-      bottom: 0;
-      z-index: 1;
-      border-top: #1292EE solid 1px;
-      width: inherit;  
-      background:  #fff; 
-    }
-    
-    .CatelogueTemp3-MasterDiv .page-header {
-      position: fixed;
-      top: 0mm;
-      width: inherit; 
-      border-bottom: #1292EE solid 1px;
-      color: #ffffff; 
-      background-image: radial-gradient(circle,);
-    }
-     .ItemCard{
-        width: inherit;
-        display: flex;
-     }
-
-     .CatelogueTemp3-MasterDiv .img {
-        height: 51px;
-        left: 6px;
-        object-fit: cover;
-        position: absolute;
-        top: 25px;
-        width: 76px;
-    }
-
-    .CatelogueTemp3-MasterDiv .img1 {
-        height: 40px;
-        left: 30px;
-        object-fit: cover;
-        position: absolute;
-        top: 71px;
-        width: 47px;
-    }
- 
-    .CatelogueTemp3-MasterDiv .text-wrapper1 {
-        color: black;
-        font-family: "Montserrat", sans-serif;
-        font-size: 7px;
-        font-weight: 800;
-        left: 42px;
-        letter-spacing: 0;
-        line-height: normal;
-        position: absolute;
-        top: 97px;
-    }
-    .CatelogueTemp3-MasterDiv .itemcardGroup {
-        left: 1px;
-        position: relative;
-        top: 210px;
-        width: 570px;
-        height: inherit;
-        border-radius: 17px;
-        background-color: maroon;
-    }
-    
-    .itemcardGroup {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        column-gap: 0.5rem;
-        row-gap: 0.5rem;
-        padding: 1rem 0rem;
-    }
-    
-    .CatelogueTemp3-MasterDiv .div1 {
-        background-color: maroon;
-        overflow: scroll;
-        position: relative;
-        width: 595px;
-    }
-    
-    .CatelogueTemp3-MasterDiv .overlap-group {
-        background-color: #ececec;
-        border-radius: 19.5px;
-        height: 104px;
-        left: 7px;
-        // position:relative
-        width: 95px;
-    }
-    .CatelogueTemp3-MasterDiv .text-wrapper {
-        color: white;
-        font-family: "Montserrat", sans-serif;
-        font-size: 14px;
-        font-weight: 800;
-        left: 20px;
-        letter-spacing: 0;
-        line-height: normal;
-        top: 80px;
-        border-radius: 60px;
-        height: 51px;
-        width: 51px;
-        background: red;
-        text-align: right;
-        align-items: center;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-    .textDesign {
-        position: absolute;
-        top: 52px;
-        font-family: "fantasy";
-        font-size: 18px;
-        width: 173px;
-        transform: rotate(-15deg);
-        text-transform: uppercase;
-        text-shadow: 6px 6px 4px rgba(0, 0, 1, 0.5);
-    }
-    .CatelogueTemp3-MasterDiv .text-wrapper-4 {
-        color: #000000;
-        font-family: "Montserrat", sans-serif;
-        font-size: 8.1px;
-        font-weight: 700;
-        left: 12px;
-        letter-spacing: 0;
-        line-height: normal;
-        position: absolute;
-        top: 4px;
-        width: 84px;
-        height: 34px;
-    }
-    .text-wrapper-10{
-        font-size: 17px;
-        font-weight: 900;
-    }
-    .text-wrapper-12{
-        text-align: left;
-    }
-      
-.tableContainer {
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: 30px;
-  row-gap: 31px;
-}
-.Table {
-  width: 712px;
-  background-color: #8b181a;
-  height: 100vh;
-  border-radius: 10px;
-  padding-top: 10px; 
-}
-  </style>`;
-
-  const PrintA4 = async () => {
-    await printDiv('CatelogueTemplate5', style);
+    return isNaN(num) ? '0.00' : num.toFixed(2);
   };
 
   return (
-    <div
-      id="CatLog3"
-      style={{ display: 'flex', justifyContent: 'center', height: '100vh' }}
-    >
-      {/* <div
-        className="CatelogueTemp3-MasterDiv1"
-        style={{ width: "100%" }}
-      >
-        {Branchdatas?.map((item) => (
-          <div
-            className="page-header1"
-            style={{
-              textAlign: "center",
-              display: "flex",
-              justifyContent: "space-between",
-              backgroundColor: "maroon",
-              height: "150px",
-              border: "none",
-              position: "fixed",
-              top: "0",
-              width: "inherit",
-            }}
-          >
-            <div className="CatelogueTemp3Branchdetails1">
-              <div className="group-61">
-                <div
-                  style={{ fontSize: "20px", textAlign: "left",fontWeight: '700' }}
-                >
-                  {item.BrName}
-                </div>
-                <div style={{ fontSize: "13.2px", fontWeight: '700' }}>
-                  <div style={{textAlign:'left'}}>{item.BrMobile}</div>
-                  <div style={{ textAlign: "left" }}>
-                    {item.Address1 != null && item.Address1 + ','}{item.City != null && item.City + ','}{item.Dist != null && item.Dist + ','}{item.State != null && item.State}
+    <div id="CatLog3" className="catlog3">
+      <div className="catlog-container">
+        {/* Branch Header */}
+        <div className="branch-header">
+          {Branchdatas?.map((item, index) => (
+            <div className="branch-item" key={index}>
+              <div className="branch-info">
+                <div className="branch-name">{item.BrName}</div>
+                {item.BrMobile && (
+                  <div className="branch-mobile">
+                    <FaPhoneVolume /> {item.BrMobile}
                   </div>
-                </div>
-              </div> 
-            </div>
-            <div>
-              <img
-                className="imgCentre1"
-                src={best}
-                style={{ width: "170px" }}
-              />
-              <div style={{
-                position: 'absolute',
-                top: '52px',
-                fontFamily: "fantasy",
-                fontSize: '18px',
-                width: '173px',
-                transform: 'rotate(-15deg)',
-                textTransform: 'uppercase',
-                textShadow: '6px 6px 4px rgba(0, 0, 1, 0.5)'
-              }}>BEST DEALS</div>
-            </div>
-          </div>
-        ))}
-        <table
-          className="CatelogueTemp3-MasterDiv1"
-          style={{ width: '100%', height: "100vh", backgroundColor: "maroon" }}
-        >
-          <thead style={{ width: '100%', height: "150px" }}>
-            <tr>
-              <td>
-                <div className="page-header-space1"> </div>
-              </td>
-            </tr>
-          </thead>
-
-          <tbody style={{ width: '100%', display: "flex" }}>
-            <tr>
-              <td style={{ width: "100%", padding: "0rem 1rem" }}>
-                <div
-                  className="page1"
-                  style={{ lineHeight: "1", width: "inherit", display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '1rem 0rem' }}
-                >
-                  <br />
-
-                  <table className="CatelogueTemp3Table1">
-                    <tbody>
-                      <div className="CatelogueTemp3tableBody1">
-                        {Globalcataloguedata1?.map((item) => (
-                          <div className="overlap-group1">
-                            <div className="overlap-21">
-                              <img
-                                className="img1"
-                                src={item?.ProdLogo}
-                                alt=''
-                              />
-                            </div>
-                            <div className="text-wrapper-41">
-                              {item?.ProdName} {item?.UomName}
-                            </div>
-                            <div className="text-wrapper1" >
-                              <span style={{ fontSize: '10px' }}>&#8377;</span>
-                              <span>{item?.SellPrice}</span>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-
-                    </tbody>
-                  </table>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div> */}
-
-      <div
-        onClick={PrintA4}
-        style={{
-          width: '100%',
-          backgroundColor: '#310000',
-          fontFamily: 'Montserrat,sans-serif',
-          height: 'auto',
-        }}
-      >
-        <div
-          style={{
-            textAlign: 'center',
-            borderBottom: '#fff',
-            width: '100%',
-            display: 'flex',
-            backgroundColor: '#800000',
-            color: '#fff',
-          }}
-        >
-          {Branchdatas?.map((item) => (
-            <>
-              <div
-                style={{
-                  zIndex: '2',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                  width: '100%',
-                  padding: '0rem 1rem',
-                }}
-              >
-                <div style={{ textAlign: 'left' }}>
-                  <div
-                    style={{
-                      fontFamily: 'Montserrat,sans-serif',
-                      fontSize: '22px',
-                      fontWeight: '600',
-                    }}
-                  >
-                    {item.BrName}
+                )}
+                {(item.Address1 || item.City || item.Dist || item.State) && (
+                  <div className="branch-address">
+                    <FaLocationDot />
+                    {item.Address1 && item.Address1 + ', '}
+                    {item.City && item.City + ', '}
+                    {item.Dist && item.Dist + ', '}
+                    {item.State && item.State}
                   </div>
-                  {/* <div style={{ fontSize: '16px' }}> <FaPhoneVolume /> {item.BrMobile}</div> */}
-                  {item.BrMobile && (
-                    <div style={{ fontSize: '16px' }}>
-                      <FaPhoneVolume /> {item.BrMobile}
-                    </div>
-                  )}
-                  <div style={{ fontSize: '12px' }}>
-                    {/* <FaLocationDot /> {item.Address1 != null && item.Address1 + ','}{item.City != null && item.City + ','}{item.Dist != null && item.Dist + ','}{item.State != null && item.State} */}
-                    {(item.Address1 ||
-                      item.City ||
-                      item.Dist ||
-                      item.State) && (
-                      <div>
-                        <FaLocationDot />
-                        {item.Address1 && item.Address1 + ', '}
-                        {item.City && item.City + ', '}
-                        {item.Dist && item.Dist + ', '}
-                        {item.State && item.State}
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                <img
-                  className=""
-                  style={{ width: '170px', position: 'relative' }}
-                  src={best}
-                />
-
-                <a
-                  style={{
-                    position: 'absolute',
-                    right: '10px',
-                    fontFamily: 'Montserrat,sans-serif',
-                    fontSize: '26px',
-                    width: '173px',
-                    fontWeight: '700',
-                    transform: 'rotate(-10deg)',
-                    textTransform: 'uppercase',
-                    textShadow: '6px 6px 4px rgba(0, 0, 1, 0.5)',
-                  }}
-                >
-                  FRESH <br /> DEALS
-                </a>
+                )}
               </div>
-            </>
+
+              <img className="branch-logo" src={best} alt="logo" />
+
+              <div className="fresh-deals">
+                FRESH <br /> DEALS
+              </div>
+            </div>
           ))}
         </div>
 
-        {/* <div className="page-footer" style={{backgroundColor:'#800000', color:'#fff'}}>
-          <div className=' '>
-              <div style={{ display: 'flex', flexDirection: 'column' }}>
-                  
-                  <p style={{ marginLeft: '2rem', fontSize: '16px', fontWeight: '700' }}>{Branchdatas?.[0]?.BrName}</p>
+        {/* Catalogue Grid */}
+        <div className="catalogue-grid-wrapper">
+          {Globalcataloguedata1?.map((item, index) => (
+            <div className="catalogue-item" key={index}>
+              <div className="product-name">
+                {item?.ProdName} {item?.UomName}
               </div>
 
-                
-              <div className='CTemplate5Fotterinfo' >
-                  
-                  <div className='CTemplate5Fotterphone'>
-                      <div style={{ display: 'flex', flexDirection: 'column', fontSize: '9px' }}>
-                          <div>FREE HOME</div>
-                          <div>DELEVERY</div>
-                      </div> 
-                  </div>
-              </div> 
-          </div>
-      </div> */}
+              {item?.ProdLogo && (
+                <img className="product-logo" src={item?.ProdLogo} alt={item?.ProdName} />
+              )}
 
-        <table className="" style={{ width: '100%' }}>
-          <thead>
-            <tr>
-              <td style={{ width: '100%' }}>
-                <div
-                  className=""
-                  style={{ height: '20px', backgroundColor: '#310000' }}
-                >
-                  {' '}
-                </div>
-              </td>
-            </tr>
-          </thead>
-
-          <tbody>
-            <tr>
-              <td style={{ width: '100%' }}>
-                <div style={{ lineHeight: '1.5', padding: '0rem 0.5rem' }}>
-                  <div
-                    style={{
-                      display: 'grid',
-                      gridTemplateColumns:
-                        'repeat(auto-fit, minmax(100px, 1fr))',
-                      gridAutoRows: '123px',
-                      justifyContent: 'center',
-                      gap: '0.3rem',
-                      backgroundColor: '#800000',
-                      padding: '0.1rem 0.1rem',
-                    }}
-                  >
-                    {Globalcataloguedata1?.map((item) => (
-                      <>
-                        <div
-                          style={{
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            width: '100px',
-                            maxWidth: '100px',
-                            height: '110px',
-                            padding: '5px',
-                            maxHeight: '140px',
-                            backgroundColor: '#fff',
-                            justifyContent: 'space-evenly',
-                            borderRadius: '16px',
-                            position: 'relative',
-                          }}
-                        >
-                          <a
-                            style={{
-                              fontSize: '12px',
-                              fontWeight: '600',
-                              textAlign: 'center',
-                              fontFamily: 'Montserrat,sans-serif',
-                            }}
-                          >
-                            {item?.ProdName} {item?.UomName}{' '}
-                          </a>
-
-                          <div>
-                            <img
-                              // className="Cateimg"
-                              style={{
-                                width: '50px',
-                                objectFit: 'cover',
-                                height: '40px',
-                              }}
-                              src={item?.ProdLogo}
-                              alt=""
-                            />
-                          </div>
-
-                          <a
-                            style={{
-                              fontSize: '12px',
-                              fontWeight: '600',
-                              position: 'absolute',
-                              bottom: '5px',
-                              right: '5px',
-                              minWidth: '35px',
-                              width: 'max-content',
-                              height: '35px',
-                              backgroundColor: 'red',
-                              borderRadius: '20px',
-                              color: '#fff',
-                              display: 'flex',
-                              alignItems: 'center',
-                              justifyContent: 'center',
-                              padding: '0rem 0.3rem',
-                            }}
-                          >
-                            ₹{safeRound(item?.SellPrice)}
-                          </a>
-                        </div>
-                      </>
-                    ))}
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-
-          <tfoot>
-            <tr>
-              <td>
-                <div style={{ height: '80px' }}></div>
-              </td>
-            </tr>
-          </tfoot>
-        </table>
+              <div className="product-price">₹{safeRound(item?.SellPrice)}</div>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
 };
 
-export default CatelogueTemplate5;
+export default CatelogueTemplate3;