@anker-in/headless-ui 1.1.9-temp-120801 → 1.1.9-temp-120803
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/biz-components/ShelfDisplay/handleCoupon.js +1 -1
- package/dist/cjs/biz-components/ShelfDisplay/handleCoupon.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +2 -2
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
- package/dist/esm/biz-components/ShelfDisplay/handleCoupon.js +1 -1
- package/dist/esm/biz-components/ShelfDisplay/handleCoupon.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +2 -2
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var d=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var I=Object.prototype.hasOwnProperty;var b=(o,t)=>{for(var u in t)d(o,u,{get:t[u],enumerable:!0})},D=(o,t,u,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of G(t))!I.call(o,i)&&i!==u&&d(o,i,{get:()=>t[i],enumerable:!(r=P(t,i))||r.enumerable});return o};var M=o=>D(d({},"__esModule",{value:!0}),o);var y={};b(y,{getCouponFromVariant:()=>U});module.exports=M(y);var e=require("./couponUtils");function U({variant:o,channel:t,inApp:u,udcGroupIds:r,udcWhiteGroupIds:i,targetCode:p}){if(console.log("getCouponFromVariant",o,t,u,r,i,p),!e.CouponUtils.validateVariantCoupon(o))return;console.log("11111111");const C=o.metafields?.coupons||o?.coupons||[],m=o.metafields?.custom_coupons||o?.custom_coupons||[];console.log("22222222",C,m);const V=m?.filter(n=>r||i?e.CouponUtils.getValidCustomCoupon({customDataItem:n,udcGroupIds:r,udcWhiteGroupIds:i}):!0)?.map(n=>n?.discount?.title||""),c=C?.find(n=>{const s=e.CouponUtils.isCouponInValidPeriod(n),a=e.CouponUtils.isCouponMatchVariant(n,o);return V?.includes?.(n?.title||"")&&s&&a});if(console.log("33333333",u,V,c),u&&c)return c;const l=C.filter(n=>{const s=e.CouponUtils.isCouponInValidPeriod(n),a=e.CouponUtils.isCouponMatchVariant(n,o),g=e.CouponUtils.isUDCChannelCoupon(n?.title||"");return s&&a&&!g}),f=e.CouponUtils.getMatchChannelCoupons(l,t);if(f.length>0)return f[0];const h=p?l.filter(n=>n?.title?.toLocaleUpperCase()===p?.toLocaleUpperCase()):void 0;return(h||l.filter(n=>{const s=e.CouponUtils.isHideChannelCoupon(n?.title||""),a=e.CouponUtils.isAppChannelCoupon(n?.title||"");return u?!s:!s&&!a}))?.[0]}
|
|
2
2
|
//# sourceMappingURL=handleCoupon.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/handleCoupon.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/extensions */\nimport { CouponUtils } from './couponUtils'\n\nimport type { ProductVariant, VariantCoupon } from './couponType'\n\ninterface GetCouponFromVariantProps {\n /** \u53D8\u4F53 */\n variant: ProductVariant | undefined\n /** \u9690\u85CF\u6E20\u9053 */\n channel?: string\n /** \u662F\u5426\u5728app\u4E2D */\n inApp?: boolean\n /** UDC\u4EBA\u7FA4\u5206\u7EC4 */\n udcGroupIds?: number[]\n /** UDC\u767D\u540D\u5355\u4EBA\u7FA4\u5206\u7EC4 */\n udcWhiteGroupIds?: number[]\n /** \u76EE\u6807\u4EE3\u7801 */\n targetCode?: string\n}\n\nexport interface GetValidCustomCouponProps {\n /** custom_data item */\n customDataItem: {\n udcGroups: number[]\n whiteGroups: number[]\n discount: VariantCoupon\n }\n /** \u4EBA\u7FA4\u5206\u7EC4\uFF0C\u6765\u81EA get_user_in_group \u63A5\u53E3 */\n udcGroupIds?: number[]\n udcWhiteGroupIds?: number[]\n}\n\nexport function getCouponFromVariant({\n variant,\n channel,\n inApp,\n udcGroupIds,\n udcWhiteGroupIds,\n targetCode,\n}: GetCouponFromVariantProps): VariantCoupon | undefined {\n // \u9A8C\u8BC1\u8F93\u5165\u53C2\u6570\n if (!CouponUtils.validateVariantCoupon(variant)) {\n return undefined\n }\n const coupons: any = variant!.metafields?.coupons || variant?.coupons || []\n const customCoupons: any = variant!.metafields?.custom_coupons || variant?.custom_coupons || []\n\n // udc_groups \u4EBA\u7FA4\u5206\u7EC4\u4F18\u60E0\u5238\uFF0C\u627E\u51FA\u6240\u6709\u5339\u914D\u7684\u6298\u6263\u7801\n const udcGroupCouponTitleList: string[] | undefined = customCoupons\n ?.filter((item: GetValidCustomCouponProps['customDataItem']) => {\n if (udcGroupIds || udcWhiteGroupIds) {\n return CouponUtils.getValidCustomCoupon({\n customDataItem: item,\n udcGroupIds,\n udcWhiteGroupIds,\n })\n }\n return true\n })\n ?.map((item: GetValidCustomCouponProps['customDataItem']) => item?.discount?.title || '')\n\n // custom_data \u4E2D\u7684 title \u53EA\u662F\u8868\u660E\u4ED6\u547D\u4E2D\u4E86\u8FD9\u4E2A udc \u6298\u6263\uFF0C\u6700\u7EC8\u4EE5 coupons \u7684\u6570\u636E\u4E3A\u51C6\n // \u547D\u4E2D\u7684\u6240\u6709\u6298\u6263\u7801\u9010\u4E00\u9A8C\u8BC1\uFF0C\u627E\u5230\u6700\u5148\u5339\u914D\u7684\u6298\u6263\u7801\uFF0C\u56E0\u4E3A coupons \u4E2D\u6298\u6263\u5927\u7684\u9760\u524D\n const udcGroupCoupon = coupons?.find((item: VariantCoupon) => {\n const isInValidPeriod = CouponUtils.isCouponInValidPeriod(item)\n const isMatchVariant = CouponUtils.isCouponMatchVariant(item, variant)\n return udcGroupCouponTitleList?.includes?.(item?.title || '') && isInValidPeriod && isMatchVariant\n })\n\n // \u627E\u5230 UDC \u6298\u6263\u5C31\u76F4\u63A5\u7528\n // TODO UDC \u6298\u6263\u76EE\u524D\u7EA6\u5B9A\u4EC5\u5728 app \u4F7F\u7528\n if (inApp && udcGroupCoupon) {\n return udcGroupCoupon\n }\n\n // \u8FC7\u6EE4\u51FA\u6240\u6709\u6709\u6548\u7684\u4F18\u60E0\u5238\n const activeCoupons = coupons.filter((coupon: VariantCoupon) => {\n const isInValidPeriod = CouponUtils.isCouponInValidPeriod(coupon)\n const isMatchVariant = CouponUtils.isCouponMatchVariant(coupon, variant)\n const isUDCChannel = CouponUtils.isUDCChannelCoupon(coupon?.title || '')\n return isInValidPeriod && isMatchVariant && !isUDCChannel\n })\n\n // \u8FC7\u6EE4\u51FA\u9690\u85CF\u6E20\u9053\u7684\u4F18\u60E0\u5238\n const matchChannelCoupons = CouponUtils.getMatchChannelCoupons(activeCoupons, channel)\n\n // \u5982\u679C\u6709\u5339\u914D\u7684\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\u5219\u4F18\u5148\u4F7F\u7528\n if (matchChannelCoupons.length > 0) {\n return matchChannelCoupons[0]\n }\n\n // \u5982\u679C\u6709\u76EE\u6807\u4EE3\u7801\u5219\u8FC7\u6EE4\u51FA\u76EE\u6807\u4EE3\u7801\u7684\u4F18\u60E0\u5238\n const targetCoupons = targetCode\n ? activeCoupons.filter(\n (coupon: VariantCoupon) => coupon?.title?.toLocaleUpperCase() === targetCode?.toLocaleUpperCase()\n )\n : undefined\n\n const finalCoupons = targetCoupons\n ? targetCoupons\n : activeCoupons.filter((coupon: VariantCoupon) => {\n const isHideChannelCoupon = CouponUtils.isHideChannelCoupon(coupon?.title || '')\n const isAppChannelCoupon = CouponUtils.isAppChannelCoupon(coupon?.title || '')\n\n // app \u4E0B\u53EA\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\n if (inApp) {\n return !isHideChannelCoupon\n }\n\n // \u5B98\u7F51\u4E0B\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u548C\u975E app \u6E20\u9053\u4F18\u60E0\u5238\n return !isHideChannelCoupon && !isAppChannelCoupon\n })\n return finalCoupons?.[0]\n}\n"],
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,0BAAAE,IAAA,eAAAC,EAAAH,GACA,IAAAI,EAA4B,yBA+BrB,SAASF,EAAqB,CACnC,QAAAG,EACA,QAAAC,EACA,MAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,WAAAC,CACF,EAAyD,
|
|
6
|
-
"names": ["handleCoupon_exports", "__export", "getCouponFromVariant", "__toCommonJS", "import_couponUtils", "variant", "channel", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "coupons", "udcGroupCouponTitleList", "item", "udcGroupCoupon", "isInValidPeriod", "isMatchVariant", "activeCoupons", "coupon", "isUDCChannel", "matchChannelCoupons", "targetCoupons", "isHideChannelCoupon", "isAppChannelCoupon"]
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/extensions */\nimport { CouponUtils } from './couponUtils'\n\nimport type { ProductVariant, VariantCoupon } from './couponType'\n\ninterface GetCouponFromVariantProps {\n /** \u53D8\u4F53 */\n variant: ProductVariant | undefined\n /** \u9690\u85CF\u6E20\u9053 */\n channel?: string\n /** \u662F\u5426\u5728app\u4E2D */\n inApp?: boolean\n /** UDC\u4EBA\u7FA4\u5206\u7EC4 */\n udcGroupIds?: number[]\n /** UDC\u767D\u540D\u5355\u4EBA\u7FA4\u5206\u7EC4 */\n udcWhiteGroupIds?: number[]\n /** \u76EE\u6807\u4EE3\u7801 */\n targetCode?: string\n}\n\nexport interface GetValidCustomCouponProps {\n /** custom_data item */\n customDataItem: {\n udcGroups: number[]\n whiteGroups: number[]\n discount: VariantCoupon\n }\n /** \u4EBA\u7FA4\u5206\u7EC4\uFF0C\u6765\u81EA get_user_in_group \u63A5\u53E3 */\n udcGroupIds?: number[]\n udcWhiteGroupIds?: number[]\n}\n\nexport function getCouponFromVariant({\n variant,\n channel,\n inApp,\n udcGroupIds,\n udcWhiteGroupIds,\n targetCode,\n}: GetCouponFromVariantProps): VariantCoupon | undefined {\n console.log('getCouponFromVariant', variant, channel, inApp, udcGroupIds, udcWhiteGroupIds, targetCode)\n // \u9A8C\u8BC1\u8F93\u5165\u53C2\u6570\n if (!CouponUtils.validateVariantCoupon(variant)) {\n return undefined\n }\n console.log('11111111')\n const coupons: any = variant!.metafields?.coupons || variant?.coupons || []\n const customCoupons: any = variant!.metafields?.custom_coupons || variant?.custom_coupons || []\n console.log('22222222', coupons, customCoupons)\n\n // udc_groups \u4EBA\u7FA4\u5206\u7EC4\u4F18\u60E0\u5238\uFF0C\u627E\u51FA\u6240\u6709\u5339\u914D\u7684\u6298\u6263\u7801\n const udcGroupCouponTitleList: string[] | undefined = customCoupons\n ?.filter((item: GetValidCustomCouponProps['customDataItem']) => {\n if (udcGroupIds || udcWhiteGroupIds) {\n return CouponUtils.getValidCustomCoupon({\n customDataItem: item,\n udcGroupIds,\n udcWhiteGroupIds,\n })\n }\n return true\n })\n ?.map((item: GetValidCustomCouponProps['customDataItem']) => item?.discount?.title || '')\n\n // custom_data \u4E2D\u7684 title \u53EA\u662F\u8868\u660E\u4ED6\u547D\u4E2D\u4E86\u8FD9\u4E2A udc \u6298\u6263\uFF0C\u6700\u7EC8\u4EE5 coupons \u7684\u6570\u636E\u4E3A\u51C6\n // \u547D\u4E2D\u7684\u6240\u6709\u6298\u6263\u7801\u9010\u4E00\u9A8C\u8BC1\uFF0C\u627E\u5230\u6700\u5148\u5339\u914D\u7684\u6298\u6263\u7801\uFF0C\u56E0\u4E3A coupons \u4E2D\u6298\u6263\u5927\u7684\u9760\u524D\n const udcGroupCoupon = coupons?.find((item: VariantCoupon) => {\n const isInValidPeriod = CouponUtils.isCouponInValidPeriod(item)\n const isMatchVariant = CouponUtils.isCouponMatchVariant(item, variant)\n return udcGroupCouponTitleList?.includes?.(item?.title || '') && isInValidPeriod && isMatchVariant\n })\n console.log('33333333', inApp, udcGroupCouponTitleList, udcGroupCoupon)\n\n // \u627E\u5230 UDC \u6298\u6263\u5C31\u76F4\u63A5\u7528\n // TODO UDC \u6298\u6263\u76EE\u524D\u7EA6\u5B9A\u4EC5\u5728 app \u4F7F\u7528\n if (inApp && udcGroupCoupon) {\n return udcGroupCoupon\n }\n\n // \u8FC7\u6EE4\u51FA\u6240\u6709\u6709\u6548\u7684\u4F18\u60E0\u5238\n const activeCoupons = coupons.filter((coupon: VariantCoupon) => {\n const isInValidPeriod = CouponUtils.isCouponInValidPeriod(coupon)\n const isMatchVariant = CouponUtils.isCouponMatchVariant(coupon, variant)\n const isUDCChannel = CouponUtils.isUDCChannelCoupon(coupon?.title || '')\n return isInValidPeriod && isMatchVariant && !isUDCChannel\n })\n\n // \u8FC7\u6EE4\u51FA\u9690\u85CF\u6E20\u9053\u7684\u4F18\u60E0\u5238\n const matchChannelCoupons = CouponUtils.getMatchChannelCoupons(activeCoupons, channel)\n\n // \u5982\u679C\u6709\u5339\u914D\u7684\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\u5219\u4F18\u5148\u4F7F\u7528\n if (matchChannelCoupons.length > 0) {\n return matchChannelCoupons[0]\n }\n\n // \u5982\u679C\u6709\u76EE\u6807\u4EE3\u7801\u5219\u8FC7\u6EE4\u51FA\u76EE\u6807\u4EE3\u7801\u7684\u4F18\u60E0\u5238\n const targetCoupons = targetCode\n ? activeCoupons.filter(\n (coupon: VariantCoupon) => coupon?.title?.toLocaleUpperCase() === targetCode?.toLocaleUpperCase()\n )\n : undefined\n\n const finalCoupons = targetCoupons\n ? targetCoupons\n : activeCoupons.filter((coupon: VariantCoupon) => {\n const isHideChannelCoupon = CouponUtils.isHideChannelCoupon(coupon?.title || '')\n const isAppChannelCoupon = CouponUtils.isAppChannelCoupon(coupon?.title || '')\n\n // app \u4E0B\u53EA\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\n if (inApp) {\n return !isHideChannelCoupon\n }\n\n // \u5B98\u7F51\u4E0B\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u548C\u975E app \u6E20\u9053\u4F18\u60E0\u5238\n return !isHideChannelCoupon && !isAppChannelCoupon\n })\n return finalCoupons?.[0]\n}\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,0BAAAE,IAAA,eAAAC,EAAAH,GACA,IAAAI,EAA4B,yBA+BrB,SAASF,EAAqB,CACnC,QAAAG,EACA,QAAAC,EACA,MAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,WAAAC,CACF,EAAyD,CAGvD,GAFA,QAAQ,IAAI,uBAAwBL,EAASC,EAASC,EAAOC,EAAaC,EAAkBC,CAAU,EAElG,CAAC,cAAY,sBAAsBL,CAAO,EAC5C,OAEF,QAAQ,IAAI,UAAU,EACtB,MAAMM,EAAeN,EAAS,YAAY,SAAWA,GAAS,SAAW,CAAC,EACpEO,EAAqBP,EAAS,YAAY,gBAAkBA,GAAS,gBAAkB,CAAC,EAC9F,QAAQ,IAAI,WAAYM,EAASC,CAAa,EAG9C,MAAMC,EAAgDD,GAClD,OAAQE,GACJN,GAAeC,EACV,cAAY,qBAAqB,CACtC,eAAgBK,EAChB,YAAAN,EACA,iBAAAC,CACF,CAAC,EAEI,EACR,GACC,IAAKK,GAAsDA,GAAM,UAAU,OAAS,EAAE,EAIpFC,EAAiBJ,GAAS,KAAMG,GAAwB,CAC5D,MAAME,EAAkB,cAAY,sBAAsBF,CAAI,EACxDG,EAAiB,cAAY,qBAAqBH,EAAMT,CAAO,EACrE,OAAOQ,GAAyB,WAAWC,GAAM,OAAS,EAAE,GAAKE,GAAmBC,CACtF,CAAC,EAKD,GAJA,QAAQ,IAAI,WAAYV,EAAOM,EAAyBE,CAAc,EAIlER,GAASQ,EACX,OAAOA,EAIT,MAAMG,EAAgBP,EAAQ,OAAQQ,GAA0B,CAC9D,MAAMH,EAAkB,cAAY,sBAAsBG,CAAM,EAC1DF,EAAiB,cAAY,qBAAqBE,EAAQd,CAAO,EACjEe,EAAe,cAAY,mBAAmBD,GAAQ,OAAS,EAAE,EACvE,OAAOH,GAAmBC,GAAkB,CAACG,CAC/C,CAAC,EAGKC,EAAsB,cAAY,uBAAuBH,EAAeZ,CAAO,EAGrF,GAAIe,EAAoB,OAAS,EAC/B,OAAOA,EAAoB,CAAC,EAI9B,MAAMC,EAAgBZ,EAClBQ,EAAc,OACXC,GAA0BA,GAAQ,OAAO,kBAAkB,IAAMT,GAAY,kBAAkB,CAClG,EACA,OAgBJ,OAdqBY,GAEjBJ,EAAc,OAAQC,GAA0B,CAC9C,MAAMI,EAAsB,cAAY,oBAAoBJ,GAAQ,OAAS,EAAE,EACzEK,EAAqB,cAAY,mBAAmBL,GAAQ,OAAS,EAAE,EAG7E,OAAIZ,EACK,CAACgB,EAIH,CAACA,GAAuB,CAACC,CAClC,CAAC,KACiB,CAAC,CACzB",
|
|
6
|
+
"names": ["handleCoupon_exports", "__export", "getCouponFromVariant", "__toCommonJS", "import_couponUtils", "variant", "channel", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "coupons", "customCoupons", "udcGroupCouponTitleList", "item", "udcGroupCoupon", "isInValidPeriod", "isMatchVariant", "activeCoupons", "coupon", "isUDCChannel", "matchChannelCoupons", "targetCoupons", "isHideChannelCoupon", "isAppChannelCoupon"]
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";var ce=Object.create;var E=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var a in t)E(e,a,{get:t[a],enumerable:!0})},pe=(e,t,a,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let m of de(t))!xe.call(e,m)&&m!==a&&E(e,m,{get:()=>t[m],enumerable:!(d=me(t,m))||d.enumerable});return e};var Y=(e,t,a)=>(a=e!=null?ce(ue(e)):{},pe(t||!e||!e.__esModule?E(a,"default",{value:e,enumerable:!0}):a,e)),he=e=>pe(E({},"__esModule",{value:!0}),e);var be={};fe(be,{ShelfDisplayHorizontalItem:()=>ge,ShelfDisplayWrapItem:()=>ve,getProductImage:()=>ne});module.exports=he(be);var s=require("react/jsx-runtime"),Z=require("../AiuiProvider/index.js"),ee=require("./shelfDisplay.js"),R=Y(require("../../components/picture.js")),V=Y(require("../../components/badge.js")),f=require("../../helpers/utils.js"),te=require("../../components/text.js"),j=Y(require("../../components/button.js")),se=require("../../shared/track.js"),le=require("../../shared/trackUrlRef.js"),oe=require("../../components/heading.js"),ae=require("./handleCoupon.js"),ie=require("../../hooks/useExposure.js"),o=require("react");const F="image",G="product_shelf",M=999999999e-2,ne=e=>{const t=e?.sku,a=e?.variants,d=a?.find(k=>k?.sku===t),m=d?.image?.url||a?.[0]?.image?.url||"",w=d?.image?.altText||a?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:m,altText:w}},ve=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:d,metafields:m,isTopTag:w=!1,isShowTag:k,isShowOriginalPrice:g}=t||{},{locale:b="us",copyWriting:O,inApp:T,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}=(0,Z.useAiuiContext)()
|
|
1
|
+
"use strict";var ce=Object.create;var E=Object.defineProperty;var me=Object.getOwnPropertyDescriptor;var de=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,xe=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var a in t)E(e,a,{get:t[a],enumerable:!0})},pe=(e,t,a,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let m of de(t))!xe.call(e,m)&&m!==a&&E(e,m,{get:()=>t[m],enumerable:!(d=me(t,m))||d.enumerable});return e};var Y=(e,t,a)=>(a=e!=null?ce(ue(e)):{},pe(t||!e||!e.__esModule?E(a,"default",{value:e,enumerable:!0}):a,e)),he=e=>pe(E({},"__esModule",{value:!0}),e);var be={};fe(be,{ShelfDisplayHorizontalItem:()=>ge,ShelfDisplayWrapItem:()=>ve,getProductImage:()=>ne});module.exports=he(be);var s=require("react/jsx-runtime"),Z=require("../AiuiProvider/index.js"),ee=require("./shelfDisplay.js"),R=Y(require("../../components/picture.js")),V=Y(require("../../components/badge.js")),f=require("../../helpers/utils.js"),te=require("../../components/text.js"),j=Y(require("../../components/button.js")),se=require("../../shared/track.js"),le=require("../../shared/trackUrlRef.js"),oe=require("../../components/heading.js"),ae=require("./handleCoupon.js"),ie=require("../../hooks/useExposure.js"),o=require("react");const F="image",G="product_shelf",M=999999999e-2,ne=e=>{const t=e?.sku,a=e?.variants,d=a?.find(k=>k?.sku===t),m=d?.image?.url||a?.[0]?.image?.url||"",w=d?.image?.altText||a?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:m,altText:w}},ve=({data:e,configuration:t})=>{const{isDisplayBackImage:a=!1,itemShape:d,metafields:m,isTopTag:w=!1,isShowTag:k,isShowOriginalPrice:g}=t||{},{locale:b="us",copyWriting:O,inApp:T,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}=(0,Z.useAiuiContext)(),{discounts:U,discountsCopy:C}=m||{},z=(0,o.useRef)(null),[H,n]=(0,o.useState)([]),[L,q]=(0,o.useState)(""),J=(c,x,u)=>t?.event?.primaryButton?.(c,x+1,u),I=(c,x,u)=>t?.event?.secondaryButton?.(c,x+1,u),l=(0,o.useMemo)(()=>{const c=e?.variants||[];if(c.length)return e?.sku?c?.find?.(x=>x?.sku===e?.sku)||c[0]:c?.[0]},[e?.sku,e?.variants]),D=l?.id?.split?.("/")||[],K=D?.[D?.length-1],Q=!l?.availableForSale&&(l?.price?.amount===M||l?.price===M),P=(0,o.useMemo)(()=>(0,ae.getCouponFromVariant)({variant:l,inApp:T,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}),[l,T,_,S,N,B]),h=!!(g&&P),W=e?.price?.currencyCode||"USD",X=(0,o.useMemo)(()=>(0,ee.formatVariantPrice)({locale:b,amount:h?P?.variant_price4wscode:l?.price,baseAmount:h?l?.price:0,currencyCode:W}),[W,b,h,P?.variant_price4wscode,l]),{price:y,basePrice:$,discount:v}=X,{imageUrl:A,altText:i}=ne(e),r=e?.custom_name||e?.title,p=e?.custom_description||e?.description;(0,o.useEffect)(()=>{let c=[];if(v){const u=`${v}${U?.off||C?.off||""}`;q(u),c.push(u)}const x=e?.tags?.filter?.(u=>u?.startsWith?.("CLtag"))?.map?.(u=>u?.replace?.("CLtag:",""))?.slice?.(0,v?1:2);n(c.concat(x))},[e?.tags,v,U?.off,C?.off]),(0,ie.useExposure)(z,{componentType:F,componentName:G,componentTitle:r,componentDescription:p,position:t?.index+1});const re=()=>(0,s.jsxs)(s.Fragment,{children:[k&&H?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((c,x)=>(0,s.jsx)(V.default,{className:"shelf-items-tag",children:c},x))}):null,r?(0,s.jsx)(oe.Heading,{as:"h3",title:r||"",size:2,className:"shelf-display-product-title line-clamp-2",html:r||""}):null,p?(0,s.jsx)(te.Text,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:p||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:Q?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:O?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:l?.availableForSale&&y||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:l?.availableForSale&&$||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(j.default,{variant:"secondary",onClick:()=>I(e,t?.index,t),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
3
|
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(j.default,{variant:"primary",onClick:()=>J(e,t?.index,t),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:z,className:(0,f.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",d==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:a?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(R.default,{source:
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]});return(0,s.jsx)("div",{ref:z,className:(0,f.cn)("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",d==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:a?(0,s.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden",children:(0,s.jsxs)("div",{className:"relative inset-0 size-full",children:[(0,s.jsx)(R.default,{source:A,alt:i,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),(0,s.jsx)("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:re()})]})}):(0,s.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[L&&w&&(0,s.jsx)(V.default,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:L||""}),(0,s.jsx)("div",{className:(0,f.cn)("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":r,target:t?.target,href:(0,le.trackUrlRef)(`${b==="us"||!b?"":`/${b}`}/products/${e?.handle}?variant=${K}`,`${F}_${G}`),onClick:()=>{(0,se.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},children:(0,s.jsx)(R.default,{source:A,alt:i,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),re()]})},e?.id||e?.handle)},ge=({data:e,configuration:t})=>{const{itemShape:a,itemLength:d,metafields:m}=t||{},{discounts:w,discountsCopy:k}=m||{},{locale:g="us",copyWriting:b,inApp:O,udcGroupIds:T,udcWhiteGroupIds:_,targetCode:S,channel:N}=(0,Z.useAiuiContext)(),[B,U]=(0,o.useState)([]),C=(0,o.useRef)(null),z=(i,r,p)=>t?.event?.primaryButton?.(i,r+1,p),H=(i,r,p)=>t?.event?.secondaryButton?.(i,r+1,p),n=(0,o.useMemo)(()=>{const i=e?.variants||[];if(i.length)return e?.sku&&i.find(r=>r?.sku===e?.sku)||i[0]},[e?.sku,e?.variants]),L=!n?.availableForSale&&(n?.price?.amount===M||n?.price===M),q=t?.isShowTag,J=t?.isShowOriginalPrice,I=(0,o.useMemo)(()=>(0,ae.getCouponFromVariant)({variant:n,inApp:O,udcGroupIds:T,udcWhiteGroupIds:_,targetCode:S,channel:N}),[n,O,T,_,S,N]),l=!!(J&&I),D=e?.price?.currencyCode||"USD",K=(0,o.useMemo)(()=>(0,ee.formatVariantPrice)({locale:g,amount:l?I?.variant_price4wscode:n?.price,baseAmount:l?n?.price:0,currencyCode:D}),[D,g,l,I?.variant_price4wscode,n]),{price:Q,basePrice:P,discount:h}=K,{imageUrl:W,altText:X}=ne(e),y=e?.custom_name||e?.title,$=e?.custom_description||e?.description;(0,ie.useExposure)(C,{componentType:F,componentName:G,componentTitle:y,componentDescription:$,position:t?.index+1});const v=()=>d>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},A=()=>d>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return(0,o.useEffect)(()=>{let i=[];if(h){const p=`${h}${w?.off||k?.off||""}`;i.push(p)}const r=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,h?1:2);U(i.concat(r))},[e?.tags,h,w?.off,k?.off]),(0,s.jsx)("div",{ref:C,className:(0,f.cn)(v().wrap,a==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:(0,s.jsxs)("div",{className:(0,f.cn)(A(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[(0,s.jsx)("div",{className:(0,f.cn)(v().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:(0,s.jsx)("a",{"aria-label":y,target:t?.target,href:(0,le.trackUrlRef)(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}`,`${F}_${G}`),onClick:()=>{(0,se.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:(0,s.jsx)(R.default,{source:W,alt:X,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),(0,s.jsxs)("div",{className:(0,f.cn)("flex flex-col items-start justify-center",v().boxItem),children:[q&&B?.length>0?(0,s.jsx)("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:B?.map?.((i,r)=>(0,s.jsx)(V.default,{className:"shelf-items-tag",children:i},r))}):null,y?(0,s.jsx)(oe.Heading,{as:"h3",title:y||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:y||""}):null,$?(0,s.jsx)(te.Text,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:$||""}):null,(0,s.jsx)("div",{className:"mb-2 mt-5 flex items-center",children:L?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:b?.soldOutText}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&Q||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&P||""})]})}),(0,s.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(j.default,{variant:"secondary",onClick:()=>H(e,t?.index,t),className:`
|
|
6
6
|
${t.direction==="vertical"?"w-full":""}
|
|
7
7
|
`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(j.default,{variant:"primary",onClick:()=>z(e,t?.index,t),className:`
|
|
8
8
|
${t.direction==="vertical"?"w-full":""}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n console.log('inApp', inApp)\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "ykBAAA,IAAAA,GAAA,GAAAC,GAAAD,GAAA,gCAAAE,GAAA,yBAAAC,GAAA,oBAAAC,KAAA,eAAAC,GAAAL,
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["shelfDisplayItem_exports", "__export", "ShelfDisplayHorizontalItem", "ShelfDisplayWrapItem", "getProductImage", "__toCommonJS", "import_jsx_runtime", "import_AiuiProvider", "import_shelfDisplay", "import_picture", "import_badge", "import_utils", "import_text", "import_button", "import_track", "import_trackUrlRef", "import_heading", "import_handleCoupon", "import_useExposure", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "coupon", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "Badge", "Button", "Picture", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{CouponUtils as n}from"./couponUtils";function
|
|
1
|
+
import{CouponUtils as n}from"./couponUtils";function G({variant:t,channel:l,inApp:i,udcGroupIds:r,udcWhiteGroupIds:s,targetCode:a}){if(console.log("getCouponFromVariant",t,l,i,r,s,a),!n.validateVariantCoupon(t))return;console.log("11111111");const p=t.metafields?.coupons||t?.coupons||[],d=t.metafields?.custom_coupons||t?.custom_coupons||[];console.log("22222222",p,d);const m=d?.filter(o=>r||s?n.getValidCustomCoupon({customDataItem:o,udcGroupIds:r,udcWhiteGroupIds:s}):!0)?.map(o=>o?.discount?.title||""),C=p?.find(o=>{const e=n.isCouponInValidPeriod(o),u=n.isCouponMatchVariant(o,t);return m?.includes?.(o?.title||"")&&e&&u});if(console.log("33333333",i,m,C),i&&C)return C;const c=p.filter(o=>{const e=n.isCouponInValidPeriod(o),u=n.isCouponMatchVariant(o,t),h=n.isUDCChannelCoupon(o?.title||"");return e&&u&&!h}),V=n.getMatchChannelCoupons(c,l);if(V.length>0)return V[0];const f=a?c.filter(o=>o?.title?.toLocaleUpperCase()===a?.toLocaleUpperCase()):void 0;return(f||c.filter(o=>{const e=n.isHideChannelCoupon(o?.title||""),u=n.isAppChannelCoupon(o?.title||"");return i?!e:!e&&!u}))?.[0]}export{G as getCouponFromVariant};
|
|
2
2
|
//# sourceMappingURL=handleCoupon.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/handleCoupon.ts"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/extensions */\nimport { CouponUtils } from './couponUtils'\n\nimport type { ProductVariant, VariantCoupon } from './couponType'\n\ninterface GetCouponFromVariantProps {\n /** \u53D8\u4F53 */\n variant: ProductVariant | undefined\n /** \u9690\u85CF\u6E20\u9053 */\n channel?: string\n /** \u662F\u5426\u5728app\u4E2D */\n inApp?: boolean\n /** UDC\u4EBA\u7FA4\u5206\u7EC4 */\n udcGroupIds?: number[]\n /** UDC\u767D\u540D\u5355\u4EBA\u7FA4\u5206\u7EC4 */\n udcWhiteGroupIds?: number[]\n /** \u76EE\u6807\u4EE3\u7801 */\n targetCode?: string\n}\n\nexport interface GetValidCustomCouponProps {\n /** custom_data item */\n customDataItem: {\n udcGroups: number[]\n whiteGroups: number[]\n discount: VariantCoupon\n }\n /** \u4EBA\u7FA4\u5206\u7EC4\uFF0C\u6765\u81EA get_user_in_group \u63A5\u53E3 */\n udcGroupIds?: number[]\n udcWhiteGroupIds?: number[]\n}\n\nexport function getCouponFromVariant({\n variant,\n channel,\n inApp,\n udcGroupIds,\n udcWhiteGroupIds,\n targetCode,\n}: GetCouponFromVariantProps): VariantCoupon | undefined {\n // \u9A8C\u8BC1\u8F93\u5165\u53C2\u6570\n if (!CouponUtils.validateVariantCoupon(variant)) {\n return undefined\n }\n const coupons: any = variant!.metafields?.coupons || variant?.coupons || []\n const customCoupons: any = variant!.metafields?.custom_coupons || variant?.custom_coupons || []\n\n // udc_groups \u4EBA\u7FA4\u5206\u7EC4\u4F18\u60E0\u5238\uFF0C\u627E\u51FA\u6240\u6709\u5339\u914D\u7684\u6298\u6263\u7801\n const udcGroupCouponTitleList: string[] | undefined = customCoupons\n ?.filter((item: GetValidCustomCouponProps['customDataItem']) => {\n if (udcGroupIds || udcWhiteGroupIds) {\n return CouponUtils.getValidCustomCoupon({\n customDataItem: item,\n udcGroupIds,\n udcWhiteGroupIds,\n })\n }\n return true\n })\n ?.map((item: GetValidCustomCouponProps['customDataItem']) => item?.discount?.title || '')\n\n // custom_data \u4E2D\u7684 title \u53EA\u662F\u8868\u660E\u4ED6\u547D\u4E2D\u4E86\u8FD9\u4E2A udc \u6298\u6263\uFF0C\u6700\u7EC8\u4EE5 coupons \u7684\u6570\u636E\u4E3A\u51C6\n // \u547D\u4E2D\u7684\u6240\u6709\u6298\u6263\u7801\u9010\u4E00\u9A8C\u8BC1\uFF0C\u627E\u5230\u6700\u5148\u5339\u914D\u7684\u6298\u6263\u7801\uFF0C\u56E0\u4E3A coupons \u4E2D\u6298\u6263\u5927\u7684\u9760\u524D\n const udcGroupCoupon = coupons?.find((item: VariantCoupon) => {\n const isInValidPeriod = CouponUtils.isCouponInValidPeriod(item)\n const isMatchVariant = CouponUtils.isCouponMatchVariant(item, variant)\n return udcGroupCouponTitleList?.includes?.(item?.title || '') && isInValidPeriod && isMatchVariant\n })\n\n // \u627E\u5230 UDC \u6298\u6263\u5C31\u76F4\u63A5\u7528\n // TODO UDC \u6298\u6263\u76EE\u524D\u7EA6\u5B9A\u4EC5\u5728 app \u4F7F\u7528\n if (inApp && udcGroupCoupon) {\n return udcGroupCoupon\n }\n\n // \u8FC7\u6EE4\u51FA\u6240\u6709\u6709\u6548\u7684\u4F18\u60E0\u5238\n const activeCoupons = coupons.filter((coupon: VariantCoupon) => {\n const isInValidPeriod = CouponUtils.isCouponInValidPeriod(coupon)\n const isMatchVariant = CouponUtils.isCouponMatchVariant(coupon, variant)\n const isUDCChannel = CouponUtils.isUDCChannelCoupon(coupon?.title || '')\n return isInValidPeriod && isMatchVariant && !isUDCChannel\n })\n\n // \u8FC7\u6EE4\u51FA\u9690\u85CF\u6E20\u9053\u7684\u4F18\u60E0\u5238\n const matchChannelCoupons = CouponUtils.getMatchChannelCoupons(activeCoupons, channel)\n\n // \u5982\u679C\u6709\u5339\u914D\u7684\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\u5219\u4F18\u5148\u4F7F\u7528\n if (matchChannelCoupons.length > 0) {\n return matchChannelCoupons[0]\n }\n\n // \u5982\u679C\u6709\u76EE\u6807\u4EE3\u7801\u5219\u8FC7\u6EE4\u51FA\u76EE\u6807\u4EE3\u7801\u7684\u4F18\u60E0\u5238\n const targetCoupons = targetCode\n ? activeCoupons.filter(\n (coupon: VariantCoupon) => coupon?.title?.toLocaleUpperCase() === targetCode?.toLocaleUpperCase()\n )\n : undefined\n\n const finalCoupons = targetCoupons\n ? targetCoupons\n : activeCoupons.filter((coupon: VariantCoupon) => {\n const isHideChannelCoupon = CouponUtils.isHideChannelCoupon(coupon?.title || '')\n const isAppChannelCoupon = CouponUtils.isAppChannelCoupon(coupon?.title || '')\n\n // app \u4E0B\u53EA\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\n if (inApp) {\n return !isHideChannelCoupon\n }\n\n // \u5B98\u7F51\u4E0B\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u548C\u975E app \u6E20\u9053\u4F18\u60E0\u5238\n return !isHideChannelCoupon && !isAppChannelCoupon\n })\n return finalCoupons?.[0]\n}\n"],
|
|
5
|
-
"mappings": "AACA,OAAS,eAAAA,MAAmB,gBA+BrB,SAASC,EAAqB,CACnC,QAAAC,EACA,QAAAC,EACA,MAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,WAAAC,CACF,EAAyD,
|
|
6
|
-
"names": ["CouponUtils", "getCouponFromVariant", "variant", "channel", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "coupons", "udcGroupCouponTitleList", "item", "udcGroupCoupon", "isInValidPeriod", "isMatchVariant", "activeCoupons", "coupon", "isUDCChannel", "matchChannelCoupons", "targetCoupons", "isHideChannelCoupon", "isAppChannelCoupon"]
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/extensions */\nimport { CouponUtils } from './couponUtils'\n\nimport type { ProductVariant, VariantCoupon } from './couponType'\n\ninterface GetCouponFromVariantProps {\n /** \u53D8\u4F53 */\n variant: ProductVariant | undefined\n /** \u9690\u85CF\u6E20\u9053 */\n channel?: string\n /** \u662F\u5426\u5728app\u4E2D */\n inApp?: boolean\n /** UDC\u4EBA\u7FA4\u5206\u7EC4 */\n udcGroupIds?: number[]\n /** UDC\u767D\u540D\u5355\u4EBA\u7FA4\u5206\u7EC4 */\n udcWhiteGroupIds?: number[]\n /** \u76EE\u6807\u4EE3\u7801 */\n targetCode?: string\n}\n\nexport interface GetValidCustomCouponProps {\n /** custom_data item */\n customDataItem: {\n udcGroups: number[]\n whiteGroups: number[]\n discount: VariantCoupon\n }\n /** \u4EBA\u7FA4\u5206\u7EC4\uFF0C\u6765\u81EA get_user_in_group \u63A5\u53E3 */\n udcGroupIds?: number[]\n udcWhiteGroupIds?: number[]\n}\n\nexport function getCouponFromVariant({\n variant,\n channel,\n inApp,\n udcGroupIds,\n udcWhiteGroupIds,\n targetCode,\n}: GetCouponFromVariantProps): VariantCoupon | undefined {\n console.log('getCouponFromVariant', variant, channel, inApp, udcGroupIds, udcWhiteGroupIds, targetCode)\n // \u9A8C\u8BC1\u8F93\u5165\u53C2\u6570\n if (!CouponUtils.validateVariantCoupon(variant)) {\n return undefined\n }\n console.log('11111111')\n const coupons: any = variant!.metafields?.coupons || variant?.coupons || []\n const customCoupons: any = variant!.metafields?.custom_coupons || variant?.custom_coupons || []\n console.log('22222222', coupons, customCoupons)\n\n // udc_groups \u4EBA\u7FA4\u5206\u7EC4\u4F18\u60E0\u5238\uFF0C\u627E\u51FA\u6240\u6709\u5339\u914D\u7684\u6298\u6263\u7801\n const udcGroupCouponTitleList: string[] | undefined = customCoupons\n ?.filter((item: GetValidCustomCouponProps['customDataItem']) => {\n if (udcGroupIds || udcWhiteGroupIds) {\n return CouponUtils.getValidCustomCoupon({\n customDataItem: item,\n udcGroupIds,\n udcWhiteGroupIds,\n })\n }\n return true\n })\n ?.map((item: GetValidCustomCouponProps['customDataItem']) => item?.discount?.title || '')\n\n // custom_data \u4E2D\u7684 title \u53EA\u662F\u8868\u660E\u4ED6\u547D\u4E2D\u4E86\u8FD9\u4E2A udc \u6298\u6263\uFF0C\u6700\u7EC8\u4EE5 coupons \u7684\u6570\u636E\u4E3A\u51C6\n // \u547D\u4E2D\u7684\u6240\u6709\u6298\u6263\u7801\u9010\u4E00\u9A8C\u8BC1\uFF0C\u627E\u5230\u6700\u5148\u5339\u914D\u7684\u6298\u6263\u7801\uFF0C\u56E0\u4E3A coupons \u4E2D\u6298\u6263\u5927\u7684\u9760\u524D\n const udcGroupCoupon = coupons?.find((item: VariantCoupon) => {\n const isInValidPeriod = CouponUtils.isCouponInValidPeriod(item)\n const isMatchVariant = CouponUtils.isCouponMatchVariant(item, variant)\n return udcGroupCouponTitleList?.includes?.(item?.title || '') && isInValidPeriod && isMatchVariant\n })\n console.log('33333333', inApp, udcGroupCouponTitleList, udcGroupCoupon)\n\n // \u627E\u5230 UDC \u6298\u6263\u5C31\u76F4\u63A5\u7528\n // TODO UDC \u6298\u6263\u76EE\u524D\u7EA6\u5B9A\u4EC5\u5728 app \u4F7F\u7528\n if (inApp && udcGroupCoupon) {\n return udcGroupCoupon\n }\n\n // \u8FC7\u6EE4\u51FA\u6240\u6709\u6709\u6548\u7684\u4F18\u60E0\u5238\n const activeCoupons = coupons.filter((coupon: VariantCoupon) => {\n const isInValidPeriod = CouponUtils.isCouponInValidPeriod(coupon)\n const isMatchVariant = CouponUtils.isCouponMatchVariant(coupon, variant)\n const isUDCChannel = CouponUtils.isUDCChannelCoupon(coupon?.title || '')\n return isInValidPeriod && isMatchVariant && !isUDCChannel\n })\n\n // \u8FC7\u6EE4\u51FA\u9690\u85CF\u6E20\u9053\u7684\u4F18\u60E0\u5238\n const matchChannelCoupons = CouponUtils.getMatchChannelCoupons(activeCoupons, channel)\n\n // \u5982\u679C\u6709\u5339\u914D\u7684\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\u5219\u4F18\u5148\u4F7F\u7528\n if (matchChannelCoupons.length > 0) {\n return matchChannelCoupons[0]\n }\n\n // \u5982\u679C\u6709\u76EE\u6807\u4EE3\u7801\u5219\u8FC7\u6EE4\u51FA\u76EE\u6807\u4EE3\u7801\u7684\u4F18\u60E0\u5238\n const targetCoupons = targetCode\n ? activeCoupons.filter(\n (coupon: VariantCoupon) => coupon?.title?.toLocaleUpperCase() === targetCode?.toLocaleUpperCase()\n )\n : undefined\n\n const finalCoupons = targetCoupons\n ? targetCoupons\n : activeCoupons.filter((coupon: VariantCoupon) => {\n const isHideChannelCoupon = CouponUtils.isHideChannelCoupon(coupon?.title || '')\n const isAppChannelCoupon = CouponUtils.isAppChannelCoupon(coupon?.title || '')\n\n // app \u4E0B\u53EA\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u4F18\u60E0\u5238\n if (inApp) {\n return !isHideChannelCoupon\n }\n\n // \u5B98\u7F51\u4E0B\u9700\u8981\u8FC7\u6EE4\u51FA\u975E\u9690\u85CF\u6E20\u9053\u548C\u975E app \u6E20\u9053\u4F18\u60E0\u5238\n return !isHideChannelCoupon && !isAppChannelCoupon\n })\n return finalCoupons?.[0]\n}\n"],
|
|
5
|
+
"mappings": "AACA,OAAS,eAAAA,MAAmB,gBA+BrB,SAASC,EAAqB,CACnC,QAAAC,EACA,QAAAC,EACA,MAAAC,EACA,YAAAC,EACA,iBAAAC,EACA,WAAAC,CACF,EAAyD,CAGvD,GAFA,QAAQ,IAAI,uBAAwBL,EAASC,EAASC,EAAOC,EAAaC,EAAkBC,CAAU,EAElG,CAACP,EAAY,sBAAsBE,CAAO,EAC5C,OAEF,QAAQ,IAAI,UAAU,EACtB,MAAMM,EAAeN,EAAS,YAAY,SAAWA,GAAS,SAAW,CAAC,EACpEO,EAAqBP,EAAS,YAAY,gBAAkBA,GAAS,gBAAkB,CAAC,EAC9F,QAAQ,IAAI,WAAYM,EAASC,CAAa,EAG9C,MAAMC,EAAgDD,GAClD,OAAQE,GACJN,GAAeC,EACVN,EAAY,qBAAqB,CACtC,eAAgBW,EAChB,YAAAN,EACA,iBAAAC,CACF,CAAC,EAEI,EACR,GACC,IAAKK,GAAsDA,GAAM,UAAU,OAAS,EAAE,EAIpFC,EAAiBJ,GAAS,KAAMG,GAAwB,CAC5D,MAAME,EAAkBb,EAAY,sBAAsBW,CAAI,EACxDG,EAAiBd,EAAY,qBAAqBW,EAAMT,CAAO,EACrE,OAAOQ,GAAyB,WAAWC,GAAM,OAAS,EAAE,GAAKE,GAAmBC,CACtF,CAAC,EAKD,GAJA,QAAQ,IAAI,WAAYV,EAAOM,EAAyBE,CAAc,EAIlER,GAASQ,EACX,OAAOA,EAIT,MAAMG,EAAgBP,EAAQ,OAAQQ,GAA0B,CAC9D,MAAMH,EAAkBb,EAAY,sBAAsBgB,CAAM,EAC1DF,EAAiBd,EAAY,qBAAqBgB,EAAQd,CAAO,EACjEe,EAAejB,EAAY,mBAAmBgB,GAAQ,OAAS,EAAE,EACvE,OAAOH,GAAmBC,GAAkB,CAACG,CAC/C,CAAC,EAGKC,EAAsBlB,EAAY,uBAAuBe,EAAeZ,CAAO,EAGrF,GAAIe,EAAoB,OAAS,EAC/B,OAAOA,EAAoB,CAAC,EAI9B,MAAMC,EAAgBZ,EAClBQ,EAAc,OACXC,GAA0BA,GAAQ,OAAO,kBAAkB,IAAMT,GAAY,kBAAkB,CAClG,EACA,OAgBJ,OAdqBY,GAEjBJ,EAAc,OAAQC,GAA0B,CAC9C,MAAMI,EAAsBpB,EAAY,oBAAoBgB,GAAQ,OAAS,EAAE,EACzEK,EAAqBrB,EAAY,mBAAmBgB,GAAQ,OAAS,EAAE,EAG7E,OAAIZ,EACK,CAACgB,EAIH,CAACA,GAAuB,CAACC,CAClC,CAAC,KACiB,CAAC,CACzB",
|
|
6
|
+
"names": ["CouponUtils", "getCouponFromVariant", "variant", "channel", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "coupons", "customCoupons", "udcGroupCouponTitleList", "item", "udcGroupCoupon", "isInValidPeriod", "isMatchVariant", "activeCoupons", "coupon", "isUDCChannel", "matchChannelCoupons", "targetCoupons", "isHideChannelCoupon", "isAppChannelCoupon"]
|
|
7
7
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{Fragment as Z,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as te}from"../AiuiProvider/index.js";import{formatVariantPrice as se}from"./shelfDisplay.js";import Q from"../../components/picture.js";import X from"../../components/badge.js";import{cn as x}from"../../helpers/utils.js";import{Text as le}from"../../components/text.js";import E from"../../components/button.js";import{gaTrack as oe}from"../../shared/track.js";import{trackUrlRef as ae}from"../../shared/trackUrlRef.js";import{Heading as ie}from"../../components/heading.js";import{getCouponFromVariant as ne}from"./handleCoupon.js";import{useExposure as re}from"../../hooks/useExposure.js";import{useRef as pe,useEffect as ce,useMemo as
|
|
1
|
+
import{Fragment as Z,jsx as s,jsxs as m}from"react/jsx-runtime";import{useAiuiContext as te}from"../AiuiProvider/index.js";import{formatVariantPrice as se}from"./shelfDisplay.js";import Q from"../../components/picture.js";import X from"../../components/badge.js";import{cn as x}from"../../helpers/utils.js";import{Text as le}from"../../components/text.js";import E from"../../components/button.js";import{gaTrack as oe}from"../../shared/track.js";import{trackUrlRef as ae}from"../../shared/trackUrlRef.js";import{Heading as ie}from"../../components/heading.js";import{getCouponFromVariant as ne}from"./handleCoupon.js";import{useExposure as re}from"../../hooks/useExposure.js";import{useRef as pe,useEffect as ce,useMemo as k,useState as Y}from"react";const F="image",G="product_shelf",M=999999999e-2,me=e=>{const t=e?.sku,f=e?.variants,h=f?.find(w=>w?.sku===t),T=h?.image?.url||f?.[0]?.image?.url||"",y=h?.image?.altText||f?.[0]?.image?.altText||e?.custom_name||e?.title||"";return{imageUrl:T,altText:y}},Se=({data:e,configuration:t})=>{const{isDisplayBackImage:f=!1,itemShape:h,metafields:T,isTopTag:y=!1,isShowTag:w,isShowOriginalPrice:v}=t||{},{locale:g="us",copyWriting:O,inApp:_,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}=te(),{discounts:U,discountsCopy:I}=T||{},z=pe(null),[H,a]=Y([]),[L,R]=Y(""),V=(r,c,p)=>t?.event?.primaryButton?.(r,c+1,p),D=(r,c,p)=>t?.event?.secondaryButton?.(r,c+1,p),l=k(()=>{const r=e?.variants||[];if(r.length)return e?.sku?r?.find?.(c=>c?.sku===e?.sku)||r[0]:r?.[0]},[e?.sku,e?.variants]),P=l?.id?.split?.("/")||[],q=P?.[P?.length-1],J=!l?.availableForSale&&(l?.price?.amount===M||l?.price===M),$=k(()=>ne({variant:l,inApp:_,udcGroupIds:S,udcWhiteGroupIds:N,targetCode:B,channel:C}),[l,_,S,N,B,C]),d=!!(v&&$),W=e?.price?.currencyCode||"USD",K=k(()=>se({locale:g,amount:d?$?.variant_price4wscode:l?.price,baseAmount:d?l?.price:0,currencyCode:W}),[W,g,d,$?.variant_price4wscode,l]),{price:b,basePrice:j,discount:u}=K,{imageUrl:A,altText:o}=me(e),i=e?.custom_name||e?.title,n=e?.custom_description||e?.description;ce(()=>{let r=[];if(u){const p=`${u}${U?.off||I?.off||""}`;R(p),r.push(p)}const c=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,u?1:2);a(r.concat(c))},[e?.tags,u,U?.off,I?.off]),re(z,{componentType:F,componentName:G,componentTitle:i,componentDescription:n,position:t?.index+1});const ee=()=>m(Z,{children:[w&&H?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:H?.map?.((r,c)=>s(X,{className:"shelf-items-tag",children:r},c))}):null,i?s(ie,{as:"h3",title:i||"",size:2,className:"shelf-display-product-title line-clamp-2",html:i||""}):null,n?s(le,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:n||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:J?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:O?.soldOutText}):m(Z,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:l?.availableForSale&&b||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:l?.availableForSale&&j||""})]})}),m("div",{className:x("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(E,{variant:"secondary",onClick:()=>D(e,t?.index,t),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
3
|
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(E,{variant:"primary",onClick:()=>V(e,t?.index,t),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:x("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",h==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:f?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(Q,{source:
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:z,className:x("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",h==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:f?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:m("div",{className:"relative inset-0 size-full",children:[s(Q,{source:A,alt:o,className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:ee()})]})}):m("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[L&&y&&s(X,{className:"shelf-prices-tag absolute left-4 top-4 z-10",children:L||""}),s("div",{className:x("lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden"),children:s("a",{"aria-label":i,target:t?.target,href:ae(`${g==="us"||!g?"":`/${g}`}/products/${e?.handle}?variant=${q}`,`${F}_${G}`),onClick:()=>{oe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},children:s(Q,{source:A,alt:o,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),ee()]})},e?.id||e?.handle)},Ne=({data:e,configuration:t})=>{const{itemShape:f,itemLength:h,metafields:T}=t||{},{discounts:y,discountsCopy:w}=T||{},{locale:v="us",copyWriting:g,inApp:O,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}=te(),[C,U]=Y([]),I=pe(null),z=(o,i,n)=>t?.event?.primaryButton?.(o,i+1,n),H=(o,i,n)=>t?.event?.secondaryButton?.(o,i+1,n),a=k(()=>{const o=e?.variants||[];if(o.length)return e?.sku&&o.find(i=>i?.sku===e?.sku)||o[0]},[e?.sku,e?.variants]),L=!a?.availableForSale&&(a?.price?.amount===M||a?.price===M),R=t?.isShowTag,V=t?.isShowOriginalPrice,D=k(()=>ne({variant:a,inApp:O,udcGroupIds:_,udcWhiteGroupIds:S,targetCode:N,channel:B}),[a,O,_,S,N,B]),l=!!(V&&D),P=e?.price?.currencyCode||"USD",q=k(()=>se({locale:v,amount:l?D?.variant_price4wscode:a?.price,baseAmount:l?a?.price:0,currencyCode:P}),[P,v,l,D?.variant_price4wscode,a]),{price:J,basePrice:$,discount:d}=q,{imageUrl:W,altText:K}=me(e),b=e?.custom_name||e?.title,j=e?.custom_description||e?.description;re(I,{componentType:F,componentName:G,componentTitle:b,componentDescription:j,position:t?.index+1});const u=()=>h>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},A=()=>h>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return ce(()=>{let o=[];if(d){const n=`${d}${y?.off||w?.off||""}`;o.push(n)}const i=e?.tags?.filter?.(n=>n?.startsWith?.("CLtag"))?.map?.(n=>n?.replace?.("CLtag:",""))?.slice?.(0,d?1:2);U(o.concat(i))},[e?.tags,d,y?.off,w?.off]),s("div",{ref:I,className:x(u().wrap,f==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300","md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden"),children:m("div",{className:x(A(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:x(u().imgItem,"desktop:mb-0 relative mb-1 overflow-hidden"),children:s("a",{"aria-label":b,target:t?.target,href:ae(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${F}_${G}`),onClick:()=>{oe({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||a?.sku,item_name:e?.name,item_variant:a?.name,price:a?.price,index:t?.index+1}]}})},children:s(Q,{source:W,alt:K,className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),m("div",{className:x("flex flex-col items-start justify-center",u().boxItem),children:[R&&C?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:C?.map?.((o,i)=>s(X,{className:"shelf-items-tag",children:o},i))}):null,b?s(ie,{as:"h3",title:b||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:b||""}):null,j?s(le,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:j||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:L?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:g?.soldOutText}):m(Z,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:a?.availableForSale&&J||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:a?.availableForSale&&$||""})]})}),m("div",{className:x("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(E,{variant:"secondary",onClick:()=>H(e,t?.index,t),className:`
|
|
6
6
|
${t.direction==="vertical"?"w-full":""}
|
|
7
7
|
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(E,{variant:"primary",onClick:()=>z(e,t?.index,t),className:`
|
|
8
8
|
${t.direction==="vertical"?"w-full":""}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/ShelfDisplay/shelfDisplayItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n console.log('inApp', inApp)\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport { getCouponFromVariant } from './handleCoupon.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useMemo, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\n// \u516C\u5171\u51FD\u6570\uFF1A\u83B7\u53D6\u4EA7\u54C1\u56FE\u7247URL\u548CaltText\nexport const getProductImage = (data: any) => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n const imageUrl = findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n const altText = findSku?.image?.altText || skuArray?.[0]?.image?.altText || data?.custom_name || data?.title || ''\n\n return {\n imageUrl,\n altText,\n }\n}\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants?.[0]\n }\n return variants?.find?.((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const variantArr = variant?.id?.split?.('/') || []\n const variantId = variantArr?.[variantArr?.length - 1]\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"shelf-prices-tag absolute left-4 top-4 z-10\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] shelf-display-item-image relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}?variant=${variantId}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = useMemo(() => {\n const variants = data?.variants || []\n if (!variants.length) {\n return undefined\n }\n if (!data?.sku) {\n return variants[0]\n }\n return variants.find((item: any) => item?.sku === data?.sku) || variants[0]\n }, [data?.sku, data?.variants])\n\n const isSoldOut =\n !variant?.availableForSale && (variant?.price?.amount === SOLD_OUT_PRICE || variant?.price === SOLD_OUT_PRICE)\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = useMemo(\n () => getCouponFromVariant({ variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel }),\n [variant, inApp, udcGroupIds, udcWhiteGroupIds, targetCode, channel]\n )\n const shouldUseCouponPrice = Boolean(isShowOriginalPrice && coupon)\n const currencyCode = data?.price?.currencyCode || 'USD'\n\n const priceInfo = useMemo(\n () =>\n formatVariantPrice({\n locale,\n amount: shouldUseCouponPrice ? coupon?.variant_price4wscode : variant?.price,\n baseAmount: shouldUseCouponPrice ? variant?.price : 0,\n currencyCode,\n }),\n [currencyCode, locale, shouldUseCouponPrice, coupon?.variant_price4wscode, variant]\n )\n\n const { price, basePrice, discount } = priceInfo\n\n const { imageUrl, altText } = getProductImage(data)\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n 'm-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]',\n wrap: 'lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n 'md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]',\n wrap: 'lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount, discounts?.off, discountsCopy?.off])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white gap-6 duration-300',\n 'md-tablet:h-[360px] relative box-border w-full cursor-pointer overflow-hidden'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'desktop:mb-0 relative mb-1 overflow-hidden')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture\n source={imageUrl}\n alt={altText}\n className=\"flex h-full justify-center object-cover [&_img]:w-auto\"\n />\n </a>\n </div>\n <div className={cn('flex flex-col items-start justify-center', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "getCouponFromVariant", "useExposure", "useRef", "useEffect", "useMemo", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "getProductImage", "data", "sku", "skuArray", "findSku", "item", "imageUrl", "altText", "ShelfDisplayWrapItem", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "inApp", "udcGroupIds", "udcWhiteGroupIds", "targetCode", "channel", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "variants", "variantArr", "variantId", "isSoldOut", "coupon", "shouldUseCouponPrice", "currencyCode", "priceInfo", "price", "basePrice", "discount", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
7
7
|
}
|