{"version":3,"sources":["components/shared/Column/Column.tsx","components/shared/Grid/Grid.tsx","utils/assetPrefix.ts","utils/classnames.ts","components/shared/Button/Button.tsx","components/shared/Container/Container.tsx","components/features/Header/Header.tsx","components/template/BaseLayout.tsx","icons/components/ArrowDown.tsx","icons/components/ArrowLongDown.tsx","icons/components/Calc.tsx","icons/components/Check.tsx","icons/components/Close.tsx","icons/components/LoaderDots.tsx","icons/components/Stripe.tsx","utils/hooks/use-media.ts","store/stepper/StepperContext.tsx","utils/hooks/use-stepper.ts","components/shared/Stepper/Stepper.tsx","components/shared/Text/Text.tsx","utils/validations.ts","components/shared/Input/Input.tsx","components/features/MaxLoanCalculator/formItems.ts","services/index.ts","services/HTTPClient.ts","services/apiUrls.ts","store/context/formContext.tsx","utils/prices.ts","components/shared/MortgageTypeCard/MortgageTypeCard.tsx","components/shared/InputHolder/InputHolder.tsx","components/shared/Radio/Radio.tsx","services/calculationsApi.js","components/shared/Select/Select.tsx","services/helpers.js","components/features/MaxLoanCalculator/steps/Step-2.tsx","components/features/MaxLoanCalculator/MaxLoanCalculator.tsx","components/features/MaxLoanCalculator/steps/Step-1.tsx","utils/params.ts","services/shareHelper.ts","components/modals/OverviewModal.tsx","components/features/MaxLoanCalculatorInformation/MaxLoanCalculatorInformation.tsx","components/shared/Loader/Loader.tsx","pages/home.tsx","serviceWorker.ts","index.tsx"],"names":["breakpoints","createClasses","prefix","cols","reduce","classes","col","i","push","Column","extraClass","children","pull","pre","post","join","className","Grid","assetPrefix","process","parseClassFromArg","arg","classToAppend","Array","isArray","length","classNames","objPrototype","Object","prototype","toString","key","hasOwnProperty","call","classNameArgs","classAttr","parsed","Button","variant","url","label","extraClasses","disabled","isLoading","onClick","rest","href","Container","Header","src","alt","BaseLayout","id","role","ArrowDownIcon","props","viewBox","fill","xmlns","d","ArrowLongDownIcon","stroke","CalcIcon","fillRule","CheckIcon","CloseIcon","LoaderDotsIcon","style","margin","background","preserveAspectRatio","display","transform","r","attributeName","type","begin","calcMode","keySplines","values","keyTimes","dur","repeatCount","StripeIcon","x","y","width","height","rx","useMediaQuery","mediaQuery","isSsr","window","useState","matchMedia","matches","setMatches","useLayoutEffect","mediaQueryList","listener","e","addListener","removeListener","defaultStepperState","steps","currentStep","reducer","state","action","payload","map","content","isActive","isTouched","isValid","StepperContext","createContext","dispatch","context","StepperProvider","useReducer","Provider","value","useStepper","useContext","Error","setCurrentStep","useCallback","setSteps","setStepActive","setStepValid","StepperStep","StepperContent","StepperHeader","title","completedText","Check","ArrowDown","Stripe","StepperSubmit","isValidated","isLastStep","onStepChange","setNextStep","ArrowLongDown","Stepper","defaultUrl","defaultPreviousText","previousButtonTexts","activeStep","isScreenTabletAndLower","hasCurrentStep","useEffect","stepperSteps","React","Children","toArray","step","location","Text","Component","as","isNumber","isNaN","Number","currencyToNumber","mustBeNumber","replace","parseFloat","Math","round","toFixed","Input","viewValue","name","defaultValue","placeholder","icon","onIconClick","register","min","max","validation","hasError","setType","$event","target","setValueAs","v","validate","htmlFor","autoComplete","onFocus","onBlurCapture","undefined","Calc","formItems","API","baseUrl","config","method","this","endpoint","request","data","defaultConfig","headers","Accept","body","JSON","stringify","fetch","then","response","a","json","ok","Promise","reject","version","hostname","api","indexOf","getApiUrl","FormContext","form","nhg","hasServerError","isNhg","selectedMortgageType","calculatedMortgageType","selectedInterest","selectedPeriod","updateForm","items","setIsLoading","setIsNhg","setServerError","updateData","setSelectedMortgageType","setCalculatedMortgageType","setSelectedInterest","rate","setSelectedPeriod","period","FormProvider","setForm","setNhg","setData","storedState","localStorage","getItem","get","res","storedStateObj","parse","interest","mortgageType","getStateFromSession","formObj","setItem","info","numberToCurrency","number","format","Intl","NumberFormat","currency","minimumFractionDigits","maximumFractionDigits","MortgageTypeCard","description","checked","defaultChecked","MortgageTypeCardWrapper","InputHolder","isCentered","InputHolderItem","isSmall","Radio","getShortUrl","addOn","group_guid","domain","long_url","Authorization","getMortgageProviders","MortgageType","IsNieuwbouw","RenteBasis","RentevastePeriode","Select","defaultOption","options","hasValue","option","dotsToComma","PeriodOptions","mortgageTypeCards","component","useForm","mode","handleSubmit","setValue","getValues","formState","errors","setCompletedText","bedrag","searchString","result","entriesIterator","URLSearchParams","entries","from","forEach","param","parseSearchQuery","search","item","shouldValidate","onSubmit","required","changeinterestSettings","setChangeInterestSettings","mortgageTypeFormat","riskClass","providers","producten","rentestand","getInterestRate","parseInt","formData","monthlyCost","interestRate","fixedInterestPeriod","filter","catch","error","maximumMortgageForMonthlyPayment","finally","scrollTo","top","behavior","data-tip","place","effect","data-iscapture","clickable","textColor","html","onChange","currentTarget","MaxLoanCalculator","getWhatsAppShareText","shareUrl","shareText","OverviewModal","toggleOverview","componentRef","mediaMatches","Close","ref","MaxLoanCalculatorInformation","isOverviewOpened","setIsOverviewOpened","isCalculated","setIsCalculated","useRef","handlePrint","useReactToPrint","current","shareWhatsApp","shortUrl","link","open","console","log","existingBuilding","setTimeout","ReactDOM","createPortal","document","getElementById","Loader","LoaderDots","Home","Boolean","match","render","StrictMode","navigator","serviceWorker","ready","registration","unregister","message"],"mappings":"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","file":"static/js/main.0fa3ade6.chunk.js","sourcesContent":["import React, { FunctionComponent } from 'react';\n\nconst breakpoints: string[] = ['xs', 'sm', 'md', 'lg', 'xlg'];\n\nconst createClasses = (prefix: string, cols: (number | null)[]) => {\n    return cols.reduce((classes: string[], col, i) => {\n        classes.push(i === 0 ? `${prefix}-${col}` : `${prefix}-${col}--${breakpoints[i]}`);\n\n        return classes;\n    }, []);\n};\n\ninterface ColInterface {\n    extraClass?: string;\n    cols?: (number | null)[];\n    push?: (number | null)[];\n    pull?: (number | null)[];\n    pre?: (number | null)[];\n    post?: (number | null)[];\n}\n\nexport const Column: FunctionComponent<ColInterface> = ({\n    extraClass = '',\n    children,\n    cols = [],\n    push = [],\n    pull = [],\n    pre = [],\n    post = [],\n}) => {\n    const classes: string = [\n        ...createClasses('o-col', cols),\n        ...createClasses('u-push', push),\n        ...createClasses('u-pull', pull),\n        ...createClasses('u-pre', pre),\n        ...createClasses('u-post', post),\n    ].join(' ');\n\n    return <div className={`${classes} ${extraClass}`}>{children}</div>;\n};\n","import React, { FunctionComponent } from 'react';\n\ninterface GridInterface {\n    extraClass?: string;\n}\n\nexport const Grid: FunctionComponent<GridInterface> = ({ extraClass = '', children }) => (\n    <div className={`o-grid ${extraClass}`}>{children}</div>\n);\n","export const assetPrefix = process.env.PUBLIC_URL;\n","export type ClassDictionary = Record<string, unknown>;\n\nexport type ClassValue =\n    | string\n    | number\n    | boolean\n    | undefined\n    | null\n    | ClassDictionary\n    | ClassValue[];\n\n/**\n * Parses a class value from a single mixed-type argument.\n *\n * @param {*} arg The argument to parse.\n * @returns {string} The value to append to the class attribute value.\n * @ignore\n */\nconst parseClassFromArg = (arg: ClassValue): string => {\n    let classToAppend = '';\n\n    if (arg) {\n        if (Array.isArray(arg)) {\n            if (arg.length) {\n                classToAppend = classNames(...arg);\n            }\n        } else if (typeof arg === 'object') {\n            const objPrototype = Object.prototype;\n\n            if (objPrototype.toString !== arg.toString) {\n                classToAppend = arg.toString();\n            } else {\n                // using `for...in` over `Object.keys()` and string append over\n                // template literals for improved performance\n                // eslint-disable-next-line no-restricted-syntax\n                for (const key in arg) {\n                    if (objPrototype.hasOwnProperty.call(arg, key) && arg[key]) {\n                        classToAppend += (classToAppend ? ' ' : '') + key;\n                    }\n                }\n            }\n        } else {\n            classToAppend += arg;\n        }\n    }\n\n    return classToAppend;\n};\n\n/**\n * Reduces a list of arguments into a single class attribute value.\n *\n * @param {...*} classNameArgs A list of mixed-type arguments to reduce.\n * @returns {string} A class attribute value.\n */\nexport default function classNames(...classNameArgs: ClassValue[]): string {\n    return classNameArgs.reduce<string>((classAttr, arg) => {\n        const parsed = parseClassFromArg(arg);\n        return classAttr + (parsed ? (classAttr ? ' ' : '') + parsed : '');\n    }, '');\n}\n","import React, { FunctionComponent, Fragment } from 'react';\nimport classNames from '../../../utils/classnames';\n\nexport interface ButtonProps {\n    variant?: 'tertiary' | 'ghost' | 'secondary';\n    isLoading?: boolean;\n    extraClasses?: string;\n    url?: string;\n    label?: string;\n    disabled?: boolean;\n    onClick?: (e?: any) => void;\n}\n\nexport const Button: FunctionComponent<ButtonProps> = ({\n    variant = '',\n    url = null,\n    label,\n    extraClasses,\n    disabled = false,\n    isLoading,\n    onClick = () => {},\n    ...rest\n}) => {\n    const classes = classNames(\n        {\n            'c-button': !variant,\n            'c-button--tertiary': variant === 'tertiary',\n            'c-button--secondary': variant === 'secondary',\n            'c-button--ghost': variant === 'ghost',\n            'button--disabled': disabled,\n            'button--is-loading': isLoading,\n        },\n        extraClasses,\n    );\n\n    return (\n        <Fragment>\n            {!url && (\n                <button className={classes} {...rest} onClick={onClick} disabled={disabled}>\n                    {label && <span className=\"button__label\">{label}</span>}\n                </button>\n            )}\n            {url && (\n                <a href={url} className={classes} {...rest} onClick={onClick}>\n                    {label && <span className=\"button__label\">{label}</span>}\n                </a>\n            )}\n        </Fragment>\n    );\n};\n","import React, { FunctionComponent } from 'react';\n\ninterface ContainerInterface {\n    extraClass?: string;\n}\n\nexport const Container: FunctionComponent<ContainerInterface> = ({ extraClass = '', children }) => (\n    <div className={`o-container ${extraClass}`}>{children}</div>\n);\n","import React from 'react';\nimport { assetPrefix } from '../../../utils/assetPrefix';\nimport { Button } from '../../shared/Button';\nimport { Container } from '../../shared/Container';\n\nexport const Header = () => {\n    return (\n        <header className=\"c-header\">\n            <Container extraClass=\"header__container\">\n                <a className=\"header__logo\" href=\"https://www.hypotheker.nl/\">\n                    <img src={`${assetPrefix}/assets/svg/logo-no-text-40-year.svg`} alt=\"De Hypotheker logo\" />\n                </a>\n\n                <div className=\"header__buttons\">\n                    <Button\n                        url=\"https://www.hypotheker.nl/vestigingen/\"\n                        label=\"Vestigingen\"\n                        variant=\"ghost\"\n                        extraClasses=\"header__button-vestigingen\"\n                    />\n                    <Button\n                        url=\"https://www.hypotheker.nl/afspraak-maken-hypotheekadviseur/\"\n                        label=\"Afspraak maken\"\n                        variant=\"tertiary\"\n                    />\n                </div>\n            </Container>\n        </header>\n    );\n};\n","import React, { ReactNode, Fragment } from 'react';\nimport { Header } from '../features/Header';\n\ninterface BaseLayoutProps {\n    children?: ReactNode;\n}\n\nexport function BaseLayout({ children }: BaseLayoutProps) {\n    return (\n        <Fragment>\n            <Header />\n\n            <main id=\"content\" role=\"main\">\n                {children}\n            </main>\n        </Fragment>\n    );\n}\n","import React from 'react';\ninterface IconProps {\n    width?: number;\n    height?: number;\n}\n\nconst ArrowDownIcon = (props: IconProps) => {\n    return (\n        <svg viewBox=\"0 0 14 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M.42 1.058c.523-.535 1.251-.577 1.89 0L7 5.554l4.69-4.496c.64-.577 1.369-.535 1.889 0 .523.534.49 1.436 0 1.938-.488.502-5.634 5.402-5.634 5.402a1.314 1.314 0 01-1.892 0S.91 3.498.42 2.996c-.49-.502-.523-1.404 0-1.938z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    );\n};\n\nexport default ArrowDownIcon;\n","import React from 'react';\ninterface IconProps {\n    width?: number;\n    height?: number;\n}\n\nconst ArrowLongDownIcon = (props: IconProps) => {\n    return (\n        <svg viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M6.003 1a.451.451 0 00-.325.119.402.402 0 00-.124.304v8.899l.047 1.749.261-.096-2.079-2.14-2.025-1.916a.389.389 0 00-.144-.086.543.543 0 00-.178-.029c-.125 0-.23.04-.312.119A.402.402 0 001 8.227c0 .115.047.22.14.314l4.521 4.318a.479.479 0 00.52.106.52.52 0 00.158-.106l4.527-4.318A.445.445 0 0011 8.227a.402.402 0 00-.124-.304.433.433 0 00-.312-.119.543.543 0 00-.178.029.39.39 0 00-.144.086L8.21 9.835l-2.08 2.14.27.096.053-1.75V1.424a.397.397 0 00-.128-.304A.454.454 0 006.003 1z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n            />\n        </svg>\n    );\n};\n\nexport default ArrowLongDownIcon;\n","import React from 'react';\ninterface IconProps {\n    width?: number;\n    height?: number;\n}\n\nconst CalcIcon = (props: IconProps) => {\n    return (\n        <svg viewBox=\"0 0 18 22\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M9 15.321c-.648 0-1.174.528-1.174 1.179S8.352 17.679 9 17.679c.648 0 1.174-.528 1.174-1.179S9.648 15.321 9 15.321zm0-3.535c-.648 0-1.174.527-1.174 1.178 0 .651.526 1.179 1.174 1.179.648 0 1.174-.528 1.174-1.179 0-.65-.526-1.178-1.174-1.178zM9 8.25c-.648 0-1.174.528-1.174 1.179 0 .65.526 1.178 1.174 1.178.648 0 1.174-.527 1.174-1.178 0-.651-.526-1.179-1.174-1.179zm-3.522 3.536c-.648 0-1.174.527-1.174 1.178 0 .651.526 1.179 1.174 1.179.649 0 1.174-.528 1.174-1.179 0-.65-.525-1.178-1.174-1.178zm0-3.536c-.648 0-1.174.528-1.174 1.179 0 .65.526 1.178 1.174 1.178.649 0 1.174-.527 1.174-1.178 0-.651-.525-1.179-1.174-1.179zm0 7.071c-.648 0-1.174.528-1.174 1.179s.526 1.179 1.174 1.179c.649 0 1.174-.528 1.174-1.179s-.525-1.179-1.174-1.179zM15.457 0H2.543A2.551 2.551 0 000 2.554v16.892A2.551 2.551 0 002.543 22h12.914A2.551 2.551 0 0018 19.446V2.554A2.551 2.551 0 0015.457 0zm.586 19.446c0 .32-.268.59-.586.59H2.543a.596.596 0 01-.586-.59V2.554c0-.32.268-.59.586-.59h12.914c.318 0 .586.27.586.59v16.892zM4.304 6.286h9.392V4.32H4.304v1.965zm8.218 5.5c-.649 0-1.174.527-1.174 1.178 0 .651.525 1.179 1.174 1.179.648 0 1.174-.528 1.174-1.179 0-.65-.526-1.178-1.174-1.178zm0 3.535c-.649 0-1.174.528-1.174 1.179s.525 1.179 1.174 1.179c.648 0 1.174-.528 1.174-1.179s-.526-1.179-1.174-1.179zm0-7.071c-.649 0-1.174.528-1.174 1.179 0 .65.525 1.178 1.174 1.178.648 0 1.174-.527 1.174-1.178 0-.651-.526-1.179-1.174-1.179z\"\n                fill=\"#00325D\"\n                fillRule=\"nonzero\"\n            />\n        </svg>\n    );\n};\n\nexport default CalcIcon;\n","import React from 'react';\ninterface IconProps {\n    width?: number;\n    height?: number;\n}\n\nconst CheckIcon = (props: IconProps) => {\n    return (\n        <svg viewBox=\"0 0 16 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M15.633.347a1.108 1.108 0 00-1.617 0l-8.48 8.758L1.971 5.42a1.16 1.16 0 00-.829-.337 1.134 1.134 0 00-.816.366A1.205 1.205 0 000 6.303a1.231 1.231 0 00.355.842l4.372 4.508a1.136 1.136 0 00.808.347 1.109 1.109 0 00.809-.347l9.29-9.58a1.207 1.207 0 000-1.726z\"\n                fill=\"#0F916C\"\n            />\n        </svg>\n    );\n};\n\nexport default CheckIcon;\n","import React from 'react';\ninterface IconProps {\n    width?: number;\n    height?: number;\n}\n\nconst CloseIcon = (props: IconProps) => {\n    return (\n        <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <path\n                d=\"M21.192 4.222L13.414 12l7.778 7.778-1.414 1.414L12 13.414l-7.778 7.778-1.414-1.414L10.586 12 2.808 4.222l1.414-1.414L12 10.585l7.777-7.777 1.414 1.414z\"\n                fill=\"#00325D\"\n                fillRule=\"evenodd\"\n            />\n        </svg>\n    );\n};\n\nexport default CloseIcon;\n","import React from 'react';\ninterface IconProps {\n    width?: number;\n    height?: number;\n}\n\nconst LoaderDotsIcon = (props: IconProps) => {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            style={{\n                margin: 'auto',\n                background: '0 0',\n            }}\n            viewBox=\"0 0 100 100\"\n            preserveAspectRatio=\"xMidYMid\"\n            display=\"block\"\n            {...props}>\n            <g transform=\"translate(20 50)\">\n                <circle r={6} fill=\"#0028d1\" transform=\"scale(.86881)\">\n                    <animateTransform\n                        attributeName=\"transform\"\n                        type=\"scale\"\n                        begin=\"-0.375s\"\n                        calcMode=\"spline\"\n                        keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\"\n                        values=\"0;1;0\"\n                        keyTimes=\"0;0.5;1\"\n                        dur=\"1s\"\n                        repeatCount=\"indefinite\"\n                    />\n                </circle>\n            </g>\n            <g transform=\"translate(40 50)\">\n                <circle r={6} fill=\"#0028d1\" transform=\"scale(.5465)\">\n                    <animateTransform\n                        attributeName=\"transform\"\n                        type=\"scale\"\n                        begin=\"-0.25s\"\n                        calcMode=\"spline\"\n                        keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\"\n                        values=\"0;1;0\"\n                        keyTimes=\"0;0.5;1\"\n                        dur=\"1s\"\n                        repeatCount=\"indefinite\"\n                    />\n                </circle>\n            </g>\n            <g transform=\"translate(60 50)\">\n                <circle r={6} fill=\"#0028d1\" transform=\"scale(.20501)\">\n                    <animateTransform\n                        attributeName=\"transform\"\n                        type=\"scale\"\n                        begin=\"-0.125s\"\n                        calcMode=\"spline\"\n                        keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\"\n                        values=\"0;1;0\"\n                        keyTimes=\"0;0.5;1\"\n                        dur=\"1s\"\n                        repeatCount=\"indefinite\"\n                    />\n                </circle>\n            </g>\n        </svg>\n    );\n};\n\nexport default LoaderDotsIcon;\n","import React from 'react';\ninterface IconProps {\n    width?: number;\n    height?: number;\n}\n\nconst StripeIcon = (props: IconProps) => {\n    return (\n        <svg viewBox=\"0 0 13 4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\n            <rect x={0.137} y={0.273} width={12} height={3} rx={1.5} fill=\"#fff\" />\n        </svg>\n    );\n};\n\nexport default StripeIcon;\n","import { useLayoutEffect, useState } from 'react';\n\nexport const mainMediaMobile = '(max-width: 1024px)';\n\nexport default function useMediaQuery(mediaQuery: string) {\n    const isSsr = typeof window === 'undefined';\n\n    const [matches, setMatches] = useState(() =>\n        isSsr ? false : window.matchMedia(mediaQuery).matches,\n    );\n    useLayoutEffect(() => {\n        if (isSsr) {\n            return;\n        }\n        const mediaQueryList = window.matchMedia(mediaQuery);\n        const listener = (e: any) => setMatches(e.matches);\n        mediaQueryList.addListener(listener);\n        return () => mediaQueryList.removeListener(listener);\n    }, [isSsr, mediaQuery]);\n    return matches;\n}\n","import React, { createContext, useReducer } from 'react';\n\nexport const SET_STEPS = 'SET_STEPS';\nexport const SET_CURRENT_STEP = 'SET_CURRENT_STEP';\nexport const SET_STEP_ACTIVE = 'SET_STEP_ACTIVE';\nexport const SET_STEP_VALID = 'SET_STEP_VALID';\n\ninterface StepperPayload {\n    type: 'SET_STEPS' | 'SET_CURRENT_STEP' | 'SET_STEP_ACTIVE' | 'SET_STEP_VALID';\n    payload?: StepState;\n}\n\ntype Step = {\n    isActive: boolean;\n    isTouched: boolean;\n    isValid: boolean;\n};\n\ninterface StepState {\n    steps: Step[];\n    currentStep?: number;\n    validationId?: number;\n    isActive?: boolean;\n    isValid?: boolean;\n}\n\ninterface StepContext {\n    state: StepState;\n    dispatch: (context: StepperPayload) => void;\n}\n\nexport const defaultStepperState: StepState = {\n    steps: [],\n    currentStep: 0,\n};\n\nexport const reducer = (state = defaultStepperState, action: StepperPayload) => {\n    const { steps } = state;\n    const { type, payload } = action;\n\n    switch (type) {\n        case SET_CURRENT_STEP:\n            return {\n                ...state,\n                currentStep: payload!.currentStep,\n                steps:\n                    steps &&\n                    steps.map((content, i) =>\n                        i === payload!.currentStep\n                            ? { ...content, isActive: true, isTouched: true }\n                            : content,\n                    ),\n            };\n        case SET_STEP_ACTIVE:\n            return {\n                ...state,\n                steps:\n                    steps &&\n                    steps.map((content, i) =>\n                        i === payload!.currentStep\n                            ? {\n                                  ...content,\n                                  isActive: payload?.isActive || false,\n                              }\n                            : content,\n                    ),\n            };\n\n        case SET_STEP_VALID:\n            return {\n                ...state,\n                steps:\n                    steps &&\n                    steps.map((content, i) =>\n                        i === payload!.currentStep\n                            ? {\n                                  ...content,\n                                  isValid: payload?.isValid || false,\n                              }\n                            : content,\n                    ),\n            };\n        case SET_STEPS:\n            return {\n                ...state,\n                steps: payload!.steps,\n            };\n\n        default:\n            return state;\n    }\n};\n\nexport const StepperContext = createContext<StepContext>({\n    state: defaultStepperState,\n    dispatch: (context) => {},\n});\n\nexport const StepperProvider: React.FC = ({ children }) => {\n    const [state, dispatch] = useReducer(reducer, defaultStepperState);\n\n    return (\n        <StepperContext.Provider value={{ state, dispatch }}>{children}</StepperContext.Provider>\n    );\n};\n","import { SET_STEP_VALID } from './../../store/stepper/StepperContext';\nimport { useCallback, useContext } from 'react';\nimport {\n    SET_CURRENT_STEP,\n    SET_STEPS,\n    SET_STEP_ACTIVE,\n    StepperContext,\n} from '../../store/stepper/StepperContext';\n\nexport const useStepper = () => {\n    const { state, dispatch } = useContext(StepperContext);\n    const { currentStep, steps } = state;\n\n    if (!StepperContext) {\n        throw new Error('useStepper should be used inside StepperProvider');\n    }\n\n    const setCurrentStep = useCallback(\n        (currentStep) =>\n            dispatch({ type: SET_CURRENT_STEP, payload: { currentStep, steps: state.steps } }),\n        [dispatch, state.steps],\n    );\n\n    const setSteps = useCallback(\n        (steps) => dispatch({ type: SET_STEPS, payload: { steps } }),\n        [dispatch],\n    );\n\n    const setStepActive = useCallback(\n        (currentStep, isActive) =>\n            dispatch({\n                type: SET_STEP_ACTIVE,\n                payload: { currentStep, steps: state.steps, isActive },\n            }),\n        [dispatch, state.steps],\n    );\n\n    const setStepValid = useCallback(\n        (currentStep, isValid) =>\n            dispatch({\n                type: SET_STEP_VALID,\n                payload: { currentStep, steps: state.steps, isValid },\n            }),\n        [dispatch, state.steps],\n    );\n\n    return {\n        setSteps,\n        currentStep,\n        setStepActive,\n        setStepValid,\n        steps,\n        setCurrentStep,\n    };\n};\n","import React, { FunctionComponent, useEffect, Fragment } from 'react';\nimport { ArrowDown, ArrowLongDown, Check, Stripe } from '../../../icons/components';\nimport classNames from '../../../utils/classnames';\nimport { useStepper } from '../../../utils/hooks';\nimport useMediaQuery from '../../../utils/hooks/use-media';\nimport { Button } from '../Button';\n\ninterface StepperStep {\n    id: number;\n}\n\nexport const StepperStep: FunctionComponent<StepperStep> = ({ children, id }) => {\n    const { steps } = useStepper();\n    const { isActive, isTouched, isValid } = steps[id];\n\n    const classes = classNames('stepper__step', {\n        'stepper__step--is-active': isActive,\n        'stepper__step--is-valid': isValid,\n        'stepper__step--is-touched': isTouched,\n    });\n\n    return <div className={classes}>{children}</div>;\n};\n\nexport const StepperContent: FunctionComponent = ({ children }) => (\n    <div className=\"stepper__step-content\">{children}</div>\n);\n\nexport const StepperHeader: FunctionComponent<{\n    id: number;\n    title: string;\n    completedText?: string;\n}> = ({ id, title, completedText }) => {\n    const { steps } = useStepper();\n    const { isActive, isTouched, isValid } = steps[id];\n    const { setStepActive } = useStepper();\n\n    return (\n        <div\n            className=\"stepper__step-header  u-flex u-flex-middle u-flex-between\"\n            onClick={() => {\n                setStepActive(id, !isActive);\n            }}>\n            <div className=\"u-flex u-flex-middle\">\n                <span className=\"stepper__step-checkmark\">\n                    <Check height={12} width={16} />\n                </span>\n                <span className=\"stepper__step-title\">{title}</span>\n            </div>\n\n            <div className=\"u-flex u-flex-middle\">\n                {completedText && (\n                    <span className=\"stepper__step-completed-title\">{completedText}</span>\n                )}\n\n                {(isActive || isTouched || isValid) && (\n                    <button\n                        className={`stepper__step-button ${\n                            !isActive ? 'stepper__step-button--open' : ''\n                        }`}\n                        title={!isActive ? 'Openen' : 'Sluiten'}>\n                        {!isActive && <ArrowDown width={13} height={8} />}\n                        {isActive && <Stripe width={12} height={3} />}\n                    </button>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport const StepperSubmit: FunctionComponent<{\n    isValidated?: boolean;\n    id: number;\n    variant?: 'primary';\n    isLastStep?: boolean;\n    isLoading?: boolean;\n    onStepChange?: () => void;\n}> = ({ isValidated = true, id, variant, isLastStep, isLoading, onStepChange }) => {\n    const { setCurrentStep, setStepActive, setStepValid } = useStepper();\n\n    function setNextStep() {\n        if (!isValidated) return;\n        setStepValid(id, true);\n        if (!isLastStep) setCurrentStep(id + 1);\n        setStepActive(id, false);\n        if (onStepChange) onStepChange();\n    }\n    return (\n        <Fragment>\n            {variant === 'primary' && (\n                <div className=\"stepper__step-button-holder stepper__step-button-holder--centered\">\n                    <Button\n                        label=\"Berekenen\"\n                        variant=\"tertiary\"\n                        onClick={setNextStep}\n                        isLoading={isLoading}\n                    />\n                </div>\n            )}\n            {!variant && (\n                <div className=\"stepper__step-button-holder\">\n                    <div className=\"stepper__step-button-holder-wrapper\">\n                        <div>Ga verder</div>\n                        <button\n                            type=\"submit\"\n                            className=\"stepper__step-next-icon\"\n                            onClick={setNextStep}>\n                            <ArrowLongDown width={10} height={12} />\n                        </button>\n                    </div>\n                </div>\n            )}\n        </Fragment>\n    );\n};\n\nexport const Stepper: FunctionComponent<{\n    defaultUrl: string;\n    previousButtonTexts: string[];\n    defaultPreviousText: string;\n    activeStep?: number;\n}> = ({ children, defaultUrl, defaultPreviousText, previousButtonTexts, activeStep }) => {\n    const { setSteps, steps, currentStep, setCurrentStep, setStepActive } = useStepper();\n    const isScreenTabletAndLower = useMediaQuery('(max-width: 63.96875em)');\n\n    const hasCurrentStep = currentStep && currentStep !== 0;\n\n    function handleBackClick() {\n        if (currentStep && currentStep !== 0) {\n            const id = currentStep - 1;\n            setStepActive(currentStep, false);\n            setCurrentStep(id);\n        } else {\n            window.location.href = defaultUrl;\n        }\n    }\n\n    useEffect(() => {\n        const stepperSteps = React.Children.toArray(children).map((step: any) => {\n            return {\n                ...step.props,\n                isValid: false,\n                isActive: activeStep ? activeStep === step.props.id : currentStep === step.props.id,\n                isTouched: activeStep\n                    ? activeStep === step.props.id\n                    : currentStep === step.props.id,\n            };\n        });\n        setSteps(stepperSteps);\n    }, []); // eslint-disable-line\n\n    return (\n        <div className=\"c-stepper\">\n            <div className=\"stepper__indicator\">\n                {steps.length > 0 &&\n                    steps.map((step, key) => (\n                        <span\n                            key={key}\n                            className={`stepper__indicator-item ${\n                                step.isTouched ? 'stepper__indicator-item--is-valid' : ''\n                            }`}></span>\n                    ))}\n            </div>\n            <div className=\"stepper__wrapper\">\n                <button className=\"stepper__back-button\" onClick={handleBackClick}>\n                    <span className=\"stepper__back-button-icon\">\n                        <ArrowLongDown width={12} />\n                    </span>\n                    {isScreenTabletAndLower && hasCurrentStep && currentStep\n                        ? previousButtonTexts[currentStep - 1]\n                        : defaultPreviousText}\n                </button>\n                {steps.length > 0 && children}\n            </div>\n        </div>\n    );\n};\n","import React, { FunctionComponent } from 'react';\n\ninterface TextProps {\n    as: 'h1' | 'h2' | 'h3' | 'p';\n}\nexport const Text: FunctionComponent<TextProps> = (props) => {\n    const { as: Component, children } = props;\n    return <Component>{children}</Component>;\n};\n","export const isValidpostalCode = (value: any) => /^[1-9][0-9]{3}\\s*[a-z]{2}$/i.test(value);\nexport const isNumber = (value: any) => !isNaN(Number(value));\nexport const isEmail = (value: any) =>\n    /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/i.test(\n        value,\n    );\nexport const isValidDate = (value: any) =>\n    /^(0?[1-9]|[12][0-9]|3[01])[/-](0?[1-9]|1[012])[/-]\\d{4}$/.test(value);\n","import React, { FunctionComponent } from 'react';\nimport { Calc } from '../../../icons/components';\nimport { isNumber } from '../../../utils/validations';\n\ninterface InputProps {\n    label?: string;\n    name: string;\n    defaultValue?: any;\n    id: string;\n    min?: number;\n    icon?: boolean;\n    onIconClick?: () => void;\n    max?: number;\n    placeholder?: string;\n    register: any;\n    value?: any;\n    validation?: any;\n    hasError?: any;\n    type?: string;\n}\n\nconst currencyToNumber = (value: any, mustBeNumber?: boolean) => {\n    if (typeof value === 'number') return value;\n    value = value ? value.replace('€ ', '').replace(/\\./g, '') : null;\n\n    if (value) {\n        value = parseFloat(value);\n        if (Math.round(value) !== value) {\n            value = value.toFixed(2);\n        }\n\n        return Math.round(value);\n    }\n    return !mustBeNumber ? value : 0;\n};\n\nexport const Input: FunctionComponent<InputProps> = ({\n    label,\n    name,\n    defaultValue,\n    id,\n    placeholder,\n    value,\n    icon,\n    onIconClick,\n    register,\n    min,\n    max,\n    validation,\n    hasError,\n    type = 'text',\n}) => {\n    let viewValue;\n\n    validation = validation ? validation : {};\n\n    if (type === 'currency') {\n        validation.setValueAs = (v: any) => currencyToNumber(v);\n        validation.validate = isNumber;\n    }\n\n    function setType(\n        $event: React.FocusEvent<HTMLInputElement, Element>,\n        type: string,\n        action: string,\n    ) {\n        viewValue = value;\n\n        if (type === 'currency') {\n            // if it is a int (even 0) on blur we return it and Math.round\n            // if it is not an int we return null\n            // always round up\n\n            if (action === 'blur') {\n                viewValue = $event.target.value;\n            } else {\n                viewValue = currencyToNumber($event.target.value);\n            }\n            $event.target.type = action === 'focus' ? 'number' : 'text';\n            $event.target.value =\n                action === 'blur'\n                    ? viewValue\n                        ? '€ ' + viewValue.replace(/(\\d)(?=(\\d{3})+(?!\\d))/g, '$1.')\n                        : null\n                    : viewValue;\n        }\n    }\n    return (\n        <div\n            className={`c-input ${hasError ? 'input--has-error' : ''} ${\n                icon ? 'input--has-icon' : ''\n            }`}>\n            {label && (\n                <label className=\"input__label\" htmlFor={id}>\n                    {label}\n                </label>\n            )}\n            <input\n                autoComplete=\"off\"\n                className=\"input__input\"\n                onFocus={(e) => setType(e, type, 'focus')}\n                onBlurCapture={(e) => setType(e, type, 'blur')}\n                type={type}\n                min={type === 'number' || type === 'currency' ? min : undefined}\n                max={type === 'number' || type === 'currency' ? max : undefined}\n                id={id}\n                placeholder={placeholder}\n                defaultValue={defaultValue}\n                {...register(name, validation)}\n            />\n\n            {icon && (\n                <div className=\"ct-input-icon\" onClick={onIconClick}>\n                    <Calc height={22} width={18} />;\n                </div>\n            )}\n        </div>\n    );\n};\n","import { FormItem } from '../../../store/context/formContext';\n\nexport const formItems = {\n    monthlyCost: 'monthlyCost',\n    mortgageType: 'mortgageType',\n    period: 'period',\n    interest: 'interest',\n    isNhg: 'isNhg',\n};\n\nexport const getPostData = (values: FormItem) => {\n    let postData: { [id: string]: any } = {\n        monthlyCost: parseInt(values.monthlyCost),\n        mortgageType: parseInt(values.mortgageType),\n        interestRate: parseFloat(values.interest),\n        fixedInterestPeriod: parseInt(values.period),\n        isNhg: values.isNhg === 'true' ? true : false,\n    };\n\n    return postData;\n};\n","import { getApiUrl } from './apiUrls';\nimport HTTPGetClient from './HTTPClient';\n\nexport const API = new HTTPGetClient({ baseUrl: getApiUrl(2) });\n","/**\n * Simple HTTPGet client wrapped around window.fetch\n * @export\n * @class HTTPGetClient\n */\nexport default class HTTPGetClient {\n    config: RequestInit = {\n        method: 'GET',\n    };\n\n    baseUrl = '/';\n\n    constructor({ baseUrl }: { baseUrl: string }) {\n        this.baseUrl = baseUrl;\n    }\n\n    get<R = any>(endpoint: string, config: RequestInit = {}) {\n        return this.request<R>(endpoint, { ...this.config, ...config });\n    }\n\n    post<R = any, D = any>(endpoint: string, data: D) {\n        const defaultConfig = {\n            method: 'POST',\n            headers: {\n                Accept: 'application/json',\n                'Content-Type': 'application/json',\n            },\n\n            body: JSON.stringify(data),\n        };\n        return this.request<R>(endpoint, defaultConfig);\n    }\n\n    private request<T = any>(endpoint: string, config: RequestInit) {\n        return fetch(`${this.baseUrl}/${endpoint}`, config).then(async (response) => {\n            const data = await response.json();\n            if (response.ok) {\n                return data as T;\n            } else {\n                return Promise.reject(data);\n            }\n        });\n    }\n}\n","export const getApiUrl = (version: number) => {\n    const { hostname } = window.location;\n    let api = version !== 2 ? 'https://api.hypotheker.nl' : 'https://api.hypotheker.nl/v2';\n\n    if (hostname.indexOf('staging') !== -1) {\n        api = version !== 2 ? 'https://api.hypotheker.nl' : 'https://staging-api.hypotheker.nl/v2';\n    }\n\n    if (hostname.indexOf('test') !== -1) {\n        api = version !== 2 ? 'https://testapi.hypotheker.nl' : 'https://test-api.hypotheker.nl/v2';\n    }\n\n    if (hostname.indexOf('acc') !== -1) {\n        api = version !== 2 ? 'https://acpapi.hypotheker.nl' : 'https://acc-api.hypotheker.nl/v2';\n    }\n\n    if (hostname.indexOf('localhost') !== -1) {\n        api = version !== 2 ? 'https://api.hypotheker.nl' : 'https://acc-api.hypotheker.nl/v2';\n    }\n\n    return api;\n};\n\nexport const assetsBaseUrl = process.env.NODE_ENV === 'production' ? '/calculator' : '';\n","import React, { useEffect, useState } from 'react';\nimport { MaxLoanCalculatorInformation } from '../../components/features/MaxLoanCalculatorInformation';\nimport { NhgResponse } from '../../models/NhgResponse';\nimport { API } from '../../services';\n\nexport type FormItem = { [key: string]: any };\n\nexport interface InterestProvider {\n    logoUrl: string;\n    hypotheekNaam: string;\n    aanbiederId: string;\n    aanbiederNaam: string;\n    rentestand: number;\n    hypotheekVorm: string;\n    trend: string;\n    uitgelicht: boolean;\n    lookupId: string;\n    rentevastePeriode: number;\n}\n\ninterface FormContextProps {\n    form: FormItem;\n\t\tnhg: NhgResponse | null;\n    isLoading: boolean;\n    hasServerError: boolean;\n    selectedMortgageType: number;\n    calculatedMortgageType: number;\n    selectedPeriod: number;\n    isNhg: boolean;\n    selectedInterest: number;\n    data: MaxLoanCalculatorInformation | null;\n    updateForm: (items: FormItem) => void;\n    setIsLoading: (state: boolean) => void;\n    setIsNhg: (state: boolean) => void;\n    setServerError: (state: boolean) => void;\n    updateData: (data: MaxLoanCalculatorInformation) => void;\n    setSelectedMortgageType: (id: number) => void;\n    setCalculatedMortgageType: (id: number) => void;\n    setSelectedInterest: (rate: number) => void;\n    setSelectedPeriod: (period: number) => void;\n}\n\nexport const saveStateToSession = (state: any) => {\n    window.localStorage.setItem(`state.maxloancalculator`, JSON.stringify(state));\n};\n\nexport const FormContext = React.createContext<FormContextProps>({\n    form: {},\n\t\tnhg: null,\n    isLoading: false,\n    hasServerError: false,\n    data: null,\n    isNhg: false,\n    selectedMortgageType: 4,\n    calculatedMortgageType: 4,\n    selectedInterest: 0,\n    selectedPeriod: 10,\n\n    updateForm: (items: FormItem) => {},\n    setIsLoading: (state: boolean) => {},\n    setIsNhg: (state: boolean) => {},\n    setServerError: (state: boolean) => {},\n    updateData: (data: MaxLoanCalculatorInformation) => {},\n    setSelectedMortgageType: (id: number) => {},\n    setCalculatedMortgageType: (id: number) => {},\n    setSelectedInterest: (rate: number) => {},\n    setSelectedPeriod: (period: number) => {},\n});\n\nexport const FormProvider: React.FC = ({ children }) => {\n    const [form, setForm] = useState({});\n\t\tconst [nhg, setNhg] = useState<NhgResponse | null>(null);\n\t\tconst [isLoading, setIsLoading] = useState(false);\n    const [hasServerError, setServerError] = useState(false);\n    const [data, setData] = useState<MaxLoanCalculatorInformation | null>(null);\n    const [selectedMortgageType, setSelectedMortgageType] = useState(4);\n    const [calculatedMortgageType, setCalculatedMortgageType] = useState(4);\n    const [selectedInterest, setSelectedInterest] = useState(0);\n    const [selectedPeriod, setSelectedPeriod] = useState(10);\n    const [isNhg, setIsNhg] = useState(false);\n\n    const storedState = window.localStorage.getItem(`state.maxloancalculator`);\n\n\t\t// debug\n\t\tuseEffect(() => {\n\t\t\tAPI.get<NhgResponse>('nhg').then((res) => setNhg(res))\n\t\t}, [setNhg])\n\n    function updateForm(items: FormItem) {\n        const formObj = {\n            ...form,\n            ...items,\n        };\n        saveStateToSession(formObj);\n        setForm(formObj);\n    }\n\n    function updateData(info: MaxLoanCalculatorInformation) {\n        setData({ ...info });\n    }\n\n    useEffect(() => {\n        const getStateFromSession = () => {\n            if (storedState && form) {\n                if (storedState !== JSON.stringify(form)) {\n                    const storedStateObj = JSON.parse(storedState);\n                    setSelectedInterest(storedStateObj.interest);\n                    setSelectedMortgageType(storedStateObj.mortgageType);\n                    setIsNhg(storedStateObj.isNhg);\n                    setForm(storedStateObj);\n                }\n            }\n        };\n        if (storedState) {\n            getStateFromSession();\n        }\n    });\n\n    return (\n        <FormContext.Provider\n            value={{\n                isLoading,\n                hasServerError,\n                form,\n\t\t\t\t\t\t\t\tnhg,\n                isNhg,\n                updateForm,\n                setIsLoading,\n                setIsNhg,\n                setServerError,\n                selectedMortgageType,\n                calculatedMortgageType,\n                selectedInterest,\n                selectedPeriod,\n                setSelectedMortgageType,\n                setSelectedPeriod,\n                setCalculatedMortgageType,\n                setSelectedInterest,\n                data,\n                updateData,\n            }}>\n            {children}\n        </FormContext.Provider>\n    );\n};\n","export const numberToCurrency = (number: number, format: boolean) => {\n    if (number && format) {\n        var formatter = new Intl.NumberFormat('nl-NL', {\n            style: 'currency',\n            currency: 'EUR',\n            minimumFractionDigits: 0,\n            maximumFractionDigits: 0,\n        });\n        return formatter.format(number);\n    } else {\n        return `€${number}`;\n    }\n};\n","import React, { FunctionComponent } from 'react';\n\nexport type MortgageType = 'Annuïteiten' | 'Linear';\n\nexport interface MortgageTypeCardProps {\n    label: string;\n    description: string;\n    name: string;\n    checked?: boolean;\n    defaultValue?: any;\n    id: string;\n    register?: any;\n    validation?: any;\n    onClick?: (value: any, label: string, name: string) => void;\n}\n\nexport const MortgageTypeCard: FunctionComponent<MortgageTypeCardProps> = ({\n    id,\n    name,\n    description,\n    validation,\n    register,\n    checked,\n    defaultValue,\n    label,\n    onClick = () => {},\n}) => {\n    return (\n        <div className=\"c-mortgage-type-card\">\n            <input\n                className=\"mortgage-type-card__input\"\n                id={id}\n                {...register(name, validation ? validation : {})}\n                defaultChecked={checked}\n                defaultValue={defaultValue}\n                type=\"radio\"\n            />\n\n            <label\n                className=\"mortgage-type-card__label\"\n                htmlFor={id}\n                onClick={() => onClick(defaultValue, label, name)}>\n                <span className=\"mortgage-type-card__label-title\">{label}</span>\n                <span className=\"mortgage-type-card__label-text\">{description}</span>\n            </label>\n        </div>\n    );\n};\n\nexport const MortgageTypeCardWrapper: FunctionComponent = ({ children }) => (\n    <div className=\"mortgage-type-card__wrapper\">{children}</div>\n);\n","import React, { FunctionComponent } from 'react';\nimport classNames from '../../../utils/classnames';\n\nexport const InputHolder: FunctionComponent<{ isCentered?: boolean }> = ({\n    children,\n    isCentered,\n}) => {\n    const classes = classNames('c-input-holder', {\n        'input-holder--centered': isCentered,\n    });\n\n    return <div className={classes}>{children}</div>;\n};\n\nexport const InputHolderItem: FunctionComponent<{ isSmall?: boolean }> = ({\n    children,\n    isSmall,\n}) => {\n    return (\n        <div className={`input-holder__item ${isSmall ? 'input-holder__item--small' : ''}`}>\n            {children}\n        </div>\n    );\n};\n","import React, { FunctionComponent } from 'react';\n\ninterface RadioProps {\n    label: string;\n    name: string;\n    checked?: boolean;\n    defaultValue?: any;\n    id: string;\n    register: any;\n    validation?: any;\n    hasError?: boolean;\n}\n\nexport const Radio: FunctionComponent<RadioProps> = ({\n    id,\n    name,\n    checked = false,\n    defaultValue,\n    label,\n    register,\n    validation,\n    hasError,\n}) => {\n    return (\n        <div className={`c-radio ${hasError ? 'input--has-error' : ''}`}>\n            <input\n                className=\"radio__input\"\n                id={id}\n                {...register(name, validation ? validation : {})}\n                defaultChecked={checked}\n                defaultValue={defaultValue}\n                type=\"radio\"\n            />\n            <label className=\"radio__label\" htmlFor={id}>\n                {label}\n            </label>\n        </div>\n    );\n};\n","export const assetsBaseUrl = process.env.NODE_ENV === 'production' ? '/calculator' : '';\n\nconst getApiUrl = (version) => {\n    const { hostname } = window.location;\n    let api = version !== 2 ? 'https://api.hypotheker.nl' : 'https://api.hypotheker.nl/v2';\n\n    if (hostname.indexOf('staging') !== -1) {\n        api = version !== 2 ? 'https://api.hypotheker.nl' : 'https://staging-api.hypotheker.nl/v2';\n    }\n\n    if (hostname.indexOf('test') !== -1) {\n        api = version !== 2 ? 'https://testapi.hypotheker.nl' : 'https://test-api.hypotheker.nl/v2';\n    }\n\n    if (hostname.indexOf('acc') !== -1) {\n        api = version !== 2 ? 'https://acpapi.hypotheker.nl' : 'https://test-api.hypotheker.nl/v2';\n    }\n\n    if (hostname.indexOf('localhost') !== -1) {\n        api = version !== 2 ? 'https://api.hypotheker.nl' : 'https://test-api.hypotheker.nl/v2';\n    }\n\n    return api;\n};\n\nexport const getShortUrl = async (url, addOn) => {\n    if (!addOn) {\n        addOn = '';\n    }\n\n    let data = {\n        group_guid: 'Be33b2VNMyq',\n        domain: 'berekenen.hypotheker.nl',\n        long_url: `${url}${addOn}`,\n    };\n\n    let response = await fetch('https://api-ssl.bitly.com/v4/shorten', {\n        method: 'POST',\n        headers: {\n            Accept: 'application/json',\n            'Content-Type': 'application/json',\n            //Authorization: \"Bearer f8c2e48062804025e994e7d98d37e2ad0517812e\"\n            Authorization: 'Bearer b4916c1b36fb25378359c58936862bfc3d1e3d15',\n        },\n        body: JSON.stringify(data),\n    });\n\n    return response.json();\n};\n\nexport const getMortgageProviders = async (\n    MortgageType,\n    IsNieuwbouw,\n    RenteBasis,\n    RentevastePeriode,\n) => {\n    let response = await fetch(\n        `${getApiUrl(\n            2,\n        )}/interestrates/hypotheekaanbieders?HypotheekVorm=${MortgageType}&IsNieuwbouw=${IsNieuwbouw}&RenteBasis=${RenteBasis}&RentevastePeriode=${RentevastePeriode}`,\n        {\n            method: 'GET',\n            headers: {\n                Accept: 'application/json',\n                'Content-Type': 'application/json',\n            },\n        },\n    );\n\n    return response.json();\n};\n","import React from 'react';\nimport { ArrowDown } from '../../../icons/components';\n\nexport interface SelectOption {\n    value: string | number;\n    name: string;\n}\n\nexport interface SelectProps {\n    label: string;\n    id?: string;\n    defaultOption?: string | number;\n    options?: SelectOption[];\n    name: string;\n    value?: string;\n    register: any;\n    validation?: any;\n}\n\nexport const Select = ({\n    label,\n    id,\n    defaultOption,\n    options,\n    name,\n    register,\n    validation,\n    value = '',\n}: SelectProps) => {\n    const hasValue = typeof value === 'string' && value !== '';\n    return (\n        <div className=\"c-select form__item select--boxed\">\n            <div className=\"select__wrapper\">\n                <label className=\"select__label\" htmlFor={id}>\n                    {label}\n                </label>\n                <div className=\"select__input-wrapper\">\n                    <select\n                        id={id}\n                        className=\"select__input\"\n                        name={name}\n                        {...register(name, validation ? validation : {})}\n                        defaultValue={defaultOption}>\n                        {defaultOption && !hasValue && (\n                            <option value={defaultOption} disabled>\n                                {defaultOption}\n                            </option>\n                        )}\n\n                        {options &&\n                            options.map((option) => (\n                                <option value={option.value} key={option.value}>\n                                    {option.name}\n                                </option>\n                            ))}\n                    </select>\n                    <div className=\"select__icon\">\n                        <ArrowDown width={13} height={8} />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n","export const mainMediaMobile = '(max-width: 1024px)';\n\nexport const dotsToComma = (value) => {\n    return value && value.toString().replace(/\\./g, ',');\n};\n","import React, { Fragment, FunctionComponent, useState, useContext, useEffect } from 'react';\n\nimport { Text } from '../../../shared/Text';\nimport { StepperContent, StepperHeader, StepperSubmit } from '../../../shared/Stepper';\nimport { useForm } from 'react-hook-form';\nimport { formItems, getPostData } from '../formItems';\nimport { FormContext } from '../../../../store/context/formContext';\nimport {\n    MortgageTypeCard,\n    MortgageTypeCardProps,\n    MortgageTypeCardWrapper,\n} from '../../../shared/MortgageTypeCard';\nimport { Input } from '../../../shared/Input';\nimport { InputHolder, InputHolderItem } from '../../../shared/InputHolder';\nimport { API } from '../../../../services';\nimport { Radio } from '../../../shared/Radio';\nimport ReactTooltip from 'react-tooltip';\nimport { assetPrefix } from '../../../../utils/assetPrefix';\nimport { getMortgageProviders } from '../../../../services/calculationsApi';\nimport { Select, SelectOption } from '../../../shared/Select';\nimport { Button } from '../../../shared/Button';\nimport { dotsToComma } from '../../../../services/helpers';\nconst PeriodOptions: SelectOption[] = [\n    {\n        name: '5 jaar',\n        value: 5,\n    },\n    {\n        name: '10 jaar',\n        value: 10,\n    },\n    {\n        name: '15 jaar',\n        value: 15,\n    },\n    {\n        name: '20 jaar',\n        value: 20,\n    },\n    {\n        name: '30 jaar',\n        value: 30,\n    },\n];\nconst mortgageTypeCards: MortgageTypeCardProps[] = [\n    {\n        label: 'Annuïteiten',\n        description:\n            'Een annuïteitenhypotheek is een hypotheek waarbij het totale maandbedrag (bestaande uit rente en aflossing) gedurende de rentevaste periode gelijk blijft.',\n        name: formItems.mortgageType,\n        id: formItems.mortgageType,\n        checked: true,\n        defaultValue: '4',\n    },\n    {\n        label: 'Lineair',\n        description:\n            'Een lineaire hypotheek is een hypotheek waarbij je gedurende de looptijd elke maand hetzelfde bedrag aflost. De rente is in het begin het hoogst en loopt gedurende de looptijd af. Je start dus met een hoog maandbedrag.',\n        name: formItems.mortgageType,\n        id: formItems.mortgageType,\n        defaultValue: '9',\n    },\n];\n\nexport const Step2: FunctionComponent<{ id: number }> = ({ id }) => {\n    const {\n        register,\n        setValue,\n        handleSubmit,\n        formState: { errors, isValid },\n    } = useForm({ mode: 'onBlur' });\n\n    const [completedText, setCompletedText] = useState('');\n    const [changeinterestSettings, setChangeInterestSettings] = useState(false);\n\n    const {\n        updateForm,\n        form,\n        isNhg,\n        updateData,\n        setIsLoading,\n        setIsNhg,\n        setCalculatedMortgageType,\n        setServerError,\n        selectedPeriod,\n        setSelectedPeriod,\n        selectedInterest,\n        selectedMortgageType,\n        setSelectedMortgageType,\n        setSelectedInterest,\n    } = useContext(FormContext);\n\n    useEffect(() => {\n        const getInterestRate = async (\n            mortgageType: number,\n            isNhg: boolean,\n            RentevastePeriode: number,\n        ) => {\n            const mortgageTypeFormat =\n                mortgageType === 4 ? 'Annuïteitenhypotheek' : 'Lineaire_hypotheek';\n            const riskClass = isNhg === true ? 0 : 100;\n            const providers = await getMortgageProviders(\n                mortgageTypeFormat,\n                false,\n                riskClass,\n                RentevastePeriode,\n            );\n            return providers.producten[0].rentestand;\n        };\n        getInterestRate(selectedMortgageType, isNhg, selectedPeriod).then((interest) => {\n            setSelectedInterest(interest);\n            setValue('interest', interest);\n        });\n\n        if (isNhg) {\n            setValue('isNhg', 'true');\n        } else {\n            setValue('isNhg', 'false');\n        }\n    }, [\n        form,\n        isNhg,\n        selectedInterest,\n        selectedMortgageType,\n        selectedPeriod,\n        setSelectedInterest,\n        setIsNhg,\n        setValue,\n    ]);\n\n    const onSubmit = (data: any) => {\n        setCalculatedMortgageType(parseInt(data.mortgageType));\n        updateForm(data);\n        setServerError(false);\n        setIsLoading(true);\n\n        const formData = {\n            ...form,\n            ...data,\n        };\n\n        API.post<any>('calculator/maximummortgageformonthlypayment', getPostData(formData))\n            .then((res) => {\n                updateData({\n                    ...res,\n                });\n                setIsLoading(false);\n                setCompletedText(\n                    mortgageTypeCards.filter(\n                        (type) => type.defaultValue === data[formItems.mortgageType],\n                    )[0].label,\n                );\n            })\n            .catch((error) => {\n                setServerError(true);\n                updateData({\n                    maximumMortgageForMonthlyPayment: 0,\n                });\n                setIsLoading(false);\n            })\n            .finally(() => {\n                window.scrollTo({\n                    top: 0,\n                    behavior: 'smooth',\n                });\n            });\n    };\n\n    return (\n        <Fragment>\n            <StepperHeader title=\"Hypotheekvorm\" id={id} completedText={completedText} />\n\n            <StepperContent>\n                <Text as=\"h3\">Kies je hypotheekvorm</Text>\n\n                <form onSubmit={handleSubmit(onSubmit)}>\n                    <MortgageTypeCardWrapper>\n                        {mortgageTypeCards.map((mortgageType, key) => (\n                            <MortgageTypeCard\n                                key={key}\n                                label={mortgageType.label}\n                                description={mortgageType.description}\n                                name={mortgageType.name}\n                                id={`${mortgageType.name}-${key}`}\n                                register={register}\n                                checked={mortgageType.checked}\n                                defaultValue={mortgageType.defaultValue}\n                                onClick={(value) => setSelectedMortgageType(parseInt(value))}\n                            />\n                        ))}\n                    </MortgageTypeCardWrapper>\n                    <hr />\n                    <div className=\"u-margin-top--sm u-margin-bottom--md\">\n                        <Text as=\"h3\">Nationale Hypotheek Garantie</Text>\n                        <p>\n                            Wil je de hypotheek berekenen met of zonder Nationale Hypotheek Garantie*\n                            <img\n                                data-tip=\"De <a href='https://www.hypotheker.nl/begrippenlijst/huis-kopen/nationale-hypotheek-garantie/'>Nationale Hypotheek Garantie (NHG)</a> is een garantie op hypotheken tot 355.000 euro. <br /> Sluit je een NHG-hypotheek af, dan leen je verantwoord en betaalbaar. <br /> Met een NHG-hypotheek loop je als woningeigenaar minder risico en profiteer je van een <a href='https://www.hypotheker.nl/begrippenlijst/hypotheek-afsluiten/rentekorting-hypotheek/'>rentekorting</a>.\"\n                                src={`${assetPrefix}/assets/svg/info.svg`}\n                                alt=\"info\"\n                            />\n                        </p>\n                        <ReactTooltip\n                            place={'right'}\n                            effect={'solid'}\n                            data-iscapture=\"true\"\n                            clickable={true}\n                            textColor=\"white\"\n                            html={true}\n                        />\n                        <InputHolder>\n                            <InputHolderItem isSmall={true}>\n                                <Radio\n                                    label=\"Met NHG\"\n                                    checked={isNhg}\n                                    name={formItems.isNhg}\n                                    id={`${formItems.isNhg}-1`}\n                                    defaultValue={'true'}\n                                    register={register}\n                                />\n                            </InputHolderItem>\n                            <InputHolderItem isSmall={true}>\n                                <Radio\n                                    label=\"Zonder NHG\"\n                                    name={formItems.isNhg}\n                                    id={`${formItems.isNhg}-2`}\n                                    defaultValue={'false'}\n                                    register={register}\n                                    validation={{\n                                        onChange: (e: any) =>\n                                            setIsNhg(e.currentTarget.value === 'true'),\n                                    }}\n                                />\n                            </InputHolderItem>\n                        </InputHolder>\n                    </div>\n                    <hr />\n                    <Text as=\"h3\">Adviesrente en rentevaste periode</Text>\n                    <p>\n                        De rentevaste periode is de afgesproken periode dat de rente gelijk blijft.\n                        Het rentepercentage voor jouw hypotheek kun je voor verschillende rentevaste\n                        perioden vastzetten. Dit kan variëren van een maand tot 30 jaar. <br />\n                        <a\n                            href=\"https://www.hypotheker.nl/begrippenlijst/hypotheek-afsluiten/rentevaste-periode/\"\n                            // eslint-disable-next-line react/jsx-no-target-blank\n                            target=\"_blank\">\n                            Leef meer over rentevaste periode\n                        </a>\n                    </p>\n                    {!changeinterestSettings ? (\n                        <>\n                            <div className=\"u-flex u-flex-between\">\n                                <div>\n                                    <div className=\"u-h4\">\n                                        <b>Rente van {dotsToComma(selectedInterest)}%</b>\n                                    </div>\n                                    <div>Looptijd van 30 Jaar</div>\n                                    <div>Rentevaste periode van {selectedPeriod} Jaar</div>\n                                </div>\n                                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid  */}\n                                <Button\n                                    variant=\"ghost\"\n                                    label=\"Aanpassen\"\n                                    onClick={() => setChangeInterestSettings(true)}></Button>\n                            </div>\n                            <Input\n                                type=\"hidden\"\n                                id={formItems.interest}\n                                name={formItems.interest}\n                                register={register}\n                                hasError={errors.interest}\n                                defaultValue={selectedInterest}\n                            />\n                            <Input\n                                type=\"hidden\"\n                                id={formItems.period}\n                                name={formItems.period}\n                                register={register}\n                                defaultValue={selectedPeriod}\n                            />\n                        </>\n                    ) : (\n                        <InputHolder>\n                            <InputHolderItem>\n                                <Select\n                                    label=\"Rentevaste periode\"\n                                    options={PeriodOptions}\n                                    id={formItems.period}\n                                    name={formItems.period}\n                                    register={register}\n                                    defaultOption=\"10\"\n                                    validation={{\n                                        required: true,\n                                        onChange: (e: any) =>\n                                            setSelectedPeriod(e.currentTarget.value),\n                                    }}\n                                />\n                                {errors[formItems.period] && (\n                                    <span className=\"form__error\">Vul een geldige looptijd in</span>\n                                )}\n                            </InputHolderItem>\n                            <InputHolderItem>\n                                <Button\n                                    extraClasses=\"u-float--right\"\n                                    variant=\"ghost\"\n                                    label=\"Opslaan\"\n                                    onClick={() => setChangeInterestSettings(false)}></Button>\n                            </InputHolderItem>\n                        </InputHolder>\n                    )}\n\n                    <StepperSubmit id={id} isValidated={isValid} variant=\"primary\" />\n                </form>\n            </StepperContent>\n        </Fragment>\n    );\n};\n","import React, { FunctionComponent } from 'react';\nimport { Stepper, StepperStep } from '../../shared/Stepper';\nimport { Step1, Step2 } from './steps';\n\ninterface StepsArray {\n    component: FunctionComponent<{ id: number }>;\n}\n\nconst steps: StepsArray[] = [\n    {\n        component: Step1,\n    },\n    {\n        component: Step2,\n    },\n];\n\nexport const MaxLoanCalculator = () => {\n    return (\n        <Stepper\n            defaultUrl={'https://www.hypotheker.nl/'}\n            defaultPreviousText=\"Terug\"\n            previousButtonTexts={['Jouw gegevens']}>\n            {steps &&\n                steps.map((step, key) => (\n                    <StepperStep id={key} key={key}>\n                        <step.component id={key} />\n                    </StepperStep>\n                ))}\n        </Stepper>\n    );\n};\n","import React, { Fragment, FunctionComponent, useState, useContext, useEffect } from 'react';\n\nimport { Text } from '../../../shared/Text';\nimport { StepperContent, StepperHeader, StepperSubmit } from '../../../shared/Stepper';\nimport { useForm } from 'react-hook-form';\nimport { Input } from '../../../shared/Input/Input';\nimport { formItems } from '../formItems';\nimport { FormContext } from '../../../../store/context/formContext';\nimport { numberToCurrency } from '../../../../utils/prices';\nimport { parseSearchQuery } from '../../../../utils/params';\n\nexport const Step1: FunctionComponent<{ id: number }> = ({ id }) => {\n    const {\n        register,\n        handleSubmit,\n        setValue,\n        getValues,\n        formState: { errors, isValid },\n    } = useForm<any>({\n        mode: 'onBlur',\n    });\n\n    const [completedText, setCompletedText] = useState('');\n\n    const { updateForm, form } = useContext(FormContext);\n\n    const { bedrag } = parseSearchQuery(window.location.search);\n\n    const onSubmit = (data: any) => {\n        updateForm(data);\n        setCompletedText(numberToCurrency(data[formItems.monthlyCost], true));\n    };\n\n    useEffect(() => {\n        if (form) {\n            Object.entries(form).forEach((item: any[]) => {\n                setValue(item[0], item[1], { shouldValidate: true });\n            });\n        }\n        if (bedrag) {\n            setValue(formItems.monthlyCost, bedrag)\n        }\n    }, [form, setValue]);\n\n    return (\n        <Fragment>\n            <StepperHeader title=\"Jouw gegevens\" id={id} completedText={completedText} />\n\n            <StepperContent>\n                <form onSubmit={handleSubmit(onSubmit)}>\n                    <Text as=\"h3\">Hoeveel wil je maximaal lenen?</Text>\n\n                    <Input\n                        label=\"Hoeveel wil je (bruto) per maand betalen?*\"\n                        type=\"currency\"\n                        name={formItems.monthlyCost}\n                        id={formItems.monthlyCost}\n                        placeholder=\"€\"\n                        value={getValues(formItems.monthlyCost)}\n                        register={register}\n                        hasError={errors[formItems.monthlyCost]}\n                        validation={{ required: true }}\n                    />\n\n                    {errors[formItems.monthlyCost] && (\n                        <span className=\"form__error\">Vul een geldig bedrag in</span>\n                    )}\n\n                    <StepperSubmit id={id} isValidated={isValid} />\n                </form>\n            </StepperContent>\n        </Fragment>\n    );\n};\n","interface RequestParams {\n\t[key: string]: string\n}\n\nexport const parseSearchQuery = (searchString: string): RequestParams => {\n\tconst result: RequestParams = {};\n\tconst entriesIterator = new URLSearchParams(searchString).entries();\n\tconst entries = Array.from(entriesIterator);\n\n\tentries.forEach((param) => {\n\t\t\tresult[param[0]] = param[1];\n\t\t}\n\t);\n\n\treturn result;\n};\n","import { numberToCurrency } from '../utils/prices';\n\ninterface getWhatsAppShareTexState {\n    monthlyCost: any;\n    maximumMortgageForMonthlyPayment: number | undefined;\n}\n\nexport const getWhatsAppShareText = (state: getWhatsAppShareTexState, shareUrl: any) => {\n    let shareText = '';\n\n    shareText =\n        shareText +\n        `Ik heb mijn maximale hypotheek berekend op hypotheker.nl. Ik mag maximaal ${numberToCurrency(\n            state?.maximumMortgageForMonthlyPayment || 0,\n            true,\n        )} lenen. Dat kost bruto per maand ${numberToCurrency(state.monthlyCost, true)}.`;\n\n    shareText += ` Bekijk de berekening ${shareUrl}`;\n    return shareText;\n};\n","import React, { FunctionComponent, useContext } from 'react';\nimport useMediaQuery from '../../utils/hooks/use-media';\nimport { dotsToComma, mainMediaMobile } from '../../services/helpers';\nimport { Close } from '../../icons/components';\nimport { FormContext } from '../../store/context/formContext';\nimport { numberToCurrency } from '../../utils/prices';\n\ninterface OverviewModalProps {\n    toggleOverview: any;\n    componentRef: any;\n}\nconst OverviewModal: FunctionComponent<OverviewModalProps> = ({ toggleOverview, componentRef }) => {\n    const mediaMatches = useMediaQuery(mainMediaMobile);\n    const { form, calculatedMortgageType, data, selectedPeriod } = useContext(FormContext);\n\n    return (\n        <div className=\"modal-wrapper\">\n            <div\n                className={`overview-modal-wrapper ${\n                    mediaMatches && 'overview-modal-wrapper--mobile'\n                }`}>\n                <div className=\"close-overview\" onClick={toggleOverview}>\n                    <Close width={25} height={25} />\n                </div>\n\n                <div className=\"overview-modal\" ref={componentRef}>\n                    <div ref={componentRef}>\n                        <div className=\"overview-modal-title\">Jouw berekening</div>\n\n                        <div className=\"overview-modal-subtitle overview-modal-subtitle-with-background overview-modal-field\">\n                            <div>Maximale hypotheekbedrag</div>\n                            <div>\n                                {numberToCurrency(\n                                    data?.maximumMortgageForMonthlyPayment || 0,\n                                    true,\n                                )}\n                            </div>\n                        </div>\n                        <div className=\"overview-modal-deze\">\n                            <h3>Deze berekening is gebaseerd op:</h3>\n                        </div>\n                        <div className=\"overview-modal-deze-wrapper\">\n                            <div className=\"overview-modal-field \">\n                                <div>Gewenste bruto maandlasten</div>\n                                <div>{numberToCurrency(form?.monthlyCost || 0, true)}</div>\n                            </div>\n                            <div className=\"overview-modal-field\">\n                                <div>Hypotheekvorm</div>\n\n                                <div>{calculatedMortgageType === 4 ? 'Annuïteiten' : 'Linear'}</div>\n                            </div>\n\n                            <div className=\"overview-modal-field\">\n                                <div>Looptijd</div>\n\n                                <div>30 jaar</div>\n                            </div>\n\n                            <div className=\"overview-modal-field\">\n                                <div>Rente</div>\n\n                                <div>{dotsToComma(form?.interest)} %</div>\n                            </div>\n\n                            <div className=\"overview-modal-field\">\n                                <div>Rentevaste periode</div>\n\n                                <div>{selectedPeriod} jaar rentevast</div>\n                            </div>\n                            <div className=\"overview-modal-field\">\n                                <div>Nationale Hypotheek Garantie (NHG)</div>\n\n                                <div>{form.isNhg === 'true' ? 'Ja' : 'Nee'}</div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default OverviewModal;\n","import React, { FunctionComponent, useContext, useEffect, useRef, useState } from 'react';\nimport { getShortUrl } from '../../../services/calculationsApi';\nimport { useReactToPrint } from 'react-to-print';\nimport { FormContext } from '../../../store/context/formContext';\nimport { numberToCurrency } from '../../../utils/prices';\nimport { Button } from '../../shared/Button';\nimport { Text } from '../../shared/Text';\nimport { getWhatsAppShareText } from '../../../services/shareHelper';\nimport ReactDOM from 'react-dom';\nimport OverviewModal from '../../modals/OverviewModal';\n// import SharePdfModal from '../../modals/SharePdfModal';\nimport { assetPrefix } from '../../../utils/assetPrefix';\nimport { dotsToComma } from '../../../services/helpers';\n\nexport interface MaxLoanCalculatorInformation {\n    maximumMortgageForMonthlyPayment: number;\n}\n\nexport const MaxLoanCalculatorInformation: FunctionComponent<{\n    data: MaxLoanCalculatorInformation | null;\n}> = ({ data }) => {\n    const { hasServerError, form, nhg, selectedInterest, selectedPeriod, calculatedMortgageType } =\n        useContext(FormContext);\n    const [isOverviewOpened, setIsOverviewOpened] = useState(false);\n    const [isCalculated, setIsCalculated] = useState(false);\n\n    const componentRef: any = useRef();\n    const handlePrint = useReactToPrint({\n        content: () => componentRef.current,\n    });\n\n    useEffect(() => {\n        if (data?.maximumMortgageForMonthlyPayment !== undefined) {\n            data?.maximumMortgageForMonthlyPayment > 0\n                ? setIsCalculated(true)\n                : setIsCalculated(false);\n        }\n    }, [data]);\n\n    const toggleOverview = () => {\n        setIsOverviewOpened(!isOverviewOpened);\n    };\n\n    const print = () => {\n        toggleOverview();\n\n        setTimeout(() => {\n            handlePrint();\n        }, 200);\n    };\n\n    const shareWhatsApp = async () => {\n        const url = 'url';\n        const { hostname } = window.location;\n        const state = {\n            monthlyCost: form?.monthlyCost,\n            maximumMortgageForMonthlyPayment: data?.maximumMortgageForMonthlyPayment,\n        };\n\n        if (hostname.indexOf('localhost') === -1) {\n            const shortUrl = await getShortUrl(url, '&utm_source=berekening&utm_medium=whatsapp');\n            const shareText = getWhatsAppShareText(state, shortUrl.link);\n            window.open(`https://api.whatsapp.com/send?text=${shareText}`);\n        } else {\n            console.log(url);\n            console.log(getWhatsAppShareText(state, window.location));\n        }\n    };\n\n    return (\n        <div className=\"c-max-loan-calculator-information\">\n            <Text as=\"h1\">Hoeveel wil je lenen?</Text>\n\n            {hasServerError ? (\n                <div className=\"form__error\">\n                    <Text as=\"h3\">\n                        Er is een onverwacht probleem opgetreden, probeer het later opnieuw.\n                    </Text>\n                </div>\n            ) : (\n                <>\n                    <div className=\"u-flex u-flex-between u-flex-middle\">\n                        <div className=\"u-h3\">Maximale hypotheek</div>\n                        <div className=\"u-h2\">\n                            {numberToCurrency(data?.maximumMortgageForMonthlyPayment || 0, true)}\n                        </div>\n                    </div>\n                    {data?.maximumMortgageForMonthlyPayment && nhg &&\n                        data?.maximumMortgageForMonthlyPayment > nhg.existingBuilding &&\n                        form?.isNhg === 'true' && (\n                            <div className=\"form__error\">\n                                <Text as=\"p\">\n                                    Je hebt gekozen voor een hypotheek met NHG. Op basis van deze\n                                    maandlasten komt het hypotheekbedrag echter boven de NHG grens\n                                    ({numberToCurrency(nhg?.existingBuilding, true)}) uit. Bereken opnieuw zonder NHG.\n                                </Text>\n                            </div>\n                        )}\n                </>\n            )}\n            <hr />\n\n            <div className=\"share-buttons\">\n                <div className=\"share-print-and-pdf-buttons\">\n                    <button\n                        className=\"share-button share-button--icon\"\n                        disabled={!isCalculated}\n                        onClick={print}>\n                        <img\n                            src={`${assetPrefix}/assets/svg/${\n                                !isCalculated ? 'grey/' : ''\n                            }print.svg`}\n                            alt=\"\"\n                        />\n                    </button>\n\n                    <button\n                        className=\"share-button share-button--icon\"\n                        disabled={!isCalculated}\n                        onClick={shareWhatsApp}>\n                        <img\n                            src={`${assetPrefix}/assets/svg/${\n                                !isCalculated ? 'grey/' : ''\n                            }whatsapp.svg`}\n                            alt=\"\"\n                        />\n                    </button>\n                </div>\n\n                <button\n                    className=\"share-button share-button--calculation\"\n                    disabled={!isCalculated || !data}\n                    onClick={toggleOverview}>\n                    Toon volledige berekening\n                </button>\n            </div>\n\n            <hr />\n            {isCalculated && (\n                <div>\n                    <h2 className=\"u-h3\">Over deze berekening</h2>\n                    <p>\n                        De maximale hypotheek is gebaseerd op de door jou ingevoerde gewenste bruto\n                        maandlasten, de laagste hypotheekrente op dit moment{' '}\n                        {dotsToComma(selectedInterest)}%, (\n                        {calculatedMortgageType === 4\n                            ? 'Annuïteitenhypotheek'\n                            : 'Lineaire hypotheek'}\n                        , {selectedPeriod} jaar vast). Maak gebruik van onze maximale hypotheek\n                        berekening om een goed beeld te krijgen van je daadwerkelijke leencapaciteit\n                        op basis van je inkomen en eventuele andere financiële verplichtingen.\n                    </p>\n                    <Button\n                        url=\"https://www.hypotheker.nl/zelf-berekenen/hoeveel-kan-ik-lenen/\"\n                        label=\"Maximale hypotheek berekenen\"\n                        variant=\"tertiary\"\n                    />\n                    <hr />\n                </div>\n            )}\n\n            <h2 className=\"u-h3\">Afspraak maken met onze hypotheekadviseur?</h2>\n            <p>\n                Meer weten over de mogelijkheden voor jouw persoonlijke situatie? Maak een afspraak\n                bij een van onze onafhankelijke hypotheekadviseurs. Het eerste gesprek is op onze\n                kosten.\n            </p>\n            <Button\n                url=\"https://www.hypotheker.nl/afspraak-maken-hypotheekadviseur/\"\n                label=\"Afspraak maken\"\n                variant=\"tertiary\"\n            />\n\n            {isOverviewOpened\n                ? ReactDOM.createPortal(\n                      <OverviewModal toggleOverview={toggleOverview} componentRef={componentRef} />,\n                      (document as any).getElementById('overview-modal-portal'),\n                  )\n                : null}\n        </div>\n    );\n};\n","import React, { FunctionComponent } from 'react';\nimport LoaderDotsIcon from '../../../icons/components/LoaderDots';\n\nimport { Text } from '../Text';\n\nexport const Loader: FunctionComponent<{ isLoading: boolean }> = ({ isLoading }) => {\n    return (\n        <div className={`c-loader ${isLoading ? 'loader--is-loading' : ''}`}>\n            <div className=\"loader__modal\">\n                <Text as=\"h3\">\n                    We zijn nu de maximale <br /> hypotheek aan het berekenen\n                </Text>\n                <LoaderDotsIcon width={100} height={100} />\n            </div>\n        </div>\n    );\n};\n","import React, { useContext } from 'react';\nimport { Column } from '../components/shared/Column';\nimport { Grid } from '../components/shared/Grid';\n\nimport { BaseLayout } from '../components/template/BaseLayout';\nimport { MaxLoanCalculator } from '../components/features/MaxLoanCalculator';\nimport { Container } from '../components/shared/Container';\nimport { MaxLoanCalculatorInformation } from '../components/features/MaxLoanCalculatorInformation';\nimport { FormContext } from '../store/context/formContext';\nimport { Loader } from '../components/shared/Loader';\n\nexport const Home = () => {\n    const { data, isLoading } = useContext(FormContext);\n    return (\n        <BaseLayout>\n            <Container>\n                <Grid>\n                    <Column cols={[12, null, null, 6]}>\n                        <MaxLoanCalculator />\n                    </Column>\n\n                    <Column cols={[12, null, null, 5]} pre={[null, null, null, 1]}>\n                        <MaxLoanCalculatorInformation data={data} />\n                    </Column>\n                </Grid>\n            </Container>\n\n            <Loader isLoading={isLoading} />\n            <div id=\"overview-modal-portal\" />\n        </BaseLayout>\n    );\n};\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\ntype Config = {\n  onSuccess?: (registration: ServiceWorkerRegistration) => void;\n  onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(\n      process.env.PUBLIC_URL,\n      window.location.href\n    );\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' }\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Home } from './pages/home';\n\nimport * as serviceWorker from './serviceWorker';\nimport { StepperProvider } from './store/stepper/StepperContext';\nimport { FormProvider } from './store/context/formContext';\n\nimport './styles/main.scss';\n\nReactDOM.render(\n    <React.StrictMode>\n        <StepperProvider>\n            <FormProvider>\n                <Home />\n            </FormProvider>\n        </StepperProvider>\n    </React.StrictMode>,\n    document.getElementById('root'),\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}