{"version":3,"sources":["components/dropoffPoints/api.js","components/dropoffPoints/dropoffPointPrefix.js","components/dropoffPoints/components/DropoffPointsMap.js","components/dropoffPoints/DropoffPoints.page.js"],"names":["getData","url","params","a","axios","get","response","data","errorData","isError","DropoffPointsAPI","getPoints","dropoffPointPrefix","POSTCO","containerStyle","width","height","defaultCenter","lat","lng","libraries","React","memo","dropoffPoints","infoWindowRender","center","useState","selectedDropoffPoint","setSelectedDropoffPoint","mapLoaded","useLoadScript","googleMapsApiKey","isLoaded","autoCompleteRef","useRef","mapObj","zoom","mapContainerStyle","onLoad","map","current","options","fullscreenControl","mapTypeControl","clickableIcons","autocomplete","onPlaceChanged","place","getPlace","location","geometry","setCenter","className","style","padding","size","marginTop","dropoffPoint","i","key","position","parseFloat","latitude","longitude","onClick","e","onCloseClick","undefined","type","name","maxWidth","address","opening_hours","length","openingHour","index","DropoffPointsPage","props","useQuery","country","isLoading","dropoff_locations","src","alt"],"mappings":"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","file":"static/js/13.9cdcd363.chunk.js","sourcesContent":["import axios from \"axios\";\n\nasync function getData(url, params = {}) {\n  try {\n    const response = await axios.get(url, { ...params });\n    return response.data;\n  } catch (err) {\n    return {\n      errorData: (err.response && err.response.data) || {},\n      isError: true,\n    };\n  }\n}\n\nexport default function DropoffPointsAPI() {\n  return {\n    getPoints: async (params) =>\n      getData(\"/api/order/dropoff-locations/\", {\n        params,\n      }),\n  };\n}\n","export const dropoffPointPrefix = {\n  POSTCO: \"[PostCo]\",\n}","import React, { useState, useRef } from \"react\";\n// import { compose, withProps } from \"recompose\"\nimport { GoogleMap, Marker, InfoWindow as MapInfoWindow, Autocomplete, useLoadScript } from \"@react-google-maps/api\";\nimport { Input } from \"antd\";\nimport { dropoffPointPrefix } from \"../dropoffPointPrefix\";\n\nconst containerStyle = {\n  width: \"100%\",\n  height: \"600px\",\n};\nconst defaultCenter = {\n  lat: 1.3414944,\n  lng: 103.8141409,\n};\n\nconst libraries = [\"places\"];\n\nconst DropoffPointsMap = ({ dropoffPoints, infoWindowRender = null, center }) => {\n  const [selectedDropoffPoint, setSelectedDropoffPoint] = useState();\n  const { isLoaded: mapLoaded } = useLoadScript({\n    googleMapsApiKey: \"AIzaSyCzjX5o43T4wWKXzimnY1Qb94y2Vys-y1w\", // TODO: load this from env\n    libraries,\n  });\n  const autoCompleteRef = useRef();\n  const mapObj = useRef();\n\n  const handlePlaceChange = () => {\n    if (autoCompleteRef.current) {\n      const place = autoCompleteRef.current.getPlace();\n      if (!!place) {\n        const location = {\n          lat: place.geometry.location.lat(),\n          lng: place.geometry.location.lng(),\n        };\n        const map = mapObj.current;\n        map.setCenter(location);\n      }\n    }\n  };\n\n  if (!mapLoaded) {\n    return <p>Loading map...</p>;\n  }\n\n  const autocompleteOnLoad = (autocomplete) => {\n    autoCompleteRef.current = autocomplete;\n  };\n  const mapOnLoad = (map) => {\n    mapObj.current = map;\n  };\n\n  return (\n    <GoogleMap\n      zoom={14}\n      mapContainerStyle={containerStyle}\n      center={center ? center : defaultCenter}\n      onLoad={mapOnLoad}\n      options={{\n        fullscreenControl: false,\n        mapTypeControl: false,\n        clickableIcons: false,\n      }}\n    >\n      <Autocomplete onLoad={autocompleteOnLoad} onPlaceChanged={handlePlaceChange}>\n        <div className=\"row\">\n          <div className=\"col-md-6 offset-md-3 col-sm-8 offset-md-2 col-xs-12\">\n            <div style={{ padding: \"0 16px\" }}>\n              <Input\n                size=\"large\"\n                style={{\n                  marginTop: 24,\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      </Autocomplete>\n\n      {dropoffPoints.map((dropoffPoint, i) => (\n        <Marker\n          key={`marker-${i}`}\n          position={{\n            lat: parseFloat(dropoffPoint.latitude),\n            lng: parseFloat(dropoffPoint.longitude),\n          }}\n          onClick={(e) => {\n            setSelectedDropoffPoint(dropoffPoint);\n          }}\n        />\n      ))}\n\n      {selectedDropoffPoint && (\n        <MapInfoWindow\n          position={{\n            lat: parseFloat(selectedDropoffPoint.latitude),\n            lng: parseFloat(selectedDropoffPoint.longitude),\n          }}\n          onCloseClick={(e) => setSelectedDropoffPoint(undefined)}\n        >\n          {infoWindowRender ? (\n            infoWindowRender(selectedDropoffPoint)\n          ) : (\n            <div>\n              <h4>\n                {dropoffPointPrefix[selectedDropoffPoint.type] || \"\"} {selectedDropoffPoint.name}\n              </h4>\n              <div className=\"mb-3\" style={{ maxWidth: 250 }}>\n                <p className=\"mb-1 font-weight-bold\">Address:</p>\n                <p className=\"mb-0\">{selectedDropoffPoint.address}</p>\n              </div>\n              {selectedDropoffPoint.opening_hours && !!selectedDropoffPoint.opening_hours.length && (\n                <div>\n                  <p className=\"mb-1 font-weight-bold\">Opening hours:</p>\n                  {selectedDropoffPoint.opening_hours.map((openingHour, index) => {\n                    return (\n                      <p key={index} className=\"mb-0\">\n                        {openingHour}\n                      </p>\n                    );\n                  })}\n                </div>\n              )}\n            </div>\n          )}\n        </MapInfoWindow>\n      )}\n    </GoogleMap>\n  );\n};\n\nexport default React.memo(DropoffPointsMap);\n","import React from 'react'\nimport { useQuery } from 'react-query'\nimport DropoffPointsAPI from './api'\nimport DropoffPointsMap from './components/DropoffPointsMap'\n\nexport default function DropoffPointsPage(props) {\n  const { data, isLoading } = useQuery(\n    'dropoff-points',\n    async () => await DropoffPointsAPI().getPoints({ country: 'Singapore' })\n  )  // TOOD: fix multiple request\n  if (isLoading) {\n    return <p>Loading dropoff points...</p>\n  }\n  if (!isLoading && (!data || !data.dropoff_locations.length)) {\n    return <p>No dropoff points</p>\n  }\n  return (\n    <div>\n      <div className=\"d-flex flex-column align-items-center bg-white w-100 py-3\">\n        <img style={{\n            width: 220,\n            maxWidth: '75%',\n        }} src=\"https://janio.asia/wp-content/themes/janio/images/logo-header.png\" alt=\"Janio\"/>\n      </div>\n      <div className=\"mt-5\">\n        <div className=\"container\">\n          <h3 className=\"text-center\">Find your nearest dropoff point:</h3>\n        </div>\n        <DropoffPointsMap dropoffPoints={data.dropoff_locations} />\n      </div>\n    </div>\n  )\n}\n"],"sourceRoot":""}