@lanaco/lnc-react-ui 4.0.95 → 4.0.96

package/dist/{suspense-product-card-detailed-Z0emIstD.js → suspense-product-card-detailed-Bez9UFMR.js}

@@ -1,10 +1,10 @@
-import { jsxs as t, jsx as e, Fragment as h } from "react/jsx-runtime";
-import { forwardRef as c, Suspense as $ } from "react";
-import { p as y, t as g, o as s, l as S, q as P, G as C } from "./utils-WHYrEnYF.js";
-import { s as f } from "./emotion-styled.browser.esm-BNN1dTl3.js";
-import { P as z } from "./index-DQyZFR-C.js";
-import { M as D } from "./consts-BuFChS64.js";
-const u = f.div`
+import { jsxs as i, jsx as e, Fragment as w } from "react/jsx-runtime";
+import { forwardRef as p, Suspense as P } from "react";
+import { p as z, t as h, o as s, l as C, q as f, G as u } from "./utils-WHYrEnYF.js";
+import { s as x } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { P as D } from "./index-DQyZFR-C.js";
+import { M as j } from "./consts-BuFChS64.js";
+const v = x.div`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -32,20 +32,30 @@ const u = f.div`
   & .card-title {
     font-size: 0.875rem;
     font-weight: 600;
-    ${y(2)}
+    ${z(2)}
   }
 
   & .price-text {
     font-size: 1rem;
     font-weight: 600;
-    ${g()}
+    ${h()}
+    display: flex;
+    align-items: end;
+    gap: 0.5rem;
+    & .full-price {
+      text-decoration: line-through;
+      font-size: 0.75rem;
+      font-weight: 400;
+      padding-bottom: 0.125rem;
+      color: var(--gray-600, #676e79);
+    }
   }
 
   & .location-text {
     font-size: 0.75rem;
     font-weight: 400;
     color: var(--gray-600, #676e79);
-    ${g()}
+    ${h()}
   }
 
   & .tags-wrapper {
@@ -89,7 +99,7 @@ const u = f.div`
     height: 1rem;
   }
 
-  @media (max-width: ${D + "px"}) {
+  @media (max-width: ${j + "px"}) {
     & img {
       width: 8.875rem;
       height: 8.875rem;
@@ -105,7 +115,7 @@ const u = f.div`
       font-weight: 600;
     }
   }
-`, j = f.div`
+`, F = x.div`
   display: flex;
   align-items: center;
   gap: 0.25rem;
@@ -117,74 +127,76 @@ const u = f.div`
     font-size: 1rem;
     color: var(--warning-500, #F59E0B);
   }
-`, F = c(({ sponsoredText: r = "Sponsored" }, i) => /* @__PURE__ */ t(j, { ref: i, className: "sponsored-line", children: [
+`, I = p(({ sponsoredText: r = "Sponsored" }, a) => /* @__PURE__ */ i(F, { ref: a, className: "sponsored-line", children: [
   /* @__PURE__ */ e("i", { className: "mng-lnc-paw2" }),
   /* @__PURE__ */ e("span", { children: r })
-] })), R = c((r, i) => {
+] })), U = p((r, a) => {
   const {
     uuid: o,
     title: n,
-    price: a = 0,
-    currency: d,
-    isNegotiable: l,
+    price: t = 0,
+    sellingPrice: c,
+    currency: l,
+    isNegotiable: d,
     isFree: m,
-    imageUrl: w,
-    sellerUuid: E,
-    location: x,
-    isSponsored: k,
-    imageComponent: p,
-    onSelectCard: v = () => {
+    imageUrl: k,
+    sellerUuid: G,
+    location: N,
+    isSponsored: $,
+    imageComponent: g,
+    onSelectCard: b = () => {
     },
-    freeText: N = "Free",
-    negotiableText: b = "Negotiable"
+    freeText: y = "Free",
+    negotiableText: S = "Negotiable"
   } = r;
   return (
     // <LandingPageProductCardSkeleton />
-    /* @__PURE__ */ t(u, { className: "product-card", onClick: v, children: [
-      S(p) ? p : /* @__PURE__ */ e(z, { src: w }),
+    /* @__PURE__ */ i(v, { className: "product-card", onClick: b, children: [
+      C(g) ? g : /* @__PURE__ */ e(D, { src: k }),
       /* @__PURE__ */ e("div", { className: "wrapper-card-1", children: /* @__PURE__ */ e("div", { className: "card-title", children: n }) }),
-      /* @__PURE__ */ t("div", { className: "wrapper-card-2", children: [
-        /* @__PURE__ */ t("div", { className: "price-text", children: [
-          a > 0 && d && l !== !0 && m !== !0 && `${P(a)} ${C(d)}`,
-          l && b,
-          m && N
+      /* @__PURE__ */ i("div", { className: "wrapper-card-2", children: [
+        /* @__PURE__ */ i("div", { className: "price-text", children: [
+          c > 0 && l && d !== !0 && m !== !0 && /* @__PURE__ */ e("div", { children: `${f(c)} ${u(l)}` }),
+          t > 0 && l && d !== !0 && m !== !0 && t !== c && /* @__PURE__ */ e("div", { className: `${c > 0 ? "full-price" : ""}`, children: `${f(t)} ${u(l)}` }),
+          d && S,
+          m && y
         ] }),
-        /* @__PURE__ */ e("div", { className: "location-text", children: x })
+        /* @__PURE__ */ e("div", { className: "location-text", children: N })
       ] }),
-      k === !0 && /* @__PURE__ */ e(F, {})
+      $ === !0 && /* @__PURE__ */ e(I, {})
     ] })
   );
-}), I = c(({}, r) => /* @__PURE__ */ t(u, { className: "product-card", children: [
+}), T = p(({}, r) => /* @__PURE__ */ i(v, { className: "product-card", children: [
   /* @__PURE__ */ e("img", { className: "skeleton-img" }),
-  /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
+  /* @__PURE__ */ i("div", { className: "wrapper-card-1", children: [
     /* @__PURE__ */ e("div", { className: "skeleton-title" }),
     /* @__PURE__ */ e("div", { className: "skeleton-tags" })
   ] }),
-  /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
+  /* @__PURE__ */ i("div", { className: "wrapper-card-1", children: [
     /* @__PURE__ */ e("div", { className: "skeleton-price" }),
     /* @__PURE__ */ e("div", { className: "skeleton-sponsored" })
   ] })
-] })), T = ({ limit: r = 5, isLoading: i = !1, keyPrefix: o }) => /* @__PURE__ */ e(h, { children: Array.from({ length: r }, (n, a) => /* @__PURE__ */ e(
-  I,
+] })), E = ({ limit: r = 5, isLoading: a = !1, keyPrefix: o }) => /* @__PURE__ */ e(w, { children: Array.from({ length: r }, (n, t) => /* @__PURE__ */ e(
+  T,
   {
-    isLoading: i
+    isLoading: a
   },
-  `${o}-skeleton-product-card-${a}`
-)) }), U = ({
+  `${o}-skeleton-product-card-${t}`
+)) }), q = ({
   children: r,
-  fallbackComponent: i = /* @__PURE__ */ e(h, {}),
+  fallbackComponent: a = /* @__PURE__ */ e(w, {}),
   isLoading: o = !1,
   limit: n,
-  keyPrefix: a
-}) => /* @__PURE__ */ e($, { fallbackComponent: i, children: o === !0 ? /* @__PURE__ */ e(
-  T,
+  keyPrefix: t
+}) => /* @__PURE__ */ e(P, { fallbackComponent: a, children: o === !0 ? /* @__PURE__ */ e(
+  E,
   {
     isLoading: o,
     limit: n,
-    keyPrefix: a
+    keyPrefix: t
   }
 ) : r });
 export {
-  R as D,
-  U as S
+  U as D,
+  q as S
 };

package/dist/suspense-product-card-detailed-Yjo62f1v.cjs

@@ -0,0 +1,124 @@
+"use strict";const e=require("react/jsx-runtime"),d=require("react"),r=require("./utils-BOtq2mcF.cjs"),g=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./index-XrPpEvxt.cjs"),y=require("./consts-goSZX3xP.cjs"),u=g.styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+
+  & .wrapper-card-1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.38rem;
+  }
+
+  & .wrapper-card-2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  & img {
+    width: 100%;
+    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
+    object-fit: cover; /* making sure the image isn't distorted */
+    border-radius: 0.75rem;
+  }
+
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    ${r.truncateTextInRows(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${r.truncateText()}
+    display: flex;
+    align-items: end;
+    gap: 0.5rem;
+    & .full-price {
+      text-decoration: line-through;
+      font-size: 0.75rem;
+      font-weight: 400;
+      padding-bottom: 0.125rem;
+      color: var(--gray-600, #676e79);
+    }
+  }
+
+  & .location-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--gray-600, #676e79);
+    ${r.truncateText()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  &:hover {
+    & .card-title {
+      color: var(--primary-500, #f59e0b);
+    }
+  }
+
+  & .skeleton-img {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${r.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  @media (max-width: ${y.MOBILE_SIZE_PX+"px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+  }
+`,N=g.styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--gray-500);
+  font-size:  0.75rem;
+  font-weight: 500;
+
+  & i {
+    font-size: 1rem;
+    color: var(--warning-500, #F59E0B);
+  }
+`,b=d.forwardRef(({sponsoredText:t="Sponsored"},s)=>e.jsxs(N,{ref:s,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:t})]})),$=d.forwardRef((t,s)=>{const{uuid:a,title:n,price:i=0,sellingPrice:o,currency:c,isNegotiable:l,isFree:m,imageUrl:h,sellerUuid:z,location:x,isSponsored:f,imageComponent:p,onSelectCard:w=()=>{},freeText:j="Free",negotiableText:v="Negotiable"}=t;return e.jsxs(u,{className:"product-card",onClick:w,children:[r.isDefined(p)?p:e.jsx(k.ProductImageWrapper,{src:h}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:n})}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:"price-text",children:[o>0&&c&&l!==!0&&m!==!0&&e.jsx("div",{children:`${r.formatPrice(o)} ${r.GetCurrencySymbol(c)}`}),i>0&&c&&l!==!0&&m!==!0&&i!==o&&e.jsx("div",{className:`${o>0?"full-price":""}`,children:`${r.formatPrice(i)} ${r.GetCurrencySymbol(c)}`}),l&&v,m&&j]}),e.jsx("div",{className:"location-text",children:x})]}),f===!0&&e.jsx(b,{})]})}),S=d.forwardRef(({},t)=>e.jsxs(u,{className:"product-card",children:[e.jsx("img",{className:"skeleton-img"}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"skeleton-tags"})]}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-price"}),e.jsx("div",{className:"skeleton-sponsored"})]})]})),P=({limit:t=5,isLoading:s=!1,keyPrefix:a})=>e.jsx(e.Fragment,{children:Array.from({length:t},(n,i)=>e.jsx(S,{isLoading:s},`${a}-skeleton-product-card-${i}`))}),C=({children:t,fallbackComponent:s=e.jsx(e.Fragment,{}),isLoading:a=!1,limit:n,keyPrefix:i})=>e.jsx(d.Suspense,{fallbackComponent:s,children:a===!0?e.jsx(P,{isLoading:a,limit:n,keyPrefix:i}):t});exports.DetailedProductCard=$;exports.SuspenseDetailedProductCard=C;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lanaco/lnc-react-ui",
-  "version": "4.0.95",
+  "version": "4.0.96",
   "description": "React component library",
   "type": "module",
   "keywords": [

package/dist/suspense-product-card-detailed-EXZJLtNh.cjs

@@ -1,114 +0,0 @@
-"use strict";const e=require("react/jsx-runtime"),o=require("react"),r=require("./utils-BOtq2mcF.cjs"),p=require("./emotion-styled.browser.esm-BtEseadx.cjs"),k=require("./index-XrPpEvxt.cjs"),v=require("./consts-goSZX3xP.cjs"),g=p.styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  cursor: pointer;
-
-  & .wrapper-card-1 {
-    display: flex;
-    flex-direction: column;
-    gap: 0.38rem;
-  }
-
-  & .wrapper-card-2 {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-  }
-
-  & img {
-    width: 100%;
-    aspect-ratio: 1 / 1; /* defining the aspect ratio of the image */
-    object-fit: cover; /* making sure the image isn't distorted */
-    border-radius: 0.75rem;
-  }
-
-  & .card-title {
-    font-size: 0.875rem;
-    font-weight: 600;
-    ${r.truncateTextInRows(2)}
-  }
-
-  & .price-text {
-    font-size: 1rem;
-    font-weight: 600;
-    ${r.truncateText()}
-  }
-
-  & .location-text {
-    font-size: 0.75rem;
-    font-weight: 400;
-    color: var(--gray-600, #676e79);
-    ${r.truncateText()}
-  }
-
-  & .tags-wrapper {
-    display: flex;
-    gap: 0.5rem;
-  }
-
-  &:hover {
-    & .card-title {
-      color: var(--primary-500, #f59e0b);
-    }
-  }
-
-  & .skeleton-img {
-    background-color: ${r.linearGradientAnimation("-90deg")};
-    border-radius: 0.75rem;
-    border: 1px solid white;
-  }
-
-  & .skeleton-title {
-    background-color: ${r.linearGradientAnimation("-90deg")};
-    width: 100%;
-    height: 2.5rem;
-  }
-
-  & .skeleton-tags {
-    background-color: ${r.linearGradientAnimation("-90deg")};
-    width: 80%;
-    height: 1.5rem;
-  }
-
-  & .skeleton-price {
-    background-color: ${r.linearGradientAnimation("-90deg")};
-    width: 50%;
-    height: 2.5rem;
-  }
-
-  & .skeleton-sponsored {
-    background-color: ${r.linearGradientAnimation("-90deg")};
-    width: 50%;
-    height: 1rem;
-  }
-
-  @media (max-width: ${v.MOBILE_SIZE_PX+"px"}) {
-    & img {
-      width: 8.875rem;
-      height: 8.875rem;
-      min-width: 8.875rem;
-      min-height: 8.875rem;
-      min-width: 8.875rem;
-      min-height: 8.875rem;
-      object-fit: cover;
-    }
-
-    & .price-text {
-      font-size: 0.875rem;
-      font-weight: 600;
-    }
-  }
-`,N=p.styled.div`
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: var(--gray-500);
-  font-size:  0.75rem;
-  font-weight: 500;
-
-  & i {
-    font-size: 1rem;
-    color: var(--warning-500, #F59E0B);
-  }
-`,b=o.forwardRef(({sponsoredText:t="Sponsored"},i)=>e.jsxs(N,{ref:i,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:t})]})),y=o.forwardRef((t,i)=>{const{uuid:a,title:n,price:s=0,currency:c,isNegotiable:d,isFree:l,imageUrl:u,sellerUuid:P,location:h,isSponsored:x,imageComponent:m,onSelectCard:f=()=>{},freeText:w="Free",negotiableText:j="Negotiable"}=t;return e.jsxs(g,{className:"product-card",onClick:f,children:[r.isDefined(m)?m:e.jsx(k.ProductImageWrapper,{src:u}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:n})}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:"price-text",children:[s>0&&c&&d!==!0&&l!==!0&&`${r.formatPrice(s)} ${r.GetCurrencySymbol(c)}`,d&&j,l&&w]}),e.jsx("div",{className:"location-text",children:h})]}),x===!0&&e.jsx(b,{})]})}),$=o.forwardRef(({},t)=>e.jsxs(g,{className:"product-card",children:[e.jsx("img",{className:"skeleton-img"}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"skeleton-tags"})]}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-price"}),e.jsx("div",{className:"skeleton-sponsored"})]})]})),S=({limit:t=5,isLoading:i=!1,keyPrefix:a})=>e.jsx(e.Fragment,{children:Array.from({length:t},(n,s)=>e.jsx($,{isLoading:i},`${a}-skeleton-product-card-${s}`))}),C=({children:t,fallbackComponent:i=e.jsx(e.Fragment,{}),isLoading:a=!1,limit:n,keyPrefix:s})=>e.jsx(o.Suspense,{fallbackComponent:i,children:a===!0?e.jsx(S,{isLoading:a,limit:n,keyPrefix:s}):t});exports.DetailedProductCard=y;exports.SuspenseDetailedProductCard=C;