https://www.which.co.uk/static/deliver/static/js/which-static-tool…ols-LoanToValueCalculator.868102fb.chunk.js

1"use strict";(this.__LOADABLE_LOADED_CHUNKS__=this.__LOADABLE_LOADED_CHUNKS__||[]).push([["which-static-tools-build-tools-LoanToValueCalculator"],{"../../node_modules/dom-helpers/esm/addClass.js"(e,t,o){function r(e,t){e.classList?e.classList.add(t):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}(e,t)||("string"==typeof e.className?e.className=e.className+" "+t:e.setAttribute("class",(e.className&&e.className.baseVal||"")+" "+t))}o.d(t,{A:()=>r})},"../../node_modules/dom-helpers/esm/removeClass.js"(e,t,o){function r(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}function l(e,t){e.classList?e.classList.remove(t):"string"==typeof e.className?e.className=r(e.className,t):e.setAttribute("class",r(e.className&&e.className.baseVal||"",t))}o.d(t,{A:()=>l})},"../static-tools/build/components/ControlledTextField/ControlledTextField.js"(e,t,o){o.d(t,{S:()=>s});var r=o("../../node_modules/react-hook-form/dist/index.esm.mjs"),l=o("../../node_modules/@which/seatbelt/src/index.ts"),a=o("../../node_modules/react/jsx-runtime.js");const n=["className","control","errorMsg","inputType","placeholder","label","name","required","showRequiredText","tooltip","validation"],s=e=>{let t=e.className,o=e.control,s=e.errorMsg,i=e.inputType,c=void 0===i?"text":i,u=e.placeholder,d=e.label,m=e.name,p=e.required,f=void 0===p||p,h=e.showRequiredText,y=void 0===h||h,b=e.tooltip,x=e.validation,g=function(e,t){if(null==e)return{};var o,r,l=function(e,t){if(null==e)return{};var o={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;o[r]=e[r]}return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)o=a[r],-1===t.indexOf(o)&&{}.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(e,n);const j="currency"===c?x||{required:f,pattern:/(?=.*?\d)(([1-9]\d{0,2}(,\d{3})*)|\d+)?(\.\d{1,2})?$/}:x||{required:f};return(0,a.jsx)(r.xI,{control:o,defaultValue:"",name:m,render:e=>{let o=e.field,r=o.onChange,n=o.onBlur,i=o.value,p=o.ref,h=e.fieldState.error;return(0,a.jsx)(l.zB,{className:t,label:d,labelFor:m,required:f,showRequiredText:y,tooltip:b,...h&&{errorMsg:s},children:"currency"===c?(0,a.jsx)(l.UG,{"aria-invalid":!!h,inputMode:"decimal",inputRef:p,name:m,onBlur:n,onChange:r,value:i,...g}):(0,a.jsx)(l.w_,{"aria-invalid":!!h,inputRef:p,name:m,onBlur:n,onChange:r,placeholder:u,type:c,value:i,...g})})},rules:j})}},"../static-tools/build/components/OnwardJourney/OnwardJourney.js"(e,t,o){o.d(t,{_:()=>p}),o("../../node_modules/react/index.js");var r=o("../../node_modules/@which/seatbelt/src/index.ts"),l=o("../static-tools/build/shared/utils/push-data-layer-click.js"),a=o("../../node_modules/@which/seatbelt/src/components/Icons/Navigational/ChevronRight.tsx"),n=o("../../node_modules/classnames/index.js"),s=o.n(n);const i={commercialToolCTA:"CommercialToolCTA_commercialToolCTA__bSIRu","commercialToolCTA--pink":"CommercialToolCTA_commercialToolCTA--pink__EMw7H",commercialToolCTAGrid:"CommercialToolCTA_commercialToolCTAGrid__0mvrj",commercialToolCTAContentWrapper:"CommercialToolCTA_commercialToolCTAContentWrapper__B8ops",commercialToolCTAButtonWrapper:"CommercialToolCTA_commercialToolCTAButtonWrapper__9Cq4N",commercialToolCTAImageWrapper:"CommercialToolCTA_commercialToolCTAImageWrapper__mmwpa"};var c=o("../../node_modules/react/jsx-runtime.js");const u=e=>{let t=e.image,o=e.overlineText,l=e.title,n=e.description,u=e.linkText,m=e.linkUrl,p=void 0===m?"":m,f=e.backgroundColour,h=e.buttonType,y=e.toolName,b=e.itemGroup;return(0,c.jsx)("aside",{"aria-label":`${o} action`,className:s()(i.commercialToolCTA,f&&i[`commercialToolCTA--${f}`]),"data-testid":"commercial-tool-cta",children:(0,c.jsxs)(r.xA,{className:i.commercialToolCTAGrid,children:[(0,c.jsxs)(r.Ei,{className:i.commercialToolCTAContentWrapper,columnStart:{medium:1,large:1},span:{medium:8,large:8},children:[(0,c.jsx)(r.DZ,{heading:l,headingTag:"h2",headingType:"large",overline:o}),(0,c.jsx)(r.Yx,{textStyle:"sb-text-body-default-regular",children:n}),"signUp"===h?(0,c.jsx)(r.XP,{href:p,onClick:()=>d(y,b,"Subscribe to Which?")}):(0,c.jsx)("div",{className:i.commercialToolCTAButtonWrapper,children:(0,c.jsxs)(r.vx,{appearance:"secondary",href:p,onClick:()=>d(y,b,u),children:[(0,c.jsx)(a.v,{}),u]})})]}),t&&(0,c.jsx)(r.Ei,{className:i.commercialToolCTAImageWrapper,columnStart:{medium:9,large:9},span:{medium:4,large:4},children:(0,c.jsx)(r.VI,{...t,aspectRatioMain:"one-to-one","data-testid":"commercial-cta-image",height:"285",src:t.src,width:"285"})})]})})},d=function(e,t){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"";return(0,l.M)({toolInfo:{name:e,category:t},itemText:`${o.toLowerCase()} (onward journey - commercial cta)`})},m=["onwardJourneys","aria-label","toolName","itemGroup"],p=e=>{let t=e.onwardJourneys,o=e["aria-label"],l=e.toolName,a=e.itemGroup,n=function(e,t){if(null==e)return{};var o,r,l=function(e,t){if(null==e)return{};var o={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;o[r]=e[r]}return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)o=a[r],-1===t.indexOf(o)&&{}.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(e,m);return t&&t.menuData&&t.menuData.length?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)("nav",{"aria-label":o,className:"OnwardJourney_onwardJourney__p+Noe",...n,children:t.menuData.map(e=>{const t=f(e,l,a);return(0,c.jsx)(r.nq,{...t,className:"OnwardJourney_multiLinkBlock__jSmmr"})})}),t.commercialToolCTA&&t.commercialToolCTA.map((e,t)=>{let o=e.overline_text,r=e.title,n=e.background_brand_colour,s=e.description,i=e.image,d=e.link_text,m=e.link_url,p=e.button_type;return(0,c.jsx)(u,{backgroundColour:n?.colour,buttonType:p,description:s,image:i,itemGroup:a,linkText:d,linkUrl:m,overlineText:o,title:r,toolName:l},t)})]}):null},f=(e,t,o)=>({headerTag:"h2",title:e.label,titleLink:e.url,...e.url&&{titleLinkProps:{onClick:()=>(0,l.M)({toolInfo:{name:t,category:o},itemText:h(e.label)})}},...e.children&&{links:e.children.map(e=>({text:e.label,href:e.url||"",onClick:()=>(0,l.M)({toolInfo:{name:t,category:o},itemText:h(e.label)})}))},key:e.url}),h=e=>`${e.toLowerCase()} (onward journey)`},"../static-tools/build/components/Results/Results.js"(e,t,o){o.d(t,{n:()=>n});var r=o("../../node_modules/react/index.js");var l=o("../../node_modules/react/jsx-runtime.js");const a=["children","aria-label"],n=(0,r.forwardRef)((e,t)=>{let o=e.children,r=e["aria-label"],n=function(e,t){if(null==e)return{};var o,r,l=function(e,t){if(null==e)return{};var o={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;o[r]=e[r]}return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)o=a[r],-1===t.indexOf(o)&&{}.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(e,a);return(0,l.jsx)("section",{"aria-label":r,className:"Results_results__7sRSn",ref:t,...n,children:o})})},"../static-tools/build/components/ToolBody/ToolBody.js"(e,t,o){o.d(t,{F:()=>a});var r=o("../../node_modules/react/jsx-runtime.js");const l=["children","aria-labelledby"],a=e=>{let t=e.children,o=e["aria-labelledby"],a=function(e,t){if(null==e)return{};var o,r,l=function(e,t){if(null==e)return{};var o={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;o[r]=e[r]}return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)o=a[r],-1===t.indexOf(o)&&{}.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(e,l);return(0,r.jsx)("section",{"aria-labelledby":o,className:"ToolBody_toolBody__ml+So",...a,children:t})}},"../static-tools/build/components/ToolFrame/ToolFrame.js"(e,t,o){o.d(t,{U:()=>a});var r=o("../../node_modules/react/jsx-runtime.js");const l=["children"],a=e=>{let t=e.children,o=function(e,t){if(null==e)return{};var o,r,l=function(e,t){if(null==e)return{};var o={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;o[r]=e[r]}return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)o=a[r],-1===t.indexOf(o)&&{}.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(e,l);return(0,r.jsx)("aside",{className:"ToolFrame_toolFrame__j6N2n",...o,children:t})}},"../static-tools/build/components/ToolHeading/ToolHeading.js"(e,t,o){o.d(t,{L:()=>n});var r=o("../../node_modules/@which/seatbelt/src/index.ts");var l=o("../../node_modules/react/jsx-runtime.js");const a=["children"],n=e=>{let t=e.children,o=function(e,t){if(null==e)return{};var o,r,l=function(e,t){if(null==e)return{};var o={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(-1!==t.indexOf(r))continue;o[r]=e[r]}return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)o=a[r],-1===t.indexOf(o)&&{}.propertyIsEnumerable.call(e,o)&&(l[o]=e[o])}return l}(e,a);return(0,l.jsx)(r.Yx,{className:"ToolHeading_toolHeading__cK3t9",tag:"h2",textStyle:"sb-text-heading-medium",...o,children:t})}},"../static-tools/build/hooks/useTrackedButton.js"(e,t,o){o.d(t,{M:()=>l});var r=o("../static-tools/build/shared/utils/push-data-layer-click.js");const l=e=>{let t=e.trackingState,o=t.trackFirstInteraction,l=t.toolInfo,a=e.trackingName,n=e.onClick;return{onClick:e=>{(0,r.M)({toolInfo:l,itemText:`${a} (button)`}),o(),"function"==typeof n&&n(e)}}}},"../static-tools/build/hooks/useTrackedInput.js"(e,t,o){o.d(t,{I:()=>l});var r=o("../static-tools/build/shared/utils/push-data-layer-click.js");const l=e=>{let t=e.trackingState,o=t.trackFirstInteraction,l=t.toolInfo,a=e.onFocus;return{onFocus:e=>{(0,r.M)({toolInfo:l,itemText:`${e.target?.name} (${e.target?.type} field)`}),o(),"function"==typeof a&&a(e)}}}},"../static-tools/build/hooks/useTracking.js"(e,t,o){o.d(t,{z:()=>n});var r=o("../../node_modules/react/index.js"),l=o("../static-tools/build/shared/utils/push-data-layer-click.js");function a(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,r=Array(t);o<t;o++)r[o]=e[o];return r}const n=e=>{const t=(s=(0,r.useState)(!1),i=2,function(e){if(Array.isArray(e))return e}(s)||function(e,t){var o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var r,l,a,n,s=[],i=!0,c=!1;try{if(a=(o=o.call(e)).next,0===t){if(Object(o)!==o)return;i=!1}else for(;!(i=(r=a.call(o)).done)&&(s.push(r.value),s.length!==t);i=!0);}catch(e){c=!0,l=e}

1finally{try{if(!i&&null!=o.return&&(n=o.return(),Object(n)!==n))return}finally{if(c)throw l}}return s}}(s,i)||function(e,t){if(e){if("string"==typeof e)return a(e,t);var o={}.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?a(e,t):void 0}}(s,i)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),o=t[0],n=t[1];var s,i;return{trackFirstInteraction:(0,r.useCallback)(()=>{o||((0,l.M)({toolInfo:e,itemText:"tool use"}),n(!0))},[o,e]),toolInfo:e}}},"../static-tools/build/shared/utils/currency-formatter.js"(e,t,o){o.d(t,{y:()=>r});const r=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2,o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:2;return Intl.NumberFormat("en-GB",{currency:"GBP",minimumFractionDigits:t,maximumFractionDigits:o,style:"currency"}).format(e)}},"../static-tools/build/shared/utils/handle-currency-field-blur.js"(e,t,o){o.d(t,{J:()=>r});const r=(e,t)=>{const o=e.target?.name,r=e.target?.value;r&&(isNaN(Number(r))?t(o,r,{shouldDirty:!0,shouldValidate:!0}):o&&r&&t(o,Number(r.replace(/,/g,"")).toLocaleString("en"),{shouldDirty:!0,shouldValidate:!0}))}},"../static-tools/build/shared/utils/push-data-layer-click.js"(e,t,o){o.d(t,{M:()=>l});var r=o("../shared/build/esm/utils/dynamic-ga4-datalayer-push.js");const l=e=>{let t=e.toolInfo,o=t.name,l=t.category,a=e.itemText;(0,r.N)({eventName:"click_tool",item_group:l,tool_name:o,item_text:a,event:"static_tool_click"})}},"../static-tools/build/tools/LoanToValueCalculator/index.js"(e,t,o){o.r(t),o.d(t,{default:()=>v});var r=o("../../node_modules/react/index.js"),l=o("../../node_modules/react-hook-form/dist/index.esm.mjs"),a=o("../../node_modules/react-transition-group/esm/CSSTransition.js"),n=o("../../node_modules/@which/seatbelt/src/index.ts"),s=o("../static-tools/build/components/ToolFrame/ToolFrame.js"),i=o("../static-tools/build/components/ToolBody/ToolBody.js"),c=o("../static-tools/build/components/ToolHeading/ToolHeading.js"),u=o("../static-tools/build/components/ControlledTextField/ControlledTextField.js"),d=o("../static-tools/build/components/Results/Results.js"),m=o("../static-tools/build/components/OnwardJourney/OnwardJourney.js"),p=o("../static-tools/build/hooks/useTracking.js"),f=o("../static-tools/build/hooks/useTrackedInput.js"),h=o("../static-tools/build/hooks/useTrackedButton.js"),y=o("../static-tools/build/shared/utils/handle-currency-field-blur.js"),b=o("../static-tools/build/shared/utils/currency-formatter.js");const x="LoanToValueCalculator_formControlledTextField__ldRoe";var g=o("../../node_modules/react/jsx-runtime.js");function j(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var o=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=o){var r,l,a,n,s=[],i=!0,c=!1;try{if(a=(o=o.call(e)).next,0===t){if(Object(o)!==o)return;i=!1}else for(;!(i=(r=a.call(o)).done)&&(s.push(r.value),s.length!==t);i=!0);}catch(e){c=!0,l=e}finally{try{if(!i&&null!=o.return&&(n=o.return(),Object(n)!==n))return}finally{if(c)throw l}}return s}}(e,t)||function(e,t){if(e){if("string"==typeof e)return T(e,t);var o={}.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?T(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function T(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,r=Array(t);o<t;o++)r[o]=e[o];return r}const v=e=>{let t=e.onwardJourneys;const o=j((0,r.useState)(0),2),b=o[0],T=o[1],v=j((0,r.useState)(""),2),N=v[0],k=v[1],S=j((0,r.useState)(!1),2),A=S[0],I=S[1],L=(0,r.useRef)(null),F=(0,l.mN)({defaultValues:_,mode:"onBlur"}),B=F.control,M=F.handleSubmit,P=F.setValue,V=(0,p.z)({name:"Loan to value calculator",category:"Money"}),R=(0,f.I)({trackingState:V}),E=(0,h.M)({trackingState:V,trackingName:"calculate"});(0,r.useEffect)(()=>{A&&L.current?.focus()},[A]);const D=O(b),J=w(D,b,N);return(0,g.jsxs)(s.U,{children:[(0,g.jsxs)(i.F,{"aria-labelledby":"loan-to-value-calculator-heading",children:[(0,g.jsx)(c.L,{id:"loan-to-value-calculator-heading",children:"Loan to value calculator"}),(0,g.jsx)(n.Yx,{textStyle:"sb-text-body-default-regular",children:"Work out what loan-to-value ratio you'll need on your mortgage."}),(0,g.jsxs)("form",{name:"Loan to value calculator",onSubmit:M(e=>{T(0),k(""),I(!1),(e=>{const t=e.depositValue,o=e.propertyValue;T(C(t.replace(/,/g,""),o.replace(/,/g,""))),k(o.replace(/,/g,"")),I(!0)})(e)}),children:[(0,g.jsxs)("fieldset",{className:"LoanToValueCalculator_formFieldSet__hmP2d",children:[(0,g.jsx)(u.S,{className:x,control:B,errorMsg:"Please enter a valid property value in pounds",inputMode:"numeric",inputType:"currency",label:"What is the value of the property you plan to buy? (pounds)",name:"propertyValue",onBlur:e=>(0,y.J)(e,P),placeholder:"290,000",...R}),(0,g.jsx)(u.S,{className:x,control:B,errorMsg:"Please enter a valid deposit amount in pounds",inputMode:"numeric",inputType:"currency",label:"How much deposit do you have? (pounds)",name:"depositValue",onBlur:e=>(0,y.J)(e,P),placeholder:"58,000",...R})]}),(0,g.jsx)(n.$n,{type:"submit",...E,children:"Calculate"})]})]}

1),(0,g.jsx)(a.A,{classNames:"results",in:A,timeout:500,children:(0,g.jsx)(g.Fragment,{children:A&&(0,g.jsxs)("div",{className:"LoanToValueCalculator_results__XhBFx",children:[(0,g.jsxs)(d.n,{"aria-label":"Loan to value calculator results",ref:L,tabIndex:-1,children:[(0,g.jsx)(n.Yx,{className:"LoanToValueCalculator_resultsHeader__Q01Bv",tag:"h3",textStyle:"sb-text-body-default-strong",children:"Your results:"}),(0,g.jsxs)(n.Yx,{textStyle:"sb-text-heading-medium",children:["Your loan to value is ",b.toFixed(1),"%."]}),D>0&&(0,g.jsxs)(n.Yx,{className:"LoanToValueCalculator_resultsMessage__OXFDh",textStyle:"sb-text-body-default-regular",children:["If you increased your deposit by ",J," your LTV would be"," ",D,"%, which might help you get a better mortgage rate."]})]}),(0,g.jsx)(m._,{"aria-label":"Loan to value calculator related links",itemGroup:"Money",onwardJourneys:t,toolName:"Loan to value calculator"})]})})})]})},_={depositValue:"",propertyValue:""},C=(e,t)=>{const o=100*(Number(t)-Number(e))/Number(t);return Math.round(100*o)/100},O=e=>{let t;return t=e>95?95:e>90&&e<=95?90:e>85&&e<=90?85:e>80&&e<=85?80:0,t},w=(e,t,o)=>{const r=(t-e)*Number(o)/100;return(0,b.y)(r,0,0)}}}]);
2//# sourceMappingURL=which-static-tools-build-tools-LoanToValueCalculator.868102fb.chunk.js.map