@popsure/dirty-swan 0.26.10 → 0.26.11

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

@@ -0,0 +1,316 @@
+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 } 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,
+}: {
+  apiKey: string;
+  address?: Partial<Address>;
+  onAddressChange: (address: Partial<Address>) => void;
+}) => {
+  const [manualAddressEntry, setManualAddressEntry] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  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 },
+    });
+
+    autocomplete.current.addListener('place_changed', onPlaceChanged);
+
+    map.current = new google.maps.Map(
+      document.getElementById('map')!,
+      MAP_CONFIG_OBJ
+    );
+
+    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);
+    }
+  };
+
+  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) : ''}`;
+      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 debouncedSetPlace = debounce(setPlaceFromAddress, 1000)
+
+  const handleEnterAddressManually = () => {
+    setManualAddressEntry(true);
+  };
+
+  return (
+    <>
+      <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"
+              data-cy="autocomplete"
+              type="text"
+              placeholder="Search for address"
+              ref={autocompleteElement}
+            />
+            {hasLoadedGoogleAPI === false && (
+              <div className={styles['loading-spinner']}>
+                <div className="ds-spinner ds-spinner__m" />
+              </div>
+            )}
+          </div>
+        ) : (
+          <>
+            <div className={`d-flex ${styles['input-line']}`}>
+              <Input
+                className="w100"
+                data-cy="autocomplete"
+                type="text"
+                placeholder="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"
+                placeholder="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"
+              placeholder="Additional information (C/O, appartment…)"
+              value={address?.additionalInformation || ''}
+              onChange={(e) => {
+                const newAddress = {
+                  ...address,
+                  additionalInformation: e.target.value,
+                  country: GERMANY_ALPHA_CODE,
+                };
+                setAddress(newAddress);
+              }}
+            />
+            <div className={`d-flex mt16 ${styles['input-line']}`}>
+              <Input
+                className="w100"
+                data-cy="autocomplete-postcode"
+                placeholder="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"
+                placeholder="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">
+          Or{' '}
+          <span
+            className="p-a fw-bold c-pointer"
+            onClick={handleEnterAddressManually}
+          >
+            Enter address manually
+          </span>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default AutoCompleteAddress;

package/src/lib/components/autocompleteAddress/mapStyle.ts

@@ -0,0 +1,187 @@
+export const style = new google.maps.StyledMapType(
+  [
+    {
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#f5f5f5',
+        },
+      ],
+    },
+    {
+      elementType: 'labels',
+      stylers: [
+        {
+          visibility: 'off',
+        },
+      ],
+    },
+    {
+      elementType: 'labels.icon',
+      stylers: [
+        {
+          visibility: 'off',
+        },
+      ],
+    },
+    {
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#616161',
+        },
+      ],
+    },
+    {
+      elementType: 'labels.text.stroke',
+      stylers: [
+        {
+          color: '#f5f5f5',
+        },
+      ],
+    },
+    {
+      featureType: 'administrative.land_parcel',
+      stylers: [
+        {
+          visibility: 'off',
+        },
+      ],
+    },
+    {
+      featureType: 'administrative.land_parcel',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#bdbdbd',
+        },
+      ],
+    },
+    {
+      featureType: 'administrative.neighborhood',
+      stylers: [
+        {
+          visibility: 'off',
+        },
+      ],
+    },
+    {
+      featureType: 'poi',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#eeeeee',
+        },
+      ],
+    },
+    {
+      featureType: 'poi',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#757575',
+        },
+      ],
+    },
+    {
+      featureType: 'poi.park',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#e5e5e5',
+        },
+      ],
+    },
+    {
+      featureType: 'poi.park',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#9e9e9e',
+        },
+      ],
+    },
+    {
+      featureType: 'road',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#ffffff',
+        },
+      ],
+    },
+    {
+      featureType: 'road.arterial',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#757575',
+        },
+      ],
+    },
+    {
+      featureType: 'road.highway',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#dadada',
+        },
+      ],
+    },
+    {
+      featureType: 'road.highway',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#616161',
+        },
+      ],
+    },
+    {
+      featureType: 'road.local',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#9e9e9e',
+        },
+      ],
+    },
+    {
+      featureType: 'transit.line',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#e5e5e5',
+        },
+      ],
+    },
+    {
+      featureType: 'transit.station',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#eeeeee',
+        },
+      ],
+    },
+    {
+      featureType: 'water',
+      elementType: 'geometry',
+      stylers: [
+        {
+          color: '#c9c9c9',
+        },
+      ],
+    },
+    {
+      featureType: 'water',
+      elementType: 'labels.text.fill',
+      stylers: [
+        {
+          color: '#9e9e9e',
+        },
+      ],
+    },
+  ],
+  { name: 'Styled Map' }
+);

package/src/lib/components/autocompleteAddress/style.module.scss

@@ -0,0 +1,82 @@
+@use "../../scss/public/grid" as *;
+@use "../../scss/public/colors" as *;
+
+.input-line {
+  margin-left: -16px;
+
+  > * {
+    margin-left: 16px;
+  }
+
+  @include p-size-mobile {
+    flex-direction: column;
+
+    > *:not(:first-child) {
+      margin-top: 16px;
+    }
+  }
+}
+
+.house-number-input {
+  @include p-size-mobile {
+    max-width: none;
+  }
+}
+
+.map-container {
+  position: relative;
+
+  height: 112px;
+  margin-bottom: 16px;
+
+  border-radius: 8px;
+
+  transition: 0.3s height ease-in-out, 0.3s margin-top ease-in-out;
+
+  overflow: hidden;
+
+  &--hidden {
+    height: 0;
+    margin: 0;
+  }
+}
+
+@keyframes appear-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.appear-in-animate {
+  animation-name: appear-in;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+
+.loading-spinner {
+  display: flex;
+
+  justify-content: center;
+  align-items: center;
+
+  position: absolute !important;
+  background-color: rgba($ds-primary-500, 0.25);
+
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 100;
+
+  animation-name: appear-in;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+}
+
+.map {
+  width: 100%;
+  height: 100%;
+}

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

@@ -0,0 +1,51 @@
+import { geocoderAddressComponentToPartialAddress } from '.';
+
+describe('geocoderAddressComponentToPartialAddress text', () => {
+  it('Should extract street, houseNumber, postcode, city, country from GeocoderAddressComponent[]', () => {
+    const input = [
+      { long_name: '103A', short_name: '103A', types: ['street_number'] },
+      {
+        long_name: 'Kottbusser Damm',
+        short_name: 'Kottbusser Damm',
+        types: ['route'],
+      },
+      {
+        long_name: 'Bezirk Neukölln',
+        short_name: 'Bezirk Neukölln',
+        types: ['sublocality_level_1', 'sublocality', 'political'],
+      },
+      {
+        long_name: 'Berlin',
+        short_name: 'Berlin',
+        types: ['locality', 'political'],
+      },
+      {
+        long_name: 'Berlin',
+        short_name: 'Berlin',
+        types: ['administrative_area_level_1', 'political'],
+      },
+      {
+        long_name: 'Germany',
+        short_name: 'DE',
+        types: ['country', 'political'],
+      },
+      {
+        long_name: '10967',
+        short_name: '10967',
+        types: ['postal_code'],
+      },
+    ];
+
+    const expectedOutput = {
+      street: 'Kottbusser Damm',
+      houseNumber: '103A',
+      postcode: '10967',
+      city: 'Berlin',
+      country: 'DE',
+    };
+
+    expect(geocoderAddressComponentToPartialAddress(input)).toEqual(
+      expectedOutput
+    );
+  });
+});

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

@@ -0,0 +1,55 @@
+import { Address, countryNameFromAlphaCode } from '@popsure/public-models';
+
+export const geocoderAddressComponentToPartialAddress = (
+  input: google.maps.GeocoderAddressComponent[]
+): Partial<Address> => {
+  interface MappedType {
+    key: keyof Address;
+    value: 'long_name' | 'short_name';
+  }
+
+  const mapping: {
+    route: MappedType;
+    street_number: MappedType;
+    postal_code: MappedType;
+    locality: MappedType;
+    country: MappedType;
+  } = {
+    route: {
+      key: 'street',
+      value: 'long_name',
+    },
+    street_number: {
+      key: 'houseNumber',
+      value: 'long_name',
+    },
+    postal_code: {
+      key: 'postcode',
+      value: 'long_name',
+    },
+    locality: {
+      key: 'city',
+      value: 'long_name',
+    },
+    country: {
+      key: 'country',
+      value: 'short_name',
+    },
+  };
+
+  const toReturn: Partial<Address> = {};
+  input.forEach((value) => {
+    const type = value.types[0] as keyof typeof mapping;
+    const mappedValue = mapping[type];
+    if (mappedValue) {
+      toReturn[mappedValue.key] = value[mappedValue.value];
+    }
+  });
+
+  return toReturn;
+};
+
+export const inlineAddress = (address: Address) =>
+  `${address.street} ${address.houseNumber}, ${
+    address.city
+  }, ${countryNameFromAlphaCode(address.country)}`;

package/src/lib/components/button/icons/index.ts

@@ -0,0 +1,14 @@
+import purpleSendImage from './send-purple.svg';
+import whiteSendImage from './send-white.svg';
+
+const purpleSend = {
+  src: purpleSendImage,
+  alt: 'Paper plane',
+};
+
+const whiteSend = {
+  src: whiteSendImage,
+  alt: 'Paper plane',
+};
+
+export { purpleSend, whiteSend };

package/src/lib/components/button/icons/send-purple.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3334 1.66667L9.16675 10.8333" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M18.3334 1.66667L12.5001 18.3333L9.16675 10.8333L1.66675 7.5L18.3334 1.66667Z" stroke="#8E8CEE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>