ordering-ui-react-native 0.12.79 → 0.12.80

package/themes/original/src/components/MessageListing/index.tsx

@@ -0,0 +1,298 @@
+import React, { useState, useEffect } from 'react'
+import { OrderList, useLanguage, useOrder, ToastType, useToast } from 'ordering-components/native'
+import { OrderDetails as OrderDetailsConTableoller } from './naked'
+import { useTheme } from 'styled-components/native';
+import { useFocusEffect } from '@react-navigation/native'
+import { OText, OModal } from '../shared'
+import { NotFoundSource } from '../NotFoundSource'
+import { ActiveOrders } from '../ActiveOrders'
+import { Messages } from '../Messages';
+import NavBar from '../NavBar'
+import {
+	MessageListingParams,
+	OrdersOptionParams
+} from '../../types'
+import {
+	Placeholder,
+	PlaceholderLine,
+	Fade
+} from "rn-placeholder";
+import { View, BackHandler } from 'react-native'
+import {
+	MessageListingWrapper,
+	MessageContainer
+} from './styles';
+
+const OrdersOptionUI = (props: OrdersOptionParams) => {
+	const {
+		navigation,
+		activeOrders,
+		orderList,
+		pagination,
+		titleContent,
+		customArray,
+		onNavigationRedirect,
+		orderStatus,
+		loadMoreOrders,
+		loadOrders,
+		setSelectedOrderId,
+		setOrderList,
+		setOpenMessges
+	} = props
+
+	const theme = useTheme();
+	const [, t] = useLanguage()
+	const [, { reorder }] = useOrder()
+	const { showToast } = useToast()
+	const { loading, error, orders: values } = orderList
+	const imageFails = activeOrders
+		? theme.images.general.emptyActiveOrders
+		: theme.images.general.emptyPastOrders
+	const orders = customArray || values || []
+
+	const getOrderStatus = (s: string) => {
+		const status = parseInt(s)
+		const orderStatus = [
+			{ key: 0, value: t('PENDING', 'Pending') },
+			{ key: 1, value: t('COMPLETED', 'Completed') },
+			{ key: 2, value: t('REJECTED', 'Rejected') },
+			{ key: 3, value: t('DRIVER_IN_BUSINESS', 'Driver in business') },
+			{ key: 4, value: t('PREPARATION_COMPLETED', 'Preparation Completed') },
+			{ key: 5, value: t('REJECTED_BY_BUSINESS', 'Rejected by business') },
+			{ key: 6, value: t('REJECTED_BY_DRIVER', 'Rejected by Driver') },
+			{ key: 7, value: t('ACCEPTED_BY_BUSINESS', 'Accepted by business') },
+			{ key: 8, value: t('ACCEPTED_BY_DRIVER', 'Accepted by driver') },
+			{ key: 9, value: t('PICK_UP_COMPLETED_BY_DRIVER', 'Pick up completed by driver') },
+			{ key: 10, value: t('PICK_UP_FAILED_BY_DRIVER', 'Pick up Failed by driver') },
+			{ key: 11, value: t('DELIVERY_COMPLETED_BY_DRIVER', 'Delivery completed by driver') },
+			{ key: 12, value: t('DELIVERY_FAILED_BY_DRIVER', 'Delivery Failed by driver') },
+			{ key: 13, value: t('PREORDER', 'PreOrder') },
+			{ key: 14, value: t('ORDER_NOT_READY', 'Order not ready') },
+			{ key: 15, value: t('ORDER_PICKEDUP_COMPLETED_BY_CUSTOMER', 'Order picked up completed by customer') },
+			{ key: 16, value: t('CANCELLED_BY_CUSTOMER', 'Cancelled by customer') },
+			{ key: 17, value: t('ORDER_NOT_PICKEDUP_BY_CUSTOMER', 'Order not picked up by customer') },
+			{ key: 18, value: t('DRIVER_ALMOST_ARRIVED_TO_BUSINESS', 'Driver almost arrived to business') },
+			{ key: 19, value: t('DRIVER_ALMOST_ARRIVED_TO_CUSTOMER', 'Driver almost arrived to customer') },
+			{ key: 20, value: t('ORDER_CUSTOMER_ALMOST_ARRIVED_BUSINESS', 'Customer almost arrived to business') },
+			{ key: 21, value: t('ORDER_CUSTOMER_ARRIVED_BUSINESS', 'Customer arrived to business') }
+		]
+
+		const objectStatus = orderStatus.find((o) => o.key === status)
+
+		return objectStatus && objectStatus
+	}
+
+	const handleClickOrder = (uuid: string) => {
+		setSelectedOrderId(uuid)
+		setOpenMessges(true)
+	}
+
+	useFocusEffect(
+		React.useCallback(() => {
+			loadOrders()
+		}, [navigation])
+	)
+
+	useEffect(() => {
+		if (loading) return
+		setOrderList(orderList)
+	}, [orderList, loading])
+
+	return (
+		<>
+			{!loading && orders.length === 0 && (
+				<NotFoundSource
+					content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+					image={imageFails}
+					conditioned
+				/>
+			)}
+			{loading && (
+				<View style={{ marginTop: 30 }}>
+					{[...Array(6)].map((item, i) => (
+						<Placeholder key={i} Animation={Fade}>
+							<View style={{ width: '100%', flexDirection: 'row' }}>
+								<PlaceholderLine width={20} height={70} style={{ marginRight: 20, marginBottom: 20 }} />
+								<Placeholder>
+									<PlaceholderLine width={30} style={{ marginTop: 5 }} />
+									<PlaceholderLine width={50} />
+									<PlaceholderLine width={20} />
+								</Placeholder>
+							</View>
+						</Placeholder>
+					))}
+				</View>
+			)}
+			{!loading && !error && orders.length > 0 && (
+				<ActiveOrders
+					orders={orders.filter((order: any) => orderStatus.includes(order.status))}
+					pagination={pagination}
+					loadMoreOrders={loadMoreOrders}
+					customArray={customArray}
+					getOrderStatus={getOrderStatus}
+					onNavigationRedirect={onNavigationRedirect}
+					isMessageView
+					handleClickOrder={handleClickOrder}
+				/>
+			)}
+		</>
+	)
+}
+
+const OrderMessageUI = (props: any) => {
+	const {
+		navigation,
+		messages,
+		setMessages,
+		readMessages,
+		messagesReadList,
+		setOpenMessges
+	} = props;
+	const [openModalForBusiness, setOpenModalForBusiness] = useState(false);
+	const [openModalForDriver, setOpenModalForDriver] = useState(false);
+	const [unreadAlert, setUnreadAlert] = useState({
+		business: false,
+		driver: false,
+	});
+	const [, t] = useLanguage()
+	const { order } = props.order;
+	const handleArrowBack: any = () => {
+		navigation.navigate('BottomTab');
+	};
+
+	const handleClose = () => {
+		setOpenMessges(false)
+	}
+
+	useEffect(() => {
+		if (messagesReadList?.length) {
+			openModalForBusiness
+				? setUnreadAlert({ ...unreadAlert, business: false })
+				: setUnreadAlert({ ...unreadAlert, driver: false });
+		}
+	}, [messagesReadList]);
+
+	useEffect(() => {
+		setOpenModalForBusiness(true);
+		setOpenModalForDriver(true);
+		readMessages && readMessages();
+	}, [order])
+
+	useEffect(() => {
+		BackHandler.addEventListener('hardwareBackPress', handleArrowBack);
+		return () => {
+			BackHandler.removeEventListener('hardwareBackPress', handleArrowBack);
+		};
+	}, []);
+
+	return (
+		<>
+			{(order?.business && !order?.driver) && (
+				<Messages
+					orderId={order?.id}
+					messages={messages}
+					order={order}
+					setMessages={setMessages}
+					readMessages={readMessages}
+					isMeesageListing
+					onClose={() => handleClose()}
+				/>
+			)}
+		</>
+
+	)
+}
+
+export const OrderListing = (props: OrdersOptionParams) => {
+	const OrderListingProps = {
+		...props,
+		UIComponent: OrdersOptionUI,
+		orderStatus: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
+		useDefualtSessionManager: true,
+		paginationSettings: {
+			initialPage: 1,
+			pageSize: 10,
+			controlType: 'infinity'
+		}
+	}
+	return <OrderList {...OrderListingProps} />
+}
+
+export const MessagesView = (props: any) => {
+	const orderDetailsProps = {
+		...props,
+		UIComponent: OrderMessageUI,
+	};
+	return <OrderDetailsConTableoller {...orderDetailsProps} />;
+};
+
+
+export const MessageListing = (props: MessageListingParams) => {
+	const {
+		navigation
+	} = props
+	const [orderListStatus, setOrderListStatus] = useState({
+		error: null,
+		loading: false,
+		orders: []
+	})
+	const [selectedOrderId, setSelectedOrderId] = useState(null)
+	const [seletedOrder, setSeletedOrder] = useState<any>()
+	const [openMessages, setOpenMessges] = useState(false)
+	const [, t] = useLanguage()
+
+	const goToBack = () => {
+		navigation?.canGoBack() && navigation.goBack()
+		setSelectedOrderId(null)
+		setSeletedOrder([])
+	}
+
+	const handleCloseModal = () => {
+		setOpenMessges(false)
+	}
+
+	useEffect(() => {
+		if (!orderListStatus?.loading && selectedOrderId) {
+			const _orders = orderListStatus?.orders
+			const _seletedOrder = _orders.find((order: any) => order?.uuid === selectedOrderId)
+			setSeletedOrder(_seletedOrder)
+		}
+	}, [orderListStatus, selectedOrderId])
+
+	useEffect(() => {
+
+	}, [orderListStatus])
+
+	return (
+		<MessageListingWrapper>
+			<NavBar
+				title={t('MESSAGES', 'Messages')}
+				titleAlign={'center'}
+				onActionLeft={goToBack}
+				showCall={false}
+				paddingTop={10}
+				btnStyle={{ paddingLeft: 0 }}
+			/>
+			<OrderListing
+				ordersLength={{ activeOrdersLength: 0, previousOrdersLength: 0 }}
+				setSelectedOrderId={setSelectedOrderId}
+				setOrderList={setOrderListStatus}
+				setOpenMessges={setOpenMessges}
+			/>
+			{openMessages && seletedOrder && (
+				<OModal
+					open={openMessages}
+					entireModal
+					customClose
+					onClose={() => handleCloseModal()}
+				>
+					<MessagesView
+						order={seletedOrder}
+						setOpenMessges={setOpenMessges}
+					/>
+				</OModal>
+			)}
+		</MessageListingWrapper>
+	)
+}
+

package/themes/original/src/components/MessageListing/styles.tsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components/native'
+
+export const MessageListingWrapper = styled.View`
+  position: relative;
+`
+
+export const MessageContainer = styled.View`
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+`
+
+

package/themes/original/src/components/Messages/index.tsx

@@ -7,13 +7,12 @@ import { USER_TYPE } from '../../config/constants'
 import MaterialCommunityIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { OIcon, OIconButton, OText, OButton } from '../shared'
 import { TouchableOpacity, ActivityIndicator, StyleSheet, View, Platform, Keyboard } from 'react-native'
-import { Header, TitleHeader, Wrapper, QuickMessageContainer } from './styles'
+import { Header, TitleHeader, Wrapper, QuickMessageContainer, ProfileMessageHeader } from './styles'
 import { MessagesParams } from '../../types'
 import { useWindowDimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
 const MessagesUI = (props: MessagesParams) => {
-
 	const {
 		type,
 		order,
@@ -27,6 +26,7 @@ const MessagesUI = (props: MessagesParams) => {
 		setImage,
 		readMessages,
 		onClose,
+		isMeesageListing
 	} = props
 
 	const [{ user }] = useSession()
@@ -37,22 +37,22 @@ const MessagesUI = (props: MessagesParams) => {
 	const [formattedMessages, setFormattedMessages] = useState<Array<any>>([])
 	const [isKeyboardShow, setIsKeyboardShow] = useState(false)
 	const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
-  const chatDisabled = previousStatus.includes(order?.status)
+	const chatDisabled = previousStatus.includes(order?.status)
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
 	const theme = useTheme();
 
 	const quickMessageList = [
-    { key: 'customer_message_1', text: t('CUSTOMER_MESSAGE_1', 'Lorem ipsum 1') },
-    { key: 'customer_message_2', text: t('CUSTOMER_MESSAGE_2', 'Lorem ipsum 2') },
-    { key: 'customer_message_3', text: t('CUSTOMER_MESSAGE_3', 'Lorem ipsum 3') },
-    { key: 'customer_message_4', text: t('CUSTOMER_MESSAGE_4', 'Lorem ipsum 4') }
-  ]
+		{ key: 'customer_message_1', text: t('CUSTOMER_MESSAGE_1', 'Lorem ipsum 1') },
+		{ key: 'customer_message_2', text: t('CUSTOMER_MESSAGE_2', 'Lorem ipsum 2') },
+		{ key: 'customer_message_3', text: t('CUSTOMER_MESSAGE_3', 'Lorem ipsum 3') },
+		{ key: 'customer_message_4', text: t('CUSTOMER_MESSAGE_4', 'Lorem ipsum 4') }
+	]
 
-  const handleClickQuickMessage = (text: string) => {
-    setMessage && setMessage(`${message}${text}`)
-  }
+	const handleClickQuickMessage = (text: string) => {
+		setMessage && setMessage(`${message}${text}`)
+	}
 
 	const onChangeMessage = (val: string) => {
 		setMessage && setMessage(val)
@@ -239,37 +239,37 @@ const MessagesUI = (props: MessagesParams) => {
 	}
 
 	const renderAccessory = () => {
-    return (
-      <QuickMessageContainer
-        style={{
-          marginLeft: 10,
-          marginBottom: 10
-        }}
-        contentContainerStyle={{
-          alignItems: 'center',
-        }}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-      >
-        {quickMessageList.map((quickMessage, i) => (
-          <OButton
-            key={i}
-            text={quickMessage.text}
-            bgColor='#E9ECEF'
-            borderColor='#E9ECEF'
-            imgRightSrc={null}
-            textStyle={{
-              fontSize: 11,
-              lineHeight: 16,
-              color: '#414954'
-            }}
-            style={{ ...styles.editButton }}
-            onClick={() => handleClickQuickMessage(quickMessage.text)}
-          />
-        ))}
-      </QuickMessageContainer>
-    )
-  }
+		return (
+			<QuickMessageContainer
+				style={{
+					marginLeft: 10,
+					marginBottom: 10
+				}}
+				contentContainerStyle={{
+					alignItems: 'center',
+				}}
+				horizontal
+				showsHorizontalScrollIndicator={false}
+			>
+				{quickMessageList.map((quickMessage, i) => (
+					<OButton
+						key={i}
+						text={quickMessage.text}
+						bgColor='#E9ECEF'
+						borderColor='#E9ECEF'
+						imgRightSrc={null}
+						textStyle={{
+							fontSize: 11,
+							lineHeight: 16,
+							color: '#414954'
+						}}
+						style={{ ...styles.editButton }}
+						onClick={() => handleClickQuickMessage(quickMessage.text)}
+					/>
+				))}
+			</QuickMessageContainer>
+		)
+	}
 
 	const renderInputToolbar = (props: typeof InputToolbarProps) => (
 		<InputToolbar
@@ -285,20 +285,20 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const renderComposer = (props: typeof ComposerProps) => (
 		chatDisabled ? (
-      <View
-        style={{
-          width: '100%',
-          flexDirection: 'column',
-          alignItems: 'center'
-        }}
-      >
-        <MaterialCommunityIcon
-          name='close-octagon-outline'
-          size={24}
-        />
-        <OText size={14}>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</OText>
-      </View>
-    ) : (
+			<View
+				style={{
+					width: '100%',
+					flexDirection: 'column',
+					alignItems: 'center'
+				}}
+			>
+				<MaterialCommunityIcon
+					name='close-octagon-outline'
+					size={24}
+				/>
+				<OText size={14}>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</OText>
+			</View>
+		) : (
 			<View style={{
 				flexDirection: 'row', width: '80%', alignItems: 'center', backgroundColor: theme.colors.backgroundGray100,
 				borderRadius: 7.6,
@@ -387,7 +387,7 @@ const MessagesUI = (props: MessagesParams) => {
 
 	const getViewHeight = () => {
 		if (Platform.OS === 'android') {
-			return height - top - bottom - (isKeyboardShow ? 270 : 24);
+			return height - top - bottom - (isKeyboardShow ? 300 : 24);
 		} else {
 			return height - top - bottom - 10;
 		}
@@ -396,21 +396,53 @@ const MessagesUI = (props: MessagesParams) => {
 	return (
 		<View style={{ height: getViewHeight(), width: '100%', paddingTop: 12, backgroundColor: 'white' }}>
 			<Wrapper>
-				<Header>
-					<OIconButton icon={theme.images.general.arrow_left} style={{ paddingStart: 10, borderColor: theme.colors.clear }} onClick={onClose} />
-					<View style={{ marginRight: 10, shadowColor: theme.colors.black, shadowOpacity: 0.1, shadowOffset: { width: 0, height: 1 }, shadowRadius: 2 }}>
-						<OIcon
-							url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
-							width={32}
-							height={32}
-							style={{ borderRadius: 7.6 }}
-						/>
-					</View>
-					<TitleHeader>
-						<OText size={14} lineHeight={21} weight={'600'}>{type === USER_TYPE.DRIVER ? order?.driver?.name : order?.business?.name}</OText>
-						<OText size={12} color={theme.colors.textSecondary}>{type === USER_TYPE.DRIVER ? t('DRIVER', 'Driver') : t('BUSINESS', 'Business')}</OText>
-					</TitleHeader>
-				</Header>
+				{!isMeesageListing ? (
+					<Header>
+						<OIconButton icon={theme.images.general.arrow_left} style={{ paddingStart: 10, borderColor: theme.colors.clear }} onClick={onClose} />
+						<View style={{ marginRight: 10, shadowColor: theme.colors.black, shadowOpacity: 0.1, shadowOffset: { width: 0, height: 1 }, shadowRadius: 2 }}>
+							<OIcon
+								url={type === USER_TYPE.DRIVER ? order?.driver?.photo : order?.business?.logo}
+								width={32}
+								height={32}
+								style={{ borderRadius: 7.6 }}
+							/>
+						</View>
+						<TitleHeader>
+							<OText size={14} lineHeight={21} weight={'600'}>{type === USER_TYPE.DRIVER ? order?.driver?.name : order?.business?.name}</OText>
+							<OText size={12} color={theme.colors.textSecondary}>{type === USER_TYPE.DRIVER ? t('DRIVER', 'Driver') : t('BUSINESS', 'Business')}</OText>
+						</TitleHeader>
+					</Header>
+				) : (
+					<ProfileMessageHeader>
+						<View style={{ ...styles.headerTitle }}>
+							<TouchableOpacity
+								style={styles.headerItem}
+								onPress={onClose}>
+								<OIcon src={theme.images.general.arrow_left} width={16} />
+							</TouchableOpacity>
+							<OText size={18}>{t('ORDER', theme?.defaultLanguages?.ORDER || 'Order')} #{order?.id}</OText>
+						</View>
+						<View>
+							{order.business && (
+								<OIcon
+									url={order?.business?.logo}
+									width={32}
+									height={32}
+									style={{ borderRadius: 7.6 }}
+								/>
+							)}
+
+							{order?.driver && (
+								<OIcon
+									url={order?.driver?.photo}
+									width={32}
+									height={32}
+									style={{ borderRadius: 7.6 }}
+								/>
+							)}
+						</View>
+					</ProfileMessageHeader>
+				)}
 				<GiftedChat
 					messages={formattedMessages}
 					user={{
@@ -460,15 +492,25 @@ const styles = StyleSheet.create({
 		justifyContent: 'center',
 		marginHorizontal: 4
 	},
-  editButton : {
-    borderRadius: 50,
-    backgroundColor: '#E9ECEF',
-    marginRight: 10,
-    height: 24,
-    borderWidth: 1,
-    paddingLeft: 0,
-    paddingRight: 0
-  }
+	editButton: {
+		borderRadius: 50,
+		backgroundColor: '#E9ECEF',
+		marginRight: 10,
+		height: 24,
+		borderWidth: 1,
+		paddingLeft: 0,
+		paddingRight: 0
+	},
+	headerTitle: {
+		flexDirection: 'row',
+		alignItems: 'center'
+	},
+	headerItem: {
+		overflow: 'hidden',
+		width: 35,
+		marginVertical: 18,
+	}
+
 })
 
 export const Messages = (props: MessagesParams) => {

package/themes/original/src/components/Messages/styles.tsx

@@ -17,3 +17,11 @@ export const Header = styled.View`
 export const TitleHeader = styled.View``
 
 export const QuickMessageContainer = styled.ScrollView``
+
+export const ProfileMessageHeader = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0px;
+  padding-horizontal: 20px;
+`

package/themes/original/src/components/UserProfile/index.tsx

@@ -13,6 +13,7 @@ import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { ProfileParams } from '../../types';
 import { LogoutButton } from '../LogoutButton'
 import { LanguageSelector } from '../LanguageSelector'
+import MessageCircle from 'react-native-vector-icons/AntDesign'
 
 import {
 	OIcon,
@@ -78,6 +79,11 @@ const ProfileListUI = (props: ProfileParams) => {
 		pagePadding: {
 			paddingLeft: 40,
 			paddingRight: 40
+		},
+		messageIconStyle: {
+			fontSize: 18,
+			fontWeight: 'bold',
+            marginEnd: 14
 		}
 	});
 
@@ -150,6 +156,10 @@ const ProfileListUI = (props: ProfileParams) => {
 						<OIcon src={theme.images.general.pin} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MY_SAVED_PLACES', 'My saved places')}</OText>
 					</ListItem>
+					<ListItem onPress={() => onRedirect('Messages', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+						<MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MESSAGES', 'Messages')}</OText>
+					</ListItem>
 					<ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>

package/themes/original/src/utils/index.tsx

@@ -177,4 +177,22 @@ export const getTypesText = (value: number) => {
  */
  export const convertToRadian = (value: number) => {
   return value * Math.PI / 180
+}
+
+/**
+ * Function to distance between two locations
+ * @param lat1 Lat for first location
+ * @param lon1 Lon for first location
+ * @param lat2 Lat for second location
+ * @param lon2 Lon for second location
+ */
+export const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
+  const R = 6371 // km
+  const dLat = convertToRadian(lat2 - lat1)
+  const dLon = convertToRadian(lon2 - lon1)
+  const curLat1 = convertToRadian(lat1)
+  const curLat2 = convertToRadian(lat2)
+  const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.sin(dLon / 2) * Math.sin(dLon / 2) * Math.cos(curLat1) * Math.cos(curLat2)
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a))
+  return R * c
 }