https://www.etmall.com.tw/Resource/Bundle/MasonryProductsCard.js?v=a00c9fd85aa20c639b5c

1"use strict";(self.webpackChunkComponents=self.webpackChunkComponents||[]).push([[1678],{69673:function(fe,T,t){t.r(T),t.d(T,{default:function(){return U}});var F=t(52675),ve=t.n(F),N=t(2008),Me=t.n(N),x=t(22489),De=t.n(x),b=t(7588),pe=t.n(b),H=t(83851),Ce=t.n(H),G=t(81278),je=t.n(G),V=t(79432),Ae=t.n(V),z=t(60825),Ie=t.n(z),Y=t(23500),Re=t.n(Y),C=t(45458),J=t(23029),Q=t(92901),X=t(56822),y=t(53954),Z=t(85501),i=t(64467),w=t(28706),Le=t.n(w),k=t(48980),Te=t.n(k),q=t(62062),ye=t.n(q),ee=t(44114),ge=t.n(ee),te=t(54554),We=t.n(te),se=t(18111),Se=t.n(se),re=t(61701),Be=t.n(re),ae=t(18237),Ke=t.n(ae),oe=t(26099),Ue=t.n(oe),_e=t(3308),ne=t(86683),ce=t(54583),ie=t(83557),le=t(32181),g=t(76374),de=t(26806),ue=t(73209),W,S,M;function B(n,_){var c=Object.keys(n);if(Object.getOwnPropertySymbols){var e=Object.getOwnPropertySymbols(n);_&&(e=e.filter(function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable})),c.push.apply(c,e)}return c}function d(n){for(var _=1;_<arguments.length;_++){var c=arguments[_]!=null?arguments[_]:{};_%2?B(Object(c),!0).forEach(function(e){(0,i.A)(n,e,c[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(c)):B(Object(c)).forEach(function(e){Object.defineProperty(n,e,Object.getOwnPropertyDescriptor(c,e))})}return n}function me(n,_,c){return _=(0,y.A)(_),(0,X.A)(n,K()?Reflect.construct(_,c||[],(0,y.A)(n).constructor):_.apply(n,c))}function K(){try{var n=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(K=function(){return!!n})()}var Ee=function(_){var c=_.children;return React.createElement("div",{className:"titleContainer"},React.createElement("div",{className:"ellipseWrapLeft"},React.createElement("div",{className:"ellipse"}),React.createElement("div",{className:"ellipse"}),React.createElement("div",{className:"ellipse"})),c,React.createElement("div",{className:"ellipseWrapRight"},React.createElement("div",{className:"ellipse"}),React.createElement("div",{className:"ellipse"}),React.createElement("div",{className:"ellipse"})))},U=(W=(0,ce.A)(ne.A,"ViewItemsTracker",{interval:3e3}),S=(0,le.A)(ie.j9),W(M=S(M=function(n){function _(c){var e;return(0,J.A)(this,_),e=me(this,_,[c]),(0,i.A)(e,"fetchMasonryData",function(){var s=e.state,r=s.hasMore,a=s.sessionId,o=s.masonryPage,l=s.productList,u=s.isFirstFetch,P=e.props,D=P.isShop,j=P.isControlFetchOnce;if(r){var A=d({Page:o,SessionId:a},D&&{ShopFlag:2});(0,g.A)({url:"/Recommendation/GetWaterfallProducts",method:"post",data:A,success:function(O){var m=O.Items,E=m===void 0?[]:m,h=O.SessionId,R=h===void 0?null:h,p=O.Title,L=p===void 0?"":p;u&&j&&e.setState({enableAutoFetch:!1}),E!=null&&E.length?e.setState({productList:[].concat((0,C.A)(l),(0,C.A)(E)),sessionId:R,masonryTitle:L,masonryPage:o+1},function(){e.fetchPvData(E)}):e.setState({hasMore:!1})},error:function(){e.setState({hasMore:!1})}})}}),(0,i.A)(e,"fetchPvData",function(s){if(e.state.estoreStatus===1&&!e.isFetchingPv){var r=s.reduce(function(a,o){return a[o.id]=o.finalPrice,a},{});e.isFetchingPv=!0,(0,g.A)({url:"/EStore/GetProductPV",method:"post",data:{Products:r},success:function(o){e.setState(function(l){return{pvData:d(d({},l.pvData),o.Pv)}}),e.isFetchingPv=!1},error:function(){e.isFetchingPv=!1}})}}),(0,i.A)(e,"setupIntersectionObserver",function(){e.observer=new IntersectionObserver(function(s){s[0].isIntersecting&&e.state.enableAutoFetch&&e.fetchMasonryData()},{rootMargin:"300px"}),e.fetchRef.current&&e.observer.observe(e.fetchRef.current)}),(0,i.A)(e,"handleViewEvent",function(s){var r=d(d({},e.staticGAData.current.normal),{},{currency:"TWD"}),a=s.map(function(o){return e.formatEECItem(o,r,"view_item_list")});e.triggerGAEvent("view_item_list",r,a)}),(0,i.A)(e,"updateStaticData",function(){e.staticGAData.current={normal:{item_list_id:"Home_WaterfallProduct",item_list_name:"\u9996\u9801-\u7011\u5E03\u6D41\u5546\u54C1"},similarProduct:{item_list_id:"Home_WaterfallProduct_Similar_Source",item_list_name:"\u9996\u9801-\u7011\u5E03\u6D41\u5546\u54C1_\u627E\u76F8\u4F3C\u4F86\u6E90\u5546\u54C1"},similarList:{item_list_id:"Home_WaterfallProduct_Similar_List",item_list_name:"\u9996\u9801-\u7011\u5E03\u6D41\u5546\u54C1_\u627E\u76F8\u4F3C\u63A8\u85A6\u6E05\u55AE"}}}),(0,i.A)(e,"handleShowOtherMenu",function(s){var r=s.product;e.setState({showOtherMenuId:r.id})}),(0,i.A)(e,"handleCloseOtherMenu",function(){e.setState({showOtherMenuId:null})}),(0,i.A)(e,"handleFetchMore",function(){e.setState({isFirstFetch:!1},function(){e.fetchMasonryData(),e.sendSelectPromotion({suffix:"\u770B\u66F4\u591A\u6309\u9215",index:"EMPTY"}),e.dcsClickHandler({action:"More_Product"})})}),(0,i.A)(e,"updateProductList",function(s){var r=(0,C.A)(e.state.productList),a=r.findIndex(function(o){return o.id===s});r.splice(a,1),e.setState({productList:r})}),(0,i.A)(e,"sendSelectPromotion",function(s){var r=s.suffix,a=s.product,o=s.index,l="Home_WaterfallProduct",u="\u9996\u9801-\u7011\u5E03\u6D41\u5546\u54C1";(0,de.z)({promotion_id:l,promotion_name:u,creative_name:"".concat(u,"_").concat(r).concat(a?"_".concat(a):""),creative_slot:o})}),(0,i.A)(e,"dcsClickHandler",function(s){var r=s.item,a=s.action,o=a===void 0?"":a,l=s.index,u="Home_WaterfallProduct";$.fn.sendGaTracking({category:u,action:o,label:r?"".concat(r.title,"_").concat(r.id,"_").concat(l):o})}),(0,i.A)(e,"formatEECItem",function(s,r,a){return d({item_id:s.id,item_name:s.title,price:s.finalPrice,item_list_id:r.item_list_id,item_list_name:r.item_list_name},a==="select_item"&&{quantity:1})}),(0,i.A)(e,"triggerGAEvent",function(s,r,a){window.dataLayer=window.dataLayer||[],window.dataLayer.push({ecommerce:null}),window.dataLayer.push({event:s,ecommerce:d(d({},r),{},{items:a})})}),(0,i.A)(e,"sendEECSelectItem",function(s){var r=s.product,a=s.t

1ype,o=d({},a==="similarList"?e.staticGAData.current.similarList:a==="similarProduct"?e.staticGAData.current.similarProduct:e.staticGAData.current.normal),l=[e.formatEECItem(r,o,"select_item")];e.triggerGAEvent("select_item",o,l),(0,ue.hM)({sku:r.id,pageId:r.id,pageType:o.item_list_id,pageName:r.title})}),e.state={pvData:{},productList:[],showOtherMenuId:null,hasMore:!0,sessionId:null,masonryTitle:"",masonryPage:1,isFirstFetch:!0,enableAutoFetch:!0},e.isFetchingPv=!1,e.fetchRef=React.createRef(),e.staticGAData=React.createRef(),e}return(0,Z.A)(_,n),(0,Q.A)(_,[{key:"componentDidMount",value:function(){this.props.sendingMethod.current===null&&(this.props.sendingMethod.current=this.handleViewEvent),this.setupIntersectionObserver(),this.updateStaticData()}},{key:"render",value:function(){var e=this,s=this.handleShowOtherMenu,r=this.handleCloseOtherMenu,a=this.updateProductList,o=this.sendSelectPromotion,l=this.sendEECSelectItem,u=this.dcsClickHandler,P=this.props,D=P.imgFrameLabel,j=D.promoFrames,A=D.promoTags,I=P.isControlFetchOnce,O=P.addObserveTarget,m=this.state,E=m.isWishListOnlyShowIcon,h=m.productList,R=m.showOtherMenuId,p=m.hasMore,L=m.masonryTitle;return React.createElement("div",{className:"masonryProductsCard n-m-bottom--sm"},h.length>0&&React.createElement(React.Fragment,null,React.createElement(Ee,null,React.createElement("span",{className:"title"},L)),React.createElement("div",{className:"masonryProductList"},h.map(function(f,v){var Pe=e.state.pvData[f.id],he=e.state.estoreStatus===1,Oe={category:"Home_WaterfallProduct",action:"Click_Item",label:"".concat(f.title,"_").concat(f.id,"_").concat(v)};return React.createElement("li",{key:v+f.id,className:"product"},React.createElement(_e.A,{promoFrames:j,promoTags:A,key:v,product:f,isOnlyShowIcon:E,keyindex:v,imageWidth:"100%",imageHeight:"auto",showPvPrice:he,pvPrice:Pe,lazyLoadImg:v>=12,finalPriceWrapClassName:"",showSimilarItems:!1,showOtherMenuIcon:!0,showOtherMenuId:R,handleShowOtherMenu:s,handleCloseOtherMenu:r,updateProductList:a,sendSelectPromotion:o,sendEECSelectItem:l,dcsClickHandler:u,addObserveTarget:O,productGaTrackingInfo:Oe,style:{padding:0}}))})),I&&h.length>0&&React.createElement("div",{className:"fetchMoreContainer"},React.createElement("div",{className:"n-btn n-btn--lv2",onClick:this.handleFetchMore},React.createElement("span",null,"\u770B\u66F4\u591A\u5546\u54C1")))),p&&React.createElement("div",{ref:this.fetchRef}))}}])}(React.Component))||M)||M);U.defaultProps={imgFrameLabel:{},isControlFetchOnce:!1,isShop:!1,addObserveTarget:function(){}}}}]);