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

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

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

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

package/src/components/Gallery/index.tsx

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

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

@@ -1,9 +1,12 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
 import { Wrapper as Container } from '../Container/wrapper';
+
 const quickNavWidth = 83; // 75px + 8px
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   ${(props) => props.theme.breakpoint.LtMd} {
     ${Container} & {
       margin-left: ${size(-3)};
@@ -23,7 +26,8 @@ export const Wrapper = styled.div `
     padding-right: ${quickNavWidth}px;
   }
 `;
-export const Main = styled.div `
+
+export const Main = styled.div`
   position: relative;
   height: 0;
   padding-bottom: 66.66666667%;
@@ -48,7 +52,8 @@ export const Main = styled.div `
     }
   }
 `;
-export const Alt = styled.div `
+
+export const Alt = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -71,7 +76,8 @@ export const Alt = styled.div `
     pointer-events: none;
   }
 `;
-export const Item = styled.div `
+
+export const Item = styled.div`
   position: relative;
   width: 100%;
   height: 100%;
@@ -86,7 +92,8 @@ export const Item = styled.div `
     transition: border-radius 150ms ease;
   }
 `;
-export const SliderWrapper = styled.div `
+
+export const SliderWrapper = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -126,7 +133,8 @@ export const SliderWrapper = styled.div `
     }
   }
 `;
-export const Image = styled.img `
+
+export const Image = styled.img`
   display: block;
   position: absolute;
   left: 0;
@@ -139,7 +147,8 @@ export const Image = styled.img `
   object-fit: cover;
   cursor: pointer;
 `;
-export const ImageFull = styled.img `
+
+export const ImageFull = styled.img`
   display: block;
   position: absolute;
   top: 0;
@@ -148,8 +157,10 @@ export const ImageFull = styled.img `
   height: 100%;
   object-fit: cover;
 `;
+
 // Arrow Nav
-const Arrow = styled(ButtonReset) `
+
+const Arrow = styled(ButtonReset)`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -195,14 +206,18 @@ const Arrow = styled(ButtonReset) `
     display: none;
   }
 `;
-export const ArrowLeft = styled(Arrow) `
+
+export const ArrowLeft = styled(Arrow)`
   left: ${size(2)};
 `;
-export const ArrowRight = styled(Arrow) `
+
+export const ArrowRight = styled(Arrow)`
   right: ${size(2)};
 `;
+
 // Quick Nav
-export const QuickNav = styled.ul `
+
+export const QuickNav = styled.ul`
   position: relative;
   max-height: 100%;
   list-style: none;
@@ -211,17 +226,26 @@ export const QuickNav = styled.ul `
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 `;
+
+type QuickNavItemProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLLIElement>,
+  HTMLLIElement
+> & {
+  active?: boolean;
+};
+
 export const QuickNavItem = styled.li.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
+  className: 'wayke__theme wayke__color--primary-text',
+}))<QuickNavItemProps>`
   position: relative;
 
   & + & {
     margin-top: ${size(1)};
   }
 
-  ${({ active }) => active &&
-    css `
+  ${({ active }) =>
+    active &&
+    css`
       :before {
         content: '';
         position: absolute;
@@ -234,7 +258,8 @@ export const QuickNavItem = styled.li.attrs(() => ({
       }
     `}
 `;
-export const QuickNavBtn = styled(ButtonReset) `
+
+export const QuickNavBtn = styled(ButtonReset)`
   position: relative;
   display: block;
   width: 100%;
@@ -266,7 +291,8 @@ export const QuickNavBtn = styled(ButtonReset) `
     transform: scale(0.95);
   }
 `;
-export const QuickNavImg = styled.img `
+
+export const QuickNavImg = styled.img`
   display: block;
   position: absolute;
   top: 0;
@@ -275,16 +301,20 @@ export const QuickNavImg = styled.img `
   height: 100%;
   object-fit: cover;
 `;
+
 // Media Button
-export const MediaButtonWrapper = styled.div `
+
+export const MediaButtonWrapper = styled.div`
   position: absolute;
   bottom: ${size(2)};
   left: 50%;
   transform: translateX(-50%);
   z-index: 1;
 `;
+
 // Sphere Close Button
-export const EnableNavigationButton = styled.div `
+
+export const EnableNavigationButton = styled.div`
   position: absolute;
   bottom: ${size(2)};
   left: 50%;

package/src/components/Grid/index.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { Wrapper, List, Item } from './wrapper';
+import ProductCard from '../ProductCard/index';
+import { Document } from '../../@types/search';
+import { numberSeparator } from '../../utils/formats';
+
+const resolveImage = (document: Document) => {
+  const img = document.featuredImage?.files?.[0]?.url;
+  if (img) {
+    return `${img}?w=567&q=72`;
+  }
+  return undefined;
+};
+
+interface GridProps {
+  documents?: Document[];
+  hashRoute?: boolean;
+  pathRoute?: string;
+  placeholderImage?: string;
+  onClickItem?: (id: string) => void;
+}
+
+const Grid = ({ documents, placeholderImage, hashRoute, pathRoute, onClickItem }: GridProps) => {
+  if (!documents) {
+    return null;
+  }
+
+  return (
+    <Wrapper>
+      <List>
+        {documents.map((document) => {
+          const _path = pathRoute?.replace(/^\/|\/$/g, '');
+
+          const prefix = _path ? `/${_path}/` : '/';
+
+          const pathRouteUrl =
+            window.location.pathname === '/'
+              ? `${prefix}${document._id}`
+              : `${window.location.pathname}${prefix}${document._id}`;
+
+          return (
+            <Item key={document._id}>
+              <ProductCard
+                id={document._id}
+                onClick={onClickItem}
+                title={document.title}
+                pathRoute={pathRoute}
+                href={pathRoute ? pathRouteUrl : hashRoute ? `#${document._id}` : undefined}
+                image={resolveImage(document)}
+                placeholderImage={placeholderImage}
+                description={document.shortDescription}
+                uspList={[
+                  {
+                    title: document.modelYear,
+                  },
+                  {
+                    title: `${numberSeparator(document.mileage)} mil`,
+                  },
+                  {
+                    title: document.gearboxType,
+                  },
+                  {
+                    title: document.fuelType,
+                  },
+                ]}
+                price={`${numberSeparator(document.price)} kr`}
+                leasingPrice={
+                  document.leasingPrice !== undefined
+                    ? `${numberSeparator(document.leasingPrice)} kr`
+                    : undefined
+                }
+                oldPrice={
+                  document.oldPrice !== undefined && document.price < document.oldPrice
+                    ? `${numberSeparator(document.oldPrice)} kr`
+                    : undefined
+                }
+              />
+            </Item>
+          );
+        })}
+      </List>
+    </Wrapper>
+  );
+};
+
+export default Grid;

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

@@ -1,14 +1,18 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div ``;
-export const List = styled.ul `
+
+export const Wrapper = styled.div``;
+
+export const List = styled.ul`
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   padding: 0;
   margin: ${size(-2)} ${size(-1)};
 `;
-export const Item = styled.li `
+
+export const Item = styled.li`
   flex: 1 1 auto;
   width: 100%;
   max-width: 100%;