@wayke-se/components-react 3.0.0-beta.10 → 3.0.0-beta.11

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

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

@@ -1,82 +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?.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

@@ -1,127 +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 }) => {
-    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

@@ -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?.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;

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

@@ -1,54 +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 }) => {
-    const [modal, setModal] = useState(false);
-    const toggleModal = useCallback(() => setModal(!modal), [modal]);
-    const { data } = useLoanCalculation(id, financialOption.duration?.current, financialOption.downPayment?.current, financialOption.residual?.current);
-    const interest = data?.loan?.interest;
-    const duration = data?.loan?.duration?.current;
-    const monthlyCost = data?.loan?.monthlyCost;
-    const logo = 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;