https://www.quelle.de/assets/turbo/60feea67/quellede/_next/static/…/InstallmentCalculator.7bf9039b3f4ed8c2.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1204],{10476:(e,a,n)=>{n.d(a,{S:()=>s});var l=n(54568),t=n(51445),i=n(75808);let s=({error:e,errorMessage:a,checked:n,disabled:s,className:r,containerClassName:d,children:c,ref:o,...u})=>(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)("div",{className:(0,t.cn)("flex items-center",d),children:[(0,l.jsxs)("div",{className:"relative flex h-4 w-4 items-center",children:[(0,l.jsx)("input",{ref:o,type:"checkbox",checked:n,disabled:s,className:(0,t.cn)("peer border-color-grey-dark focus-visible:standard-focus-outline m-1 h-2 w-2 shrink-0 appearance-none rounded-sm border disabled:opacity-35",e&&"border-color-error checkbox-error",r),...u}),(0,l.jsx)("span",{className:`pointer-events-none absolute inset-0 flex h-4 w-4 items-center justify-center opacity-0 peer-checked:opacity-100 ${s?"text-color-grey":""}`,"aria-hidden":"true",children:(0,l.jsx)("span",{className:"icon-emp-checkmark h-2 w-2"})})]}),c&&(0,l.jsx)("div",{className:s?"opacity-35":"",children:c})]}),e&&a&&(0,l.jsx)(i.Notification,{severity:"error",variant:"feedback",className:"mt-0.5",children:a})]})},13160:(e,a,n)=>{n.d(a,{X:()=>i});var l=n(7620),t=n(58009);function i(e){let[a,n]=l.useState(void 0);return(0,t.N)(()=>{if(e){n({width:e.offsetWidth,height:e.offsetHeight});let a=new ResizeObserver(a=>{let l,t;if(!Array.isArray(a)||!a.length)return;let i=a[0];if("borderBoxSize"in i){let e=i.borderBoxSize,a=Array.isArray(e)?e[0]:e;l=a.inlineSize,t=a.blockSize}else l=e.offsetWidth,t=e.offsetHeight;n({width:l,height:t})});return a.observe(e,{box:"border-box"}),()=>a.unobserve(e)}n(void 0)},[e]),a}},20679:(e,a,n)=>{n.d(a,{Z:()=>t});var l=n(33488);let t=e=>{let{formatPrice:a}=(0,l.A)();return(n,l)=>a(((e,a)=>{switch(a){case"APLUS":case"INSTALLMENTCALCULATOR":return Math.round(100*e);default:return e}})(n,e),l)}},22191:(e,a,n)=>{let l;n.r(a),n.d(a,{InstallmentCalculator:()=>K});var t=n(54568);let i={kind:"Document",definitions:[{kind:"OperationDefinition",operation:"query",name:{kind:"Name",value:"InstallmentData"},variableDefinitions:[{kind:"VariableDefinition",variable:{kind:"Variable",name:{kind:"Name",value:"basevalue"}},type:{kind:"NonNullType",type:{kind:"NamedType",name:{kind:"Name",value:"Float"}}}},{kind:"VariableDefinition",variable:{kind:"Variable",name:{kind:"Name",value:"paymentpause"}},type:{kind:"NamedType",name:{kind:"Name",value:"Boolean"}}}

1,{kind:"VariableDefinition",variable:{kind:"Variable",name:{kind:"Name",value:"source"}},type:{kind:"NamedType",name:{kind:"Name",value:"String"}}},{kind:"VariableDefinition",variable:{kind:"Variable",name:{kind:"Name",value:"installments"}},type:{kind:"NamedType",name:{kind:"Name",value:"Int"}}}],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"installment"},arguments:[{kind:"Argument",name:{kind:"Name",value:"basevalue"},value:{kind:"Variable",name:{kind:"Name",value:"basevalue"}}},{kind:"Argument",name:{kind:"Name",value:"paymentpause"},value:{kind:"Variable",name:{kind:"Name",value:"paymentpause"}}},{kind:"Argument",name:{kind:"Name",value:"source"},value:{kind:"Variable",name:{kind:"Name",value:"source"}}},{kind:"Argument",name:{kind:"Name",value:"installments"},value:{kind:"Variable",name:{kind:"Name",value:"installments"}}}],selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"customerType"}},{kind:"Field",name:{kind:"Name",value:"source"}},{kind:"Field",name:{kind:"Name",value:"currency"}},{kind:"Field",name:{kind:"Name",value:"valuta"}},{kind:"Field",name:{kind:"Name",value:"numberOfInstallments"}},{kind:"Field",name:{kind:"Name",value:"numberOfRegularInstallments"}},{kind:"Field",name:{kind:"Name",value:"paymentPause"}},{kind:"Field",name:{kind:"Name",value:"installmentSurcharge"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"overallPrice"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"firstInstallment"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"singleInstallment"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"yearlyInterestFactor"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"lastInstallment"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"fixedMonthlyInterestFactor"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"theoreticalInstallmentCount"}},{kind:"Field",name:{kind:"Name",value:"error"}},{kind:"Field",name:{kind:"Name",value:"viableInstallments"}},{kind:"Field",name:{kind:"Name",value:"paymentPauseSurcharge"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"monthlyInterestRateFactor"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"yearlyInterestRateFactor"},selectionSet:{kind:"SelectionSet",selections:[{kind:"Field",name:{kind:"Name",value:"value"}},{kind:"Field",name:{kind:"Name",value:"format"}}]}},{kind:"Field",name:{kind:"Name",value:"supportsPaymentPause"}},{kind:"Field",name:{kind:"Name",value:"supportsInstallmentSelection"}},{kind:"Field",name:{kind:"Name",value:"type"}},{kind:"Field",name:{kind:"Name",value:"minValue"}},{kind:"Field",name:{kind:"Name",value:"maxValue"}},{kind:"Field",name:{kind:"Name",value:"displayOrder"}}]}}]}}]};var s=n(30720),r=n(17008),d=n(7620),c=n(64260),o=n(85958),u=n(38748),m=n(23912),h=n(81610),x=n(57824);let v=({value:e,active:a,onClickHandler:n})=>{let{trackInstallmentValueTileClick:l}=(0,x.S)();return(0,t.jsx)(h.Button,{className:"flex size-5.5 items-center justify-center",color:a?"primary":void 0,onClick:()=>{l(e),a||n(e)},children:(0,t.jsx)("span",{className:"text-size-body-base break-normal",children:e})})},f=({installmentsList:e,activeInstallment:a,installmentSelectedHandler:n})=>{let{formatMessage:l}=(0,o.A)();return(0,t.jsxs)("div",{children:[(0,t.jsx)("p",{className:"text-size-body-base mb-0.5",children:l({

1id:"ic-atom-InstallmentValueTilesContainer-headline",defaultMessage:"W\xe4hle die gew\xfcnschten Raten"})}),(0,t.jsx)("div",{className:"flex flex-row flex-wrap gap-1",children:e.map(e=>(0,t.jsx)(v,{value:e,active:e===a,onClickHandler:n},e))})]})};var p=n(10476),k=n(30120);let b=({checked:e,checkHandler:a})=>{let{formatMessage:n}=(0,o.A)(),{company:{name:l}}=(0,s.U)(),i=(0,d.useId)(),{trackPaymentPauseClick:r}=(0,x.S)();return(0,t.jsx)(p.S,{id:i,checked:e,onChange:e=>{r(e.target.checked),a(e.target.checked)},children:(0,t.jsx)(k.J,{htmlFor:i,children:n({id:"ic-atom-PaymentPause-label",defaultMessage:"Ich m\xf6chte die {brand}-Zahlpause nutzen & zahle erst in 4 Monaten<hint>*</hint>"},{hint:e=>(0,t.jsx)("span",{children:e}),brand:l})})})},g=({paymentPauseValuta:e})=>{let{formatMessage:a}=(0,o.A)();return(0,t.jsxs)("div",{className:"text-size-body-xs grid grid-cols-[auto_auto] gap-x-2 gap-y-1 lg:gap-x-1.5",children:[null!==e&&e>0&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{children:"*"}),(0,t.jsx)("div",{children:a({id:"ic-atom-LegalHints-paymentPauseSurcharge",defaultMessage:"F\xfcr die Zahlpause (erst in 4 Monaten bezahlen) wird ein zus\xe4tzlicher Aufschlag von {paymentPauseValuta}% auf den Warenwert berechnet."},{paymentPauseValuta:e})})]}),(0,t.jsx)("div",{children:"**"}),(0,t.jsx)("div",{children:a({id:"ic-atom-LegalHints-basketHint",defaultMessage:"Bitte beachte, dass die Raten ohne Versandkosten und Speditionsaufschl\xe4ge ausgewiesen sind. Deine Aufschl\xe4ge kannst du im Warenkorb unter Pr\xfcfen & Bestellen einsehen."})})]})};var N=n(25599);let j=(0,N.YK)({basePrice:{id:"ic-calculator-basePrice",defaultMessage:"Preis"},firstInstallment:{id:"ic-calculator-firstInstallment",defaultMessage:"erste Rate"},fixedMonthlyInterestFactor:{id:"ic-calculator-fixedMonthlyInterestFactor",defaultMessage:"Fixer Sollzinssatz pro Monat"},installmentSurcharge:{id:"ic-calculator-installmentSurcharge",defaultMessage:"Ratenaufschlag**"},lastInstallment:{id:"ic-calculator-lastInstallment",defaultMessage:"Letzte Rate"},monthlyInstallment:{id:"ic-calculator-monthlyInstallment",defaultMessage:"Monatliche Rate"},monthlyInterestRateFactor:{id:"ic-calculator-monthlyInterestRateFactor",defaultMessage:"Ratenaufschlag pro Monat**"},overallPrice:{id:"ic-calculator-overallPrice",defaultMessage:"Dein Ratenkaufpreis"},paymentPauseSurcharge:{id:"ic-calculator-paymentPauseSurcharge",defaultMessage:"Zinsaufschlag f\xfcr Zahlpause"},singleInstallment:{id:"ic-calculator-singleInstallment",defaultMessage:"{numberOfRegularInstallments} Folgeraten je"},yearlyInterestRateFactor:{id:"ic-calculator-yearlyInterestRateFactor",defaultMessage:"Effektiver Jahreszins"}});var y=n(20679);let S=({currency:e,installmentValue:a,variation:n,...l})=>{let i=(0,y.Z)("INSTALLMENTCALCULATOR")(a,e);switch(n){case"PaymentPlanRow":return(0,t.jsx)("div",{...l,className:"text-size-body-sm text-nowrap",children:i});case"CalculationBasis":return(0,t.jsx)("div",{...l,className:"text-size-body-base text-nowrap",children:i});default:return(0,t.jsx)("div",{...l,className:"text-size-headline-4xl text-nowrap",children:i})}},F=(l=!0,function({current:e,max:a,min:n,step:t}){return l&&e+t<=a||e-t<n?(l=!0,e+t):(l=!1,e-t)}),w=({currency:e,installmentValue:a,isLoading:n})=>{let[l,i]=(0,d.useState)(a),s=(0,d.useRef)({max:0,min:0,step:0});return(0,d.useEffect)(()=>{let e;s.current={max:parseInt("9".repeat(Math.trunc(a).toString().length),10),min:(e="0".repeat(Math.trunc(a).toString().length-1),parseInt(`1${e}`,10)),step:Math.round(.05*Math.trunc(a))},i(a)},[a]),(0,d.useEffect)(()=>{let e;return n?e=window.setTimeout(()=>{i(F({current:l,...s.current}))},50):(i(a),window.clearTimeout(e)),()=>window.clearTimeout(e)},[a,n,i,l]),(0,t.jsx)(S,{installmentValue:l,currency:e})};var I=n(75808);let M=({calculationValuta:e,currency:a,onChangeHandler:n,minValue:l,maxValue:i})=>{let{formatMessage:s}=(0,o.A)(),r=(0,y.Z)("INSTALLMENTCALCULATOR"),[c,u]=(0,d.useState)("DISPLAY"),[m,h]=(0,d.useState)(null),x=(0,d.useRef)(null);(0,d.useEffect)(()=>{x.current&&"EDIT"===c&&(x.current.focus(),x.current.select())},[c,x]),(0,d.useEffect)(()=>{let e;return null!==m&&(e=setTimeout(()=>{h(null),clearTimeout(e)},1e4)),()=>clearTimeout(e)},[m,h]);let v=()=>{if(x.current){let e=(e=>{if(""===e)return 0;let a=e.replace(/[^0-9.,]+/g,"");if(""===a)return 0;let n=a.replace(/[,]/g,".");if("."===n)return 0;let l=n.replace(/[.](?=.*[.])/g,"");if(l.match(/[.]/g)){let[e,a]=l.split(".");return 0===a.length?parseFloat(e):parseFloat(`${e}.${a.substring(0,2)}`)}return parseFloat(l)})(x.current.value);e<l?(e=l,h(s({defaultMessage:"Der Preis wurde automatisch f\xfcr dich angepasst. Der Minimalbetrag muss {minValue} betragen.",id:"ic-editableBasePrice-notification-min"},{minValue:r(l,a)}))):i>0&&e>i&&(e=i,h(s({defaultMessage:"Der g\xfcltige Wertebereich f\xfcr eine Ratenberechnung liegt zwischen {minValue} und {maxValue}. Der Preis wurde automatisch f\xfcr dich angepasst.",id:"ic-editableBasePrice-notification-minMax"},{minValue:r(l,a),maxValue:r(i,a)}))),x.current.value=r(e,a),u("DISPLAY"),n(e)}};return(0,t.jsxs)("div",{children:[null!==m&&(0,t.jsx)(I.Notification,{severity:"error",onClose:()=>h(null),children:m}),(0,t.jsxs)("div",{className:`relative mx-auto max-w-[11rem] px-[20px] py-1 ${"DISPLAY"===c?"bg-transparent":"bg-color-background-base"}`,children:[(0,t.jsx)("input",{defaultValue:r(e,a),className:"text-size-headline-xl block w-full border-0 bg-transparent text-center outline-0",disabled:"DISPLAY"===c,ref:x,onBlur:v,onKeyUp:e=>"Enter"===e.key&&e.currentTarget.blur()}),(0,t.jsx)("div",{className:"absolute top-1/2 right-0 size-[20px] -translate-y-1/2 cursor-pointer",children:"DISPLAY"===c?(0,t.jsx)("button",{type:"button",className:"size-full",onClick:()=>{u("EDIT")},"aria-label":`${s(j.basePrice)} ${s({id:"ic-editableBasePrice-button-edit-aria-label",defaultMessage:"bearbeiten"})}`,children:(0,t.jsx)("span",{className:"icon-emp-edit size-full"})},c):(0,t.jsx)("button",{type:"button",className:"size-full",onClick:v,"aria-label":`${s(j.basePrice)} ${s({id:"ic-editableBasePrice-button-confirm-aria-label",defaultMessage:"best\xe4tigen"})}`,children:(0,t.jsx)("span",{className:"icon-emp-enter-confirm-submit size-full"})},c)})]})]})},P=({currency:e,calculationValuta:a,singleInstallment:n,minValue:l,maxValue:i,isLoading:s,hasEditablePrice:r,onChangeBasePriceValue:d})=>{let{formatMessage:c}=(0,o.A)();return(0,t.jsxs)("div",{className:"bg-color-grey-light flex flex-col items-center p-1.5 pb-2",children:[(0,t.jsx)("div",{className:"text-size-body-base",children:c(j.basePrice)}),r?(0,t.jsx)(M,{calculationValuta:a,currency:e,onChangeHandler:d,minValue:l,maxValue:i}):(0,t.jsx)(S,{currency:e,installmentValue:a,variation:"CalculationBasis"}),n&&n.value&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"text-size-body-base mt-1.5 mb-0.5",children:c(j.monthlyInstallment)}),(0,t.jsx)(w,{currency:e,installmentValue:n.value,isLoading:s})]})]})},V=({asBox:e=!1,calculationResult:a})=>{let{formatMessage:n,formatNumber:l}=(0,o.A)(),i=[];

1return a.displayOrder.forEach(e=>{let n=a[e];null!==n&&"object"==typeof n&&"value"in n&&i.push({key:e,value:n})}),(0,t.jsx)("div",{className:`divide-color-grey-light divide-y ${e?"border-color-grey rounded-sm border p-1.5":"border-color-grey-light border-t pt-1"}`,children:i.map(({key:e,value:{value:s,format:r}},d)=>(0,t.jsxs)("div",{className:`flex flex-row flex-nowrap justify-between gap-2 p-1 first:pt-0 last:pb-0 ${"overallPrice"===e&&d===i.length-1?"font-bold":""}`,children:[(0,t.jsx)("div",{className:"text-size-body-sm",children:n(j[e],"singleInstallment"===e?{numberOfRegularInstallments:a.numberOfRegularInstallments}:void 0)}),(0,t.jsx)("div",{className:"text-size-body-sm text-nowrap",children:"PERCENTAGE"===r?l(s/100,{style:"percent",minimumFractionDigits:2,maximumFractionDigits:2}):(0,t.jsx)(S,{variation:"PaymentPlanRow",installmentValue:s,currency:a.currency})})]},d))})};function C(e,a,n,l){let t=(l-90)*Math.PI/180;return{x:e+n*Math.cos(t),y:a+n*Math.sin(t)}}let A=({value:e,min:a,max:n,size:l=180,onChange:i})=>{let{installmentCalculator:{hasSpecialCreditColors:r}}=(0,s.U)(),c=a=>+Math.round((a||e)/1),o=()=>{let e=360;return a<n&&(e=Math.round((c()-a)/(n-a)*360)),360===e?e-.1:e%360},u=(0,d.useRef)(void 0),m=(0,d.useRef)(void 0),h=e=>{if(a===n)return;let l=u.current.getBoundingClientRect(),t=l.width/2,s=e.clientX-l.left-t,r=e.clientY-l.top-t,d=Math.round(180*Math.atan2(r,s)/Math.PI)+90;s<0&&r<0&&(d+=360),r<0?m.current<0&&s>0?d=359.9:m.current>0&&s<0?d=.1:m.current=s:m.current=s,i(c(d/(360/(n-a)))+a)},x=e=>{e.preventDefault(),h(e)},v=e=>{e.preventDefault(),u.current.removeEventListener("mousemove",x),u.current.removeEventListener("mouseup",v)},f=e=>{let{targetTouches:a}=e,n=a[a.length-1];n&&h(n)},p=()=>{u.current.removeEventListener("touchmove",f),u.current.removeEventListener("touchend",p)},k=l/2,b=k-8-10,g=function({cx:e,cy:a,radius:n,startAngle:l,endAngle:t,thickness:i}){let s=C(e,a,n,t),r=C(e,a,n,l),d=t-l<=180?"0":"1",c=n-i,o=C(e,a,c,t),u=C(e,a,c,l);return["M",s.x,s.y,"A",n,n,"0",d,"0",r.x,r.y,"L",e,a,"Z M",o.x,o.y,"A",c,c,"0",d,"0",u.x,u.y,"L",e,a,"Z"].join(" ")}({cx:k,cy:k,radius:b+2,startAngle:0,endAngle:o(),thickness:4}),N=C(k,k,b,o());return(0,t.jsxs)("svg",{ref:u,height:l,width:l,viewBox:`0 0 ${l} ${l}`,onMouseDown:e=>{e.preventDefault(),u.current.addEventListener("mousemove",x),u.current.addEventListener("mouseup",v)},onTouchStart:()=>{u.current.addEventListener("touchmove",f),u.current.addEventListener("touchend",p)},style:{boxSizing:"border-box",touchAction:"none"},className:r?"text-color-additional":"text-color-primary",children:[(0,t.jsx)("circle",{style:{fill:"none",stroke:"currentcolor",strokeWidth:4,opacity:.38},r:b,cx:k,cy:k}),(0,t.jsx)("path",{style:{fill:"currentcolor",fillRule:"evenodd",stroke:"none"},d:g}),(0,t.jsxs)("filter",{id:"dropShadow",filterUnits:"userSpaceOnUse",children:[(0,t.jsx)("feGaussianBlur",{in:"SourceAlpha",stdDeviation:"3"}),(0,t.jsx)("feOffset",{dx:"2",dy:"2"}),(0,t.jsx)("feComponentTransfer",{children:(0,t.jsx)("feFuncA",{type:"linear",slope:"0.3"})}),(0,t.jsxs)("feMerge",{children:[(0,t.jsx)("feMergeNode",{}),(0,t.jsx)("feMergeNode",{in:"SourceGraphic"})]})]}),(0,t.jsx)("circle",{style:{cursor:a===n?"default":"pointer",fill:"currentcolor"},filter:"url(#dropShadow)",r:8,cx:N.x,cy:N.y})]})},z=({selectedInstallment:e,unit:a})=>(0,t.jsxs)("div",{className:"flex flex-col items-center",children:[(0,t.jsx)("div",{className:"text-size-headline-xl mb-0.5",children:a}),(0,t.jsx)("h1",{className:"text-size-headline-4xl",children:e})]}),L=(0,N.YK)({Month:{id:"ic-slider-month",defaultMessage:"{installment, plural, one {Monat} other {Monate}}"}}),R=({viableInstallments:e,numberOfInstallments:a,installmentSelectedHandler:n})=>{let{formatMessage:l}=(0,o.A)(),[i,s]=(0,d.useState)(a),{trackSliderClick:r}=(0,x.S)();return(0,d.useEffect)(()=>{s(a)},[a]),(0,d.useEffect)(()=>{let e;return a!==i&&(e=setTimeout(()=>{n(i),r(i.toString())},500)),()=>clearTimeout(e)},[n,i,a,r]),(0,t.jsxs)("div",{className:"relative mx-auto",style:{width:"212px"},children:[(0,t.jsx)("div",{className:"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",children:(0,t.jsx)(z,{selectedInstallment:i,unit:l(L.Month,{installment:i})})}),(0,t.jsx)(A,{value:i,min:e[0],max:e[e.length-1],size:212,onChange:e=>{s(e)}})]})};var T=n(33236);let E=({viableInstallments:e,numberOfInstallments:a,installmentSelectedHandler:n})=>{let{formatMessage:l}

1=(0,o.A)(),{installmentCalculator:{hasSpecialCreditColors:i}}=(0,s.U)(),[r,c]=(0,d.useState)(a),{trackSliderClick:u}=(0,x.S)();(0,d.useEffect)(()=>{c(a)},[a]);let m=e[0],h=e[e.length-1];return(0,t.jsxs)("div",{children:[(0,t.jsx)("div",{className:"mb-1.5",children:(0,t.jsx)(z,{unit:l(L.Month,{installment:r}),selectedInstallment:r})}),(0,t.jsx)(T.A,{value:[r],min:m,max:h,onValueChange:e=>c(e[0]),onValueCommit:e=>{n(e[0]),u(e.toString())},color:i?"additional":"primary"}),(0,t.jsxs)("div",{className:"mt-1 flex flex-nowrap justify-between",children:[(0,t.jsx)("span",{children:`${m} ${l(L.Month,{installment:m})}`}),(0,t.jsx)("span",{children:`${h} ${l(L.Month,{installment:h})}`})]})]})},D=e=>(0,r.$)()?(0,t.jsx)(E,{...e}):(0,t.jsx)(R,{...e}),$=()=>{let{formatMessage:e}=(0,o.A)(),[a,n]=d.useState(!1),{trackGlycerinImageClick:l}=(0,x.S)();return a?(0,t.jsx)(I.Notification,{severity:"info",onClose:()=>{n(!1)},children:e({id:"ic-infoCallToAction-infotext",defaultMessage:"Die Ratenh\xf6he und die Laufzeit liegen in deinen H\xe4nden. Durch einfaches Anpassen der Laufzeit findest du deine pers\xf6nliche Wunschrate."})}):(0,t.jsx)(h.Button,{variant:"icon-flat",className:"rounded-full",onClick:()=>{l(),n(!0)},children:(0,t.jsx)("span",{className:"text-color-info icon-emp-info-filled size-2.5"})})};var B=n(82175);let H=()=>{let{formatMessage:e}=(0,o.A)(),{installmentCalculator:{legalHintsImage:a}}=(0,s.U)();return null===a?null:(0,t.jsx)("div",{className:"border border-[#000]",children:(0,t.jsx)(B.default,{src:a.src,width:a.width,height:a.height,alt:e({id:"legalHintsImage.alt",defaultMessage:"Let op! Geld lenen kost geld"}),unoptimized:!0})})},O=({calculationResult:e,calculationValuta:a,isLoading:n,paymentPlanCollapsed:l=!0,hasEditablePrice:i,onChangeInstallmentValue:r,onChangePaymentPauseValue:c,onChangeBasePriceValue:h})=>{let{currency:x,singleInstallment:v,viableInstallments:p,numberOfInstallments:k,paymentPause:N,valuta:j,supportsPaymentPause:y,type:S,minValue:F,maxValue:w}=e,{installmentCalculator:{hasLegalHints:I,legalHintsImage:M,hasInfoCallToAction:C}}=(0,s.U)(),{formatMessage:A}=(0,o.A)(),[z,L]=(0,d.useState)(!l);return(0,d.useEffect)(()=>{L(!l)},[l]),(0,t.jsxs)("div",{className:"mt-0 mb-4 flex flex-col flex-wrap gap-1.5 p-2",children:[(0,t.jsx)(P,{currency:x,calculationValuta:a,singleInstallment:v,isLoading:n,hasEditablePrice:i,onChangeBasePriceValue:h,minValue:F,maxValue:w}),C&&(0,t.jsx)($,{}),"FIX"===S&&p?(0,t.jsx)(f,{installmentsList:p,activeInstallment:k,installmentSelectedHandler:r}):(0,t.jsx)(D,{viableInstallments:p,numberOfInstallments:k,installmentSelectedHandler:r}),(0,t.jsxs)(m.Nt,{open:z,onOpenChange:e=>{L(e)},children:[(0,t.jsxs)(m.Ke,{children:[y&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(u.c,{className:"mt-3 mb-1.5"}),(0,t.jsx)("div",{className:"mb-1",children:(0,t.jsx)(b,{checked:N,checkHandler:c})})]}),(0,t.jsx)(V,{asBox:!1,calculationResult:e}),I&&(0,t.jsx)("div",{className:"mt-3",children:(0,t.jsx)(g,{paymentPauseValuta:j})})]}),(0,t.jsx)(u.c,{className:"-mx-2"}),(0,t.jsxs)(m.R6,{className:"flex cursor-pointer flex-row flex-nowrap items-center py-2",children:[(0,t.jsx)("span",{className:"text-size-body-sm",children:A(z?{id:"ic-collapsible-minimize",defaultMessage:"Ratenrechner minimieren"}:{id:"ic-collapsible-maximize",defaultMessage:"Ratenrechner anzeigen"})}),(0,t.jsx)("span",{className:`icon-emp-arrow-medium-down bg-color-grey-dark h-4 w-4 ${z?"rotate-180":""}`})]})]}),null!==M&&(0,t.jsx)(H,{})]})},U=({calculationResult:e,calculationValuta:a,isLoading:n,hasEditablePrice:l,onChangeInstallmentValue:i,onChangePaymentPauseValue:r,onChangeBasePriceValue:d})=>{let{currency:c,singleInstallment:o,viableInstallments:m,numberOfInstallments:h,paymentPause:x,valuta:v,supportsPaymentPause:p,type:k,minValue:N,maxValue:j}=e,{installmentCalculator:{hasLegalHints:y,legalHintsImage:S,hasInfoCallToAction:F}}=(0,s.U)();return(0,t.jsxs)("div",{className:"flex flex-col gap-1.5",children:[(0,t.jsxs)("div",{className:"mt-2 mb-4 flex flex-row flex-nowrap gap-5.5 px-2",children:[(0,t.jsxs)("div",{className:"shrink grow-0 basis-1/2",children:[(0,t.jsx)(P,{currency:c,calculationValuta:a,singleInstallment:o,isLoading:n,hasEditablePrice:l,onChangeBasePriceValue:d,minValue:N,maxValue:j}),(0,t.jsxs)("div",{className:"pt-1.5",children:[F&&(0,t.jsx)($,{}),"FIX"===k&&m?(0,t.jsx)(f,{installmentsList:m,activeInstallment:h,installmentSelectedHandler:i}):(0,t.jsx)(D,{viableInstallments:m,numberOfInstallments:h,installmentSelectedHandler:i}),(0,t.jsx)(u.c,{className:"mt-3 mb-1.5"}),p&&(0,t.jsx)(b,{checked:x,checkHandler:r})]})]}),(0,t.jsxs)("div",{className:"shrink grow-0 basis-1/2",children:[(0,t.jsx)(V,{asBox:!0,calculationResult:e}),y&&(0,t.jsx)("div",{className:"mt-3",children:(0,t.jsx)(g,{paymentPauseValuta:v})})]})]}),null!==S&&(0,t.jsx)(H,{})]})},Z=({calculationResult:e,calculationValuta:a,isLoading:n,hasEditablePrice:l,onChangeInstallmentValue:i,onChangePaymentPauseValue:r,onChangeBasePriceValue:d})=>{let{currency:c,singleInstallment:o,viableInstallments:m,numberOfInstallments:h,paymentPause:x,valuta:v,supportsPaymentPause:p,type:k,minValue:N,maxValue:j}=e,{installmentCalculator:{hasLegalHints:y,legalHintsImage:S,hasInfoCallToAction:F}}=(0,s.U)();return(0,t.jsxs)("div",{className:"mt-0 mb-4 flex flex-col flex-wrap gap-1.5",children:[(0,t.jsxs)("div",{className:"mx-0",children:[(0,t.jsx)(P,{currency:c,calculationValuta:a,singleInstallment:o,isLoading:n,hasEditablePrice:l,onChangeBasePriceValue:d,minValue:N,maxValue:j}),(0,t.jsxs)("div",{className:"px-1.5 pt-1.5",children:[F&&(0,t.jsx)($,{}),"FIX"===k&&m?(0,t.jsx)(f,{installmentsList:m,activeInstallment:h,installmentSelectedHandler:i}):(0,t.jsx)(D,{viableInstallments:m,numberOfInstallments:h,installmentSelectedHandler:i}),(0,t.jsx)(u.c,{className:"mt-3 mb-1.5"}),p&&(0,t.jsx)(b,{checked:x,checkHandler:r})]})]}),(0,t.jsxs)("div",{className:"mx-2 flex flex-col gap-3",children:[(0,t.jsx)(V,{asBox:!1,calculationResult:e}),y&&(0,t.jsx)("div",{className:"mt-3",children:(0,t.jsx)(g,{paymentPauseValuta:v})})]}),null!==S&&(0,t.jsx)(H,{})]})};var W=n(70885),Y=n(94599);let K=({source:e="pdv",hasEditablePrice:a=!1,basePrice:n,...l})=>{let{installmentCalculator:{resetInstallmentsOnPriceChange:o}}=(0,s.U)(),[u,m]=(0,d.useState)({basevalue:n,paymentpause:!1,installments:null}),[{data:h,error:x,fetching:v}]=(0,c.IT)({query:i,variables:{source:e,...u},context:(0,d.useMemo)(()=>({suspense:!1}),[])}),f=(0,r.$)();if(x||h?.installment?.error)return(0,t.jsx)(W.i,{});if(!h?.installment)return(0,t.jsx)(Y.a,{calculatorLayout:l.layout});let p={calculationResult:h.installment,calculationValuta:n/100,isLoading:v,hasEditablePrice:a,onChangeInstallmentValue:e=>m(a=>({...a,installments:e})),onChangePaymentPauseValue:e=>m(a=>({...a,paymentpause:e})),onChangeBasePriceValue:e=>m(a=>({...a,...o&&{installments:null},basevalue:Math.round(100*e)}))};return"Compact"!==l.layout&&("Columns"!==l.layout||f)?"Collapsible"===l.layout?(0,t.jsx)(O,{...p,paymentPlanCollapsed:l.collapsed}):(0,t.jsx)(U,{...p}):(0,t.jsx)(Z,{...p})}},23912:(e,a,n)=>{n.d(a,{Ke:()=>s,Nt:()=>t,R6:()=>i});var l=n(12803);let t=l.bL,{R6:i,Ke:s}=l},30120:(e,a,n)=>{n.d(a,{J:()=>i});var l=n(54568);n(7620);var t=n(51445);let i=({htmlFor:e,className:a,children:n,...i})=>(0,l.jsx)("label",{...i,htmlFor:e,className:(0,t.cn)("text-size-body-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-35",a),children:n})},33236:(e,a,n)=>{n.d(a,{A:()=>r});var l=n(54568),t=n(7620),i=n(94282),s=n(51445);let r=t.forwardRef(({className:e,...a},n)=>{let r=t.useId(),{defaultValue:d,value:c,disabled:o}=a;return(0,l.jsxs)(i.bL,{ref:n,className:(0,s.cn)(`group ${o?"slider-disabled":""} relative flex w-full touch-none items-center select-none`,e),...a,children:[(0,l.jsx)(i.CC,{className:"bg-color-grey relative h-0.5 w-full grow overflow-hidden rounded-full group-[.slider-disabled]:opacity-35",children:(0,l.jsx)(i.Q6,{className:"bg-color-primary absolute h-full"})}),c||d?(c||d)?.map((e,a)=>(0,l.jsx)(i.zi,{onPointerUp:e=>{e.currentTarget.blur()},asChild:!0,children:(0,l.jsx)("span",{className:"m-0.5 flex",children:(0,l.jsx)("span",{className:"focus-visible:shadow-sli

1der-thumb bg-color-primary block h-2 w-2 shrink-0 cursor-pointer rounded-full shadow-xs transition-colors group-[.slider-disabled]:opacity-35 group-[.slider-disabled]:shadow-none focus-visible:outline-hidden disabled:pointer-events-none disabled:cursor-default"})})},`${r}-${a}`)):(0,l.jsx)(i.zi,{onPointerUp:e=>e.currentTarget.blur(),asChild:!0,children:(0,l.jsx)("span",{className:"m-0.5 flex",children:(0,l.jsx)("span",{className:"focus-visible:shadow-slider-thumb bg-color-primary block h-2 w-2 shrink-0 cursor-pointer rounded-full shadow-xs transition-colors group-[.slider-disabled]:opacity-35 group-[.slider-disabled]:shadow-none focus-visible:outline-hidden disabled:pointer-events-none disabled:cursor-default"})})})]})});r.displayName=i.bL.displayName},38748:(e,a,n)=>{n.d(a,{c:()=>i});var l=n(54568);n(7620);var t=n(51445);let i=({className:e,flexItem:a=!1,orientation:n="horizontal",...i})=>(0,l.jsx)("hr",{className:(0,t.cn)(`border-color-separator border-solid ${a?"h-auto self-stretch":"h-full"} ${"vertical"===n?"m-0 shrink-0 border-r-[thin]":"border-t-0 border-r-0 border-b-[thin] border-l-0"}`,e),...i});i.displayName="Divider"},44748:(e,a,n)=>{n.d(a,{q:()=>l});function l(e,[a,n]){return Math.min(n,Math.max(a,e))}},89828:(e,a,n)=>{n.d(a,{Z:()=>t});var l=n(7620);function t(e){let a=l.useRef({value:e,previous:e});return l.useMemo(()=>(a.current.value!==e&&(a.current.previous=a.current.value,a.current.value=e),a.current.previous),[e])}}}]);
2//# sourceMappingURL=InstallmentCalculator.7bf9039b3f4ed8c2.js.map