https://www.yoco.com/components-StoryBlok-V2-Card-Plans-CalculatorRecommended-b474fa6fc56689eaa4b6.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:{};e.SENTRY_RELEASE={id:"c83f02910c831d5c731b90dcdd19f361e85fc8b6"};var t=(new e.Error).stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="aedca0f3-415c-4d80-9ef9-5da758903283",e._sentryDebugIdIdentifier="sentry-dbid-aedca0f3-415c-4d80-9ef9-5da758903283")}catch(e){}}(),(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[710],{7606:function(e,t,l){l.r(t),l.d(t,{default:function(){return S}});var a=l(77539),n=l(96706),i=l(98587);const o=5e4;var r=l(96540),s=l(3409),m=l(52347);var d=e=>{let{plans:t,selectedPlan:l,onSelect:a}=e;const{0:i,1:o}=(0,r.useState)(t[0]),d=null!=l?l:i,c=Math.max(0,t.indexOf(d)),u=(0,r.useRef)([]),{0:g,1:b}=(0,r.useState)(null);return(0,m.A)((()=>{const e=u.current[c];e&&b({left:e.offsetLeft,width:e.offsetWidth})}),[c,t]),r.createElement("div",{className:"relative flex h-48 w-fit gap-4 rounded-32 bg-white p-6"},g&&r.createElement("div",{"aria-hidden":!0,className:"absolute bottom-6 left-0 top-6 flex items-center justify-start rounded-32 border border-gray bg-light-gray pl-10 transition-[transform,width] duration-300 ease-out will-change-transform",style:{transform:"translateX("+g.left+"px)",width:g.width+"px"}},r.createElement("div",{className:"mb-[2px] h-8 w-8 rounded-full bg-blue"})),t.map(((e,t)=>r.createElement("div",{key:e,ref:e=>{u.current[t]=e},className:"relative z-10 flex h-full cursor-pointer items-center justify-center gap-8 px-10",onClick:()=>(e=>{a?a(e):o(e)})(e)},d===e&&r.createElement("div",{"aria-hidden":!0,className:"h-8 w-8"}),r.createElement(s.A,{text:e,font:"grotesk",weight:"book",color:n.Q.Black,size:"body-md"})))))},c=l(46942),u=l.n(c),g=l(33993),b=l(99798);var f=e=>{let{steps:t,value:l,onChange:a,minValue:i,maxValue:o,labelText:m,textColor:d,size:c="default"}=e;const f="large"===c,p=f?17:14,x=(0,r.useRef)(null),{0:h,1:v}=(0,r.useState)(l),k=(0,r.useCallback)((e=>{const l=Math.ceil(Number.parseInt(e.target.value)/t)*t;v(l),a&&a(l)}),[a,t]);return(0,r.useEffect)((()=>{v(l)}),[l]),r.createElement("div",{className:"flex flex-col gap-8 md:gap-16 lg:gap-20"},r.createElement("div",null,f&&m&&r.createElement(s.A,{font:"grotesk",weight:"medium",size:"body-md",color:d,text:m}),r.createElement(g.A,{type:"price",size:"large",valueFontSize:f?"h3":void 0,value:h,adornmentText:"R",superscriptText:f?void 0:m,textColor:d,strikeSuperscriptText:!1,adornmentTextPosition:"left",enableThousandSeparator:!0})),r.createElement("div",{className:u()("relative mt-20",f?"sm:mt-12":"sm:mt-0")},r.createElement("div",{style:{width:(h-i)/(o-i)*100+"%",maxWidth:"calc(100% - "+p+"px)"},className:u()("absolute left-0 z-10 w-full -translate-y-full border-r-0",f?"top-[3px] h-14 min-w-[17px] rounded-l-12 border-[3px] border-blue/40 bg-clip-padding":"top-[2px] h-8 min-w-[14px] rounded-l-[11px] border-2 border-light-blue",(0,b.e$)(n.Q.Blue)),ref:x}),r.createElement("div",{className:u()("absolute left-0 z-0 w-full -translate-y-full",f?"h-8 rounded-12 border border-charcoal/10 bg-charcoal/10":u()("h-[3px] rounded-[11px] opacity-20",(0,b.e$)(n.Q.Black)))}),r.createElement("input",{type:"range",step:t,min:i,max:o,value:h,id:"rangeInputSlider",onChange:k,className:u()("absolute top-0 z-20 w-full appearance-none bg-transparent",f?["[&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-24 [&::-moz-range-thumb]:-translate-y-[70%] [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-solid [&::-moz-range-thumb]:border-blue [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:ring-[3px] [&::-moz-range-thumb]:ring-blue/40","[&::-webkit-slider-thumb]:-mt-[17px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:size-24 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-blue [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:ring-[3px] [&::-webkit-slider-thumb]:ring-blue/40"]:["[&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-20 [&::-moz-range-thumb]:-translate-y-[70%] [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-solid [&::-moz-range-thumb]:border-blue [&::-moz-range-thumb]:bg-white","[&::-webkit-slider-thumb]:-mt-[11px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:size-20 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-solid [&::-webkit-slider-thumb]:border-blue [&::-webkit-slider-thumb]:bg-white"])})))},p=l(22149),x=l(3463),h=l(59744),v=l(6160),k=l(18397);const E=["title","description","minRange","maxRange","initialSliderValue","backgroundColor","onSliderChange","mobileGridOrder","plans","recommendedPlanTransactionAmount"];var w=e=>{var t;let{title:l,description:a,minRange:m,maxRange:c,initialSliderValue:u,backgroundColor:w,onSliderChange:y,mobileGridOrder:A,plans:N,recommendedPlanTransactionAmount:z}=e,C=(0,i.A)(e,E);const S=(0,r.useRef)(!1),{0:T,1:R}=(0,r.useState)(u>

1c?c:Math.max(u,m)),O=N.filter((e=>!isNaN(e.standardAmount))),{0:Q,1:_}=(0,r.useState)((null===(t=O[0])||void 0===t?void 0:t.title)||""),I=O.find((e=>e.title===Q)),B=null!=z?z:"",D=""!==B&&!isNaN(Number.parseFloat(B)),V=I?((T<=o?I.standardAmount:I.reducedAmount)/100*T).toFixed(2):void 0;return r.createElement(p.A,Object.assign({mobileGridOrder:A,as:"div",animateOnScroll:!0,className:"col-span-full mt-24 flex w-full max-w-[652px] flex-col gap-32 sm:col-span-2 md:col-span-4 lg:col-span-8 lg:ml-60"},C),r.createElement("div",{className:"flex flex-col gap-24 md:gap-32 lg:gap-40"},r.createElement("div",{className:"mb-4"},r.createElement(s.A,{font:"grotesk",weight:"medium",size:"h3",color:(0,b.q8)(w),text:l,element:"h3"}),r.createElement(s.A,{font:"grotesk",weight:"book",size:"body-md",color:(0,b.q8)(w),text:a,className:"opacity-70"})),r.createElement(d,{plans:O.map((e=>e.title)),selectedPlan:Q,onSelect:_}),r.createElement("div",{className:"lg:max-w-[618px]"},r.createElement(f,{steps:1,size:"large",labelText:"Monthly sales",value:T,minValue:m,maxValue:c,textColor:(0,b.q8)(w),onChange:e=>{S.current||((0,v.lR)(h.YV),S.current=!0),R(e),y&&y(e)}})),r.createElement("div",{className:"mt-[28px] flex w-full flex-col gap-y-10 tabular-nums md:flex-row md:gap-x-80"},r.createElement("div",{className:"flex flex-col"},r.createElement(s.A,{font:"grotesk",weight:"medium",size:"body-md",color:(0,b.q8)(w),text:"Transaction fees"}),I?r.createElement(r.Fragment,null,D?r.createElement(r.Fragment,null,r.createElement(g.A,{type:"percentage",size:"matchFont",valueFontSize:"lead-lg",value:T<=o?I.standardAmount:I.reducedAmount,adornmentText:"%",textColor:(0,b.q8)(w),adornmentTextPosition:"right",sideScriptText:"excl. VAT"}),r.createElement(s.A,{font:"grotesk",weight:"book",size:"body-sm",color:(0,b.q8)(w),text:"On local debit card transactions",className:"hidden opacity-70 sm:block"})):r.createElement(r.Fragment,null,r.createElement(s.A,{font:"grotesk",weight:"medium",size:"lead-lg",color:(0,b.q8)(w),text:"Custom"}))):r.createElement("div",{className:"flex flex-col"},r.createElement(s.A,{font:"grotesk",weight:"medium",size:"lead-lg",color:(0,b.q8)(w),text:"-"}))),r.createElement("div",{className:"flex flex-col"},r.createElement(s.A,{font:"grotesk",weight:"medium",size:"body-md",color:(0,b.q8)(w),text:"You'll pay"}),I?r.createElement(r.Fragment,null,D?r.createElement(r.Fragment,null,r.createElement(g.A,{type:"price",size:"matchFont",valueFontSize:"lead-lg",value:V?(0,k.$)(V,{shouldShowDecimals:!0,hasThousandsSeparator:!0}):"-",adornmentText:"R",textColor:(0,b.q8)(w),adornmentTextPosition:"left",sideScriptText:"excl. VAT"}),r.createElement(s.A,{font:"grotesk",weight:"book",size:"body-sm",color:(0,b.q8)(w),text:(null==I?void 0:I.payoutDescription)||"Standard payout",className:"opacity-70"})):r.createElement(r.Fragment,null,r.createElement(s.A,{font:"grotesk",weight:"medium",size:"lead-lg",color:(0,b.q8)(w),text:"Custom"}),r.createElement("div",{className:"flex flex-col gap-10 md:flex-row"},r.createElement(s.A,{size:"body-sm",font:"grotesk",weight:"book",color:(0,b.q8)(w),text:"Talk to our sales team about custom rates",className:"opacity-70"}),r.createElement(x.A,{textSize:"subscript-sm",style:"text",weight:"book",text:"click here",color:n.Q.Blue,linkUrl:"#intercom",className:"mt-[2px]"})))):r.createElement("div",{className:"flex flex-col"},r.createElement(s.A,{font:"grotesk",weight:"medium",size:"lead-lg",color:(0,b.q8)(w),text:"-"}))))))},y=l(59351),A=l(93204);const N=["sliderTitle","sliderDescription","sliderMinRange","sliderMaxRange","sliderInitialValue","sliderBackgroundColor","recommendedPlanConfigs","mobileGridOrder"];var z=e=>{let{sliderTitle:t,sliderDescription:l,sliderMinRange:a,sliderMaxRange:n,sliderInitialValue:s=0,sliderBackgroundColor:m,recommendedPlanConfigs:d,mobileGridOrder:c}=e,u=(0,i.A)(e,N);const{0:g,1:b}=(0,r.useState)(-1),{0:f,1:x}=(0,r.useState)(0);(0,r.useEffect)((()=>{h(s)}),[]);const h=(0,r.useCallback)((e=>{if(!d||0===d.length)return void b(-1);const t=d.findIndex((t=>{const{minSliderRange:l,maxSliderRange:a}=t;return e>=l&&e<=a}));b(t);const l=d[t].planConfig;x(e<=o?null==l?void 0:l.standardRate:e>

1=2e5?"custom":l.reducedRate||l.standardRate)}),[d]),v=null==d?void 0:d[g];return r.createElement(p.A,Object.assign({as:"div",mobileGridOrder:c,className:"col-span-full"},u),r.createElement(A.A,{className:"mx-auto max-w-[1232px]"},r.createElement(w,{title:t,description:l,minRange:a,maxRange:n,initialSliderValue:s,backgroundColor:m,onSliderChange:h,plans:(null==d?void 0:d.map((e=>{var t,l,a;return{title:null!==(t=e.planConfig.title)&&void 0!==t?t:"",fromAmount:null!==(l=e.planConfig.fromAmount)&&void 0!==l?l:"",standardAmount:e.planConfig.standardRate,reducedAmount:null!==(a=e.planConfig.reducedRate)&&void 0!==a?a:e.planConfig.standardRate,payoutDescription:e.planConfig.payoutDescription}})))||[],recommendedPlanTransactionAmount:f.toString()}),-1!==g&&v&&r.createElement(y.A,{planConfig:v.planConfig,ctaText:v.ctaText,ctaLink:v.ctaLink,ctaColor:v.ctaColor,testimonialTitle:v.testimonialTitle,testimonialQuote:v.testimonialQuote,testimonialImage:v.testimonialImage,testimonialName:v.testimonialName,testimonialBusiness:v.testimonialBusiness,tracking:v.tracking,key:"recommended-plan-config-"+g})))},C=l(897);var S=e=>{var t;let{blok:l,mobileGridOrder:i}=e,o=0,s=3e5;l.plans.forEach((e=>{var t,l;const a=null!==(t=e.minSliderRange)&&void 0!==t?t:0,n=null!==(l=e.maxSliderRange)&&void 0!==l?l:3e5;o=Math.min(o,a),s=Math.max(s,n)}));const m=l.plans.filter((e=>{var t;return null===(t=e.planConfig)||void 0===t?void 0:t.content})).map((e=>{var t,l,a,n,i,o;return{planConfig:e.planConfig.content,ctaText:null!==(t=e.ctaText)&&void 0!==t?t:"Learn more",ctaLink:(0,C.RO)(e.ctaLink),ctaColor:e.ctaColor,testimonialTitle:e.testimonialTitle,testimonialQuote:e.testimonialQuote,testimonialImage:e.testimonialImage,testimonialName:e.testimonialName,testimonialBusiness:e.testimonialBusiness,minSliderRange:Number(null!==(l=e.minSliderRange)&&void 0!==l?l:0),maxSliderRange:Number(null!==(a=e.maxSliderRange)&&void 0!==a?a:s),tracking:e.trackingEvent&&{event:null===(n=e.trackingEvent[0])||void 0===n?void 0:n.event,eventKey:null===(i=e.trackingEvent[0])||void 0===i?void 0:i.eventKey,eventValue:null===(o=e.trackingEvent[0])||void 0===o?void 0:o.selectedPlan}}}));return r.createElement(z,Object.assign({mobileGridOrder:i,sliderTitle:l.title,sliderDescription:l.description,sliderMinRange:o,sliderMaxRange:s,sliderInitialValue:l.sliderInitialValue,sliderBackgroundColor:null!==(t=l.backgroundColor)&&void 0!==t?t:n.Q.White,recommendedPlanConfigs:m},(0,a.K1)(l)))}},59351:function(e,t,l){var a=l(98587),n=l(46942),i=l.n(n),o=l(96706),r=l(98375),s=l(93971),m=l(80542),d=l(3409),c=l(22149),u=l(99798),g=l(96540);const b=["planConfig","ctaText","ctaLink","ctaColor","mobileGridOrder","testimonialTitle","testimonialQuote","testimonialImage","testimonialName","testimonialBusiness","tracking"];t.A=e=>{var t,l,n;let{planConfig:f,ctaText:p,ctaLink:x,ctaColor:h=o.Q.Blue,mobileGridOrder:v,testimonialTitle:k,testimonialQuote:E,testimonialImage:w,testimonialName:y,testimonialBusiness:A,tracking:N}=e,z=(0,a.A)(e,b);const C=o.Q.Charcoal,S=Boolean(k||E||y||A||(null==w?void 0:w.filename));return g.createElement(c.A,{mobileGridOrder:v,as:"div",animateOnScroll:!0,className:"col-span-full flex w-full max-w-[390px] flex-col gap-12 self-start justify-self-end sm:col-span-2 md:col-span-2 lg:col-span-4",ke

1y:z.key},g.createElement("div",{className:i()((0,u.e$)(o.Q.White),"flex flex-col gap-16 rounded-20 border p-[30px] shadow-[0px_10px_20px_0px_rgba(0,0,0,0.1)]",(0,u.iY)(o.Q.Blue))},g.createElement("div",{className:"flex items-start justify-between gap-12"},g.createElement("div",{className:"flex items-center gap-12"},(null===(t=f.icon)||void 0===t?void 0:t.filename)&&g.createElement(m.A,{width:24,height:24,loadType:"eager",image:f.icon.filename,alt:f.icon.alt||f.title,className:"h-24 w-24 shrink-0"}),g.createElement(d.A,{element:"h3",size:"lead-md-fixed",font:"grotesk",weight:"medium",text:f.title,color:C})),(null===(l=f.badge)||void 0===l||null===(n=l[0])||void 0===n?void 0:n.text)&&g.createElement(r.A,{style:"solid",text:f.badge[0].text,highlightedText:f.badge[0].highlightedText,uppercaseText:!1,textColor:f.badge[0].textColor||o.Q.White,accentColor:f.badge[0].color||o.Q.Orange,className:"shrink-0 !px-12"})),g.createElement("div",{className:"flex flex-col items-start space-y-4"},f.descriptionTitle&&g.createElement(d.A,{size:"body-md",font:"grotesk",weight:"medium",color:C,text:f.descriptionTitle}),g.createElement(d.A,{size:"body-sm-fixed",font:"grotesk",weight:"book",text:f.description,color:C})),g.createElement("div",{className:"mt-16 flex w-full items-baseline justify-between gap-4"},f.monthlyCost&&g.createElement("div",{className:"flex flex-col"},g.createElement("div",{className:"flex items-baseline gap-4"},g.createElement(d.A,{size:"lead-lg",font:"grotesk",weight:"medium",text:f.monthlyCost,color:C}),g.createElement(d.A,{size:"body-md",font:"grotesk",weight:"book",text:"/mo",color:C})),f.priceSubscript&&g.createElement(d.A,{size:"subscript-sm",font:"grotesk",weight:"book",text:f.priceSubscript,color:C,className:"opacity-60"})),f.fromAmount&&g.createElement("div",{className:"pb-8 text-right"},g.createElement("div",{className:"flex items-baseline justify-end gap-2"},g.createElement(d.A,{size:"body-sm",font:"grotesk",weight:"book",color:C,text:"From"}),g.createElement(d.A,{size:"lead-sm",font:"grotesk",weight:"medium",color:C,text:f.fromAmount,className:"text-nowrap"})),g.createElement(d.A,{size:"subscript-sm",font:"grotesk",weight:"book",color:C,text:"In-person local debit cards",className:"opacity-80"}))),g.createElement(s.A,{size:"large",style:"solid",text:p,linkUrl:x||"/",color:h,trackingEvent:null==N?void 0:N.event,trackingEventKey:null==N?void 0:N.eventKey,trackingEventValue:null==N?void 0:N.eventValue,fontSize:"body-lg-fixed",className:"mt-16 !w-full"})),S&&g.createElement("div",{className:i()((0,u.e$)(o.Q.White),"flex flex-col gap-20 rounded-20 border p-[30px]",(0,u.iY)(o.Q.Gray))},g.createElement("div",{className:"flex flex-col gap-8"},k&&g.createElement(d.A,{size:"body-sm",font:"grotesk",weight:"book",text:k,color:o.Q.Charcoal,className:"opacity-60"}),E&&g.createElement(d.A,{size:"lead-sm",font:"grotesk",weight:"book",text:'"'+E+'"',color:o.Q.Charcoal})),(y||A||(null==w?void 0:w.filename))&&g.createElement("div",{className:"flex items-center gap-12"},(null==w?void 0:w.filename)&&g.createElement(m.A,{aspectRatio:"1:1",width:44,height:44,rounded:!0,image:w.filename,alt:w.alt||y||"",className:"h-[44px] w-[44px] shrink-0 rounded-full"}),g.createElement("div",{className:"flex flex-col"},y&&g.createElement(d.A,{size:"body-md",font:"grotesk",weight:"medium",text:y,color:o.Q.Charcoal}),A&&g.createElement(d.A,{size:"body-md",font:"grotesk",weight:"book",text:A,color:o.Q.Charcoal,className:"opacity-50"})))))}}}]);
2//# sourceMappingURL=components-StoryBlok-V2-Card-Plans-CalculatorRecommended-b474fa6fc56689eaa4b6.js.map