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

package/src/components/FilterPanel/faceSelector.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-
-import { Facet } from '../../@types/search';
-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';
-
-interface FacetSelectorProps {
-  facet: Facet;
-}
-
-const FacetSelector = ({ facet }: FacetSelectorProps) => {
-  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 <CheckListFacet facet={facet} />;
-    case COLOR:
-      return <ColorSelectFacet facet={facet} />;
-    case PRICE:
-      return <RangeFacet facet={facet} unit="kr" formatValues />;
-    case LEASING_PRICE:
-      return <RangeFacet facet={facet} unit="kr/mån" formatValues />;
-    case MILEAGE:
-      return <RangeFacet facet={facet} unit="mil" formatValues />;
-    case MODEL_YEAR:
-      return <RangeFacet facet={facet} unit="år" />;
-    default:
-      return null;
-  }
-};
-
-export default FacetSelector;

package/src/components/FilterPanel/index.tsx

@@ -1,79 +0,0 @@
-import React, { useCallback } from 'react';
-
-import { Facet } from '../../@types/search';
-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';
-import { SearchFilterTypes } from '../../@types/filter';
-
-export interface FilterProps {
-  label: string;
-  activeFilters?: number;
-}
-
-export interface Props {
-  facet?: Facet;
-  loading: boolean;
-  filteredFacets: Facet[];
-  filterList?: SearchFilterTypes[];
-  numberOfHits: number;
-  onClose: () => void;
-  onFilterUpdate: (nextQuery: string) => void;
-}
-
-const FilterPanel = ({
-  facet,
-  filteredFacets,
-  numberOfHits,
-  loading,
-  onFilterUpdate,
-  onClose,
-}: Props) => {
-  const onClearFilters = useCallback(() => onFilterUpdate(''), []);
-
-  return (
-    <Panel
-      title="Filtrera"
-      onClose={onClose}
-      footer={
-        <>
-          <FooterAction>
-            <FooterActionItem>
-              <ButtonSecondary fullWidth disabled={loading} onClick={onClearFilters}>
-                <ButtonContent>Rensa alla</ButtonContent>
-              </ButtonSecondary>
-            </FooterActionItem>
-            <FooterActionItem>
-              <ButtonPrimary fullWidth disabled={loading} onClick={onClose}>
-                <ButtonContent>{`Visa ${numberOfHits} ${
-                  numberOfHits === 1 ? 'bil' : 'bilar'
-                }`}</ButtonContent>
-              </ButtonPrimary>
-            </FooterActionItem>
-          </FooterAction>
-        </>
-      }
-    >
-      <Accordion>
-        {filteredFacets
-          .filter((x) => x.filters.length)
-          .map((f) => (
-            <AccordionItem
-              key={f.displayName}
-              heading={f.displayName}
-              isActive={f.id === facet?.id}
-            >
-              <Repeat>
-                <FacetSelector facet={f} />
-              </Repeat>
-            </AccordionItem>
-          ))}
-      </Accordion>
-    </Panel>
-  );
-};
-
-export default FilterPanel;

package/src/components/FilterPanel/rangeFacet.tsx

@@ -1,128 +0,0 @@
-import React, { useCallback, useState, useEffect } from 'react';
-import { Facet } from '../../@types/search';
-import RangeSlider from '../RangeSlider/index';
-import useSearch from '../../State/Search/useSearch';
-
-interface RangeFacetProps {
-  facet: Facet;
-  unit?: string;
-  formatValues?: boolean;
-}
-
-const getInitialValues = (domain: number[], facet: Facet, searchParams: URLSearchParams) => {
-  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]: number[]) => {
-  if (x === undefined) return NaN;
-
-  return xs.reduce(([acc, last], x) => [acc + (x - last), x], [0, x])[0] / xs.length;
-};
-
-const getSteps = (initialAllValues: number[]) => {
-  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 }: RangeFacetProps) => {
-  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<
-    { id: string | undefined; steps: number[]; domain: number[]; values: number[] } | undefined
-  >(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: readonly number[]) => {
-      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 (
-    <>
-      {state && (
-        <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/src/components/FinancialOptions/LoanModal.tsx

@@ -1,223 +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 { FinancialOption, Query } from '../../@types/codegen';
-import PubSub from '../../utils/pubsub/pubsub';
-import SliderWithLabel from '../RangeSlider/SliderWithLabel';
-
-const stepGenerator = (
-  step: number,
-  max: number,
-  steps: number[] = [],
-  current?: number
-): number[] => {
-  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);
-};
-
-interface LoanModalProps {
-  id: string;
-  financialOption: FinancialOption;
-  onClose: () => void;
-}
-
-const LoanModal = ({ id, financialOption, onClose }: LoanModalProps) => {
-  const [tmp, setTmp] = useState<Query>();
-  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: readonly number[]) => {
-      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: readonly number[]) => {
-      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: readonly number[]) => {
-      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 (
-    <Modal title="Lånealternativ" onClose={onClose}>
-      <Repeat>
-        <ContentLogo>
-          {financialOption?.description && (
-            <ContentLogoText>
-              <Content>
-                <p>{financialOption.description}</p>
-              </Content>
-            </ContentLogoText>
-          )}
-          {financialOption?.image && (
-            <ContentLogoMedia>
-              <LogoBox logo={financialOption.image} alt={financialOption.name || 'Logotyp'} wide />
-            </ContentLogoMedia>
-          )}
-        </ContentLogo>
-      </Repeat>
-      <Repeat>
-        <RepeatSmall>
-          <SliderWithLabel
-            label="Kontantinsatts"
-            values={[downPaymentCurrent]}
-            domain={[downPaymentMin, downPaymentMax]}
-            steps={downPaymentSteps}
-            unit="kr"
-            formatValues
-            loading={loading}
-            onChange={onDownPaymentChange}
-          />
-        </RepeatSmall>
-        <RepeatSmall>
-          <SliderWithLabel
-            label="Avbetalning"
-            values={[durationCurrent]}
-            domain={[durationMin, durationMax]}
-            steps={durationSteps}
-            unit="mån"
-            loading={loading}
-            onChange={onDurationChange}
-          />
-        </RepeatSmall>
-        {residual !== undefined && residualMax !== 0 && (
-          <RepeatSmall>
-            <SliderWithLabel
-              label="Restskuld"
-              values={[residualCurrent]}
-              domain={[residualMin, residualMax]}
-              steps={residualSteps}
-              unit="%"
-              loading={loading}
-              onChange={onResidualChange}
-            />
-          </RepeatSmall>
-        )}
-        <RepeatSmall>
-          <RepeatTiny>
-            <Content small>
-              <p>{`*Beräknat på ${interestText} % ränta (effektivt ${effectiveInterestText} %)${
-                loan?.mileage !== null ? `och en årlig körsträcka om ${loan?.mileage} mil.` : ''
-              }`}</p>
-            </Content>
-          </RepeatTiny>
-        </RepeatSmall>
-
-        <RepeatSmall>
-          <ButtonClear
-            onClick={onToggleExtend}
-            title={extend ? 'Visa mindre information' : 'Visa mer information'}
-          >
-            <ButtonContent>{extend ? 'Mindre information' : 'Mer information'}</ButtonContent>
-          </ButtonClear>
-        </RepeatSmall>
-        <>
-          {extend && (
-            <ModalFoldout>
-              <ModalFoldoutBody>
-                <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`,
-                    },
-                  ]}
-                />
-              </ModalFoldoutBody>
-            </ModalFoldout>
-          )}
-        </>
-      </Repeat>
-    </Modal>
-  );
-};
-
-export default LoanModal;

package/src/components/FinancialOptions/index.tsx

@@ -1,29 +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';
-import { FinancialOption } from '../../@types/codegen';
-
-interface FinancialOptionsProps {
-  id: string;
-  financialOptions: FinancialOption[];
-}
-
-const FinancialOptions = ({ id, financialOptions }: FinancialOptionsProps) => (
-  <Repeat>
-    <RepeatTiny>
-      <VisualHeading>Andra finansieringsalternativ</VisualHeading>
-    </RepeatTiny>
-    <RepeatTiny>
-      {financialOptions.map((financialOption, index) => (
-        <Fragment key={index}>
-          {financialOption.type === 'leasing' && <Leasing financialOption={financialOption} />}
-          {financialOption.type === 'loan' && <Loan id={id} financialOption={financialOption} />}
-        </Fragment>
-      ))}
-    </RepeatTiny>
-  </Repeat>
-);
-
-export default FinancialOptions;

package/src/components/FinancialOptions/leasing.tsx

@@ -1,77 +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';
-import { FinancialOption } from '../../@types/codegen';
-
-interface LeasingProps {
-  financialOption: FinancialOption;
-}
-
-const Leasing = ({ financialOption }: LeasingProps) => {
-  const [modal, setModal] = useState(false);
-  const toggleModal = useCallback(() => setModal(!modal), [modal]);
-
-  const { image, description, monthlyCost, duration, mileage } = financialOption;
-
-  return (
-    <>
-      {modal && (
-        <Modal title="Privatleasing" onClose={toggleModal}>
-          {image && <Image src={image} alt="Privatleasing" />}
-          {description && <Content dangerouslySetInnerHTML={{ __html: description }} />}
-          <ModalFoldout>
-            <ModalFoldoutBody>
-              <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`,
-                  },
-                ]}
-              />
-            </ModalFoldoutBody>
-          </ModalFoldout>
-        </Modal>
-      )}
-      <OptionBox>
-        <>
-          {monthlyCost !== null && monthlyCost !== undefined && (
-            <OptionBoxHeading>{`ca ${numberSeparator(monthlyCost)} kr/mån`}</OptionBoxHeading>
-          )}
-        </>
-        <OptionBoxContent>
-          <p>
-            Privatleasing{' '}
-            {mileage?.current && duration?.current && (
-              <>
-                <UtilityTextPrimary>{numberSeparator(mileage?.current)} mil/år</UtilityTextPrimary>{' '}
-                i <UtilityTextPrimary>{duration?.current} mån</UtilityTextPrimary>.{' '}
-              </>
-            )}
-          </p>
-          <p>
-            <ButtonInline onClick={toggleModal}>Läs mer</ButtonInline>
-          </p>
-        </OptionBoxContent>
-      </OptionBox>
-    </>
-  );
-};
-
-export default Leasing;

package/src/components/FinancialOptions/loan.tsx

@@ -1,87 +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 { FinancialOption } from '../../@types/codegen';
-import LoanModal from './LoanModal';
-
-interface LoanProps {
-  id: string;
-  financialOption: FinancialOption;
-}
-
-const Loan = ({ id, financialOption }: LoanProps) => {
-  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 (
-      <OptionBox logo={logo} logoAlt="Logotyp">
-        <OptionBoxHeading>Laddar...</OptionBoxHeading>
-
-        <OptionBoxContent>
-          <p>Laddar...</p>
-        </OptionBoxContent>
-      </OptionBox>
-    );
-  }
-
-  return (
-    <>
-      {modal && <LoanModal id={id} financialOption={financialOption} onClose={toggleModal} />}
-      <OptionBox logo={logo} logoAlt="Logotyp">
-        <>
-          <OptionBoxHeading>{`${numberSeparator(monthlyCost)} kr/mån*`}</OptionBoxHeading>
-
-          <OptionBoxContent>
-            <p>
-              Delbetala{' '}
-              {financialOption.loanAmount && duration && (
-                <>
-                  <UtilityTextPrimary>
-                    {numberSeparator(financialOption.loanAmount)} kr
-                  </UtilityTextPrimary>{' '}
-                  i <UtilityTextPrimary>{duration} mån</UtilityTextPrimary>.
-                </>
-              )}
-            </p>
-
-            <p>
-              {`*Beräknat på ${(interest * 100).toFixed(2)}% ränta. `}
-              <ButtonInline onClick={toggleModal}>Läs mer</ButtonInline>
-            </p>
-          </OptionBoxContent>
-        </>
-      </OptionBox>
-    </>
-  );
-};
-
-export default Loan;

package/src/components/Gallery/MediaButton.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { MediaButtonWrapper } from './wrapper';
-import { ButtonSecondary, ButtonContent } from '../Button/index';
-
-interface MediaButtonProps {
-  text: string;
-  onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-const MediaButton = ({ text, onClick }: MediaButtonProps) => (
-  <MediaButtonWrapper>
-    <ButtonSecondary onClick={onClick} title={text}>
-      <ButtonContent>{text}</ButtonContent>
-    </ButtonSecondary>
-  </MediaButtonWrapper>
-);
-
-export default MediaButton;