@wayke-se/components-react 3.0.0-beta.12 → 3.0.0-beta.14

package/dist-src/components/ExtendContent/wrapper.js

@@ -0,0 +1,32 @@
+import styled, { css } from 'styled-components';
+import { size } from '../../layout/helpers';
+export const Wrapper = styled.div ``;
+export const Extend = styled.div `
+  position: relative;
+  max-height: 175px;
+  overflow: hidden;
+
+  :after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: ${size(6)};
+    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+  }
+
+  ${({ extended }) => extended &&
+    css `
+      max-height: none;
+
+      :after {
+        content: none;
+      }
+    `}
+`;
+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/dist-src/components/ExtendInfo/wrapper.js

@@ -0,0 +1,56 @@
+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 `
+  display: flex;
+  align-items: center;
+`;
+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',
+})) `
+  position: relative;
+  display: block;
+  font: inherit;
+  font-size: 1em;
+  transform-origin: 50% 50%;
+  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
+
+  :before {
+    content: '';
+    position: absolute;
+    top: ${size(-0.5)};
+    bottom: ${size(-0.5)};
+    left: ${size(-0.5)};
+    right: ${size(-0.5)};
+    background-color: ${(props) => props.theme.color.accentDark};
+    border-radius: 50%;
+    opacity: 0;
+    transition: opacity 200ms ease;
+  }
+
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  :hover {
+    :before {
+      opacity: 1;
+    }
+  }
+
+  :active {
+    transform: scale(0.95);
+  }
+`;
+export const Extend = styled.div `
+  padding-top: ${size(1)};
+  margin-top: ${size(1)};
+  border-top: 1px solid ${(props) => props.theme.color.border};
+  font-size: 0.875em;
+`;

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

@@ -0,0 +1,62 @@
+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 }) => {
+    const { queryFilter, initialFacets, loading, response, onFilterUpdate } = useSearch();
+    const facets = 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 = facets
+        ?.filter((x) => x.id !== 'segment')
+        ?.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?.find((y) => y.filterName === x.id);
+        if (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?.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/dist-src/components/Filter/wrapper.js

@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+import { size } from '../../layout/helpers';
+import { ButtonReset } from '../Button/index';
+export const List = styled.ul `
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: ${size(-0.5)};
+`;
+export const Item = styled.li `
+  padding: ${size(0.5)};
+`;
+export const Action = styled(ButtonReset) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: ${size(1.5)} ${size(3)};
+  background-color: ${(props) => props.theme.color.accentDark};
+  border-radius: 3px;
+  font-size: 0.875rem;
+  line-height: 1;
+  transform-origin: 50% 50%;
+  transition: transform 150ms ease;
+
+  :before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: ${(props) => props.theme.color.hoverOverlay};
+    border-radius: 3px;
+    opacity: 0;
+    transition: opacity 150ms ease;
+  }
+
+  :hover {
+    :before {
+      opacity: 1;
+    }
+  }
+
+  :active {
+    transform: scale(0.95);
+  }
+`;
+export const Label = styled.div `
+  z-index: 1;
+`;
+export const Indicator = styled.div `
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 ${size(0.375)};
+  margin-left: ${size(0.5)};
+  background-color: currentColor;
+  min-width: 1em;
+  height: 1em;
+  border-radius: 999px;
+  z-index: 1;
+`;
+export const IndicatorValue = styled.div `
+  font-family: sans-serif; // Default font to guarantee visibility
+  font-size: 0.75rem;
+  font-weight: bold;
+  color: white;
+  mix-blend-mode: difference;
+`;

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?.[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?.[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?.id },
+            React.createElement(Repeat, null,
+                React.createElement(FacetSelector, { facet: f }))))))));
+};
+export default FilterPanel;

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

@@ -0,0 +1,82 @@
+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?.get(`${facet.id}.min`) || null;
+    const facetMax = domain[domain.length - 1]; //parseInt(facet.filters[facet.filters.length - 1].displayName, 10);
+    const _queryMax = 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 }) => {
+    const { loading, queryFilter, initialFacets, onFilterUpdate } = useSearch();
+    const initialFacet = initialFacets?.find((x) => x.id === facet.id);
+    const maxPrefix = initialFacet?.filters[initialFacet?.filters.length - 1]?.displayName?.includes('+');
+    const [state, setValues] = useState(undefined);
+    useEffect(() => {
+        const _initialAllValues = 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?.id,
+            steps: _steps,
+            domain: [_steps[0], _steps[_steps.length - 1]],
+            values: initialFacet?.filters.length
+                ? getInitialValues(domain, initialFacet, queryFilter.searchParams)
+                : [0, 0],
+        });
+    }, [initialFacet?.id]);
+    useEffect(() => {
+        if (state?.id) {
+            const init = initialFacet?.filters.length
+                ? getInitialValues(state.domain, initialFacet, queryFilter.searchParams)
+                : [0, 0];
+            const minStr = queryFilter.searchParams?.get(`${facet.id}.min`);
+            const maxStr = queryFilter.searchParams?.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]);
+            }
+        }
+    }, [queryFilter.searchParams?.toString()]);
+    const onChange = useCallback((nextValues) => {
+        if (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,127 @@
+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 }) => {
+    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: financialOption.duration?.current,
+        downPayment: financialOption.downPayment?.current,
+        residual: financialOption.residual?.current,
+    });
+    const { duration, downPayment, residual } = variables;
+    const { loading, data } = useLoanCalculation(id, duration, downPayment, residual);
+    useEffect(() => {
+        if (data) {
+            setTmp(data);
+            setVariables({
+                duration: data?.loan?.duration?.current || 0,
+                downPayment: data?.loan?.downPayment?.current || 0,
+                residual: data?.loan?.residual?.current || 0,
+            });
+        }
+    }, [data]);
+    const loan = data?.loan || tmp?.loan;
+    const downPaymentCurrent = loan?.downPayment?.current || 0;
+    const downPaymentMin = loan?.downPayment?.min || 0;
+    const downPaymentMax = loan?.downPayment?.max || 0;
+    const downPaymentStep = loan?.downPayment?.step || 0;
+    const downPaymentSteps = stepGenerator(downPaymentStep, downPaymentMax);
+    const onDownPaymentChange = useCallback((values) => {
+        PubSub.publish('FinanceInterest');
+        setVariables({ ...variables, downPayment: values[0] });
+    }, [variables]);
+    const durationCurrent = loan?.duration?.current || 0;
+    const durationMin = loan?.duration?.min || 0;
+    const durationMax = loan?.duration?.max || 0;
+    const durationStep = loan?.duration?.step || 0;
+    const durationSteps = stepGenerator(durationStep, durationMax);
+    const onDurationChange = useCallback((values) => {
+        PubSub.publish('FinanceInterest');
+        setVariables({ ...variables, duration: values[0] });
+    }, [variables]);
+    const residualCurrent = (loan?.residual?.current || 0) * 100 || 0;
+    const residualMin = (loan?.residual?.min || 0) * 100 || 0;
+    const residualMax = (loan?.residual?.max || 0) * 100 || 0;
+    const residualStep = (loan?.residual?.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?.interest || 0) * 100).toFixed(2);
+    const effectiveInterestText = ((loan?.effectiveInterest || 0) * 100).toFixed(2);
+    return (React.createElement(Modal, { title: "L\u00E5nealternativ", onClose: onClose },
+        React.createElement(Repeat, null,
+            React.createElement(ContentLogo, null,
+                financialOption?.description && (React.createElement(ContentLogoText, null,
+                    React.createElement(Content, null,
+                        React.createElement("p", null, financialOption.description)))),
+                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?.mileage !== null ? `och en årlig körsträcka om ${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?.setupFee || 0)} kr`,
+                            },
+                            {
+                                label: 'Administrativa avgifter',
+                                value: `${numberSeparator(financialOption?.administrationFee || 0)} kr/mån`,
+                            },
+                            {
+                                label: 'Total kreditkostnad',
+                                value: `${numberSeparator(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?.current} månader`,
+                            },
+                            {
+                                label: 'Årlig körsträcka',
+                                value: `${numberSeparator(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?.current && duration?.current && (React.createElement(React.Fragment, null,
+                        React.createElement(UtilityTextPrimary, null,
+                            numberSeparator(mileage?.current),
+                            " mil/\u00E5r"),
+                        ' ',
+                        "i ",
+                        React.createElement(UtilityTextPrimary, null,
+                            duration?.current,
+                            " m\u00E5n"),
+                        ".",
+                        ' '))),
+                React.createElement("p", null,
+                    React.createElement(ButtonInline, { onClick: toggleModal }, "L\u00E4s mer"))))));
+};
+export default Leasing;