tee3apps-cms-sdk-react 0.0.33 → 0.0.34

package/src/PageComponents/Visual-Components/Styles/ProductListViewTwo.tsx

@@ -77,13 +77,17 @@ const ProductListViewTwo = (props: any) => {
   const data = props.props || props;
   const slug = data?.code; // Using code instead of slug since slug doesn't exist in your data
 
+  const resolvePrice = (priceData: any): number => {
+    if (!priceData) return 0;
+    if (Array.isArray(priceData)) {
+      return getPriceFromPricingArray(priceData);
+    }
+    return getPriceValue(priceData);
+  };
+
   // Updated price extraction to use pricing object only - same logic as GroupProductComponent
-  const mrpPrice = data.pricing?.mrp ? getPriceFromPricingArray(data.pricing.mrp) : 0;
-  const finalSellingPrice = data.pricing?.nlcPrice
-    ? getPriceFromPricingArray(data.pricing.nlcPrice)
-    : data.pricing?.costPrice
-      ? getPriceFromPricingArray(data.pricing.costPrice)
-      : 0;
+  const mrpPrice = resolvePrice(data.pricing?.mrp);
+  const finalSellingPrice = resolvePrice(data.pricing?.costPrice);
 
   const calculateDiscount = () => {
     if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
@@ -106,10 +110,40 @@ const ProductListViewTwo = (props: any) => {
   const cardColor = props.cardColor;
 
   return (
-    <div className="card" style={{ backgroundColor: cardColor }}>
+    <div className="card" style={{
+      backgroundColor: cardColor,
+      position: 'relative',
+      width: props.layout === 'NONE' ? '400px' : '100%',
+      minWidth: props.layout === 'NONE' ? '400px' : 'unset',
+      maxWidth: props.layout === 'NONE' ? '420px' : '100%'
+    }}>
       <a href={`/${slug}`} target={target} rel="noopener noreferrer">
         <div className="card_content">
-
+          {(Number(data?.starrating) > 0 || Number(data?.startRatingCount) > 0) && (
+            <div className="review_container" style={{
+              position: 'absolute',
+              top: '10px',
+              right: '10px',
+              zIndex: 2,
+              backgroundColor: 'rgba(255,255,255,0.8)',
+              padding: '4px 8px',
+              borderRadius: '20px',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
+            }}>
+              <div className="rating" style={{ display: 'flex', alignItems: 'center', gap: '3px' }}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  width="12"
+                  height="12"
+                  fill="#f46b27"
+                >
+                  <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 className="rating_value" style={{ fontSize: '11px', fontWeight: '600' }}>{data?.starrating}</span>
+              </div>
+            </div>
+          )}
 
           <div className="card_middle">
             <img
@@ -119,40 +153,31 @@ const ProductListViewTwo = (props: any) => {
             />
 
           </div>
-          <div className="card_top">
-            <h3 className="product_name">{data?.name?.all || data?.name}</h3>
-            <h5 className="product_option">{data?.code}</h5>
+          <div className="card_top" style={{ textAlign: 'center', width: '100%', marginBottom: '8px' }}>
+            <h3 className="product_name" style={{ margin: 0 }}>{data?.name?.all || data?.name}</h3>
+            <h5 className="product_option" style={{ margin: '4px 0 0 0' }}>{data?.code}</h5>
           </div>
-          <div className="card_bottom">
+          <div className="card_bottom" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
             <div className="price_container">
               {finalSellingPrice !== 0 && (
-                <>
-                  <div className="price_row">
-                    <h4 className="selling_price">{finalSellingPrice.toLocaleString("en-IN")}</h4>
+                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
+                  <div className="price_row" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                    <h4 className="selling_price" style={{ margin: 0 }}>SP: {finalSellingPrice.toLocaleString("en-IN")}</h4>
+                    {mrpPrice > finalSellingPrice && (
+                      <p className="mrp_price" style={{ fontSize: '11px', color: '#666', textDecoration: 'line-through', margin: '2px 0' }}>
+                        MRP: {mrpPrice.toLocaleString("en-IN")}
+                      </p>
+                    )}
                     {discount !== null && discount > 0 && (
-                      <span className="discounts">{discount}% OFF</span>
+                      <span className="discounts" style={{ fontSize: '11px', color: '#28a745', fontWeight: 'bold' }}>{discount}% OFF</span>
                     )}
                   </div>
                   {mrpPrice > finalSellingPrice && (
-                    <p className="save_amount">Save {(mrpPrice - finalSellingPrice).toLocaleString("en-IN")}</p>
+                    <p className="save_amount" style={{ margin: '2px 0 0 0', fontSize: '11px', fontWeight: '500' }}>Save {(mrpPrice - finalSellingPrice).toLocaleString("en-IN")}</p>
                   )}
-                </>
+                </div>
               )}
             </div>
-
-            <div className="review_container">
-              <div className="rating">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  width="14"
-                  height="14"
-                >
-                  <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 className="rating_value">{data?.starrating}</span>
-              </div>
-            </div>
           </div>
         </div>
       </a>

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

@@ -27,10 +27,9 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
     color: style?.fontColor || '#000',
     textAlign: textAlignment,
     fontFamily: style?.fontFamily || 'inherit',
-    height: height || (hasDimensions ? currentMode.height : 'auto'),
-    width: hasDimensions ? currentMode.width : '100%',
+    height: height || 'auto',
+    width: '100%',
     margin: 0,
-    // padding: 0,
     wordWrap: "break-word",
     overflowWrap: "break-word",
     maxWidth: "100%",