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

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/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

@@ -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/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;

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/types';
-
-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/types';
-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;

package/src/components/Gallery/index.tsx

@@ -1,227 +0,0 @@
-import React, { useState, useCallback, useRef, useMemo } from 'react';
-import Slider from 'react-slick';
-import scrollIntoView from 'scroll-into-view-if-needed';
-
-import {
-  Wrapper,
-  SliderWrapper,
-  Item,
-  Image,
-  ArrowLeft,
-  ArrowRight,
-  Main,
-  Alt,
-  QuickNav,
-  QuickNavItem,
-  QuickNavBtn,
-  QuickNavImg,
-  EnableNavigationButton,
-} from './wrapper';
-import { IconChevronLeft, IconChevronRight } from '../Icon/index';
-import { ButtonSecondary, ButtonContent } from '../Button/index';
-import Lightbox from '../Lightbox/index';
-import EmbededVideo from '../Video/EmbededVideo';
-import QuickNavEmbeded from '../Video/QuickNavEmbeded';
-import Sphere from '../Sphere/Sphere';
-import { notEmpty } from '../../utils/formats';
-import ThreeSixty from '../ThreeSixty/ThreeSixty';
-import { Media } from '../../@types/codegen/types';
-import PubSub from '../../utils/pubsub/pubsub';
-import { DEFAULT_PLACEHOLDER_IMAGE } from '../../utils/constants';
-
-interface GalleryProps {
-  media?: Media[];
-  placeholderImage?: string;
-}
-
-const sliderSettings = {
-  dots: false,
-  arrows: false,
-  infinite: true,
-  speed: 300,
-  slidesToShow: 1,
-  slidesToScroll: 1,
-};
-
-const Gallery = ({ media, placeholderImage }: GalleryProps) => {
-  const slider = useRef<Slider>(null);
-  const quickNavRef = useRef<HTMLUListElement>(null);
-  const isDragging = useRef(false);
-  const [index, setIndex] = useState(0);
-  const [lightbox, setLightbox] = useState(false);
-  const [navigationDisabled, setNavigationDisabled] = useState(false);
-
-  const beforeChange = useCallback((_: number, newIndex: number) => {
-    const element = quickNavRef.current?.querySelectorAll('li')?.[newIndex];
-    if (element) {
-      scrollIntoView(element, { scrollMode: 'if-needed', block: 'nearest', inline: 'nearest' });
-    }
-    setIndex(newIndex);
-  }, []);
-
-  const onMouseDown = useCallback(() => {
-    if (isDragging.current) {
-      isDragging.current = false;
-    }
-  }, []);
-  const onMouseMove = useCallback(() => {
-    if (!isDragging.current) {
-      isDragging.current = true;
-    }
-  }, []);
-
-  const onClick = useCallback(() => {
-    PubSub.publish('ImagesClick');
-    if (!isDragging.current && !lightbox && !!media?.length) {
-      setLightbox(true);
-    }
-  }, [lightbox, media]);
-
-  const nextImage = useCallback((): void => {
-    if (!slider || !slider.current) {
-      return;
-    }
-    slider.current.slickNext();
-  }, [slider]);
-
-  const prevImage = useCallback((): void => {
-    if (!slider || !slider.current) {
-      return;
-    }
-    slider.current.slickPrev();
-  }, [slider]);
-
-  const goTo = (target: number) => {
-    if (!slider || !slider.current) {
-      return;
-    }
-    if (slider.current) {
-      setIndex(target);
-      slider.current.slickGoTo(target);
-    }
-  };
-
-  const onDisableNavigation = () => {
-    if (!isDragging.current) setNavigationDisabled(true);
-  };
-  const onEnableNavigation = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    isDragging.current = false;
-    setNavigationDisabled(false);
-  };
-
-  const onToggleLightbox = useCallback(() => setLightbox(!lightbox), [lightbox]);
-
-  const mediaLength = media?.length || 0;
-  const placeholder = useMemo(
-    () => placeholderImage || DEFAULT_PLACEHOLDER_IMAGE,
-    [placeholderImage]
-  );
-
-  return (
-    <>
-      <Wrapper>
-        <Main>
-          <SliderWrapper onMouseDown={onMouseDown} onMouseMove={onMouseMove} onClick={onClick}>
-            <Slider
-              {...sliderSettings}
-              swipe={!navigationDisabled}
-              touchMove={!navigationDisabled}
-              swipeToSlide={!navigationDisabled}
-              ref={slider}
-              beforeChange={beforeChange}
-            >
-              {!!media?.length ? (
-                media.map((m, i) => (
-                  <Item key={m.files[0].url || i}>
-                    {m.type === 'image' && (
-                      <Image
-                        src={
-                          m.files[0].formats.filter(notEmpty).find((x) => x.format === '1170x')?.url
-                        }
-                        alt={`Bild ${i + 1}`}
-                      />
-                    )}
-                    {m.type === 'threesixty' && (
-                      <ThreeSixty
-                        urls={m.files.map((x) => x.url)}
-                        visible={i === index}
-                        onDisableNavigation={onDisableNavigation}
-                        navigationDisabled={navigationDisabled}
-                      />
-                    )}
-                    {m.type === 'embedded' && <EmbededVideo src={m.files[0].url} index={i + 1} />}
-                    {m.type === 'sphere' && (
-                      <Sphere
-                        visible={i === index}
-                        url={m.files[0].url}
-                        preview={m.files[0].url}
-                        onDisableNavigation={onDisableNavigation}
-                        navigationDisabled={navigationDisabled}
-                      />
-                    )}
-                  </Item>
-                ))
-              ) : (
-                <Item key={placeholder}>
-                  <Image src={placeholder} alt={`Bild 1`} />
-                </Item>
-              )}
-            </Slider>
-            {navigationDisabled && mediaLength > 1 && (
-              <EnableNavigationButton>
-                <ButtonSecondary onClick={onEnableNavigation} title="Stäng">
-                  <ButtonContent>Stäng</ButtonContent>
-                </ButtonSecondary>
-              </EnableNavigationButton>
-            )}
-          </SliderWrapper>
-          {!navigationDisabled && mediaLength > 1 && (
-            <>
-              <ArrowLeft onClick={prevImage} title="Föregående bild">
-                <IconChevronLeft block />
-              </ArrowLeft>
-              <ArrowRight onClick={nextImage} title="Nästa bild">
-                <IconChevronRight block />
-              </ArrowRight>
-            </>
-          )}
-        </Main>
-        <Alt>
-          <QuickNav ref={quickNavRef}>
-            {!!media?.length ? (
-              media.map((m, i) => {
-                const src =
-                  m.files[0].formats.filter(notEmpty).find((x) => x.format === '225x150')?.url ||
-                  m.files[0].url;
-                return (
-                  <QuickNavItem key={src || i} active={index === i}>
-                    <QuickNavBtn onClick={() => goTo(i)} title={`Gå till bild ${i + 1}`}>
-                      {m.type === 'image' && <QuickNavImg src={src} alt={`Bild ${i + 1}`} />}
-                      {m.type === 'threesixty' && <QuickNavImg src={src} alt={`Bild ${i + 1}`} />}
-                      {m.type === 'embedded' && <QuickNavEmbeded src={src} index={i} />}
-                      {m.type === 'sphere' && (
-                        <QuickNavImg src={m.files[0].url} alt={`Bild ${i + 1}`} />
-                      )}
-                    </QuickNavBtn>
-                  </QuickNavItem>
-                );
-              })
-            ) : (
-              <QuickNavItem key={placeholder} active>
-                <QuickNavBtn onClick={() => goTo(0)} title={`Gå till bild 0`}>
-                  <QuickNavImg src={placeholder} alt={`Bild 1`} />
-                </QuickNavBtn>
-              </QuickNavItem>
-            )}
-          </QuickNav>
-        </Alt>
-      </Wrapper>
-      {lightbox && !!media?.length && (
-        <Lightbox media={media} index={index} onClose={onToggleLightbox} />
-      )}
-    </>
-  );
-};
-
-export default Gallery;