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

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

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

package/src/components/FilterPanel/checkListFacet.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import Checklist from '../Checklist/index';
+import OverflowBox from '../OverflowBox/index';
+import { Facet, FacetFilter } from '../../@types/search';
+import useSearch from '../../State/Search/useSearch';
+
+interface ChecklistFacetProps {
+  facet: Facet;
+}
+
+const ChecklistFacet = ({ facet }: ChecklistFacetProps) => {
+  const { loading, error, onFilterUpdate } = useSearch();
+  const [selected, setSelected] = useState<{ [key: string]: boolean }>();
+  useEffect(() => {
+    setSelected(undefined);
+  }, [facet, error]);
+
+  const onClick = useCallback(
+    (f: FacetFilter) => {
+      if (!loading) {
+        setSelected({
+          ...selected,
+          [f.displayName]: !f.selected,
+        });
+        onFilterUpdate(f.query);
+      }
+    },
+    [loading]
+  );
+
+  return (
+    <OverflowBox>
+      <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,
+          }))}
+      />
+    </OverflowBox>
+  );
+};
+
+export default ChecklistFacet;

package/src/components/FilterPanel/colorFacet.tsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+import { Facet, FacetFilter } from '../../@types/search';
+import ColorSelect from '../ColorSelect/index';
+import useSearch from '../../State/Search/useSearch';
+import { getHexColorFromDisplayName } from '../../utils/converters';
+
+interface ColorSelectFacetProps {
+  facet: Facet;
+}
+
+const ColorSelectFacet = ({ facet }: ColorSelectFacetProps) => {
+  const { loading, error, onFilterUpdate } = useSearch();
+  const [selected, setSelected] = useState<{ [key: string]: boolean }>();
+
+  useEffect(() => {
+    setSelected(undefined);
+  }, [facet, error]);
+
+  const onClick = useCallback(
+    (f: FacetFilter) => {
+      if (!loading) {
+        setSelected({
+          ...selected,
+          [f.displayName]: !f.selected,
+        });
+        onFilterUpdate(f.query);
+      }
+    },
+    [loading]
+  );
+
+  return (
+    <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/src/components/FilterPanel/faceSelector.tsx

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

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

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

@@ -0,0 +1,223 @@
+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/types';
+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

@@ -0,0 +1,29 @@
+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/types';
+
+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;