ordering-ui-react-native 0.12.77 → 0.12.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.77",
+  "version": "0.12.81",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/BusinessesListing/index.tsx

@@ -1,6 +1,7 @@
-import React, {useEffect} from 'react'
+import React, { useEffect, useState} from 'react'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { View, StyleSheet, ScrollView, Platform, PanResponder, I18nManager } from 'react-native'
+import Geolocation from '@react-native-community/geolocation'
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import {
   BusinessList as BusinessesListingController,
@@ -13,7 +14,7 @@ import {
   useToast
 } from 'ordering-components/native'
 
-import { WelcomeTitle, Search, OrderControlContainer, AddressInput, WrapMomentOption } from './styles'
+import { WelcomeTitle, Search, OrderControlContainer, AddressInput, WrapMomentOption, FarAwayMessage } from './styles'
 
 import NavBar from '../NavBar'
 import { SearchBar } from '../SearchBar'
@@ -24,6 +25,8 @@ import { BusinessTypeFilter } from '../BusinessTypeFilter'
 import { BusinessController } from '../BusinessController'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { useTheme } from 'styled-components/native'
+import { getDistance } from '../../utils'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 const PIXELS_TO_SCROLL = 1200
 
@@ -68,7 +71,16 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
       borderColor: theme.colors.backgroundGray,
       borderWidth: 1,
       borderRadius: 10,
-    }
+    },
+    iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+		farAwayMsg: {
+			paddingVertical: 6,
+			paddingHorizontal: 20
+		}
   })
 
   const [, t] = useLanguage()
@@ -79,6 +91,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
   const [, {showToast}] = useToast()
   const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
   const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
+	const [isFarAway, setIsFarAway] = useState(false)
 
   const handleScroll = ({ nativeEvent }: any) => {
     const y = nativeEvent.contentOffset.y
@@ -91,6 +104,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
     }
   }
 
+  useEffect(() => {
+		Geolocation.getCurrentPosition((pos) => {
+      const crd = pos.coords
+      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+      if (distance > 20) setIsFarAway(true)
+			else setIsFarAway(false)
+    }, (err) => {
+      console.log(`ERROR(${err.code}): ${err.message}`)
+    }, {
+      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+    })
+  }, [orderState?.options?.address?.location])
+
   return (
     <ScrollView style={styles.container} onScroll={(e: any) => handleScroll(e)}>
       {!auth && (
@@ -162,6 +188,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
             {orderState?.options?.address?.address}
           </OText>
         </AddressInput>
+        {isFarAway && (
+					<FarAwayMessage style={styles.farAwayMsg}>
+						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+					</FarAwayMessage>
+				)}
       </OrderControlContainer>
       <BusinessTypeFilter
         images={props.images}

package/src/components/BusinessesListing/styles.tsx

@@ -48,3 +48,13 @@ export const WrapMomentOption = styled.TouchableOpacity`
   padding: 15px 20px;
   max-width: 240px;
 `
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  margin-top: 15px;
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+  width: 100%;
+`

package/src/components/Checkout/index.tsx

@@ -116,13 +116,13 @@ const CheckoutUI = (props: any) => {
   const [validationFields] = useValidationFields();
   const [ordering] = useApi()
   const webviewRef = useRef<any>(null)
-
+  const webviewRefSquare = useRef<any>(null)
   const [errorCash, setErrorCash] = useState(false);
   const [userErrors, setUserErrors] = useState<any>([]);
   const [isUserDetailsEdit, setIsUserDetailsEdit] = useState(false);
   const [phoneUpdate, setPhoneUpdate] = useState(false);
   const [showGateway, setShowGateway] = useState<any>({ closedByUsed: false, open: false });
-  const [paypalMethod, setPaypalMethod] = useState<any>(null)
+  const [webviewPaymethod, setWebviewPaymethod] = useState<any>(null)
   const [progClr, setProgClr] = useState('#424242');
   const [prog, setProg] = useState(true);
   const [openOrderCreating, setOpenOrderCreating] = useState(false)
@@ -183,7 +183,7 @@ const CheckoutUI = (props: any) => {
   }
 
   const onMessage = (e: any) => {
-    if (e?.nativeEvent?.data) {
+    if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
       let payment = JSON.parse(e.nativeEvent.data);
 
       if (payment === 'api error') {
@@ -213,7 +213,7 @@ const CheckoutUI = (props: any) => {
 
   const handlePaymentMethodClick = (paymethod: any) => {
     setShowGateway({ closedByUser: false, open: true })
-    setPaypalMethod(paymethod)
+    setWebviewPaymethod(paymethod)
   }
 
   const handleCloseWebview = () => {
@@ -570,7 +570,7 @@ const CheckoutUI = (props: any) => {
           </>
         </>
       )}
-      {paypalMethod && showGateway.open && (
+      {webviewPaymethod?.gateway === 'paypal' && showGateway.open && (
         <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
           <Icon
             name="x"
@@ -620,22 +620,91 @@ const CheckoutUI = (props: any) => {
                   urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
                   urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
                   payData: {
-                    paymethod_id: paypalMethod?.id,
+                    paymethod_id: webviewPaymethod?.id,
                     amount: cart?.total,
                     delivery_zone_id: cart?.delivery_zone_id,
                     user_id: user?.id
                   },
                   currency: configs?.stripe_currency?.value || currency,
                   userToken: token,
-                  clientId: paypalMethod?.credentials?.client_id
+                  clientId: webviewPaymethod?.credentials?.client_id
                 }
               }
               setProg(false);
-              webviewRef.current.postMessage(JSON.stringify(message))
+              webviewRef?.current?.postMessage?.(JSON.stringify(message))
             }}
           />
         </View>
       )}
+      {webviewPaymethod?.gateway === 'square' && showGateway.open && (
+        <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
+          <Icon
+            name="x"
+            size={35}
+            style={{ backgroundColor: 'white', paddingTop: 30, paddingLeft: 10 }}
+            onPress={handleCloseWebview}
+          />
+          <OText
+            style={{
+              textAlign: 'center',
+              fontSize: 16,
+              fontWeight: 'bold',
+              color: '#00457C',
+              marginBottom: 5,
+              marginTop: 10
+            }}>
+            {t('SQUARE_PAYMENT', 'Square payment')}
+          </OText>
+          <View style={{ padding: 20, opacity: prog ? 1 : 0, backgroundColor: 'white' }}>
+            <ActivityIndicator size={24} color={progClr} />
+          </View>
+          <WebView
+            source={{ uri: `https://test-square-f50f7.web.app` }}
+            onMessage={onMessage}
+            ref={webviewRefSquare}
+            javaScriptEnabled={true}
+            javaScriptEnabledAndroid={true}
+            cacheEnabled={false}
+            cacheMode='LOAD_NO_CACHE'
+            style={{ flex: 1 }}
+            onShouldStartLoadWithRequest={() => true}
+            onLoadStart={() => {
+              setProg(true);
+              setProgClr('#424242');
+            }}
+            onLoadProgress={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoad={() => {
+              setProg(true);
+              setProgClr('#00457C');
+            }}
+            onLoadEnd={(e) => {
+              const message = {
+                action: 'init',
+                data: {
+                  urlPlace: `${ordering.root}/carts/${cart?.uuid}/place`,
+                  urlConfirm: `${ordering.root}/carts/${cart?.uuid}/confirm`,
+                  payData: {
+                    paymethod_id: webviewPaymethod?.id,
+                    amount: cart?.total,
+                    delivery_zone_id: cart?.delivery_zone_id,
+                    user_id: user?.id,
+                  },
+                  currency: configs?.stripe_currency?.value || currency,
+                  userToken: token,
+                  clientId: 'sandbox-sq0idb-rMLAce87hOfpGvokZCygEw',
+                  locationId: 'L1NGAY5M6KJRX'
+                }
+              }
+              setProg(false);
+              webviewRefSquare?.current?.postMessage?.(JSON.stringify(message))
+            }}
+          />
+        </View>
+      )
+      }
       {openOrderCreating && (
         <View style={{ zIndex: 9999, height: '100%', width: '100%', position: 'absolute', backgroundColor: 'white' }}>
           <OrderCreating

package/src/components/Messages/index.tsx

@@ -209,11 +209,11 @@ const MessagesUI = (props: MessagesParams) => {
     <InputToolbar
       {...props}
       containerStyle={{
-        padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
-        flexDirection: 'column-reverse'
+        marginBottom: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+        flexDirection: Platform.OS === 'ios' && isKeyboardShow ? 'column' : 'column-reverse'
       }}
       primaryStyle={{ alignItems: 'center', justifyContent: 'flex-start' }}
-      renderAccessory={() => renderAccessory()}
+      renderAccessory={() => !isKeyboardShow && renderAccessory()}
     />
   )
 

package/src/components/PaymentOptions/index.tsx

@@ -90,9 +90,9 @@ const PaymentOptionsUI = (props: any) => {
   }
 
   const handlePaymentMethodClick = (paymethod: any) => {
-    const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal'].includes(paymethod?.gateway)
+    const isPopupMethod = ['stripe', 'stripe_direct', 'stripe_connect', 'stripe_redirect', 'paypal', 'square'].includes(paymethod?.gateway)
     handlePaymethodClick(paymethod, isPopupMethod)
-    if(paymethod?.gateway === 'paypal') {
+    if(paymethod?.gateway === 'paypal' || paymethod?.gateway === 'square') {
       handlePaymentMethodClickCustom(paymethod)
     }
     setCardData(paymethodData)

package/src/theme.json

@@ -42,7 +42,9 @@
     "colorTextTutorial": "#000000",
     "toastSuccess":"#90C68E",
     "toastError":"#D83520",
-    "toastInfo":"#6BA4FF"
+    "toastInfo":"#6BA4FF",
+    "warning5": "#FFC700",
+    "warning1": "#FFF4CC"
   },
   "images": {
     "logos": {

package/src/utils/index.tsx

@@ -164,3 +164,30 @@ export const transformCountryCode = (countryCode : number) => {
     return parser(value)
   }
 }
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ 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
+}

package/themes/doordash/src/components/BusinessesListing/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import Geolocation from '@react-native-community/geolocation'
 import { View, StyleSheet, ScrollView, Platform, PanResponder, I18nManager, TouchableOpacity } from 'react-native'
 import {
 	BusinessList as BusinessesListingController,
@@ -11,7 +12,7 @@ import {
 	ToastType, useToast
 } from 'ordering-components/native'
 
-import { Search, AddressInput, HeaderCont, FeaturedBussiCont } from './styles'
+import { Search, AddressInput, HeaderCont, FeaturedBussiCont, FarAwayMessage } from './styles'
 
 import { useTheme } from 'styled-components/native'
 import { SearchBar } from '../SearchBar'
@@ -21,6 +22,8 @@ import { NotFoundSource } from '../NotFoundSource'
 import { BusinessTypeFilter } from '../BusinessTypeFilter'
 import { BusinessController } from '../BusinessController'
 import BusinessesSortBy from '../BusinessesSortBy'
+import { getDistance } from '../../utils'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 const PIXELS_TO_SCROLL = 1200
 
@@ -44,6 +47,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	const [businesses, setBusinesses] = useState(businessesList?.businesses || []);
 	const [hasFeatured, setHasFeatured] = useState(false);
+	const [isFarAway, setIsFarAway] = useState(false);
 
 	const theme = useTheme();
 
@@ -75,6 +79,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			borderColor: theme.colors.backgroundGray,
 			borderWidth: 1,
 			borderRadius: 40,
+		},
+		iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+		farAwayMsg: {
+			paddingVertical: 6,
+			paddingHorizontal: 20
 		}
 	})
 
@@ -145,6 +158,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	}, [businesses])
 
+	useEffect(() => {
+		Geolocation.getCurrentPosition((pos) => {
+      const crd = pos.coords
+      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+      if (distance > 20) setIsFarAway(true)
+			else setIsFarAway(false)
+    }, (err) => {
+      console.log(`ERROR(${err.code}): ${err.message}`)
+    }, {
+      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+    })
+  }, [orderState?.options?.address?.location])
+
 	return (
 		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} scrollEventThrottle={50}>
 			<HeaderCont>
@@ -168,6 +194,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				</AddressInput>
 			</HeaderCont>
 			<View style={{ height: 1, backgroundColor: theme.colors.border, marginHorizontal: -40 }} />
+			{isFarAway && (
+				<FarAwayMessage style={styles.farAwayMsg}>
+					<Ionicons name='md-warning-outline' style={styles.iconStyle} />
+					<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+				</FarAwayMessage>
+			)}
 			{!auth && (
 				<Search>
 					<SearchBar

package/themes/doordash/src/components/BusinessesListing/styles.tsx

@@ -55,4 +55,14 @@ export const HeaderCont = styled.View`
 export const FeaturedBussiCont = styled.ScrollView`
 	min-height: 190px;
 	margin-horizontal: -40px;
-`;
+`;
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  margin-top: -5px;
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+  width: 100%;
+`

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

@@ -163,3 +163,30 @@ export const transformCountryCode = (countryCode : number) => {
     return parser(value)
   }
 }
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ 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
+}

package/themes/instacart/src/components/BusinessesListing/index.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
+import Geolocation from '@react-native-community/geolocation'
 import { View, StyleSheet, ScrollView, Platform, PanResponder, I18nManager } from 'react-native'
 import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import {
@@ -13,7 +14,7 @@ import {
 	useToast
 } from 'ordering-components/native'
 
-import { WelcomeTitle, Search, OrderControlContainer, AddressInput, WrapMomentOption } from './styles'
+import { WelcomeTitle, Search, OrderControlContainer, AddressInput, WrapMomentOption, FarAwayMessage } from './styles'
 
 import NavBar from '../NavBar'
 import { SearchBar } from '../SearchBar'
@@ -24,6 +25,8 @@ import { BusinessTypeFilter } from '../BusinessTypeFilter'
 import { BusinessController } from '../BusinessController'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { useTheme } from 'styled-components/native'
+import { getDistance } from '../../utils'
+import Ionicons from 'react-native-vector-icons/Ionicons'
 
 const PIXELS_TO_SCROLL = 1200
 
@@ -60,12 +63,22 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			flexDirection: 'row',
 			alignItems: 'center',
 			marginBottom: 10,
+			marginTop: 10,
 			zIndex: 100
 		},
 		borderStyle: {
 			borderColor: theme.colors.backgroundGray,
 			borderWidth: 1,
 			borderRadius: 10,
+		},
+		iconStyle: {
+			fontSize: 18,
+			color: theme.colors.warning5,
+			marginRight: 8
+		},
+		farAwayMsg: {
+			paddingVertical: 6,
+			paddingHorizontal: 20
 		}
 	})
 
@@ -75,6 +88,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [{ configs }] = useConfig()
 	const [{ parseDate }] = useUtils()
 	const [, { showToast }] = useToast()
+	const [isFarAway, setIsFarAway] = useState(false)
 
 	const configTypes = configs?.order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
 
@@ -95,6 +109,19 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		return fBusiness !== undefined && fBusiness !== null;
 	}
 
+	useEffect(() => {
+		Geolocation.getCurrentPosition((pos) => {
+      const crd = pos.coords
+      const distance = getDistance(crd.latitude, crd.longitude, orderState?.options?.address?.location?.lat, orderState?.options?.address?.location?.lng)
+      if (distance > 20) setIsFarAway(true)
+			else setIsFarAway(false)
+    }, (err) => {
+      console.log(`ERROR(${err.code}): ${err.message}`)
+    }, {
+      enableHighAccuracy: true, timeout: 15000, maximumAge: 10000
+    })
+  }, [orderState?.options?.address?.location])
+
 	return (
 		<ScrollView style={styles.container} contentContainerStyle={{ paddingHorizontal: 40 }} onScroll={(e: any) => handleScroll(e)}>
 			{!auth && (
@@ -125,7 +152,12 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						{orderState?.options?.address?.address}
 					</OText>
 				</AddressInput>
-
+				{isFarAway && (
+					<FarAwayMessage style={styles.farAwayMsg}>
+						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+					</FarAwayMessage>
+				)}
 				<View style={styles.wrapperOrderOptions}>
 					<OrderTypeSelector configTypes={configTypes} />
 					<WrapMomentOption

package/themes/instacart/src/components/BusinessesListing/styles.tsx

@@ -25,7 +25,6 @@ export const AddressInput = styled.TouchableOpacity`
   border-radius: 3px;
   align-items: center;
   padding-vertical: 4px;
-  margin-bottom: 10px;
   flex: 1;
   width: 100%;
   z-index: -10;
@@ -50,3 +49,14 @@ export const WrapMomentOption = styled.TouchableOpacity`
   margin-start: 15px;
   min-height: 28px;
 `
+
+export const FarAwayMessage = styled.View`
+  flex-direction: row;
+  align-items: center;
+	background-color: ${(props: any) => props.theme.colors.warning1};
+  margin-top: 0px;
+  margin-left: 0px;
+  border-radius: 7.6px;
+  border: 1px solid ${(props: any) => props.theme.colors.warning5};
+  width: 100%;
+`

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

@@ -163,3 +163,30 @@ export const transformCountryCode = (countryCode : number) => {
     return parser(value)
   }
 }
+
+/**
+ * Function to transform degree to radian
+ * @param {number} value for transform
+ *
+ */
+ 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
+}

package/themes/original/index.tsx

@@ -20,6 +20,7 @@ import { BusinessMenuList } from './src/components/BusinessMenuList';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { ReviewOrder } from './src/components/ReviewOrder';
 import { UserProfile } from './src/components/UserProfile';
+import { MessageListing } from './src/components/MessageListing';
 import { Help } from './src/components/Help';
 import { HelpAccountAndPayment } from './src/components/HelpAccountAndPayment';
 import { HelpGuide } from './src/components/HelpGuide';
@@ -76,6 +77,7 @@ export {
 	ReviewOrder,
 	BusinessMenuList,
 	UserProfile,
+	MessageListing,
 	Help,
 	HelpAccountAndPayment,
 	HelpGuide,