ordering-ui-react-native 0.10.3 → 0.11.3

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import { Dimensions, SafeAreaView, StyleSheet, View } from 'react-native';
 import MapView, {
   PROVIDER_GOOGLE,
   Marker,
@@ -16,7 +16,6 @@ import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 // import MapViewDirections from 'react-native-maps-directions';
 import { FloatingButton } from '../FloatingButton';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export const DriverMap = (props: GoogleMapsParams) => {
   const {
@@ -76,7 +75,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     longitude: initialPosition.longitude,
   };
   const destination = { latitude: location.lat, longitude: location.lng };
-  const { top } = useSafeAreaInsets();
 
   useEffect(() => {
     if (isToFollow) {
@@ -348,8 +346,9 @@ export const DriverMap = (props: GoogleMapsParams) => {
     },
     buttonBack: {
       borderWidth: 0,
+      maxWidth: 40,
       alignItems: 'flex-start',
-      justifyContent: 'flex-start',
+      justifyContent: 'flex-end',
     },
     facContainer: {
       position: 'absolute',
@@ -357,17 +356,20 @@ export const DriverMap = (props: GoogleMapsParams) => {
       zIndex: 9999,
       width: '100%',
       backgroundColor: theme.colors.white,
+      paddingHorizontal: 30,
+      paddingTop: 30,
     },
     facOrderStatus: {
       flexDirection: 'row',
-      paddingTop: top + 13,
       borderBottomWidth: 11,
+      minHeight: 70,
       borderBottomColor: theme.colors.inputChat,
+      paddingVertical: 5,
     },
     facDistance: {
       flexDirection: 'row',
-      minHeight: 70,
       alignItems: 'center',
+      minHeight: 75,
     },
     arrowDistance: {
       borderWidth: 0,
@@ -375,194 +377,205 @@ export const DriverMap = (props: GoogleMapsParams) => {
   });
 
   return (
-    <>
+    <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1 }}>
-        <MapView
-          ref={mapRef}
-          provider={PROVIDER_GOOGLE}
-          initialRegion={{
-            latitude: initialPosition.latitude,
-            longitude: initialPosition.longitude,
-            latitudeDelta: 0.001,
-            longitudeDelta: 0.001 * ASPECT_RATIO,
-          }}
-          style={{ flex: 1 }}
-          // showsUserLocation
-
-          zoomTapEnabled
-          // onRegionChangeComplete={
-          //   !readOnly
-          //     ? coordinates => handleChangeRegion(coordinates)
-          //     : () => {}
-          // }
-          zoomEnabled
-          zoomControlEnabled
-          cacheEnabled
-          moveOnMarkerPress
-          onTouchStart={() => (following.current = false)}>
-          {location ? (
-            <>
-              <Polyline
-                coordinates={[
-                  { latitude: location.lat, longitude: location.lng },
-                  {
-                    latitude: userLocation.latitude,
-                    longitude: userLocation.longitude,
-                  },
-                ]}
-                strokeColor="blue"
-                strokeWidth={3}
-              />
-              <Marker
-                coordinate={{ latitude: location.lat, longitude: location.lng }}
-                title={location.title}>
-                <Icon
-                  name="map-marker"
-                  size={50}
-                  color={theme.colors.primary}
+        <View style={{ flex: 1 }}>
+          <MapView
+            ref={mapRef}
+            provider={PROVIDER_GOOGLE}
+            initialRegion={{
+              latitude: initialPosition.latitude,
+              longitude: initialPosition.longitude,
+              latitudeDelta: 0.001,
+              longitudeDelta: 0.001 * ASPECT_RATIO,
+            }}
+            style={{ flex: 1 }}
+            // showsUserLocation
+
+            zoomTapEnabled
+            // onRegionChangeComplete={
+            //   !readOnly
+            //     ? coordinates => handleChangeRegion(coordinates)
+            //     : () => {}
+            // }
+            zoomEnabled
+            zoomControlEnabled
+            cacheEnabled
+            moveOnMarkerPress
+            onTouchStart={() => (following.current = false)}>
+            {location ? (
+              <>
+                <Polyline
+                  coordinates={[
+                    { latitude: location.lat, longitude: location.lng },
+                    {
+                      latitude: userLocation.latitude,
+                      longitude: userLocation.longitude,
+                    },
+                  ]}
+                  strokeColor="blue"
+                  strokeWidth={3}
                 />
-                <View style={styles.view}>
-                  <OIcon
-                    style={styles.image}
-                    url={location.icon}
-                    width={25}
-                    height={25}
-                  />
-                </View>
-              </Marker>
-              <Marker coordinate={userLocation}>
-                <View style={styles.driverIcon}>
-                  <OIcon
-                    style={styles.image}
-                    src={theme.images.general.driverImage}
-                    width={25}
-                    height={25}
+                <Marker
+                  coordinate={{
+                    latitude: location.lat,
+                    longitude: location.lng,
+                  }}
+                  title={location.title}>
+                  <Icon
+                    name="map-marker"
+                    size={50}
+                    color={theme.colors.primary}
                   />
-                </View>
-              </Marker>
-            </>
-          ) : (
-            <Marker
-              coordinate={{
-                latitude: userLocation.latitude,
-                longitude: userLocation.longitude,
-              }}
-              title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
-            />
-          )}
-        </MapView>
-      </View>
+                  <View style={styles.view}>
+                    <OIcon
+                      style={styles.image}
+                      url={location.icon}
+                      width={25}
+                      height={25}
+                    />
+                  </View>
+                </Marker>
+                <Marker coordinate={userLocation}>
+                  <View style={styles.driverIcon}>
+                    <OIcon
+                      style={styles.image}
+                      src={theme.images.general.driverImage}
+                      width={25}
+                      height={25}
+                    />
+                  </View>
+                </Marker>
+              </>
+            ) : (
+              <Marker
+                coordinate={{
+                  latitude: userLocation.latitude,
+                  longitude: userLocation.longitude,
+                }}
+                title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
+              />
+            )}
+          </MapView>
+        </View>
 
-      <OFab
-        iconName="globe-sharp"
-        onPress={fitCoordinatesZoom}
-        style={{
-          position: 'absolute',
-          bottom: showAcceptOrReject ? 115 : 75,
-          right: 20,
-        }}
-      />
-      <OFab
-        iconName="car-sport-sharp"
-        onPress={centerPosition}
-        style={{
-          position: 'absolute',
-          bottom: showAcceptOrReject ? 80 : 35,
-          right: 20,
-        }}
-      />
-      <View style={styles.facContainer}>
-        <View style={styles.facOrderStatus}>
-          <View
-            style={{
-              width: '25%',
-              justifyContent: 'center',
-            }}>
-            <OIconButton
-              icon={theme.images.general.close}
-              iconStyle={{
-                width: 35,
-                height: 15,
-              }}
-              style={styles.buttonBack}
-              onClick={() => handleArrowBack()}
-            />
+        <OFab
+          iconName="globe-sharp"
+          onPress={fitCoordinatesZoom}
+          style={{
+            position: 'absolute',
+            bottom: showAcceptOrReject ? 115 : 75,
+            right: 20,
+          }}
+        />
+        <OFab
+          iconName="car-sport-sharp"
+          onPress={centerPosition}
+          style={{
+            position: 'absolute',
+            bottom: showAcceptOrReject ? 80 : 35,
+            right: 20,
+          }}
+        />
+        <View style={styles.facContainer}>
+          <View style={styles.facOrderStatus}>
+            <View
+              style={{
+                width: '15%',
+                justifyContent: 'flex-start',
+                alignItems: 'flex-start',
+                paddingBottom: 10,
+                marginRight: 10,
+              }}>
+              <OIconButton
+                icon={theme.images.general.close}
+                iconStyle={{
+                  width: 13,
+                  height: 13,
+                }}
+                style={styles.buttonBack}
+                onClick={() => handleArrowBack()}
+              />
+            </View>
+            <View style={{ width: '85%', paddingRight: 10, paddingBottom: 10 }}>
+              <OText size={12} color={theme.colors.textGray}>
+                {order?.delivery_datetime_utc
+                  ? parseDate(order?.delivery_datetime_utc)
+                  : parseDate(order?.delivery_datetime, { utc: false })}
+                {` - ${order?.paymethod?.name}`}
+              </OText>
+              <OText weight="bold">
+                {t('INVOICE_ORDER_NO', 'Order No.')} {order?.id}
+                {` ${t('IS', 'is')} `}
+                <OText
+                  size={16}
+                  numberOfLines={2}
+                  color={colors[order?.status] || theme.colors.statusOrderBlue}>
+                  {`${orderStatus}`}
+                </OText>
+              </OText>
+            </View>
           </View>
-          <View style={{ width: '75%' }}>
-            <OText size={12} color={theme.colors.textGray}>
-              {order?.delivery_datetime_utc
-                ? parseDate(order?.delivery_datetime_utc)
-                : parseDate(order?.delivery_datetime, { utc: false })}
-              {` - ${order?.paymethod?.name}`}
-            </OText>
-            <OText weight="bold">
-              {t('INVOICE_ORDER_NO', 'Order No.')} {order?.id}
-              {` ${t('IS', 'is')} `}
+
+          <View style={styles.facDistance}>
+            <View
+              style={{
+                width: '15%',
+                alignItems: 'center',
+                marginRight: 10,
+              }}>
+              <OIcon
+                src={theme.images.general.arrow_distance}
+                style={styles.arrowDistance}
+              />
+              <OText size={12} numberOfLines={3}>{`${(
+                distancesFromTwoPlacesKm * 3280.84
+              ).toFixed(0)} ${t('FT', 'Ft')}`}</OText>
+            </View>
+            <View style={{ width: '75%', paddingRight: 20 }}>
               <OText
-                size={16}
+                color={theme.colors.unselectText}
+                size={13}
                 numberOfLines={2}
-                color={colors[order?.status] || theme.colors.statusOrderBlue}>
-                {`${orderStatus}`}
+                adjustsFontSizeToFit>
+                {`${travelTime.toFixed(2)} - ${
+                  isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
+                } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
               </OText>
-            </OText>
-          </View>
-        </View>
-
-        <View style={styles.facDistance}>
-          <View
-            style={{
-              width: '25%',
-              alignItems: 'center',
-              paddingHorizontal: 20,
-            }}>
-            <OIcon
-              src={theme.images.general.arrow_distance}
-              style={styles.arrowDistance}
-            />
-            <OText size={12} numberOfLines={2}>{`${(
-              distancesFromTwoPlacesKm * 3280.84
-            ).toFixed(0)} ${t('FT', 'Ft')}`}</OText>
-          </View>
-          <View style={{ width: '75%' }}>
-            <OText
-              color={theme.colors.unselectText}
-              size={13}
-              numberOfLines={2}
-              adjustsFontSizeToFit>
-              {`${travelTime.toFixed(2)} - ${
-                isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
-              } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
-            </OText>
-            <OText size={13} numberOfLines={3} adjustsFontSizeToFit>
-              {infoRealTime?.formatted_address}
-            </OText>
+              <OText size={13} numberOfLines={3} adjustsFontSizeToFit>
+                {infoRealTime?.formatted_address}
+              </OText>
+            </View>
           </View>
         </View>
-      </View>
 
-      {showAcceptOrReject && (
-        <FloatingButton
-          btnText={t('REJECT', 'Reject')}
-          isSecondaryBtn={false}
-          secondButtonClick={() =>
-            handleViewActionOrder && handleViewActionOrder('accept')
-          }
-          firstButtonClick={() =>
-            handleViewActionOrder && handleViewActionOrder('reject')
-          }
-          secondBtnText={t('ACCEPT', 'Accept')}
-          secondButton={true}
-          firstColorCustom={theme.colors.red}
-          secondColorCustom={theme.colors.green}
+        {showAcceptOrReject && (
+          <FloatingButton
+            btnText={t('REJECT', 'Reject')}
+            isSecondaryBtn={false}
+            secondButtonClick={() =>
+              handleViewActionOrder && handleViewActionOrder('accept')
+            }
+            firstButtonClick={() =>
+              handleViewActionOrder && handleViewActionOrder('reject')
+            }
+            secondBtnText={t('ACCEPT', 'Accept')}
+            secondButton={true}
+            firstColorCustom={theme.colors.red}
+            secondColorCustom={theme.colors.green}
+            widthButton={'45%'}
+            isPadding
+          />
+        )}
+
+        <Alert
+          open={alertState.open}
+          onAccept={closeAlert}
+          onClose={closeAlert}
+          content={alertState.content}
+          title={t('ERROR', 'Error')}
         />
-      )}
-      <Alert
-        open={alertState.open}
-        onAccept={closeAlert}
-        onClose={closeAlert}
-        content={alertState.content}
-        title={t('ERROR', 'Error')}
-      />
-    </>
+      </View>
+    </SafeAreaView>
   );
 };

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

@@ -3,7 +3,7 @@ import { FloatingButton as FloatingButtonController } from 'ordering-components/
 import { FloatingButtonParams } from '../../types';
 import { Container, Button } from './styles';
 import { OText } from '../shared';
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet, Platform, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
 
 const FloatingButtonUI = (props: FloatingButtonParams) => {
@@ -23,6 +23,8 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
     color,
     isSecondaryBtn,
     secondButton,
+    widthButton,
+    isPadding,
   } = props;
 
   const theme = useTheme();
@@ -39,58 +41,41 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
       fontStyle: 'normal',
       fontWeight: 'normal',
       fontSize: 18,
+      paddingHorizontal: 10,
+      paddingVertical: 10,
       position: 'absolute',
       width: '100%',
-      paddingBottom: 5,
       left: 0,
       textAlign: 'center',
     },
   });
 
   return (
-    <Container isIos={Platform.OS === 'ios'}>
-      <Button
-        secondButton={secondButton}
-        style={[
-          {
-            borderWidth: colorTxt1 ? 1 : 0,
-            borderColor: colorTxt1 ? colorTxt1 : null,
-          },
-          secondButton
-            ? { backgroundColor: firstColorCustom || styles.primaryBtn }
-            : color
-            ? { backgroundColor: color }
-            : styles.primaryBtn,
-        ]}
-        onPress={firstButtonClick}
-        disabled={disabled}>
-        <OText color={theme.colors.white} size={16} mLeft={20}>
-          {btnLeftValueShow ? btnLeftValue : ''}
-        </OText>
-
-        <OText
-          style={styles.btnTextStyle}
-          color={colorTxt1 ? colorTxt1 : theme.colors.white}
-          size={16}>
-          {btnText}
-        </OText>
-
-        <OText color={theme.colors.white} size={16} mRight={20}>
-          {btnRightValueShow ? btnRightValue : ''}
-        </OText>
-      </Button>
-
-      {secondButton && (
+    <Container
+      isIos={Platform.OS === 'ios'}
+      style={{ paddingHorizontal: props.isPadding ? 30 : 0 }}>
+      <View
+        style={{
+          flexDirection: 'row',
+          width: '100%',
+          justifyContent: 'space-between',
+        }}>
         <Button
           secondButton={secondButton}
           style={[
+            {
+              borderWidth: colorTxt1 ? 1 : 0,
+              borderColor: colorTxt1 ? colorTxt1 : null,
+            },
             secondButton
-              ? { backgroundColor: secondColorCustom || styles.secodaryBtn }
+              ? { backgroundColor: firstColorCustom || styles.primaryBtn }
               : color
-              ? color
-              : styles.secodaryBtn,
+              ? { backgroundColor: color }
+              : styles.primaryBtn,
+            ,
+            { width: widthButton },
           ]}
-          onPress={secondButtonClick}
+          onPress={firstButtonClick}
           disabled={disabled}>
           <OText color={theme.colors.white} size={16} mLeft={20}>
             {btnLeftValueShow ? btnLeftValue : ''}
@@ -98,16 +83,49 @@ const FloatingButtonUI = (props: FloatingButtonParams) => {
 
           <OText
             style={styles.btnTextStyle}
-            color={theme.colors.white}
-            size={16}>
-            {secondBtnText}
+            color={colorTxt1 ? colorTxt1 : theme.colors.white}
+            numberOfLines={2}
+            adjustsFontSizeToFit>
+            {btnText}
           </OText>
 
           <OText color={theme.colors.white} size={16} mRight={20}>
             {btnRightValueShow ? btnRightValue : ''}
           </OText>
         </Button>
-      )}
+
+        {secondButton && (
+          <Button
+            secondButton={secondButton}
+            style={[
+              secondButton
+                ? { backgroundColor: secondColorCustom || styles.secodaryBtn }
+                : color
+                ? color
+                : styles.secodaryBtn,
+              ,
+              { width: widthButton },
+            ]}
+            onPress={secondButtonClick}
+            disabled={disabled}>
+            <OText color={theme.colors.white} size={16} mLeft={20}>
+              {btnLeftValueShow ? btnLeftValue : ''}
+            </OText>
+
+            <OText
+              style={styles.btnTextStyle}
+              color={theme.colors.white}
+              numberOfLines={2}
+              adjustsFontSizeToFit>
+              {secondBtnText}
+            </OText>
+
+            <OText color={theme.colors.white} size={16} mRight={20}>
+              {btnRightValueShow ? btnRightValue : ''}
+            </OText>
+          </Button>
+        )}
+      </View>
     </Container>
   );
 };

package/themes/business/src/components/FloatingButton/styles.tsx

@@ -6,18 +6,16 @@ export const Container = styled.View`
   flex: 1;
   bottom: 0px;
   left: 0;
-  padding: 10px;
+  padding-vertical: 10px;
   width: 100%;
   display: flex;
-  align-items: center;
   justify-content: center;
   background-color: #fff;
   z-index: 1000;
-
   ${(props: any) =>
     props.isIos &&
     css`
-      padding-bottom: 20px;
+      padding-bottom: 5px;
     `}
 `;
 
@@ -28,7 +26,6 @@ export const Button = styled.TouchableOpacity`
   align-items: center;
   border-radius: 7px;
   height: 50px;
-  margin-horizontal: 10px;
 
   ${(props: any) =>
     css`

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, View, SafeAreaView } from 'react-native';
 import MapView, { PROVIDER_GOOGLE, Marker, Region } from 'react-native-maps';
 import Geocoder from 'react-native-geocoding';
 import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
@@ -37,7 +37,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   const [{ optimizeImage }] = useUtils();
   const { width, height } = Dimensions.get('window');
   const ASPECT_RATIO = width / height;
-  const [isMapReady, setIsMapReady] = useState(false)
+  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,
@@ -217,9 +217,9 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   }, [saveLocation]);
 
   useEffect(() => {
-      if (mapRef.current && locations && isMapReady) {
-        fitAllMarkers();
-      }
+    if (mapRef.current && locations && isMapReady) {
+      fitAllMarkers();
+    }
   }, [isMapReady]);
 
   const styles = StyleSheet.create({
@@ -252,7 +252,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
   });
 
   return (
-    <>
+    <SafeAreaView style={{ flex: 1 }}>
       <View style={{ flex: 1, position: 'relative' }}>
         <MapView
           provider={PROVIDER_GOOGLE}
@@ -269,7 +269,7 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           cacheEnabled
           moveOnMarkerPress
           ref={mapRef}
-          onMapReady = {() => setIsMapReady(true)}>
+          onMapReady={() => setIsMapReady(true)}>
           {locations ? (
             <>
               {MARKERS &&
@@ -330,6 +330,8 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           secondButton={false}
           firstColorCustom={theme.colors.red}
           secondColorCustom={theme.colors.green}
+          widthButton={'100%'}
+          isPadding
         />
       )}
       <View style={styles.buttonContainer}>
@@ -340,6 +342,6 @@ export const GoogleMap = (props: GoogleMapsParams) => {
           onClick={() => handleArrowBack()}
         />
       </View>
-    </>
+    </SafeAreaView>
   );
 };