tee3apps-cms-sdk-react 0.0.1

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

@@ -0,0 +1,102 @@
+import React from "react";
+import "./product-list-view-one.css";
+import { Linodeurl } from '../../../const';
+
+const ProductListViewOne = (props: any) => {
+  const [target, setTarget] = React.useState("_blank");
+  console.warn(props)
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (window.matchMedia("(display-mode: standalone)").matches) {
+        setTarget("_self");
+      }
+      if (
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+          navigator.userAgent
+        )
+      ) {
+        setTarget("_self");
+      }
+    }
+  }, []);
+
+  const data = props.props || props;
+  const slug = data?._id; // Using code instead of slug
+
+  // Updated price extraction to match your JSON structure
+  const sellingPrice = Number(data?.price?.SP?.$numberDecimal || 0);
+  const mrpPrice = Number(data?.price?.MRP?.$numberDecimal || 0);
+
+  const calculateDiscount = (): number | null => {
+    if (!sellingPrice || !mrpPrice || mrpPrice <= sellingPrice) return null;
+    return Math.round(100 - (sellingPrice / mrpPrice) * 100);
+  };
+
+  const discount = calculateDiscount();
+
+  // Extract variant options for display
+  const getVariantOptions = () => {
+    if (!data?.variant) return "";
+    return data.variant
+      .map((v: any) => v.valueId?.name?.displayName || v.valueId?.name?.all || "")
+      .filter(Boolean)
+      .join(" • ");
+  };
+
+  const variantOptions = getVariantOptions();
+
+  return (
+    <div className="card">
+      <a href={`/${slug}`} target={target}>
+        <div className="card_grid">
+          <div className="card_top">
+            <img
+            src={`${Linodeurl}${data?.image?.all?.url || data?.image?.url}`}
+            alt={data?.name?.all || data?.name}
+            className="product_image"
+          />
+          </div>
+          <div className="card_bottom">
+            <div className="cardname">
+               <h3>{data?.name?.all || data?.name}</h3>
+            <h5>{variantOptions}</h5>
+            </div>
+            <div className="card_value">
+              {sellingPrice !== 0 && (
+                <div className="card_price">
+                  <h4>₹{sellingPrice.toLocaleString("en-IN")}</h4>
+                  <div className="card_right_grid">
+                    {mrpPrice > sellingPrice && (
+                      <p >₹{mrpPrice.toLocaleString("en-IN")}</p>
+                    )}
+                    {discount !== null && discount > 0 && (
+                      <span>({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>
+      </a>
+    </div>
+  );
+};
+
+export default ProductListViewOne;

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

@@ -0,0 +1,104 @@
+import React from "react";
+import "./product-list-view-two.css";
+import { Linodeurl } from '../../../const';
+
+const ProductListViewTwo = (props: any) => {
+  console.warn(props);
+  const [target, setTarget] = React.useState("_blank");
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (window.matchMedia("(display-mode: standalone)").matches) {
+        setTarget("_self");
+      }
+      if (
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+          navigator.userAgent
+        )
+      ) {
+        setTarget("_self");
+      }
+    }
+  }, []);
+
+  const data = props.props || props;
+  const slug = data?._id; // Using code instead of slug since slug doesn't exist in your data
+
+  // Updated price extraction to match your JSON structure
+  const sellingPrice = Number(data?.price?.SP?.$numberDecimal || 0);
+  const mrpPrice = Number(data?.price?.MRP?.$numberDecimal || 0);
+
+  const calculateDiscount = () => {
+    if (!sellingPrice || !mrpPrice || mrpPrice <= sellingPrice) return null;
+    return Math.round(100 - (sellingPrice / mrpPrice) * 100);
+  };
+
+  const discount = calculateDiscount();
+
+  // Extract variant options for display
+  // const getVariantOptions = () => {
+  //   if (!data?.variant) return "";
+  //   return data.variant
+  //     .map((v: any) => v.valueId?.name || v.valueId?.name || "")
+  //     .filter(Boolean)
+  //     .join(" • ");
+  // };
+
+  // const variantOptions = getVariantOptions();
+
+  return (
+    <div className="card">
+      <a href={`/${slug}`} target={target} rel="noopener noreferrer">
+        <div className="card_content">
+          
+          
+          <div className="card_middle">
+            <img
+              src={`${Linodeurl}${data?.image?.all?.url || data?.image?.url}`}
+              alt={data?.name?.all || data?.name}
+              className="product_image"
+            />
+
+          </div>
+          <div className="card_top">
+            <h3 className="product_name">{data?.name?.all || data?.name}</h3>
+            <h5 className="product_option">{data?.code}</h5>
+          </div>
+          <div className="card_bottom">
+            <div className="price_container">
+              {sellingPrice !== 0 && (
+                <>
+                  <div className="price_row">
+                    <h4 className="selling_price">₹{sellingPrice.toLocaleString("en-IN")}</h4>
+                    {discount !== null && discount > 0 && (
+                      <span className="discounts">{discount}% OFF</span>
+                    )}
+                  </div>
+                  {mrpPrice > sellingPrice && (
+                    <p className="save_amount">Save ₹{(mrpPrice - sellingPrice).toLocaleString("en-IN")}</p>
+                  )}
+                </>
+              )}
+            </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>
+    </div>
+  );
+};
+
+export default ProductListViewTwo;

package/src/PageComponents/Visual-Components/Styles/product-list-view-one.css

@@ -0,0 +1,166 @@
+.card a {
+  text-decoration: none;
+}
+.card {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  background: white;
+  margin-bottom: 16px;
+  text-decoration: none;
+}
+
+.card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.card_grid {
+  grid-template-columns: 140px 1fr;
+  gap: 16px;
+  padding: 16px;
+    flex: flex;
+  flex-direction: column;
+}
+
+.card_top {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card_top img {
+  width: 140px;
+  height: 140px;
+  object-fit: contain;
+}
+.card_bottom {
+  padding: 12px;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #fff;
+  text-decoration: none;
+  flex: flex;
+  flex-direction: column;
+  width: 260px; /* Adjust as needed */
+  box-sizing: border-box;
+}
+
+.card_bottom h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  color: #212121;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: none;
+
+}
+
+.card_bottom h5 {
+  font-size: 14px;
+  color: #757575;
+  margin: 0 0 10px;
+}
+
+.card_bottom h4 {
+  font-size: 20px;
+  color: #212121;
+  margin: 0;
+  font-weight: 700;
+}
+.card_value {
+  position: relative;
+}
+.card_right_grid {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.card_right_grid p {
+  font-size: 14px;
+  color: #9e9e9e;
+  text-decoration: line-through;
+  margin: 0;
+}
+
+.card_right_grid span {
+  font-size: 14px;
+  color: #388e3c;
+  font-weight: 600;
+}
+
+.review_counts {
+  position: absolute;
+  top: 0px;     /* Adjust as needed */
+  right: -140px;   /* Adjust as needed */
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  z-index: 2;  /* Ensure it appears above other elements */
+}
+
+.review_count p {
+  font-size: 14px;
+  font-weight: 600;
+  color: #f46b27;
+  margin: 0;
+}
+
+.review_count span {
+  font-size: 12px;
+  color: #757575;
+}
+
+
+.review_count {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+/* .review_count svg {
+  margin-right: 4px;
+} */
+
+@media (max-width: 768px) {
+  .card_grid {
+    grid-template-columns: 100px 1fr;
+    gap: 12px;
+    padding: 12px;
+  }
+
+  .card_left img {
+    width: 100px;
+    height: 100px;
+  }
+
+  .card_right h3 {
+    font-size: 14px;
+  }
+
+  .card_right h5 {
+    font-size: 12px;
+  }
+
+  .card_bottom h4 {
+    font-size: 16px;
+  }
+
+  .card_right_grid p{
+    font-size: 12px;
+  text-decoration: line-through;
+    /* text-decoration: dashed; */
+
+  }
+  .card_right_grid span {
+    font-size: 12px;
+  }
+}

package/src/PageComponents/Visual-Components/Styles/product-list-view-two.css

@@ -0,0 +1,182 @@
+.card a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.card {
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  background: white;
+  margin-bottom: 16px;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.card:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transform: translateY(-2px);
+}
+
+.card_content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 16px;
+}
+
+.card_top {
+  margin-bottom: 12px;
+  text-align: center;
+  flex: flex;
+  flex-direction: column;
+}
+
+.product_name {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0 0 4px;
+  color: #212121;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.3;
+  max-width: 250px;
+}
+
+.product_option {
+  font-size: 14px;
+  color: #757575;
+  margin: 0;
+  line-height: 1.3;
+  max-width: 250px;
+
+}
+
+.card_middle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 12px 0;
+  flex-grow: 1;
+}
+
+.product_image {
+  width: 140px;
+  height: 140px;
+  object-fit: contain;
+}
+
+.card_bottom {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.price_container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.price_row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.selling_price {
+  font-size: 22px;
+  color: #212121;
+  font-weight: 700;
+  margin: 0;
+}
+
+.mrp_price {
+  font-size: 14px;
+  color: #9e9e9e;
+  text-decoration: line-through;
+  margin: 0;
+}
+
+.discounts {
+  background-color: #139307;
+  color: #000000;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.save_amount {
+  font-size: 12px;
+  color: #9e9e9e;
+  margin-top: -4px;
+}
+
+.review_container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.rating {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.rating svg {
+  fill: #008f00; /* Green star */
+}
+
+.rating_value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #000000;
+}
+
+
+@media (max-width: 768px) {
+  .card_content {
+    padding: 12px;
+  }
+  
+  .product_name {
+    font-size: 14px;
+  }
+  
+  .product_option {
+    font-size: 12px;
+  }
+  
+  .product_image {
+    width: 100px;
+    height: 100px;
+  }
+  
+  .selling_price {
+    font-size: 16px;
+  }
+  
+  .mrp_price,
+  .discount {
+    font-size: 12px;
+  }
+  
+  .rating_value {
+    font-size: 12px;
+  }
+  
+  .review_count {
+    font-size: 11px;
+  }
+}