@anker-in/campaign-ui 0.4.5-beta.10 → 0.4.5-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/CartCard.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/CartCard.js.map +3 -3
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductCard.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductCard.js.map +2 -2
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductComparison.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductComparison.js.map +2 -2
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductList.js +1 -1
- package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductList.js.map +2 -2
- package/dist/cjs/components/LiveChatWidget/constants.d.ts +1 -0
- package/dist/cjs/components/LiveChatWidget/constants.js +1 -1
- package/dist/cjs/components/LiveChatWidget/constants.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/components/MessageContent/CartCard.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/CartCard.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductCard.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductCard.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductComparison.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductComparison.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductList.js +1 -1
- package/dist/esm/components/LiveChatWidget/components/MessageContent/ProductList.js.map +3 -3
- package/dist/esm/components/LiveChatWidget/constants.d.ts +1 -0
- package/dist/esm/components/LiveChatWidget/constants.js +1 -1
- package/dist/esm/components/LiveChatWidget/constants.js.map +3 -3
- package/package.json +3 -3
- package/src/components/LiveChatWidget/components/MessageContent/CartCard.tsx +2 -6
- package/src/components/LiveChatWidget/components/MessageContent/ProductCard.tsx +3 -6
- package/src/components/LiveChatWidget/components/MessageContent/ProductComparison.tsx +4 -4
- package/src/components/LiveChatWidget/components/MessageContent/ProductList.tsx +3 -6
- package/src/components/LiveChatWidget/constants.ts +9 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var y=(a,e)=>{for(var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var y=(a,e)=>{for(var o in e)c(a,o,{get:e[o],enumerable:!0})},N=(a,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of b(e))!C.call(a,n)&&n!==o&&c(a,n,{get:()=>e[n],enumerable:!(l=v(e,n))||l.enumerable});return a};var h=a=>N(c({},"__esModule",{value:!0}),a);var F={};y(F,{CartCard:()=>w});module.exports=h(F);var t=require("react/jsx-runtime"),d=require("../../constants.js");function u(a){const{amount:e,currencyCode:o}=a;return(0,d.formatCurrency)(e,o)}const A=({line:a})=>{const{quantity:e,merchandise:o,cost:l}=a,{product:n,title:i,image:r}=o,s=r?.url||"",m=parseFloat(l.totalAmount.amount)<parseFloat(l.subtotalAmount.amount)&&l.totalAmount.currencyCode===l.subtotalAmount.currencyCode;return(0,t.jsxs)("div",{className:"flex gap-4",children:[(0,t.jsx)("div",{className:"shrink-0 overflow-hidden rounded-md",style:{width:"72px",height:"72px"},children:(0,t.jsx)("img",{src:s,alt:n.title,className:"size-full object-cover",loading:"lazy"})}),(0,t.jsxs)("div",{className:"flex flex-1 flex-col",children:[(0,t.jsx)("h4",{className:"line-clamp-2 text-sm tablet:text-[16px] font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:n.title}),i&&(0,t.jsx)("p",{className:"mt-0.5 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]",children:i}),(0,t.jsxs)("div",{className:"flex items-end justify-between gap-2 mt-1",children:[(0,t.jsx)("div",{className:"flex-1",children:(0,t.jsxs)("p",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:["\xD7",e]})}),(0,t.jsxs)("div",{className:"flex gap-1 text-right",children:[(0,t.jsx)("div",{className:"tablet:text-[16px] text-sm font-bold leading-[1.4] tracking-[-0.02em] text-gray-900",children:u(l.totalAmount)}),m&&(0,t.jsx)("div",{className:"tablet:text-[16px] text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56] line-through",children:u(l.subtotalAmount)})]})]})]})]})},k=({total:a,totalText:e})=>(0,t.jsx)("div",{className:"border-t border-gray-200 p-4",children:(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[(0,t.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900",children:e}),(0,t.jsx)("span",{className:"text-base tablet:text-[18px] font-bold leading-[1.4] tracking-[-0.02em] text-gray-900",children:u(a)})]})}),w={render:a=>{const e=a,{data:o}=e;if(!o)return null;const{isEmpty:l,lines:n,cost:i,checkoutUrl:r,onCart:s,cartId:m,commonText:g}=o,x={...d.DEFAULT_COMMON_TEXT,...g},f=()=>{s?s(m,r):r&&window.open(r,"_blank","noopener,noreferrer")};return l||!n||n.length===0?null:(0,t.jsxs)("div",{className:"w-full max-w-md overflow-hidden rounded-2xl shadow-sm",style:{backgroundColor:"#F5F6F7"},children:[(0,t.jsx)("div",{className:"flex flex-col gap-6 overflow-y-auto p-4",children:n.map(p=>(0,t.jsx)(A,{line:p},p.id))}),(0,t.jsx)(k,{total:i.totalAmount,totalText:x.total}),(r||s)&&(0,t.jsx)("div",{className:"px-4 pb-4",children:(0,t.jsx)("button",{type:"button",onClick:f,className:"livechat-btn-primary w-full rounded-full py-[10px] text-center text-sm font-bold leading-[1.4] tracking-[-0.02em] text-white",style:{backgroundColor:"#1D1D1F"},children:x.viewMore})})]})}};
|
|
2
2
|
//# sourceMappingURL=CartCard.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/CartCard.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * \u8D2D\u7269\u8F66\u5361\u7247\u6E32\u67D3\u5668\n * \u663E\u793A\u8D2D\u7269\u8F66\u5185\u5BB9\u3001\u4EF7\u683C\u6C47\u603B\u548C\u7ED3\u8D26\u6309\u94AE\n * \u57FA\u4E8E\u540E\u7AEF\u8FD4\u56DE\u7684\u8D2D\u7269\u8F66\u6570\u636E\u7ED3\u6784\n */\n\nimport React from 'react'\nimport type { MessageRenderer, CartContent, CartLine, CartAmount } from '../../types'\nimport {
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["CartCard_exports", "__export", "CartCard", "__toCommonJS", "import_jsx_runtime", "import_constants", "formatAmount", "amount", "value", "currencyCode", "
|
|
4
|
+
"sourcesContent": ["/**\n * \u8D2D\u7269\u8F66\u5361\u7247\u6E32\u67D3\u5668\n * \u663E\u793A\u8D2D\u7269\u8F66\u5185\u5BB9\u3001\u4EF7\u683C\u6C47\u603B\u548C\u7ED3\u8D26\u6309\u94AE\n * \u57FA\u4E8E\u540E\u7AEF\u8FD4\u56DE\u7684\u8D2D\u7269\u8F66\u6570\u636E\u7ED3\u6784\n */\n\nimport React from 'react'\nimport type { MessageRenderer, CartContent, CartLine, CartAmount } from '../../types'\nimport { formatCurrency, DEFAULT_COMMON_TEXT } from '../../constants.js'\n\n/**\n * \u683C\u5F0F\u5316\u91D1\u989D\n * @param amount \u91D1\u989D\u5BF9\u8C61\n * @returns \u683C\u5F0F\u5316\u540E\u7684\u91D1\u989D\u5B57\u7B26\u4E32\uFF08\u5982 \"$99.99\"\uFF09\n */\nfunction formatAmount(amount: CartAmount): string {\n const { amount: value, currencyCode } = amount\n return formatCurrency(value, currencyCode)\n}\n\n/**\n * \u8D2D\u7269\u8F66\u5546\u54C1\u884C\u7EC4\u4EF6\n */\nconst CartLineItem: React.FC<{\n line: CartLine\n}> = ({ line }) => {\n const { quantity, merchandise, cost } = line\n const { product, title: variantTitle, image } = merchandise\n\n // \u5546\u54C1\u56FE\u7247 URL\n const imageUrl = image?.url || ''\n\n // \u5224\u65AD\u662F\u5426\u6709\u6298\u6263\uFF08\u603B\u4EF7 < \u539F\u4EF7\uFF09\n const hasDiscount =\n parseFloat(cost.totalAmount.amount) < parseFloat(cost.subtotalAmount.amount) &&\n cost.totalAmount.currencyCode === cost.subtotalAmount.currencyCode\n\n return (\n <div className=\"flex gap-4\">\n {/* \u5546\u54C1\u56FE\u7247 */}\n <div className=\"shrink-0 overflow-hidden rounded-md\" style={{ width: '72px', height: '72px' }}>\n <img src={imageUrl} alt={product.title} className=\"size-full object-cover\" loading=\"lazy\" />\n </div>\n\n {/* \u5546\u54C1\u4FE1\u606F */}\n <div className=\"flex flex-1 flex-col\">\n <h4 className=\"line-clamp-2 text-sm tablet:text-[16px] font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\n {product.title}\n </h4>\n {variantTitle && (\n <p className=\"mt-0.5 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]\">{variantTitle}</p>\n )}\n <div className=\"flex items-end justify-between gap-2 mt-1\">\n {/* \u5DE6\u4FA7\uFF1A\u6570\u91CF */}\n <div className=\"flex-1\">\n <p className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\u00D7{quantity}</p>\n </div>\n\n {/* \u53F3\u4FA7\uFF1A\u4EF7\u683C */}\n <div className=\"flex gap-1 text-right\">\n <div className=\"tablet:text-[16px] text-sm font-bold leading-[1.4] tracking-[-0.02em] text-gray-900\">\n {formatAmount(cost.totalAmount)}\n </div>\n {hasDiscount && (\n <div className=\"tablet:text-[16px] text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56] line-through\">\n {formatAmount(cost.subtotalAmount)}\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u4EF7\u683C\u6C47\u603B\u7EC4\u4EF6\uFF08\u7B80\u5316\u7248\uFF09\n */\nconst CartSummary: React.FC<{\n total: CartAmount\n totalText: string\n}> = ({ total, totalText }) => {\n return (\n <div className=\"border-t border-gray-200 p-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900\">{totalText}</span>\n <span className=\"text-base tablet:text-[18px] font-bold leading-[1.4] tracking-[-0.02em] text-gray-900\">\n {formatAmount(total)}\n </span>\n </div>\n </div>\n )\n}\n\n/**\n * \u8D2D\u7269\u8F66\u5361\u7247\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u663E\u793A\u8D2D\u7269\u8F66\u5546\u54C1\u5217\u8868\n * - \u663E\u793A\u4EF7\u683C\u6C47\u603B\uFF08\u5C0F\u8BA1\u3001\u6298\u6263\u3001\u603B\u8BA1\uFF09\n * - \u663E\u793A\u6298\u6263\u7801\n * - \u63D0\u4F9B Checkout \u6309\u94AE\n * - \u7A7A\u8D2D\u7269\u8F66\u72B6\u6001\n *\n * \u5E03\u5C40\uFF1A\n * ```\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 \u8D2D\u7269\u8F66 (3 \u4EF6\u5546\u54C1) \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502 [\u56FE] \u5546\u54C11 \u2502\n * \u2502 \u53D8\u4F53: Black \u2502\n * \u2502 \u6570\u91CF: 2 $199.98 \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502 [\u56FE] \u5546\u54C12 \u2502\n * \u2502 \u53D8\u4F53: White \u2502\n * \u2502 \u6570\u91CF: 1 $99.99 \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502 \u5C0F\u8BA1 $299.97 \u2502\n * \u2502 \u6298\u6263 [SPRING20] -$30.00 \u2502\n * \u2502 \u603B\u8BA1 $269.97 \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502 [Checkout \u6309\u94AE] \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ```\n *\n * @example\n * ```tsx\n * const content: CartContent = {\n * type: 'cart',\n * data: {\n * isEmpty: false,\n * cartId: \"gid://...\",\n * totalQuantity: 3,\n * lines: [...],\n * cost: {...},\n * checkoutUrl: \"https://...\"\n * }\n * }\n * <CartCard.render(content, false, false) />\n * ```\n */\nexport const CartCard: MessageRenderer = {\n render: content => {\n const cartContent = content as CartContent\n const { data } = cartContent\n\n if (!data) {\n return null\n }\n\n const { isEmpty, lines, cost, checkoutUrl, onCart, cartId, commonText } = data\n\n // \u5408\u5E76\u9ED8\u8BA4\u6587\u6848\u548C\u81EA\u5B9A\u4E49\u6587\u6848\n const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }\n\n // \u5904\u7406\u8D2D\u7269\u8F66\u6309\u94AE\u70B9\u51FB\n const handleCart = () => {\n if (onCart) {\n onCart(cartId, checkoutUrl)\n } else if (checkoutUrl) {\n window.open(checkoutUrl, '_blank', 'noopener,noreferrer')\n }\n }\n\n // \u7A7A\u8D2D\u7269\u8F66\u72B6\u6001 - \u4E0D\u5C55\u793A\u7EC4\u4EF6\n if (isEmpty || !lines || lines.length === 0) {\n return null\n }\n\n return (\n <div className=\"w-full max-w-md overflow-hidden rounded-2xl shadow-sm\" style={{ backgroundColor: '#F5F6F7' }}>\n {/* \u5546\u54C1\u5217\u8868 */}\n <div className=\"flex flex-col gap-6 overflow-y-auto p-4\">\n {lines.map(line => (\n <CartLineItem key={line.id} line={line} />\n ))}\n </div>\n\n {/* \u4EF7\u683C\u6C47\u603B */}\n <CartSummary total={cost.totalAmount} totalText={mergedText.total} />\n\n {/* Checkout \u6309\u94AE */}\n {(checkoutUrl || onCart) && (\n <div className=\"px-4 pb-4\">\n <button\n type=\"button\"\n onClick={handleCart}\n className=\"livechat-btn-primary w-full rounded-full py-[10px] text-center text-sm font-bold leading-[1.4] tracking-[-0.02em] text-white\"\n style={{ backgroundColor: '#1D1D1F' }}\n >\n {mergedText.viewMore}\n </button>\n </div>\n )}\n </div>\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,cAAAE,IAAA,eAAAC,EAAAH,GAyCQ,IAAAI,EAAA,6BAjCRC,EAAoD,8BAOpD,SAASC,EAAaC,EAA4B,CAChD,KAAM,CAAE,OAAQC,EAAO,aAAAC,CAAa,EAAIF,EACxC,SAAO,kBAAeC,EAAOC,CAAY,CAC3C,CAKA,MAAMC,EAED,CAAC,CAAE,KAAAC,CAAK,IAAM,CACjB,KAAM,CAAE,SAAAC,EAAU,YAAAC,EAAa,KAAAC,CAAK,EAAIH,EAClC,CAAE,QAAAI,EAAS,MAAOC,EAAc,MAAAC,CAAM,EAAIJ,EAG1CK,EAAWD,GAAO,KAAO,GAGzBE,EACJ,WAAWL,EAAK,YAAY,MAAM,EAAI,WAAWA,EAAK,eAAe,MAAM,GAC3EA,EAAK,YAAY,eAAiBA,EAAK,eAAe,aAExD,SACE,QAAC,OAAI,UAAU,aAEb,oBAAC,OAAI,UAAU,sCAAsC,MAAO,CAAE,MAAO,OAAQ,OAAQ,MAAO,EAC1F,mBAAC,OAAI,IAAKI,EAAU,IAAKH,EAAQ,MAAO,UAAU,yBAAyB,QAAQ,OAAO,EAC5F,KAGA,QAAC,OAAI,UAAU,uBACb,oBAAC,MAAG,UAAU,oGACX,SAAAA,EAAQ,MACX,EACCC,MACC,OAAC,KAAE,UAAU,2EAA4E,SAAAA,EAAa,KAExG,QAAC,OAAI,UAAU,4CAEb,oBAAC,OAAI,UAAU,SACb,oBAAC,KAAE,UAAU,oEAAoE,iBAAEJ,GAAS,EAC9F,KAGA,QAAC,OAAI,UAAU,wBACb,oBAAC,OAAI,UAAU,sFACZ,SAAAN,EAAaQ,EAAK,WAAW,EAChC,EACCK,MACC,OAAC,OAAI,UAAU,oGACZ,SAAAb,EAAaQ,EAAK,cAAc,EACnC,GAEJ,GACF,GACF,GACF,CAEJ,EAKMM,EAGD,CAAC,CAAE,MAAAC,EAAO,UAAAC,CAAU,OAErB,OAAC,OAAI,UAAU,+BACb,oBAAC,OAAI,UAAU,oCACb,oBAAC,QAAK,UAAU,qEAAsE,SAAAA,EAAU,KAChG,OAAC,QAAK,UAAU,wFACb,SAAAhB,EAAae,CAAK,EACrB,GACF,EACF,EAmDSnB,EAA4B,CACvC,OAAQqB,GAAW,CACjB,MAAMC,EAAcD,EACd,CAAE,KAAAE,CAAK,EAAID,EAEjB,GAAI,CAACC,EACH,OAAO,KAGT,KAAM,CAAE,QAAAC,EAAS,MAAAC,EAAO,KAAAb,EAAM,YAAAc,EAAa,OAAAC,EAAQ,OAAAC,EAAQ,WAAAC,CAAW,EAAIN,EAGpEO,EAAa,CAAE,GAAG,sBAAqB,GAAGD,CAAW,EAGrDE,EAAa,IAAM,CACnBJ,EACFA,EAAOC,EAAQF,CAAW,EACjBA,GACT,OAAO,KAAKA,EAAa,SAAU,qBAAqB,CAE5D,EAGA,OAAIF,GAAW,CAACC,GAASA,EAAM,SAAW,EACjC,QAIP,QAAC,OAAI,UAAU,wDAAwD,MAAO,CAAE,gBAAiB,SAAU,EAEzG,oBAAC,OAAI,UAAU,0CACZ,SAAAA,EAAM,IAAIhB,MACT,OAACD,EAAA,CAA2B,KAAMC,GAAfA,EAAK,EAAgB,CACzC,EACH,KAGA,OAACS,EAAA,CAAY,MAAON,EAAK,YAAa,UAAWkB,EAAW,MAAO,GAGjEJ,GAAeC,OACf,OAAC,OAAI,UAAU,YACb,mBAAC,UACC,KAAK,SACL,QAASI,EACT,UAAU,+HACV,MAAO,CAAE,gBAAiB,SAAU,EAEnC,SAAAD,EAAW,SACd,EACF,GAEJ,CAEJ,CACF",
|
|
6
|
+
"names": ["CartCard_exports", "__export", "CartCard", "__toCommonJS", "import_jsx_runtime", "import_constants", "formatAmount", "amount", "value", "currencyCode", "CartLineItem", "line", "quantity", "merchandise", "cost", "product", "variantTitle", "image", "imageUrl", "hasDiscount", "CartSummary", "total", "totalText", "content", "cartContent", "data", "isEmpty", "lines", "checkoutUrl", "onCart", "cartId", "commonText", "mergedText", "handleCart"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var m=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";var m=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var D=(t,n)=>{for(var r in n)m(t,r,{get:n[r],enumerable:!0})},F=(t,n,r,a)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of k(n))!w.call(t,o)&&o!==r&&m(t,o,{get:()=>n[o],enumerable:!(a=_(n,o))||a.enumerable});return t};var T=t=>F(m({},"__esModule",{value:!0}),t);var $={};D($,{ProductCard:()=>A});module.exports=T($);var e=require("react/jsx-runtime"),d=require("../../constants.js");function y(t){const{amount:n,currency:r}=t;return(0,d.formatCurrency)(n,r)}function R(t,n,r=d.DEFAULT_COMMON_TEXT.off){if(!t.discount_type||t.discount_value===void 0)return"";const a=typeof t.discount_value=="string"?parseFloat(t.discount_value):t.discount_value;return isNaN(a)?"":t.discount_type==="percentage"?`${Math.round(a)}% ${r}`:t.discount_type==="fixed_amount"?`${(0,d.formatCurrency)(Math.round(a),n)} ${r}`:""}const M=({product:t,onAddToCart:n,addToCartText:r=d.DEFAULT_COMMON_TEXT.addToCart,offText:a=d.DEFAULT_COMMON_TEXT.off})=>{const{title:o,description:i,price:s,imageUrl:u,stockStatus:c,averageRating:f,variants:C}=t,h=c==="out_of_stock",l=C?.[0],p=l?.discount?.has_discount,g=p?l?.discount?.discount_price:null,x=l?.discount,N=g?{amount:g,currency:s.currency}:s,v=x&&p?R(x,s.currency,a):"",P=b=>{b.preventDefault(),b.stopPropagation(),n&&n(t)};return(0,e.jsx)("div",{className:"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow mb-[32px]",children:(0,e.jsx)("div",{className:"block",children:(0,e.jsxs)("div",{className:"flex gap-2 p-4 bg-white",children:[(0,e.jsx)("div",{className:" flex shrink-0 items-center overflow-hidden rounded-md ",style:{width:"40%"},children:(0,e.jsx)("img",{src:u,alt:o,className:`h-auto w-full object-cover ${h?"opacity-50":""}`,loading:"lazy"})}),(0,e.jsxs)("div",{className:"flex flex-1 flex-col justify-center",children:[v&&(0,e.jsx)("div",{className:"livechat-tag-product mb-1 w-fit rounded-full px-2 text-sm font-bold leading-none tracking-[-0.04em] text-white",style:{backgroundColor:"#005D8E",paddingTop:"6px",paddingBottom:"4px"},children:v}),(0,e.jsx)("h4",{className:"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:o}),(0,e.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,e.jsxs)("div",{className:"flex items-center gap-1",children:[(0,e.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:y(N)}),p&&(0,e.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through",children:y(s)})]}),f!==void 0&&(0,e.jsxs)("div",{className:"flex items-center gap-0.5 text-xs text-gray-600",children:[(0,e.jsx)("span",{className:"text-yellow-500",children:"\u2B50"}),(0,e.jsx)("span",{children:f.toFixed(1)})]})]}),(0,e.jsx)("button",{type:"button",onClick:P,className:"livechat-btn-primary mt-2 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white",style:{backgroundColor:"#1D1D1F"},children:r})]})]})})})},A={render:(t,n,r)=>{const a=t,{product:o,rawProduct:i,productHandle:s,onAddToCart:u,productCardRender:c}=a.data;return console.log("[ProductCard] \u6E32\u67D3\u4EA7\u54C1\u5361\u7247:",{productHandle:s,hasProduct:!!o,hasRawProduct:!!i,hasCustomRender:!!c}),c?(console.log("[ProductCard] \u4F7F\u7528\u81EA\u5B9A\u4E49\u6E32\u67D3, productHandle:",s),(0,e.jsx)(e.Fragment,{children:c(i||o,s)})):o?(0,e.jsx)(M,{product:o,onAddToCart:u}):null}};
|
|
2
2
|
//# sourceMappingURL=ProductCard.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/ProductCard.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * \u5546\u54C1\u5361\u7247\u6E32\u67D3\u5668 - \u7D27\u51D1\u578B\n * \u663E\u793A\u5355\u4E2A\u5546\u54C1\u7684\u8BE6\u7EC6\u4FE1\u606F\uFF08\u6A2A\u5411\u5E03\u5C40\uFF09\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u5546\u54C1\u6570\u636E\u6A21\u578B\n */\n\nimport React from 'react'\nimport type { MessageRenderer, ProductCardContent, Product, CommonText } from '../../types'\nimport {
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["/**\n * \u5546\u54C1\u5361\u7247\u6E32\u67D3\u5668 - \u7D27\u51D1\u578B\n * \u663E\u793A\u5355\u4E2A\u5546\u54C1\u7684\u8BE6\u7EC6\u4FE1\u606F\uFF08\u6A2A\u5411\u5E03\u5C40\uFF09\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u5546\u54C1\u6570\u636E\u6A21\u578B\n */\n\nimport React from 'react'\nimport type { MessageRenderer, ProductCardContent, Product, CommonText } from '../../types'\nimport { formatCurrency, DEFAULT_COMMON_TEXT } from '../../constants.js'\n\n/**\n * \u683C\u5F0F\u5316\u4EF7\u683C\n */\nfunction formatPrice(price: Product['price']): string {\n const { amount, currency } = price\n return formatCurrency(amount, currency)\n}\n\n/**\n * \u683C\u5F0F\u5316\u6298\u6263\u6807\u7B7E\u6587\u672C\n * @param discount \u6298\u6263\u5BF9\u8C61\n * @param currency \u8D27\u5E01\u4EE3\u7801\n * @param offText \"OFF\" \u6587\u6848\n * @returns \u683C\u5F0F\u5316\u540E\u7684\u6298\u6263\u6587\u672C\uFF08\u5982 \"$10 OFF\" \u6216 \"20% OFF\"\uFF09\n */\nfunction formatDiscountLabel(\n discount: { discount_type?: string; discount_value?: string | number },\n currency: string,\n offText: string = DEFAULT_COMMON_TEXT.off\n): string {\n if (!discount.discount_type || discount.discount_value === undefined) {\n return ''\n }\n\n // \u5C06 discount_value \u8F6C\u6362\u4E3A\u6570\u5B57\n const value =\n typeof discount.discount_value === 'string' ? parseFloat(discount.discount_value) : discount.discount_value\n\n if (isNaN(value)) {\n return ''\n }\n\n if (discount.discount_type === 'percentage') {\n return `${Math.round(value)}% ${offText}`\n }\n\n if (discount.discount_type === 'fixed_amount') {\n return `${formatCurrency(Math.round(value), currency)} ${offText}`\n }\n\n return ''\n}\n\n/**\n * \u7D27\u51D1\u578B\u5546\u54C1\u5361\u7247\u7EC4\u4EF6\uFF08\u6A2A\u5411\u5E03\u5C40\uFF09\n */\nconst CompactProductCard: React.FC<{\n product: Product\n onAddToCart?: (product: Product) => void\n addToCartText?: string\n offText?: string\n}> = ({ product, onAddToCart, addToCartText = DEFAULT_COMMON_TEXT.addToCart, offText = DEFAULT_COMMON_TEXT.off }) => {\n const { title, description, price, imageUrl, stockStatus, averageRating, variants } = product\n\n const isOutOfStock = stockStatus === 'out_of_stock'\n\n // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u53D8\u4F53\u7684\u6298\u6263\u4FE1\u606F\n const firstVariant = variants?.[0]\n const hasDiscount = firstVariant?.discount?.has_discount\n const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null\n const discount = firstVariant?.discount\n\n // \u5F53\u524D\u663E\u793A\u4EF7\u683C\uFF1A\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\n const currentPrice = discountPrice ? { amount: discountPrice, currency: price.currency } : price\n\n // \u683C\u5F0F\u5316\u6298\u6263\u6807\u7B7E\n const discountLabel = discount && hasDiscount ? formatDiscountLabel(discount, price.currency, offText) : ''\n\n const handleAddToCart = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n if (onAddToCart) {\n onAddToCart(product)\n }\n }\n\n return (\n <div className=\"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow mb-[32px]\">\n <div className=\"block\">\n <div className=\"flex gap-2 p-4 bg-white\">\n {/* \u5546\u54C1\u56FE\u7247 */}\n <div className=\" flex shrink-0 items-center overflow-hidden rounded-md \" style={{ width: '40%' }}>\n <img\n src={imageUrl}\n alt={title}\n className={`h-auto w-full object-cover ${isOutOfStock ? 'opacity-50' : ''}`}\n loading=\"lazy\"\n />\n </div>\n\n {/* \u5546\u54C1\u4FE1\u606F */}\n <div className=\"flex flex-1 flex-col justify-center\">\n {/* \u6298\u6263\u6807\u7B7E */}\n {discountLabel && (\n <div\n className=\"livechat-tag-product mb-1 w-fit rounded-full px-2 text-sm font-bold leading-none tracking-[-0.04em] text-white\"\n style={{ backgroundColor: '#005D8E', paddingTop: '6px', paddingBottom: '4px' }}\n >\n {discountLabel}\n </div>\n )}\n\n {/* \u6807\u9898 */}\n <h4 className=\"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\n {title}\n </h4>\n\n {/* \u63CF\u8FF0\uFF08\u53EF\u9009\uFF09 */}\n {/* {description && (\n <p className=\"line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {description}\n </p>\n )} */}\n\n {/* \u4EF7\u683C\u548C\u8BC4\u5206 */}\n <div className=\"mt-4 flex items-center gap-2\">\n <div className=\"flex items-center gap-1\">\n {/* \u5F53\u524D\u4EF7\u683C\uFF08\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\uFF09 */}\n <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {formatPrice(currentPrice)}\n </span>\n {/* \u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09- \u4EC5\u5728\u6709\u6298\u6263\u65F6\u663E\u793A */}\n {hasDiscount && (\n <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through\">\n {formatPrice(price)}\n </span>\n )}\n </div>\n {/* \u8BC4\u5206\uFF08\u53EF\u9009\uFF09 */}\n {averageRating !== undefined && (\n <div className=\"flex items-center gap-0.5 text-xs text-gray-600\">\n <span className=\"text-yellow-500\">\u2B50</span>\n <span>{averageRating.toFixed(1)}</span>\n </div>\n )}\n </div>\n\n {/* Add to Cart \u6309\u94AE - \u5728\u4EF7\u683C\u4E0B\u65B9 */}\n <button\n type=\"button\"\n onClick={handleAddToCart}\n className=\"livechat-btn-primary mt-2 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white\"\n style={{ backgroundColor: '#1D1D1F' }}\n >\n {addToCartText}\n </button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u5546\u54C1\u5361\u7247\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u7D27\u51D1\u578B\u6A2A\u5411\u5E03\u5C40\uFF08\u56FE\u7247\u5728\u5DE6\uFF0C\u4FE1\u606F\u5728\u53F3\uFF09\n * - \u663E\u793A\u6298\u6263\u6807\u7B7E\u3001\u4EF7\u683C\u3001\u8BC4\u5206\n * - \u652F\u6301 Add to Cart \u6309\u94AE\n * - \u72EC\u7ACB\u6210\u6BB5\u5C55\u793A\n * - \u652F\u6301\u81EA\u5B9A\u4E49\u6E32\u67D3\u51FD\u6570\n *\n * \u5E03\u5C40\uFF1A\n * ```\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE\u7247] \u6298\u6263\u6807\u7B7E \u2502\n * \u2502 \u5546\u54C1\u6807\u9898 \u2502\n * \u2502 $29.99 (\u539F\u4EF7) \u2502\n * \u2502 \u2B50 4.5 \u2502\n * \u2502 [Add to Cart] \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ```\n *\n * @example\n * ```tsx\n * const content: ProductCardContent = {\n * type: 'product_card',\n * data: {\n * product: { ... },\n * onAddToCart: (product) => { ... },\n * productCardRender: (product, productHandle) => <CustomCard product={product} handle={productHandle} />\n * }\n * }\n * <ProductCard.render(content, false, false) />\n * ```\n */\nexport const ProductCard: MessageRenderer = {\n render: (content, isUser, isSystem) => {\n const productContent = content as ProductCardContent\n const { product, rawProduct, productHandle, onAddToCart, productCardRender } = productContent.data\n\n console.log('[ProductCard] \u6E32\u67D3\u4EA7\u54C1\u5361\u7247:', {\n productHandle,\n hasProduct: !!product,\n hasRawProduct: !!rawProduct,\n hasCustomRender: !!productCardRender,\n })\n\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u6E32\u67D3\u51FD\u6570\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u6E32\u67D3\uFF08\u4F20\u5165\u539F\u59CB\u540E\u7AEF\u6570\u636E\u548C productHandle\uFF09\n // \u5373\u4F7F product \u4E3A\u7A7A\uFF0C\u4E5F\u8C03\u7528\u81EA\u5B9A\u4E49\u6E32\u67D3\u51FD\u6570\uFF0C\u8BA9\u5E94\u7528\u5C42\u53EF\u4EE5\u7528 productHandle \u67E5\u8BE2\u4EA7\u54C1\n if (productCardRender) {\n console.log('[ProductCard] \u4F7F\u7528\u81EA\u5B9A\u4E49\u6E32\u67D3, productHandle:', productHandle)\n return <>{productCardRender(rawProduct || product, productHandle)}</>\n }\n\n // \u9ED8\u8BA4\u6E32\u67D3\uFF1A\u5982\u679C\u6CA1\u6709\u4EA7\u54C1\u6570\u636E\u5219\u4E0D\u6E32\u67D3\n if (!product) {\n return null\n }\n\n return <CompactProductCard product={product} onAddToCart={onAddToCart} />\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductCard_exports", "__export", "ProductCard", "__toCommonJS", "import_jsx_runtime", "import_constants", "formatPrice", "price", "amount", "currency", "formatDiscountLabel", "discount", "offText", "value", "CompactProductCard", "product", "onAddToCart", "addToCartText", "title", "description", "imageUrl", "stockStatus", "averageRating", "variants", "isOutOfStock", "firstVariant", "hasDiscount", "discountPrice", "currentPrice", "discountLabel", "handleAddToCart", "e", "content", "isUser", "isSystem", "productContent", "rawProduct", "productHandle", "productCardRender"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var g=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var S=(s,r)=>{for(var d in r)g(s,d,{get:r[d],enumerable:!0})},E=(s,r,d,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of M(r))!L.call(s,l)&&l!==d&&g(s,l,{get:()=>r[l],enumerable:!(i=A(r,l))||i.enumerable});return s};var U=s=>E(g({},"__esModule",{value:!0}),s);var j={};S(j,{ProductComparison:()=>h,ProductComparisonRenderer:()=>O});module.exports=U(j);var t=require("react/jsx-runtime"),D=require("react"),f=require("../../constants");const m=(s,r="USD")=>(0,f.formatCurrency)(s,r),h=({data:s,onAddToCart:r,commonText:d})=>{const{products:i,dimensions:l}=s,N={...f.DEFAULT_COMMON_TEXT,...d},p=i?.filter(e=>e&&e.shopifyId)||[],x=2,k=p.slice(0,x),[C,P]=(0,D.useState)(k);if(p.length===0)return null;const w=(e,n)=>{const o=p.find(a=>a.shopifyId===n);if(o){const a=[...C];a[e]=o,P(a)}},b=C.slice(0,x),y=(e,n)=>!e||!e.values||!Array.isArray(e.values)?null:e.values.find(o=>o&&o.product_id===n),F=(e,n)=>n?(0,t.jsxs)("div",{className:"border-b border-[#DADCE0] pb-2",children:[(0,t.jsx)("div",{className:"mb-1",children:(0,t.jsx)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]",children:e==="price"?"has member price":e})}),(0,t.jsx)("div",{className:"flex gap-4",style:{gap:"36px"},children:b.map((o,a)=>{if(!o||!o.shopifyId)return null;const u=y(n,o.shopifyId);return(0,t.jsx)("div",{className:"flex-1",children:R(u,n.label)},`comparison-${a}`)})})]}):null,R=(e,n)=>{if(!e)return(0,t.jsx)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:"-"});if(n.toLowerCase().includes("price")){const o=e?.has_member_price,a=e?.available?e.min===e.max?m(e.min,e.currency):`${m(e.min,e.currency)} - ${m(e.max,e.currency)}`:"-";return(0,t.jsx)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:o?"Yes":"No"})}if(n.toLowerCase().includes("variant"))return(0,t.jsxs)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:[e.count||0," ",e.count===1?"variant":"variants"]});if(n.toLowerCase().includes("review")){const o=e.rating||0,a=e.count||0;return(0,t.jsxs)("div",{className:"flex items-center gap-1",children:[(0,t.jsxs)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:["\u2B50 ",o.toFixed(1)]}),(0,t.jsxs)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]",children:["(",a,")"]})]})}return(0,t.jsx)("span",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:e.display||e.value||"-"})};return(0,t.jsxs)("div",{className:"w-full overflow-hidden rounded-2xl bg-[#F5F6F7]",children:[(0,t.jsx)("div",{className:"flex p-4",style:{gap:"36px",paddingBottom:"0px"},children:b.map((e,n)=>{if(!e||!e.shopifyId)return null;const o=l.price?y(l.price,e.shopifyId):null,a=e.variants?.[0],u=a?.discount?.has_discount,v=u?a?.discount?.discount_price:null,T=v||o?.min||e.price.amount,I=e.price.amount,_=c=>{c.preventDefault(),c.stopPropagation(),r&&r(e)};return(0,t.jsxs)("div",{className:"flex flex-1 flex-col items-center",children:[(0,t.jsx)("div",{className:"mb-4 w-full",children:(0,t.jsx)("select",{value:e.shopifyId,onChange:c=>w(n,c.target.value),className:"w-full rounded-lg border border-[#DADCE0] bg-[#F5F6F7] px-3 py-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",style:{appearance:"none",backgroundImage:`url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231D1D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")`,backgroundRepeat:"no-repeat",backgroundPosition:"right 12px center",paddingRight:"32px"},children:p.map(c=>(0,t.jsx)("option",{value:c.shopifyId,children:c.title.length>30?`${c.title.slice(0,30)}...`:c.title},c.shopifyId))})}),(0,t.jsx)("a",{href:e.productUrl,target:"_blank",rel:"noopener noreferrer",className:"mb-4 block w-full max-w-[160px]",children:(0,t.jsx)("div",{className:"aspect-square w-full overflow-hidden rounded-lg",children:e.imageUrl?(0,t.jsx)("img",{src:e.imageUrl,alt:e.title,className:"size-full object-contain",loading:"lazy"}):(0,t.jsx)("div",{className:"flex size-full items-center justify-center text-gray-400",children:(0,t.jsx)("svg",{className:"size-12",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"})})})})}),(0,t.jsx)("div",{className:"mb-4 flex flex-col items-center gap-1",children:(0,t.jsxs)("div",{className:"flex items-center gap-2 justify-center flex-wrap",children:[(0,t.jsx)("span",{className:"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]",children:m(T,o?.currency||e.price.currency)}),u&&v&&(0,t.jsx)("span",{className:"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#4A4C56] line-through",children:m(I,e.price.currency)})]})}),r&&(0,t.jsx)("button",{type:"button",onClick:_,className:"livechat-btn-primary mb-3 mt-auto w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white",style:{backgroundColor:"#1D1D1F"},children:N.addToCart})]},`product-column-${n}`)})}),(0,t.jsx)("div",{className:"flex flex-col gap-4 p-4",children:Object.entries(l).map(([e,n])=>n?(0,t.jsx)("div",{children:F(n.label,n)},e):null)})]})},O={render:(s,r,d)=>{if(s.type!=="product_comparison"||!s.data)return null;const i=s.data;return i.productComparisonRender?(0,t.jsx)(t.Fragment,{children:i.productComparisonRender(i)}):(0,t.jsx)(h,{data:i,isUser:r,isSystem:d,onAddToCart:i.onAddToCart,commonText:i.commonText})}};
|
|
2
2
|
//# sourceMappingURL=ProductComparison.js.map
|
package/dist/cjs/components/LiveChatWidget/components/MessageContent/ProductComparison.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/ProductComparison.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * \u4EA7\u54C1\u5BF9\u6BD4\u7EC4\u4EF6\n * \u663E\u793A\u591A\u4E2A\u4EA7\u54C1\u7684\u5BF9\u6BD4\u4FE1\u606F\uFF0C\u91C7\u7528\u8868\u683C\u5E03\u5C40\u5C55\u793A\u5404\u7EF4\u5EA6\u5DEE\u5F02\n * \u57FA\u4E8E\u53C2\u8003\u8BBE\u8BA1\uFF1A\u9876\u90E8\u4EA7\u54C1\u5C55\u793A + \u5E95\u90E8\u5BF9\u6BD4\u8868\u683C\n */\n\nimport React, { useState } from 'react'\nimport type { Product, MessageRenderer, CommonText } from '../../types'\nimport { DEFAULT_COMMON_TEXT, CURRENCY_SYMBOLS } from '../../constants'\n\n/**\n * \u5BF9\u6BD4\u7EF4\u5EA6\u6570\u636E\u7ED3\u6784\n */\ninterface ComparisonDimension {\n label: string\n values: Array<{\n product_id: string\n [key: string]: any\n }>\n}\n\n/**\n * \u4EA7\u54C1\u5BF9\u6BD4\u6570\u636E\u7ED3\u6784\n */\nexport interface ProductComparisonData {\n products: Product[]\n dimensions: {\n price?: ComparisonDimension\n variants?: ComparisonDimension\n member_price?: ComparisonDimension\n discount?: ComparisonDimension\n reviews?: ComparisonDimension\n [key: string]: ComparisonDimension | undefined\n }\n commonText?: CommonText\n productComparisonRender?: (data: ProductComparisonData) => React.ReactNode\n}\n\nexport interface ProductComparisonProps {\n /**\n * \u4EA7\u54C1\u5BF9\u6BD4\u6570\u636E\n */\n data: ProductComparisonData\n\n /**\n * \u662F\u5426\u4E3A\u7528\u6237\u6D88\u606F\n */\n isUser?: boolean\n\n /**\n * \u662F\u5426\u4E3A\u7CFB\u7EDF\u6D88\u606F\n */\n isSystem?: boolean\n\n /**\n * \u6DFB\u52A0\u5230\u8D2D\u7269\u8F66\u56DE\u8C03\n */\n onAddToCart?: (product: Product) => void\n\n /**\n * \u901A\u7528\u6587\u6848\u914D\u7F6E\n */\n commonText?: CommonText\n}\n\n/**\n * \u683C\u5F0F\u5316\u4EF7\u683C\u663E\u793A\n */\nconst formatPrice = (amount: number, currency: string = 'USD'): string => {\n const symbol = CURRENCY_SYMBOLS[currency] || currency\n return `${symbol}${amount}`\n}\n\n/**\n * \u4EA7\u54C1\u5BF9\u6BD4\u7EC4\u4EF6\n *\n * \u5E03\u5C40\uFF1A\n * ```\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u4EA7\u54C11\u56FE\u7247] [\u4EA7\u54C12\u56FE\u7247] \u2502\n * \u2502 \u4EF7\u683C1 \u4EF7\u683C2 \u2502\n * \u2502 \u989C\u8272\u9009\u9879 \u989C\u8272\u9009\u9879 \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502 \u7EF4\u5EA61 \u2502 \u503C1-1 \u2502 \u503C1-2 \u2502\n * \u2502 \u7EF4\u5EA62 \u2502 \u503C2-1 \u2502 \u503C2-2 \u2502\n * \u2502 \u7EF4\u5EA63 \u2502 \u503C3-1 \u2502 \u503C3-2 \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ```\n */\nexport const ProductComparison: React.FC<ProductComparisonProps> = ({ data, onAddToCart, commonText }) => {\n const { products: rawProducts, dimensions } = data\n\n // \u5408\u5E76\u9ED8\u8BA4\u6587\u6848\u548C\u81EA\u5B9A\u4E49\u6587\u6848\n const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }\n\n // \u8FC7\u6EE4\u6389 null \u6216\u65E0\u6548\u7684\u4EA7\u54C1\n const allProducts = rawProducts?.filter(p => p && p.shopifyId) || []\n\n // \u5BF9\u6BD4\u5217\u6570\uFF08\u56FA\u5B9A\u4E3A2\u5217\uFF09\n const COMPARISON_COLUMNS = 2\n\n // \u521D\u59CB\u5316\u6BCF\u4E2A\u5BF9\u6BD4\u4F4D\u7F6E\u7684\u9009\u4E2D\u4EA7\u54C1\uFF08\u9ED8\u8BA4\u53D6\u524D\u4E24\u4E2A\u4EA7\u54C1\uFF09\n const initialSelectedProducts = allProducts.slice(0, COMPARISON_COLUMNS)\n const [selectedProducts, setSelectedProducts] = useState<Product[]>(initialSelectedProducts)\n\n // Early return \u5FC5\u987B\u5728\u6240\u6709 hooks \u4E4B\u540E\n if (allProducts.length === 0) {\n return null\n }\n\n // \u5904\u7406\u4EA7\u54C1\u9009\u62E9\u53D8\u66F4\n const handleProductChange = (index: number, productId: string) => {\n const newProduct = allProducts.find(p => p.shopifyId === productId)\n if (newProduct) {\n const newSelectedProducts = [...selectedProducts]\n newSelectedProducts[index] = newProduct\n setSelectedProducts(newSelectedProducts)\n }\n }\n\n // \u5F53\u524D\u663E\u793A\u7684\u4EA7\u54C1\uFF08\u786E\u4FDD\u53EA\u663E\u793A\u6307\u5B9A\u5217\u6570\uFF09\n const products = selectedProducts.slice(0, COMPARISON_COLUMNS)\n\n /**\n * \u83B7\u53D6\u6307\u5B9A\u4EA7\u54C1\u5728\u67D0\u4E2A\u7EF4\u5EA6\u7684\u503C\n */\n const getDimensionValue = (dimension: ComparisonDimension, productId: string): any => {\n if (!dimension || !dimension.values || !Array.isArray(dimension.values)) {\n return null\n }\n return dimension.values.find(v => v && v.product_id === productId)\n }\n\n /**\n * \u6E32\u67D3\u901A\u7528\u5BF9\u6BD4\u884C\n */\n const renderComparisonRow = (label: string, dimension: ComparisonDimension | undefined) => {\n if (!dimension) return null\n\n return (\n <div className=\"border-b border-[#DADCE0] pb-2\">\n {/* \u7EF4\u5EA6\u6807\u7B7E\uFF08\u6807\u9898\uFF09 */}\n <div className=\"mb-1\">\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]\">{label==='price'?'has member price':label}</span>\n </div>\n\n {/* \u4EA7\u54C1\u503C\u5217\u8868\uFF08\u6A2A\u5411\u6392\u5217\uFF09 */}\n <div className=\"flex gap-4\" style={{ gap: '36px' }}>\n {products.map((product, index) => {\n if (!product || !product.shopifyId) return null\n const value = getDimensionValue(dimension, product.shopifyId)\n\n return (\n <div key={`comparison-${index}`} className=\"flex-1\">\n {renderDimensionValue(value, dimension.label)}\n </div>\n )\n })}\n </div>\n </div>\n )\n }\n\n /**\n * \u6E32\u67D3\u7EF4\u5EA6\u503C\n */\n const renderDimensionValue = (value: any, dimensionLabel: string) => {\n if (!value) {\n return <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">-</span>\n }\n\n // \u6839\u636E\u4E0D\u540C\u7EF4\u5EA6\u7C7B\u578B\u6E32\u67D3\u4E0D\u540C\u683C\u5F0F\n if (dimensionLabel.toLowerCase().includes('price')) {\n const hasMemberPrice = value?.has_member_price\n // \u4EF7\u683C\u7EF4\u5EA6\n const priceDisplay = value?.available?\n value.min === value.max\n ? formatPrice(value.min, value.currency)\n : `${formatPrice(value.min, value.currency)} - ${formatPrice(value.max, value.currency)}`:'-'\n return <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">{hasMemberPrice?'Yes':'No'}</span>\n }\n\n if (dimensionLabel.toLowerCase().includes('variant')) {\n // \u53D8\u4F53\u6570\u91CF\n return (\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {value.count || 0} {value.count === 1 ? 'variant' : 'variants'}\n </span>\n )\n }\n\n if (dimensionLabel.toLowerCase().includes('review')) {\n // \u8BC4\u8BBA\u7EF4\u5EA6\uFF1A\u663E\u793A\u8BC4\u5206\u548C\u6570\u91CF\n const rating = value.rating || 0\n const count = value.count || 0\n return (\n <div className=\"flex items-center gap-1\">\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n \u2B50 {rating.toFixed(1)}\n </span>\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]\">\n ({count})\n </span>\n </div>\n )\n }\n\n // \u9ED8\u8BA4\u663E\u793A\n return (\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {value.display || value.value || '-'}\n </span>\n )\n }\n\n return (\n <div className=\"w-full overflow-hidden rounded-2xl bg-[#F5F6F7]\">\n {/* \u9876\u90E8\u4EA7\u54C1\u5C55\u793A\u533A\u57DF */}\n <div className=\"flex p-4\" style={{ gap: '36px', paddingBottom: '0px' }}>\n {products.map((product, index) => {\n if (!product || !product.shopifyId) return null\n\n // \u83B7\u53D6\u4EF7\u683C\u4FE1\u606F\n const priceInfo = dimensions.price ? getDimensionValue(dimensions.price, product.shopifyId) : null\n\n // \u83B7\u53D6\u6298\u6263\u4FE1\u606F\n const firstVariant = product.variants?.[0]\n const hasDiscount = firstVariant?.discount?.has_discount\n const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null\n\n // \u5F53\u524D\u663E\u793A\u4EF7\u683C\uFF1A\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\n const currentPrice = discountPrice || priceInfo?.min || product.price.amount\n const originalPrice = product.price.amount\n\n // Add to Cart \u6309\u94AE\u70B9\u51FB\u5904\u7406\n const handleAddToCart = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n if (onAddToCart) {\n onAddToCart(product)\n }\n }\n\n return (\n <div key={`product-column-${index}`} className=\"flex flex-1 flex-col items-center\">\n {/* \u4EA7\u54C1\u9009\u62E9\u4E0B\u62C9\u6846 */}\n <div className=\"mb-4 w-full\">\n <select\n value={product.shopifyId}\n onChange={e => handleProductChange(index, e.target.value)}\n className=\"w-full rounded-lg border border-[#DADCE0] bg-[#F5F6F7] px-3 py-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\"\n style={{\n appearance: 'none',\n backgroundImage:\n \"url(\\\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231D1D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\\\")\",\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'right 12px center',\n paddingRight: '32px',\n }}\n >\n {allProducts.map(p => (\n <option key={p.shopifyId} value={p.shopifyId}>\n {p.title.length > 30 ? `${p.title.slice(0, 30)}...` : p.title}\n </option>\n ))}\n </select>\n </div>\n\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n <a\n href={product.productUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mb-4 block w-full max-w-[160px]\"\n >\n <div className=\"aspect-square w-full overflow-hidden rounded-lg\">\n {product.imageUrl ? (\n <img\n src={product.imageUrl}\n alt={product.title}\n className=\"size-full object-contain\"\n loading=\"lazy\"\n />\n ) : (\n <div className=\"flex size-full items-center justify-center text-gray-400\">\n <svg className=\"size-12\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n />\n </svg>\n </div>\n )}\n </div>\n </a>\n\n {/* \u4EF7\u683C\u5C55\u793A\uFF08\u5E26\u5212\u7EBF\u4EF7\uFF09 */}\n <div className=\"mb-4 flex flex-col items-center gap-1\">\n <div className=\"flex items-center gap-2 justify-center flex-wrap\">\n {/* \u5F53\u524D\u4EF7\u683C\uFF08\u6298\u6263\u4EF7\u6216\u539F\u4EF7\uFF09 */}\n <span className=\"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {formatPrice(currentPrice, priceInfo?.currency || product.price.currency)}\n </span>\n {/* \u5212\u7EBF\u4EF7 - \u4EC5\u5728\u6709\u6298\u6263\u65F6\u663E\u793A */}\n {hasDiscount && discountPrice && (\n <span className=\"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#4A4C56] line-through\">\n {formatPrice(originalPrice, product.price.currency)}\n </span>\n )}\n </div>\n </div>\n\n {/* Add to Cart \u6309\u94AE */}\n {onAddToCart && (\n <button\n type=\"button\"\n onClick={handleAddToCart}\n className=\"livechat-btn-primary mb-3 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white\"\n style={{ backgroundColor: '#1D1D1F' }}\n >\n {mergedText.addToCart}\n </button>\n )}\n\n </div>\n )\n })}\n </div>\n\n {/* \u5BF9\u6BD4\u8868\u683C\u533A\u57DF */}\n <div className=\"flex flex-col gap-4 p-4\">\n {/* \u904D\u5386\u6240\u6709\u7EF4\u5EA6\u5E76\u6E32\u67D3 */}\n {Object.entries(dimensions).map(([key, dimension]) => {\n if (!dimension) return null // price \u5DF2\u5728\u9876\u90E8\u663E\u793A\n return <div key={key}>{renderComparisonRow(dimension.label, dimension)}</div>\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u521B\u5EFA\u4EA7\u54C1\u5BF9\u6BD4\u6E32\u67D3\u5668\n */\nexport const ProductComparisonRenderer: MessageRenderer = {\n render: (content, isUser, isSystem) => {\n if (content.type !== 'product_comparison' || !content.data) {\n return null\n }\n\n const comparisonData = content.data as ProductComparisonData & { onAddToCart?: (product: Product) => void }\n\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u6E32\u67D3\u51FD\u6570\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u6E32\u67D3\n if (comparisonData.productComparisonRender) {\n return <>{comparisonData.productComparisonRender(comparisonData)}</>\n }\n\n return (\n <ProductComparison\n data={comparisonData}\n isUser={isUser}\n isSystem={isSystem}\n onAddToCart={comparisonData.onAddToCart}\n commonText={comparisonData.commonText}\n />\n )\n },\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,EAAA,8BAAAC,IAAA,eAAAC,EAAAJ,GA4IM,IAAAK,EAAA,6BAtINC,EAAgC,iBAEhCC,
|
|
4
|
+
"sourcesContent": ["/**\n * \u4EA7\u54C1\u5BF9\u6BD4\u7EC4\u4EF6\n * \u663E\u793A\u591A\u4E2A\u4EA7\u54C1\u7684\u5BF9\u6BD4\u4FE1\u606F\uFF0C\u91C7\u7528\u8868\u683C\u5E03\u5C40\u5C55\u793A\u5404\u7EF4\u5EA6\u5DEE\u5F02\n * \u57FA\u4E8E\u53C2\u8003\u8BBE\u8BA1\uFF1A\u9876\u90E8\u4EA7\u54C1\u5C55\u793A + \u5E95\u90E8\u5BF9\u6BD4\u8868\u683C\n */\n\nimport React, { useState } from 'react'\nimport type { Product, MessageRenderer, CommonText } from '../../types'\nimport { DEFAULT_COMMON_TEXT, formatCurrency } from '../../constants'\n\n/**\n * \u5BF9\u6BD4\u7EF4\u5EA6\u6570\u636E\u7ED3\u6784\n */\ninterface ComparisonDimension {\n label: string\n values: Array<{\n product_id: string\n [key: string]: any\n }>\n}\n\n/**\n * \u4EA7\u54C1\u5BF9\u6BD4\u6570\u636E\u7ED3\u6784\n */\nexport interface ProductComparisonData {\n products: Product[]\n dimensions: {\n price?: ComparisonDimension\n variants?: ComparisonDimension\n member_price?: ComparisonDimension\n discount?: ComparisonDimension\n reviews?: ComparisonDimension\n [key: string]: ComparisonDimension | undefined\n }\n commonText?: CommonText\n productComparisonRender?: (data: ProductComparisonData) => React.ReactNode\n}\n\nexport interface ProductComparisonProps {\n /**\n * \u4EA7\u54C1\u5BF9\u6BD4\u6570\u636E\n */\n data: ProductComparisonData\n\n /**\n * \u662F\u5426\u4E3A\u7528\u6237\u6D88\u606F\n */\n isUser?: boolean\n\n /**\n * \u662F\u5426\u4E3A\u7CFB\u7EDF\u6D88\u606F\n */\n isSystem?: boolean\n\n /**\n * \u6DFB\u52A0\u5230\u8D2D\u7269\u8F66\u56DE\u8C03\n */\n onAddToCart?: (product: Product) => void\n\n /**\n * \u901A\u7528\u6587\u6848\u914D\u7F6E\n */\n commonText?: CommonText\n}\n\n/**\n * \u683C\u5F0F\u5316\u4EF7\u683C\u663E\u793A\n * \u6839\u636E\u8D27\u5E01\u7C7B\u578B\u81EA\u52A8\u51B3\u5B9A\u7B26\u53F7\u4F4D\u7F6E\uFF08\u524D\u7F6E\u6216\u540E\u7F6E\uFF09\n */\nconst formatPrice = (amount: number, currency: string = 'USD'): string => {\n return formatCurrency(amount, currency)\n}\n\n/**\n * \u4EA7\u54C1\u5BF9\u6BD4\u7EC4\u4EF6\n *\n * \u5E03\u5C40\uFF1A\n * ```\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u4EA7\u54C11\u56FE\u7247] [\u4EA7\u54C12\u56FE\u7247] \u2502\n * \u2502 \u4EF7\u683C1 \u4EF7\u683C2 \u2502\n * \u2502 \u989C\u8272\u9009\u9879 \u989C\u8272\u9009\u9879 \u2502\n * \u251C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n * \u2502 \u7EF4\u5EA61 \u2502 \u503C1-1 \u2502 \u503C1-2 \u2502\n * \u2502 \u7EF4\u5EA62 \u2502 \u503C2-1 \u2502 \u503C2-2 \u2502\n * \u2502 \u7EF4\u5EA63 \u2502 \u503C3-1 \u2502 \u503C3-2 \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * ```\n */\nexport const ProductComparison: React.FC<ProductComparisonProps> = ({ data, onAddToCart, commonText }) => {\n const { products: rawProducts, dimensions } = data\n\n // \u5408\u5E76\u9ED8\u8BA4\u6587\u6848\u548C\u81EA\u5B9A\u4E49\u6587\u6848\n const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }\n\n // \u8FC7\u6EE4\u6389 null \u6216\u65E0\u6548\u7684\u4EA7\u54C1\n const allProducts = rawProducts?.filter(p => p && p.shopifyId) || []\n\n // \u5BF9\u6BD4\u5217\u6570\uFF08\u56FA\u5B9A\u4E3A2\u5217\uFF09\n const COMPARISON_COLUMNS = 2\n\n // \u521D\u59CB\u5316\u6BCF\u4E2A\u5BF9\u6BD4\u4F4D\u7F6E\u7684\u9009\u4E2D\u4EA7\u54C1\uFF08\u9ED8\u8BA4\u53D6\u524D\u4E24\u4E2A\u4EA7\u54C1\uFF09\n const initialSelectedProducts = allProducts.slice(0, COMPARISON_COLUMNS)\n const [selectedProducts, setSelectedProducts] = useState<Product[]>(initialSelectedProducts)\n\n // Early return \u5FC5\u987B\u5728\u6240\u6709 hooks \u4E4B\u540E\n if (allProducts.length === 0) {\n return null\n }\n\n // \u5904\u7406\u4EA7\u54C1\u9009\u62E9\u53D8\u66F4\n const handleProductChange = (index: number, productId: string) => {\n const newProduct = allProducts.find(p => p.shopifyId === productId)\n if (newProduct) {\n const newSelectedProducts = [...selectedProducts]\n newSelectedProducts[index] = newProduct\n setSelectedProducts(newSelectedProducts)\n }\n }\n\n // \u5F53\u524D\u663E\u793A\u7684\u4EA7\u54C1\uFF08\u786E\u4FDD\u53EA\u663E\u793A\u6307\u5B9A\u5217\u6570\uFF09\n const products = selectedProducts.slice(0, COMPARISON_COLUMNS)\n\n /**\n * \u83B7\u53D6\u6307\u5B9A\u4EA7\u54C1\u5728\u67D0\u4E2A\u7EF4\u5EA6\u7684\u503C\n */\n const getDimensionValue = (dimension: ComparisonDimension, productId: string): any => {\n if (!dimension || !dimension.values || !Array.isArray(dimension.values)) {\n return null\n }\n return dimension.values.find(v => v && v.product_id === productId)\n }\n\n /**\n * \u6E32\u67D3\u901A\u7528\u5BF9\u6BD4\u884C\n */\n const renderComparisonRow = (label: string, dimension: ComparisonDimension | undefined) => {\n if (!dimension) return null\n\n return (\n <div className=\"border-b border-[#DADCE0] pb-2\">\n {/* \u7EF4\u5EA6\u6807\u7B7E\uFF08\u6807\u9898\uFF09 */}\n <div className=\"mb-1\">\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]\">{label==='price'?'has member price':label}</span>\n </div>\n\n {/* \u4EA7\u54C1\u503C\u5217\u8868\uFF08\u6A2A\u5411\u6392\u5217\uFF09 */}\n <div className=\"flex gap-4\" style={{ gap: '36px' }}>\n {products.map((product, index) => {\n if (!product || !product.shopifyId) return null\n const value = getDimensionValue(dimension, product.shopifyId)\n\n return (\n <div key={`comparison-${index}`} className=\"flex-1\">\n {renderDimensionValue(value, dimension.label)}\n </div>\n )\n })}\n </div>\n </div>\n )\n }\n\n /**\n * \u6E32\u67D3\u7EF4\u5EA6\u503C\n */\n const renderDimensionValue = (value: any, dimensionLabel: string) => {\n if (!value) {\n return <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">-</span>\n }\n\n // \u6839\u636E\u4E0D\u540C\u7EF4\u5EA6\u7C7B\u578B\u6E32\u67D3\u4E0D\u540C\u683C\u5F0F\n if (dimensionLabel.toLowerCase().includes('price')) {\n const hasMemberPrice = value?.has_member_price\n // \u4EF7\u683C\u7EF4\u5EA6\n const priceDisplay = value?.available?\n value.min === value.max\n ? formatPrice(value.min, value.currency)\n : `${formatPrice(value.min, value.currency)} - ${formatPrice(value.max, value.currency)}`:'-'\n return <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">{hasMemberPrice?'Yes':'No'}</span>\n }\n\n if (dimensionLabel.toLowerCase().includes('variant')) {\n // \u53D8\u4F53\u6570\u91CF\n return (\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {value.count || 0} {value.count === 1 ? 'variant' : 'variants'}\n </span>\n )\n }\n\n if (dimensionLabel.toLowerCase().includes('review')) {\n // \u8BC4\u8BBA\u7EF4\u5EA6\uFF1A\u663E\u793A\u8BC4\u5206\u548C\u6570\u91CF\n const rating = value.rating || 0\n const count = value.count || 0\n return (\n <div className=\"flex items-center gap-1\">\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n \u2B50 {rating.toFixed(1)}\n </span>\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#86868C]\">\n ({count})\n </span>\n </div>\n )\n }\n\n // \u9ED8\u8BA4\u663E\u793A\n return (\n <span className=\"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {value.display || value.value || '-'}\n </span>\n )\n }\n\n return (\n <div className=\"w-full overflow-hidden rounded-2xl bg-[#F5F6F7]\">\n {/* \u9876\u90E8\u4EA7\u54C1\u5C55\u793A\u533A\u57DF */}\n <div className=\"flex p-4\" style={{ gap: '36px', paddingBottom: '0px' }}>\n {products.map((product, index) => {\n if (!product || !product.shopifyId) return null\n\n // \u83B7\u53D6\u4EF7\u683C\u4FE1\u606F\n const priceInfo = dimensions.price ? getDimensionValue(dimensions.price, product.shopifyId) : null\n\n // \u83B7\u53D6\u6298\u6263\u4FE1\u606F\n const firstVariant = product.variants?.[0]\n const hasDiscount = firstVariant?.discount?.has_discount\n const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null\n\n // \u5F53\u524D\u663E\u793A\u4EF7\u683C\uFF1A\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\n const currentPrice = discountPrice || priceInfo?.min || product.price.amount\n const originalPrice = product.price.amount\n\n // Add to Cart \u6309\u94AE\u70B9\u51FB\u5904\u7406\n const handleAddToCart = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n if (onAddToCart) {\n onAddToCart(product)\n }\n }\n\n return (\n <div key={`product-column-${index}`} className=\"flex flex-1 flex-col items-center\">\n {/* \u4EA7\u54C1\u9009\u62E9\u4E0B\u62C9\u6846 */}\n <div className=\"mb-4 w-full\">\n <select\n value={product.shopifyId}\n onChange={e => handleProductChange(index, e.target.value)}\n className=\"w-full rounded-lg border border-[#DADCE0] bg-[#F5F6F7] px-3 py-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\"\n style={{\n appearance: 'none',\n backgroundImage:\n \"url(\\\"data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231D1D1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E\\\")\",\n backgroundRepeat: 'no-repeat',\n backgroundPosition: 'right 12px center',\n paddingRight: '32px',\n }}\n >\n {allProducts.map(p => (\n <option key={p.shopifyId} value={p.shopifyId}>\n {p.title.length > 30 ? `${p.title.slice(0, 30)}...` : p.title}\n </option>\n ))}\n </select>\n </div>\n\n {/* \u4EA7\u54C1\u56FE\u7247 */}\n <a\n href={product.productUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mb-4 block w-full max-w-[160px]\"\n >\n <div className=\"aspect-square w-full overflow-hidden rounded-lg\">\n {product.imageUrl ? (\n <img\n src={product.imageUrl}\n alt={product.title}\n className=\"size-full object-contain\"\n loading=\"lazy\"\n />\n ) : (\n <div className=\"flex size-full items-center justify-center text-gray-400\">\n <svg className=\"size-12\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n />\n </svg>\n </div>\n )}\n </div>\n </a>\n\n {/* \u4EF7\u683C\u5C55\u793A\uFF08\u5E26\u5212\u7EBF\u4EF7\uFF09 */}\n <div className=\"mb-4 flex flex-col items-center gap-1\">\n <div className=\"flex items-center gap-2 justify-center flex-wrap\">\n {/* \u5F53\u524D\u4EF7\u683C\uFF08\u6298\u6263\u4EF7\u6216\u539F\u4EF7\uFF09 */}\n <span className=\"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]\">\n {formatPrice(currentPrice, priceInfo?.currency || product.price.currency)}\n </span>\n {/* \u5212\u7EBF\u4EF7 - \u4EC5\u5728\u6709\u6298\u6263\u65F6\u663E\u793A */}\n {hasDiscount && discountPrice && (\n <span className=\"text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#4A4C56] line-through\">\n {formatPrice(originalPrice, product.price.currency)}\n </span>\n )}\n </div>\n </div>\n\n {/* Add to Cart \u6309\u94AE */}\n {onAddToCart && (\n <button\n type=\"button\"\n onClick={handleAddToCart}\n className=\"livechat-btn-primary mb-3 mt-auto w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white\"\n style={{ backgroundColor: '#1D1D1F' }}\n >\n {mergedText.addToCart}\n </button>\n )}\n\n </div>\n )\n })}\n </div>\n\n {/* \u5BF9\u6BD4\u8868\u683C\u533A\u57DF */}\n <div className=\"flex flex-col gap-4 p-4\">\n {/* \u904D\u5386\u6240\u6709\u7EF4\u5EA6\u5E76\u6E32\u67D3 */}\n {Object.entries(dimensions).map(([key, dimension]) => {\n if (!dimension) return null // price \u5DF2\u5728\u9876\u90E8\u663E\u793A\n return <div key={key}>{renderComparisonRow(dimension.label, dimension)}</div>\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u521B\u5EFA\u4EA7\u54C1\u5BF9\u6BD4\u6E32\u67D3\u5668\n */\nexport const ProductComparisonRenderer: MessageRenderer = {\n render: (content, isUser, isSystem) => {\n if (content.type !== 'product_comparison' || !content.data) {\n return null\n }\n\n const comparisonData = content.data as ProductComparisonData & { onAddToCart?: (product: Product) => void }\n\n // \u5982\u679C\u63D0\u4F9B\u4E86\u81EA\u5B9A\u4E49\u6E32\u67D3\u51FD\u6570\uFF0C\u4F7F\u7528\u81EA\u5B9A\u4E49\u6E32\u67D3\n if (comparisonData.productComparisonRender) {\n return <>{comparisonData.productComparisonRender(comparisonData)}</>\n }\n\n return (\n <ProductComparison\n data={comparisonData}\n isUser={isUser}\n isSystem={isSystem}\n onAddToCart={comparisonData.onAddToCart}\n commonText={comparisonData.commonText}\n />\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["ProductComparison_exports", "__export", "ProductComparison", "ProductComparisonRenderer", "__toCommonJS", "import_jsx_runtime", "import_react", "import_constants", "formatPrice", "amount", "currency", "data", "onAddToCart", "commonText", "rawProducts", "dimensions", "mergedText", "allProducts", "p", "COMPARISON_COLUMNS", "initialSelectedProducts", "selectedProducts", "setSelectedProducts", "handleProductChange", "index", "productId", "newProduct", "newSelectedProducts", "products", "getDimensionValue", "dimension", "v", "renderComparisonRow", "label", "product", "value", "renderDimensionValue", "dimensionLabel", "hasMemberPrice", "priceDisplay", "rating", "count", "priceInfo", "firstVariant", "hasDiscount", "discountPrice", "currentPrice", "originalPrice", "handleAddToCart", "e", "key", "content", "isUser", "isSystem", "comparisonData"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var g=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";var g=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var w=Object.prototype.hasOwnProperty;var D=(e,o)=>{for(var n in o)g(e,n,{get:o[n],enumerable:!0})},F=(e,o,n,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let s of _(o))!w.call(e,s)&&s!==n&&g(e,s,{get:()=>o[s],enumerable:!(a=P(o,s))||a.enumerable});return e};var L=e=>F(g({},"__esModule",{value:!0}),e);var E={};D(E,{ProductList:()=>R});module.exports=L(E);var t=require("react/jsx-runtime"),N=require("react"),d=require("../../constants.js");function C(e){const{amount:o,currency:n}=e;return(0,d.formatCurrency)(o,n)}function A(e,o,n=d.DEFAULT_COMMON_TEXT.off){if(!e.discount_type||e.discount_value===void 0)return"";const a=typeof e.discount_value=="string"?parseFloat(e.discount_value):e.discount_value;return isNaN(a)?"":e.discount_type==="percentage"?`${Math.round(a)}% ${n}`:e.discount_type==="fixed_amount"?`${(0,d.formatCurrency)(Math.round(a),o)} ${n}`:""}const I=({product:e,onAddToCart:o,addToCartText:n=d.DEFAULT_COMMON_TEXT.addToCart,offText:a=d.DEFAULT_COMMON_TEXT.off})=>{const{title:s,description:l,price:r,imageUrl:c,stockStatus:u,averageRating:p,variants:m}=e,i=u==="out_of_stock",f=m?.[0],x=f?.discount?.has_discount,v=x?f?.discount?.discount_price:null,h=f?.discount,T=v?{amount:v,currency:r.currency}:r,y=h&&x?A(h,r.currency,a):"",k=b=>{b.preventDefault(),b.stopPropagation(),o&&o(e)};return(0,t.jsx)("div",{className:"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow",children:(0,t.jsx)("div",{className:"block",children:(0,t.jsxs)("div",{className:"flex gap-2 p-4",children:[(0,t.jsx)("div",{className:" flex shrink-0 items-center overflow-hidden rounded-md ",style:{width:"40%"},children:(0,t.jsx)("img",{src:c,alt:s,className:`h-auto w-full object-cover ${i?"opacity-50":""}`,loading:"lazy"})}),(0,t.jsxs)("div",{className:"flex flex-1 flex-col justify-center",children:[y&&(0,t.jsx)("div",{className:"livechat-tag-product mb-1 w-fit rounded-full px-2 text-sm font-bold leading-none tracking-[-0.04em] text-white",style:{backgroundColor:"#005D8E",paddingTop:"6px",paddingBottom:"4px"},children:y}),(0,t.jsx)("h4",{className:"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:s}),l&&(0,t.jsx)("p",{className:"line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:l}),(0,t.jsxs)("div",{className:"mt-4 flex items-center gap-2",children:[(0,t.jsxs)("div",{className:"flex items-center gap-1",children:[(0,t.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]",children:C(T)}),x&&(0,t.jsx)("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through",children:C(r)})]}),p!==void 0&&(0,t.jsxs)("div",{className:"flex items-center gap-0.5 text-xs text-gray-600",children:[(0,t.jsx)("span",{className:"text-yellow-500",children:"\u2B50"}),(0,t.jsx)("span",{children:p.toFixed(1)})]})]}),(0,t.jsx)("button",{type:"button",onClick:k,className:"livechat-btn-primary mt-2 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white",style:{backgroundColor:"#1D1D1F"},children:n})]})]})})})},M=({products:e,title:o,onAddToCart:n,commonText:a})=>{const[s,l]=(0,N.useState)(!1),r={...d.DEFAULT_COMMON_TEXT,...a},c=e.filter(i=>i&&i.shopifyId),u=3,p=c.length>u,m=s?c:c.slice(0,u);return(0,t.jsxs)("div",{className:"flex w-full flex-col gap-2",children:[o&&(0,t.jsx)("h3",{className:"text-sm font-semibold text-gray-900",children:o}),(0,t.jsx)("div",{className:"flex flex-col gap-1.5",children:m.map(i=>!i||!i.shopifyId?null:(0,t.jsx)(I,{product:i,onAddToCart:n,addToCartText:r.addToCart,offText:r.off},i.shopifyId))}),p&&(0,t.jsxs)("button",{type:"button",onClick:()=>l(!s),className:"flex items-center justify-center gap-1.5 px-3 py-2 text-[14px] font-bold leading-[1.2] tracking-tighter text-[#080A0F]",children:[(0,t.jsx)("span",{children:s?r.showLess:r.learnMore}),(0,t.jsx)("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:`transition-transform ${s?"rotate-180":""}`,children:(0,t.jsx)("polyline",{points:"6 9 12 15 18 9"})})]})]})},R={render:e=>{const o=e,{products:n,title:a,onAddToCart:s,commonText:l}=o.data,r=n?.filter(c=>c&&c.shopifyId)||[];return r.length===0?null:(0,t.jsx)(M,{products:r,title:a,onAddToCart:s,commonText:l})}};
|
|
2
2
|
//# sourceMappingURL=ProductList.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/LiveChatWidget/components/MessageContent/ProductList.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * \u5546\u54C1\u5217\u8868\u6E32\u67D3\u5668\n * \u663E\u793A\u591A\u4E2A\u5546\u54C1\u7684\u7EB5\u5411\u5217\u8868\uFF0C\u652F\u6301\u5C55\u5F00/\u6536\u8D77\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u5546\u54C1\u6570\u636E\u6A21\u578B\n */\n\nimport React, { useState } from 'react'\nimport type { MessageRenderer, ProductListContent, Product, CommonText } from '../../types'\nimport { CURRENCY_SYMBOLS, DEFAULT_COMMON_TEXT } from '../../constants.js'\n\n/**\n * \u683C\u5F0F\u5316\u4EF7\u683C\n */\nfunction formatPrice(price: Product['price']): string {\n const { amount, currency } = price\n\n const symbol = CURRENCY_SYMBOLS[currency] || currency\n return `${symbol}${amount.toFixed(2)}`\n}\n\n/**\n * \u683C\u5F0F\u5316\u6298\u6263\u6807\u7B7E\u6587\u672C\n * @param discount \u6298\u6263\u5BF9\u8C61\n * @param currency \u8D27\u5E01\u4EE3\u7801\n * @param offText \"OFF\" \u6587\u6848\n * @returns \u683C\u5F0F\u5316\u540E\u7684\u6298\u6263\u6587\u672C\uFF08\u5982 \"$10 OFF\" \u6216 \"20% OFF\"\uFF09\n */\nfunction formatDiscountLabel(\n discount: { discount_type?: string; discount_value?: string | number },\n currency: string,\n offText: string = DEFAULT_COMMON_TEXT.off\n): string {\n if (!discount.discount_type || discount.discount_value === undefined) {\n return ''\n }\n\n // \u5C06 discount_value \u8F6C\u6362\u4E3A\u6570\u5B57\n const value =\n typeof discount.discount_value === 'string' ? parseFloat(discount.discount_value) : discount.discount_value\n\n if (isNaN(value)) {\n return ''\n }\n\n if (discount.discount_type === 'percentage') {\n return `${Math.round(value)}% ${offText}`\n }\n\n if (discount.discount_type === 'fixed_amount') {\n const symbol = CURRENCY_SYMBOLS[currency] || currency\n return `${symbol}${Math.round(value)} ${offText}`\n }\n\n return ''\n}\n\n/**\n * \u7D27\u51D1\u578B\u5546\u54C1\u5361\u7247\uFF08\u7528\u4E8E\u7EB5\u5411\u5217\u8868\uFF09\n */\nconst CompactProductCard: React.FC<{\n product: Product\n onAddToCart?: (product: Product) => void\n addToCartText?: string\n offText?: string\n}> = ({ product, onAddToCart, addToCartText = DEFAULT_COMMON_TEXT.addToCart, offText = DEFAULT_COMMON_TEXT.off }) => {\n const { title, description, price, imageUrl, stockStatus, averageRating, variants } = product\n\n const isOutOfStock = stockStatus === 'out_of_stock'\n\n // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u53D8\u4F53\u7684\u6298\u6263\u4FE1\u606F\n const firstVariant = variants?.[0]\n const hasDiscount = firstVariant?.discount?.has_discount\n const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null\n const discount = firstVariant?.discount\n\n // \u5F53\u524D\u663E\u793A\u4EF7\u683C\uFF1A\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\n const currentPrice = discountPrice ? { amount: discountPrice, currency: price.currency } : price\n\n // \u683C\u5F0F\u5316\u6298\u6263\u6807\u7B7E\n const discountLabel = discount && hasDiscount ? formatDiscountLabel(discount, price.currency, offText) : ''\n\n const handleAddToCart = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n if (onAddToCart) {\n onAddToCart(product)\n }\n }\n\n return (\n <div className=\"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow\">\n <div className=\"block\">\n <div className=\"flex gap-2 p-4\">\n {/* \u5546\u54C1\u56FE\u7247 */}\n <div className=\" flex shrink-0 items-center overflow-hidden rounded-md \" style={{ width: '40%' }}>\n <img\n src={imageUrl}\n alt={title}\n className={`h-auto w-full object-cover ${isOutOfStock ? 'opacity-50' : ''}`}\n loading=\"lazy\"\n />\n </div>\n\n {/* \u5546\u54C1\u4FE1\u606F */}\n <div className=\"flex flex-1 flex-col justify-center\">\n {/* \u6298\u6263\u6807\u7B7E */}\n {discountLabel && (\n <div\n className=\"livechat-tag-product mb-1 w-fit rounded-full px-2 text-sm font-bold leading-none tracking-[-0.04em] text-white\"\n style={{ backgroundColor: '#005D8E', paddingTop: '6px', paddingBottom: '4px' }}\n >\n {discountLabel}\n </div>\n )}\n\n {/* \u6807\u9898 */}\n <h4 className=\"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\n {title}\n </h4>\n\n {/* \u63CF\u8FF0\uFF08\u53EF\u9009\uFF09 */}\n {description && (\n <p className=\"line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {description}\n </p>\n )}\n\n {/* \u4EF7\u683C\u548C\u8BC4\u5206 */}\n <div className=\"mt-4 flex items-center gap-2\">\n <div className=\"flex items-center gap-1\">\n {/* \u5F53\u524D\u4EF7\u683C\uFF08\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\uFF09 */}\n <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {formatPrice(currentPrice)}\n </span>\n {/* \u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09- \u4EC5\u5728\u6709\u6298\u6263\u65F6\u663E\u793A */}\n {hasDiscount && (\n <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through\">\n {formatPrice(price)}\n </span>\n )}\n </div>\n {/* \u8BC4\u5206\uFF08\u53EF\u9009\uFF09 */}\n {averageRating !== undefined && (\n <div className=\"flex items-center gap-0.5 text-xs text-gray-600\">\n <span className=\"text-yellow-500\">\u2B50</span>\n <span>{averageRating.toFixed(1)}</span>\n </div>\n )}\n </div>\n\n {/* Add to Cart \u6309\u94AE - \u5728\u4EF7\u683C\u4E0B\u65B9 */}\n <button\n type=\"button\"\n onClick={handleAddToCart}\n className=\"livechat-btn-primary mt-2 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white\"\n style={{ backgroundColor: '#1D1D1F' }}\n >\n {addToCartText}\n </button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u5546\u54C1\u5217\u8868\u5185\u90E8\u7EC4\u4EF6\uFF08\u652F\u6301\u5C55\u5F00/\u6536\u8D77\uFF09\n */\nconst ProductListComponent: React.FC<{\n products: Product[]\n title?: string\n onAddToCart?: (product: Product) => void\n commonText?: CommonText\n}> = ({ products, title, onAddToCart, commonText }) => {\n const [isExpanded, setIsExpanded] = useState(false)\n\n // \u5408\u5E76\u9ED8\u8BA4\u6587\u6848\u548C\u81EA\u5B9A\u4E49\u6587\u6848\n const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }\n\n // \u8FC7\u6EE4\u6389 null \u6216\u65E0\u6548\u7684\u4EA7\u54C1\n const validProducts = products.filter(p => p && p.shopifyId)\n\n // \u9ED8\u8BA4\u663E\u793A\u524D3\u4E2A\u4EA7\u54C1\n const INITIAL_DISPLAY_COUNT = 3\n const hasMore = validProducts.length > INITIAL_DISPLAY_COUNT\n const displayedProducts = isExpanded ? validProducts : validProducts.slice(0, INITIAL_DISPLAY_COUNT)\n\n return (\n <div className=\"flex w-full flex-col gap-2\">\n {/* \u5217\u8868\u6807\u9898\uFF08\u53EF\u9009\uFF09 */}\n {title && <h3 className=\"text-sm font-semibold text-gray-900\">{title}</h3>}\n\n {/* \u7EB5\u5411\u6392\u5217\u7684\u5546\u54C1\u5217\u8868 */}\n <div className=\"flex flex-col gap-1.5\">\n {displayedProducts.map(product => {\n if (!product || !product.shopifyId) return null\n return (\n <CompactProductCard\n key={product.shopifyId}\n product={product}\n onAddToCart={onAddToCart}\n addToCartText={mergedText.addToCart}\n offText={mergedText.off}\n />\n )\n })}\n </div>\n\n {/* Learn More \u6309\u94AE */}\n {hasMore && (\n <button\n type=\"button\"\n onClick={() => setIsExpanded(!isExpanded)}\n className=\"flex items-center justify-center gap-1.5 px-3 py-2 text-[14px] font-bold leading-[1.2] tracking-tighter text-[#080A0F]\"\n >\n <span>{isExpanded ? mergedText.showLess : mergedText.learnMore}</span>\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={`transition-transform ${isExpanded ? 'rotate-180' : ''}`}\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n )}\n </div>\n )\n}\n\n/**\n * \u5546\u54C1\u5217\u8868\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u7EB5\u5411\u5C55\u793A\u591A\u4E2A\u5546\u54C1\n * - \u9ED8\u8BA4\u663E\u793A\u524D3\u4E2A\u4EA7\u54C1\n * - \u652F\u6301\u5C55\u5F00/\u6536\u8D77\u67E5\u770B\u5168\u90E8\n * - \u7D27\u51D1\u578B\u5361\u7247\u8BBE\u8BA1\n * - \u53EF\u9009\u6807\u9898\n *\n * \u5E03\u5C40\uFF1A\n * ```\n * \u6807\u9898\uFF08\u53EF\u9009\uFF09\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE] \u5546\u54C1\u6807\u9898 \u2502\n * \u2502 $29.99 \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE] \u5546\u54C1\u6807\u9898 \u2502\n * \u2502 $39.99 \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE] \u5546\u54C1\u6807\u9898 \u2502\n * \u2502 $49.99 \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * [ Learn More \u2193 ]\n * ```\n *\n * @example\n * ```tsx\n * const content: ProductListContent = {\n * type: 'product_list',\n * data: {\n * title: '\u76F8\u5173\u5546\u54C1\u63A8\u8350',\n * products: [product1, product2, product3, product4, product5]\n * }\n * }\n * <ProductList.render(content, false, false) />\n * ```\n */\nexport const ProductList: MessageRenderer = {\n render: content => {\n const productListContent = content as ProductListContent\n const { products, title, onAddToCart, commonText } = productListContent.data\n\n // \u8FC7\u6EE4\u6389 null \u6216\u65E0\u6548\u7684\u4EA7\u54C1\n const validProducts = products?.filter(p => p && p.shopifyId) || []\n\n if (validProducts.length === 0) {\n return null\n }\n\n return (\n <ProductListComponent products={validProducts} title={title} onAddToCart={onAddToCart} commonText={commonText} />\n )\n },\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["/**\n * \u5546\u54C1\u5217\u8868\u6E32\u67D3\u5668\n * \u663E\u793A\u591A\u4E2A\u5546\u54C1\u7684\u7EB5\u5411\u5217\u8868\uFF0C\u652F\u6301\u5C55\u5F00/\u6536\u8D77\n * \u57FA\u4E8E specs/livechat-widget/data-model.md \u7684\u5546\u54C1\u6570\u636E\u6A21\u578B\n */\n\nimport React, { useState } from 'react'\nimport type { MessageRenderer, ProductListContent, Product, CommonText } from '../../types'\nimport { formatCurrency, DEFAULT_COMMON_TEXT } from '../../constants.js'\n\n/**\n * \u683C\u5F0F\u5316\u4EF7\u683C\n */\nfunction formatPrice(price: Product['price']): string {\n const { amount, currency } = price\n return formatCurrency(amount, currency)\n}\n\n/**\n * \u683C\u5F0F\u5316\u6298\u6263\u6807\u7B7E\u6587\u672C\n * @param discount \u6298\u6263\u5BF9\u8C61\n * @param currency \u8D27\u5E01\u4EE3\u7801\n * @param offText \"OFF\" \u6587\u6848\n * @returns \u683C\u5F0F\u5316\u540E\u7684\u6298\u6263\u6587\u672C\uFF08\u5982 \"$10 OFF\" \u6216 \"20% OFF\"\uFF09\n */\nfunction formatDiscountLabel(\n discount: { discount_type?: string; discount_value?: string | number },\n currency: string,\n offText: string = DEFAULT_COMMON_TEXT.off\n): string {\n if (!discount.discount_type || discount.discount_value === undefined) {\n return ''\n }\n\n // \u5C06 discount_value \u8F6C\u6362\u4E3A\u6570\u5B57\n const value =\n typeof discount.discount_value === 'string' ? parseFloat(discount.discount_value) : discount.discount_value\n\n if (isNaN(value)) {\n return ''\n }\n\n if (discount.discount_type === 'percentage') {\n return `${Math.round(value)}% ${offText}`\n }\n\n if (discount.discount_type === 'fixed_amount') {\n return `${formatCurrency(Math.round(value), currency)} ${offText}`\n }\n\n return ''\n}\n\n/**\n * \u7D27\u51D1\u578B\u5546\u54C1\u5361\u7247\uFF08\u7528\u4E8E\u7EB5\u5411\u5217\u8868\uFF09\n */\nconst CompactProductCard: React.FC<{\n product: Product\n onAddToCart?: (product: Product) => void\n addToCartText?: string\n offText?: string\n}> = ({ product, onAddToCart, addToCartText = DEFAULT_COMMON_TEXT.addToCart, offText = DEFAULT_COMMON_TEXT.off }) => {\n const { title, description, price, imageUrl, stockStatus, averageRating, variants } = product\n\n const isOutOfStock = stockStatus === 'out_of_stock'\n\n // \u83B7\u53D6\u7B2C\u4E00\u4E2A\u53D8\u4F53\u7684\u6298\u6263\u4FE1\u606F\n const firstVariant = variants?.[0]\n const hasDiscount = firstVariant?.discount?.has_discount\n const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null\n const discount = firstVariant?.discount\n\n // \u5F53\u524D\u663E\u793A\u4EF7\u683C\uFF1A\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\n const currentPrice = discountPrice ? { amount: discountPrice, currency: price.currency } : price\n\n // \u683C\u5F0F\u5316\u6298\u6263\u6807\u7B7E\n const discountLabel = discount && hasDiscount ? formatDiscountLabel(discount, price.currency, offText) : ''\n\n const handleAddToCart = (e: React.MouseEvent) => {\n e.preventDefault()\n e.stopPropagation()\n if (onAddToCart) {\n onAddToCart(product)\n }\n }\n\n return (\n <div className=\"block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow\">\n <div className=\"block\">\n <div className=\"flex gap-2 p-4\">\n {/* \u5546\u54C1\u56FE\u7247 */}\n <div className=\" flex shrink-0 items-center overflow-hidden rounded-md \" style={{ width: '40%' }}>\n <img\n src={imageUrl}\n alt={title}\n className={`h-auto w-full object-cover ${isOutOfStock ? 'opacity-50' : ''}`}\n loading=\"lazy\"\n />\n </div>\n\n {/* \u5546\u54C1\u4FE1\u606F */}\n <div className=\"flex flex-1 flex-col justify-center\">\n {/* \u6298\u6263\u6807\u7B7E */}\n {discountLabel && (\n <div\n className=\"livechat-tag-product mb-1 w-fit rounded-full px-2 text-sm font-bold leading-none tracking-[-0.04em] text-white\"\n style={{ backgroundColor: '#005D8E', paddingTop: '6px', paddingBottom: '4px' }}\n >\n {discountLabel}\n </div>\n )}\n\n {/* \u6807\u9898 */}\n <h4 className=\"line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]\">\n {title}\n </h4>\n\n {/* \u63CF\u8FF0\uFF08\u53EF\u9009\uFF09 */}\n {description && (\n <p className=\"line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {description}\n </p>\n )}\n\n {/* \u4EF7\u683C\u548C\u8BC4\u5206 */}\n <div className=\"mt-4 flex items-center gap-2\">\n <div className=\"flex items-center gap-1\">\n {/* \u5F53\u524D\u4EF7\u683C\uFF08\u6709\u6298\u6263\u65F6\u663E\u793A\u6298\u6263\u4EF7\uFF0C\u5426\u5219\u663E\u793A\u539F\u4EF7\uFF09 */}\n <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]\">\n {formatPrice(currentPrice)}\n </span>\n {/* \u539F\u4EF7\uFF08\u5212\u7EBF\u4EF7\uFF09- \u4EC5\u5728\u6709\u6298\u6263\u65F6\u663E\u793A */}\n {hasDiscount && (\n <span className=\"text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through\">\n {formatPrice(price)}\n </span>\n )}\n </div>\n {/* \u8BC4\u5206\uFF08\u53EF\u9009\uFF09 */}\n {averageRating !== undefined && (\n <div className=\"flex items-center gap-0.5 text-xs text-gray-600\">\n <span className=\"text-yellow-500\">\u2B50</span>\n <span>{averageRating.toFixed(1)}</span>\n </div>\n )}\n </div>\n\n {/* Add to Cart \u6309\u94AE - \u5728\u4EF7\u683C\u4E0B\u65B9 */}\n <button\n type=\"button\"\n onClick={handleAddToCart}\n className=\"livechat-btn-primary mt-2 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white\"\n style={{ backgroundColor: '#1D1D1F' }}\n >\n {addToCartText}\n </button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u5546\u54C1\u5217\u8868\u5185\u90E8\u7EC4\u4EF6\uFF08\u652F\u6301\u5C55\u5F00/\u6536\u8D77\uFF09\n */\nconst ProductListComponent: React.FC<{\n products: Product[]\n title?: string\n onAddToCart?: (product: Product) => void\n commonText?: CommonText\n}> = ({ products, title, onAddToCart, commonText }) => {\n const [isExpanded, setIsExpanded] = useState(false)\n\n // \u5408\u5E76\u9ED8\u8BA4\u6587\u6848\u548C\u81EA\u5B9A\u4E49\u6587\u6848\n const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }\n\n // \u8FC7\u6EE4\u6389 null \u6216\u65E0\u6548\u7684\u4EA7\u54C1\n const validProducts = products.filter(p => p && p.shopifyId)\n\n // \u9ED8\u8BA4\u663E\u793A\u524D3\u4E2A\u4EA7\u54C1\n const INITIAL_DISPLAY_COUNT = 3\n const hasMore = validProducts.length > INITIAL_DISPLAY_COUNT\n const displayedProducts = isExpanded ? validProducts : validProducts.slice(0, INITIAL_DISPLAY_COUNT)\n\n return (\n <div className=\"flex w-full flex-col gap-2\">\n {/* \u5217\u8868\u6807\u9898\uFF08\u53EF\u9009\uFF09 */}\n {title && <h3 className=\"text-sm font-semibold text-gray-900\">{title}</h3>}\n\n {/* \u7EB5\u5411\u6392\u5217\u7684\u5546\u54C1\u5217\u8868 */}\n <div className=\"flex flex-col gap-1.5\">\n {displayedProducts.map(product => {\n if (!product || !product.shopifyId) return null\n return (\n <CompactProductCard\n key={product.shopifyId}\n product={product}\n onAddToCart={onAddToCart}\n addToCartText={mergedText.addToCart}\n offText={mergedText.off}\n />\n )\n })}\n </div>\n\n {/* Learn More \u6309\u94AE */}\n {hasMore && (\n <button\n type=\"button\"\n onClick={() => setIsExpanded(!isExpanded)}\n className=\"flex items-center justify-center gap-1.5 px-3 py-2 text-[14px] font-bold leading-[1.2] tracking-tighter text-[#080A0F]\"\n >\n <span>{isExpanded ? mergedText.showLess : mergedText.learnMore}</span>\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n className={`transition-transform ${isExpanded ? 'rotate-180' : ''}`}\n >\n <polyline points=\"6 9 12 15 18 9\" />\n </svg>\n </button>\n )}\n </div>\n )\n}\n\n/**\n * \u5546\u54C1\u5217\u8868\u6E32\u67D3\u5668\n *\n * \u529F\u80FD\uFF1A\n * - \u7EB5\u5411\u5C55\u793A\u591A\u4E2A\u5546\u54C1\n * - \u9ED8\u8BA4\u663E\u793A\u524D3\u4E2A\u4EA7\u54C1\n * - \u652F\u6301\u5C55\u5F00/\u6536\u8D77\u67E5\u770B\u5168\u90E8\n * - \u7D27\u51D1\u578B\u5361\u7247\u8BBE\u8BA1\n * - \u53EF\u9009\u6807\u9898\n *\n * \u5E03\u5C40\uFF1A\n * ```\n * \u6807\u9898\uFF08\u53EF\u9009\uFF09\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE] \u5546\u54C1\u6807\u9898 \u2502\n * \u2502 $29.99 \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE] \u5546\u54C1\u6807\u9898 \u2502\n * \u2502 $39.99 \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n * \u2502 [\u56FE] \u5546\u54C1\u6807\u9898 \u2502\n * \u2502 $49.99 \u2502\n * \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n * [ Learn More \u2193 ]\n * ```\n *\n * @example\n * ```tsx\n * const content: ProductListContent = {\n * type: 'product_list',\n * data: {\n * title: '\u76F8\u5173\u5546\u54C1\u63A8\u8350',\n * products: [product1, product2, product3, product4, product5]\n * }\n * }\n * <ProductList.render(content, false, false) />\n * ```\n */\nexport const ProductList: MessageRenderer = {\n render: content => {\n const productListContent = content as ProductListContent\n const { products, title, onAddToCart, commonText } = productListContent.data\n\n // \u8FC7\u6EE4\u6389 null \u6216\u65E0\u6548\u7684\u4EA7\u54C1\n const validProducts = products?.filter(p => p && p.shopifyId) || []\n\n if (validProducts.length === 0) {\n return null\n }\n\n return (\n <ProductListComponent products={validProducts} title={title} onAddToCart={onAddToCart} commonText={commonText} />\n )\n },\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,iBAAAE,IAAA,eAAAC,EAAAH,GA4FY,IAAAI,EAAA,6BAtFZC,EAAgC,iBAEhCC,EAAoD,8BAKpD,SAASC,EAAYC,EAAiC,CACpD,KAAM,CAAE,OAAAC,EAAQ,SAAAC,CAAS,EAAIF,EAC7B,SAAO,kBAAeC,EAAQC,CAAQ,CACxC,CASA,SAASC,EACPC,EACAF,EACAG,EAAkB,sBAAoB,IAC9B,CACR,GAAI,CAACD,EAAS,eAAiBA,EAAS,iBAAmB,OACzD,MAAO,GAIT,MAAME,EACJ,OAAOF,EAAS,gBAAmB,SAAW,WAAWA,EAAS,cAAc,EAAIA,EAAS,eAE/F,OAAI,MAAME,CAAK,EACN,GAGLF,EAAS,gBAAkB,aACtB,GAAG,KAAK,MAAME,CAAK,CAAC,KAAKD,CAAO,GAGrCD,EAAS,gBAAkB,eACtB,MAAG,kBAAe,KAAK,MAAME,CAAK,EAAGJ,CAAQ,CAAC,IAAIG,CAAO,GAG3D,EACT,CAKA,MAAME,EAKD,CAAC,CAAE,QAAAC,EAAS,YAAAC,EAAa,cAAAC,EAAgB,sBAAoB,UAAW,QAAAL,EAAU,sBAAoB,GAAI,IAAM,CACnH,KAAM,CAAE,MAAAM,EAAO,YAAAC,EAAa,MAAAZ,EAAO,SAAAa,EAAU,YAAAC,EAAa,cAAAC,EAAe,SAAAC,CAAS,EAAIR,EAEhFS,EAAeH,IAAgB,eAG/BI,EAAeF,IAAW,CAAC,EAC3BG,EAAcD,GAAc,UAAU,aACtCE,EAAgBD,EAAcD,GAAc,UAAU,eAAiB,KACvEd,EAAWc,GAAc,SAGzBG,EAAeD,EAAgB,CAAE,OAAQA,EAAe,SAAUpB,EAAM,QAAS,EAAIA,EAGrFsB,EAAgBlB,GAAYe,EAAchB,EAAoBC,EAAUJ,EAAM,SAAUK,CAAO,EAAI,GAEnGkB,EAAmBC,GAAwB,CAC/CA,EAAE,eAAe,EACjBA,EAAE,gBAAgB,EACdf,GACFA,EAAYD,CAAO,CAEvB,EAEA,SACE,OAAC,OAAI,UAAU,0EACb,mBAAC,OAAI,UAAU,QACb,oBAAC,OAAI,UAAU,iBAEb,oBAAC,OAAI,UAAU,0DAA0D,MAAO,CAAE,MAAO,KAAM,EAC7F,mBAAC,OACC,IAAKK,EACL,IAAKF,EACL,UAAW,8BAA8BM,EAAe,aAAe,EAAE,GACzE,QAAQ,OACV,EACF,KAGA,QAAC,OAAI,UAAU,sCAEZ,UAAAK,MACC,OAAC,OACC,UAAU,iHACV,MAAO,CAAE,gBAAiB,UAAW,WAAY,MAAO,cAAe,KAAM,EAE5E,SAAAA,EACH,KAIF,OAAC,MAAG,UAAU,mFACX,SAAAX,EACH,EAGCC,MACC,OAAC,KAAE,UAAU,iFACV,SAAAA,EACH,KAIF,QAAC,OAAI,UAAU,+BACb,qBAAC,OAAI,UAAU,0BAEb,oBAAC,QAAK,UAAU,sEACb,SAAAb,EAAYsB,CAAY,EAC3B,EAECF,MACC,OAAC,QAAK,UAAU,mFACb,SAAApB,EAAYC,CAAK,EACpB,GAEJ,EAECe,IAAkB,WACjB,QAAC,OAAI,UAAU,kDACb,oBAAC,QAAK,UAAU,kBAAkB,kBAAC,KACnC,OAAC,QAAM,SAAAA,EAAc,QAAQ,CAAC,EAAE,GAClC,GAEJ,KAGA,OAAC,UACC,KAAK,SACL,QAASQ,EACT,UAAU,6IACV,MAAO,CAAE,gBAAiB,SAAU,EAEnC,SAAAb,EACH,GACF,GACF,EACF,EACF,CAEJ,EAKMe,EAKD,CAAC,CAAE,SAAAC,EAAU,MAAAf,EAAO,YAAAF,EAAa,WAAAkB,CAAW,IAAM,CACrD,KAAM,CAACC,EAAYC,CAAa,KAAI,YAAS,EAAK,EAG5CC,EAAa,CAAE,GAAG,sBAAqB,GAAGH,CAAW,EAGrDI,EAAgBL,EAAS,OAAOM,GAAKA,GAAKA,EAAE,SAAS,EAGrDC,EAAwB,EACxBC,EAAUH,EAAc,OAASE,EACjCE,EAAoBP,EAAaG,EAAgBA,EAAc,MAAM,EAAGE,CAAqB,EAEnG,SACE,QAAC,OAAI,UAAU,6BAEZ,UAAAtB,MAAS,OAAC,MAAG,UAAU,sCAAuC,SAAAA,EAAM,KAGrE,OAAC,OAAI,UAAU,wBACZ,SAAAwB,EAAkB,IAAI3B,GACjB,CAACA,GAAW,CAACA,EAAQ,UAAkB,QAEzC,OAACD,EAAA,CAEC,QAASC,EACT,YAAaC,EACb,cAAeqB,EAAW,UAC1B,QAASA,EAAW,KAJftB,EAAQ,SAKf,CAEH,EACH,EAGC0B,MACC,QAAC,UACC,KAAK,SACL,QAAS,IAAML,EAAc,CAACD,CAAU,EACxC,UAAU,0HAEV,oBAAC,QAAM,SAAAA,EAAaE,EAAW,SAAWA,EAAW,UAAU,KAC/D,OAAC,OACC,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,OAAO,eACP,YAAY,IACZ,cAAc,QACd,eAAe,QACf,UAAW,wBAAwBF,EAAa,aAAe,EAAE,GAEjE,mBAAC,YAAS,OAAO,iBAAiB,EACpC,GACF,GAEJ,CAEJ,EA0CalC,EAA+B,CAC1C,OAAQ0C,GAAW,CACjB,MAAMC,EAAqBD,EACrB,CAAE,SAAAV,EAAU,MAAAf,EAAO,YAAAF,EAAa,WAAAkB,CAAW,EAAIU,EAAmB,KAGlEN,EAAgBL,GAAU,OAAOM,GAAKA,GAAKA,EAAE,SAAS,GAAK,CAAC,EAElE,OAAID,EAAc,SAAW,EACpB,QAIP,OAACN,EAAA,CAAqB,SAAUM,EAAe,MAAOpB,EAAO,YAAaF,EAAa,WAAYkB,EAAY,CAEnH,CACF",
|
|
6
6
|
"names": ["ProductList_exports", "__export", "ProductList", "__toCommonJS", "import_jsx_runtime", "import_react", "import_constants", "formatPrice", "price", "amount", "currency", "formatDiscountLabel", "discount", "offText", "value", "CompactProductCard", "product", "onAddToCart", "addToCartText", "title", "description", "imageUrl", "stockStatus", "averageRating", "variants", "isOutOfStock", "firstVariant", "hasDiscount", "discountPrice", "currentPrice", "discountLabel", "handleAddToCart", "e", "ProductListComponent", "products", "commonText", "isExpanded", "setIsExpanded", "mergedText", "validProducts", "p", "INITIAL_DISPLAY_COUNT", "hasMore", "displayedProducts", "content", "productListContent"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var C=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var a=(e,t)=>{for(var r in t)n(e,r,{get:t[r],enumerable:!0})},S=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of C(t))!D.call(e,o)&&o!==r&&n(e,o,{get:()=>t[o],enumerable:!(s=N(t,o))||s.enumerable});return e};var $=e=>S(n({},"__esModule",{value:!0}),e);var d={};a(d,{CURRENCY_SYMBOLS:()=>i,DEFAULT_COMMON_TEXT:()=>T,formatCurrency:()=>R});module.exports=$(d);const i={USD:"$",CAD:"CA$",GBP:"\xA3",EUR:"\u20AC",AUD:"$",SGD:"$",NZD:"NZ$",AED:"AED ",VND:"\u20AB",TWD:"NT$",PLN:"z\u0142",RON:"Lei"},m=new Set(["VND","RON","PLN"]);function R(e,t="USD"){const r=i[t]||t,s=typeof e=="string"?parseFloat(e):e,o=Number.isInteger(s)?String(s):s.toFixed(2);return m.has(t)?`${o} ${r}`:`${r}${o}`}const T={learnMore:"Learn More",showLess:"Show Less",addToCart:"Add to Cart",viewMore:"View More",off:"OFF",total:"Total"};
|
|
2
2
|
//# sourceMappingURL=constants.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/LiveChatWidget/constants.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * LiveChat \u7EC4\u4EF6\u5E38\u91CF\u5B9A\u4E49\n */\n\nimport type { CommonText } from './types'\n\n/**\n * \u8D27\u5E01\u7B26\u53F7\u6620\u5C04\u8868\n * \u7528\u4E8E\u5C06\u8D27\u5E01\u4EE3\u7801\u8F6C\u6362\u4E3A\u5BF9\u5E94\u7684\u7B26\u53F7\n */\nexport const CURRENCY_SYMBOLS: Record<string, string> = {\n USD: \"$\",\n CAD: \"CA$\",\n GBP: \"\u00A3\",\n EUR: \"\u20AC\",\n AUD: \"$\",\n SGD: \"$\",\n NZD: \"NZ$\",\n AED: \"AED \",\n VND: \"\u20AB\",\n TWD: \"NT$\",\n PLN: \"z\u0142\",\n RON: \"Lei\"\n}\n\n/**\n * \u9ED8\u8BA4\u6587\u6848\u914D\u7F6E\n */\nexport const DEFAULT_COMMON_TEXT: Required<CommonText> = {\n learnMore: 'Learn More',\n showLess: 'Show Less',\n addToCart: 'Add to Cart',\n viewMore: 'View More',\n off: 'OFF',\n total: 'Total',\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,EAAA,wBAAAC,IAAA,eAAAC,
|
|
6
|
-
"names": ["constants_exports", "__export", "CURRENCY_SYMBOLS", "DEFAULT_COMMON_TEXT", "__toCommonJS"]
|
|
4
|
+
"sourcesContent": ["/**\n * LiveChat \u7EC4\u4EF6\u5E38\u91CF\u5B9A\u4E49\n */\n\nimport type { CommonText } from './types'\n\n/**\n * \u8D27\u5E01\u7B26\u53F7\u6620\u5C04\u8868\n * \u7528\u4E8E\u5C06\u8D27\u5E01\u4EE3\u7801\u8F6C\u6362\u4E3A\u5BF9\u5E94\u7684\u7B26\u53F7\n */\nexport const CURRENCY_SYMBOLS: Record<string, string> = {\n USD: \"$\",\n CAD: \"CA$\",\n GBP: \"\u00A3\",\n EUR: \"\u20AC\",\n AUD: \"$\",\n SGD: \"$\",\n NZD: \"NZ$\",\n AED: \"AED \",\n VND: \"\u20AB\",\n TWD: \"NT$\",\n PLN: \"z\u0142\",\n RON: \"Lei\"\n}\n\nconst SUFFIX_CURRENCIES = new Set([\"VND\", \"RON\", \"PLN\"])\n\nexport function formatCurrency(amount: number | string, currency: string = 'USD'): string {\n const symbol = CURRENCY_SYMBOLS[currency] || currency\n const value = typeof amount === 'string' ? parseFloat(amount) : amount\n const formatted = Number.isInteger(value) ? String(value) : value.toFixed(2)\n return SUFFIX_CURRENCIES.has(currency) ? `${formatted} ${symbol}` : `${symbol}${formatted}`\n}\n\n/**\n * \u9ED8\u8BA4\u6587\u6848\u914D\u7F6E\n */\nexport const DEFAULT_COMMON_TEXT: Required<CommonText> = {\n learnMore: 'Learn More',\n showLess: 'Show Less',\n addToCart: 'Add to Cart',\n viewMore: 'View More',\n off: 'OFF',\n total: 'Total',\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,sBAAAE,EAAA,wBAAAC,EAAA,mBAAAC,IAAA,eAAAC,EAAAL,GAUO,MAAME,EAA2C,CACpD,IAAK,IACL,IAAK,MACL,IAAK,OACL,IAAK,SACL,IAAK,IACL,IAAK,IACL,IAAK,MACL,IAAK,OACL,IAAK,SACL,IAAK,MACL,IAAK,UACL,IAAK,KACT,EAEMI,EAAoB,IAAI,IAAI,CAAC,MAAO,MAAO,KAAK,CAAC,EAEhD,SAASF,EAAeG,EAAyBC,EAAmB,MAAe,CACxF,MAAMC,EAASP,EAAiBM,CAAQ,GAAKA,EACvCE,EAAQ,OAAOH,GAAW,SAAW,WAAWA,CAAM,EAAIA,EAC1DI,EAAY,OAAO,UAAUD,CAAK,EAAI,OAAOA,CAAK,EAAIA,EAAM,QAAQ,CAAC,EAC3E,OAAOJ,EAAkB,IAAIE,CAAQ,EAAI,GAAGG,CAAS,IAAIF,CAAM,GAAK,GAAGA,CAAM,GAAGE,CAAS,EAC3F,CAKO,MAAMR,EAA4C,CACvD,UAAW,aACX,SAAU,YACV,UAAW,cACX,SAAU,YACV,IAAK,MACL,MAAO,OACT",
|
|
6
|
+
"names": ["constants_exports", "__export", "CURRENCY_SYMBOLS", "DEFAULT_COMMON_TEXT", "formatCurrency", "__toCommonJS", "SUFFIX_CURRENCIES", "amount", "currency", "symbol", "value", "formatted"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as
|
|
1
|
+
import{jsx as t,jsxs as o}from"react/jsx-runtime";import{formatCurrency as f,DEFAULT_COMMON_TEXT as v}from"../../constants.js";function c(a){const{amount:n,currencyCode:l}=a;return f(n,l)}const b=({line:a})=>{const{quantity:n,merchandise:l,cost:e}=a,{product:r,title:d,image:s}=l,i=s?.url||"",m=parseFloat(e.totalAmount.amount)<parseFloat(e.subtotalAmount.amount)&&e.totalAmount.currencyCode===e.subtotalAmount.currencyCode;return o("div",{className:"flex gap-4",children:[t("div",{className:"shrink-0 overflow-hidden rounded-md",style:{width:"72px",height:"72px"},children:t("img",{src:i,alt:r.title,className:"size-full object-cover",loading:"lazy"})}),o("div",{className:"flex flex-1 flex-col",children:[t("h4",{className:"line-clamp-2 text-sm tablet:text-[16px] font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:r.title}),d&&t("p",{className:"mt-0.5 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]",children:d}),o("div",{className:"flex items-end justify-between gap-2 mt-1",children:[t("div",{className:"flex-1",children:o("p",{className:"text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]",children:["\xD7",n]})}),o("div",{className:"flex gap-1 text-right",children:[t("div",{className:"tablet:text-[16px] text-sm font-bold leading-[1.4] tracking-[-0.02em] text-gray-900",children:c(e.totalAmount)}),m&&t("div",{className:"tablet:text-[16px] text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56] line-through",children:c(e.subtotalAmount)})]})]})]})]})},C=({total:a,totalText:n})=>t("div",{className:"border-t border-gray-200 p-4",children:o("div",{className:"flex items-center justify-between",children:[t("span",{className:"text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900",children:n}),t("span",{className:"text-base tablet:text-[18px] font-bold leading-[1.4] tracking-[-0.02em] text-gray-900",children:c(a)})]})}),A={render:a=>{const n=a,{data:l}=n;if(!l)return null;const{isEmpty:e,lines:r,cost:d,checkoutUrl:s,onCart:i,cartId:m,commonText:p}=l,u={...v,...p},g=()=>{i?i(m,s):s&&window.open(s,"_blank","noopener,noreferrer")};return e||!r||r.length===0?null:o("div",{className:"w-full max-w-md overflow-hidden rounded-2xl shadow-sm",style:{backgroundColor:"#F5F6F7"},children:[t("div",{className:"flex flex-col gap-6 overflow-y-auto p-4",children:r.map(x=>t(b,{line:x},x.id))}),t(C,{total:d.totalAmount,totalText:u.total}),(s||i)&&t("div",{className:"px-4 pb-4",children:t("button",{type:"button",onClick:g,className:"livechat-btn-primary w-full rounded-full py-[10px] text-center text-sm font-bold leading-[1.4] tracking-[-0.02em] text-white",style:{backgroundColor:"#1D1D1F"},children:u.viewMore})})]})}};export{A as CartCard};
|
|
2
2
|
//# sourceMappingURL=CartCard.js.map
|