updates on google app api key removal
This commit is contained in:
3
.env
3
.env
@@ -4,9 +4,6 @@ GENERATE_SOURCEMAP = false
|
|||||||
## Backend API URL
|
## Backend API URL
|
||||||
REACT_APP_API_URL=https://mock-data-api-nextjs.vercel.app/
|
REACT_APP_API_URL=https://mock-data-api-nextjs.vercel.app/
|
||||||
|
|
||||||
## Google Map Key
|
|
||||||
|
|
||||||
REACT_APP_GOOGLE_MAPS_API_KEY=AIzaSyCF4KatYCI3vqz1_H3kiHeyS3yCMfYToh8
|
|
||||||
REACT_APP_RIDER_ACCESS_ID=AAAAILMpCEU:APA91bEavuOllBI6sFgYtxXAgNmAVwNA-MnCMHLGlR4_t7UqpLajAkdn3T0CZr_zaLBknLyim9ytFLMZgbeXmKqTad_PKCbqlYjHpaizVrLXtecxqyEy4UktIacK2UvHVUATHL-7VQQk
|
REACT_APP_RIDER_ACCESS_ID=AAAAILMpCEU:APA91bEavuOllBI6sFgYtxXAgNmAVwNA-MnCMHLGlR4_t7UqpLajAkdn3T0CZr_zaLBknLyim9ytFLMZgbeXmKqTad_PKCbqlYjHpaizVrLXtecxqyEy4UktIacK2UvHVUATHL-7VQQk
|
||||||
## Firebase - Google Auth
|
## Firebase - Google Auth
|
||||||
|
|
||||||
|
|||||||
189
package-lock.json
generated
189
package-lock.json
generated
@@ -13,13 +13,11 @@
|
|||||||
"@astryxdesign/core": "^0.1.9",
|
"@astryxdesign/core": "^0.1.9",
|
||||||
"@astryxdesign/theme-neutral": "^0.1.9",
|
"@astryxdesign/theme-neutral": "^0.1.9",
|
||||||
"@custom-react-hooks/use-network": "^1.0.1",
|
"@custom-react-hooks/use-network": "^1.0.1",
|
||||||
"@react-google-maps/api": "^2.20.7",
|
|
||||||
"@reduxjs/toolkit": "^2.12.0",
|
"@reduxjs/toolkit": "^2.12.0",
|
||||||
"@stylexjs/stylex": "^0.19.0",
|
"@stylexjs/stylex": "^0.19.0",
|
||||||
"@svgr/webpack": "^7.0.0",
|
"@svgr/webpack": "^7.0.0",
|
||||||
"@tanstack/react-query": "^5.22.2",
|
"@tanstack/react-query": "^5.22.2",
|
||||||
"antd": "^5.11.5",
|
"antd": "^5.11.5",
|
||||||
"autosuggest-highlight": "^3.3.4",
|
|
||||||
"axios": "^1.3.5",
|
"axios": "^1.3.5",
|
||||||
"buffer": "^6.0.3",
|
"buffer": "^6.0.3",
|
||||||
"chance": "^1.1.11",
|
"chance": "^1.1.11",
|
||||||
@@ -45,8 +43,6 @@
|
|||||||
"react-dnd": "^16.0.1",
|
"react-dnd": "^16.0.1",
|
||||||
"react-dnd-html5-backend": "^16.0.1",
|
"react-dnd-html5-backend": "^16.0.1",
|
||||||
"react-dom": "^19.2.8",
|
"react-dom": "^19.2.8",
|
||||||
"react-geocode": "^0.2.3",
|
|
||||||
"react-google-autocomplete": "^2.7.3",
|
|
||||||
"react-icons": "^4.12.0",
|
"react-icons": "^4.12.0",
|
||||||
"react-intl": "^7.1.14",
|
"react-intl": "^7.1.14",
|
||||||
"react-leaflet": "^5.0.0",
|
"react-leaflet": "^5.0.0",
|
||||||
@@ -2714,22 +2710,6 @@
|
|||||||
"tslib": "^2.8.0"
|
"tslib": "^2.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@googlemaps/js-api-loader": {
|
|
||||||
"version": "1.16.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
|
|
||||||
"integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==",
|
|
||||||
"license": "Apache-2.0"
|
|
||||||
},
|
|
||||||
"node_modules/@googlemaps/markerclusterer": {
|
|
||||||
"version": "2.5.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz",
|
|
||||||
"integrity": "sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==",
|
|
||||||
"license": "Apache-2.0",
|
|
||||||
"dependencies": {
|
|
||||||
"fast-deep-equal": "^3.1.3",
|
|
||||||
"supercluster": "^8.0.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@humanwhocodes/config-array": {
|
"node_modules/@humanwhocodes/config-array": {
|
||||||
"version": "0.11.8",
|
"version": "0.11.8",
|
||||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
|
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
|
||||||
@@ -3786,36 +3766,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
||||||
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
||||||
},
|
},
|
||||||
"node_modules/@react-google-maps/api": {
|
|
||||||
"version": "2.20.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.20.7.tgz",
|
|
||||||
"integrity": "sha512-ys7uri3V6gjhYZUI43srHzSKDC6/jiKTwHNlwXFTvjeaJE3M3OaYBt9FZKvJs8qnOhL6i6nD1BKJoi1KrnkCkg==",
|
|
||||||
"license": "MIT",
|
|
||||||
"dependencies": {
|
|
||||||
"@googlemaps/js-api-loader": "1.16.8",
|
|
||||||
"@googlemaps/markerclusterer": "2.5.3",
|
|
||||||
"@react-google-maps/infobox": "2.20.0",
|
|
||||||
"@react-google-maps/marker-clusterer": "2.20.0",
|
|
||||||
"@types/google.maps": "3.58.1",
|
|
||||||
"invariant": "2.2.4"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": "^16.8 || ^17 || ^18 || ^19",
|
|
||||||
"react-dom": "^16.8 || ^17 || ^18 || ^19"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@react-google-maps/infobox": {
|
|
||||||
"version": "2.20.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.20.0.tgz",
|
|
||||||
"integrity": "sha512-03PJHjohhaVLkX6+NHhlr8CIlvUxWaXhryqDjyaZ8iIqqix/nV8GFdz9O3m5OsjtxtNho09F/15j14yV0nuyLQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@react-google-maps/marker-clusterer": {
|
|
||||||
"version": "2.20.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.20.0.tgz",
|
|
||||||
"integrity": "sha512-tieX9Va5w1yP88vMgfH1pHTacDQ9TgDTjox3tLlisKDXRQWdjw+QeVVghhf5XqqIxXHgPdcGwBvKY6UP+SIvLw==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@react-leaflet/core": {
|
"node_modules/@react-leaflet/core": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
|
||||||
@@ -4647,12 +4597,6 @@
|
|||||||
"@types/range-parser": "*"
|
"@types/range-parser": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@types/google.maps": {
|
|
||||||
"version": "3.58.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
|
|
||||||
"integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==",
|
|
||||||
"license": "MIT"
|
|
||||||
},
|
|
||||||
"node_modules/@types/graceful-fs": {
|
"node_modules/@types/graceful-fs": {
|
||||||
"version": "4.1.5",
|
"version": "4.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
|
||||||
@@ -5727,14 +5671,6 @@
|
|||||||
"postcss": "^8.1.0"
|
"postcss": "^8.1.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/autosuggest-highlight": {
|
|
||||||
"version": "3.3.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/autosuggest-highlight/-/autosuggest-highlight-3.3.4.tgz",
|
|
||||||
"integrity": "sha512-j6RETBD2xYnrVcoV1S5R4t3WxOlWZKyDQjkwnggDPSjF5L4jV98ZltBpvPvbkM1HtoSe5o+bNrTHyjPbieGeYA==",
|
|
||||||
"dependencies": {
|
|
||||||
"remove-accents": "^0.4.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/available-typed-arrays": {
|
"node_modules/available-typed-arrays": {
|
||||||
"version": "1.0.5",
|
"version": "1.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
|
||||||
@@ -13295,12 +13231,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
|
||||||
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
|
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
|
||||||
},
|
},
|
||||||
"node_modules/kdbush": {
|
|
||||||
"version": "4.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
|
|
||||||
"integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==",
|
|
||||||
"license": "ISC"
|
|
||||||
},
|
|
||||||
"node_modules/kind-of": {
|
"node_modules/kind-of": {
|
||||||
"version": "6.0.3",
|
"version": "6.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
||||||
@@ -16781,26 +16711,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
||||||
},
|
},
|
||||||
"node_modules/react-geocode": {
|
|
||||||
"version": "0.2.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-geocode/-/react-geocode-0.2.3.tgz",
|
|
||||||
"integrity": "sha512-sIpbgmn1IUzAxO4haOZ6jeeFnMD8ya9PC38yiNrmJ9vPWbvAO2D/2yfCBzZjGZVUm4PRzKAc0KghXfaEnug0TQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"regenerator-runtime": "^0.13.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-google-autocomplete": {
|
|
||||||
"version": "2.7.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-google-autocomplete/-/react-google-autocomplete-2.7.3.tgz",
|
|
||||||
"integrity": "sha512-Nm+7/VDe7/NDWb8p/a39is7ktNqt5bNqAOoQv2Ev/XkuEvjsRk08VAPFmXUH03xKuM8IUuDrk2Lwfge44YEj6Q==",
|
|
||||||
"dependencies": {
|
|
||||||
"lodash.debounce": "^4.0.8",
|
|
||||||
"prop-types": "^15.5.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": ">=16.8.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-icons": {
|
"node_modules/react-icons": {
|
||||||
"version": "4.12.0",
|
"version": "4.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
|
||||||
@@ -17568,11 +17478,6 @@
|
|||||||
"node": ">= 0.10"
|
"node": ">= 0.10"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/remove-accents": {
|
|
||||||
"version": "0.4.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.4.tgz",
|
|
||||||
"integrity": "sha512-EpFcOa/ISetVHEXqu+VwI96KZBmq+a8LJnGkaeFw45epGlxIZz5dhEEnNZMsQXgORu3qaMoLX4qJCzOik6ytAg=="
|
|
||||||
},
|
|
||||||
"node_modules/renderkid": {
|
"node_modules/renderkid": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
|
||||||
@@ -18626,15 +18531,6 @@
|
|||||||
"stylis": "4.x"
|
"stylis": "4.x"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/supercluster": {
|
|
||||||
"version": "8.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
|
|
||||||
"integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"kdbush": "^4.0.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/supports-color": {
|
"node_modules/supports-color": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||||
@@ -21997,20 +21893,6 @@
|
|||||||
"tslib": "^2.8.0"
|
"tslib": "^2.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@googlemaps/js-api-loader": {
|
|
||||||
"version": "1.16.8",
|
|
||||||
"resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz",
|
|
||||||
"integrity": "sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ=="
|
|
||||||
},
|
|
||||||
"@googlemaps/markerclusterer": {
|
|
||||||
"version": "2.5.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz",
|
|
||||||
"integrity": "sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==",
|
|
||||||
"requires": {
|
|
||||||
"fast-deep-equal": "^3.1.3",
|
|
||||||
"supercluster": "^8.0.1"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@humanwhocodes/config-array": {
|
"@humanwhocodes/config-array": {
|
||||||
"version": "0.11.8",
|
"version": "0.11.8",
|
||||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
|
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
|
||||||
@@ -22759,29 +22641,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
||||||
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
||||||
},
|
},
|
||||||
"@react-google-maps/api": {
|
|
||||||
"version": "2.20.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.20.7.tgz",
|
|
||||||
"integrity": "sha512-ys7uri3V6gjhYZUI43srHzSKDC6/jiKTwHNlwXFTvjeaJE3M3OaYBt9FZKvJs8qnOhL6i6nD1BKJoi1KrnkCkg==",
|
|
||||||
"requires": {
|
|
||||||
"@googlemaps/js-api-loader": "1.16.8",
|
|
||||||
"@googlemaps/markerclusterer": "2.5.3",
|
|
||||||
"@react-google-maps/infobox": "2.20.0",
|
|
||||||
"@react-google-maps/marker-clusterer": "2.20.0",
|
|
||||||
"@types/google.maps": "3.58.1",
|
|
||||||
"invariant": "2.2.4"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"@react-google-maps/infobox": {
|
|
||||||
"version": "2.20.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.20.0.tgz",
|
|
||||||
"integrity": "sha512-03PJHjohhaVLkX6+NHhlr8CIlvUxWaXhryqDjyaZ8iIqqix/nV8GFdz9O3m5OsjtxtNho09F/15j14yV0nuyLQ=="
|
|
||||||
},
|
|
||||||
"@react-google-maps/marker-clusterer": {
|
|
||||||
"version": "2.20.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.20.0.tgz",
|
|
||||||
"integrity": "sha512-tieX9Va5w1yP88vMgfH1pHTacDQ9TgDTjox3tLlisKDXRQWdjw+QeVVghhf5XqqIxXHgPdcGwBvKY6UP+SIvLw=="
|
|
||||||
},
|
|
||||||
"@react-leaflet/core": {
|
"@react-leaflet/core": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz",
|
||||||
@@ -23343,11 +23202,6 @@
|
|||||||
"@types/range-parser": "*"
|
"@types/range-parser": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@types/google.maps": {
|
|
||||||
"version": "3.58.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz",
|
|
||||||
"integrity": "sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ=="
|
|
||||||
},
|
|
||||||
"@types/graceful-fs": {
|
"@types/graceful-fs": {
|
||||||
"version": "4.1.5",
|
"version": "4.1.5",
|
||||||
"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
|
||||||
@@ -24187,14 +24041,6 @@
|
|||||||
"postcss-value-parser": "^4.2.0"
|
"postcss-value-parser": "^4.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"autosuggest-highlight": {
|
|
||||||
"version": "3.3.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/autosuggest-highlight/-/autosuggest-highlight-3.3.4.tgz",
|
|
||||||
"integrity": "sha512-j6RETBD2xYnrVcoV1S5R4t3WxOlWZKyDQjkwnggDPSjF5L4jV98ZltBpvPvbkM1HtoSe5o+bNrTHyjPbieGeYA==",
|
|
||||||
"requires": {
|
|
||||||
"remove-accents": "^0.4.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"available-typed-arrays": {
|
"available-typed-arrays": {
|
||||||
"version": "1.0.5",
|
"version": "1.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
|
||||||
@@ -29646,11 +29492,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
|
||||||
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
|
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
|
||||||
},
|
},
|
||||||
"kdbush": {
|
|
||||||
"version": "4.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
|
|
||||||
"integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA=="
|
|
||||||
},
|
|
||||||
"kind-of": {
|
"kind-of": {
|
||||||
"version": "6.0.3",
|
"version": "6.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
|
||||||
@@ -31952,23 +31793,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
||||||
},
|
},
|
||||||
"react-geocode": {
|
|
||||||
"version": "0.2.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-geocode/-/react-geocode-0.2.3.tgz",
|
|
||||||
"integrity": "sha512-sIpbgmn1IUzAxO4haOZ6jeeFnMD8ya9PC38yiNrmJ9vPWbvAO2D/2yfCBzZjGZVUm4PRzKAc0KghXfaEnug0TQ==",
|
|
||||||
"requires": {
|
|
||||||
"regenerator-runtime": "^0.13.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"react-google-autocomplete": {
|
|
||||||
"version": "2.7.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-google-autocomplete/-/react-google-autocomplete-2.7.3.tgz",
|
|
||||||
"integrity": "sha512-Nm+7/VDe7/NDWb8p/a39is7ktNqt5bNqAOoQv2Ev/XkuEvjsRk08VAPFmXUH03xKuM8IUuDrk2Lwfge44YEj6Q==",
|
|
||||||
"requires": {
|
|
||||||
"lodash.debounce": "^4.0.8",
|
|
||||||
"prop-types": "^15.5.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"react-icons": {
|
"react-icons": {
|
||||||
"version": "4.12.0",
|
"version": "4.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz",
|
||||||
@@ -32476,11 +32300,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
|
"resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
|
||||||
"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog=="
|
"integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog=="
|
||||||
},
|
},
|
||||||
"remove-accents": {
|
|
||||||
"version": "0.4.4",
|
|
||||||
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.4.tgz",
|
|
||||||
"integrity": "sha512-EpFcOa/ISetVHEXqu+VwI96KZBmq+a8LJnGkaeFw45epGlxIZz5dhEEnNZMsQXgORu3qaMoLX4qJCzOik6ytAg=="
|
|
||||||
},
|
|
||||||
"renderkid": {
|
"renderkid": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz",
|
||||||
@@ -33272,14 +33091,6 @@
|
|||||||
"cssjanus": "^2.0.1"
|
"cssjanus": "^2.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"supercluster": {
|
|
||||||
"version": "8.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
|
|
||||||
"integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
|
|
||||||
"requires": {
|
|
||||||
"kdbush": "^4.0.2"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"supports-color": {
|
"supports-color": {
|
||||||
"version": "5.5.0",
|
"version": "5.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
|
||||||
|
|||||||
@@ -8,13 +8,11 @@
|
|||||||
"@astryxdesign/core": "^0.1.9",
|
"@astryxdesign/core": "^0.1.9",
|
||||||
"@astryxdesign/theme-neutral": "^0.1.9",
|
"@astryxdesign/theme-neutral": "^0.1.9",
|
||||||
"@custom-react-hooks/use-network": "^1.0.1",
|
"@custom-react-hooks/use-network": "^1.0.1",
|
||||||
"@react-google-maps/api": "^2.20.7",
|
|
||||||
"@reduxjs/toolkit": "^2.12.0",
|
"@reduxjs/toolkit": "^2.12.0",
|
||||||
"@stylexjs/stylex": "^0.19.0",
|
"@stylexjs/stylex": "^0.19.0",
|
||||||
"@svgr/webpack": "^7.0.0",
|
"@svgr/webpack": "^7.0.0",
|
||||||
"@tanstack/react-query": "^5.22.2",
|
"@tanstack/react-query": "^5.22.2",
|
||||||
"antd": "^5.11.5",
|
"antd": "^5.11.5",
|
||||||
"autosuggest-highlight": "^3.3.4",
|
|
||||||
"axios": "^1.3.5",
|
"axios": "^1.3.5",
|
||||||
"buffer": "^6.0.3",
|
"buffer": "^6.0.3",
|
||||||
"chance": "^1.1.11",
|
"chance": "^1.1.11",
|
||||||
@@ -40,8 +38,6 @@
|
|||||||
"react-dnd": "^16.0.1",
|
"react-dnd": "^16.0.1",
|
||||||
"react-dnd-html5-backend": "^16.0.1",
|
"react-dnd-html5-backend": "^16.0.1",
|
||||||
"react-dom": "^19.2.8",
|
"react-dom": "^19.2.8",
|
||||||
"react-geocode": "^0.2.3",
|
|
||||||
"react-google-autocomplete": "^2.7.3",
|
|
||||||
"react-icons": "^4.12.0",
|
"react-icons": "^4.12.0",
|
||||||
"react-intl": "^7.1.14",
|
"react-intl": "^7.1.14",
|
||||||
"react-leaflet": "^5.0.0",
|
"react-leaflet": "^5.0.0",
|
||||||
|
|||||||
@@ -27,8 +27,6 @@
|
|||||||
|
|
||||||
<!-- this is to resolve issue in old safari browser in tablet -->
|
<!-- this is to resolve issue in old safari browser in tablet -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/resize-observer-polyfill@1.5.1/dist/ResizeObserver.min.js"></script>
|
||||||
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQ2c_pOSOFYSjxGMwkFvCVWKjYOM9siow&libraries=places"></script> -->
|
|
||||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhkGfnq27sN0wV5y_S-M2KojpFTk_by-Q&libraries=places"></script>
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.datedialog > div > div > .MuiPaper-root {
|
.datedialog > div > div > .MuiPaper-root {
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
import { React, useEffect, useState } from 'react';
|
import { React, useEffect, useMemo, useState } from 'react';
|
||||||
|
|
||||||
import { Button } from '@astryxdesign/core/Button';
|
import { Button } from '@astryxdesign/core/Button';
|
||||||
import { TextInput } from '@astryxdesign/core/TextInput';
|
import { TextInput } from '@astryxdesign/core/TextInput';
|
||||||
|
import { Typeahead } from '@astryxdesign/core/Typeahead';
|
||||||
import { HStack } from '@astryxdesign/core/HStack';
|
import { HStack } from '@astryxdesign/core/HStack';
|
||||||
import { Text } from '@astryxdesign/core/Text';
|
import { Text } from '@astryxdesign/core/Text';
|
||||||
|
|
||||||
@@ -11,7 +12,7 @@ import MainCard from 'components/MainCard';
|
|||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
|
|
||||||
import Loader from 'components/Loader';
|
import Loader from 'components/Loader';
|
||||||
import Geocode from 'react-geocode';
|
import { createAddressSearchSource } from '../../../utils/addressSearch';
|
||||||
import { enqueueSnackbar } from 'notistack';
|
import { enqueueSnackbar } from 'notistack';
|
||||||
import { useNavigate } from 'react-router';
|
import { useNavigate } from 'react-router';
|
||||||
import TitleCard from '../titleCard';
|
import TitleCard from '../titleCard';
|
||||||
@@ -33,10 +34,9 @@ const CreateCustomer = () => {
|
|||||||
const [doorno, setDoorno] = useState('');
|
const [doorno, setDoorno] = useState('');
|
||||||
const [landmark, setLandmark] = useState('');
|
const [landmark, setLandmark] = useState('');
|
||||||
const [, setTenantinfo] = useState({});
|
const [, setTenantinfo] = useState({});
|
||||||
const [inputValue2, setInputValue2] = useState('');
|
const [pickPlace, setPickPlace] = useState(null);
|
||||||
const [appLocaLat, setAppLocaLat] = useState();
|
const [appLocaLat, setAppLocaLat] = useState();
|
||||||
const [appLocaLng, setAppLocaLng] = useState();
|
const [appLocaLng, setAppLocaLng] = useState();
|
||||||
const [appLocaRadius, setAppLocaRadius] = useState();
|
|
||||||
const [, setLocations] = useState('Select Location');
|
const [, setLocations] = useState('Select Location');
|
||||||
const userid = localStorage.getItem('userid');
|
const userid = localStorage.getItem('userid');
|
||||||
const [tid] = useState(0);
|
const [tid] = useState(0);
|
||||||
@@ -45,9 +45,6 @@ const CreateCustomer = () => {
|
|||||||
|
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
|
|
||||||
// Geocode.setApiKey('AIzaSyCF4KatYCI3vqz1_H3kiHeyS3yCMfYToh8');
|
|
||||||
|
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -56,90 +53,89 @@ const CreateCustomer = () => {
|
|||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
// Nominatim search source, soft-biased toward the operator's zone once
|
||||||
// Initialize Google Maps Autocomplete
|
// getapplocations() resolves appLocaLat/appLocaLng — replaces the Google
|
||||||
if (inputValue2) {
|
// Places Autocomplete bound to #addressAuto1.
|
||||||
const autocompleteInput = document.getElementById('addressAuto1');
|
const pickAddressSource = useMemo(
|
||||||
const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, {
|
() => createAddressSearchSource({ bias: { lat: appLocaLat, lng: appLocaLng } }),
|
||||||
// types: ['(cities)'], // You can adjust the types parameter based on your requirements
|
[appLocaLat, appLocaLng]
|
||||||
strictBounds: true,
|
);
|
||||||
bounds: new window.google.maps.Circle({
|
|
||||||
// center: new window.google.maps.LatLng(11.0050707, 76.9509083),
|
|
||||||
// radius: 100000
|
|
||||||
center: new window.google.maps.LatLng(appLocaLat, appLocaLng),
|
|
||||||
|
|
||||||
radius: appLocaRadius * 1000
|
const handlePickPlaceSelected = (item) => {
|
||||||
}).getBounds()
|
setPickPlace(item);
|
||||||
});
|
if (!item) {
|
||||||
// Event listener for autocomplete place changed
|
setPickCust({
|
||||||
autocomplete.addListener('place_changed', () => {
|
...pickCust,
|
||||||
const place = autocomplete.getPlace();
|
doorno: '',
|
||||||
setInputValue2(`${place.name}, ${place.formatted_address}`);
|
suburb: '',
|
||||||
logger.info('new place', place); // Do something with the selected place
|
city: '',
|
||||||
logger.info(' pick (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place
|
postcode: '',
|
||||||
// to trigger getDistance
|
landmark: ''
|
||||||
setStartPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
|
|
||||||
setAddress(`${place.name} ${place.formatted_address}`);
|
|
||||||
setPickCust({ ...pickCust, address: `${place.name} ${place.formatted_address}` });
|
|
||||||
const address = {
|
|
||||||
address: `${place.name} ${place.formatted_address}`,
|
|
||||||
street_number: '',
|
|
||||||
route: '',
|
|
||||||
locality: '',
|
|
||||||
sublocality_level_1: '',
|
|
||||||
administrative_area_level_3: '',
|
|
||||||
administrative_area_level_1: '',
|
|
||||||
country: '',
|
|
||||||
postal_code: ''
|
|
||||||
};
|
|
||||||
place.address_components.forEach((component) => {
|
|
||||||
component.types.forEach((type) => {
|
|
||||||
switch (type) {
|
|
||||||
case 'street_number':
|
|
||||||
address.street_number = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'route':
|
|
||||||
address.route = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'locality':
|
|
||||||
address.locality = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'sublocality_level_1':
|
|
||||||
address.sublocality_level_1 = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'administrative_area_level_3':
|
|
||||||
address.administrative_area_level_3 = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'administrative_area_level_1':
|
|
||||||
address.administrative_area_level_1 = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'country':
|
|
||||||
address.country = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'postal_code':
|
|
||||||
address.postal_code = component.long_name;
|
|
||||||
break;
|
|
||||||
// Add more cases as needed for other types
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Use address object as per your requirements
|
|
||||||
setPickCust({
|
|
||||||
...pickCust,
|
|
||||||
address: address.address,
|
|
||||||
doorno: `${address.street_number} ${address.route}`,
|
|
||||||
suburb: address.administrative_area_level_3,
|
|
||||||
city: address.locality,
|
|
||||||
state: address.administrative_area_level_1,
|
|
||||||
postcode: address.postal_code,
|
|
||||||
latitude: place.geometry.location.lat(),
|
|
||||||
longitude: place.geometry.location.lng()
|
|
||||||
});
|
|
||||||
logger.info('Pick Address:', address);
|
|
||||||
});
|
});
|
||||||
|
setStartPoint({ latitude: 0, longitude: 0 });
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
}, [inputValue2]);
|
const place = item.auxiliaryData;
|
||||||
|
logger.info('pick (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() });
|
||||||
|
setStartPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
|
||||||
|
setAddress(`${place.name} ${place.formatted_address}`);
|
||||||
|
const address = {
|
||||||
|
address: `${place.name} ${place.formatted_address}`,
|
||||||
|
street_number: '',
|
||||||
|
route: '',
|
||||||
|
locality: '',
|
||||||
|
sublocality_level_1: '',
|
||||||
|
administrative_area_level_3: '',
|
||||||
|
administrative_area_level_1: '',
|
||||||
|
country: '',
|
||||||
|
postal_code: ''
|
||||||
|
};
|
||||||
|
place.address_components.forEach((component) => {
|
||||||
|
component.types.forEach((type) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'street_number':
|
||||||
|
address.street_number = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'route':
|
||||||
|
address.route = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'locality':
|
||||||
|
address.locality = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'sublocality_level_1':
|
||||||
|
address.sublocality_level_1 = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'administrative_area_level_3':
|
||||||
|
address.administrative_area_level_3 = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'administrative_area_level_1':
|
||||||
|
address.administrative_area_level_1 = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'country':
|
||||||
|
address.country = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'postal_code':
|
||||||
|
address.postal_code = component.long_name;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
setPickCust({
|
||||||
|
...pickCust,
|
||||||
|
address: address.address,
|
||||||
|
doorno: `${address.street_number} ${address.route}`,
|
||||||
|
suburb: address.administrative_area_level_3,
|
||||||
|
city: address.locality,
|
||||||
|
state: address.administrative_area_level_1,
|
||||||
|
postcode: address.postal_code,
|
||||||
|
latitude: place.geometry.location.lat(),
|
||||||
|
longitude: place.geometry.location.lng()
|
||||||
|
});
|
||||||
|
logger.info('Pick Address:', address);
|
||||||
|
};
|
||||||
// ==================================================== || getapplocations || ====================================================
|
// ==================================================== || getapplocations || ====================================================
|
||||||
const getapplocations = async () => {
|
const getapplocations = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
@@ -147,12 +143,10 @@ const CreateCustomer = () => {
|
|||||||
.get(`${process.env.REACT_APP_URL}/utils/getapplocations/?applocationid=${appId}`)
|
.get(`${process.env.REACT_APP_URL}/utils/getapplocations/?applocationid=${appId}`)
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
logger.info('getapplocations', res);
|
logger.info('getapplocations', res);
|
||||||
const { latitude, longitude, radius } = res.data.details?.[0] || {};
|
const { latitude, longitude } = res.data.details?.[0] || {};
|
||||||
if (res.data.status) {
|
if (res.data.status) {
|
||||||
setAppLocaLat(latitude);
|
setAppLocaLat(latitude);
|
||||||
setAppLocaLng(longitude);
|
setAppLocaLng(longitude);
|
||||||
setAppLocaRadius(radius);
|
|
||||||
logger.info('radius', radius);
|
|
||||||
}
|
}
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
})
|
})
|
||||||
@@ -339,26 +333,15 @@ const CreateCustomer = () => {
|
|||||||
</FieldGrid>
|
</FieldGrid>
|
||||||
|
|
||||||
{/* ===================================================== || Address || ===================================================== */}
|
{/* ===================================================== || Address || ===================================================== */}
|
||||||
<TextInput
|
<Typeahead
|
||||||
label="Address"
|
label="Address"
|
||||||
id="addressAuto1"
|
|
||||||
width="100%"
|
width="100%"
|
||||||
hasClear
|
hasClear
|
||||||
value={inputValue2}
|
debounceMs={500}
|
||||||
onChange={(v) => {
|
placeholder="Search address"
|
||||||
setInputValue2(v);
|
searchSource={pickAddressSource}
|
||||||
if (!v) {
|
value={pickPlace}
|
||||||
setPickCust({
|
onChange={handlePickPlaceSelected}
|
||||||
...pickCust,
|
|
||||||
doorno: '',
|
|
||||||
suburb: '',
|
|
||||||
city: '',
|
|
||||||
postcode: '',
|
|
||||||
landmark: ''
|
|
||||||
});
|
|
||||||
setStartPoint({ latitude: 0, longitude: 0 });
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<FieldGrid>
|
<FieldGrid>
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useEffect, useState, useRef, Fragment } from 'react';
|
import { useEffect, useMemo, useState, useRef, Fragment } from 'react';
|
||||||
import { calculateDrivingDistance, calculateTotalCharge } from '../../../utils/distance';
|
import { calculateDrivingDistance, calculateTotalCharge } from '../../../utils/distance';
|
||||||
|
import { createAddressSearchSource } from '../../../utils/addressSearch';
|
||||||
import { FaPhoneAlt } from 'react-icons/fa';
|
import { FaPhoneAlt } from 'react-icons/fa';
|
||||||
import { GiDoorHandle } from 'react-icons/gi';
|
import { GiDoorHandle } from 'react-icons/gi';
|
||||||
import { FaLandmarkDome } from 'react-icons/fa6';
|
import { FaLandmarkDome } from 'react-icons/fa6';
|
||||||
@@ -9,7 +10,6 @@ import { MdLocationCity } from 'react-icons/md';
|
|||||||
import { TbMapPinCode } from 'react-icons/tb';
|
import { TbMapPinCode } from 'react-icons/tb';
|
||||||
import { FaLocationDot } from 'react-icons/fa6';
|
import { FaLocationDot } from 'react-icons/fa6';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import Geocode from 'react-geocode';
|
|
||||||
import Loader from 'components/Loader';
|
import Loader from 'components/Loader';
|
||||||
import { FaUser } from 'react-icons/fa6';
|
import { FaUser } from 'react-icons/fa6';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
@@ -26,6 +26,7 @@ import logger from 'utils/logger';
|
|||||||
// — this mirrors the "plain CSS grid" fallback already used by the sibling
|
// — this mirrors the "plain CSS grid" fallback already used by the sibling
|
||||||
// createCustomer.js `FieldGrid` helper.
|
// createCustomer.js `FieldGrid` helper.
|
||||||
import { TextInput } from '@astryxdesign/core/TextInput';
|
import { TextInput } from '@astryxdesign/core/TextInput';
|
||||||
|
import { Typeahead } from '@astryxdesign/core/Typeahead';
|
||||||
import { CheckboxInput } from '@astryxdesign/core/CheckboxInput';
|
import { CheckboxInput } from '@astryxdesign/core/CheckboxInput';
|
||||||
import { NumberInput } from '@astryxdesign/core/NumberInput';
|
import { NumberInput } from '@astryxdesign/core/NumberInput';
|
||||||
import { TextArea } from '@astryxdesign/core/TextArea';
|
import { TextArea } from '@astryxdesign/core/TextArea';
|
||||||
@@ -305,28 +306,58 @@ const SectionCard = ({ children, sx = {} }) => (
|
|||||||
</Paper>
|
</Paper>
|
||||||
);
|
);
|
||||||
|
|
||||||
function loadScript(src, position, id) {
|
// Parses a `toPlace`-shaped `address_components` array (see utils/addressSearch)
|
||||||
if (!position) {
|
// into the flat field set both the pickup and drop handlers below persist.
|
||||||
return;
|
const parseAddressComponents = (place) => {
|
||||||
}
|
const address = {
|
||||||
|
address: `${place.name} ${place.formatted_address}`,
|
||||||
const script = document.createElement('script');
|
street_number: '',
|
||||||
script.setAttribute('async', '');
|
route: '',
|
||||||
script.setAttribute('id', id);
|
locality: '',
|
||||||
script.src = src;
|
sublocality_level_1: '',
|
||||||
position.appendChild(script);
|
administrative_area_level_3: '',
|
||||||
}
|
administrative_area_level_1: '',
|
||||||
|
country: '',
|
||||||
|
postal_code: ''
|
||||||
|
};
|
||||||
|
place.address_components.forEach((component) => {
|
||||||
|
component.types.forEach((type) => {
|
||||||
|
switch (type) {
|
||||||
|
case 'street_number':
|
||||||
|
address.street_number = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'route':
|
||||||
|
address.route = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'locality':
|
||||||
|
address.locality = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'sublocality_level_1':
|
||||||
|
address.sublocality_level_1 = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'administrative_area_level_3':
|
||||||
|
address.administrative_area_level_3 = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'administrative_area_level_1':
|
||||||
|
address.administrative_area_level_1 = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'country':
|
||||||
|
address.country = component.long_name;
|
||||||
|
break;
|
||||||
|
case 'postal_code':
|
||||||
|
address.postal_code = component.long_name;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return address;
|
||||||
|
};
|
||||||
|
|
||||||
const Createorder1 = () => {
|
const Createorder1 = () => {
|
||||||
Geocode.setApiKey(process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
|
const [pickPlace, setPickPlace] = useState(null);
|
||||||
// ================================================= || GoogleMaps (Drawer) || =================================================
|
const [dropPlace, setDropPlace] = useState(null);
|
||||||
const [, setValue] = React.useState(null);
|
|
||||||
const [, setValue1] = React.useState(null);
|
|
||||||
const [inputValue2, setInputValue2] = React.useState('');
|
|
||||||
const [inputValue3, setInputValue3] = React.useState('');
|
|
||||||
const loaded = React.useRef(false);
|
|
||||||
const [, setAddress] = useState('');
|
|
||||||
const [, setAddress1] = useState('');
|
|
||||||
const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
|
const [tenanatLocoId, setTenanatLocoId] = useState(localStorage.getItem('locationid'));
|
||||||
const [isLocation, setIsLocation] = useState(false);
|
const [isLocation, setIsLocation] = useState(false);
|
||||||
const textFieldRef1 = useRef(null);
|
const textFieldRef1 = useRef(null);
|
||||||
@@ -334,226 +365,6 @@ const Createorder1 = () => {
|
|||||||
const [collectionamt, setCollectionamt] = useState(0);
|
const [collectionamt, setCollectionamt] = useState(0);
|
||||||
const [quantity, setQuantity] = useState(1);
|
const [quantity, setQuantity] = useState(1);
|
||||||
|
|
||||||
// // // ====================================================== || address (pick)|| ======================================================
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (address) {
|
|
||||||
// try {
|
|
||||||
// Geocode.fromAddress(address).then(
|
|
||||||
// (response) => {
|
|
||||||
// if (response.status == 'OK') {
|
|
||||||
// const { lat, lng } = response.results[0].geometry.location;
|
|
||||||
// logger.info({ lat, lng });
|
|
||||||
// setLatlong({
|
|
||||||
// lat,
|
|
||||||
// lng
|
|
||||||
// });
|
|
||||||
// logger.info(response);
|
|
||||||
// if (response.results[0].address_components) {
|
|
||||||
// let place = response.results[0];
|
|
||||||
// let cityA, zipcodeA, stateA, suburbA;
|
|
||||||
// for (let i = 0; i < place.address_components.length; i++) {
|
|
||||||
// for (let j = 0; j < place.address_components[i].types.length; j++) {
|
|
||||||
// switch (place.address_components[i].types[j]) {
|
|
||||||
// case 'locality':
|
|
||||||
// cityA = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// case 'administrative_area_level_1':
|
|
||||||
// stateA = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// case 'postal_code':
|
|
||||||
// zipcodeA = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// case 'sublocality':
|
|
||||||
// suburbA = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// setCity(cityA || '');
|
|
||||||
// setState(stateA || '');
|
|
||||||
// setZipcode(zipcodeA || '');
|
|
||||||
// setSuburb(suburbA || '');
|
|
||||||
// logger.info({ lat, lng, cityA, stateA, zipcodeA, suburbA });
|
|
||||||
// setPickCust({
|
|
||||||
// ...pickCust
|
|
||||||
// // city: cityA,
|
|
||||||
// // state: stateA,
|
|
||||||
// // postcode: zipcodeA,
|
|
||||||
// // suburb: suburbA
|
|
||||||
// // latitude: lat,
|
|
||||||
// // longitude: lng
|
|
||||||
// });
|
|
||||||
// // setStartPoint({ latitude: lat, longitude: lng });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// (error) => {
|
|
||||||
// logger.info(error);
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// } catch (err) {
|
|
||||||
// logger.error(err);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }, [address]);
|
|
||||||
// // // ====================================================== || address 1 (drop)|| ======================================================
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (address) {
|
|
||||||
// try {
|
|
||||||
// Geocode.fromAddress(address1).then(
|
|
||||||
// (response) => {
|
|
||||||
// if (response.status == 'OK') {
|
|
||||||
// const { lat, lng } = response.results[0].geometry.location;
|
|
||||||
|
|
||||||
// setLatlong1({
|
|
||||||
// lat,
|
|
||||||
// lng
|
|
||||||
// });
|
|
||||||
// logger.info(response);
|
|
||||||
// if (response.results[0].address_components) {
|
|
||||||
// let place = response.results[0];
|
|
||||||
// let cityB, zipcodeB, stateB, suburbB;
|
|
||||||
// for (let i = 0; i < place.address_components.length; i++) {
|
|
||||||
// for (let j = 0; j < place.address_components[i].types.length; j++) {
|
|
||||||
// switch (place.address_components[i].types[j]) {
|
|
||||||
// case 'locality':
|
|
||||||
// cityB = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// case 'administrative_area_level_1':
|
|
||||||
// stateB = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// case 'postal_code':
|
|
||||||
// zipcodeB = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// case 'sublocality':
|
|
||||||
// suburbB = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// setCity(cityB || '');
|
|
||||||
// setState(stateB || '');
|
|
||||||
// setZipcode(zipcodeB || '');
|
|
||||||
// setSuburb(suburbB || '');
|
|
||||||
// logger.info({ lat, lng, cityB, stateB, zipcodeB, suburbB });
|
|
||||||
// setDropCust({
|
|
||||||
// ...dropCust
|
|
||||||
// // city: cityB,
|
|
||||||
// // state: stateB,
|
|
||||||
// // postcode: zipcodeB,
|
|
||||||
// // suburb: suburbB
|
|
||||||
// // latitude: lat,
|
|
||||||
// // longitude: lng
|
|
||||||
// });
|
|
||||||
// // setEndPoint({ latitude: lat, longitude: lng });
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// (error) => {
|
|
||||||
// logger.info(error);
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
// } catch (err) {
|
|
||||||
// logger.error(err);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }, [address1]);
|
|
||||||
|
|
||||||
if (typeof window !== 'undefined' && !loaded.current) {
|
|
||||||
if (!document.querySelector('#google-maps')) {
|
|
||||||
loadScript(
|
|
||||||
`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}&libraries=places&location=10.3656,77.9690&radius=50000&components=country:IN&strictbounds=true`,
|
|
||||||
document.querySelector('head'),
|
|
||||||
'google-maps'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
loaded.current = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// const fetch = React.useMemo(
|
|
||||||
// () =>
|
|
||||||
// debounce((request, callback) => {
|
|
||||||
// autocompleteService.current.getPlacePredictions(request, callback);
|
|
||||||
// }, 400),
|
|
||||||
// []
|
|
||||||
// );
|
|
||||||
// const fetch1 = React.useMemo(
|
|
||||||
// () =>
|
|
||||||
// debounce((request, callback) => {
|
|
||||||
// autocompleteService.current.getPlacePredictions(request, callback);
|
|
||||||
// }, 400),
|
|
||||||
// []
|
|
||||||
// );
|
|
||||||
|
|
||||||
// ====================================================== || options (pick)|| ======================================================
|
|
||||||
|
|
||||||
// React.useEffect(() => {
|
|
||||||
// let active = true;
|
|
||||||
// if (!autocompleteService.current && window.google) {
|
|
||||||
// autocompleteService.current = new window.google.maps.places.AutocompleteService();
|
|
||||||
// }
|
|
||||||
// if (!autocompleteService.current) {
|
|
||||||
// return undefined;
|
|
||||||
// }
|
|
||||||
// if (inputValue === '') {
|
|
||||||
// setOptions(value ? [value] : []);
|
|
||||||
// return undefined;
|
|
||||||
// }
|
|
||||||
// fetch({ input: inputValue }, (results) => {
|
|
||||||
// if (active) {
|
|
||||||
// let newOptions = [];
|
|
||||||
|
|
||||||
// if (value) {
|
|
||||||
// newOptions = [value];
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (results) {
|
|
||||||
// newOptions = [...newOptions, ...results];
|
|
||||||
// }
|
|
||||||
|
|
||||||
// setOptions(newOptions);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// return () => {
|
|
||||||
// active = false;
|
|
||||||
// };
|
|
||||||
// }, [value, inputValue, fetch]);
|
|
||||||
|
|
||||||
// // ====================================================== || options1 (drop)|| ======================================================
|
|
||||||
// React.useEffect(() => {
|
|
||||||
// let active = true;
|
|
||||||
// if (!autocompleteService.current && window.google) {
|
|
||||||
// autocompleteService.current = new window.google.maps.places.AutocompleteService();
|
|
||||||
// }
|
|
||||||
// if (!autocompleteService.current) {
|
|
||||||
// return undefined;
|
|
||||||
// }
|
|
||||||
// if (inputValue1 === '') {
|
|
||||||
// setOptions1(value1 ? [value1] : []);
|
|
||||||
// return undefined;
|
|
||||||
// }
|
|
||||||
// fetch1({ input: inputValue1 }, (results) => {
|
|
||||||
// if (active) {
|
|
||||||
// let newOptions = [];
|
|
||||||
|
|
||||||
// if (value1) {
|
|
||||||
// newOptions = [value1];
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (results) {
|
|
||||||
// newOptions = [...newOptions, ...results];
|
|
||||||
// }
|
|
||||||
|
|
||||||
// setOptions1(newOptions);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// return () => {
|
|
||||||
// active = false;
|
|
||||||
// };
|
|
||||||
// }, [value1, inputValue1, fetch1]);
|
|
||||||
|
|
||||||
const appId = localStorage.getItem('applocationid');
|
const appId = localStorage.getItem('applocationid');
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [open4, setOpen4] = useState(false);
|
const [open4, setOpen4] = useState(false);
|
||||||
@@ -714,42 +525,6 @@ const Createorder1 = () => {
|
|||||||
}
|
}
|
||||||
}, [searchword]);
|
}, [searchword]);
|
||||||
|
|
||||||
// const { ref: materialRef } = usePlacesWidget({
|
|
||||||
// apiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
|
|
||||||
// onPlaceSelected: (place) => {
|
|
||||||
// logger.info(place);
|
|
||||||
|
|
||||||
// // setAddress(place.formatted_address)
|
|
||||||
// let city1, zipcode1, state1, suburb1;
|
|
||||||
// for (let i = 0; i < place.address_components.length; i++) {
|
|
||||||
// for (let j = 0; j < place.address_components[i].types.length; j++) {
|
|
||||||
// switch (place.address_components[i].types[j]) {
|
|
||||||
// case 'locality':
|
|
||||||
// city1 = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// case 'administrative_area_level_1':
|
|
||||||
// state1 = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// case 'postal_code':
|
|
||||||
// zipcode1 = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// case 'sublocality':
|
|
||||||
// suburb1 = place.address_components[i].long_name;
|
|
||||||
// break;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// // setCity(city1 || '')
|
|
||||||
// // setState(state1 || '');
|
|
||||||
// // setZipcode(zipcode1 || '');
|
|
||||||
// // setSuburb(suburb1 || '')
|
|
||||||
// },
|
|
||||||
|
|
||||||
// options: {
|
|
||||||
// types: ['address' || 'geocode']
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// ==================================================== || fetchtenantinfo || ====================================================
|
// ==================================================== || fetchtenantinfo || ====================================================
|
||||||
const fetchtenantinfo = async () => {
|
const fetchtenantinfo = async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
@@ -1097,174 +872,18 @@ const Createorder1 = () => {
|
|||||||
clientdetails();
|
clientdetails();
|
||||||
// clientdetailsbusiness();
|
// clientdetailsbusiness();
|
||||||
}, [searchCustList.length > 3, searchCustList == '']);
|
}, [searchCustList.length > 3, searchCustList == '']);
|
||||||
// ============================================= || Google Maps Autocomplete(pick) || =============================================
|
// ============================================= || Address search (pick/drop) || =============================================
|
||||||
useEffect(() => {
|
// Nominatim search sources, soft-biased toward the operator's zone once
|
||||||
// Initialize Google Maps Autocomplete
|
// fetchTiming() resolves appLocaLat/appLocaLng — replaces the Google Places
|
||||||
if (inputValue2) {
|
// Autocomplete bound to #addressAuto1 / #addressAuto2.
|
||||||
const autocompleteInput = document.getElementById('addressAuto1');
|
const pickAddressSource = useMemo(
|
||||||
const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, {
|
() => createAddressSearchSource({ bias: { lat: appLocaLat, lng: appLocaLng } }),
|
||||||
// types: ['(cities)'], // You can adjust the types parameter based on your requirements
|
[appLocaLat, appLocaLng]
|
||||||
strictBounds: true,
|
);
|
||||||
bounds: new window.google.maps.Circle({
|
const dropAddressSource = useMemo(
|
||||||
// center: new window.google.maps.LatLng(11.0050707, 76.9509083),
|
() => createAddressSearchSource({ bias: { lat: appLocaLat, lng: appLocaLng } }),
|
||||||
// radius: 100000
|
[appLocaLat, appLocaLng]
|
||||||
center: new window.google.maps.LatLng(appLocaLat, appLocaLng),
|
);
|
||||||
radius: appLocaRadius * 1000
|
|
||||||
}).getBounds()
|
|
||||||
});
|
|
||||||
// Event listener for autocomplete place changed
|
|
||||||
autocomplete.addListener('place_changed', () => {
|
|
||||||
const place = autocomplete.getPlace();
|
|
||||||
setInputValue2(`${place.name}, ${place.formatted_address}`);
|
|
||||||
logger.info('new place', place); // Do something with the selected place
|
|
||||||
logger.info(' pick (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place
|
|
||||||
// to trigger getDistance
|
|
||||||
setStartPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
|
|
||||||
setValue(place);
|
|
||||||
setAddress(`${place.name} ${place.formatted_address}`);
|
|
||||||
setPickCust({ ...pickCust, address: `${place.name} ${place.formatted_address}` });
|
|
||||||
const address = {
|
|
||||||
address: `${place.name} ${place.formatted_address}`,
|
|
||||||
street_number: '',
|
|
||||||
route: '',
|
|
||||||
locality: '',
|
|
||||||
sublocality_level_1: '',
|
|
||||||
administrative_area_level_3: '',
|
|
||||||
administrative_area_level_1: '',
|
|
||||||
country: '',
|
|
||||||
postal_code: ''
|
|
||||||
};
|
|
||||||
place.address_components.forEach((component) => {
|
|
||||||
component.types.forEach((type) => {
|
|
||||||
switch (type) {
|
|
||||||
case 'street_number':
|
|
||||||
address.street_number = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'route':
|
|
||||||
address.route = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'locality':
|
|
||||||
address.locality = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'sublocality_level_1':
|
|
||||||
address.sublocality_level_1 = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'administrative_area_level_3':
|
|
||||||
address.administrative_area_level_3 = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'administrative_area_level_1':
|
|
||||||
address.administrative_area_level_1 = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'country':
|
|
||||||
address.country = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'postal_code':
|
|
||||||
address.postal_code = component.long_name;
|
|
||||||
break;
|
|
||||||
// Add more cases as needed for other types
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Use address object as per your requirements
|
|
||||||
setPickCust({
|
|
||||||
...pickCust,
|
|
||||||
address: address.address,
|
|
||||||
doorno: `${address.street_number} ${address.route}`,
|
|
||||||
suburb: address.sublocality_level_1,
|
|
||||||
city: address.locality,
|
|
||||||
postcode: address.postal_code,
|
|
||||||
latitude: place.geometry.location.lat(),
|
|
||||||
longitude: place.geometry.location.lng()
|
|
||||||
});
|
|
||||||
logger.info('Pick Address:', address);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [inputValue2]);
|
|
||||||
// ============================================= || Google Maps Autocomplete(Drop) || =============================================
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (inputValue3) {
|
|
||||||
// Initialize Google Maps Autocomplete
|
|
||||||
const autocompleteInput = document.getElementById('addressAuto2');
|
|
||||||
const autocomplete = new window.google.maps.places.Autocomplete(autocompleteInput, {
|
|
||||||
// types: ['(cities)'], // You can adjust the types parameter based on your requirements
|
|
||||||
strictBounds: true,
|
|
||||||
bounds: new window.google.maps.Circle({
|
|
||||||
// center: new window.google.maps.LatLng(11.0050707, 76.9509083),
|
|
||||||
center: new window.google.maps.LatLng(appLocaLat, appLocaLng),
|
|
||||||
radius: appLocaRadius * 1000 //km to m
|
|
||||||
// radius: 100000 //km to m
|
|
||||||
}).getBounds()
|
|
||||||
});
|
|
||||||
// Event listener for autocomplete place changed
|
|
||||||
autocomplete.addListener('place_changed', () => {
|
|
||||||
const place = autocomplete.getPlace();
|
|
||||||
setInputValue3(`${place.name}, ${place.formatted_address}`);
|
|
||||||
logger.info('new place', place); // Do something with the selected place
|
|
||||||
logger.info('drop (new place) lat lng', { lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }); // Do something with the selected place
|
|
||||||
setEndPoint({ latitude: place.geometry.location.lat(), longitude: place.geometry.location.lng() });
|
|
||||||
setValue1(place);
|
|
||||||
setAddress1(`${place.name} ${place.formatted_address}`);
|
|
||||||
setDropCust({ ...dropCust, address: `${place.name} ${place.formatted_address}` });
|
|
||||||
const address = {
|
|
||||||
address: `${place.name} ${place.formatted_address}`,
|
|
||||||
street_number: '',
|
|
||||||
route: '',
|
|
||||||
locality: '',
|
|
||||||
sublocality_level_1: '',
|
|
||||||
administrative_area_level_3: '',
|
|
||||||
administrative_area_level_1: '',
|
|
||||||
country: '',
|
|
||||||
postal_code: ''
|
|
||||||
};
|
|
||||||
place.address_components.forEach((component) => {
|
|
||||||
component.types.forEach((type) => {
|
|
||||||
switch (type) {
|
|
||||||
case 'street_number':
|
|
||||||
address.street_number = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'route':
|
|
||||||
address.route = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'locality':
|
|
||||||
address.locality = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'sublocality_level_1':
|
|
||||||
address.sublocality_level_1 = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'administrative_area_level_3':
|
|
||||||
address.administrative_area_level_3 = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'administrative_area_level_1':
|
|
||||||
address.administrative_area_level_1 = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'country':
|
|
||||||
address.country = component.long_name;
|
|
||||||
break;
|
|
||||||
case 'postal_code':
|
|
||||||
address.postal_code = component.long_name;
|
|
||||||
break;
|
|
||||||
// Add more cases as needed for other types
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Use address object as per your requirements
|
|
||||||
setDropCust({
|
|
||||||
...dropCust,
|
|
||||||
address: address.address,
|
|
||||||
doorno: `${address.street_number} ${address.route}`,
|
|
||||||
suburb: address.sublocality_level_1,
|
|
||||||
city: address.locality,
|
|
||||||
postcode: address.postal_code,
|
|
||||||
latitude: place.geometry.location.lat(),
|
|
||||||
longitude: place.geometry.location.lng()
|
|
||||||
});
|
|
||||||
logger.info('Drop Address:', address);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}, [inputValue3]);
|
|
||||||
|
|
||||||
// ============================================= || gettenantlocations (branches) || =============================================
|
// ============================================= || gettenantlocations (branches) || =============================================
|
||||||
const gettenantlocations = async () => {
|
const gettenantlocations = async () => {
|
||||||
@@ -1427,7 +1046,7 @@ const Createorder1 = () => {
|
|||||||
setIsCustomerOpen(true);
|
setIsCustomerOpen(true);
|
||||||
setpickordrop(1);
|
setpickordrop(1);
|
||||||
setPickCust({});
|
setPickCust({});
|
||||||
setInputValue2('');
|
setPickPlace(null);
|
||||||
setSearchCustList('');
|
setSearchCustList('');
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
@@ -1492,16 +1111,19 @@ const Createorder1 = () => {
|
|||||||
<Stack spacing={1.25} sx={{ mt: 0 }}>
|
<Stack spacing={1.25} sx={{ mt: 0 }}>
|
||||||
{addId1 == 0 ? (
|
{addId1 == 0 ? (
|
||||||
<div>
|
<div>
|
||||||
<TextInput
|
<Typeahead
|
||||||
label="Address"
|
label="Address"
|
||||||
|
isLabelHidden
|
||||||
isDisabled={!isLocation}
|
isDisabled={!isLocation}
|
||||||
id="addressAuto1"
|
|
||||||
width="100%"
|
|
||||||
hasClear
|
hasClear
|
||||||
value={inputValue2}
|
width="100%"
|
||||||
onChange={(value) => {
|
placeholder="Search address"
|
||||||
setInputValue2(value);
|
debounceMs={500}
|
||||||
if (value === '') {
|
searchSource={pickAddressSource}
|
||||||
|
value={pickPlace}
|
||||||
|
onChange={(item) => {
|
||||||
|
setPickPlace(item);
|
||||||
|
if (!item) {
|
||||||
setPickCust({
|
setPickCust({
|
||||||
...pickCust,
|
...pickCust,
|
||||||
doorno: '',
|
doorno: '',
|
||||||
@@ -1512,7 +1134,29 @@ const Createorder1 = () => {
|
|||||||
});
|
});
|
||||||
setShowDistance(false);
|
setShowDistance(false);
|
||||||
setStartPoint({ latitude: 0, longitude: 0 });
|
setStartPoint({ latitude: 0, longitude: 0 });
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
const place = item.auxiliaryData;
|
||||||
|
logger.info('pick (new place) lat lng', {
|
||||||
|
lat: place.geometry.location.lat(),
|
||||||
|
lng: place.geometry.location.lng()
|
||||||
|
});
|
||||||
|
setStartPoint({
|
||||||
|
latitude: place.geometry.location.lat(),
|
||||||
|
longitude: place.geometry.location.lng()
|
||||||
|
});
|
||||||
|
const address = parseAddressComponents(place);
|
||||||
|
setPickCust({
|
||||||
|
...pickCust,
|
||||||
|
address: address.address,
|
||||||
|
doorno: `${address.street_number} ${address.route}`,
|
||||||
|
suburb: address.sublocality_level_1,
|
||||||
|
city: address.locality,
|
||||||
|
postcode: address.postal_code,
|
||||||
|
latitude: place.geometry.location.lat(),
|
||||||
|
longitude: place.geometry.location.lng()
|
||||||
|
});
|
||||||
|
logger.info('Pick Address:', address);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -1640,7 +1284,7 @@ const Createorder1 = () => {
|
|||||||
} else {
|
} else {
|
||||||
setIsCustomerOpen(true);
|
setIsCustomerOpen(true);
|
||||||
setpickordrop(2);
|
setpickordrop(2);
|
||||||
setInputValue3('');
|
setDropPlace(null);
|
||||||
setSearchCustList('');
|
setSearchCustList('');
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
@@ -1769,16 +1413,19 @@ const Createorder1 = () => {
|
|||||||
<Stack spacing={1.25} sx={{ mt: 0 }}>
|
<Stack spacing={1.25} sx={{ mt: 0 }}>
|
||||||
{addId2 == 0 ? (
|
{addId2 == 0 ? (
|
||||||
<div>
|
<div>
|
||||||
<TextInput
|
<Typeahead
|
||||||
id="addressAuto2"
|
|
||||||
isDisabled={!isLocation}
|
isDisabled={!isLocation}
|
||||||
label="Address"
|
label="Address"
|
||||||
width="100%"
|
isLabelHidden
|
||||||
hasClear
|
hasClear
|
||||||
value={inputValue3}
|
width="100%"
|
||||||
onChange={(value) => {
|
placeholder="Search address"
|
||||||
setInputValue3(value);
|
debounceMs={500}
|
||||||
if (value === '') {
|
searchSource={dropAddressSource}
|
||||||
|
value={dropPlace}
|
||||||
|
onChange={(item) => {
|
||||||
|
setDropPlace(item);
|
||||||
|
if (!item) {
|
||||||
setDropCust({
|
setDropCust({
|
||||||
...dropCust,
|
...dropCust,
|
||||||
doorno: '',
|
doorno: '',
|
||||||
@@ -1789,7 +1436,29 @@ const Createorder1 = () => {
|
|||||||
});
|
});
|
||||||
setShowDistance(false);
|
setShowDistance(false);
|
||||||
setEndPoint({ latitude: 0, longitude: 0 });
|
setEndPoint({ latitude: 0, longitude: 0 });
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
const place = item.auxiliaryData;
|
||||||
|
logger.info('drop (new place) lat lng', {
|
||||||
|
lat: place.geometry.location.lat(),
|
||||||
|
lng: place.geometry.location.lng()
|
||||||
|
});
|
||||||
|
setEndPoint({
|
||||||
|
latitude: place.geometry.location.lat(),
|
||||||
|
longitude: place.geometry.location.lng()
|
||||||
|
});
|
||||||
|
const address = parseAddressComponents(place);
|
||||||
|
setDropCust({
|
||||||
|
...dropCust,
|
||||||
|
address: address.address,
|
||||||
|
doorno: `${address.street_number} ${address.route}`,
|
||||||
|
suburb: address.sublocality_level_1,
|
||||||
|
city: address.locality,
|
||||||
|
postcode: address.postal_code,
|
||||||
|
latitude: place.geometry.location.lat(),
|
||||||
|
longitude: place.geometry.location.lng()
|
||||||
|
});
|
||||||
|
logger.info('Drop Address:', address);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,53 +0,0 @@
|
|||||||
import { LoadScriptNext, GoogleMap, Marker } from '@react-google-maps/api';
|
|
||||||
|
|
||||||
// distance function
|
|
||||||
function distance(lat1, lng1, lat2, lng2) {
|
|
||||||
const R = 6371;
|
|
||||||
const dLat = (lat2 - lat1) * (Math.PI / 180);
|
|
||||||
const dLng = (lng2 - lng1) * (Math.PI / 180);
|
|
||||||
|
|
||||||
const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * (Math.PI / 180)) * Math.cos(lat2 * (Math.PI / 180)) * Math.sin(dLng / 2) ** 2;
|
|
||||||
|
|
||||||
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
|
||||||
}
|
|
||||||
|
|
||||||
const containerStyle = {
|
|
||||||
width: '100%',
|
|
||||||
height: '300px'
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RidersPinPoint({ pickCust, dropCust }) {
|
|
||||||
// Ensure valid lat/lng
|
|
||||||
const center = pickCust?.latitude && pickCust?.longitude ? { lat: Number(pickCust.latitude), lng: Number(pickCust.longitude) } : null;
|
|
||||||
|
|
||||||
// If center missing, don't render map
|
|
||||||
if (!center) return null;
|
|
||||||
|
|
||||||
const sortedRiders = dropCust
|
|
||||||
?.map((r) => ({
|
|
||||||
...r,
|
|
||||||
distance: distance(center.lat, center.lng, Number(r.latitude), Number(r.longitude))
|
|
||||||
}))
|
|
||||||
.sort((a, b) => a.distance - b.distance);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LoadScriptNext googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
|
|
||||||
<GoogleMap mapContainerStyle={containerStyle} zoom={11} center={center}>
|
|
||||||
<Marker position={center} icon={{ url: 'http://maps.google.com/mapfiles/ms/icons/purple-dot.png' }} />
|
|
||||||
|
|
||||||
{sortedRiders?.map((r, index) => (
|
|
||||||
<Marker
|
|
||||||
key={index}
|
|
||||||
position={{ lat: Number(r.latitude), lng: Number(r.longitude) }}
|
|
||||||
label={{
|
|
||||||
text: (index + 1).toString(),
|
|
||||||
color: 'white',
|
|
||||||
fontSize: '14px',
|
|
||||||
fontWeight: 'bold'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</GoogleMap>
|
|
||||||
</LoadScriptNext>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,4 +1,6 @@
|
|||||||
import { LoadScriptNext, GoogleMap, Marker, OverlayView } from '@react-google-maps/api';
|
import { MapContainer, TileLayer, Marker, Tooltip } from 'react-leaflet';
|
||||||
|
import L from 'leaflet';
|
||||||
|
import 'leaflet/dist/leaflet.css';
|
||||||
|
|
||||||
import logger from 'utils/logger';
|
import logger from 'utils/logger';
|
||||||
import { DT, tint } from 'themes/dt/tokens';
|
import { DT, tint } from 'themes/dt/tokens';
|
||||||
@@ -11,106 +13,81 @@ const containerStyle = {
|
|||||||
const C_ACTIVE = '#10b981';
|
const C_ACTIVE = '#10b981';
|
||||||
const C_INACTIVE = '#ef4444';
|
const C_INACTIVE = '#ef4444';
|
||||||
|
|
||||||
|
const GreenIcon = new L.Icon({
|
||||||
|
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
|
||||||
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
});
|
||||||
|
|
||||||
|
const RedIcon = new L.Icon({
|
||||||
|
iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
|
||||||
|
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
|
||||||
|
iconSize: [25, 41],
|
||||||
|
iconAnchor: [12, 41],
|
||||||
|
shadowSize: [41, 41]
|
||||||
|
});
|
||||||
|
|
||||||
export default function RiderLocationMap({ riderLocations }) {
|
export default function RiderLocationMap({ riderLocations }) {
|
||||||
logger.info('riderLocations', riderLocations);
|
logger.info('riderLocations', riderLocations);
|
||||||
|
|
||||||
const center = {
|
const center = [Number(riderLocations?.[0]?.latitude || 11.0056), Number(riderLocations?.[0]?.longitude || 76.9661)];
|
||||||
lat: Number(riderLocations?.[0]?.latitude || 11.0056),
|
|
||||||
lng: Number(riderLocations?.[0]?.longitude || 76.9661)
|
|
||||||
};
|
|
||||||
const GreenIcon = {
|
|
||||||
url: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
|
|
||||||
scaledSize: new window.google.maps.Size(25, 41),
|
|
||||||
anchor: new window.google.maps.Point(12, 41)
|
|
||||||
};
|
|
||||||
|
|
||||||
const RedIcon = {
|
|
||||||
url: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
|
|
||||||
scaledSize: new window.google.maps.Size(25, 41),
|
|
||||||
anchor: new window.google.maps.Point(12, 41)
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<LoadScriptNext googleMapsApiKey={process.env.REACT_APP_GOOGLE_MAPS_API_KEY}>
|
<MapContainer center={center} zoom={12} style={containerStyle}>
|
||||||
<GoogleMap mapContainerStyle={containerStyle} zoom={12} center={center}>
|
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="© OpenStreetMap contributors" />
|
||||||
{riderLocations &&
|
{riderLocations &&
|
||||||
riderLocations?.map((r, index) => {
|
riderLocations.map((r, index) => {
|
||||||
const lat = Number(r.latitude);
|
const lat = Number(r.latitude);
|
||||||
const lng = Number(r.longitude);
|
const lng = Number(r.longitude);
|
||||||
const isActive = r.status == 'active';
|
const isActive = r.status == 'active';
|
||||||
const statusColor = isActive ? C_ACTIVE : C_INACTIVE;
|
const statusColor = isActive ? C_ACTIVE : C_INACTIVE;
|
||||||
return (
|
return (
|
||||||
<div key={index}>
|
<Marker key={index} position={[lat, lng]} icon={isActive ? GreenIcon : RedIcon}>
|
||||||
{/* Marker */}
|
{/* Rider details card — permanent tooltip floats just above the pin */}
|
||||||
<Marker position={{ lat, lng }} icon={isActive ? GreenIcon : RedIcon} />
|
<Tooltip permanent direction="top" offset={[0, -38]} opacity={1} className="rider-location-tooltip">
|
||||||
{/* Rider details card — floats just above the pin, doesn't cover it */}
|
<div
|
||||||
<OverlayView position={{ lat, lng }} mapPaneName={OverlayView.OVERLAY_LAYER}>
|
style={{
|
||||||
<div
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 6,
|
||||||
|
padding: '6px 10px',
|
||||||
|
borderRadius: DT.radiusInner,
|
||||||
|
backgroundColor: DT.surface,
|
||||||
|
whiteSpace: 'nowrap'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
style={{
|
style={{
|
||||||
transform: 'translate(-50%, -100%)',
|
width: 7,
|
||||||
marginTop: -46,
|
height: 7,
|
||||||
pointerEvents: 'none',
|
borderRadius: '50%',
|
||||||
display: 'flex',
|
backgroundColor: statusColor,
|
||||||
flexDirection: 'column',
|
boxShadow: `0 0 0 3px ${tint(statusColor)}`,
|
||||||
alignItems: 'center'
|
flexShrink: 0
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
<div
|
<span style={{ fontSize: 12, fontWeight: 700, color: DT.textPrimary }}>{r.username}</span>
|
||||||
|
{r.orderid && (
|
||||||
|
<span
|
||||||
style={{
|
style={{
|
||||||
display: 'flex',
|
fontSize: 10.5,
|
||||||
alignItems: 'center',
|
fontWeight: 700,
|
||||||
gap: 6,
|
color: DT.brand,
|
||||||
padding: '6px 10px',
|
backgroundColor: tint(DT.brand),
|
||||||
borderRadius: DT.radiusInner,
|
padding: '1px 6px',
|
||||||
backgroundColor: DT.surface,
|
borderRadius: DT.radiusPill
|
||||||
border: `1px solid ${DT.borderSubtle}`,
|
|
||||||
boxShadow: DT.shadowPop,
|
|
||||||
whiteSpace: 'nowrap'
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span
|
#{r.orderid}
|
||||||
style={{
|
</span>
|
||||||
width: 7,
|
)}
|
||||||
height: 7,
|
</div>
|
||||||
borderRadius: '50%',
|
</Tooltip>
|
||||||
backgroundColor: statusColor,
|
</Marker>
|
||||||
boxShadow: `0 0 0 3px ${tint(statusColor)}`,
|
);
|
||||||
flexShrink: 0
|
})}
|
||||||
}}
|
</MapContainer>
|
||||||
/>
|
|
||||||
<span style={{ fontSize: 12, fontWeight: 700, color: DT.textPrimary }}>{r.username}</span>
|
|
||||||
{r.orderid && (
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
fontSize: 10.5,
|
|
||||||
fontWeight: 700,
|
|
||||||
color: DT.brand,
|
|
||||||
backgroundColor: tint(DT.brand),
|
|
||||||
padding: '1px 6px',
|
|
||||||
borderRadius: DT.radiusPill
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
#{r.orderid}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{/* Pointer connecting the card to the marker below it */}
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
width: 0,
|
|
||||||
height: 0,
|
|
||||||
borderLeft: '5px solid transparent',
|
|
||||||
borderRight: '5px solid transparent',
|
|
||||||
borderTop: `6px solid ${DT.surface}`,
|
|
||||||
filter: 'drop-shadow(0 1px 1px rgba(15, 23, 42, 0.08))'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</OverlayView>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</GoogleMap>
|
|
||||||
</LoadScriptNext>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
90
src/utils/addressSearch.js
Normal file
90
src/utils/addressSearch.js
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
// Free OSM Nominatim geocoder — replaces Google Places Autocomplete /
|
||||||
|
// react-geocode across the console. No API key required. Nominatim's usage
|
||||||
|
// policy caps the public endpoint at ~1 req/sec; Astryx's `Typeahead`
|
||||||
|
// debounces queries internally (see `debounceMs` at each call site) and
|
||||||
|
// `createAddressSearchSource` aborts any still-in-flight request whenever a
|
||||||
|
// newer query supersedes it.
|
||||||
|
const NOMINATIM_SEARCH_URL = 'https://nominatim.openstreetmap.org/search';
|
||||||
|
|
||||||
|
// Builds a Google-Places-shaped `address_components` array (each entry
|
||||||
|
// `{ long_name, short_name, types: [] }`) from Nominatim's flat `address`
|
||||||
|
// object, so existing call sites' `place.address_components.forEach(...)`
|
||||||
|
// type-switch parsing keeps working unchanged.
|
||||||
|
const buildAddressComponents = (addr = {}) => {
|
||||||
|
const components = [];
|
||||||
|
const push = (longName, types) => {
|
||||||
|
if (longName) components.push({ long_name: longName, short_name: longName, types });
|
||||||
|
};
|
||||||
|
push(addr.house_number, ['street_number']);
|
||||||
|
push(addr.road || addr.pedestrian, ['route']);
|
||||||
|
push(addr.suburb || addr.neighbourhood || addr.quarter, ['sublocality_level_1', 'sublocality']);
|
||||||
|
push(addr.city_district || addr.county, ['administrative_area_level_3']);
|
||||||
|
push(addr.city || addr.town || addr.village, ['locality']);
|
||||||
|
push(addr.state, ['administrative_area_level_1']);
|
||||||
|
push(addr.country, ['country']);
|
||||||
|
push(addr.postcode, ['postal_code']);
|
||||||
|
return components;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Shapes a Nominatim result close enough to a Google Places `place` object
|
||||||
|
// (name, formatted_address, geometry.location.lat()/lng(), address_components)
|
||||||
|
// that call sites only needed mechanical edits, not rewrites, when swapping
|
||||||
|
// off Google.
|
||||||
|
export const toPlace = (result) => ({
|
||||||
|
formatted_address: result.display_name,
|
||||||
|
name: result.display_name?.split(',')[0] || '',
|
||||||
|
geometry: {
|
||||||
|
location: {
|
||||||
|
lat: () => parseFloat(result.lat),
|
||||||
|
lng: () => parseFloat(result.lon)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
address_components: buildAddressComponents(result.address)
|
||||||
|
});
|
||||||
|
|
||||||
|
const buildParams = (query, bias) => {
|
||||||
|
const params = new URLSearchParams({ q: query, format: 'json', addressdetails: '1', limit: '5' });
|
||||||
|
if (bias?.lat && bias?.lng) {
|
||||||
|
const d = 0.5; // ~55km box around the operator's zone — soft bias, not a hard filter
|
||||||
|
params.set('viewbox', `${bias.lng - d},${bias.lat + d},${bias.lng + d},${bias.lat - d}`);
|
||||||
|
}
|
||||||
|
return params;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Builds a `SearchSource` for Astryx's `<Typeahead searchSource={...} />` —
|
||||||
|
// each result is `{ id, label, auxiliaryData }` where `auxiliaryData` is the
|
||||||
|
// `toPlace`-shaped object call sites parse via `address_components`.
|
||||||
|
export function createAddressSearchSource({ bias } = {}) {
|
||||||
|
let controller = null;
|
||||||
|
return {
|
||||||
|
async search(query) {
|
||||||
|
if (!query) return [];
|
||||||
|
controller?.abort();
|
||||||
|
controller = new AbortController();
|
||||||
|
try {
|
||||||
|
const params = buildParams(query, bias);
|
||||||
|
const res = await fetch(`${NOMINATIM_SEARCH_URL}?${params.toString()}`, {
|
||||||
|
headers: { Accept: 'application/json' },
|
||||||
|
signal: controller.signal
|
||||||
|
});
|
||||||
|
if (!res.ok) return [];
|
||||||
|
const results = await res.json();
|
||||||
|
return (results || []).map((result) => ({
|
||||||
|
id: String(result.place_id),
|
||||||
|
label: result.display_name,
|
||||||
|
auxiliaryData: toPlace(result)
|
||||||
|
}));
|
||||||
|
} catch (err) {
|
||||||
|
if (err.name === 'AbortError') return [];
|
||||||
|
console.error('address search error:', err);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
bootstrap() {
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
cancel() {
|
||||||
|
controller?.abort();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
85
yarn.lock
85
yarn.lock
@@ -1408,19 +1408,6 @@
|
|||||||
intl-messageformat "10.7.18"
|
intl-messageformat "10.7.18"
|
||||||
tslib "^2.8.0"
|
tslib "^2.8.0"
|
||||||
|
|
||||||
"@googlemaps/js-api-loader@1.16.8":
|
|
||||||
version "1.16.8"
|
|
||||||
resolved "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.8.tgz"
|
|
||||||
integrity sha512-CROqqwfKotdO6EBjZO/gQGVTbeDps5V7Mt9+8+5Q+jTg5CRMi3Ii/L9PmV3USROrt2uWxtGzJHORmByxyo9pSQ==
|
|
||||||
|
|
||||||
"@googlemaps/markerclusterer@2.5.3":
|
|
||||||
version "2.5.3"
|
|
||||||
resolved "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz"
|
|
||||||
integrity sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==
|
|
||||||
dependencies:
|
|
||||||
fast-deep-equal "^3.1.3"
|
|
||||||
supercluster "^8.0.1"
|
|
||||||
|
|
||||||
"@humanwhocodes/config-array@^0.11.8":
|
"@humanwhocodes/config-array@^0.11.8":
|
||||||
version "0.11.8"
|
version "0.11.8"
|
||||||
resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz"
|
resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz"
|
||||||
@@ -1837,28 +1824,6 @@
|
|||||||
resolved "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz"
|
resolved "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz"
|
||||||
integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==
|
integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==
|
||||||
|
|
||||||
"@react-google-maps/api@^2.20.7":
|
|
||||||
version "2.20.7"
|
|
||||||
resolved "https://registry.npmjs.org/@react-google-maps/api/-/api-2.20.7.tgz"
|
|
||||||
integrity sha512-ys7uri3V6gjhYZUI43srHzSKDC6/jiKTwHNlwXFTvjeaJE3M3OaYBt9FZKvJs8qnOhL6i6nD1BKJoi1KrnkCkg==
|
|
||||||
dependencies:
|
|
||||||
"@googlemaps/js-api-loader" "1.16.8"
|
|
||||||
"@googlemaps/markerclusterer" "2.5.3"
|
|
||||||
"@react-google-maps/infobox" "2.20.0"
|
|
||||||
"@react-google-maps/marker-clusterer" "2.20.0"
|
|
||||||
"@types/google.maps" "3.58.1"
|
|
||||||
invariant "2.2.4"
|
|
||||||
|
|
||||||
"@react-google-maps/infobox@2.20.0":
|
|
||||||
version "2.20.0"
|
|
||||||
resolved "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.20.0.tgz"
|
|
||||||
integrity sha512-03PJHjohhaVLkX6+NHhlr8CIlvUxWaXhryqDjyaZ8iIqqix/nV8GFdz9O3m5OsjtxtNho09F/15j14yV0nuyLQ==
|
|
||||||
|
|
||||||
"@react-google-maps/marker-clusterer@2.20.0":
|
|
||||||
version "2.20.0"
|
|
||||||
resolved "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.20.0.tgz"
|
|
||||||
integrity sha512-tieX9Va5w1yP88vMgfH1pHTacDQ9TgDTjox3tLlisKDXRQWdjw+QeVVghhf5XqqIxXHgPdcGwBvKY6UP+SIvLw==
|
|
||||||
|
|
||||||
"@react-leaflet/core@^3.0.0":
|
"@react-leaflet/core@^3.0.0":
|
||||||
version "3.0.0"
|
version "3.0.0"
|
||||||
resolved "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz"
|
resolved "https://registry.npmjs.org/@react-leaflet/core/-/core-3.0.0.tgz"
|
||||||
@@ -2314,11 +2279,6 @@
|
|||||||
"@types/qs" "*"
|
"@types/qs" "*"
|
||||||
"@types/serve-static" "*"
|
"@types/serve-static" "*"
|
||||||
|
|
||||||
"@types/google.maps@3.58.1":
|
|
||||||
version "3.58.1"
|
|
||||||
resolved "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.58.1.tgz"
|
|
||||||
integrity sha512-X9QTSvGJ0nCfMzYOnaVs/k6/4L+7F5uCS+4iUmkLEls6J9S/Phv+m/i3mDeyc49ZBgwab3EFO1HEoBY7k98EGQ==
|
|
||||||
|
|
||||||
"@types/graceful-fs@^4.1.2":
|
"@types/graceful-fs@^4.1.2":
|
||||||
version "4.1.5"
|
version "4.1.5"
|
||||||
resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
|
resolved "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz"
|
||||||
@@ -3148,13 +3108,6 @@ autoprefixer@^10.4.11:
|
|||||||
picocolors "^1.0.0"
|
picocolors "^1.0.0"
|
||||||
postcss-value-parser "^4.2.0"
|
postcss-value-parser "^4.2.0"
|
||||||
|
|
||||||
autosuggest-highlight@^3.3.4:
|
|
||||||
version "3.3.4"
|
|
||||||
resolved "https://registry.npmjs.org/autosuggest-highlight/-/autosuggest-highlight-3.3.4.tgz"
|
|
||||||
integrity sha512-j6RETBD2xYnrVcoV1S5R4t3WxOlWZKyDQjkwnggDPSjF5L4jV98ZltBpvPvbkM1HtoSe5o+bNrTHyjPbieGeYA==
|
|
||||||
dependencies:
|
|
||||||
remove-accents "^0.4.2"
|
|
||||||
|
|
||||||
available-typed-arrays@^1.0.5:
|
available-typed-arrays@^1.0.5:
|
||||||
version "1.0.5"
|
version "1.0.5"
|
||||||
resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz"
|
resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz"
|
||||||
@@ -6098,7 +6051,7 @@ intl-messageformat@10.7.18:
|
|||||||
"@formatjs/icu-messageformat-parser" "2.11.4"
|
"@formatjs/icu-messageformat-parser" "2.11.4"
|
||||||
tslib "^2.8.0"
|
tslib "^2.8.0"
|
||||||
|
|
||||||
invariant@^2.2.4, invariant@2.2.4:
|
invariant@^2.2.4:
|
||||||
version "2.2.4"
|
version "2.2.4"
|
||||||
resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
|
resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
|
||||||
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
|
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
|
||||||
@@ -7061,11 +7014,6 @@ jwt-decode@^3.1.2:
|
|||||||
resolved "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz"
|
resolved "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz"
|
||||||
integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
|
integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
|
||||||
|
|
||||||
kdbush@^4.0.2:
|
|
||||||
version "4.0.2"
|
|
||||||
resolved "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz"
|
|
||||||
integrity sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==
|
|
||||||
|
|
||||||
kind-of@^6.0.2:
|
kind-of@^6.0.2:
|
||||||
version "6.0.3"
|
version "6.0.3"
|
||||||
resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
|
resolved "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz"
|
||||||
@@ -8517,7 +8465,7 @@ prompts@^2.0.1, prompts@^2.4.2:
|
|||||||
kleur "^3.0.3"
|
kleur "^3.0.3"
|
||||||
sisteransi "^1.0.5"
|
sisteransi "^1.0.5"
|
||||||
|
|
||||||
prop-types@^15.5.0, prop-types@^15.8.1:
|
prop-types@^15.8.1:
|
||||||
version "15.8.1"
|
version "15.8.1"
|
||||||
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
|
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
|
||||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||||
@@ -9080,21 +9028,6 @@ react-fast-compare@^2.0.1:
|
|||||||
resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz"
|
resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz"
|
||||||
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
|
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
|
||||||
|
|
||||||
react-geocode@^0.2.3:
|
|
||||||
version "0.2.3"
|
|
||||||
resolved "https://registry.npmjs.org/react-geocode/-/react-geocode-0.2.3.tgz"
|
|
||||||
integrity sha512-sIpbgmn1IUzAxO4haOZ6jeeFnMD8ya9PC38yiNrmJ9vPWbvAO2D/2yfCBzZjGZVUm4PRzKAc0KghXfaEnug0TQ==
|
|
||||||
dependencies:
|
|
||||||
regenerator-runtime "^0.13.3"
|
|
||||||
|
|
||||||
react-google-autocomplete@^2.7.3:
|
|
||||||
version "2.7.3"
|
|
||||||
resolved "https://registry.npmjs.org/react-google-autocomplete/-/react-google-autocomplete-2.7.3.tgz"
|
|
||||||
integrity sha512-Nm+7/VDe7/NDWb8p/a39is7ktNqt5bNqAOoQv2Ev/XkuEvjsRk08VAPFmXUH03xKuM8IUuDrk2Lwfge44YEj6Q==
|
|
||||||
dependencies:
|
|
||||||
lodash.debounce "^4.0.8"
|
|
||||||
prop-types "^15.5.0"
|
|
||||||
|
|
||||||
react-icons@^4.12.0:
|
react-icons@^4.12.0:
|
||||||
version "4.12.0"
|
version "4.12.0"
|
||||||
resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz"
|
resolved "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz"
|
||||||
@@ -9355,7 +9288,7 @@ regenerate@^1.4.2:
|
|||||||
resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz"
|
resolved "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz"
|
||||||
integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
|
integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
|
||||||
|
|
||||||
regenerator-runtime@^0.13.3, regenerator-runtime@^0.13.9:
|
regenerator-runtime@^0.13.9:
|
||||||
version "0.13.11"
|
version "0.13.11"
|
||||||
resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"
|
resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz"
|
||||||
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
|
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
|
||||||
@@ -9408,11 +9341,6 @@ relateurl@^0.2.7:
|
|||||||
resolved "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz"
|
resolved "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz"
|
||||||
integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
|
integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
|
||||||
|
|
||||||
remove-accents@^0.4.2:
|
|
||||||
version "0.4.4"
|
|
||||||
resolved "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.4.tgz"
|
|
||||||
integrity sha512-EpFcOa/ISetVHEXqu+VwI96KZBmq+a8LJnGkaeFw45epGlxIZz5dhEEnNZMsQXgORu3qaMoLX4qJCzOik6ytAg==
|
|
||||||
|
|
||||||
renderkid@^3.0.0:
|
renderkid@^3.0.0:
|
||||||
version "3.0.0"
|
version "3.0.0"
|
||||||
resolved "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz"
|
resolved "https://registry.npmjs.org/renderkid/-/renderkid-3.0.0.tgz"
|
||||||
@@ -10150,13 +10078,6 @@ stylis@^4.0.13:
|
|||||||
resolved "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz"
|
resolved "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz"
|
||||||
integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
|
integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
|
||||||
|
|
||||||
supercluster@^8.0.1:
|
|
||||||
version "8.0.1"
|
|
||||||
resolved "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz"
|
|
||||||
integrity sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==
|
|
||||||
dependencies:
|
|
||||||
kdbush "^4.0.2"
|
|
||||||
|
|
||||||
supports-color@^5.3.0:
|
supports-color@^5.3.0:
|
||||||
version "5.5.0"
|
version "5.5.0"
|
||||||
resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
|
resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
|
||||||
|
|||||||
Reference in New Issue
Block a user