tee3apps-cms-sdk-react 0.0.32 → 0.0.34

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

@@ -76,13 +76,17 @@ const ProductListViewOne = (props: any) => {
   const data = props.props || props;
   const slug = data?.code; // Using code instead of slug
 
+  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 = (): number | null => {
     if (!finalSellingPrice || !mrpPrice || mrpPrice <= finalSellingPrice) return null;
@@ -104,9 +108,42 @@ const ProductListViewOne = (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}>
         <div className="card_grid">
+          {(Number(data?.starrating) > 0 || Number(data?.startRatingCount) > 0) && (
+            <div className="review_counts" 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="12"
+                height="12"
+              >
+                <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>
+              <p style={{ margin: 0, fontSize: '11px', fontWeight: '600' }}>{data?.starrating}</p>
+              <span style={{ fontSize: '10px', color: '#666' }}>({data?.startRatingCount})</span>
+            </div>
+          )}
           <div className="card_top">
             <img
               src={`${Linodeurl}${data?.image?.all?.url || data?.image?.url}`}
@@ -114,41 +151,25 @@ const ProductListViewOne = (props: any) => {
               className="product_image"
             />
           </div>
-          <div className="card_bottom">
-            <div className="cardname">
-              <h3>{data?.name?.all || data?.name}</h3>
-              <h5>{variantOptions}</h5>
+          <div className="card_bottom" style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '100%' }}>
+            <div className="cardname" style={{ textAlign: 'center', width: '100%' }}>
+              <h3 style={{ margin: '0 0 4px 0', fontSize: '15px' }}>{data?.name?.all || data?.name}</h3>
+              <h5 style={{ margin: 0, fontWeight: '400', color: '#666' }}>{variantOptions}</h5>
             </div>
-            <div className="card_value">
+            <div className="card_value" style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
               {finalSellingPrice !== 0 && (
-                <div className="card_price">
-                  <h4>{finalSellingPrice.toLocaleString("en-IN")}</h4>
-                  <div className="card_right_grid">
+                <div className="card_price" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                  <h4 style={{ margin: 0, fontSize: '16px', fontWeight: '700' }}>SP: {finalSellingPrice.toLocaleString("en-IN")}</h4>
+                  <div className="card_right_grid" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '4px', justifyContent: 'center' }}>
                     {mrpPrice > finalSellingPrice && (
-                      <p >{mrpPrice.toLocaleString("en-IN")}</p>
+                      <p style={{ margin: 0, fontSize: '12px', color: '#666', textDecoration: 'line-through' }}>MRP: {mrpPrice.toLocaleString("en-IN")}</p>
                     )}
                     {discount !== null && discount > 0 && (
-                      <span>({discount}% OFF)</span>
+                      <span style={{ fontSize: '11px', color: '#28a745', fontWeight: 'bold' }}>({discount}% OFF)</span>
                     )}
                   </div>
                 </div>
               )}
-              <div className="review_counts">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="#f46b27"
-                  width="13"
-                  height="13"
-                >
-                  <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>
-                <p>{data?.starrating}</p>
-                <span>({data?.startRatingCount} Reviews)</span>
-              </div>
-              {/* {Number(data?.starrating) && Number(data?.startRatingCount)  && (
-                
-              )} */}
             </div>
           </div>
         </div>

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%",
@@ -82,7 +81,7 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
       <div style={{
         display: "flex",
         flexDirection: "column",
-        alignItems:style?.textAlign === 'center' ? 'center' : style?.textAlign === 'right' ? 'flex-end' : 'flex-start',
+        alignItems: style?.textAlign === 'center' ? 'center' : style?.textAlign === 'right' ? 'flex-end' : 'flex-start',
         width: "100%",
         maxWidth: "100%",
         wordWrap: "break-word",
@@ -92,7 +91,7 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
       }}>
         <a
           href={url}
-          target={props?.linktype=='EXTERNAL' ? props?.link?.target :'_self'}
+          target={props?.linktype == 'EXTERNAL' ? props?.link?.target : '_self'}
           style={{
             textDecoration: 'none',
             display: "block",
@@ -114,7 +113,10 @@ const TextComponent: React.FC<{ props: ComponentProps }> = ({ props }) => {
 
   return (
     <div style={{
-      display: "block",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: style?.textAlign === 'center' ? 'center' : style?.textAlign === 'right' ? 'flex-end' : 'flex-start',
+      justifyContent: 'center',
       width: "100%",
       maxWidth: "100%",
       wordWrap: "break-word",