From ec1877b76e6437a2c6681a009f5c1c08c69b8105 Mon Sep 17 00:00:00 2001 From: Chris Short <13677134+devcshort@users.noreply.github.com> Date: Wed, 6 Dec 2023 14:23:48 -0800 Subject: [PATCH] Add new feature for promting user for location when non given and getting directions --- .../molecules/LocationAutocomplete.tsx | 33 +++++++++++++++++-- .../client/components/molecules/Result.tsx | 16 ++++----- .../organisms/modals/UpdateLocation.tsx | 30 +++++++++-------- packages/client/public/locales/ar/common.json | 5 ++- packages/client/public/locales/en/common.json | 5 ++- packages/client/public/locales/es/common.json | 5 ++- packages/client/public/locales/ne/common.json | 5 ++- packages/client/public/locales/so/common.json | 5 ++- packages/client/public/locales/vi/common.json | 5 ++- 9 files changed, 79 insertions(+), 30 deletions(-) diff --git a/packages/client/components/molecules/LocationAutocomplete.tsx b/packages/client/components/molecules/LocationAutocomplete.tsx index 754c87ee..426faa00 100644 --- a/packages/client/components/molecules/LocationAutocomplete.tsx +++ b/packages/client/components/molecules/LocationAutocomplete.tsx @@ -23,16 +23,34 @@ import { import { useTranslation } from 'next-i18next'; import { useAppConfig } from '../../lib/hooks/useAppConfig'; import { usePrevUrl } from '../../lib/hooks/usePrevUrl'; +import { create } from 'zustand'; type Props = Partial & RefAttributes & { defaultCoords?: string }; +type LocationStore = { + location: string; + coords: string; + setLocation: (location: string) => void; + setCoords: (coords: string) => void; +}; +export const useLocationStore = create((set) => ({ + location: '', + coords: '', + setLocation: (location: string) => set({ location }), + setCoords: (coords: string) => set({ coords }), +})); + export function LocationAutocomplete(props: Props) { const theme = useMantineTheme(); const appConfig = useAppConfig(); const prevUrl = usePrevUrl(); const [isLoading, toggle] = useToggle([false, true]); - const [value, setValue] = useInputState(props?.defaultValue ?? ''); + const { + location: value, + setLocation: setValue, + setCoords, + } = useLocationStore(); const [debounced] = useDebouncedValue(value, 200); const [suggestions, setSuggestions] = useState([]); const hiddenInputRef = useRef(null); @@ -42,6 +60,7 @@ export function LocationAutocomplete(props: Props) { const handleItemSubmit = (e: any) => { if (hiddenInputRef.current) { setCookie(null, USER_PREF_COORDS, e.coordinates, { path: '/' }); + setCoords(e.coordinates); hiddenInputRef.current.value = e.coordinates; } }; @@ -69,6 +88,7 @@ export function LocationAutocomplete(props: Props) { setCookie(null, USER_PREF_LOCATION, data.address, { path: '/' }); if (hiddenInputRef.current) { setCookie(null, USER_PREF_COORDS, `${lng},${lat}`, { path: '/' }); + setCoords(`${lng},${lat}`); hiddenInputRef.current.value = `${lng},${lat}`; } } catch (err) { @@ -82,7 +102,7 @@ export function LocationAutocomplete(props: Props) { toggle(false); }, - [setValue, toggle, t] + [setValue, toggle, t, setCoords] ); const getUserLocation = useCallback(() => { @@ -135,6 +155,12 @@ export function LocationAutocomplete(props: Props) { })(); }, [debounced, t]); + useEffect(() => { + if (props.defaultValue) { + setValue(props.defaultValue); + } + }, [props.defaultValue, setValue]); + useEffect(() => { function routeChangeCompleteHandler(e: any) { const prevQuery = prevUrl?.split('?')[1]; @@ -155,6 +181,7 @@ export function LocationAutocomplete(props: Props) { if (hiddenInputRef.current) { hiddenInputRef.current.value = newCoords || ''; + setCoords(newCoords || ''); } } } @@ -164,7 +191,7 @@ export function LocationAutocomplete(props: Props) { return () => { router.events.off('routeChangeComplete', routeChangeCompleteHandler); }; - }, [router.events, value, setValue, prevUrl]); + }, [router.events, value, setValue, prevUrl, setCoords]); return ( <> diff --git a/packages/client/components/molecules/Result.tsx b/packages/client/components/molecules/Result.tsx index db641c1c..1d58336e 100644 --- a/packages/client/components/molecules/Result.tsx +++ b/packages/client/components/molecules/Result.tsx @@ -58,14 +58,14 @@ export function Result(props: Props) { const handleDirectionsClick = (e: any) => { const coords = props?.location?.coordinates ? props?.coordinates : null; if (coords?.length === 0) { - // e.preventDefault(); - // openContextModal({ - // modal: 'update-location', - // centered: true, - // innerProps: { - // serviceAtLocationId: props.id, - // }, - // }); + e.preventDefault(); + openContextModal({ + modal: 'update-location', + centered: true, + innerProps: { + location: props.location, + }, + }); } }; diff --git a/packages/client/components/organisms/modals/UpdateLocation.tsx b/packages/client/components/organisms/modals/UpdateLocation.tsx index 5fb3c32c..c0d220df 100644 --- a/packages/client/components/organisms/modals/UpdateLocation.tsx +++ b/packages/client/components/organisms/modals/UpdateLocation.tsx @@ -1,17 +1,21 @@ import { Button, Group, Text } from '@mantine/core'; import { ContextModalProps } from '@mantine/modals'; import { useTranslation } from 'next-i18next'; -import { LocationAutocomplete } from '../../molecules/LocationAutocomplete'; +import { + LocationAutocomplete, + useLocationStore, +} from '../../molecules/LocationAutocomplete'; import { ReferralButton } from '../../atoms/ReferralButton'; -type Props = ContextModalProps; +type Props = ContextModalProps<{ location: { coordinates: string } }>; export function UpdateLocation(props: Props) { const { t } = useTranslation('common'); + const coords = useLocationStore((state) => state.coords); return ( <> - What's your starting location? + {t('update_location.prompt_start_location')} @@ -22,25 +26,25 @@ export function UpdateLocation(props: Props) { > {t('call_to_action.cancel')} - {/* } - onClick={handleDirectionsClick} > {t('call_to_action.get_directions')} - */} + ); diff --git a/packages/client/public/locales/ar/common.json b/packages/client/public/locales/ar/common.json index 019c1736..641d30cd 100644 --- a/packages/client/public/locales/ar/common.json +++ b/packages/client/public/locales/ar/common.json @@ -117,7 +117,10 @@ "sms_send_failed_title": "فشل إرسال الرسائل القصيرة", "sms_send_failed_body": "فشل إرسال رسالتك." }, - "prompt_auth": "الرجاء تسجيل الدخول لاستخدام هذه الميزة." + "prompt_auth": "الرجاء تسجيل الدخول لاستخدام هذه الميزة.", + "update_location": { + "prompt_start_location": "ما هو موقع انطلاقك؟" + } }, "data_providers": { "provided_by": "البيانات المقدمة من" diff --git a/packages/client/public/locales/en/common.json b/packages/client/public/locales/en/common.json index 9f577b12..dd46e919 100644 --- a/packages/client/public/locales/en/common.json +++ b/packages/client/public/locales/en/common.json @@ -117,7 +117,10 @@ "sms_send_failed_title": "SMS send failed", "sms_send_failed_body": "Your message failed to send." }, - "prompt_auth": "Please login to use this feature." + "prompt_auth": "Please login to use this feature.", + "update_location": { + "prompt_start_location": "What's your starting location?" + } }, "data_providers": { "provided_by": "Data provided by" diff --git a/packages/client/public/locales/es/common.json b/packages/client/public/locales/es/common.json index 4a3f33aa..521ec9f4 100644 --- a/packages/client/public/locales/es/common.json +++ b/packages/client/public/locales/es/common.json @@ -117,7 +117,10 @@ "sms_send_failed_title": "Envío de SMS fallido", "sms_send_failed_body": "Su mensaje no se pudo enviar." }, - "prompt_auth": "Inicia sesión para utilizar esta función." + "prompt_auth": "Inicia sesión para utilizar esta función.", + "update_location": { + "prompt_start_location": "¿Cuál es tu punto de partida?" + } }, "data_providers": { "provided_by": "Datos proporcionados por" diff --git a/packages/client/public/locales/ne/common.json b/packages/client/public/locales/ne/common.json index b902dd22..cf852f1b 100644 --- a/packages/client/public/locales/ne/common.json +++ b/packages/client/public/locales/ne/common.json @@ -117,7 +117,10 @@ "sms_send_failed_title": "SMS पठाउन सकिएन", "sms_send_failed_body": "तपाईंको सन्देश पठाउन असफल भयो।" }, - "prompt_auth": "कृपया यो सुविधा प्रयोग गर्न लगइन गर्नुहोस्।" + "prompt_auth": "कृपया यो सुविधा प्रयोग गर्न लगइन गर्नुहोस्।", + "update_location": { + "prompt_start_location": "तपाईंको प्रारम्भिक स्थान के हो?" + } }, "data_providers": { "provided_by": "द्वारा प्रदान गरिएको डाटा" diff --git a/packages/client/public/locales/so/common.json b/packages/client/public/locales/so/common.json index 40764ab9..9dcf161b 100644 --- a/packages/client/public/locales/so/common.json +++ b/packages/client/public/locales/so/common.json @@ -117,7 +117,10 @@ "sms_send_failed_title": "Diritaanka SMS waa guul daraystay", "sms_send_failed_body": "Fariintaadu waa ku guul daraystay in ay dirto" }, - "prompt_auth": "Fadlan gal si aad u isticmaasho sifadan" + "prompt_auth": "Fadlan gal si aad u isticmaasho sifadan", + "update_location": { + "prompt_start_location": "Waa maxay goobtaadu?" + } }, "data_providers": { "provided_by": "Xogta ay bixiyeen" diff --git a/packages/client/public/locales/vi/common.json b/packages/client/public/locales/vi/common.json index 84309bc4..aaee3997 100644 --- a/packages/client/public/locales/vi/common.json +++ b/packages/client/public/locales/vi/common.json @@ -117,7 +117,10 @@ "sms_send_failed_title": "Gửi tin nhắn SMS không thành công", "sms_send_failed_body": "Tin nhắn của bạn không gửi được." }, - "prompt_auth": "Vui lòng đăng nhập để sử dụng tính năng này." + "prompt_auth": "Vui lòng đăng nhập để sử dụng tính năng này.", + "update_location": { + "prompt_start_location": "Vị trí xuất phát của bạn là gì?" + } }, "data_providers": { "provided_by": "Dữ liệu được cung cấp bởi"