@popsure/dirty-swan 0.28.0-beta.4 → 0.28.0

package/src/lib/components/autocompleteAddress/index.tsx

@@ -1,24 +1,64 @@
-import { MouseEventHandler, useState, useCallback } from 'react';
-import _debounce from 'lodash.debounce';
-
-import { Address } from '@popsure/public-models';
-import { GoogleMapsWrapper } from './components/GoogleMapsWrapper';
-import ManualAddressEntry from './modes/manual';
-import DynamicAddressEntry from './modes/dynamic';
-import { getGeocode } from 'use-places-autocomplete';
-import { inlineAddress } from './util';
-import { useJsApiLoader } from './util/googleMapsLoader';
-
-export type AutoCompleteAddressProps = {
-  mapId?: string;
+import { useCallback, useEffect, useRef, useState } from 'react';
+import classNames from 'classnames';
+import debounce from 'lodash.debounce';
+import isEqual from 'lodash.isequal';
+import Input from '../input';
+import {
+  Address,
+  countryNameFromAlphaCode,
+  Alpha2CountryCode,
+} from '@popsure/public-models';
+
+import { geocoderAddressComponentToPartialAddress } from './util';
+
+import styles from './style.module.scss';
+
+const GERMANY_LAT_LNG = { lat: 51.54317, lng: 10.3181503 };
+
+const GERMANY_ALPHA_CODE = 'DE';
+
+const MAP_CONFIG_OBJ = {
+  zoom: 6,
+  center: GERMANY_LAT_LNG,
+  fullscreenControl: false,
+  mapTypeControl: false,
+  panControl: false,
+  zoomControl: false,
+  streetViewControl: false,
+  scrollwheel: false,
+  scaleControl: false,
+  rotateControl: false,
+  draggable: false,
+};
+
+const loadGoogleMapsApiDynamically = (callback: () => void, apiKey: string) => {
+  const existingScript = document.getElementById('googleMapsImportScript');
+
+  if (existingScript) {
+    return;
+  }
+
+  const googleMapImportScript = document.createElement('script');
+  googleMapImportScript.id = 'googleMapsImportScript';
+  googleMapImportScript.type = 'text/javascript';
+  googleMapImportScript.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places`;
+  document.head.appendChild(googleMapImportScript);
+
+  googleMapImportScript.onload = () => {
+    callback();
+  };
+};
+
+const AutoCompleteAddress = ({
+  apiKey,
+  address: initialAddress,
+  onAddressChange,
+  placeholders,
+  manualAddressEntryTexts,
+}: {
   apiKey: string;
   address?: Partial<Address>;
-  staticVersion?: boolean;
   onAddressChange: (address: Partial<Address>) => void;
-  manualAddressEntryTexts?: {
-    preText?: string;
-    cta?: string;
-  };
   placeholders?: {
     manualAddressEntry?: string;
     street?: string;
@@ -27,120 +67,282 @@ export type AutoCompleteAddressProps = {
     postcode?: string;
     city?: string;
   };
-};
-
-const AutoCompleteAddress = ({
-  mapId = 'map',
-  apiKey,
-  address,
-  staticVersion = !!process.env.STORYBOOK_STATIC,
-  onAddressChange,
-  manualAddressEntryTexts,
-  placeholders
-}: AutoCompleteAddressProps) => {
+  manualAddressEntryTexts?: {
+    preText?: string;
+    cta?: string;
+  };
+}) => {
+  const [manualAddressEntry, setManualAddressEntry] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [geometry, setGeometry] = useState<
-    google.maps.places.PlaceGeometry | undefined
-  >(undefined);
-  const [manualAddressEntry, setManualAddressEntry] = useState(!!address);
-  // you can read more about it here:
-  // https://github.com/JustFly1984/react-google-maps-api/blob/develop/packages/react-google-maps-api/src/useJsApiLoader.md
-  const { isLoaded: hasLoadedGoogleAPI, loadError: loadGoogleAPIError } =
-    useJsApiLoader({
-      googleMapsApiKey: apiKey,
+  const autocomplete = useRef<google.maps.places.Autocomplete | null>(null);
+  const autocompleteElement = useRef<HTMLInputElement | null>(null);
+  const map = useRef<google.maps.Map | null>(null);
+  const marker = useRef<google.maps.Marker | null>(null);
+  const [address, setAddress] = useState(initialAddress);
+  const [hasLoadedGoogleAPI, setHasLoadedGoogleAPI] = useState(
+    window.google !== undefined
+  );
+
+  loadGoogleMapsApiDynamically(() => {
+    setHasLoadedGoogleAPI(true);
+  }, apiKey);
+
+  const [place, setPlace] = useState<google.maps.places.PlaceResult | null>(
+    null
+  );
+
+  useEffect(() => {
+    if (address) {
+      if (autocompleteElement.current && address.street) {
+        autocompleteElement.current.value = address.street;
+      }
+
+      if (isEqual(address, initialAddress) === false) {
+        onAddressChange({ ...address });
+      }
+      handleEnterAddressManually();
+    }
+  }, [initialAddress, address, onAddressChange, hasLoadedGoogleAPI]);
+
+  useEffect(() => {
+    if (hasLoadedGoogleAPI === false) {
+      return;
+    }
+
+    const reference = document.getElementById(
+      'autocomplete'
+    ) as HTMLInputElement;
+
+    autocomplete.current = new google.maps.places.Autocomplete(reference, {
+      types: ['address'],
+      componentRestrictions: { country: GERMANY_ALPHA_CODE },
     });
 
-  const isGeometryEnabled = !staticVersion;
+    autocomplete.current.addListener('place_changed', onPlaceChanged);
 
-  const handleModeSwitch: MouseEventHandler<HTMLButtonElement> = (event) => {
-    setManualAddressEntry(event.currentTarget.dataset.value === 'true');
-  };
+    map.current = new google.maps.Map(
+      document.getElementById('map')!,
+      MAP_CONFIG_OBJ
+    );
 
-  const handleDynamicAddress = (address: Partial<Address>) => {
-    onAddressChange(address);
-    setManualAddressEntry(true);
+    import('./mapStyle').then(({ style }) => {
+      map.current?.mapTypes.set('styled_map', style);
+      map.current?.setMapTypeId('styled_map');
+    });
+
+    marker.current = new google.maps.Marker({
+      map: map.current,
+    });
+
+    setPlaceFromAddress(address);
+  }, [hasLoadedGoogleAPI]); // eslint-disable-line
+
+  const onPlaceChanged = (
+    newPlace:
+      | google.maps.places.PlaceResult
+      | undefined = autocomplete.current?.getPlace(),
+    updateAddress: boolean = true
+  ) => {
+    if (newPlace?.geometry?.location) {
+      const geocoderAddress = geocoderAddressComponentToPartialAddress(
+        newPlace.address_components!
+      );
+
+      setPlace(newPlace);
+      if (updateAddress) {
+        setAddress((oldValue) => ({
+          ...geocoderAddress,
+          additionalInformation: oldValue?.additionalInformation,
+        }));
+      }
+
+      map.current?.panTo(newPlace.geometry.location);
+      map.current?.setZoom(15);
+
+      marker.current?.setPosition(newPlace.geometry.location);
+    }
   };
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const updateMapGeometry = useCallback(
-    _debounce((address: Partial<Address>) => {
-      const parameter = {
-        address: inlineAddress(address),
-      };
-
-      getGeocode(parameter)
-        .then((results) => {
-          setGeometry(results[0].geometry);
-          setIsLoading(false);
-        })
-        .catch((error) => {
-          console.log('Error: ', error);
-        });
-    }, 1000),
-    [_debounce]
+  const setPlaceFromAddress = useCallback(
+    (address: Partial<Address> | undefined) => {
+      if (!map.current) {
+        return;
+      }
+
+      if (address) {
+        const service = new google.maps.places.PlacesService(map.current);
+        const query = `${address.street ?? ''} ${address.houseNumber ?? ''}, ${
+          address.city ?? ''
+        }, ${
+          address.country
+            ? countryNameFromAlphaCode(address.country as Alpha2CountryCode)
+            : ''
+        }`;
+        setIsLoading(true);
+        service.findPlaceFromQuery(
+          {
+            fields: ['place_id'],
+            query,
+          },
+          (results) => {
+            const firstResult = results && results[0];
+            if (firstResult && firstResult.place_id) {
+              service.getDetails(
+                { placeId: firstResult.place_id },
+                (newPlace) => {
+                  onPlaceChanged(newPlace ?? undefined, false);
+                }
+              );
+            }
+            setIsLoading(false);
+          }
+        );
+      }
+    },
+    []
   );
 
-  const handleManualAddress = (address: Partial<Address>) => {
-    onAddressChange(address);
-    if (isGeometryEnabled) {
-      setIsLoading(true);
-      updateMapGeometry(address);
-    }
+  const debouncedSetPlace = debounce(setPlaceFromAddress, 1000);
+
+  const handleEnterAddressManually = () => {
+    setManualAddressEntry(true);
   };
 
   return (
     <>
-      {isGeometryEnabled && address && (
-        <GoogleMapsWrapper
-          mapId={mapId}
-          hasLoadedGoogleAPI={hasLoadedGoogleAPI}
-          geometry={geometry}
-          isLoading={isLoading}
-        /> // this can be composable <AutocompleteAddress>{({geometry} ) => <GoogleMapsWrapper geometry={geometry}>}
-      )}
-      {loadGoogleAPIError && <p>Google API is not responding.</p>}
-      {hasLoadedGoogleAPI && (
-        <div className={`wmx8`}>
-          {manualAddressEntry || loadGoogleAPIError ? (
-            <ManualAddressEntry
-              address={address}
-              onAddressChange={handleManualAddress}
-              placeholders={placeholders}
+      <div
+        className={classNames(`wmx8 bg-grey-500 ${styles['map-container']}`, {
+          [styles['map-container--hidden']]: place === null,
+        })}
+      >
+        <div className={styles.map} id="map" />
+        {isLoading && (
+          <div className={styles['loading-spinner']}>
+            <div className="ds-spinner ds-spinner__m" />
+          </div>
+        )}
+      </div>
+      <div className={`wmx8`}>
+        {manualAddressEntry === false ? (
+          <div style={{ position: 'relative' }}>
+            <Input
+              className="w100"
+              id="autocomplete"
+              key="autocomplete-search"
+              data-cy="autocomplete"
+              type="text"
+              placeholder={
+                placeholders?.manualAddressEntry || 'Search for address'
+              }
+              ref={autocompleteElement}
             />
-          ) : (
-            <DynamicAddressEntry
-              address={address}
-              onAddressChange={handleDynamicAddress}
-              isGeometryEnabled={isGeometryEnabled}
-              onGeometryChange={setGeometry}
-              manualAddressEntryText={placeholders?.manualAddressEntry}
+            {hasLoadedGoogleAPI === false && (
+              <div className={styles['loading-spinner']}>
+                <div className="ds-spinner ds-spinner__m" />
+              </div>
+            )}
+          </div>
+        ) : (
+          <>
+            <div className={`d-flex c-gap16 ${styles['input-line']}`}>
+              <Input
+                className="w100"
+                data-cy="autocomplete"
+                key="autocomplete-street"
+                type="text"
+                placeholder={placeholders?.street || 'Street'}
+                value={address?.street || ''}
+                onChange={(e) => {
+                  const newAddress = {
+                    ...address,
+                    street: e.target.value,
+                    country: GERMANY_ALPHA_CODE,
+                  };
+                  setAddress(newAddress);
+                  debouncedSetPlace(newAddress);
+                }}
+              />
+              <Input
+                className={`wmx2 ${styles['house-number-input']}`}
+                data-cy="autocomplete-house-number"
+                key="autocomplete-house-number"
+                placeholder={placeholders?.houseNumber || 'House Number'}
+                value={address?.houseNumber || ''}
+                onChange={(e) => {
+                  const newAddress = {
+                    ...address,
+                    houseNumber: e.target.value,
+                    country: GERMANY_ALPHA_CODE,
+                  };
+                  setAddress(newAddress);
+                  debouncedSetPlace(newAddress);
+                }}
+              />
+            </div>
+            <Input
+              className="mt16"
+              data-cy="autocomplete-additional-info"
+              key="autocomplete-additional-info"
+              placeholder={
+                placeholders?.additionalInformation ||
+                'Additional information (C/O, apartment, …)'
+              }
+              value={address?.additionalInformation || ''}
+              onChange={(e) => {
+                const newAddress = {
+                  ...address,
+                  additionalInformation: e.target.value,
+                  country: GERMANY_ALPHA_CODE,
+                };
+                setAddress(newAddress);
+              }}
             />
-          )}
-        </div>
-      )}
-      {manualAddressEntry ? (
-        <div className="p-p mt8">
-          {manualAddressEntryTexts?.preText || 'Or '}
-          <button
-            className="p-a bg-transparent fw-bold c-pointer"
-            onClick={handleModeSwitch}
-            data-value={'false'}
-            type="button"
-          >
-            {manualAddressEntryTexts?.cta || 'Enter address dynamically'}
-          </button>
-        </div>
-      ) : (
+            <div className={`d-flex mt16 c-gap16 ${styles['input-line']}`}>
+              <Input
+                className="w100"
+                data-cy="autocomplete-postcode"
+                key="autocomplete-postcode"
+                placeholder={placeholders?.postcode || 'Postcode'}
+                value={address?.postcode || ''}
+                onChange={(e) => {
+                  const newAddress = {
+                    ...address,
+                    postcode: e.target.value,
+                    country: GERMANY_ALPHA_CODE,
+                  };
+                  setAddress(newAddress);
+                  debouncedSetPlace(newAddress);
+                }}
+              />
+              <Input
+                className="w100"
+                data-cy="autocomplete-city"
+                key="autocomplete-city"
+                placeholder={placeholders?.city || 'City'}
+                value={address?.city || ''}
+                onChange={(e) => {
+                  const newAddress = {
+                    ...address,
+                    city: e.target.value,
+                    country: GERMANY_ALPHA_CODE,
+                  };
+                  setAddress(newAddress);
+                  debouncedSetPlace(newAddress);
+                }}
+              />
+            </div>
+          </>
+        )}
+      </div>
+      {manualAddressEntry === false && (
         <div className="p-p mt8">
           {manualAddressEntryTexts?.preText || 'Or '}
-          <button
-            className="p-a bg-transparent fw-bold c-pointer"
-            onClick={handleModeSwitch}
-            data-value={'true'}
-            type="button"
+          <span
+            className="p-a fw-bold c-pointer"
+            onClick={handleEnterAddressManually}
           >
             {manualAddressEntryTexts?.cta || 'Enter address manually'}
-          </button>
+          </span>
         </div>
       )}
     </>

package/src/lib/components/autocompleteAddress/util/index.ts

@@ -53,7 +53,7 @@ export const geocoderAddressComponentToPartialAddress = (
   return toReturn;
 };
 
-export const inlineAddress = (address: Partial<Address>) =>
+export const inlineAddress = (address: Address) =>
   `${address.street} ${address.houseNumber}, ${
     address.city
   }, ${countryNameFromAlphaCode(address.country as Alpha2CountryCode)}`;

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.module.scss

@@ -0,0 +1,44 @@
+@import '../../../../scss/public/colors';
+
+.container {
+  width: var(--growContent, min-content);
+  margin: 0 auto;
+}
+
+.container + .container {
+  margin-top: 8px;
+}
+
+.chevron {
+  transition: filter 0.3s ease-in-out, transform 0.2s ease-in-out;
+}
+
+.chevronClosed {
+  transform: rotate(180deg);
+}
+
+.iconAndTextContainer {
+  column-gap: 12px;
+}
+
+.headerButton {
+  border: none;
+  background: $ds-grey-100;
+  column-gap: 16px;
+  cursor: pointer;
+  font-family: inherit;
+  outline: none;
+  position: relative;
+  text-align: inherit;
+  transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out;
+
+  &:hover {
+    background: $ds-primary-100;
+  }
+}
+
+.headerButton:hover {
+  .chevron {
+    filter: brightness(0.425);
+  }
+}

package/src/lib/components/comparisonTable/components/AccordionItem/AccordionItem.tsx

@@ -0,0 +1,74 @@
+import AnimateHeight from 'react-animate-height';
+
+import styles from './AccordionItem.module.scss';
+
+const ChevronSVG = ({ className }: { className?: string }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+  >
+    <path
+      d="M18 15L12 9L6 15"
+      stroke="#b4b4ba"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const AccordionItem = ({
+  children,
+  className = '',
+  headerClassName = '',
+  isOpen,
+  onOpen,
+  onClose,
+  label,
+}: {
+  children: React.ReactNode | string;
+  className?: string;
+  headerClassName?: string;
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+  label: React.ReactNode;
+}) => {
+  const handleClick = () => {
+    if (!isOpen) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  };
+
+  return (
+    <div className={`d-flex fd-column ${className} ${styles.container}`}>
+      <button
+        className={`d-flex ai-center jc-between ${styles.headerButton} ${headerClassName}`}
+        onClick={handleClick}
+        type="button"
+      >
+        <div className={`d-flex ai-center ${styles.iconAndTextContainer}`}>
+          {typeof label === 'string' ? (
+            <h4 className="p-h4">{label}</h4>
+          ) : (
+            <>{label}</>
+          )}
+        </div>
+        <ChevronSVG
+          className={`${styles.chevron} ${!isOpen && styles.chevronClosed}`}
+        />
+      </button>
+      {/* Min height is 0.1 so that the scroll position is correctly synced across accordion items but is not actually shown.
+      If set to 0, react-animate-height will set display to "none" which means scrolling is not synced. */}
+      <AnimateHeight duration={300} height={isOpen ? 'auto' : 0.1}>
+        {children}
+      </AnimateHeight>
+    </div>
+  );
+};

package/src/lib/components/comparisonTable/components/AccordionItem/index.tsx

@@ -0,0 +1 @@
+export { AccordionItem } from './AccordionItem';

package/src/lib/components/comparisonTable/components/Row/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
-import { Cell } from '../../index';
-
+import type { Cell } from '../../index';
 import styles from './style.module.scss';
 
 interface RowProps<T> {
@@ -25,7 +24,6 @@ const Row = <T extends { id: number }>(props: RowProps<T>) => {
     >
       <h4
         className={`
-          wmx4
           ${styles.cell}
           ${styles.sticky}
           ${isRowHeader ? `p-h2 p--serif ${styles.title}` : ''}

package/src/lib/components/comparisonTable/components/Row/style.module.scss

@@ -1,13 +1,14 @@
 @use "../../../../scss/public/colors" as *;
 @use "../../../../scss/public/grid" as *;
 
-$cell-min-width: 256px;
+$cell-min-width: var(--cellWidth, 256px);
 
 .header {
   position: relative;
 
   & > div {
-    width: 100vw;
+    width: var(--tableWidth);
+    max-width: var(--tableWidth);
 
     &:nth-child(n + 3) {
       margin: 0;
@@ -34,6 +35,7 @@ $cell-min-width: 256px;
   color: $ds-grey-700;
 
   width: 50vw;
+  max-width: calc(var(--tableWidth) / 2);
 
   &:first-child {
     background-color: white;
@@ -60,6 +62,13 @@ $cell-min-width: 256px;
   }
 }
 
+h4.cell {
+  // Set the max width of the first column to the supplied firstColumnWidth (or 288px if not specified) but only
+  // if this value does not exceed half of the table's width.
+  // This is to ensure that the first column is at most as wide as half the table, which will be the case on mobile where only the first column and one other are shown.
+  max-width: min(var(--firstColumnWidth, 288px), calc(var(--tableWidth) / 2));
+}
+
 .title {
   position: relative;
   color: $ds-grey-900;

package/src/lib/components/comparisonTable/components/TableArrows/index.tsx

@@ -2,15 +2,13 @@ import React from 'react';
 import classNames from 'classnames';
 
 import ArrowIcon from './Arrow';
-import { ActiveTableArrows } from '../../hooks/useActiveTableArrows';
-
 import styles from './style.module.scss';
 
 export type ArrowValues = 'prev' | 'next';
 
 interface TableArrowsProps {
   onClick: (value: ArrowValues) => void;
-  active: ActiveTableArrows;
+  active: { left: boolean; right: boolean };
 }
 
 const TableArrows = (props: TableArrowsProps) => {
@@ -18,7 +16,7 @@ const TableArrows = (props: TableArrowsProps) => {
   const handleButtonClick = (value: ArrowValues) => () => onClick(value);
 
   return (
-    <div className={`mt24 ${styles.container}`}>
+    <div className={styles.container}>
       <button
         onClick={handleButtonClick('prev')}
         className={classNames(