@wayke-se/components-react 3.0.0-beta.7 → 3.0.0-beta.8

package/{src/components/ExtendContent/wrapper.tsx → dist-src/components/ExtendContent/wrapper.js}

@@ -1,14 +1,7 @@
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div``;
-
-type ExtendProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-  extended?: boolean;
-};
-
-export const Extend = styled.div<ExtendProps>`
+export const Wrapper = styled.div ``;
+export const Extend = styled.div `
   position: relative;
   max-height: 175px;
   overflow: hidden;
@@ -23,9 +16,8 @@ export const Extend = styled.div<ExtendProps>`
     background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
   }
 
-  ${({ extended }) =>
-    extended &&
-    css`
+  ${({ extended }) => extended &&
+    css `
       max-height: none;
 
       :after {
@@ -33,8 +25,7 @@ export const Extend = styled.div<ExtendProps>`
       }
     `}
 `;
-
-export const Action = styled.div`
+export const Action = styled.div `
   display: flex;
   justify-content: flex-end;
   margin-top: ${size(2)};

package/dist-src/components/ExtendInfo/index.js

@@ -0,0 +1,15 @@
+import React, { useState, useCallback } from 'react';
+import { Wrapper, Header, Title, Info, InfoBtn, Extend } from './wrapper';
+import { IconInfo } from '../Icon/index';
+const ExtendInfo = ({ title, children }) => {
+    const [extend, setExtend] = useState(false);
+    const onToggleExtend = useCallback(() => setExtend(!extend), [extend]);
+    return (React.createElement(Wrapper, null,
+        React.createElement(Header, null,
+            React.createElement(Title, null, title),
+            children && (React.createElement(Info, null,
+                React.createElement(InfoBtn, { onClick: onToggleExtend, title: "Mer information" },
+                    React.createElement(IconInfo, { block: true }))))),
+        extend && React.createElement(Extend, null, children)));
+};
+export default ExtendInfo;

package/{src/components/ExtendInfo/wrapper.tsx → dist-src/components/ExtendInfo/wrapper.js}

@@ -1,24 +1,18 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-
-export const Wrapper = styled.div``;
-
-export const Header = styled.div`
+export const Wrapper = styled.div ``;
+export const Header = styled.div `
   display: flex;
   align-items: center;
 `;
-
-export const Title = styled.div``;
-
-export const Info = styled.div`
+export const Title = styled.div ``;
+export const Info = styled.div `
   margin-left: ${size(1)};
 `;
-
 export const InfoBtn = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
   position: relative;
   display: block;
   font: inherit;
@@ -54,8 +48,7 @@ export const InfoBtn = styled(ButtonReset).attrs(() => ({
     transform: scale(0.95);
   }
 `;
-
-export const Extend = styled.div`
+export const Extend = styled.div `
   padding-top: ${size(1)};
   margin-top: ${size(1)};
   border-top: 1px solid ${(props) => props.theme.color.border};

package/dist-src/components/Filter/index.js

@@ -0,0 +1,59 @@
+import React, { useState, useCallback } from 'react';
+import { List, Item, Action, Label, Indicator, IndicatorValue } from './wrapper';
+import { FacetIdToTitle } from '../../utils/formats';
+import { PRICE, MILEAGE, MODEL_YEAR } from '../../utils/constants';
+import useSearch from '../../State/Search/useSearch';
+import FilterPanel from '../FilterPanel/index';
+const isSelected = (f, searchParams) => {
+    switch (f.id) {
+        case PRICE:
+        case MILEAGE:
+        case MODEL_YEAR:
+            return searchParams.has(`${f.id}.min`) || searchParams.has(`${f.id}.max`) ? 1 : 0;
+        default:
+            return f.filters.filter((filter) => filter.selected).length;
+    }
+};
+const Filter = ({ filterList }) => {
+    var _a;
+    const { queryFilter, initialFacets, loading, response, onFilterUpdate } = useSearch();
+    const facets = response === null || response === void 0 ? void 0 : response.facets;
+    const [facet, setFacet] = useState();
+    const onSelectFacet = useCallback((nextFacet) => setFacet(nextFacet), []);
+    const onClose = useCallback(() => setFacet(undefined), []);
+    if (!facets) {
+        return null;
+    }
+    const filterNames = filterList ? filterList.map((x) => x.filterName) : undefined;
+    const filteredFacets = (_a = facets === null || facets === void 0 ? void 0 : facets.filter((x) => x.id !== 'segment')) === null || _a === void 0 ? void 0 : _a.filter((f) => (filterNames ? filterNames.includes(f.id) : true)).sort((a, b) => filterNames
+        ? filterNames.indexOf(a.id) -
+            filterNames.indexOf(b.id)
+        : 0).map((x) => {
+        const match = filterList === null || filterList === void 0 ? void 0 : filterList.find((y) => y.filterName === x.id);
+        if (match === null || match === void 0 ? void 0 : match.displayName) {
+            return {
+                ...x,
+                displayName: match.displayName,
+            };
+        }
+        return {
+            ...x,
+            displayName: FacetIdToTitle(x.id),
+        };
+    });
+    return (React.createElement(React.Fragment, null,
+        initialFacets && facet && (React.createElement(FilterPanel, { filterList: filterList, facet: facet, loading: loading, filteredFacets: filteredFacets, numberOfHits: (response === null || response === void 0 ? void 0 : response.documentList.numberOfHits) || 0, onFilterUpdate: onFilterUpdate, onClose: onClose })),
+        React.createElement(List, null, filteredFacets
+            .filter((x) => x.filters.length)
+            .map((f) => {
+            const selected = isSelected(f, queryFilter.searchParams);
+            return (React.createElement(Item, { key: f.id },
+                React.createElement(Action, { onClick: () => onSelectFacet(f), title: f.displayName, "aria-label": f.displayName, className: selected > 0
+                        ? 'wayke__theme wayke__color--primary-bg wayke__font--bold'
+                        : 'wayke__theme wayke__font--regular' },
+                    React.createElement(Label, null, f.displayName),
+                    selected > 0 && (React.createElement(Indicator, null,
+                        React.createElement(IndicatorValue, null, selected))))));
+        }))));
+};
+export default Filter;

package/{src/components/Filter/wrapper.tsx → dist-src/components/Filter/wrapper.js}

@@ -1,9 +1,7 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-
-export const List = styled.ul`
+export const List = styled.ul `
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -11,12 +9,10 @@ export const List = styled.ul`
   padding: 0;
   margin: ${size(-0.5)};
 `;
-
-export const Item = styled.li`
+export const Item = styled.li `
   padding: ${size(0.5)};
 `;
-
-export const Action = styled(ButtonReset)`
+export const Action = styled(ButtonReset) `
   position: relative;
   display: flex;
   align-items: center;
@@ -51,12 +47,10 @@ export const Action = styled(ButtonReset)`
     transform: scale(0.95);
   }
 `;
-
-export const Label = styled.div`
+export const Label = styled.div `
   z-index: 1;
 `;
-
-export const Indicator = styled.div`
+export const Indicator = styled.div `
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -69,8 +63,7 @@ export const Indicator = styled.div`
   border-radius: 999px;
   z-index: 1;
 `;
-
-export const IndicatorValue = styled.div`
+export const IndicatorValue = styled.div `
   font-family: sans-serif; // Default font to guarantee visibility
   font-size: 0.75rem;
   font-weight: bold;

package/dist-src/components/FilterPanel/checkListFacet.js

@@ -0,0 +1,29 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import Checklist from '../Checklist/index';
+import OverflowBox from '../OverflowBox/index';
+import useSearch from '../../State/Search/useSearch';
+const ChecklistFacet = ({ facet }) => {
+    const { loading, error, onFilterUpdate } = useSearch();
+    const [selected, setSelected] = useState();
+    useEffect(() => {
+        setSelected(undefined);
+    }, [facet, error]);
+    const onClick = useCallback((f) => {
+        if (!loading) {
+            setSelected({
+                ...selected,
+                [f.displayName]: !f.selected,
+            });
+            onFilterUpdate(f.query);
+        }
+    }, [loading]);
+    return (React.createElement(OverflowBox, null,
+        React.createElement(Checklist, { items: facet.filters
+                .sort((a, b) => a.displayName.localeCompare(b.displayName))
+                .map((f) => ({
+                label: f.displayName,
+                onClick: () => onClick(f),
+                active: (selected === null || selected === void 0 ? void 0 : selected[f.displayName]) !== undefined ? selected[f.displayName] : f.selected,
+            })) })));
+};
+export default ChecklistFacet;

package/dist-src/components/FilterPanel/colorFacet.js

@@ -0,0 +1,29 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import ColorSelect from '../ColorSelect/index';
+import useSearch from '../../State/Search/useSearch';
+import { getHexColorFromDisplayName } from '../../utils/converters';
+const ColorSelectFacet = ({ facet }) => {
+    const { loading, error, onFilterUpdate } = useSearch();
+    const [selected, setSelected] = useState();
+    useEffect(() => {
+        setSelected(undefined);
+    }, [facet, error]);
+    const onClick = useCallback((f) => {
+        if (!loading) {
+            setSelected({
+                ...selected,
+                [f.displayName]: !f.selected,
+            });
+            onFilterUpdate(f.query);
+        }
+    }, [loading]);
+    return (React.createElement(ColorSelect, { items: facet.filters
+            .sort((a, b) => a.displayName.localeCompare(b.displayName))
+            .map((f) => ({
+            label: f.displayName,
+            onClick: () => onClick(f),
+            active: (selected === null || selected === void 0 ? void 0 : selected[f.displayName]) !== undefined ? selected[f.displayName] : f.selected,
+            hex: [getHexColorFromDisplayName(f.displayName)],
+        })) }));
+};
+export default ColorSelectFacet;

package/dist-src/components/FilterPanel/faceSelector.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import CheckListFacet from './checkListFacet';
+import ColorSelectFacet from './colorFacet';
+import RangeFacet from './rangeFacet';
+import { MANUFACTURER, MODEL_SERIES, FUEL_TYPE, GEARBOX_TYPE, ENVIRONMENT_CLASS, SEGMENT, DRIVING_WHEEL, COLOR, PRICE, BRANCH, MILEAGE, MODEL_YEAR, LEASING_PRICE, } from '../../utils/constants';
+const FacetSelector = ({ facet }) => {
+    switch (facet.id) {
+        case MANUFACTURER:
+        case MODEL_SERIES:
+        case FUEL_TYPE:
+        case GEARBOX_TYPE:
+        case BRANCH:
+        case ENVIRONMENT_CLASS:
+        case SEGMENT:
+        case DRIVING_WHEEL:
+            return React.createElement(CheckListFacet, { facet: facet });
+        case COLOR:
+            return React.createElement(ColorSelectFacet, { facet: facet });
+        case PRICE:
+            return React.createElement(RangeFacet, { facet: facet, unit: "kr", formatValues: true });
+        case LEASING_PRICE:
+            return React.createElement(RangeFacet, { facet: facet, unit: "kr/m\u00E5n", formatValues: true });
+        case MILEAGE:
+            return React.createElement(RangeFacet, { facet: facet, unit: "mil", formatValues: true });
+        case MODEL_YEAR:
+            return React.createElement(RangeFacet, { facet: facet, unit: "\u00E5r" });
+        default:
+            return null;
+    }
+};
+export default FacetSelector;

package/dist-src/components/FilterPanel/index.js

@@ -0,0 +1,24 @@
+import React, { useCallback } from 'react';
+import Panel from '../Panel/index';
+import { FooterAction, FooterActionItem } from '../Panel/wrapper';
+import { ButtonSecondary, ButtonContent, ButtonPrimary } from '../Button/index';
+import Accordion, { AccordionItem } from '../Accordion/index';
+import { Repeat } from '../Repeat/index';
+import FacetSelector from './faceSelector';
+const FilterPanel = ({ facet, filteredFacets, numberOfHits, loading, onFilterUpdate, onClose, }) => {
+    const onClearFilters = useCallback(() => onFilterUpdate(''), []);
+    return (React.createElement(Panel, { title: "Filtrera", onClose: onClose, footer: React.createElement(React.Fragment, null,
+            React.createElement(FooterAction, null,
+                React.createElement(FooterActionItem, null,
+                    React.createElement(ButtonSecondary, { fullWidth: true, disabled: loading, onClick: onClearFilters },
+                        React.createElement(ButtonContent, null, "Rensa alla"))),
+                React.createElement(FooterActionItem, null,
+                    React.createElement(ButtonPrimary, { fullWidth: true, disabled: loading, onClick: onClose },
+                        React.createElement(ButtonContent, null, `Visa ${numberOfHits} ${numberOfHits === 1 ? 'bil' : 'bilar'}`))))) },
+        React.createElement(Accordion, null, filteredFacets
+            .filter((x) => x.filters.length)
+            .map((f) => (React.createElement(AccordionItem, { key: f.displayName, heading: f.displayName, isActive: f.id === (facet === null || facet === void 0 ? void 0 : facet.id) },
+            React.createElement(Repeat, null,
+                React.createElement(FacetSelector, { facet: f }))))))));
+};
+export default FilterPanel;

package/dist-src/components/FilterPanel/rangeFacet.js

@@ -0,0 +1,84 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import RangeSlider from '../RangeSlider/index';
+import useSearch from '../../State/Search/useSearch';
+const getInitialValues = (domain, facet, searchParams) => {
+    const facetMin = domain[0]; //parseInt(facet.filters[0].displayName, 10);
+    const _queryMin = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(`${facet.id}.min`)) || null;
+    const facetMax = domain[domain.length - 1]; //parseInt(facet.filters[facet.filters.length - 1].displayName, 10);
+    const _queryMax = (searchParams === null || searchParams === void 0 ? void 0 : searchParams.get(`${facet.id}.max`)) || null;
+    const queryMin = parseInt(_queryMin === null ? `${facetMin}` : _queryMin, 10);
+    const min = facetMin > queryMin ? facetMin : queryMin;
+    const queryMax = parseInt(_queryMax === null ? `${facetMax}` : _queryMax, 10);
+    const max = queryMax > facetMax ? facetMin : queryMax;
+    return min || max ? [min ? min : domain[0], max ? max : domain[1]] : domain;
+};
+const averageDelta = ([x, ...xs]) => {
+    if (x === undefined)
+        return NaN;
+    return xs.reduce(([acc, last], x) => [acc + (x - last), x], [0, x])[0] / xs.length;
+};
+const getSteps = (initialAllValues) => {
+    const delta = averageDelta(initialAllValues);
+    const max = Math.floor(initialAllValues[initialAllValues.length - 1] * 1000) / 1000;
+    if (delta > 1000)
+        return new Array(max / 1000 + 1).fill('').map((x, i) => i * 1000);
+    if (delta <= 1000 && delta >= 500)
+        return new Array(max / 500 + 1).fill('').map((x, i) => i * 500);
+    return initialAllValues;
+};
+const RangeFacet = ({ facet, unit, formatValues }) => {
+    var _a, _b, _c;
+    const { loading, queryFilter, initialFacets, onFilterUpdate } = useSearch();
+    const initialFacet = initialFacets === null || initialFacets === void 0 ? void 0 : initialFacets.find((x) => x.id === facet.id);
+    const maxPrefix = (_b = (_a = initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters[(initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.length) - 1]) === null || _a === void 0 ? void 0 : _a.displayName) === null || _b === void 0 ? void 0 : _b.includes('+');
+    const [state, setValues] = useState(undefined);
+    useEffect(() => {
+        const _initialAllValues = (initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.map((f) => parseInt(f.displayName.replace(/[\<\>+-]+/g, ''), 10))) || [1, 2];
+        const _steps = getSteps(_initialAllValues);
+        const domain = [_steps[0], _steps[_steps.length - 1]];
+        setValues({
+            id: initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.id,
+            steps: _steps,
+            domain: [_steps[0], _steps[_steps.length - 1]],
+            values: (initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.length)
+                ? getInitialValues(domain, initialFacet, queryFilter.searchParams)
+                : [0, 0],
+        });
+    }, [initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.id]);
+    useEffect(() => {
+        var _a, _b;
+        if (state === null || state === void 0 ? void 0 : state.id) {
+            const init = (initialFacet === null || initialFacet === void 0 ? void 0 : initialFacet.filters.length)
+                ? getInitialValues(state.domain, initialFacet, queryFilter.searchParams)
+                : [0, 0];
+            const minStr = (_a = queryFilter.searchParams) === null || _a === void 0 ? void 0 : _a.get(`${facet.id}.min`);
+            const maxStr = (_b = queryFilter.searchParams) === null || _b === void 0 ? void 0 : _b.get(`${facet.id}.max`);
+            const min = minStr ? parseFloat(minStr) : init[0];
+            const max = maxStr ? parseFloat(maxStr) : init[1];
+            if (min !== state.values[0] || max !== state.values[1]) {
+                onChange([min, max]);
+            }
+        }
+    }, [(_c = queryFilter.searchParams) === null || _c === void 0 ? void 0 : _c.toString()]);
+    const onChange = useCallback((nextValues) => {
+        if (state === null || state === void 0 ? void 0 : state.id) {
+            if (state.values[0] !== nextValues[0] || state.values[1] !== nextValues[1]) {
+                setValues({ ...state, values: nextValues.slice() });
+                const query = new URLSearchParams(queryFilter.searchParams);
+                query.set('hits', '30');
+                query.delete(`${facet.id}.min`);
+                query.delete(`${facet.id}.max`);
+                if (nextValues[0] !== state.domain[0]) {
+                    query.set(`${facet.id}.min`, `${nextValues[0]}`);
+                }
+                if (nextValues[1] !== state.domain[1]) {
+                    query.set(`${facet.id}.max`, `${nextValues[1]}`);
+                }
+                query.sort();
+                onFilterUpdate(query.toString());
+            }
+        }
+    }, [queryFilter.searchParams, state]);
+    return (React.createElement(React.Fragment, null, state && (React.createElement(RangeSlider, { loading: loading, domain: state.domain, values: state.values, maxPrefix: maxPrefix ? '+' : undefined, steps: state.steps, unit: unit, onChange: onChange, formatValues: formatValues }))));
+};
+export default RangeFacet;

package/dist-src/components/FinancialOptions/LoanModal.js

@@ -0,0 +1,129 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import useLoanCalculation from '../../hooks/useLoan';
+import Modal from '../Modal/index';
+import { ModalFoldout, ModalFoldoutBody } from '../Modal/wrapper';
+import Content from '../Content/index';
+import LogoBox from '../LogoBox/index';
+import { Repeat, RepeatSmall, RepeatTiny } from '../Repeat/index';
+import { numberSeparator } from '../../utils/formats';
+import { ButtonClear, ButtonContent } from '../Button/index';
+import { ContentLogo, ContentLogoText, ContentLogoMedia } from '../ContentLogo/index';
+import DataList from '../DataList/index';
+import PubSub from '../../utils/pubsub/pubsub';
+import SliderWithLabel from '../RangeSlider/SliderWithLabel';
+const stepGenerator = (step, max, steps = [], current) => {
+    if (step === 0 && current === undefined)
+        return steps;
+    if (current !== undefined && current >= max && step !== 0) {
+        return steps;
+    }
+    const nextCurrent = current ? step + current : step;
+    steps.push(nextCurrent);
+    return stepGenerator(step, max, steps, nextCurrent);
+};
+const LoanModal = ({ id, financialOption, onClose }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    const [tmp, setTmp] = useState();
+    const [extend, setExtend] = React.useState(false);
+    const onToggleExtend = React.useCallback(() => {
+        if (!extend) {
+            PubSub.publish('FinanceInterest');
+        }
+        setExtend(!extend);
+    }, [extend]);
+    const [variables, setVariables] = useState({
+        duration: (_a = financialOption.duration) === null || _a === void 0 ? void 0 : _a.current,
+        downPayment: (_b = financialOption.downPayment) === null || _b === void 0 ? void 0 : _b.current,
+        residual: (_c = financialOption.residual) === null || _c === void 0 ? void 0 : _c.current,
+    });
+    const { duration, downPayment, residual } = variables;
+    const { loading, data } = useLoanCalculation(id, duration, downPayment, residual);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (data) {
+            setTmp(data);
+            setVariables({
+                duration: ((_b = (_a = data === null || data === void 0 ? void 0 : data.loan) === null || _a === void 0 ? void 0 : _a.duration) === null || _b === void 0 ? void 0 : _b.current) || 0,
+                downPayment: ((_d = (_c = data === null || data === void 0 ? void 0 : data.loan) === null || _c === void 0 ? void 0 : _c.downPayment) === null || _d === void 0 ? void 0 : _d.current) || 0,
+                residual: ((_f = (_e = data === null || data === void 0 ? void 0 : data.loan) === null || _e === void 0 ? void 0 : _e.residual) === null || _f === void 0 ? void 0 : _f.current) || 0,
+            });
+        }
+    }, [data]);
+    const loan = (data === null || data === void 0 ? void 0 : data.loan) || (tmp === null || tmp === void 0 ? void 0 : tmp.loan);
+    const downPaymentCurrent = ((_d = loan === null || loan === void 0 ? void 0 : loan.downPayment) === null || _d === void 0 ? void 0 : _d.current) || 0;
+    const downPaymentMin = ((_e = loan === null || loan === void 0 ? void 0 : loan.downPayment) === null || _e === void 0 ? void 0 : _e.min) || 0;
+    const downPaymentMax = ((_f = loan === null || loan === void 0 ? void 0 : loan.downPayment) === null || _f === void 0 ? void 0 : _f.max) || 0;
+    const downPaymentStep = ((_g = loan === null || loan === void 0 ? void 0 : loan.downPayment) === null || _g === void 0 ? void 0 : _g.step) || 0;
+    const downPaymentSteps = stepGenerator(downPaymentStep, downPaymentMax);
+    const onDownPaymentChange = useCallback((values) => {
+        PubSub.publish('FinanceInterest');
+        setVariables({ ...variables, downPayment: values[0] });
+    }, [variables]);
+    const durationCurrent = ((_h = loan === null || loan === void 0 ? void 0 : loan.duration) === null || _h === void 0 ? void 0 : _h.current) || 0;
+    const durationMin = ((_j = loan === null || loan === void 0 ? void 0 : loan.duration) === null || _j === void 0 ? void 0 : _j.min) || 0;
+    const durationMax = ((_k = loan === null || loan === void 0 ? void 0 : loan.duration) === null || _k === void 0 ? void 0 : _k.max) || 0;
+    const durationStep = ((_l = loan === null || loan === void 0 ? void 0 : loan.duration) === null || _l === void 0 ? void 0 : _l.step) || 0;
+    const durationSteps = stepGenerator(durationStep, durationMax);
+    const onDurationChange = useCallback((values) => {
+        PubSub.publish('FinanceInterest');
+        setVariables({ ...variables, duration: values[0] });
+    }, [variables]);
+    const residualCurrent = (((_m = loan === null || loan === void 0 ? void 0 : loan.residual) === null || _m === void 0 ? void 0 : _m.current) || 0) * 100 || 0;
+    const residualMin = (((_o = loan === null || loan === void 0 ? void 0 : loan.residual) === null || _o === void 0 ? void 0 : _o.min) || 0) * 100 || 0;
+    const residualMax = (((_p = loan === null || loan === void 0 ? void 0 : loan.residual) === null || _p === void 0 ? void 0 : _p.max) || 0) * 100 || 0;
+    const residualStep = (((_q = loan === null || loan === void 0 ? void 0 : loan.residual) === null || _q === void 0 ? void 0 : _q.step) || 0) * 100 || 0;
+    const residualSteps = stepGenerator(residualStep, residualMax);
+    const onResidualChange = useCallback((values) => {
+        PubSub.publish('FinanceInterest');
+        setVariables({ ...variables, residual: values[0] / 100 });
+    }, [variables]);
+    const interestText = (((loan === null || loan === void 0 ? void 0 : loan.interest) || 0) * 100).toFixed(2);
+    const effectiveInterestText = (((loan === null || loan === void 0 ? void 0 : loan.effectiveInterest) || 0) * 100).toFixed(2);
+    return (React.createElement(Modal, { title: "L\u00E5nealternativ", onClose: onClose },
+        React.createElement(Repeat, null,
+            React.createElement(ContentLogo, null,
+                (financialOption === null || financialOption === void 0 ? void 0 : financialOption.description) && (React.createElement(ContentLogoText, null,
+                    React.createElement(Content, null,
+                        React.createElement("p", null, financialOption.description)))),
+                (financialOption === null || financialOption === void 0 ? void 0 : financialOption.image) && (React.createElement(ContentLogoMedia, null,
+                    React.createElement(LogoBox, { logo: financialOption.image, alt: financialOption.name || 'Logotyp', wide: true }))))),
+        React.createElement(Repeat, null,
+            React.createElement(RepeatSmall, null,
+                React.createElement(SliderWithLabel, { label: "Kontantinsatts", values: [downPaymentCurrent], domain: [downPaymentMin, downPaymentMax], steps: downPaymentSteps, unit: "kr", formatValues: true, loading: loading, onChange: onDownPaymentChange })),
+            React.createElement(RepeatSmall, null,
+                React.createElement(SliderWithLabel, { label: "Avbetalning", values: [durationCurrent], domain: [durationMin, durationMax], steps: durationSteps, unit: "m\u00E5n", loading: loading, onChange: onDurationChange })),
+            residual !== undefined && residualMax !== 0 && (React.createElement(RepeatSmall, null,
+                React.createElement(SliderWithLabel, { label: "Restskuld", values: [residualCurrent], domain: [residualMin, residualMax], steps: residualSteps, unit: "%", loading: loading, onChange: onResidualChange }))),
+            React.createElement(RepeatSmall, null,
+                React.createElement(RepeatTiny, null,
+                    React.createElement(Content, { small: true },
+                        React.createElement("p", null, `*Beräknat på ${interestText} % ränta (effektivt ${effectiveInterestText} %)${(loan === null || loan === void 0 ? void 0 : loan.mileage) !== null ? `och en årlig körsträcka om ${loan === null || loan === void 0 ? void 0 : loan.mileage} mil.` : ''}`)))),
+            React.createElement(RepeatSmall, null,
+                React.createElement(ButtonClear, { onClick: onToggleExtend, title: extend ? 'Visa mindre information' : 'Visa mer information' },
+                    React.createElement(ButtonContent, null, extend ? 'Mindre information' : 'Mer information'))),
+            React.createElement(React.Fragment, null, extend && (React.createElement(ModalFoldout, null,
+                React.createElement(ModalFoldoutBody, null,
+                    React.createElement(DataList, { items: [
+                            {
+                                label: 'Ränta',
+                                value: `${interestText} %`,
+                            },
+                            {
+                                label: 'Effektiv ränta',
+                                value: `${effectiveInterestText} %`,
+                            },
+                            {
+                                label: 'Uppläggningskostnad',
+                                value: `${numberSeparator((financialOption === null || financialOption === void 0 ? void 0 : financialOption.setupFee) || 0)} kr`,
+                            },
+                            {
+                                label: 'Administrativa avgifter',
+                                value: `${numberSeparator((financialOption === null || financialOption === void 0 ? void 0 : financialOption.administrationFee) || 0)} kr/mån`,
+                            },
+                            {
+                                label: 'Total kreditkostnad',
+                                value: `${numberSeparator((loan === null || loan === void 0 ? void 0 : loan.totalCreditCost) || 0)} kr`,
+                            },
+                        ] }))))))));
+};
+export default LoanModal;

package/dist-src/components/FinancialOptions/index.js

@@ -0,0 +1,12 @@
+import React, { Fragment } from 'react';
+import { Repeat, RepeatTiny } from '../Repeat/index';
+import { VisualHeading } from '../Heading/index';
+import Leasing from './leasing';
+import Loan from './loan';
+const FinancialOptions = ({ id, financialOptions }) => (React.createElement(Repeat, null,
+    React.createElement(RepeatTiny, null,
+        React.createElement(VisualHeading, null, "Andra finansieringsalternativ")),
+    React.createElement(RepeatTiny, null, financialOptions.map((financialOption, index) => (React.createElement(Fragment, { key: index },
+        financialOption.type === 'leasing' && React.createElement(Leasing, { financialOption: financialOption }),
+        financialOption.type === 'loan' && React.createElement(Loan, { id: id, financialOption: financialOption })))))));
+export default FinancialOptions;

package/dist-src/components/FinancialOptions/leasing.js

@@ -0,0 +1,55 @@
+import React, { useState, useCallback } from 'react';
+import OptionBox from '../OptionBox/index';
+import { OptionBoxHeading, OptionBoxContent } from '../OptionBox/wrapper';
+import { UtilityTextPrimary } from '../Utility/index';
+import { ButtonInline } from '../Button/index';
+import { numberSeparator } from '../../utils/formats';
+import Modal from '../Modal/index';
+import { Image, ModalFoldout, ModalFoldoutBody } from '../Modal/wrapper';
+import Content from '../Content/index';
+import DataList from '../DataList/index';
+const Leasing = ({ financialOption }) => {
+    const [modal, setModal] = useState(false);
+    const toggleModal = useCallback(() => setModal(!modal), [modal]);
+    const { image, description, monthlyCost, duration, mileage } = financialOption;
+    return (React.createElement(React.Fragment, null,
+        modal && (React.createElement(Modal, { title: "Privatleasing", onClose: toggleModal },
+            image && React.createElement(Image, { src: image, alt: "Privatleasing" }),
+            description && React.createElement(Content, { dangerouslySetInnerHTML: { __html: description } }),
+            React.createElement(ModalFoldout, null,
+                React.createElement(ModalFoldoutBody, null,
+                    React.createElement(DataList, { items: [
+                            {
+                                label: 'Månadskostnad',
+                                value: `${numberSeparator(monthlyCost || 0)} kr/mån`,
+                            },
+                            {
+                                label: 'Bindningstid',
+                                value: `${duration === null || duration === void 0 ? void 0 : duration.current} månader`,
+                            },
+                            {
+                                label: 'Årlig körsträcka',
+                                value: `${numberSeparator((mileage === null || mileage === void 0 ? void 0 : mileage.current) || 0)} mil/år`,
+                            },
+                        ] }))))),
+        React.createElement(OptionBox, null,
+            React.createElement(React.Fragment, null, monthlyCost !== null && monthlyCost !== undefined && (React.createElement(OptionBoxHeading, null, `ca ${numberSeparator(monthlyCost)} kr/mån`))),
+            React.createElement(OptionBoxContent, null,
+                React.createElement("p", null,
+                    "Privatleasing",
+                    ' ',
+                    (mileage === null || mileage === void 0 ? void 0 : mileage.current) && (duration === null || duration === void 0 ? void 0 : duration.current) && (React.createElement(React.Fragment, null,
+                        React.createElement(UtilityTextPrimary, null,
+                            numberSeparator(mileage === null || mileage === void 0 ? void 0 : mileage.current),
+                            " mil/\u00E5r"),
+                        ' ',
+                        "i ",
+                        React.createElement(UtilityTextPrimary, null, duration === null || duration === void 0 ? void 0 :
+                            duration.current,
+                            " m\u00E5n"),
+                        ".",
+                        ' '))),
+                React.createElement("p", null,
+                    React.createElement(ButtonInline, { onClick: toggleModal }, "L\u00E4s mer"))))));
+};
+export default Leasing;