ordering-ui-react-native 0.22.38 → 0.22.40

package/package.json

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

package/themes/business/src/components/DriverMap/index.tsx

@@ -69,11 +69,20 @@ export const DriverMap = (props: GoogleMapsParams) => {
     stopFollowUserLocation,
   } = useLocation();
 
-  const origin = {
-    latitude: initialPosition.latitude,
-    longitude: initialPosition.longitude,
+  const destination = {
+    latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+    longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0
   };
-  const destination = { latitude: location.lat, longitude: location.lng };
+
+  const parsedInitialPosition = {
+    latitude: typeof initialPosition.latitude === 'string' ? parseFloat(initialPosition.latitude) || 0 : initialPosition.latitude || 0,
+    longitude: typeof initialPosition.longitude === 'string' ? parseFloat(initialPosition.longitude) || 0 : initialPosition.longitude || 0,
+  }
+
+  const parsedUserLocation = {
+    latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
+    longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
+  }
 
   useEffect(() => {
     if (isToFollow) {
@@ -161,7 +170,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (driverUpdateLocation.error) return;
 
     calculateDistance(
-      { lat: userLocation.latitude, lng: userLocation.longitude },
+      { lat: parsedUserLocation.latitude, lng: parsedUserLocation.longitude },
       destination,
     );
     // geocodePosition(userLocation);
@@ -169,13 +178,13 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (!following.current) return;
     fitCoordinates();
 
-    const { latitude, longitude } = userLocation;
+    const { latitude, longitude } = parsedUserLocation;
 
     mapRef.current?.animateCamera({
       center: { latitude, longitude },
     });
 
-  }, [userLocation]);
+  }, [parsedUserLocation]);
 
   const handleArrowBack: any = () => {
     setDriverUpdateLocation?.({
@@ -241,8 +250,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
         [
           { latitude: location.lat, longitude: location.lng },
           {
-            latitude: initialPosition.latitude,
-            longitude: initialPosition.longitude,
+            latitude: parsedInitialPosition.latitude,
+            longitude: parsedInitialPosition.longitude,
           },
         ],
         {
@@ -255,7 +264,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (initialPosition.latitude !== 0 && autoFit.current) {
+      if (parsedInitialPosition.latitude !== 0 && autoFit.current) {
         if (mapRef.current) {
           fitCoordinates();
           autoFit.current = false;
@@ -263,7 +272,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       }
     }, 1000);
     return () => clearInterval(interval);
-  }, [initialPosition]);
+  }, [parsedInitialPosition]);
 
   const fitCoordinatesZoom = () => {
     following.current = false;
@@ -346,8 +355,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ref={mapRef}
             provider={PROVIDER_GOOGLE}
             initialRegion={{
-              latitude: initialPosition.latitude,
-              longitude: initialPosition.longitude,
+              latitude: parsedInitialPosition.latitude,
+              longitude: parsedInitialPosition.longitude,
               latitudeDelta: 0.001,
               longitudeDelta: 0.001 * ASPECT_RATIO,
             }}
@@ -369,8 +378,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
               <>
                 <Marker
                   coordinate={{
-                    latitude: location.lat,
-                    longitude: location.lng,
+                    latitude: destination.latitude,
+                    longitude: destination.longitude
                   }}
                   title={location.title}>
                   <Icon
@@ -387,7 +396,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
                     />
                   </View>
                 </Marker>
-                <Marker coordinate={userLocation}>
+                <Marker coordinate={{
+                  latitude: parsedUserLocation.latitude,
+                  longitude: parsedUserLocation.longitude
+                }}>
                   <View style={styles.driverIcon}>
                     <OIcon
                       style={styles.image}
@@ -401,8 +413,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ) : (
               <Marker
                 coordinate={{
-                  latitude: userLocation.latitude,
-                  longitude: userLocation.longitude,
+                  latitude: parsedUserLocation.latitude,
+                  longitude: parsedUserLocation.longitude
                 }}
                 title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
               />
@@ -516,8 +528,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             options={{
               latitude: destination.latitude,
               longitude: destination.longitude,
-              sourceLatitude: userLocation.latitude,
-              sourceLongitude: userLocation.longitude,
+              sourceLatitude: parsedUserLocation.latitude,
+              sourceLongitude: parsedUserLocation.longitude,
               naverCallerName: 'com.deliveryapp',
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
@@ -539,7 +551,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
             secondButton={true}
             firstColorCustom={theme.colors.red}
             secondColorCustom={theme.colors.green}
-            widthButton={isHideRejectButtons ? '100%': '45%'}
+            widthButton={isHideRejectButtons ? '100%' : '45%'}
             isPadding
             isHideRejectButtons={isHideRejectButtons}
           />

package/themes/business/src/components/GoogleMap/index.tsx

@@ -50,12 +50,16 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const ASPECT_RATIO = width / height;
   const [isMapReady, setIsMapReady] = useState(false);
   const [markerPosition, setMarkerPosition] = useState({
-    latitude: locations ? locations[locations.length - 1].lat : location.lat,
-    longitude: locations ? locations[locations.length - 1].lng : location.lng,
+    latitude: locations 
+      ? typeof locations[locations.length - 1].lat === 'string' ? parseFloat(locations[locations.length - 1].lat) || 0 : locations[locations.length - 1].lat || 0
+      : typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+    longitude: locations 
+      ? typeof locations[locations.length - 1].lng === 'string' ? parseFloat(locations[locations.length - 1].lng) || 0 : locations[locations.length - 1].lng || 0
+      : typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0,
   });
   const [region, setRegion] = useState({
-    latitude: location.lat,
-    longitude: location.lng,
+    latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+    longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0,
     latitudeDelta: 0.001,
     longitudeDelta: 0.001 * ASPECT_RATIO,
   });
@@ -78,12 +82,15 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   let MARKERS =
     locations &&
     locations.map((location: { lat: number; lng: number; level: number }) => {
-      return location.level === 4 && driverLocation?.lat
+      return location.level === 4 && driverLocation?.lat && driverLocation?.lng
         ? {
-          latitude: driverLocation?.lat,
-          longitude: driverLocation?.lng,
+          latitude: typeof driverLocation?.lat === 'string' ? parseFloat(driverLocation?.lat) || 0 : driverLocation?.lat,
+          longitude: typeof driverLocation?.lng === 'string' ? parseFloat(driverLocation?.lng) || 0 : driverLocation?.lng,
         }
-        : { latitude: location.lat, longitude: location.lng };
+        : {
+          latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat,
+          longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng
+        };
     });
 
   const handleArrowBack: any = () => {

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

@@ -859,8 +859,9 @@ const AddressFormUI = (props: AddressFormParams) => {
 						) : (
 							<OButton
 								text={t('CANCEL', 'Cancel')}
-								bgColor={theme.colors.white}
-								borderColor={theme.colors.primary}
+								bgColor={theme.colors.secundary}
+								borderColor={theme.colors.secundary}
+								textStyle={{ color: theme.colors.black }}
 								style={{ borderRadius: 7.6, borderWidth: 1, shadowOpacity: 0 }}
 								onClick={() => navigation?.canGoBack() && navigation.goBack()}
 							/>
@@ -887,6 +888,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 						<OButton
 							text={t('SAVE', 'Save')}
 							textStyle={{ color: theme.colors.white }}
+							bgColor={theme.colors.primary}
+							borderColor={theme.colors.primary}
 							imgRightSrc={null}
 							style={{ marginHorizontal: 30, marginBottom: 10 }}
 							onClick={() => setSaveMapLocation(true)}

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

@@ -620,13 +620,15 @@ const CheckoutUI = (props: any) => {
 											<OButton
 												text={t('SIGN_UP', 'Sign up')}
 												textStyle={{ color: theme.colors.white }}
+												bgColor={theme.colors.primary}
+												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, signup: true })}
 											/>
 											<OButton
 												text={t('LOGIN', 'Login')}
-												textStyle={{ color: theme.colors.primary }}
-												bgColor={theme.colors.white}
+												textStyle={{ color: theme.colors.white }}
+												bgColor={theme.colors.primary}
 												borderColor={theme.colors.primary}
 												style={{ borderRadius: 7.6, marginTop: 20 }}
 												onClick={() => setOpenModal({ ...openModal, login: true })}

package/themes/original/src/components/ProductForm/ActionButton.tsx

@@ -5,7 +5,7 @@ import { TouchableOpacity, View } from 'react-native'
 import { OButton, OText } from '../shared';
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
 
-export const ActionButton = (props : any) => {
+export const ActionButton = (props: any) => {
     const {
         navigation,
         isHaveWeight,
@@ -23,18 +23,20 @@ export const ActionButton = (props : any) => {
         handleUpdateGuest,
         actionStatus
     } = props
-    const [,t] = useLanguage()
+    const [, t] = useLanguage()
     const [{ auth }] = useSession()
     const [orderState] = useOrder()
     const theme = useTheme()
-	const [{ configs }] = useConfig()
+    const [{ configs }] = useConfig()
     const unaddressedTypes = configs?.unaddressed_order_types_allowed?.value.split('|').map((value: any) => Number(value)) || []
-	const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
-
+    const isAllowUnaddressOrderType = unaddressedTypes.includes(orderState?.options?.type)
     const saveErrors =
-		orderState.loading ||
-		maxProductQuantity === 0 ||
-		Object.keys(errors)?.length > 0;
+        orderState.loading ||
+        maxProductQuantity === 0 ||
+        Object.keys(errors)?.length > 0;
+    const buttonColor = saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order))
+
+
 
     return (
         <View
@@ -60,9 +62,9 @@ export const ActionButton = (props : any) => {
                             color: saveErrors || isSoldOut || maxProductQuantity <= 0 ? theme.colors.primary : theme.colors.white,
                             fontSize: orderState.loading || editMode ? 10 : 14
                         }}
+                        bgColor={buttonColor ? theme.colors.lightGray : theme.colors.primary}
+                        borderColor={!buttonColor ? theme.colors.white : theme.colors.primary}
                         style={{
-                            backgroundColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.lightGray : theme.colors.primary,
-                            borderColor: saveErrors || isSoldOut || maxProductQuantity <= 0 || (product?.minimum_per_order && ((productCart?.quantity + productAddedToCartLength) < product?.minimum_per_order)) || (product?.maximum_per_order && ((productCart?.quantity + productAddedToCartLength) > product?.maximum_per_order)) ? theme.colors.white : theme.colors.primary,
                             opacity: saveErrors || isSoldOut || maxProductQuantity <= 0 ? 0.3 : 1,
                             borderRadius: 7.6,
                             height: 44,

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

@@ -182,7 +182,7 @@ const PromotionsUI = (props: PromotionParams) => {
           title={``}
           onClose={() => setOpenModal(false)}
         >
-          <View style={{ padding: 20 }}>
+          <ScrollView style={{ padding: 20 }}>
             <OText style={{ alignSelf: 'center', fontWeight: '700' }} mBottom={20}>
               {offerSelected?.name} / {t('VALUE_OF_OFFER', 'Value of offer')}: {offerSelected?.rate_type === 1 ? `${offerSelected?.rate}%` : `${parsePrice(offerSelected?.rate)}`}
             </OText>
@@ -210,10 +210,7 @@ const PromotionsUI = (props: PromotionParams) => {
             <OText style={{ marginTop: 10, marginBottom: 10 }}>
               {t('AVAILABLE_BUSINESSES_FOR_OFFER', 'Available businesses for this offer')}:
             </OText>
-            <ScrollView
-              showsVerticalScrollIndicator={false}
-              style={{ height: '68%' }}
-            >
+            <View style={{ marginBottom: 70 }}>
               {offerSelected?.businesses?.map((business: any) => {
                 return (
                   <SingleBusinessOffer key={business.id}>
@@ -244,8 +241,8 @@ const PromotionsUI = (props: PromotionParams) => {
                   </SingleBusinessOffer>
                 )
               })}
-            </ScrollView>
-          </View>
+            </View>
+          </ScrollView>
         </OModal>
       </PromotionsContainer>
     </Container>

package/themes/original/src/components/UpsellingProducts/UpsellingContent.tsx

@@ -20,7 +20,7 @@ import IconAntDesign from 'react-native-vector-icons/AntDesign';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { UpsellingLayout } from './UpsellingLayout';
 
-export const UpsellingContent = (props : any) => {
+export const UpsellingContent = (props: any) => {
     const {
         onGoBack,
         handleUpsellingPage,
@@ -44,12 +44,10 @@ export const UpsellingContent = (props : any) => {
     const commentDelayTime = isChewLayout ? 500 : null
 
     const cartList = (carts && Object.values(carts).filter((_cart: any) => _cart?.products?.length > 0 && _cart.uuid !== cart?.uuid)) || []
-    
+
     const styles = StyleSheet.create({
         closeUpsellingButton: {
             borderRadius: 7.6,
-            borderColor: theme.colors.primary,
-            backgroundColor: theme.colors.primary,
             borderWidth: 1,
             alignSelf: 'center',
             height: 44,
@@ -160,8 +158,10 @@ export const UpsellingContent = (props : any) => {
                 <OButton
                     imgRightSrc=''
                     text={t('CHECKOUT', 'Checkout')}
-                    style={{ ...styles.closeUpsellingButton }}
                     textStyle={{ color: theme.colors.white, fontSize: 14 }}
+                    bgColor={theme.colors.primary}
+                    borderColor={theme.colors.primary}
+                    style={{ ...styles.closeUpsellingButton }}
                     onClick={() => handleUpsellingPage(cart)}
                 />
             </View>