https://www.marksandspencer.hk/_next/static/chunks/1464.7b71403909f9620a.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1464,3837,3004,324,2592],{3837:function(e,t,n){"use strict";n.r(t);var i=n(85893);n(67294);var r=n(98493),o=n.n(r),s=n(46857);t.default=({text:e,icon:t,color:n,borderRadius:r,backgroundColor:a,isLoading:l,isDisabled:d,customContainerStyle:c={},onClick:u,type:m="primary",className:h="",isVariableWidth:f=!1,borderColor:p,rightIcon:x})=>{let b={display:"inline-flex",alignItems:"center",justifyContent:"center",border:"none",color:n||"",borderRadius:`${r}px`,backgroundColor:a,borderColor:p};return p&&delete b.border,f&&(b.width="fit-content"),(0,i.jsx)("button",{onClick:l?void 0:u,disabled:d||l,style:{...b,...c,color:n},className:`${o().btn} button-md ${a||m+"-brand-btn-background"} 
2      ${n?"":m+"-brand-btn-text-color"} ${l?o()["ms-hk-btn-loading"]:""} ${d?o()["ms-hk-btn-disabled"]:""} ${h}`,children:!l&&(0,i.jsxs)(i.Fragment,{children:[t?(0,i.jsx)("span",{className:o().icon,children:(0,i.jsx)(s.Z,{name:t})}):null,e,x?(0,i.jsx)("span",{className:`${o().icon} ${o().right}`,children:(0,i.jsx)(s.Z,{name:x})}):null]})})}},23004:function(e,t,n){"use strict";n.r(t);var i=n(85893),r=n(97173),o=n.n(r),s=n(25675),a=n.n(s),l=n(51035);t.default=e=>{let t;let{src:n,alt:r="",width:s="auto",className:d="",height:c="auto",layout:u="",onClick:m,onLoad:h,objectFit:f="",quality:p=50,isIcon:x=!1,priority:b=!1}=e,g="auto"!==s&&"auto"!==c&&s>0&&c>0&&!x,_=g?`data:image/svg+xml;base64,${t=`
3    <svg width="${s}" height="${c}" viewBox="0 0 ${s} ${c}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
4      <defs>
5        <linearGradient id="g">
6          <stop offset="0%" stop-color="#e0e0e0" />
7          <stop offset="20%" stop-color="#e0e0e0" />
8          <stop offset="50%" stop-color="#f5f5f5" />
9          <stop offset="80%" stop-color="#e0e0e0" />
10          <stop offset="100%" stop-color="#e0e0e0" />
11        </linearGradient>
12      </defs>
13      <rect width="100%" height="100%" fill="#e0e0e0" />
14      <rect width="100%" height="100%" fill="url(#g)">
15        <animate attributeName="x" from="-100%" to="100%" dur="1.5s" repeatCount="indefinite" />
16      </rect>
17    </svg>
18  `,window.btoa(t)}`:void 0;return(0,i.jsx)(a(),{src:n,onClick:m,onLoad:()=>{h&&h()},alt:r,width:s,height:c,layout:u,loader:l.XI,objectFit:f,quality:p,priority:b,placeholder:g?"blur":"empty",blurDataURL:_,loading:b?"eager":"lazy",decoding:"async",className:`${x?"":"img-fluid"} ${d} ${o().image}`},n)}},77519:function(e,t,n){"use strict";var i=n(85893),r=n(41664),o=n.n(r);t.Z=({children:e,href:t,onClick:n,target:r="_self",className:s=""})=>t?(0,i.jsx)(o(),{href:t,target:r,style:{color:"inherit",textDecoration:"none"},onClick:()=>n&&n(),className:s,children:e}):(0,i.jsx)(i.Fragment,{children:e})},49223:function(e,t,n){"use strict";n.r(t);var i=n(85893),r=n(49125),o=n.n(r),s=n(3837),a=n(51035),l=n(23004),d=n(28073),c=n(83769),u=n(77519),m=n(78426),h=n(24250);let f=e=>{if(!e)return"";let t=document.createElement("textarea");return t.innerHTML=e,t.value};t.default=({content:e,isLoading:t,priority:n=!1})=>{let r=(0,h.Z)(),{element:{cta_web:{data:{linkElement:{destination:{value:p}={},display:{value:x}={},target:b=""}={}}={}}={},subtitledefault:{data:{value:g}={}}={},text_alignment:{data:{options:[{id:_}]=[{}]}={}}={},image_alignment:{data:{options:[{value:w="Left"}]=[{}]}={}}={}}={}}=e[0]||{},v=(0,d.Z)();if(t||!e)return(0,i.jsx)("div",{className:"container-fluid p-0",children:(0,i.jsxs)("div",{className:"row m-0",children:[(0,i.jsx)("div",{className:"col-12 col-md-6 p-0  shimmer-wave",style:{minHeight:v?"380px":"800px"}}),(0,i.jsx)("div",{className:"col-12 col-md-6 d-flex flex-column justify-content-around",children:(0,i.jsxs)("div",{className:"d-flex flex-column gap-2 justify-content-around align-items-center mt-2",children:[(0,i.jsx)(c.qm,{width:300,height:v?20:30}),(0,i.jsx)(c.qm,{width:200,height:v?10:20}),(0,i.jsx)(c.qm,{width:100,height:v?10:20})]})})]})});let y=f(e[0]?.title),j=f(g),$=f(x);return(0,i.jsx)(u.Z,{href:p,children:(0,i.jsx)("div",{className:"container-fluid p-0",children:(0,i.jsxs)("div",{className:"row m-0",children:[(0,i.jsx)("div",{className:`col-12 col-md-6 p-0 ${"Left"!==w&&w?"order-2":"order-1"}`,children:(0,i.jsx)(l.default,{src:(0,a.ss)(e[0]?.element?.banner_image_web?.data?.image.renditionList,r)||m.F9,alt:"",width:v?320:454,height:v?380:800,layout:"responsive",priority:n})}),(0,i.jsx)("div",{className:`col-12 col-md-6 ${o().giftcontent} ${"Left"!==w&&w?"order-1":"order-2"}`,children:(0,i.jsxs)("div",{className:"d-flex flex-column justify-content-center align-items-center w-100 h-100",children:[(0,i.jsx)("h2",{className:`${_?`text-${_.toLowerCase()}`:"text-center"} ${v?"heading-md-bold text-center":"heading-lg-bold pl-0"} mb-0`,children:y}),(0,i.jsx)("p",{className:`${_?`text-${_.toLowerCase()}`:"text-center"} ${v?"body-md-default text-center":"subtitle-default"} mb-0 text-center`,children:j}),(0,i.jsx)(s.default,{text:$,type:"primary",borderRadius:0,onClick:()=>{p&&window.open(p,b||"_self")},customContainerStyle:{width:v?"100%":"70%",marginTop:"16px",minWidth:"200px"},className:v?"body-sm-bold":"heading-md-bold"})]})})]})})})}},24250:function(e,t,n){"use strict";var i=n(67294);t.Z=()=>{let[e,t]=(0,i.useState)(window.innerWidth);return(0,i.useEffect)(()=>{let e=()=>{t(window.innerWidth)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),e}},98493:function(e){e.exports={btn:"Button_btn__qBTk2","ms-hk-btn-loading":"Button_ms-hk-btn-loading__B_Vdz","ms-hk-btn-disabled":"Button_ms-hk-btn-disabled__hbB5q",rotate:"Button_rotate__ZB_JY",icon:"Button_icon___9jCe",right:"Button_right__Whali"}},97173:function(){},49125:function(e){e.exports={giftcontent:"full_width_banner_with_title_subtitle_button_giftcontent__AE087"}},92703:function(e,t,n){"use strict";var i=n(50414);function r(){}function o(){}o.resetWarningCache=r,e.exports=function(){function e(e,t,n,r,o,s){if(s!==i){var a=Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol

18:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:r};return n.PropTypes=n,n}},45697:function(e,t,n){e.exports=n(92703)()},50414:function(e){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}}]);