@cashub/ui 0.22.8 → 0.22.9

package/src/link/__test__/LinkSpan.test.js

@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import LinkSpan from '../LinkSpan';
+import 'jest-styled-components';
+
+describe('Test LinkSpan Component', () => {
+  test('render default component', () => {
+    render(<LinkSpan>Link Text</LinkSpan>);
+
+    const linkSpan = screen.getByText('Link Text');
+    expect(linkSpan).toBeInTheDocument();
+    expect(linkSpan).toHaveStyle({
+      fontSize: '9rem',
+      color: 'rgba(255, 255, 255, 0.5)',
+    });
+  });
+
+  test('hover', () => {
+    render(<LinkSpan>Link Text</LinkSpan>);
+
+    const linkSpan = screen.getByText('Link Text');
+    expect(linkSpan).toHaveStyleRule('border-bottom', '1px solid #3e5fff', {
+      modifier: '&:hover:after',
+    });
+  });
+
+  test('click', () => {
+    const mockfn = jest.fn();
+    render(<LinkSpan onClick={mockfn}>Link Text</LinkSpan>);
+
+    const linkSpan = screen.getByText('Link Text');
+    fireEvent.click(linkSpan);
+    expect(mockfn).toHaveBeenCalledTimes(1);
+  });
+
+  test('variant', () => {
+    render(
+      <LinkSpan fontSmall light>
+        Link Text
+      </LinkSpan>,
+    );
+
+    const linkSpan = screen.getByText('Link Text');
+    expect(linkSpan).toBeInTheDocument();
+    expect(linkSpan).toHaveStyle({
+      fontSize: '1rem',
+      color: '#fff',
+    });
+    expect(linkSpan).toHaveStyleRule('border-bottom', '1px solid #e6e6e6', {
+      modifier: '&:hover:after',
+    });
+  });
+});

package/src/link/index.js

@@ -0,0 +1 @@
+export { default as LinkSpan } from './LinkSpan';

package/src/map/GoogleMap.js

@@ -0,0 +1,383 @@
+import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
+import { renderToString } from 'react-dom/server';
+import {
+  MarkerClusterer,
+  SuperClusterAlgorithm,
+} from '@googlemaps/markerclusterer';
+import GoogleMapWrapper from './subComponent/GoogleMapWrapper';
+import GoogleMapContainer from './subComponent/GoogleMapContainer';
+import GoogleMapPopup from './subComponent/GoogleMapPopup';
+import GoogleMarkerSpiderfier from './subComponent/GoogleMarkerSpiderfier';
+import PrimaryMapIcon from '../assets/icons/map_icon1.png';
+import MapIcon from '../assets/icons/map_icon4.png';
+
+const GoogleMap = ({
+  apiKey,
+  height = 512,
+  zoom = 10,
+  data = { defaultPosition: null, position: null, locations: [] },
+  geoFence = false,
+  geoFenceOptions = {},
+  onError,
+  customPopup,
+  checkPrimaryLocation,
+}) => {
+  const [hasError, setHasError] = useState(true);
+  const [validLocations, setValidLocations] = useState([]);
+  const [validBounds, setValidBounds] = useState([]);
+
+  const handleError = useCallback(
+    (errorCode) => {
+      if (onError) {
+        onError(errorCode);
+      }
+    },
+    [onError],
+  );
+
+  useEffect(() => {
+    const { defaultPosition, position, locations } = data;
+    const validLocations = [];
+    const bounds = [];
+
+    if (!position && !defaultPosition) {
+      handleError('NO_COORDINATES');
+      setHasError(true);
+      return;
+    }
+
+    locations.forEach((location) => {
+      let { latitude, longitude } = location;
+      if (
+        (!latitude && latitude !== 0) ||
+        (!longitude && longitude !== 0) ||
+        (latitude === 0 && longitude === 0) ||
+        (latitude === '0' && longitude === '0')
+      ) {
+        return;
+      }
+
+      // make sure coordinate in number type
+      latitude = Number(latitude);
+      longitude = Number(longitude);
+      if (Number.isNaN(latitude) || Number.isNaN(longitude)) {
+        return;
+      }
+
+      // prevent duplicate LatLngBounds
+      if (
+        !bounds.some((LatLng) => {
+          return latitude === LatLng.lat && longitude === LatLng.lng;
+        })
+      ) {
+        bounds.push({ lat: latitude, lng: longitude });
+      }
+
+      validLocations.push({
+        ...location,
+        latitude,
+        longitude,
+      });
+    });
+
+    // pass all checking
+    setHasError(false);
+    setValidLocations(validLocations);
+    setValidBounds(bounds);
+  }, [data, handleError]);
+
+  if (!hasError) {
+    return (
+      <GoogleMapWrapper
+        apiKey={apiKey}
+        height={height}
+        zoom={zoom}
+        defaultPosition={data.defaultPosition}
+        position={data.position}
+        locations={validLocations}
+        bounds={validBounds}
+        geoFence={geoFence}
+        geoFenceOptions={geoFenceOptions}
+        onError={handleError}
+        customPopup={customPopup}
+        checkPrimaryLocation={checkPrimaryLocation}
+      >
+        <Map />
+      </GoogleMapWrapper>
+    );
+  }
+
+  return <div></div>;
+};
+
+const Map = ({
+  height,
+  zoom,
+  defaultPosition,
+  position,
+  locations,
+  bounds,
+  geoFence,
+  geoFenceOptions,
+  customPopup,
+  checkPrimaryLocation,
+}) => {
+  const ref = useRef(null);
+  const [map, setMap] = useState();
+
+  const options = useMemo(() => {
+    return {
+      zoom,
+      center: { lat: 1, lng: 1 },
+      scrollwheel: false,
+      zoomControl: true,
+      zoomControlOptions: {
+        position: window.google.maps.ControlPosition.LEFT_TOP,
+      },
+      mapTypeControl: false,
+      scaleControl: false,
+      streetViewControl: false,
+      rotateControl: false,
+      fullscreenControl: false,
+      minZoom: 3,
+      maxZoom: 20,
+      restriction: {
+        latLngBounds: {
+          east: 179.9999,
+          north: 85,
+          south: -85,
+          west: -179.9999,
+        },
+        strictBounds: true,
+      },
+    };
+  }, [zoom]);
+
+  // setup map
+  useEffect(() => {
+    if (map) {
+      map.setOptions(options);
+
+      window.google.maps.event.addListenerOnce(map, 'idle', () => {
+        if (bounds.length === 1) {
+          // there is only one location, locate it
+          map.setCenter(bounds[0]);
+        } else if (locations.length > 0) {
+          // locate to the center of all coordinates on first load
+          const latLngBounds = new window.google.maps.LatLngBounds();
+          bounds.forEach((bound) => {
+            latLngBounds.extend(bound);
+          });
+          map.fitBounds(latLngBounds);
+
+          const found = locations.find((location) => {
+            return latLngBounds.contains({
+              lat: location.latitude,
+              lng: location.longitude,
+            });
+          });
+
+          // if center no contain any marker then locate to first location
+          if (!found) {
+            map.setCenter(bounds[0]);
+          }
+        } else {
+          map.setCenter({
+            lat: (position && position.latitude) || defaultPosition.latitude,
+            lng: (position && position.longitude) || defaultPosition.longitude,
+          });
+        }
+      });
+
+      return () => {
+        window.google.maps.event.clearListeners(map, 'click');
+      };
+    }
+  }, [map, options, locations, bounds, defaultPosition, position]);
+
+  // render marker cluster
+  useEffect(() => {
+    if (map && locations.length > 0) {
+      const markers = [];
+
+      // set up popup
+      const popup = new GoogleMapPopup({ maxWidth: 400, offset: 36 });
+      map.addListener('click', () => {
+        popup.setMap(null);
+      });
+
+      const oms = new GoogleMarkerSpiderfier(map, {
+        markersWontMove: true,
+        markersWontHide: true,
+        basicFormatEvents: true,
+      });
+
+      locations.forEach((location) => {
+        const { latitude, longitude } = location;
+
+        let icon;
+        if (checkPrimaryLocation && checkPrimaryLocation(location)) {
+          icon = {
+            url: PrimaryMapIcon,
+            scaledSize: new window.google.maps.Size(40, 50),
+          };
+        } else {
+          icon = {
+            url: MapIcon,
+            scaledSize: new window.google.maps.Size(40, 50),
+          };
+        }
+
+        const marker = new window.google.maps.Marker({
+          icon,
+          map,
+          position: { lat: latitude, lng: longitude },
+        });
+
+        if (customPopup) {
+          marker.addListener('click', (event) => {
+            event.stop();
+            const coordinate = { lat: latitude, lng: longitude };
+            popup.setMap(map);
+            popup.setPosition(coordinate);
+            popup.setContent(renderToString(customPopup(location)));
+            popup.draw();
+          });
+        }
+
+        markers.push(marker);
+        oms.addMarker(marker);
+      });
+
+      const markerClusterer = new MarkerClusterer({
+        map,
+        markers,
+        algorithm: new SuperClusterAlgorithm({ radius: 120 }),
+        onClusterClick: (event, cluster, map) => {
+          // fix: cluster marker spiderfier
+          // const targetPosition = cluster.markers[0].getPosition().toJSON();
+          // const isAllSamePosition = cluster.markers.every((marker) => {
+          //   const position = marker.getPosition().toJSON();
+          //   return (
+          //     targetPosition.lat === position.lat &&
+          //     targetPosition.lng === position.lng
+          //   );
+          // });
+          // if (isAllSamePosition) {
+          //   return;
+          // }
+
+          // fix: need to call twice to actually work
+          map.fitBounds(cluster.bounds);
+          map.fitBounds(cluster.bounds);
+
+          // check current view has marker, if not set view to first marker
+          const currentBounds = map.getBounds();
+          const found = cluster.markers.find((marker) => {
+            return currentBounds.contains(marker.getPosition());
+          });
+          if (!found) {
+            map.setCenter(cluster.markers[0].getPosition());
+          }
+        },
+      });
+
+      return () => {
+        popup.setMap(null);
+        markerClusterer.setMap(null);
+        markers.forEach((marker) => {
+          marker.setMap(null);
+        });
+      };
+    }
+  }, [map, locations, checkPrimaryLocation, customPopup]);
+
+  // geofencing
+  useEffect(() => {
+    if (map && geoFence) {
+      const circle = new window.google.maps.Circle({
+        strokeColor: '#597EF7',
+        strokeOpacity: 0,
+        strokeWeight: 0,
+        fillColor: '#597EF7',
+        fillOpacity: 0.5,
+        center: {
+          lat: geoFenceOptions.latitude,
+          lng: geoFenceOptions.longitude,
+        },
+        radius: geoFenceOptions.radius,
+        editable: geoFenceOptions.editable,
+        draggable: geoFenceOptions.editable,
+      });
+      circle.setMap(map);
+
+      // add event listener
+      if (geoFenceOptions.eventHandlers) {
+        const { click, edit, drag } = geoFenceOptions.eventHandlers;
+        if (click) {
+          window.google.maps.event.addListener(circle, 'click', click);
+        }
+        if (edit) {
+          circle.addListener('radius_changed', () => {
+            const radius = circle.getRadius();
+            if (
+              geoFenceOptions.minRadius &&
+              radius < geoFenceOptions.minRadius
+            ) {
+              circle.setRadius(geoFenceOptions.minRadius);
+              return;
+            }
+
+            edit(circle.getRadius());
+          });
+        }
+        if (drag) {
+          circle.addListener('center_changed', () => {
+            drag(circle.getCenter().toJSON());
+          });
+        }
+      }
+
+      return () => {
+        circle.setMap(null);
+        window.google.maps.event.clearListeners(circle, 'click');
+        window.google.maps.event.clearListeners(circle, 'radius_changed');
+        window.google.maps.event.clearListeners(circle, 'center_changed');
+      };
+    }
+  }, [
+    map,
+    geoFence,
+    geoFenceOptions.latitude,
+    geoFenceOptions.longitude,
+    geoFenceOptions.radius,
+    geoFenceOptions.minRadius,
+    geoFenceOptions.editable,
+    geoFenceOptions.eventHandlers,
+  ]);
+
+  useEffect(() => {
+    if (ref.current && !map) {
+      setMap(new window.google.maps.Map(ref.current, {}));
+    }
+  }, [map, options]);
+
+  return (
+    <GoogleMapContainer
+      ref={ref}
+      height={height}
+      tabIndex='0'
+      onClick={(event) => {
+        event.target.focus();
+      }}
+      onFocus={() => {
+        map.setOptions({ scrollwheel: true });
+      }}
+      onBlur={() => {
+        map.setOptions({ scrollwheel: false });
+      }}
+    />
+  );
+};
+
+export default GoogleMap;

package/src/map/GoogleReverseGeolocation.js

@@ -0,0 +1,197 @@
+import { useState, useMemo, useRef, useEffect } from 'react';
+import styled from 'styled-components';
+import GoogleMapWrapper from './subComponent/GoogleMapWrapper';
+import GoogleMapContainer from './subComponent/GoogleMapContainer';
+import Searchbox from '../form/Searchbox';
+import MapIcon from '../assets/icons/map_icon4.png';
+
+const GoogleReverseGeolocation = ({
+  apiKey,
+  children,
+  defaultLatlng,
+  changeLatlng,
+  onChoose,
+  onSearch,
+  onError,
+}) => {
+  const [markerLatLng, setMarkerLatLng] = useState(defaultLatlng);
+
+  const handleChangeLatlng = (latlng) => {
+    setMarkerLatLng(latlng);
+    changeLatlng(latlng);
+  };
+
+  const confirmChooseLocation = async (callback) => {
+    if (markerLatLng.lat && markerLatLng.lng) {
+      try {
+        const address = await onChoose(markerLatLng);
+        if (address) {
+          callback({ address });
+        } else {
+          callback({ error: 'ReverseGeo' });
+        }
+      } catch (error) {
+        callback(error);
+      }
+    } else {
+      callback({ error: 'PleaseChooseLocation' });
+    }
+  };
+
+  return (
+    <>
+      {children(
+        <GoogleMapWrapper
+          apiKey={apiKey}
+          height={512}
+          zoom={3}
+          markerLatLng={markerLatLng}
+          handleChangeLatlng={handleChangeLatlng}
+          onSearch={onSearch}
+          onError={onError}
+        >
+          <Map />
+        </GoogleMapWrapper>,
+        confirmChooseLocation,
+      )}
+    </>
+  );
+};
+
+const Map = ({
+  height,
+  zoom,
+  markerLatLng,
+  handleChangeLatlng,
+  onSearch,
+  onError,
+}) => {
+  const ref = useRef(null);
+  const [map, setMap] = useState();
+
+  const options = useMemo(() => {
+    return {
+      zoom,
+      center: {
+        lat: 1,
+        lng: 1,
+      },
+      scrollwheel: true,
+      zoomControl: true,
+      zoomControlOptions: {
+        position: window.google.maps.ControlPosition.LEFT_TOP,
+      },
+      mapTypeControl: false,
+      scaleControl: false,
+      streetViewControl: false,
+      rotateControl: false,
+      fullscreenControl: false,
+      minZoom: 3,
+      restriction: {
+        latLngBounds: {
+          east: 179.9999,
+          north: 85,
+          south: -85,
+          west: -179.9999,
+        },
+        strictBounds: true,
+      },
+    };
+  }, [zoom]);
+
+  const handleError = (errorCode) => {
+    if (onError) {
+      onError(errorCode);
+    }
+  };
+
+  const handleSearch = async (address) => {
+    try {
+      const latlng = await onSearch(address);
+      if (latlng) {
+        map.setZoom(15);
+        map.panTo(latlng);
+        handleChangeLatlng(latlng);
+      } else {
+        handleError('NO_RESULT');
+      }
+    } catch (error) {
+      handleError(error.message);
+    }
+  };
+
+  // setup map
+  useEffect(() => {
+    if (map) {
+      map.setOptions(options);
+    }
+  }, [map, options]);
+
+  // click to choose location
+  useEffect(() => {
+    if (map) {
+      map.addListener('click', (event) => {
+        handleChangeLatlng(event.latLng.toJSON());
+      });
+
+      return () => {
+        window.google.maps.event.clearListeners(map, 'click');
+      };
+    }
+  }, [map, handleChangeLatlng]);
+
+  // render marker cluster
+  useEffect(() => {
+    if (map && markerLatLng.lat && markerLatLng.lng) {
+      const marker = new window.google.maps.Marker({
+        icon: {
+          url: MapIcon,
+          scaledSize: new window.google.maps.Size(40, 50),
+        },
+        position: markerLatLng,
+      });
+      marker.setMap(map);
+
+      return () => {
+        marker.setMap(null);
+      };
+    }
+  }, [map, markerLatLng]);
+
+  useEffect(() => {
+    if (ref.current && !map) {
+      setMap(new window.google.maps.Map(ref.current, {}));
+    }
+  }, [map, options]);
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <MapSearchBoxControl>
+        <Searchbox onSearch={handleSearch} autoFocus />
+      </MapSearchBoxControl>
+      <GoogleMapContainer
+        ref={ref}
+        height={height}
+        tabIndex='0'
+        onClick={(event) => {
+          event.target.focus();
+        }}
+        onFocus={() => {
+          map.setOptions({ scrollwheel: true });
+        }}
+        onBlur={() => {
+          map.setOptions({ scrollwheel: false });
+        }}
+      />
+    </div>
+  );
+};
+
+const MapSearchBoxControl = styled.div`
+  position: absolute;
+  top: var(--spacing-s);
+  right: var(--spacing-s);
+  z-index: 1;
+`;
+
+export default GoogleReverseGeolocation;