@cashub/ui 0.48.28 → 0.49.0-beta.0

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

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

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

@@ -0,0 +1,136 @@
+import LeafletMap from '../LeafletMap';
+import 'leaflet/dist/leaflet.css';
+import 'react-leaflet-markercluster/dist/styles.min.css';
+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/LeafletMap',
+  component: LeafletMap,
+  argTypes: {
+    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>Address:&nbsp;{data.address}</Paragraph>
+        </SectionBody>
+      </Section>
+    );
+  };
+
+  return (
+    <>
+      <LeafletMap
+        {...args}
+        customPopup={renderPopup}
+        checkPrimaryLocation={handleCheckPrimaryLocation}
+      />
+    </>
+  );
+};
+Default.args = {
+  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,
+  },
+  geoFence: true,
+  geoFenceOptions: {
+    latitude: 31.2322758,
+    longitude: 121.4692071,
+    radius: 200,
+    minRadius: 100,
+    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__/LeafletReverseGeolocation.stories.js

@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import LeafletReverseGeolocation from '../LeafletReverseGeolocation';
+
+const metadata = {
+  title: 'Map/LeafletReverseGeolocation',
+  component: LeafletReverseGeolocation,
+  argTypes: {
+    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>
+      <LeafletReverseGeolocation
+        {...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>
+            </>
+          );
+        }}
+      </LeafletReverseGeolocation>
+    </div>
+  );
+};
+
+export default metadata;
+export { Default };

package/src/map/__test__/LeafletReverseGeolocation.test.js

@@ -0,0 +1,245 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import LeafletReverseGeolocation from '../LeafletReverseGeolocation';
+
+jest.mock('react-leaflet', () => {
+  return {
+    ...jest.requireActual('react-leaflet'),
+    TileLayer: ({ ...props }) => {
+      props.attribution = props.attribution.replace(/©/g, '©');
+      return <div data-testid='tileLayer'>{JSON.stringify(props)}</div>;
+    },
+    Marker: ({ position, icon }) => {
+      return (
+        <div data-testid='marker'>
+          {JSON.stringify({
+            position,
+            icon: typeof icon,
+          })}
+        </div>
+      );
+    },
+  };
+});
+
+jest.mock('../../map/subComponent/LeafletMapContainer', () => {
+  return ({ children, ...props }) => {
+    return (
+      <div data-testid='LeafletMapContainer'>
+        {JSON.stringify(props)}
+        {children}
+      </div>
+    );
+  };
+});
+
+jest.mock('../subComponent/MapSearchBoxControl', () => {
+  return ({ changeLatlng }) => {
+    return (
+      <div
+        data-testid='mapSearchBoxControl'
+        onClick={() => {
+          changeLatlng({ lat: '1', lng: '1' });
+        }}
+      >
+        {JSON.stringify({
+          changeLatlng: typeof changeLatlng,
+        })}
+      </div>
+    );
+  };
+});
+
+describe('Test LeafletReverseGeolocation Component', () => {
+  test('render component', () => {
+    const defaultLatlng = { lat: 0, lng: 0 };
+
+    render(
+      <LeafletReverseGeolocation defaultLatlng={defaultLatlng}>
+        {(map) => {
+          return (
+            <div>
+              <div>{map}</div>
+            </div>
+          );
+        }}
+      </LeafletReverseGeolocation>,
+    );
+
+    const LeafletMapContainer = screen.getByTestId('LeafletMapContainer');
+    expect(LeafletMapContainer).toHaveTextContent(
+      JSON.stringify({
+        height: 500,
+        center: [1, 1],
+        zoom: 10,
+        scrollWheelZoom: true,
+        maxBounds: [
+          [-90, -180],
+          [90, 180],
+        ],
+      }),
+    );
+
+    const tileLayer = screen.getByTestId('tileLayer');
+    expect(tileLayer).toHaveTextContent(
+      JSON.stringify({
+        attribution:
+          'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
+        url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        minZoom: 3,
+        maxZoom: 20,
+        noWrap: true,
+        bounds: [
+          [-90, -180],
+          [90, 180],
+        ],
+      }),
+    );
+
+    const mapInteractor = screen.getByTestId('mapInteractor');
+    expect(mapInteractor).toHaveTextContent(
+      JSON.stringify({
+        changeLatlng: 'function',
+      }),
+    );
+
+    const mapSearchBoxControl = screen.getByTestId('mapSearchBoxControl');
+    expect(mapSearchBoxControl).toHaveTextContent(
+      JSON.stringify({
+        changeLatlng: 'function',
+      }),
+    );
+  });
+
+  test('choose location on map', () => {
+    const defaultLatlng = { lat: 0, lng: 0 };
+    const changeLatlng = jest.fn(({ lat, lng }) => {
+      defaultLatlng.lat = lat;
+      defaultLatlng.lng = lng;
+    });
+
+    render(
+      <LeafletReverseGeolocation
+        defaultLatlng={defaultLatlng}
+        changeLatlng={changeLatlng}
+      >
+        {(map) => {
+          return (
+            <div>
+              <div>{map}</div>
+            </div>
+          );
+        }}
+      </LeafletReverseGeolocation>,
+    );
+
+    let marker = screen.queryByTestId('marker');
+    expect(marker).not.toBeInTheDocument();
+
+    const mapInteractor = screen.getByTestId('mapInteractor');
+    userEvent.click(mapInteractor);
+    expect(changeLatlng).toHaveBeenCalledTimes(1);
+
+    marker = screen.queryByTestId('marker');
+    expect(marker).toHaveTextContent(
+      JSON.stringify({
+        position: [defaultLatlng.lat, defaultLatlng.lng],
+        icon: 'object',
+      }),
+    );
+  });
+
+  test('search location on map', () => {
+    const defaultLatlng = { lat: 0, lng: 0 };
+    const changeLatlng = jest.fn(({ lat, lng }) => {
+      defaultLatlng.lat = lat;
+      defaultLatlng.lng = lng;
+    });
+
+    render(
+      <LeafletReverseGeolocation
+        defaultLatlng={defaultLatlng}
+        changeLatlng={changeLatlng}
+      >
+        {(map) => {
+          return (
+            <div>
+              <div>{map}</div>
+            </div>
+          );
+        }}
+      </LeafletReverseGeolocation>,
+    );
+
+    let marker = screen.queryByTestId('marker');
+    expect(marker).not.toBeInTheDocument();
+
+    const mapSearchBoxControl = screen.getByTestId('mapSearchBoxControl');
+    userEvent.click(mapSearchBoxControl);
+    expect(changeLatlng).toHaveBeenCalledTimes(1);
+
+    marker = screen.queryByTestId('marker');
+    expect(marker).toHaveTextContent(
+      JSON.stringify({
+        position: [defaultLatlng.lat, defaultLatlng.lng],
+        icon: 'object',
+      }),
+    );
+  });
+
+  test('confirm choose location', async () => {
+    const defaultLatlng = { lat: 0, lng: 0 };
+    const changeLatlng = jest.fn(({ lat, lng }) => {
+      defaultLatlng.lat = lat;
+      defaultLatlng.lng = lng;
+    });
+    const onChoose = jest.fn(() => {
+      return 'fake display name';
+    });
+    const handleConfirmChooseLocation = jest.fn();
+
+    render(
+      <LeafletReverseGeolocation
+        defaultLatlng={defaultLatlng}
+        changeLatlng={changeLatlng}
+        onChoose={onChoose}
+      >
+        {(map, confirmChooseLocation) => {
+          return (
+            <div>
+              <div>{map}</div>
+              <button
+                type='button'
+                onClick={() =>
+                  confirmChooseLocation(handleConfirmChooseLocation)
+                }
+              >
+                Confirm
+              </button>
+            </div>
+          );
+        }}
+      </LeafletReverseGeolocation>,
+    );
+
+    const confirmButton = screen.getByRole('button', { name: 'Confirm' });
+    userEvent.click(confirmButton);
+    await waitFor(() => {
+      expect(handleConfirmChooseLocation).toHaveBeenCalledTimes(1);
+      expect(handleConfirmChooseLocation).toHaveBeenLastCalledWith({
+        error: 'PleaseChooseLocation',
+      });
+    });
+
+    const mapInteractor = screen.getByTestId('mapInteractor');
+    userEvent.click(mapInteractor);
+
+    userEvent.click(confirmButton);
+    await waitFor(() => {
+      expect(handleConfirmChooseLocation).toHaveBeenCalledTimes(2);
+      expect(handleConfirmChooseLocation).toHaveBeenLastCalledWith({
+        address: 'fake display name',
+      });
+    });
+  });
+});

package/src/map/__test__/MapSearchBoxControl.test.js

@@ -0,0 +1,89 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import LeafletMapContainer from '../subComponent/LeafletMapContainer';
+import MapSearchBoxControl from '../subComponent/MapSearchBoxControl';
+import CustomToastContainer from '../../toast/CustomToastContainer';
+
+jest.mock('react-leaflet', () => {
+  return {
+    ...jest.requireActual('react-leaflet'),
+    useMapEvents: jest.fn(),
+  };
+});
+
+describe('Test MapSearchBoxControl Component', () => {
+  test('render component', () => {
+    render(
+      <div>
+        <CustomToastContainer />
+        <LeafletMapContainer>
+          <MapSearchBoxControl />
+        </LeafletMapContainer>
+      </div>,
+    );
+
+    const searchBox = screen.getByRole('textbox');
+    expect(searchBox).toHaveFocus();
+  });
+
+  test('search location', async () => {
+    const changeLatlng = jest.fn();
+    const onSearch = jest.fn().mockImplementation(() => {
+      return { lat: 1, lng: 1 };
+    });
+    const onError = jest.fn();
+
+    render(
+      <div>
+        <CustomToastContainer />
+        <LeafletMapContainer>
+          <MapSearchBoxControl
+            changeLatlng={changeLatlng}
+            onSearch={onSearch}
+            onError={onError}
+          />
+        </LeafletMapContainer>
+      </div>,
+    );
+
+    const searchBox = screen.getByRole('textbox');
+
+    userEvent.type(searchBox, 'address');
+    expect(searchBox).toHaveValue('address');
+
+    userEvent.type(searchBox, '{enter}');
+    expect(onSearch).toHaveBeenLastCalledWith('address');
+
+    await waitFor(() => {
+      expect(changeLatlng).toHaveBeenCalledTimes(1);
+      expect(changeLatlng).toHaveBeenLastCalledWith({ lat: 1, lng: 1 });
+    });
+  });
+
+  test('search invalid location', async () => {
+    const changeLatlng = jest.fn();
+    const onSearch = jest.fn();
+    const onError = jest.fn();
+
+    render(
+      <div>
+        <CustomToastContainer />
+        <LeafletMapContainer>
+          <MapSearchBoxControl
+            changeLatlng={changeLatlng}
+            onSearch={onSearch}
+            onError={onError}
+          />
+        </LeafletMapContainer>
+      </div>,
+    );
+
+    const searchBox = screen.getByRole('textbox');
+
+    userEvent.type(searchBox, '{enter}');
+    await waitFor(() => {
+      expect(changeLatlng).not.toHaveBeenCalled();
+      expect(onError).toHaveBeenLastCalledWith('NO_RESULT');
+    });
+  });
+});

package/src/map/index.js

@@ -0,0 +1,4 @@
+export { default as LeafletMap } from './LeafletMap';
+export { default as LeafletReverseGeolocation } from './LeafletReverseGeolocation';
+export { default as GoogleMap } from './GoogleMap';
+export { default as GoogleReverseGeolocation } from './GoogleReverseGeolocation';

package/src/map/subComponent/BasicLeafletMap.js

@@ -0,0 +1,33 @@
+import LeafletMapContainer from './LeafletMapContainer';
+import { TileLayer } from 'react-leaflet';
+
+const BasicLeafletMap = ({ height, zoom, scrollWheelZoom = false, children }) => {
+  return (
+    <LeafletMapContainer
+      height={height}
+      center={[1, 1]}
+      zoom={zoom}
+      scrollWheelZoom={scrollWheelZoom}
+      maxBounds={[
+        [-90, -180],
+        [90, 180],
+      ]}
+    >
+      <TileLayer
+        attribution='Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+        minZoom={3}
+        maxZoom={20}
+        noWrap={true}
+        bounds={[
+          [-90, -180],
+          [90, 180],
+        ]}
+      />
+
+      {children}
+    </LeafletMapContainer>
+  );
+};
+
+export default BasicLeafletMap;