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

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';
+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';
+
+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

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

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

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