ordering-ui-react-native 0.17.10 → 0.17.12

package/package.json

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

package/src/components/BusinessInformation/index.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
 import {
   BusinessInformation as BusinessInformationController,
-  useLanguage
+  useLanguage,
+  useConfig
 } from 'ordering-components/native'
 import { OText } from '../shared'
 import {
@@ -26,6 +27,8 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
   } = props
   const [, t] = useLanguage()
   const theme = useTheme()
+	const [{ configs }] = useConfig();
+
   const daysOfWeek = [
     t('SUNDAY_ABBREVIATION', 'Sun'),
     t('MONDAY_ABBREVIATION', 'Mon'),
@@ -35,9 +38,13 @@ const BusinessInformationUI = (props: BusinessInformationParams) => {
     t('FRIDAY_ABBREVIATION', 'Fri'),
     t('SATURDAY_ABBREVIATION', 'Sat')
   ]
-  const scheduleFormatted = ({ hour, minute } : {hour : number | string, minute : number | string}) => {
-    const checkTime = (val : number | string) => val < 10 ? `0${val}` : val
-    return `${checkTime(hour)}:${checkTime(minute)}`
+  const is12hours = configs?.format_time?.value?.includes('12')
+
+  const scheduleFormatted = ({ hour, minute } : { hour : number | string, minute : number | string}) => {
+    const checkTime = (val: number | string) => (val < 10 ? `0${val}` : val);
+		const zz = hour === 0 ? t('AM', 'AM') : hour >= 12 ? t('PM', 'PM') : t('AM', 'AM');
+		const h = parseInt(`${hour}`);
+		return is12hours ? `${h === 0 ? 12 : h > 12 ? h - 12 : h}:${checkTime(minute)} ${zz}` : `${checkTime(hour)}:${checkTime(minute)}`;
   }
 
   return (

package/src/components/BusinessInformation/styles.tsx

@@ -18,7 +18,7 @@ export const InnerContent = styled.View`
 `
 export const WrapScheduleBlock = styled.ScrollView`
   margin: 20px 0;
-  max-height: 500px;
+  max-height: 520px;
 `
 export const ScheduleBlock = styled.View`
   display: flex;
@@ -27,7 +27,7 @@ export const ScheduleBlock = styled.View`
   padding: 0 20px;
   border-left-width: 1px;
   border-color: ${(props: any) => props.theme.colors.lightGray};
-  max-width: 100px;
+  max-width: 120px;
 `
 export const WrapBusinessMap = styled.View`
   max-height: 200px;

package/src/components/SingleProductReview/index.tsx

@@ -40,12 +40,6 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
       flexDirection: 'row',
       justifyContent: 'center',
       marginVertical: 10,
-    },
-    productStyle: {
-      width: 80,
-      height: 80,
-      marginLeft: 'auto',
-      marginRight: 'auto'
     }
   })
 
@@ -109,24 +103,6 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
   return (
     <>
       <ProductContainer>
-        <LogoWrapper>
-          {product?.images ? (
-            <FastImage
-              style={styles.productStyle}
-              source={{
-                uri: optimizeImage(product?.images, 'h_250,c_limit'),
-                priority: FastImage.priority.normal,
-              }}
-              resizeMode={FastImage.resizeMode.cover}
-            />
-          ) : (
-            <OIcon
-              src={theme?.images?.dummies?.product}
-              width={80}
-              height={80}
-            />
-          )}
-        </LogoWrapper>
         <ProductHeader>
           <OText numberOfLines={1} style={{ flex: 1 }}>{product?.name}</OText>
           <LikeHandsActionContainer>

package/src/components/SingleProductReview/styles.tsx

@@ -14,18 +14,6 @@ export const LikeHandsActionContainer = styled.View`
   flex-direction: row;
 `
 
-export const LogoWrapper = styled.View`
-  shadowRadius: 3;
-  shadowOffset: { width: 1, height: 4 };
-  elevation: 3;
-  borderRadius: 8;
-  shadowOpacity: 0.1;
-  overflow: hidden;
-  width: 80;
-  marginLeft: auto;
-  marginRight: auto;
-`
-
 export const LikeHandsButton = styled.TouchableOpacity`
   ${(props: any) => props.isLike && css`
     margin-horizontal: 15px;

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

@@ -13,6 +13,7 @@ import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import { FloatingButton } from '../FloatingButton';
 import { showLocation } from 'react-native-map-link';
+import { transformDistance } from '../../utils';
 
 export const DriverMap = (props: GoogleMapsParams) => {
   const {
@@ -56,6 +57,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     content: Array<string>;
     key?: string | null;
   }>({ open: false, content: [], key: null });
+  const distanceUnit = configState?.configs?.distance_unit?.value
 
   const {
     hasLocation,
@@ -475,9 +477,10 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 src={theme.images.general.arrow_distance}
                 style={styles.arrowDistance}
               />
-              <OText size={12} numberOfLines={3}>{`${(
-                distancesFromTwoPlacesKm
-              ).toFixed(2)} ${t('KM', 'KM')}`}</OText>
+              <OText size={12} numberOfLines={3}>
+                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`} 
+              </OText>
+
             </View>
             <View style={{ width: '75%', paddingRight: 20 }}>
               <OText

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

@@ -21,6 +21,7 @@ const MapViewComponent = (props: MapViewParams) => {
     customerMarkerGroups,
     alertState,
     setAlertState,
+    setDriverLocation,
     onNavigationRedirect,
     getBusinessLocations,
   } = props;
@@ -211,6 +212,16 @@ const MapViewComponent = (props: MapViewParams) => {
     )
   }
 
+  useEffect(() => {
+    if (userLocation.latitude !== 0 && userLocation.longitude !== 0) {
+      const location = {
+        lat: userLocation.latitude,
+        lng: userLocation.longitude
+      }
+      setDriverLocation({ location })
+    }
+  }, [userLocation])
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>

package/themes/business/src/types/index.tsx

@@ -568,6 +568,7 @@ export interface AcceptOrRejectOrderParams {
 export interface MapViewParams {
   onNavigationRedirect: (page: string, params?: any) => void,
   getBusinessLocations: () => void,
+  setDriverLocation: (location: any) => void,
   isLoadingBusinessMarkers?: boolean,
   markerGroups: Array<any>,
   customerMarkerGroups: Array<any>,

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

@@ -345,3 +345,11 @@ export const getOrderStatus = (s: string, t: any) => {
 
   return objectStatus && objectStatus;
 };
+
+export const transformDistance = (value : number, distanceUnit?: string) => {
+  return distanceUnit === 'mi'
+    ? (value / 1.609).toFixed(2)
+    : distanceUnit === 'ft'
+      ? (value * 3280.84).toFixed(0)
+      : (value).toFixed(2)
+}

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

@@ -149,7 +149,7 @@ export const BusinessItemAccordion = (props: any) => {
 						<OButton
 							onClick={handleClickCheckout}
 							textStyle={{ color: 'white', textAlign: 'center', flex: 1 }}
-							style={{ width: 160, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
+							style={{ width: 180, flexDirection: 'row', justifyContent: 'center', borderRadius: 7.6, shadowOpacity: 0 }}
 							text={t('CHECKOUT', 'Checkout')}
 							bgColor={(cart?.subtotal < cart?.minimum || !cart?.valid_address) ? theme.colors.secundary : theme.colors.primary}
 							borderColor={theme.colors.primary}

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
-import { useLanguage } from 'ordering-components/native'
-import { OText, OButton, OInput } from '../shared'
+import { useLanguage, useUtils } from 'ordering-components/native'
+import { OText, OButton, OInput, OIcon } from '../shared'
 import { StyleSheet, TouchableOpacity, View } from 'react-native'
 import AntDesignIcons from 'react-native-vector-icons/AntDesign'
 import { useTheme } from 'styled-components/native'
@@ -14,7 +14,9 @@ import {
   LikeHandsActionContainer,
   LikeHandsButton,
   CommentsButtonGroup,
+  LogoWrapper,
 } from './styles'
+import FastImage from 'react-native-fast-image'
 
 export const SingleProductReview = (props: SingleProductReviewParams) => {
   const {
@@ -25,6 +27,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const [{ optimizeImage }] = useUtils()
 
   const styles = StyleSheet.create({
     inputTextArea: {
@@ -40,6 +43,12 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
       justifyContent: 'center',
       marginVertical: 10,
     },
+    productStyle: {
+      width: 80,
+      height: 80,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    }
   })
 
   const [comments, setComments] = useState<Array<any>>([])
@@ -100,6 +109,24 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
   return (
     <>
       <ProductContainer>
+        <LogoWrapper>
+          {product?.images ? (
+            <FastImage
+              style={styles.productStyle}
+              source={{
+                uri: optimizeImage(product?.images, 'h_250,c_limit'),
+                priority: FastImage.priority.normal,
+              }}
+              resizeMode={FastImage.resizeMode.cover}
+            />
+          ) : (
+            <OIcon
+              src={theme?.images?.dummies?.product}
+              width={80}
+              height={80}
+            />
+          )}
+        </LogoWrapper>
         <ProductHeader>
           <OText numberOfLines={1} style={{ flex: 1 }} color={theme.colors.textNormal}>{product?.name}</OText>
           <LikeHandsActionContainer>
@@ -129,7 +156,7 @@ export const SingleProductReview = (props: SingleProductReviewParams) => {
               style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
               imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
               imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
-              onClick={() => handleChangeComment(commentItem) }
+              onClick={() => handleChangeComment(commentItem)}
             />
           ))}
         </CommentsButtonGroup>

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

@@ -15,6 +15,18 @@ export const LikeHandsActionContainer = styled.View`
   flex-direction: row;
 `
 
+export const LogoWrapper = styled.View`
+  shadowRadius: 3;
+  shadowOffset: { width: 1, height: 4 };
+  elevation: 3;
+  borderRadius: 8;
+  shadowOpacity: 0.1;
+  overflow: hidden;
+  width: 80;
+  marginLeft: auto;
+  marginRight: auto;
+`
+
 export const LikeHandsButton = styled.TouchableOpacity`
   ${(props: any) => props.isLike && css`
     margin-horizontal: 15px;