@cashub/ui 0.49.0-beta.0 → 0.49.0-beta.2

package/src/map/LeafletMap.js

@@ -1,264 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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 };

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

@@ -1,95 +0,0 @@
-import { useState } from 'react';
-import GoogleReverseGeolocation from '../GoogleReverseGeolocation';
-
-const metadata = {
-  title: 'Map/GoogleReverseGeolocation',
-  component: GoogleReverseGeolocation,
-  argTypes: {
-    apiKey: { description: 'API key for google platform' },
-    children: {
-      description:
-        'A callback function that notifies the component to execute children and returns Map and confirmChooseLocation',
-      action: 'children',
-    },
-    defaultLatlng: { description: 'Default latitude and longitude' },
-    changeLatlng: {
-      description:
-        'A callback function, tell the component to change the latitude and longitude and return latlng',
-    },
-    onChoose: {
-      description: 'A callback function, execute when choose location on map',
-    },
-    onSearch: {
-      description: 'A callback function, execute on search location',
-    },
-    onError: {
-      description: 'A callback function, execute when error occur',
-    },
-  },
-};
-
-const Default = ({ children, onChoose, onSearch, ...args }) => {
-  const [choseLatlng, setChoseLatlng] = useState({
-    lat: 0,
-    lng: 0,
-  });
-
-  const handleConfirmChooseLocation = (result) => {
-    if (result.message) {
-      children(result.message);
-    } else if (result.address) {
-      children(result.address);
-    }
-  };
-
-  const handleChoose = (latLng) => {
-    onChoose(latLng);
-
-    return Promise.resolve({ address: 'choose address' });
-  };
-
-  const handleSearch = (address) => {
-    onSearch(address);
-
-    return Promise.resolve({ lat: 24.9837825, lng: 121.539943 });
-  };
-
-  return (
-    <div>
-      <GoogleReverseGeolocation
-        {...args}
-        defaultLatlng={choseLatlng}
-        changeLatlng={setChoseLatlng}
-        onChoose={handleChoose}
-        onSearch={handleSearch}
-      >
-        {(map, confirmChooseLocation) => {
-          return (
-            <>
-              <div>ChooseLocation</div>
-              <div>{map}</div>
-              <div>
-                <>
-                  <button>Cancel</button>
-                  <button
-                    onClick={() =>
-                      confirmChooseLocation(handleConfirmChooseLocation)
-                    }
-                  >
-                    Confirm
-                  </button>
-                </>
-              </div>
-            </>
-          );
-        }}
-      </GoogleReverseGeolocation>
-    </div>
-  );
-};
-Default.args = {
-  apiKey: import.meta.env.STORYBOOK_GOOGLE_API_KEY,
-};
-
-export default metadata;
-export { Default };