https://www.hktvmall.com/_ui/uilibrary/yui/cache/d5420c3eee72abcf630c701ab5c174c4.js?1791564017528

1var __extends=(this&&this.__extends)||(function(){var extendStatics=Object.setPrototypeOf||({__proto__:[]} instanceof Array&&function(d,b){d.__proto__=b;})||function(d,b){for(var p in b){if(b.hasOwnProperty(p)){d[p]=b[p];}}};return function(d,b){extendStatics(d,b);function __(){this.constructor=d;}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __());};})();var UIImageContainer=(function(_super){__extends(UIImageContainer,_super);function UIImageContainer(props){var _this=_super.call(this,props)||this;_this.state={"progress":UIImageContainer.STATE_PENDING,"nextShowVideo":false};_this.onLoadStart=_this.onLoadStart.bind(_this);_this.onLoad=_this.onLoad.bind(_this);_this.onError=_this.onError.bind(_this);_this.setNextShowVideo=_this.setNextShowVideo.bind(_this);_this.videoOnError=_this.videoOnError.bind(_this);return _this;}UIImageContainer.prototype.setNextShowVideo=function(){var _this=this;this.setState({"nextShowVideo":!this.state.nextShowVideo},function(){setTimeout(function(){_this.setState({"nextShowVideo":!_this.state.nextShowVideo});},1000);});};UIImageContainer.prototype.videoOnError=function(){this.setState({"nextShowVideo":true});};UIImageContainer.prototype.onLoadStart=function(){this.setState({"progress":UIImageContainer.STATE_LOADING});};UIImageContainer.prototype.onLoad=function(){this.setState({"progress":UIImageContainer.STATE_LOADED});_.isFunction(this.props.onImgLoad)&&this.props.onImgLoad();};UIImageContainer.prototype.onError=function(){this.setState({"progress":UIImageContainer.STATE_ERROR});};UIImageContainer.prototype.render=function(){var styles={"width":this.props.width,"height":this.props.height};var className=(["image-container",this.props.className,(this.state.progress==UIImageContainer.STATE_LOADING?"loading":null),(this.state.progress==UIImageContainer.STATE_ERROR?"error":null)]).filter(function(className){return !_.isNull(className);}).join(" ");if(this.props.videoThumbnailUrl){if(this.state.nextShowVideo){return(React.createElement("div",{className:className,style:styles},React.createElement("img",{src:this.props.src,alt:this.props.alt,title:this.props.title,onLoadStart:this.onLoadStart,onLoad:this.onLoad,onError:this.onError})));}else{return(React.createElement("div",{className:"video-container",style:styles},React.createElement("video",{style:styles,autoPlay:true,muted:true,playsInline:true,src:this.props.videoThumbnailUrl,poster:this.props.src,onEnded:this.setNextShowVideo,onError:this.videoOnError})));}}else{return(React.createElement("div",{className:className,style:styles},React.createElement("img",{src:this.props.src,alt:this.props.alt,title:this.props.title,onLoadStart:this.onLoadStart,onLoad:this.onLoad,onError:this.onError})));}};return UIImageContainer;}(React.Component));UIImageContainer.STATE_PENDING="pending";UIImageContainer.STATE_LOADING="loading";UIImageContainer.STATE_LOADED="loaded";UIImageContainer.STATE_ERROR="error";UIImageContainer.defaultProps={"alt":null,"showLoadingIcon":false};var UIButton=function(_a){var _b=_a.title,title=_b===void 0?"":_b,handleClick=_a.handleClick;return(React.createElement("button",{className:"ui-button",onClick:handleClick},title));};var __extends=(this&&this.__extends)||(function(){var extendStatics=Object.setPrototypeOf||({__proto__:[]} instanceof Array&&function(d,b){d.__proto__=b;})||function(d,b){for(var p in b){if(b.hasOwnProperty(p)){d[p]=b[p];}}};return function(d,b){extendStatics(d,b);function __(){this.constructor=d;}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __());};})();var UIButtonConfirm=(function(_super){__extends(UIButtonConfirm,_super);function UIButtonConfirm(props){var _this=_super.call(this,props)||this;_this.buttonStaticStyle={cursor:"pointer",display:"inline-block",paddingLeft:20,paddingRight:20,borderRadius:2,textAlign:"center"};return _this;}UIButtonConfirm.prototype.render=function(){var _a=this.props,minWidth=_a.minWidth,title=_a.title,handleClick=_a.handleClick,disable=_a.disable,isLoading=_a.isLoading;var backgroundColor=disable?"#ACACAC":null;var disableHandleClick=disable||isLoading;return(React.createElement("div",{id:"ui-button-confirm",style:_.assign({},this.buttonStaticStyle,{minWidth:minWidth,backgroundColor:backgroundColor},(disableHandleClick?{cursor:"default"}:null)),onClick:function(ev){if(!disableHandleClick){handleClick(ev);}}},isLoading?DEVICE_TYPE=="desktop"?React.createElement(UILoadingDesktop,null):React.createElement(UILoadingMobile,{color:"#FFFFFF"}):title));};return UIButtonConfirm;}(React.PureComponent));UIButtonConfirm.defaultProps={disable:false,minWidth:0,isLoading:false};var __extends=(this&&this.__extends)||(function(){var extendStatics=Object.

1setPrototypeOf||({__proto__:[]} instanceof Array&&function(d,b){d.__proto__=b;})||function(d,b){for(var p in b){if(b.hasOwnProperty(p)){d[p]=b[p];}}};return function(d,b){extendStatics(d,b);function __(){this.constructor=d;}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __());};})();var UIInputBox=(function(_super){__extends(UIInputBox,_super);function UIInputBox(props){var _this=_super.call(this,props)||this;_this.state={isFocus:false};return _this;}UIInputBox.prototype.render=function(){var _this=this;var _a=this.props,disable=_a.disable,handleChange=_a.handleChange,placeholder=_a.placeholder,caption=_a.caption,hasError=_a.hasError,error_text=_a.error_text,value=_a.value,name=_a.name,type=_a.type,maxLength=_a.maxLength;var isFocus=this.state.isFocus;var errorColor="#FF0000";var borderColor="#CCCCCC";var backgroundColor="#FFFFFF";if(!disable){if(isFocus){borderColor="#36B449";}if(hasError){borderColor=errorColor;}}if(disable){backgroundColor="#EEEEEE";}return(React.createElement("div",{id:"ui-input-box"},React.createElement("input",{onChange:handleChange,placeholder:placeholder,onFocus:function(){return _this.setState({isFocus:true});},onBlur:function(){return _this.setState({isFocus:false});},disabled:disable,style:{display:"inline-block",border:"1px solid",padding:"10.5px 10px",borderColor:borderColor,borderRadius:4,backgroundColor:backgroundColor,width:"100%",height:38,color:(disable?"#ACACAC":"#222222"),fontSize:"15px"},name:name,value:value,type:type,maxLength:maxLength}),React.createElement("span",{style:_.assign({},{fontSize:"13px",paddingTop:"5px",display:"inline-block",lineHeight:"18px"},(hasError?{color:errorColor}:{}))},!hasError?caption:error_text)));};return UIInputBox;}(React.PureComponent));UIInputBox.defaultProps={disable:false,placeholder:"",caption:"",hasError:false,error_text:"",value:"",name:undefined,type:"text",maxLength:undefined};var __extends=(this&&this.__extends)||(function(){var extendStatics=Object.setPrototypeOf||({__proto__:[]} instanceof Array&&function(d,b){d.__proto__=b;})||function(d,b){for(var p in b){if(b.hasOwnProperty(p)){d[p]=b[p];}}};return function(d,b){extendStatics(d,b);function __(){this.constructor=d;}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __());};})();var UISlideMenu=(function(_super){__extends(UISlideMenu,_super);function UISlideMenu(props){var _this=_super.call(this,props)||this;_this.disableParentScrollStyle="height: 100%;width: 100%;overflow: hidden;position: fixed;";_this.prevScrollPosition=$(window).scrollTop();_this.handleClick=_this.handleClick.bind(_this);return _this;}UISlideMenu.prototype.componentDidMount=function(){this.disableBodyScroll(true);};UISlideMenu.prototype.componentWillUnmount=function(){this.disableBodyScroll(false);window.scrollTo(0,this.prevScrollPosition);};UISlideMenu.prototype.disableBodyScroll=function(trigger){var body=document.querySelector("body");var bodyStyle=body.getAttribute("style")||"";var style=this.disableParentScrollStyle;if(bodyStyle.match(this.disableParentScrollStyle)){if(!trigger){body.setAttribute("style",bodyStyle.replace(style,""));window.scrollTo(0,this.prevScrollPosition);}}else{if(trigger){this.prevScrollPosition=$(window).scrollTop();body.setAttribute("style",bodyStyle+style);}}};UISlideMenu.prototype.handleClick=function(event){var target=event.target;var handleClickBackground=this.props.handleClickBackground;if(target.id==this.menuBackground.id){handleClickBackground();}};UISlideMenu.prototype.render=function(){var _this=this;var children=this.props.children;return(React.createElement("div",{id:"ui-slide-menu",className:"ui-slide-menu",ref:function(el){return _this.menuBackground=el;},onClick:this.handleClick,style:{position:"fixed",width:"100%",height:"100%",top:0,left:0,zIndex:10000,overflow:"hidden",background:"rgba(0,0,0,0.7)"}},React.createElement("div",{id:"ui-slide-menu-content",className:"ui-slide-menu-content",ref:function(el){return _this.menuContent=el;},style:{display:"inline-block",top:0,right:0,width:"80%",height:"100%",position:"absolute",overflowY:"scroll",backgroundColor:"#FFFFFF"}},children)));};return UISlideMenu;}(React.PureComponent));var __extends=(this&&this.__extends)||(function(){var extendStatics=Object.

1setPrototypeOf||({__proto__:[]} instanceof Array&&function(d,b){d.__proto__=b;})||function(d,b){for(var p in b){if(b.hasOwnProperty(p)){d[p]=b[p];}}};return function(d,b){extendStatics(d,b);function __(){this.constructor=d;}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __());};})();var UISelectionBox=(function(_super){__extends(UISelectionBox,_super);function UISelectionBox(props){var _this=_super.call(this,props)||this;_this.isDesktop=DEVICE_TYPE==="desktop";_this.hasFlexbox=Modernizr.flexbox||Modernizr.flexboxlegacy;_this.state={toggleMenu:false};_this.forceToggleMenu=_this.forceToggleMenu.bind(_this);return _this;}UISelectionBox.prototype.forceToggleMenu=function(flag){if(flag===void 0){flag=false;}this.setState({toggleMenu:flag});};UISelectionBox.prototype.componentDidUpdate=function(prevProps,prevState){var prevToggleMenu=prevState.toggleMenu;var toggleMenu=this.state.toggleMenu;var openMenu=!prevToggleMenu&&toggleMenu;var closeMenu=prevToggleMenu&&!toggleMenu;if(this.isDesktop&&openMenu){var diff=window.innerHeight-this.selectionContent.getBoundingClientRect().bottom;if(this.hasFlexbox&&this.props.canInvert){if(diff<10){this.selectionBox.className="invert";}else{this.selectionBox.className="";}}}else{if(closeMenu){this.selectionBox.className="";}}};UISelectionBox.prototype.renderContent=function(){var _this=this;var _a=this.props,children=_a.children,options=_a.options,disable=_a.disable,handleOnChange=_a.handleOnChange,valueName=_a.valueName,isLoading=_a.isLoading;var borderTop="1px solid #CCCCCC";var borderBottom="1px solid #CCCCCC";return(React.createElement("div",{id:"ui-selection-box-outer-content",ref:function(el){return _this.selectionContent=el;}},children,React.createElement("ul",{className:"ui-selection-box-content",style:isLoading?{textAlign:"center"}:null},!isLoading?options.map(function(item,index){return(React.createElement("li",{key:"ui-selection-box-item-"+index,onClick:function(){handleOnChange(item);_this.setState({toggleMenu:false});}},React.createElement("span",null,item[valueName])));}):this.isDesktop?React.createElement(UILoadingDesktop,null):React.createElement(UILoadingMobile,null))));};UISelectionBox.prototype.renderHeader=function(){var _this=this;var _a=this.props,selectedOption=_a.selectedOption,disable=_a.disable,valueName=_a.valueName,desktopMode=_a.desktopMode,handleHeaderClick=_a.handleHeaderClick;return(React.createElement("div",{className:"ui-selection-box-header",onClick:function(){if(typeof handleHeaderClick==="function"){handleHeaderClick();}if(!disable){_this.setState(function(prevState){return{toggleMenu:!prevState.toggleMenu};});}}},React.createElement("span",{style:disable?{color:"#ACACAC"}:null},selectedOption[valueName]),!this.isDesktop&&!desktopMode?React.createElement(UIIconSelectionSingleArrow,{color:disable?"#ACACAC":undefined}):React.createElement(UIIconSelectionDoubleArrow,{color:disable?"#ACACAC":undefined})));};UISelectionBox.prototype.renderContentController=function(){var _this=this;var isDesktop=this.isDesktop;var desktopMode=this.props.desktopMode;return(isDesktop||desktopMode?this.renderContent():React.createElement(UISlideMenu,{handleClickBackground:function(){return _this.setState({toggleMenu:false});}},this.renderContent()));};UISelectionBox.prototype.render=function(){var _this=this;var toggleMenu=this.state.toggleMenu;var _a=this.props,selectedOption=_a.selectedOption,options=_a.options,disable=_a.disable,valueName=_a.valueName,propBackgroundColor=_a.backgroundColor,minHeight=_a.minHeight,zIndex=_a.zIndex;var backgroundColor=disable?"#EEEEEE":propBackgroundColor;var cursor=disable?"default":"pointer";return(React.createElement("div",{style:{position:"relative",minHeight:minHeight,zIndex:zIndex}},React.createElement("div",{id:"ui-selection-box",ref:function(el){return _this.selectionBox=el;},style:{cursor:cursor,backgroundColor:backgroundColor,width:"100%",position:"absolute"}},this.renderHeader(),toggleMenu&&!disable&&this.renderContentController())));};return UISelectionBox;}(React.Component));UISelectionBox.defaultProps={disable:false,options:[],keyName:"name",valueName:"value",isLoading:false,desktopMode:false,backgroundColor:"#FFFFFF",canInvert:true,handleHeaderClick:undefined,minHeight:38,zIndex:undefined};var __extends=(this&&this.__extends)||(function(){var extendStatics=Object.

1setPrototypeOf||({__proto__:[]} instanceof Array&&function(d,b){d.__proto__=b;})||function(d,b){for(var p in b){if(b.hasOwnProperty(p)){d[p]=b[p];}}};return function(d,b){extendStatics(d,b);function __(){this.constructor=d;}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __());};})();var __assign=(this&&this.__assign)||Object.assign||function(t){for(var s,i=1,n=arguments.length;i<n;i++){s=arguments[i];for(var p in s){if(Object.prototype.hasOwnProperty.call(s,p)){t[p]=s[p];}}}return t;};var UISelectionList=(function(_super){__extends(UISelectionList,_super);function UISelectionList(props){var _this=_super.call(this,props)||this;_this.state={citicobrandIndex:props.options.map(function(o){return o.code;}).indexOf("citicobrand"),firstPaymentOptionIndex:props.options.map(function(o){return o.payMethod;}).indexOf("")};return _this;}UISelectionList.prototype.renderLabel=function(option,index){var _this=this;var _a=this.props,keyName=_a.keyName,valueName=_a.valueName,remarkName=_a.remarkName,extraMsg=_a.extraMsg,handleChange=_a.handleChange,inputName=_a.inputName,showBulletPoint=_a.showBulletPoint,children=_a.children,selectedOption=_a.selectedOption,showSavedPaymentMethod=_a.showSavedPaymentMethod;var _b=this.state,firstPaymentOptionIndex=_b.firstPaymentOptionIndex,citicobrandIndex=_b.citicobrandIndex;var checked=selectedOption[keyName]==option[keyName];return(React.createElement("div",{className:(citicobrandIndex!=-1&&(citicobrandIndex==index||citicobrandIndex+1==index))||(citicobrandIndex==-1&&firstPaymentOptionIndex!=-1&&firstPaymentOptionIndex==index)?"addnewCard":null,key:option[keyName]+"_"+index,style:{display:""+(option["hideSavedPaymentMethod"]?"none":"block")}},React.createElement("label",{htmlFor:"input_"+option[keyName],"data-key":option[keyName],className:""+(option["disable"]?"disabled":"")+(option.getCardIcon?" getCardIcon":"")},React.createElement("input",{type:showBulletPoint?"radio":"hidden",disabled:option["disable"]?true:false,name:inputName,value:option[keyName],checked:checked,id:"input_"+option[keyName],onClick:function(){((_.isEmpty(option[keyName])||(!_.isEmpty(option[keyName])&&option[keyName]=="citicobrand")?analytics.trackEvent("Citihktvmallcreditcard_Checkout","Click_AddCardOption",hktvCommon.env.userpk):null));return(option["disable"]||handleChange(option));}}),option.getCardIcon&&option["cardIconSrc"]?React.createElement("img",{className:"cardIcon",src:option["cardIconSrc"]}):null,option.useImageAsTitle?React.createElement("img",{className:"labelLogo",src:option[valueName]}):React.createElement("span",null,option[valueName]),option["checkIcon"]&&(checked?React.createElement("img",{className:"check",src:"/_ui/shared/common/svg/checkout/icCheck_green.svg"}):React.createElement("img",{className:"check",src:"/_ui/shared/common/svg/checkout/icCheck_grey.svg"})),!_.isEmpty(remarkName)&&!_.isEmpty(option[remarkName])&&React.createElement("span",{className:"remark"},option[remarkName]),!_.isEmpty(extraMsg)&&!_.isEmpty(option[extraMsg])&&React.createElement("span",{className:"extraMsg"},option[extraMsg]),!option.disable&&option.checkbox&&React.createElement("label",{className:"checkbox"},React.createElement("input",{type:"checkbox",name:"save",value:option.checkbox.code,checked:option.checkbox.checked,onClick:function(event){event.stopPropagation();option["disable"]||handleChange(__assign({},option,{checkbox:__assign({},option.checkbox,{checked:event.currentTarget.checked})}));}}),React.createElement("span",null,option.checkbox.msg)),option.disable&&option.disableMsg&&option.disableMsg.length>0&&option.disableMsg.map(function(o){return React.createElement("span",{className:"disableMsg "+o.code,key:o.code},o.message);}),option["expiryDate"]&&React.createElement("span",{className:"expiry-date"},message.payment.general.cardExpiryDate,option["expiryDate"]),(option["status"]==="isCardExpiredSoon")&&React.createElement("span",{className:"status-remark "+option["status"]},message.payment.general.cardExpiryRemark)),checked&&!_.isEmpty(children)&&React.createElement("div",{className:"ui-selection-list-children"},children),option["showAllSavedPaymentBtn"]&&option["showAllSavedPaymentBtn"].length>0&&!showSavedPaymentMethod?React.createElement("div",{className:"choose-other

1-payment-method",onClick:function(event){event.stopPropagation();_this.props.toggleSavedPaymentMethod(true);}},option["showAllSavedPaymentBtn"]):null));};UISelectionList.prototype.render=function(){var _this=this;var _a=this.props,header=_a.header,showHeader=_a.showHeader,selectedOption=_a.selectedOption,options=_a.options;return(React.createElement("div",{className:"ui-selection-list"},showHeader&&React.createElement("div",{className:"title"},React.createElement("span",null,header)),React.createElement("div",{className:"content"},options.map(function(item,index){return _this.renderLabel(item,index);}))));};return UISelectionList;}(React.Component));UISelectionList.defaultProps={header:"",inputName:"",showHeader:false,keyName:"key",valueName:"value",remarkName:"",extraMsg:"",showBulletPoint:true};var __extends=(this&&this.__extends)||(function(){var extendStatics=Object.setPrototypeOf||({__proto__:[]} instanceof Array&&function(d,b){d.__proto__=b;})||function(d,b){for(var p in b){if(b.hasOwnProperty(p)){d[p]=b[p];}}};return function(d,b){extendStatics(d,b);function __(){this.constructor=d;}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __());};})();var UIGridView=(function(_super){__extends(UIGridView,_super);function UIGridView(props){return _super.call(this,props)||this;}UIGridView.prototype.render=function(){var _this=this;var className=["ui-grid-view",this.props.className].join(" ");return(React.createElement("ul",{className:className,style:{"display":"block"}},React.Children.map(this.props.children,function(child,childIndex){return(React.createElement("li",{key:childIndex,style:{"display":"inline-block","width":(100/_this.props.cols+"%"),"overflow":_this.props.overflow}},child));})));};return UIGridView;}(React.Component));UIGridView.defaultProps={"overflow":"auto","className":""};var __extends=(this&&this.__extends)||(function(){var extendStatics=Object.setPrototypeOf||({__proto__:[]} instanceof Array&&function(d,b){d.__proto__=b;})||function(d,b){for(var p in b){if(b.hasOwnProperty(p)){d[p]=b[p];}}};return function(d,b){extendStatics(d,b);function __(){this.constructor=d;}d.prototype=b===null?Object.create(b):(__.prototype=b.prototype,new __());};})();var UIHktvUrl=(function(_super){__extends(UIHktvUrl,_super);function UIHktvUrl(props){return _super.call(this,props)||this;}UIHktvUrl.prototype.render=function(){var target=this.props.openInNewWindow?"_blank":"_self";var className=["hktv-url",this.props.className].join(" ");var style=_.assign({"display":"inline-block"},this.props.style);return(React.createElement("a",{href:hktvCommon.addPrefixToHktvUrl(this.props.href),target:target,className:className,style:style},this.props.children));};return UIHktvUrl;}(React.Component));UIHktvUrl.defaultProps={"openInNewWindow":false,"className":"","style":{}};var UIIconCloseColorbox=function(props){var style=props.style,onClick=props.onClick;return(React.createElement("svg",{className:"ui-icon-close-colorbox",width:"36",height:"36",viewBox:"0 0 36 36",xmlns:"http://www.w3.org/2000/svg",style:style,onClick:function(){return onClick();}},React.createElement("circle",{id:"close-circle",cx:"18",cy:"18",r:"18",fill:"#F8F8F8"}),React.createElement("g",{id:"close-cross",fill:"none",stroke:"#808080",strokeWidth:"2",strokeLinecap:"round"},React.createElement("line",{x1:"13",y1:"13",x2:"23",y2:"23"}),React.createElement("line",{x1:"23",y1:"13",x2:"13",y2:"23"}))));};