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

package/src/components/InsuranceOptions/InsuranceModal.tsx

@@ -0,0 +1,253 @@
+import React, { useState, useCallback } from 'react';
+
+import Modal from '../Modal/index';
+import Content from '../Content/index';
+import { Repeat, RepeatTiny, RepeatSmall } from '../Repeat/index';
+import LogoBox from '../LogoBox/index';
+import DetailBox from '../DetailBox/index';
+import ExtendInfo from '../ExtendInfo/index';
+import Snackbar from '../Snackbar/index';
+import { UtilityTextBold } from '../Utility/index';
+import InputLabel from '../InputLabel/index';
+import InputText from '../InputText/index';
+import InputCheckbox from '../InputCheckbox/index';
+import InputSelect, { OptionProps } from '../InputSelect/index';
+import { H4 } from '../Heading/index';
+import { InputGroup, InputGroupColumn } from '../InputGroup/index';
+import { ButtonPrimary, ButtonContent, ButtonInline } from '../Button/index';
+import { ContentLogo, ContentLogoText, ContentLogoMedia } from '../ContentLogo/index';
+import { ColumnRow, ColumnRowItem } from '../ColumnRow/index';
+import useInsuranceCalculation from '../../hooks/useInsurance';
+import { ssnIsValid } from '../../utils/ssn';
+import Loader from '../Loader/index';
+import { numberSeparator } from '../../utils/formats';
+import { DrivingDistance, InsuranceOption, Branch } from '../../@types/codegen';
+import PubSub from '../../utils/pubsub/pubsub';
+
+interface FormData {
+  ssn: string;
+  drivingDistance: DrivingDistance;
+}
+
+interface InsuranceModal {
+  id: string;
+  branch?: Branch | null;
+  onClose: () => void;
+  insuranceOptions: InsuranceOption;
+}
+
+const InsuranceModal = ({ id, branch, onClose, insuranceOptions }: InsuranceModal) => {
+  const [form, setForm] = useState<FormData>({
+    ssn: '',
+    drivingDistance: DrivingDistance.Between0And1000,
+  });
+  const [payload, setPayload] = useState<FormData>();
+  const { loading, data, error } = useInsuranceCalculation(
+    id,
+    branch?.id ? branch?.id : undefined,
+    ssnIsValid(payload?.ssn) ? payload?.ssn : undefined,
+    payload?.drivingDistance
+  );
+
+  const onChangeSsn = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => setForm({ ...form, ssn: e.currentTarget.value }),
+    [form]
+  );
+
+  const onChangeDrivingDistance = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) =>
+      setForm({ ...form, drivingDistance: e.currentTarget.value as DrivingDistance }),
+    [form]
+  );
+
+  const onShowInsurances = useCallback(() => {
+    PubSub.publish('InsuranceInterest');
+    setPayload(form);
+  }, [form]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.keyCode === 13 && ssnIsValid(form.ssn) && !loading) {
+        onShowInsurances();
+      }
+    },
+    [form]
+  );
+
+  const options: OptionProps[] = [
+    { value: DrivingDistance.Between0And1000, displayName: '0 - 1000' },
+    { value: DrivingDistance.Between1000And1500, displayName: '1000 - 1500' },
+    { value: DrivingDistance.Between1500And2000, displayName: '1500 - 2000' },
+    { value: DrivingDistance.Between2000And2500, displayName: '2000 - 2500' },
+    { value: DrivingDistance.Over2500, displayName: '2500+' },
+  ];
+
+  return (
+    <Modal title="Försäkring" onClose={onClose}>
+      {(insuranceOptions?.description || insuranceOptions?.logotype) && (
+        <Repeat>
+          <ContentLogo>
+            {insuranceOptions.description && (
+              <ContentLogoText>
+                <Content>
+                  <p>{insuranceOptions.description}</p>
+                </Content>
+              </ContentLogoText>
+            )}
+            {insuranceOptions.logotype && (
+              <ContentLogoMedia>
+                <LogoBox
+                  logo={insuranceOptions.logotype}
+                  alt={insuranceOptions.name || 'Logotyp'}
+                  wide
+                />
+              </ContentLogoMedia>
+            )}
+          </ContentLogo>
+        </Repeat>
+      )}
+
+      <Repeat>
+        <RepeatSmall>
+          <RepeatTiny>
+            <InputGroup>
+              <InputGroupColumn>
+                <InputLabel htmlFor="input-insurance-personalnumber">Personnummer</InputLabel>
+                <InputText
+                  placeholder="ÅÅÅÅMMDD-XXXX"
+                  label="Personnummer"
+                  value={form.ssn}
+                  onChange={onChangeSsn}
+                  onKeyDown={onKeyDown}
+                  id="input-insurance-personalnumber"
+                />
+              </InputGroupColumn>
+              <InputGroupColumn>
+                <InputLabel htmlFor="input-insurance-mileage">
+                  Uppskattad körsträcka per år
+                </InputLabel>
+                <InputSelect
+                  value={form.drivingDistance}
+                  onChange={onChangeDrivingDistance}
+                  options={options}
+                  unit="mil"
+                  title="Uppskattad körsträcka per år"
+                />
+              </InputGroupColumn>
+            </InputGroup>
+          </RepeatTiny>
+          <RepeatTiny>
+            <ButtonPrimary
+              fullWidth
+              disabled={!ssnIsValid(form.ssn) || loading}
+              onClick={onShowInsurances}
+            >
+              <ButtonContent>Visa försäkringar</ButtonContent>
+            </ButtonPrimary>
+          </RepeatTiny>
+        </RepeatSmall>
+        {false && (
+          <RepeatSmall>
+            <InputCheckbox id="input-insurance-save-personalnumber">
+              Spara personnummer på denna enhet
+            </InputCheckbox>
+          </RepeatSmall>
+        )}
+        <RepeatSmall>
+          <Content small>
+            <p>
+              Spara personnummer på denna dator för att direkt visa försäkringskostnaderna i Wayke.
+              Personnumret lagras inte hos Wayke utan finns bara sparad i din webbläsare.
+            </p>
+          </Content>
+        </RepeatSmall>
+      </Repeat>
+
+      {loading && (
+        <Repeat>
+          <Loader />
+        </Repeat>
+      )}
+
+      {error && (
+        <Repeat>
+          <Snackbar severity="error" icon heading="Ett fel har inträffat">
+            Kunde inte hämta försäkringar. Vänligen försök igen.
+          </Snackbar>
+        </Repeat>
+      )}
+
+      <>
+        {data?.insurances && (
+          <Repeat>
+            {data?.insurances.map((insurance) => (
+              <Repeat key={insurance.name}>
+                <DetailBox
+                  heading={`${numberSeparator(insurance.price)} ${insurance.unit}`}
+                  description={insurance.name}
+                >
+                  <Repeat>
+                    <>
+                      {insurance.description && (
+                        <RepeatTiny>
+                          <Content>
+                            <p>{insurance.description}</p>
+                          </Content>
+                        </RepeatTiny>
+                      )}
+                    </>
+                    <>
+                      {insurance.url && (
+                        <RepeatTiny>
+                          <ButtonInline
+                            as="a"
+                            href={insurance.url || ''}
+                            target="_blank"
+                            rel="noopener noreferrer nofollow"
+                          >
+                            Förköpsinformation och villkor (öppnas i ny flik)
+                          </ButtonInline>
+                        </RepeatTiny>
+                      )}
+                    </>
+                  </Repeat>
+                  {insurance.items && insurance.items.length > 0 && (
+                    <Repeat>
+                      <H4>Försäkringen innehåller</H4>
+                      {insurance.items.map((item) => (
+                        <RepeatSmall key={item.name || ''}>
+                          <ExtendInfo title={item.name || ''}>{item.description}</ExtendInfo>
+                        </RepeatSmall>
+                      ))}
+                    </Repeat>
+                  )}
+                  {insurance.addons && insurance.addons.length > 0 && (
+                    <Repeat>
+                      <H4>Välj till</H4>
+                      {insurance.addons.map((addon) => (
+                        <RepeatSmall key={addon.title || ''}>
+                          <ColumnRow>
+                            <ColumnRowItem>
+                              <ExtendInfo title={addon.title || ''}>{addon.description}</ExtendInfo>
+                            </ColumnRowItem>
+                            <ColumnRowItem>
+                              <UtilityTextBold>
+                                +{addon.price} {addon.unit}
+                              </UtilityTextBold>
+                            </ColumnRowItem>
+                          </ColumnRow>
+                        </RepeatSmall>
+                      ))}
+                    </Repeat>
+                  )}
+                </DetailBox>
+              </Repeat>
+            ))}
+          </Repeat>
+        )}
+      </>
+    </Modal>
+  );
+};
+
+export default InsuranceModal;

package/src/components/InsuranceOptions/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { InsuranceOption, Branch } from '../../@types/codegen';
+import Insurance from './Insurance';
+import InsuranceFree from './InsuranceFree';
+
+interface InsuranceOptions {
+  id: string;
+  branch?: Branch | null;
+  insuranceOptions: InsuranceOption[];
+}
+
+const InsuranceOptions = ({ id, branch, insuranceOptions }: InsuranceOptions) => {
+  if (!insuranceOptions.length) {
+    return null;
+  }
+
+  if (insuranceOptions.length > 0) {
+    if (insuranceOptions[0].requiresDistance && insuranceOptions[0].requiresPersonalNumber)
+      return <Insurance id={id} branch={branch} insuranceOptions={insuranceOptions} />;
+
+    return <InsuranceFree insuranceOptions={insuranceOptions} />;
+  }
+
+  return null;
+};
+
+export default InsuranceOptions;

package/src/components/Lightbox/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { Wrapper, UiBlock, Item, Img, CloseBtn } from './wrapper';
+import { IconCancel } from '../Icon/index';
+import EmbeddedVideoLightbox from '../Video/EmbeddedVideoLightbox';
+import SphereLightbox from '../Sphere/SphereLightbox';
+import ThreeSixtyLightbox from '../ThreeSixty/ThreeSixtLightbox';
+import { Media } from '../../@types/codegen';
+
+interface LightboxProps {
+  index: number;
+  media: Media[];
+  onClose: () => void;
+}
+
+const Lightbox = ({ index, media, onClose }: LightboxProps) => {
+  const onRef = (ref: HTMLDivElement | null) => {
+    if (ref) {
+      setTimeout(() => {
+        ref.scrollIntoView();
+      }, 300);
+    }
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.keyCode === 27) {
+      onClose();
+    }
+  };
+
+  return (
+    <Wrapper ref={(ref) => ref?.focus()} onKeyDown={onKeyDown} tabIndex={0}>
+      <UiBlock onClick={onClose} aria-hidden />
+      {media.map((m, i) => (
+        <Item key={i} ref={index === i ? onRef : undefined}>
+          {m.type === 'image' && (
+            <Img id={`lightbox-image-${i}`} src={m.files[0].url} alt={`Bild ${i + 1}`} />
+          )}
+          {m.type === 'threesixty' && <ThreeSixtyLightbox urls={m.files.map((x) => x.url)} />}
+          {m.type === 'sphere' && <SphereLightbox url={m.files[0].url} />}
+          {m.type === 'embedded' && <EmbeddedVideoLightbox url={m.files[0].url} />}
+        </Item>
+      ))}
+      <CloseBtn onClick={onClose} title="Stäng">
+        <IconCancel block />
+      </CloseBtn>
+    </Wrapper>
+  );
+};
+
+export default Lightbox;

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

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   position: fixed;
   top: 0;
   bottom: 0;
@@ -15,9 +17,10 @@ export const Wrapper = styled.div `
     padding: ${size(2)};
   }
 `;
+
 export const UiBlock = styled.div.attrs(() => ({
-    role: 'button',
-})) `
+  role: 'button',
+}))`
   position: fixed;
   top: 0;
   bottom: 0;
@@ -26,14 +29,16 @@ export const UiBlock = styled.div.attrs(() => ({
   background-color: rgba(0, 0, 0, 0.3);
   z-index: -1;
 `;
-export const Item = styled.div `
+
+export const Item = styled.div`
   position: relative;
 
   & + & {
     margin-top: ${size(1)};
   }
 `;
-export const Img = styled.img `
+
+export const Img = styled.img`
   position: relative;
   display: block;
   max-width: 100%;
@@ -45,7 +50,8 @@ export const Img = styled.img `
     max-height: calc(100vh - ${size(4)});
   }
 `;
-export const CloseBtn = styled(ButtonReset) `
+
+export const CloseBtn = styled(ButtonReset)`
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/Loader/index.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { Spinner, Wrapper } from './wrapper';
+import { SrOnly } from '../SrOnly/index';
+
+interface Props {
+  inline?: boolean;
+  center?: boolean;
+}
+
+const Loader = ({ inline, center }: Props) => (
+  <Wrapper inline={inline} center={center}>
+    <Spinner aria-hidden="true" />
+    <SrOnly>Laddar...</SrOnly>
+  </Wrapper>
+);
+
+export default Loader;

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

@@ -1,7 +1,9 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { rotate } from '../../layout/keyframes';
-export const Spinner = styled.div `
+
+export const Spinner = styled.div`
   display: block;
   margin: 0 auto;
   width: ${size(4)};
@@ -11,12 +13,22 @@ export const Spinner = styled.div `
   border-top-color: transparent;
   animation: ${rotate} 600ms linear infinite;
 `;
+
+type WrapperProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+> & {
+  inline?: boolean;
+  center?: boolean;
+};
+
 export const Wrapper = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-    role: 'status',
-})) `
-  ${({ inline }) => inline &&
-    css `
+  className: 'wayke__theme wayke__color--primary-text',
+  role: 'status',
+}))<WrapperProps>`
+  ${({ inline }) =>
+    inline &&
+    css`
       display: inline-block;
       vertical-align: middle;
       color: currentColor !important;
@@ -27,8 +39,9 @@ export const Wrapper = styled.div.attrs(() => ({
       }
     `}
 
-  ${({ center }) => center &&
-    css `
+  ${({ center }) =>
+    center &&
+    css`
       position: absolute;
       top: 50%;
       left: 50%;

package/src/components/LogoBox/index.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { Logo } from './wrapper';
+
+interface ILogoBox {
+  logo: string;
+  logo2x?: string | null;
+  alt?: string;
+  wide?: boolean;
+}
+
+const LogoBox = ({ logo, logo2x, alt, wide }: ILogoBox) => {
+  let logoRetina = logo;
+
+  if (logo2x) {
+    logoRetina = `${logo2x} 2x`;
+  }
+
+  return <Logo src={logo} srcSet={logoRetina} alt={alt} wide={wide} />;
+};
+
+export default LogoBox;

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

@@ -1,12 +1,19 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Logo = styled.img `
+
+type LogoProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+  wide?: boolean;
+};
+
+export const Logo = styled.img<LogoProps>`
   display: block;
   max-width: ${size(9.5)};
   max-height: ${size(6)};
 
-  ${({ wide }) => wide &&
-    css `
+  ${({ wide }) =>
+    wide &&
+    css`
       max-width: ${size(20)};
     `}
 `;

package/src/components/Map/index.tsx

@@ -0,0 +1,62 @@
+import React, { useState, useCallback } from 'react';
+import useSettings from '../../State/Settings/useSettings';
+
+import { Wrapper, Image, Placeholder, PlaceholderAction } from './wrapper';
+import { ButtonSecondary, ButtonContent } from '../Button/index';
+import { Position, Maybe } from '../../@types/codegen';
+
+interface StaticMapProps {
+  position?: Maybe<Position>;
+}
+
+const StaticMap = ({ position }: StaticMapProps) => {
+  const { googleMapsApiKey, googleMapsMarker } = useSettings();
+  const [visible, setVisible] = useState(false);
+
+  const onShowMap = useCallback((e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (googleMapsApiKey) {
+      e.preventDefault();
+      setVisible(true);
+    }
+  }, []);
+
+  if (!position) {
+    return null;
+  }
+
+  const { latitude, longitude } = position;
+
+  if (visible && googleMapsApiKey) {
+    return (
+      <Wrapper
+        href={`http://maps.google.com/maps?q=${latitude},${longitude}`}
+        title="Visa på Google Maps"
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+      >
+        <Image
+          src={`https://maps.googleapis.com/maps/api/staticmap?center=${latitude},${longitude}&zoom=10&size=640x280&maptype=roadmap&markers=${
+            googleMapsMarker ? `icon:${encodeURIComponent(googleMapsMarker)}` : ''
+          }%7C${latitude},${longitude}&key=${googleMapsApiKey}`}
+          alt="Karta"
+        />
+      </Wrapper>
+    );
+  }
+  return (
+    <Placeholder
+      href={`http://maps.google.com/maps?q=${latitude},${longitude}`}
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+      onClick={onShowMap}
+    >
+      <PlaceholderAction>
+        <ButtonSecondary as="div">
+          <ButtonContent>Visa karta</ButtonContent>
+        </ButtonSecondary>
+      </PlaceholderAction>
+    </Placeholder>
+  );
+};
+
+export default StaticMap;

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

@@ -1,13 +1,16 @@
 import styled from 'styled-components';
-export const Wrapper = styled.a `
+
+export const Wrapper = styled.a`
   display: block;
 `;
-export const Image = styled.img `
+
+export const Image = styled.img`
   display: block;
   width: 100%;
   border-radius: 3px;
 `;
-export const Placeholder = styled.a `
+
+export const Placeholder = styled.a`
   display: block;
   position: relative;
   width: 100%;
@@ -17,7 +20,8 @@ export const Placeholder = styled.a `
   border-radius: 3px;
   color: ${(props) => props.theme.color.textDark};
 `;
-export const PlaceholderAction = styled.div `
+
+export const PlaceholderAction = styled.div`
   position: absolute;
   top: 50%;
   left: 50%;

package/src/components/Modal/index.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+
+import { Portal, PortalNamespace } from '../Portal/index';
+
+import { H1 } from '../Heading/index';
+import { IconCancel } from '../Icon/index';
+import {
+  Body,
+  Content,
+  Dialog,
+  Header,
+  Heading,
+  UiBlock,
+  Wrapper,
+  Close,
+  CloseBtn,
+} from './wrapper';
+
+interface ModalProps {
+  id?: string | null;
+  title: string | null;
+  children: React.ReactNode;
+  onClose: (e: React.MouseEvent<HTMLDivElement | HTMLButtonElement, MouseEvent>) => void;
+}
+
+const Modal = ({ id, title, onClose, children }: ModalProps) => {
+  return (
+    <Portal id={id || PortalNamespace.DefaultPortal}>
+      <Wrapper onClick={(e) => e.stopPropagation()}>
+        <UiBlock onClick={onClose} title="Stäng modal" />
+        <Dialog>
+          <Content>
+            <Header>
+              <Heading>
+                <H1 noMargin>{title}</H1>
+              </Heading>
+              <Close>
+                <CloseBtn onClick={onClose} title="Stäng modal">
+                  <IconCancel block />
+                </CloseBtn>
+              </Close>
+            </Header>
+            <Body>{children}</Body>
+          </Content>
+        </Dialog>
+      </Wrapper>
+    </Portal>
+  );
+};
+
+export default Modal;