tee3apps-cms-sdk-react 0.0.32 → 0.0.34

package/src/PageComponents/Visual-Components/GroupProductComponent.tsx

@@ -56,15 +56,19 @@ const getPriceFromPricingArray = (pricingArray: any[]): number => {
   return 0;
 };
 
+const resolvePrice = (priceData: any): number => {
+  if (!priceData) return 0;
+  if (Array.isArray(priceData)) {
+    return getPriceFromPricingArray(priceData);
+  }
+  return getPriceValue(priceData);
+};
+
 // Utility function to get MRP and Selling Price from product pricing object
 const getProductPrices = (product: any) => {
   // Use pricing object only
-  const mrp = product.pricing?.mrp ? getPriceFromPricingArray(product.pricing.mrp) : 0;
-  const sellingPrice = product.pricing?.nlcPrice
-    ? getPriceFromPricingArray(product.pricing.nlcPrice)
-    : product.pricing?.costPrice
-      ? getPriceFromPricingArray(product.pricing.costPrice)
-      : 0;
+  const mrp = resolvePrice(product.pricing?.mrp);
+  const sellingPrice = resolvePrice(product.pricing?.costPrice);
 
   return {
     mrp,
@@ -80,6 +84,8 @@ interface Product {
   image: any;
   isActive: boolean;
   price?: any;
+  starrating?: number;
+  startRatingCount?: number;
 }
 
 interface GroupProductStatic {
@@ -203,13 +209,13 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
     if (currentstyle === 'STYLE1') {
       return (
         <div key={key}>
-          <ProductListViewOne props={product} cardColor={props.cardColor} />
+          <ProductListViewOne props={product} cardColor={props.cardColor} layout={currentLayout} />
         </div>
       );
     } else if (currentstyle === 'STYLE2') {
       return (
         <div key={key}>
-          <ProductListViewTwo props={product} cardColor={props.cardColor} />
+          <ProductListViewTwo props={product} cardColor={props.cardColor} layout={currentLayout} />
         </div>
       );
     } else {
@@ -220,7 +226,10 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
             className="productImageSlide"
             style={{
               height: 'auto',
-              minWidth: deviceMode === 'mobileapp' || deviceMode === 'mobileweb' ? '120px' : '150px',
+              width: currentLayout === 'NONE' ? '400px' : '100%',
+              minWidth: currentLayout === 'NONE' ? '400px' : 'unset',
+              maxWidth: currentLayout === 'NONE' ? '420px' : '100%',
+              flex: currentLayout === 'NONE' ? '0 0 400px' : '1 1 auto',
               borderRadius: '8px',
               overflow: 'hidden',
               border: '1px solid #eee',
@@ -233,6 +242,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
               boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
               transition: 'transform 0.2s ease',
               cursor: 'pointer',
+              position: 'relative'
             }}
             onMouseOver={(e) => {
               e.currentTarget.style.transform = 'translateY(-2px)';
@@ -260,6 +270,27 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
               />
             </div>
 
+            {(Number(product?.starrating) > 0 || Number(product?.startRatingCount) > 0) && (
+              <div style={{
+                position: 'absolute',
+                top: '10px',
+                right: '10px',
+                zIndex: 2,
+                backgroundColor: 'rgba(255,255,255,0.8)',
+                padding: '4px 8px',
+                borderRadius: '20px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '3px',
+                boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+              }}>
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#f46b27" width="11" height="11">
+                  <path d="M10 15l-5.878 3.09 1.122-6.545L.488 6.91l6.562-.955L10 0l2.95 5.955 6.562.955-4.756 4.635 1.122 6.545z" />
+                </svg>
+                <span style={{ fontSize: '11px', color: '#333', fontWeight: '600' }}>{product.starrating}</span>
+              </div>
+            )}
+
             {showProductName && (
               <div
                 style={{
@@ -277,16 +308,24 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
                 }}
               >
                 {typeof product.name === 'object' ? product.name.all : product.name}
-                {(() => {
-                  const prices = getProductPrices(product);
-                  return prices.sellingPrice > 0 ? (
-                    <h1 style={{ fontSize: '16px', fontWeight: '700', color: '#333' }}>
-                      {prices.sellingPrice.toLocaleString("en-IN")}
-                    </h1>
-                  ) : null;
-                })()}
               </div>
             )}
+
+            {(() => {
+              const prices = getProductPrices(product);
+              return prices.sellingPrice > 0 ? (
+                <div style={{ marginTop: '8px', textAlign: 'center' }}>
+                  <p style={{ fontSize: '14px', fontWeight: '700', color: '#333', margin: 0 }}>
+                    SP: {prices.sellingPrice.toLocaleString("en-IN")}
+                  </p>
+                  {prices.mrp > prices.sellingPrice && (
+                    <p style={{ fontSize: '11px', color: '#666', textDecoration: 'line-through', margin: '1px 0' }}>
+                      MRP: {prices.mrp.toLocaleString("en-IN")}
+                    </p>
+                  )}
+                </div>
+              ) : null;
+            })()}
           </div>
         </a>
       );
@@ -298,13 +337,13 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
     if (currentstyle === 'STYLE1') {
       return (
         <div key={key}>
-          <ProductListViewOne props={product} cardColor={props.cardColor} />
+          <ProductListViewOne props={product} cardColor={props.cardColor} layout={currentLayout} />
         </div>
       );
     } else if (currentstyle === 'STYLE2') {
       return (
         <div key={key}>
-          <ProductListViewTwo props={product} cardColor={props.cardColor} />
+          <ProductListViewTwo props={product} cardColor={props.cardColor} layout={currentLayout} />
         </div>
       );
     } else {
@@ -315,6 +354,9 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
           className="productImageSlide"
           style={{
             height: 'auto',
+            width: currentLayout === 'NONE' ? '400px' : '100%',
+            minWidth: currentLayout === 'NONE' ? '400px' : 'unset',
+            maxWidth: currentLayout === 'NONE' ? '420px' : '100%',
             borderRadius: '8px',
             overflow: 'hidden',
             border: '1px solid #eee',
@@ -326,7 +368,8 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
             padding: '12px',
             boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
             transition: 'transform 0.2s ease',
-            cursor: 'pointer'
+            cursor: 'pointer',
+            position: 'relative'
           }}
           onMouseOver={(e) => {
             e.currentTarget.style.transform = 'translateY(-2px)';
@@ -342,6 +385,26 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
             }
           }}
         >
+          {(Number(product?.starrating) > 0 || Number(product?.startRatingCount) > 0) && (
+            <div style={{
+              position: 'absolute',
+              top: '10px',
+              right: '10px',
+              zIndex: 2,
+              backgroundColor: 'rgba(255,255,255,0.8)',
+              padding: '4px 8px',
+              borderRadius: '20px',
+              display: 'flex',
+              alignItems: 'center',
+              gap: '3px',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+            }}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="#f46b27" width="10" height="10">
+                <path d="M10 15l-5.878 3.09 1.122-6.545L.488 6.91l6.562-.955L10 0l2.95 5.955 6.562.955-4.756 4.635 1.122 6.545z" />
+              </svg>
+              <span style={{ fontSize: '10px', color: '#333', fontWeight: '600' }}>{product.starrating}</span>
+            </div>
+          )}
           <div style={{
             height: imageHeight,
             width: '100%',
@@ -362,6 +425,7 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
             fontWeight: fontWeight,
             color: '#333',
             lineHeight: '1.4',
+            width: '100%',
             ...(nameHeight === 'auto' ? {} : {
               height: nameHeight,
               overflow: 'hidden',
@@ -372,7 +436,18 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
           }}>
             {typeof product.name === 'object' ? (product.name as { all: string }).all : product.name}
           </div>}
-        </div>
+
+          {(() => {
+            const prices = getProductPrices(product);
+            return prices.sellingPrice > 0 ? (
+              <div style={{ marginTop: '5px', textAlign: 'center' }}>
+                <p style={{ fontSize: '13px', fontWeight: '700', color: '#333', margin: 0 }}>
+                  SP: {prices.sellingPrice.toLocaleString("en-IN")}
+                </p>
+              </div>
+            ) : null;
+          })()}
+        </div >
       );
     }
   };
@@ -397,18 +472,11 @@ const GroupProductComponent: React.FC<GroupProductComponentMainProps> = ({
       <style>
         {`
           .groupProductCarousel::-webkit-scrollbar {
-            height: 8px;
-          }
-          .groupProductCarousel::-webkit-scrollbar-track {
-            background: #f0f0f0;
-            border-radius: 4px;
-          }
-          .groupProductCarousel::-webkit-scrollbar-thumb {
-            background: #c1c1c1;
-            border-radius: 4px;
+            display: none;
           }
-          .groupProductCarousel::-webkit-scrollbar-thumb:hover {
-            background: #a1a1a1;
+          .groupProductCarousel {
+            scrollbar-width: none;
+            -ms-overflow-style: none;
           }
         `}
       </style>