@cashub/ui 0.48.30 → 0.49.0-beta.0

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;

package/src/map/LeafletMap.js

@@ -0,0 +1,264 @@
+import { useCallback, useEffect, useState, useRef } from 'react';
+import L from 'leaflet';
+import {
+  Marker,
+  Popup,
+  useMapEvents,
+  FeatureGroup,
+  Circle,
+} from 'react-leaflet';
+import MarkerClusterGroup from 'react-leaflet-markercluster';
+import 'leaflet/dist/leaflet.css';
+import 'react-leaflet-markercluster/dist/styles.min.css';
+import BasicLeafletMap from './subComponent/BasicLeafletMap';
+import LeafletDrawControl from './subComponent/LeafletDrawControl';
+import PrimaryMapIcon from '../assets/icons/map_icon1.png';
+import MapIcon from '../assets/icons/map_icon4.png';
+
+const LeafletMap = ({
+  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 [validBound, setValidBound] = useState([]);
+  const [markers, setMarkers] = useState([]);
+  const drawControlRef = useRef();
+
+  const handleError = useCallback(
+    (errorCode) => {
+      if (onError) {
+        onError(errorCode);
+      }
+    },
+    [onError],
+  );
+
+  const handleMountedDrawControl = useCallback(
+    (control) => {
+      drawControlRef.current = control;
+      if (geoFenceOptions.editable) {
+        drawControlRef.current.enableEdit();
+      }
+    },
+    [geoFenceOptions.editable],
+  );
+
+  const handleEditResizeDraw = useCallback(
+    (event) => {
+      const { minRadius, eventHandlers } = geoFenceOptions;
+      const radius = event.layer.getRadius();
+      if (minRadius && radius < minRadius) {
+        event.layer.setRadius(minRadius);
+        return;
+      }
+
+      const tooltips = event.target._panes.popupPane.getElementsByClassName(
+        'leaflet-draw-tooltip',
+      );
+
+      for (let index = 0; index < tooltips.length; index += 1) {
+        tooltips[index].textContent = `Radius: ${parseInt(radius, 10)}`;
+      }
+
+      if (eventHandlers.edit) {
+        eventHandlers.edit(radius);
+      }
+    },
+    [geoFenceOptions],
+  );
+
+  const handleEditMoveDraw = useCallback(
+    (event) => {
+      const { eventHandlers } = geoFenceOptions;
+      if (eventHandlers.drag) {
+        eventHandlers.drag(event.layer.getLatLng());
+      }
+    },
+    [geoFenceOptions],
+  );
+
+  useEffect(() => {
+    const { defaultPosition, position, locations } = data;
+    const arrLatLngs = [];
+    const bounds = [];
+    const markers = [];
+
+    if (!position && !defaultPosition) {
+      handleError('NO_COORDINATES');
+      setHasError(true);
+      return;
+    }
+
+    locations.forEach((location, index) => {
+      const { latitude, longitude } = location;
+      if (
+        (!latitude && latitude !== 0) ||
+        (!longitude && longitude !== 0) ||
+        (latitude === 0 && longitude === 0) ||
+        (latitude === '0' && longitude === '0')
+      ) {
+        return;
+      }
+
+      // prevent duplicate LatLngBounds
+      if (
+        !bounds.some((LatLng) => {
+          return latitude === LatLng[0] && longitude === LatLng[1];
+        })
+      ) {
+        bounds.push([latitude, longitude]);
+      }
+
+      arrLatLngs.push([latitude, longitude]);
+
+      let popupContent = null;
+      if (customPopup) {
+        popupContent = (
+          <Popup maxWidth={400} closeButton={false}>
+            {customPopup(location)}
+          </Popup>
+        );
+      }
+
+      let Icon = L.icon({
+        iconUrl: MapIcon,
+        iconSize: [40, 50],
+      });
+      if (checkPrimaryLocation && checkPrimaryLocation(location)) {
+        Icon = L.icon({
+          iconUrl: PrimaryMapIcon,
+          iconSize: [40, 50],
+        });
+      }
+
+      markers.push(
+        <Marker position={[latitude, longitude]} key={index} icon={Icon}>
+          {popupContent}
+        </Marker>,
+      );
+    });
+
+    // pass all checking
+    setHasError(false);
+    setValidLocations(arrLatLngs);
+    setValidBound(bounds);
+    setMarkers(markers);
+  }, [data, handleError, customPopup, checkPrimaryLocation]);
+
+  useEffect(() => {
+    if (drawControlRef.current && geoFenceOptions.editable) {
+      drawControlRef.current.enableEdit();
+    }
+  }, [geoFenceOptions.editable]);
+
+  if (!hasError) {
+    return (
+      <BasicLeafletMap height={height} zoom={zoom}>
+        <MapInteractor
+          zoom={zoom}
+          locations={validLocations}
+          bounds={validBound}
+          markers={markers}
+          defaultPosition={data.defaultPosition}
+          position={data.position}
+        />
+
+        {markers.length > 0 && (
+          <MarkerClusterGroup
+            maxClusterRadius={120}
+            iconCreateFunction={(cluster) => {
+              return L.divIcon({
+                html: `<div><span>${cluster.getChildCount()}</span></div>`,
+                className: 'marker-cluster',
+                iconSize: L.point(40, 40),
+              });
+            }}
+          >
+            {markers}
+          </MarkerClusterGroup>
+        )}
+
+        {geoFence && (
+          <FeatureGroup>
+            <LeafletDrawControl
+              draw={false}
+              edit={{ edit: false, remove: false }}
+              onMounted={handleMountedDrawControl}
+              onEditResize={handleEditResizeDraw}
+              onEditMove={handleEditMoveDraw}
+            />
+            <Circle
+              center={[geoFenceOptions.latitude, geoFenceOptions.longitude]}
+              radius={geoFenceOptions.radius}
+              pathOptions={{
+                stroke: false,
+                fillColor: 'var(--color-primary)',
+                fillOpacity: 0.5,
+              }}
+            />
+          </FeatureGroup>
+        )}
+      </BasicLeafletMap>
+    );
+  }
+
+  return <div></div>;
+};
+
+const MapInteractor = ({
+  zoom,
+  locations,
+  bounds,
+  markers,
+  defaultPosition,
+  position,
+}) => {
+  const map = useMapEvents({
+    click: (event) => {
+      event.originalEvent.stopPropagation();
+    },
+    focus: () => {
+      map.scrollWheelZoom.enable();
+    },
+    blur: () => {
+      map.scrollWheelZoom.disable();
+    },
+  });
+
+  useEffect(() => {
+    if (bounds.length === 1) {
+      map.setView(bounds[0]);
+    } else if (locations.length > 0) {
+      map.fitBounds(bounds);
+
+      // check current view has marker, if not set view to first marker
+      const currentBounds = map.getBounds();
+      const found = locations.find((LatLng) => {
+        const tmpLat = parseFloat(LatLng[0]);
+        const tmpLng = parseFloat(LatLng[1]);
+        if (Number.isNaN(tmpLat) || Number.isNaN(tmpLng)) return false;
+        return currentBounds.contains([tmpLat, tmpLng]);
+      });
+      if (!found) {
+        map.setView(locations[0]);
+      }
+    } else {
+      map.setView([
+        (position && position.latitude) || defaultPosition.latitude,
+        (position && position.longitude) || defaultPosition.longitude,
+      ]);
+    }
+    map.setZoom(zoom);
+  }, [map, zoom, locations, bounds, markers, defaultPosition, position]);
+
+  return null;
+};
+
+export default LeafletMap;

package/src/map/LeafletReverseGeolocation.js

@@ -0,0 +1,89 @@
+import { useState, useMemo, useEffect } from 'react';
+import L from 'leaflet';
+import { Marker, useMapEvents } from 'react-leaflet';
+import BasicLeafletMap from './subComponent/BasicLeafletMap';
+import MapSearchBoxControl from './subComponent/MapSearchBoxControl';
+import MapIcon from '../assets/icons/map_icon4.png';
+
+const LeafletReverseGeolocation = ({
+  children,
+  defaultLatlng,
+  changeLatlng,
+  onChoose,
+  onSearch,
+  onError,
+}) => {
+  const [markerLatLng, setMarkerLatLng] = useState(defaultLatlng);
+
+  const Icon = useMemo(() => {
+    return L.icon({
+      iconUrl: MapIcon,
+      iconSize: [40, 50],
+    });
+  }, []);
+
+  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' });
+    }
+  };
+
+  const Map = (
+    <BasicLeafletMap height={500} zoom={10} scrollWheelZoom={true}>
+      {markerLatLng.lat && markerLatLng.lng && (
+        <Marker position={[markerLatLng.lat, markerLatLng.lng]} icon={Icon} />
+      )}
+
+      <MapInteractor changeLatlng={handleChangeLatlng} />
+
+      <MapSearchBoxControl
+        changeLatlng={handleChangeLatlng}
+        onSearch={onSearch}
+        onError={onError}
+      />
+    </BasicLeafletMap>
+  );
+
+  return <>{children(Map, confirmChooseLocation)}</>;
+};
+
+const MapInteractor = ({ changeLatlng }) => {
+  const map = useMapEvents({
+    click: (event) => {
+      const { lat, lng } = event.latlng;
+      changeLatlng({ lat: lat.toString(), lng: lng.toString() });
+    },
+  });
+
+  useEffect(() => {
+    const bounds = L.latLngBounds([
+      [90, 180],
+      [-90, -180],
+    ]);
+    const wantedZoom = map.getBoundsZoom(bounds, true);
+
+    const center = bounds.getCenter();
+    map.setView(center);
+    map.setZoom(wantedZoom);
+  }, [map]);
+
+  return null;
+};
+
+export default LeafletReverseGeolocation;

package/src/map/__stories__/GoogleMap.stories.js

@@ -0,0 +1,139 @@
+import GoogleMap from '../GoogleMap';
+import Section from '../../section/Section';
+import SectionHeader from '../../section/SectionHeader';
+import SectionBody from '../../section/SectionBody';
+import Heading3 from '../../heading/Heading3';
+import Paragraph from '../../text/Paragraph';
+
+const metadata = {
+  title: 'Map/GoogleMap',
+  component: GoogleMap,
+  argTypes: {
+    apiKey: { description: 'API key for google platform' },
+    height: { description: 'Style variant' },
+    zoom: { description: 'Initial map zoom level' },
+    data: {
+      description:
+        'Object, which will have defaultPosition, position, locations',
+    },
+    onError: {
+      description:
+        'A callback function that notifies the component of an error and returns error code',
+      control: { action: 'onError' },
+    },
+    onCustomPopup: { description: 'Content of Popup', action: 'customPopup' },
+    onCheckPrimaryLocation: {
+      description:
+        'A callback function, tells the component to check the primary location and return information about each item in the locations',
+      action: 'checkPrimaryLocation',
+    },
+  },
+};
+
+const Default = ({
+  onError,
+  onCheckPrimaryLocation,
+  onCustomPopup,
+  ...args
+}) => {
+  const handleCheckPrimaryLocation = (data) => {
+    onCheckPrimaryLocation(data);
+    return data.tenant_id === 'f317ce1f-aea0-4bb0-b156-e513a842e489';
+  };
+
+  const renderPopup = (data) => {
+    onCustomPopup(data);
+
+    return (
+      <Section>
+        <SectionHeader>
+          <Heading3>Merchant Information</Heading3>
+        </SectionHeader>
+        <SectionBody>
+          <Paragraph>name:&nbsp;{data.name}</Paragraph>
+          <Paragraph>Contact Email:&nbsp;{data.contact_email}</Paragraph>
+          <Paragraph>Address:&nbsp;{data.address}</Paragraph>
+        </SectionBody>
+      </Section>
+    );
+  };
+
+  return (
+    <>
+      <GoogleMap
+        {...args}
+        customPopup={renderPopup}
+        checkPrimaryLocation={handleCheckPrimaryLocation}
+      />
+    </>
+  );
+};
+Default.args = {
+  apiKey: import.meta.env.STORYBOOK_GOOGLE_API_KEY,
+  height: 512,
+  zoom: 5,
+  data: {
+    defaultPosition: {
+      latitude: 24.9837825,
+      longitude: 121.539943,
+    },
+    locations: [
+      {
+        address:
+          '上海市人民政府, 人民广场, 同益里, 南京东路街道, 上海市, 黄浦区, 上海市, 200001, 中国',
+        contact_email: '784665363@qq.com',
+        latitude: '31.2322758',
+        logo_url:
+          'https://cs-uat-cashub.s3.ap-northeast-1.amazonaws.com/images/2022/05/17/tej2rEB33SmzYNVxZGPvbK1aHJ8bbE9dDGEfIjYx.png',
+        longitude: '121.4692071',
+        name: 'Unilever',
+        tenant_id: 'f317ce1f-aea0-4bb0-b156-e513a842e489',
+      },
+      {
+        address: '文化路, 寶安里, 大坪林, 新店區, 新北市, 23141, 臺灣',
+        contact_email: ' shenglow1993@gmail.com',
+        latitude: '35.2322758',
+        logo_url:
+          'https://cs-uat-cashub.s3.ap-northeast-1.amazonaws.com/images/2022/05/17/tej2rEB33SmzYNVxZGPvbK1aHJ8bbE9dDGEfIjYx.png',
+        longitude: '130.4692071',
+        name: 'Boon-EN1-1',
+        tenant_id: 'f317ce1f-aea0-4bb0-b156-e513a842e488',
+      },
+      {
+        address: '文化路, 寶安里, 大坪林, 新店區, 新北市, 23142, 臺灣',
+        contact_email: ' shenglow1993@gmail.com',
+        latitude: '35.2322758',
+        logo_url:
+          'https://cs-uat-cashub.s3.ap-northeast-1.amazonaws.com/images/2022/05/17/tej2rEB33SmzYNVxZGPvbK1aHJ8bbE9dDGEfIjYx.png',
+        longitude: '130.4692071',
+        name: 'Boon-EN1-1',
+        tenant_id: 'f317ce1f-aea0-4bb0-b156-e513a842e488',
+      },
+    ],
+    position: null,
+    message: 'Merchant address not found',
+  },
+  geoFence: true,
+  geoFenceOptions: {
+    latitude: 31.2322758,
+    longitude: 121.4692071,
+    radius: 200,
+    minRadius: 100,
+    enabledReposition: true,
+    editable: true,
+    eventHandlers: {
+      click: (event) => {
+        console.log(event);
+      },
+      edit: (radius) => {
+        console.log(radius);
+      },
+      drag: (latlng) => {
+        console.log(latlng);
+      },
+    },
+  },
+};
+
+export default metadata;
+export { Default };