From 438ec6d75714e83f770a8c8d4ef252b42e8d938b Mon Sep 17 00:00:00 2001
From: Srinath <msrinath6109@gmail.com>
Date: Wed, 4 Feb 2026 13:44:37 +0530
Subject: [PATCH] Addes style and offter amt

---
 .../ProductCatlogue/CatalogueTemplate4.jsx    | 336 ++++++------------
 1 file changed, 110 insertions(+), 226 deletions(-)

diff --git a/src/Pages/ProductCatlogue/CatalogueTemplate4.jsx b/src/Pages/ProductCatlogue/CatalogueTemplate4.jsx
index d55ca25..04b48b5 100644
--- a/src/Pages/ProductCatlogue/CatalogueTemplate4.jsx
+++ b/src/Pages/ProductCatlogue/CatalogueTemplate4.jsx
@@ -2,8 +2,6 @@ import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { getSession } from '../../Services/Others';
 import Headerimg from '../../Images/cate-h.png';
-import { FaLocationDot } from 'react-icons/fa6';
-import { FaWhatsapp } from 'react-icons/fa';
 import {
   GlobalCataloguedata,
   Branchname,
@@ -15,7 +13,9 @@ const CatalogueTemplate4 = (props) => {
   const BrId = getSession('BranchId');
   const Globalcataloguedata1 = useSelector(GlobalCataloguedata);
   const [Branchdatas, setBranchdatas] = useState();
-  const [base64Image, setBase64Image] = useState(null);
+  console.log(Branchdatas, 'BranchdatasBranchdatas');
+
+  const ITEMS_PER_PAGE = 25; // 5x5 grid
 
   useEffect(() => {
     Branchdata();
@@ -31,239 +31,123 @@ const CatalogueTemplate4 = (props) => {
 
   function 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
+    return isNaN(num) ? '0.00' : num.toFixed(2);
   }
-  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;
+  // Split products into pages of 25 items each
+  const paginateProducts = (products) => {
+    const pages = [];
+    for (let i = 0; i < products.length; i += ITEMS_PER_PAGE) {
+      pages.push(products.slice(i, i + ITEMS_PER_PAGE));
     }
+    return pages;
   };
+  const pages = paginateProducts(Globalcataloguedata1 || []);
+  console.log(pages, 'pages574754783');
 
-  return (
-    <>
-      <div className="CTemplate4MasterDiv" id="CatLog4">
-        {/* Header Section */}
-        <div
-          className="page-header"
-          style={{
-            width: '100%',
-            backgroundColor: '#1b2570',
-            padding: '1rem',
-            textAlign: 'center',
-            position: 'relative',
-          }}
-        >
-          {Branchdatas?.map((item) => (
-            <div
-              key={item?.BrId}
-              style={{
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                gap: '1rem',
-              }}
-            >
-              <img
-                src={Headerimg}
-                style={{ width: '100%', height: 'auto' }}
-                alt="Header"
-              />
-              {props?.cat === 'Catalogue 4' && (
-                <div
-                  className="CTemplate4HeaderText2"
-                  style={{
-                    color: '#fce400',
-                    fontSize: '15px',
-                    fontWeight: '600',
-                  }}
-                >
-                  FLAT <span className="CTemplate4persent">50%</span> OFF
-                </div>
-              )}
+  // Header Component
+  const PageHeader = () => (
+    <div className="page-header">
+      <img src={Headerimg} alt="Header" className="header-image" />
+      {props?.cat === 'Catalogue 4' && (
+        <div className="header-offer-text">
+          {/* FLAT <span className="offer-percentage">SPECIAL SAVINGS</span> OFF */}
+          <span className="offer-percentagea">SPECIAL SAVINGS</span>
+        </div>
+      )}
+    </div>
+  );
+
+  // Footer Component
+  const PageFooter = () => (
+    <div className="page-footer">
+      <div className="footer-content">
+        <p className="footer-branch-name">{Branchdatas?.[0]?.BrName}</p>
+        <div className="footer-info-container">
+          {Branchdatas?.[0]?.Address1 && (
+            <div className="footer-address">
+              {Branchdatas?.[0]?.Address1}, {Branchdatas?.[0]?.Dist},{' '}
+              {Branchdatas?.[0]?.State}
             </div>
-          ))}
-        </div>
-
-        {/* Content Section */}
-        <div
-          className="content-section"
-          style={{ padding: '2rem', minHeight: '75vh' }}
-        >
-          <div
-            className="container-main"
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(5, 1fr)',
-              gridAutoRows: '140px',
-              justifyContent: 'center',
-              gap: '1.8rem',
-            }}
-          >
-            {Globalcataloguedata1?.map((item) => (
-              <div
-                key={item?.ProdName}
-                style={{
-                  position: 'relative',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'center',
-                  width: '100px',
-                  maxWidth: '100px',
-                  height: '140px',
-                  backgroundColor: '#fff',
-                  justifyContent: 'center',
-                  borderRadius: '8px',
-                }}
-              >
-                <img
-                  src={item?.ProdLogo}
-                  style={{ width: '50px', height: '40px', objectFit: 'cover' }}
-                  alt={item?.ProdName}
-                />
-                <a
-                  style={{
-                    fontSize: '12px',
-                    fontWeight: '600',
-                    textAlign: 'center',
-                  }}
-                >
-                  {item?.ProdName} {item?.UomName}
-                </a>
-                <div
-                  style={{
-                    backgroundColor: 'yellow',
-                    width: '100%',
-                    height: '2rem',
-                    position: 'absolute',
-                    bottom: '0px',
-                    borderRadius: '0 0px 8px 8px',
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                  }}
-                >
-                  <p style={{ fontSize: '12px', fontWeight: '500' }}>
-                    {props?.cat === 'Catalogue 4' &&
-                      `MRP:₹${safeRound(item?.SellPrice)}`}
-                  </p>
-                </div>
-                <div
-                  style={{
-                    borderRadius: '50%',
-                    backgroundColor: 'red',
-                    padding: '3px',
-                    width: '3rem',
-                    height: '3rem',
-                    display: 'flex',
-                    alignItems: 'center',
-                    position: 'absolute',
-                    top: '-7px',
-                    right: '-7px',
-                    justifyContent: 'center',
-                  }}
-                >
-                  <p
-                    style={{
-                      fontSize: props?.cat === 'Catalogue 6' ? '12px' : '10px',
-                      fontWeight: '600',
-                      color: '#fff',
-                      textAlign: 'center',
-                    }}
-                  >
-                    {props?.cat === 'Catalogue 6'
-                      ? ` ₹${safeRound(item?.SellPrice)} only`
-                      : '15% off on MRP'}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Footer Section */}
-        <div
-          className="page-footer"
-          style={{
-            width: '100%',
-            backgroundColor: '#fff',
-            borderTop: '1px solid #1292EE',
-            padding: '1rem',
-            position: 'relative',
-          }}
-        >
-          <p style={{ fontSize: '16px', fontWeight: '700', color: '#fff' }}>
-            {Branchdatas?.[0]?.BrName}
-          </p>
-          <div
-            style={{
-              display: 'flex',
-              gap: '1rem',
-              flexDirection: 'column',
-              alignItems: 'flex-end',
-              width: '96%',
-            }}
-          >
-            {Branchdatas?.[0]?.Address1 && (
-              <div
-                style={{
-                  fontSize: '9px',
-                  backgroundColor: '#252a69',
-                  color: '#fff',
-                  padding: '0.5rem',
-                  textAlign: 'center',
-                }}
-              >
-                {Branchdatas?.[0]?.Address1}, {Branchdatas?.[0]?.Dist},{' '}
-                {Branchdatas?.[0]?.State}
-              </div>
-            )}
-            {Branchdatas?.[0]?.BrMobile && (
-              <div
-                className="CTemplate5Fotterphone"
-                style={{
-                  fontSize: '9px',
-                  backgroundColor: '#252a69',
-                  color: '#fff',
-                  padding: '0.5rem',
-                  textAlign: 'center',
-                }}
-              >
-                FREE HOME DELIVERY: {Branchdatas?.[0]?.BrMobile}
-              </div>
-            )}
-          </div>
+          )}
+          {/* {Branchdatas?.[0]?.BrMobile && (
+            <div className="footer-phone">
+              FREE HOME DELIVERY: {Branchdatas?.[0]?.BrMobile}
+            </div>
+          )} */}
         </div>
       </div>
-    </>
+    </div>
+  );
+
+  // Product Card Component
+  const getOfferText = (item, cat) => {
+    if (cat === 'Catalogue 6') {
+      return `₹${safeRound(item.SellPrice)} only`;
+    }
+    const offer = item?.OfferDtl?.[0];
+    if (!offer) return null;
+
+    if (offer.OfferName === 'Product offer') {
+      if (offer.ValueType === 'P') {
+        return `${offer.OfferAmt}% OFF`;
+      }
+      if (offer.ValueType === 'F') {
+        return `₹${offer.OfferAmt} OFF`;
+      }
+    }
+    return offer.OfferName;
+  };
+
+  const ProductCard = ({ item }) => (
+    <div className="product-card">
+      <img
+        src={item?.ProdLogo}
+        alt={item?.ProdName}
+        className="product-image"
+      />
+      <div className="product-name">
+        {item?.ProdName} {item?.UomName}
+      </div>
+      <div className="product-price">
+        {props?.cat === 'Catalogue 4'
+          ? `MRP: ₹${safeRound(item?.SellPrice)}`
+          : item?.OfferDtl?.[0]?.OfferName ? (
+            <div className="product-original-price">{item?.OfferDtl?.[0]?.OfferName}</div>) : 'No Offer'
+        }
+      </div>
+      {(
+        props?.cat === 'Catalogue 6' ||
+        item?.OfferDtl?.length > 0
+      ) && (
+          <div className="product-offer">
+            {getOfferText(item, props?.cat)}
+          </div>
+        )}
+
+    </div>
+  );
+
+  return (
+    <div className="catalogue-template-4" id="CatLog4">
+      {pages.map((pageProducts, pageIndex) => (
+        <div key={pageIndex} className="catalogue-page">
+          <PageHeader />
+          <div className="content-section-4">
+            <div className="product-grid">
+              {pageProducts.map((item, index) => (
+                <ProductCard key={index} item={item} />
+              ))}
+            </div>
+          </div>
+
+          <PageFooter />
+        </div>
+      ))}
+    </div>
   );
 };
 
-export default CatalogueTemplate4;
+export default CatalogueTemplate4;
\ No newline at end of file