https://www.heroplusgroup.com/_next/static/chunks/pages/how-it-works-87c306141cb24e7a.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="a4be9d3b-52ad-4d18-9d39-57684d97f158",e._sentryDebugIdIdentifier="sentry-dbid-a4be9d3b-52ad-4d18-9d39-57684d97f158")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1640],{70861:function(e,t,i){"use strict";i.d(t,{FT:function(){return a}});var n=i(67294),s=i(85893);let r=["as","disabled"];function a({tagName:e,disabled:t,href:i,target:n,rel:s,role:r,onClick:a,tabIndex:l=0,type:o}){e||(e=null!=i||null!=n||null!=s?"a":"button");let c={tagName:e};if("button"===e)return[{type:o||"button",disabled:t},c];let d=n=>{var s;if(!t&&("a"!==e||(s=i)&&"#"!==s.trim())||n.preventDefault(),t){n.stopPropagation();return}null==a||a(n)};return"a"===e&&(i||(i="#"),t&&(i=void 0)),[{role:null!=r?r:"button",disabled:void 0,tabIndex:t?void 0:l,href:i,target:"a"===e?n:void 0,"aria-disabled":t||void 0,rel:"a"===e?s:void 0,onClick:d,onKeyDown:e=>{" "===e.key&&(e.preventDefault(),d(e))}},c]}let l=n.forwardRef((e,t)=>{let{as:i,disabled:n}=e,l=function(e,t){if(null==e)return{};var i={};for(var n in e)if(({}).hasOwnProperty.call(e,n)){if(t.indexOf(n)>=0)continue;i[n]=e[n]}return i}(e,r),[o,{tagName:c}]=a(Object.assign({tagName:i,disabled:n},l));return(0,s.jsx)(c,Object.assign({},l,o,{ref:t}))});l.displayName="Button",t.ZP=l},58879:function(e,t,i){(window.__NEXT_P=window.__NEXT_P||[]).push(["/how-it-works",function(){return i(55176)}])},3573:function(e,t,i){"use strict";i.d(t,{H:function(){return o}});var n=i(85893),s=i(9008),r=i.n(s),a=i(4298),l=i.n(a);i(67294);let o=e=>{var t;let{title:i,description:s,canonical:a,css:o,image:c,currentLocale:d,otherAvailLocale:h=["en_HK","zh_HK","en_TH","th_TH"],themeColor:u,shouldDownloadTc2p:A,siteName:p="Hero Plus",favicon:x="/favicon.ico"}=e;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(r(),{children:[(0,n.jsx)("title",{children:i}),(0,n.jsx)("meta",{name:"description",content:s}),(0,n.jsx)("meta",{name:"viewport",content:"width=device-width,maximum-scale=1,initial-scale=1,interactive-widget=resizes-content"}),(0,n.jsx)("meta",{property:"og:type",content:"website"}),(0,n.jsx)("meta",{name:"og:title",property:"og:title",content:i}),(0,n.jsx)("meta",{name:"og:description",property:"og:description",content:s}),(0,n.jsx)("meta",{property:"og:site_name",content:p}),(0,n.jsx)("meta",{property:"og:url",content:"".concat(a)}),d&&(0,n.jsx)("meta",{property:"og:locale",content:null==d?void 0:d.replace("-","_")}),d&&(null==h?void 0:h.length)>0&&(null==h?void 0:null===(t=h.filter(e=>e!==(null==d?void 0:d.replace("-","_"))))||void 0===t?void 0:t.map((e,t)=>(0,n.jsx)("meta",{property:"og:locale:alternate",content:e},"seo-og-locale-alternate-".concat(t)))),(0,n.jsx)("meta",{name:"twitter:card",content:"summary"}),(0,n.jsx)("meta",{name:"twitter:title",content:i}),(0,n.jsx)("meta",{name:"twitter:description",content:s}),(0,n.jsx)("link",{rel:"icon",href:x}),o&&(0,n.jsx)("link",{rel:"stylesheet",href:"".concat(o)}),c&&(0,n.jsx)("meta",{property:"og:image",content:"".concat(c)}),c&&(0,n.jsx)("meta",{name:"twitter:image",content:"".concat(c)}),a&&(0,n.jsx)("link",{rel:"canonical",href:"".concat(a)}),d&&a&&(null==h?void 0:h.length)>0&&(null==h?void 0:h.map((e,t)=>(0,n.jsx)("link",{rel:"alternate",hrefLang:null==e?void 0:e.replace("_","-"),href:null==a?void 0:a.replace(d,null==e?void 0:e.replace("_","-"))},"link-alternate-href-".concat(t)))),d&&(0,n.jsx)("link",{rel:"alternate",href:null==a?void 0:a.replace(d,"en-HK"),hrefLang:"x-default"}),u&&(0,n.jsx)("meta",{name:"theme-color",content:u})]}),A&&(0,n.jsx)(l(),{src:"https://t.2c2p.com/SecurePayment/api/pgw-securepay-sdk-2.0.0.min.js",strategy:"afterInteractive"})]})}},55176:function(e,t,i){"use strict";i.r(t),i.d(t,{default:function(){return R}});var n=i(85893),s=i(67294),r=i(89755),a=i.n(r),l=i(41664),o=i.n(l),c=i(86896),d=i(44012),h=i(3573),u={src:"/_next/static/media/img-bg-howitworks.050ef803.png",height:1040,width:3840,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAACCAMAAABSSm3fAAAAGFBMVEXW1tSBaVTJy86ljmwZJ0CgfVFnUTeznpVLGsTFAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAF0lEQVR4nGNgYGBgYGJmYwHRDOyMjKwAAOAAHuiHapMAAAAASUVORK5CYII=",blurWidth:8,blurHeight:2},A={src:"/_next/static/media/icons-black_completed.c9f7ed5e.svg",height:24,width:24,blurWidth:0,blurHeight:0},p={src:"/_next/static/media/icons-white_completed.a8f43d4b.svg",height:24,width:24,blurWidth:0,blurHeight:0},x={src:"/_next/static/media/icons-black_creditcard.922a0431.svg",height:24,width:24,blurWidth:0,blurHeight:0},g={src:"/_next/static/media/icons-white_creditcard.800ae9c9.svg",height:24,width:24,blurWidth:0,blurHeight:0},m={src:"/_next/static/media/icons-black_instalments.8eaf017c.svg",height:24,width:24,blurWidth:0,blurHeight:0},f={src:"/_next/static/media/icons-white_instalments.b26ae736.svg",height:24,width:24,blurWidth:0,blurHeight:0},w={src:"/_next/static/media/icons-black_scan.c3e690ee.svg",height:24,width:24,blurWidth:0,blurHeight:0},j={src:"/_next/static/media/icons-white_scan.a9927ab4.svg",height:24,width:24,blurWidth:0,blurHeight:0},v={src:"/_next/static/media/img-phone-step1.86945b2d.png",height:1086,width:544,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAALVBMVEV4eXl6ZEVqTSB7Z0t4bFphYWB+Wyh+WSWXk41eSi2ldzaKioufhWGZjn6WjHy1xKR4AAAACHRSTlP8+OL299n5+Uy8CIMAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAoSURBVHicBcGHAQAgCMCwIqAs/f9

1cE1bmYlcd5D7BaEM7FJkRiAAH/w/gALVQkOAXAAAAAElFTkSuQmCC",blurWidth:4,blurHeight:8},y={src:"/_next/static/media/img-phone-step2.4a088784.png",height:1086,width:544,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAAHlBMVEXLy8vFxcbOy9CoqKihoaGjo6P////x/+GTkI/r7+eIfklnAAAABnRSTlP4+vnZ4uFXkMALAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJ0lEQVR4nCXGwQ0AMAgDsQu0AfZfGFX9WOZ2H6IqYAZkAw/Z+kspFwsgAHlyhbJVAAAAAElFTkSuQmCC",blurWidth:4,blurHeight:8},b={src:"/_next/static/media/img-phone-step3.ca0c75a6.png",height:1086,width:544,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAAIVBMVEXFxcXMy82ioqKmpab+/v6TkI/x/+Hw/+Ds8Ojp7uW8u7zfzV/KAAAABHRSTlP4+eLZ2RPrkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAACVJREFUeJxjYGJlZWJgZGNnZGDk4GRkYGBhARMMcIKRgZmLgRkACE4AY2vPKUUAAAAASUVORK5CYII=",blurWidth:4,blurHeight:8},k={src:"/_next/static/media/img-phone-step4.eef27ef3.png",height:1086,width:544,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAAJFBMVEXJycnKxLqoqKjKvKahoKCjo6P/////9tzx+/qSkpL/3KX/26W3X2bLAAAABnRSTlP69tn24uFMiyLiAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJklEQVR4nGNg5eRkYWBgY2OAEhwcDAzMXNzMDIzs7IwQMSYGBiYAC1oAf8Ht7gcAAAAASUVORK5CYII=",blurWidth:4,blurHeight:8},_=i(10682),N=i(34051),E=i(31555),C=i(30478);let M=e=>{switch(e.step){case 1:return(0,n.jsx)(a(),{src:v,alt:"step_1",height:543,width:270});case 2:return(0,n.jsx)(a(),{src:y,alt:"step_2",height:543,width:270});case 3:return(0,n.jsx)(a(),{src:b,alt:"step_3",height:543,width:270});case 4:return(0,n.jsx)(a(),{src:k,alt:"step_4",height:543,width:270});default:return(0,n.jsx)(a(),{src:v,alt:"step_5",height:543,width:270})}};var Z=()=>{let[e,t]=s.useState(1);return(0,n.jsx)(_.Z,{children:(0,n.jsxs)(N.Z,{children:[(0,n.jsx)(E.Z,{children:(0,n.jsx)("div",{style:{margin:"auto",width:"270px"},children:(0,n.jsx)(M,{step:e})})}),(0,n.jsx)(E.Z,{children:(0,n.jsx)("div",{className:"d-flex align-items-center h-100",children:(0,n.jsxs)("ul",{role:"tablist",className:"nav-pills-primary nav-pills-just-icons flex-column nav nav-pills",children:[(0,n.jsx)("li",{className:"nav-item my-4",children:(0,n.jsxs)(C.Z,{direction:"horizontal",gap:3,children:[(0,n.jsx)("a",{className:1==e?"active nav-link m-0":"nav-link m-0",onMouseEnter:()=>t(1),style:{height:"60px",width:"60px"},children:(0,n.jsx)("div",{style:{padding:"18px",width:"60px"},children:1==e?(0,n.jsx)(a(),{src:j,alt:"Scan",width:24,height:24}):(0,n.jsx)(a(),{src:w,alt:"Scan",width:24,height:24})})}),(0,n.jsxs)("div",{style:{marginLeft:"24px"},children:[(0,n.jsx)("h4",{className:1==e?"text-primary":"",children:(0,n.jsx)(d.Z,{id:"how-it-works.step_1.title",defaultMessage:"Step 1",description:"Step 1"})}),(0,n.jsx)("p",{style:{margin:0},children:(0,n.jsx)(d.Z,{id:"how-it-works.step_1.description",defaultMessage:"Scan our QR code with Hero Plus mobile app",description:"Scan our QR code with Hero Plus mobile app"})})]})]})}),(0,n.jsx)("li",{className:"nav-item my-4",children:(0,n.jsxs)(C.Z,{direction:"horizontal",gap:3,children:[(0,n.jsx)("a",{className:2==e?"active nav-link m-0":"nav-link m-0",onMouseEnter:()=>t(2),style:{height:"60px",width:"60px"},children:(0,n.jsx)("div",{style:{padding:"18px",width:"60px"},children:2==e?(0,n.jsx)(a(),{src:f,alt:"Instalments",width:24,height:24}):(0,n.jsx)(a(),{src:m,alt:"Instalments",width:24,height:24})})}),(0,n.jsxs)("div",{style:{marginLeft:"24px"},children:[(0,n.jsx)("h4",{className:2==e?"text-primary":"",children:(0,n.jsx)(d.Z,{id:"how-it-works.step_2.title",defaultMessage:"Step 2",description:"Step 2"})}),(0,n.jsx)("p",{style:{margin:0},children:(0,n.jsx)(d.Z,{id:"how-it-works.step_2.description",defaultMessage:"Enter amount and add instalments",description:"Enter amount and add instalments."})})]})]})}),(0,n.jsx)("li",{className:"nav-item my-4",children:(0,n.jsxs)(C.Z,{direction:"horizontal",gap:3,children:[(0,n.jsx)("a",{className:3==e?"active nav-link m-0":"nav-link m-0",onMouseEnter:()=>t(3),style:{height:"60px",width:"60px"},children:(0,n.jsx)("div",{style:{padding:"18px",width:"60px"},children:3==e?(0,n.jsx)(a(),{src:g,alt:"Credit Card",width:24,height:24}):(0,n.jsx)(a(),{src:x,alt:"Credit Card",width:24,height:24})})}),(0,n.jsxs)("div",{style:{marginLeft:"24px"},children:[(0,n.jsx)("h4",{className:3==e?"text-primary":"",children:(0,n.jsx)(d.Z,{id:"how-it-works.step_3.title",defaultMessage:"Step 3",description:"Step 3"})}),(0,n.jsx)("p",{style:{margin:0},children:(0,n.jsx)(d.Z,{id:"how-it-works.step_3.description",defaultMessage:"Choose a credit card",description:"Choose a credit card"})})]})]})}),(0,n.jsx)("li",{className:"nav-item my-4",children:(0,n.jsxs)(C.Z,{direction:"horizontal",gap:3,children:[(0,n.jsx)("a",{className:4==e?"active nav-link m-0":"nav-link m-0",onMouseEnter:()=>t(4),style:{height:"60px",width:"60px"},children:(0,n.jsx)("div",{style:{padding:"18px",width:"60px"},children:4==e?(0,n.jsx)(a(),{src:p,alt:"Completed",width:24,height:24}):(0,n.jsx)(a(),{src:A,alt:"Completed",width:24,height:24})})}),(0,n.jsxs)("div",{style:{marginLeft:"24px"},children:[(0,n.jsx)("h4",{className:4==e?"text-primary":"",children:(0,n.jsx)(d.Z,{id:"how-it-works.step_4.title",defaultMessage:"Step 4",description:"Step 4"})}),(0,n.jsx)("p",{style:{margin:0},children:(0,n.jsx)(d.Z,{id:"how-it-works.step_4.description",defaultMessage:"Confirm payment and that’s all!",description:"Confirm payment and that’s all!"})})]})]})})]})})})]})})},H=i(35005),S=i(90175),R=()=>{let e=(0,c.Z)(),t=e.formatMessage({id:"navbar.how-it-works",defaultMessage:"How It Works",description:"How It Works"}),i=e.formatMessage({id:"seo.title_short",defaultMessage:"Hero Plus",description:"Hero Plus"}),s=e.formatMessage({id:"seo.description",defaultMessage:"Experience a better way to shop with everything you need and pay later with $0 interest and no hidden fees.",description:"Experience a better way to shop with everything you need and pay later with $0 interest and no hidden fees."});return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(h.H,{title:"".concat(t," - ").concat(i),description:s}),(0,n.jsxs)(S.Z,{navbarProps:{isInitTransparent:!0},children:[(0,n.jsxs)("div",{className:"page-header header-filter",children:[(0,n.jsx)("div",{className:"page-header-image",children:(0,n.jsx)(a(),{src:u,alt:"how-it-works",layout:"fill",objectFit:"cover"})}),(0,n.jsx)(_.Z,{children:(0,n.jsx)(N.Z,{className:"d-flex align-items-center h-100",children:(0,n.jsx)("div",{className:"ml-auto mr-auto text-center",children:(0,n.jsx)("h1",{className:"title",children:(0,n.jsx)(d.Z,{id:"how-it-works.header.title",defaultMessage:"How It Works",description:"How It Works"})})})})})]}),(0,n.jsx)("div",{className:"section",children:(0,n.jsxs)(_.Z,{children:[(0,n.jsx)(N.Z,{children:(0,n.jsx)("p",{className:"text-center",children:(0,n.jsx)(d.Z,{id:"how-it-works.section_1.title",defaultMessage:"Download Hero Plus mobile app to enjoy the new shopping experience in the new era.",description:"Download Hero Plus mobile app to enjoy the new shopping experience in the new era."})})}),(0,n.jsx)(N.Z,{children:(0,n.jsx)(Z,{})}),(0,n.jsx)(N.Z,{children:(0,n.jsx)(E.Z,{className:"mr-auto ml-auto text-center",children:(0,n.jsx)(o(),{href:"/download-the-app",legacyBehavior:!0,children:(0,n.jsx)(H.Z,{className:"btn-round",color:"primary",type:"button",style:{maxWidth:"334px"},children:(0,n.jsx)(d.Z,{id:"how-it-works.download_button.title",defaultMessage:"Download Now",description:"Download Now"})})})})})]})})]})]})}},35005:function(e,t,i){"use strict";var n=i(93967),s=i.n(n),r=i(67294),a=i(70861),l=i(76792),o=i(85893);let c=r.forwardRef(({as:e,bsPrefix:t,variant:i="primary",size:n,active:r=!1,disabled:c=!1,className:d,...h},u)=>{let A=(0,l.vE)(t,"btn"),[p,{tagName:x}]=(0,a.FT)({tagName:e,disabled:c,...h});

1return(0,o.jsx)(x,{...p,...h,ref:u,disabled:c,className:s()(d,A,r&&"active",i&&`${A}-${i}`,n&&`${A}-${n}`,h.href&&c&&"disabled")})});c.displayName="Button",t.Z=c},31555:function(e,t,i){"use strict";var n=i(93967),s=i.n(n),r=i(67294),a=i(76792),l=i(85893);let o=r.forwardRef((e,t)=>{let[{className:i,...n},{as:r="div",bsPrefix:o,spans:c}]=function({as:e,bsPrefix:t,className:i,...n}){t=(0,a.vE)(t,"col");let r=(0,a.pi)(),l=(0,a.zG)(),o=[],c=[];return r.forEach(e=>{let i,s,r;let a=n[e];delete n[e],"object"==typeof a&&null!=a?{span:i,offset:s,order:r}=a:i=a;let d=e!==l?`-${e}`:"";i&&o.push(!0===i?`${t}${d}`:`${t}${d}-${i}`),null!=r&&c.push(`order${d}-${r}`),null!=s&&c.push(`offset${d}-${s}`)}),[{...n,className:s()(i,...o,...c)},{as:e,bsPrefix:t,spans:o}]}(e);return(0,l.jsx)(r,{...n,ref:t,className:s()(i,!c.length&&o)})});o.displayName="Col",t.Z=o},10682:function(e,t,i){"use strict";var n=i(93967),s=i.n(n),r=i(67294),a=i(76792),l=i(85893);let o=r.forwardRef(({bsPrefix:e,fluid:t=!1,as:i="div",className:n,...r},o)=>{let c=(0,a.vE)(e,"container"),d="string"==typeof t?`-${t}`:"-fluid";return(0,l.jsx)(i,{ref:o,...r,className:s()(n,t?`${c}${d}`:c)})});o.displayName="Container",t.Z=o},34051:function(e,t,i){"use strict";var n=i(93967),s=i.n(n),r=i(67294),a=i(76792),l=i(85893);let o=r.forwardRef(({bsPrefix:e,className:t,as:i="div",...n},r)=>{let o=(0,a.vE)(e,"row"),c=(0,a.pi)(),d=(0,a.zG)(),h=`${o}-cols`,u=[];return c.forEach(e=>{let t;let i=n[e];delete n[e],null!=i&&"object"==typeof i?{cols:t}=i:t=i;let s=e!==d?`-${e}`:"";null!=t&&u.push(`${h}${s}-${t}`)}),(0,l.jsx)(i,{ref:r,...n,className:s()(t,o,...u)})});o.displayName="Row",t.Z=o},30478:function(e,t,i){"use strict";i.d(t,{Z:function(){return c}});var n=i(93967),s=i.n(n),r=i(67294),a=i(76792),l=i(85893);let o=r.forwardRef(({as:e="div",bsPrefix:t,className:i,direction:n,gap:r,...o},c)=>{t=(0,a.vE)(t,"horizontal"===n?"hstack":"vstack");let d=(0,a.pi)(),h=(0,a.zG)();return(0,l.jsx)(e,{...o,ref:c,className:s()(i,t,...function(e,t=a.Hz,i=a.cs){let n=[];return Object.entries(e).forEach(([e,s])=>{null!=s&&("object"==typeof s?t.forEach(t=>{let r=s[t];if(null!=r){let s=t!==i?`-${t}`:"";n.push(`${e}${s}-${r}`)}}):n.push(`${e}-${s}`))}),n}({gap:r},d,h))})});o.displayName="Stack";var c=o},76792:function(e,t,i){"use strict";i.d(t,{Hz:function(){return s},SC:function(){return u},cs:function(){return r},pi:function(){return d},vE:function(){return c},zG:function(){return h}});var n=i(67294);i(85893);let s=["xxl","xl","lg","md","sm","xs"],r="xs",a=n.createContext({prefixes:{},breakpoints:s,minBreakpoint:r}),{Consumer:l,Provider:o}=a;function c(e,t){let{prefixes:i}=(0,n.useContext)(a);return e||i[t]||t}function d(){let{breakpoints:e}=(0,n.useContext)(a);return e}function h(){let{minBreakpoint:e}=(0,n.useContext)(a);return e}function u(){let{dir:e}=(0,n.useContext)(a);return"rtl"===e}},93967:function(e,t){var i;/*!
2	Copyright (c) 2018 Jed Watson.
3	Licensed under the MIT License (MIT), see
4	http://jedwatson.github.io/classnames
5*/!function(){"use strict";var n={}.hasOwnProperty;function s(){for(var e="",t=0;t<arguments.length;t++){var i=arguments[t];i&&(e=r(e,function(e){if("string"==typeof e||"number"==typeof e)return e;if("object"!=typeof e)return"";if(Array.isArray(e))return s.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var t="";for(var i in e)n.call(e,i)&&e[i]&&(t=r(t,i));return t}(i)))}return e}function r(e,t){return t?e?e+" "+t:e+t:e}e.exports?(s.default=s,e.exports=s):void 0!==(i=(function(){return s}).apply(t,[]))&&(e.exports=i)}()}},function(e){e.O(0,[5006,2751,5654,1549,175,9774,2888,179],function(){return e(e.s=58879)}),_N_E=e.O()}]);