@wayke-se/components-react 2.16.0 → 3.0.0-beta.2

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

@@ -1,48 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import EcomBase from '@wayke-se/ecom-react';
-import useSettings from '../../State/Settings/useSettings';
-import PubSub from '../../utils/pubsub/pubsub';
-const Ecom = ({ vehicle, manufacturer, onExit, onUserEvent }) => {
-    var _a, _b, _c;
-    const { ecomSettings } = useSettings();
-    useEffect(() => {
-        PubSub.publish('EcomOnInit');
-    }, []);
-    const onUserEventLocal = useCallback((userEvent, currentStep) => {
-        PubSub.publish('EcomOnUserEvent', userEvent, currentStep);
-        if (onUserEvent) {
-            onUserEvent(userEvent, currentStep);
-        }
-    }, []);
-    const onExitLocal = useCallback(() => {
-        PubSub.publish('EcomOnExit');
-        if (onExit) {
-            onExit();
-        }
-    }, []);
-    const { id, title, shortDescription, price, data, media } = vehicle;
-    const { modelYear, mileage, gearbox, fuelType } = data;
-    const imageUrl = (_c = (_b = (_a = media === null || media === void 0 ? void 0 : media[0]) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.url;
-    const ecomData = {
-        vehicle: {
-            id,
-            title,
-            shortDescription: shortDescription || '',
-            price,
-            imageUrl,
-            modelYear,
-            milage: `${mileage}`,
-            gearBox: gearbox || '',
-            fuelType: fuelType || '',
-        },
-        serviceLogotypeUrl: (ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.serviceLogotypeUrl) ||
-            (manufacturer === null || manufacturer === void 0 ? void 0 : manufacturer.logotype) ||
-            'https://cdn.wayke.se/wui/images/ecom/wayke-logo.svg',
-        onExit: onExitLocal,
-        onUserEvent: onUserEventLocal,
-        useBankId: ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.useBankId,
-        displayBankIdAlert: ecomSettings === null || ecomSettings === void 0 ? void 0 : ecomSettings.displayBankIdAlert,
-    };
-    return React.createElement(EcomBase, { ...ecomData });
-};
-export default Ecom;

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

@@ -1,24 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { Wrapper, Extend, Action } from './wrapper';
-import { ButtonClear, ButtonContent } from '../Button/index';
-const ExtendContent = ({ children, actionTitle, onClick }) => {
-    const [extend, setExtend] = useState(false);
-    const onExtend = useCallback(() => {
-        setExtend(true);
-        if (onClick) {
-            onClick();
-        }
-    }, []);
-    const onRef = (ref) => {
-        const refHeight = (ref === null || ref === void 0 ? void 0 : ref.clientHeight) || 0;
-        if (refHeight < 207) {
-            setExtend(true);
-        }
-    };
-    return (React.createElement(Wrapper, { ref: onRef },
-        React.createElement(Extend, { extended: extend }, children),
-        !extend && (React.createElement(Action, null,
-            React.createElement(ButtonClear, { onClick: onExtend, title: actionTitle },
-                React.createElement(ButtonContent, null, actionTitle))))));
-};
-export default ExtendContent;

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

@@ -1,15 +0,0 @@
-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/Filter/index.js

@@ -1,59 +0,0 @@
-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/dist-src/components/FilterPanel/checkListFacet.js

@@ -1,29 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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;

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

@@ -1,55 +0,0 @@
-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 useLoanCalculation from '../../hooks/useLoan';
-import LoanModal from './LoanModal';
-const Loan = ({ id, financialOption }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    const [modal, setModal] = useState(false);
-    const toggleModal = useCallback(() => setModal(!modal), [modal]);
-    const { data } = useLoanCalculation(id, (_a = financialOption.duration) === null || _a === void 0 ? void 0 : _a.current, (_b = financialOption.downPayment) === null || _b === void 0 ? void 0 : _b.current, (_c = financialOption.residual) === null || _c === void 0 ? void 0 : _c.current);
-    const interest = (_d = data === null || data === void 0 ? void 0 : data.loan) === null || _d === void 0 ? void 0 : _d.interest;
-    const duration = (_f = (_e = data === null || data === void 0 ? void 0 : data.loan) === null || _e === void 0 ? void 0 : _e.duration) === null || _f === void 0 ? void 0 : _f.current;
-    const monthlyCost = (_g = data === null || data === void 0 ? void 0 : data.loan) === null || _g === void 0 ? void 0 : _g.monthlyCost;
-    const logo = (financialOption === null || financialOption === void 0 ? void 0 : financialOption.logotype) || 'https://placehold.it/67x10';
-    // Skeleton?
-    if (financialOption.loanAmount === undefined ||
-        financialOption.loanAmount === null ||
-        interest === undefined ||
-        duration === undefined ||
-        monthlyCost === undefined ||
-        interest === null ||
-        duration === null ||
-        monthlyCost === null) {
-        return (React.createElement(OptionBox, { logo: logo, logoAlt: "Logotyp" },
-            React.createElement(OptionBoxHeading, null, "Laddar..."),
-            React.createElement(OptionBoxContent, null,
-                React.createElement("p", null, "Laddar..."))));
-    }
-    return (React.createElement(React.Fragment, null,
-        modal && React.createElement(LoanModal, { id: id, financialOption: financialOption, onClose: toggleModal }),
-        React.createElement(OptionBox, { logo: logo, logoAlt: "Logotyp" },
-            React.createElement(React.Fragment, null,
-                React.createElement(OptionBoxHeading, null, `${numberSeparator(monthlyCost)} kr/mån*`),
-                React.createElement(OptionBoxContent, null,
-                    React.createElement("p", null,
-                        "Delbetala",
-                        ' ',
-                        financialOption.loanAmount && duration && (React.createElement(React.Fragment, null,
-                            React.createElement(UtilityTextPrimary, null,
-                                numberSeparator(financialOption.loanAmount),
-                                " kr"),
-                            ' ',
-                            "i ",
-                            React.createElement(UtilityTextPrimary, null,
-                                duration,
-                                " m\u00E5n"),
-                            "."))),
-                    React.createElement("p", null,
-                        `*Beräknat på ${(interest * 100).toFixed(2)}% ränta. `,
-                        React.createElement(ButtonInline, { onClick: toggleModal }, "L\u00E4s mer")))))));
-};
-export default Loan;

package/dist-src/components/Gallery/MediaButton.js

@@ -1,7 +0,0 @@
-import React from 'react';
-import { MediaButtonWrapper } from './wrapper';
-import { ButtonSecondary, ButtonContent } from '../Button/index';
-const MediaButton = ({ text, onClick }) => (React.createElement(MediaButtonWrapper, null,
-    React.createElement(ButtonSecondary, { onClick: onClick, title: text },
-        React.createElement(ButtonContent, null, text))));
-export default MediaButton;