ordering-ui-react-native 0.12.14 → 0.12.18

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

@@ -0,0 +1,525 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Dimensions, Platform, SafeAreaView, StyleSheet, View } from 'react-native';
+import MapView, {
+  PROVIDER_GOOGLE,
+  Marker
+} from 'react-native-maps';
+import Geocoder from 'react-native-geocoding';
+import { useLanguage, useConfig, useUtils } from 'ordering-components/native';
+import { GoogleMapsParams } from '../../types';
+import Alert from '../../providers/AlertProvider';
+import { OIconButton, OIcon, OFab, OText, OLink } from '../shared';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import { useTheme } from 'styled-components/native';
+import { useLocation } from '../../hooks/useLocation';
+// import MapViewDirections from 'react-native-maps-directions';
+import { FloatingButton } from '../FloatingButton';
+
+export const DriverMap = (props: GoogleMapsParams) => {
+  const {
+    location,
+    maxLimitLocation,
+    markerTitle,
+    handleOpenMapView,
+    showAcceptOrReject,
+    saveLocation,
+    setSaveLocation,
+    order,
+    isSetInputs,
+    orderStatus,
+    isBusinessMarker,
+    isToFollow,
+    handleViewActionOrder,
+    updateDriverPosition,
+    driverUpdateLocation,
+    setDriverUpdateLocation,
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [configState] = useConfig();
+  const { width, height } = Dimensions.get('window');
+  const ASPECT_RATIO = width / height;
+  const mapRef = useRef<MapView>(null);
+  const following = useRef<boolean>(true);
+  const autoFit = useRef<boolean>(true);
+  const googleMapsApiKey = configState?.configs?.google_maps_api_key?.value;
+  const [travelTime, setTravelTime] = useState(0);
+  const [distancesFromTwoPlacesKm, setDistancesFromTwoPlacesKm] = useState(0);
+  const [isMin, setIsMin] = useState(false);
+  const [{ parseDate }] = useUtils();
+  const mapErrors: any = {
+    ERROR_NOT_FOUND_ADDRESS: "Sorry, we couldn't find an address",
+    ERROR_MAX_LIMIT_LOCATION_TO: 'Sorry, You can only set the position to',
+  };
+  const [alertState, setAlertState] = useState<{
+    open: boolean;
+    content: Array<string>;
+    key?: string | null;
+  }>({ open: false, content: [], key: null });
+
+  const {
+    hasLocation,
+    initialPosition,
+    followUserLocation,
+    getCurrentLocation,
+    userLocation,
+    stopFollowUserLocation,
+  } = useLocation();
+
+  const origin = {
+    latitude: initialPosition.latitude,
+    longitude: initialPosition.longitude,
+  };
+  const destination = { latitude: location.lat, longitude: location.lng };
+
+  useEffect(() => {
+    if (isToFollow) {
+      fitCoordinates();
+      followUserLocation();
+
+      return () => {
+        stopFollowUserLocation();
+      };
+    }
+  }, []);
+
+  const setMapErrors = (errKey: string) => {
+    setAlertState({
+      open: true,
+      content: !(errKey === 'ERROR_MAX_LIMIT_LOCATION_TO')
+        ? [t(errKey, mapErrors[errKey])]
+        : [
+            `${t(errKey, mapErrors[errKey])} ${maxLimitLocation} ${t(
+              'METTERS',
+              'meters',
+            )}`,
+          ],
+      key: errKey,
+    });
+  };
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: [],
+    });
+  };
+
+  const calculateDistance = (
+    pointA: { lat: number; lng: number },
+    pointB: { latitude: number; longitude: number },
+  ) => {
+    const lat1 = pointA.lat;
+    const lon1 = pointA.lng;
+
+    const lat2 = pointB.latitude;
+    const lon2 = pointB.longitude;
+
+    const R = 6371e3;
+    const φ1 = lat1 * (Math.PI / 180);
+    const φ2 = lat2 * (Math.PI / 180);
+    const Δφ = (lat2 - lat1) * (Math.PI / 180);
+    const Δλ = (lon2 - lon1) * (Math.PI / 180);
+
+    const a =
+      Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+      Math.cos(φ1) * Math.cos(φ2) * (Math.sin(Δλ / 2) * Math.sin(Δλ / 2));
+
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+    const distance = R * c;
+    const distanceInKm = distance / 1000;
+    const estimatedTimeTravel = distance / userLocation.speed / 60;
+    const time =
+      estimatedTimeTravel > 60 ? estimatedTimeTravel / 60 : estimatedTimeTravel;
+    setIsMin(estimatedTimeTravel < 60);
+    const timeEstimated = userLocation.speed > 0 ? time : travelTime;
+    setDistancesFromTwoPlacesKm(distanceInKm);
+    setTravelTime(timeEstimated);
+    return distance;
+  };
+
+  useEffect(() => {
+    if (driverUpdateLocation.error) {
+      stopFollowUserLocation();
+      setAlertState({
+        open: true,
+        content: [
+          `${driverUpdateLocation.error[0] || driverUpdateLocation.error}. ${t(
+            'TRY_AGAIN',
+            'Try Again',
+          )}`,
+        ],
+      });
+    }
+  }, [driverUpdateLocation.error]);
+
+  useEffect(() => {
+    if (driverUpdateLocation.error) return;
+
+    calculateDistance(
+      { lat: userLocation.latitude, lng: userLocation.longitude },
+      destination,
+    );
+    // geocodePosition(userLocation);
+
+    if (!following.current) return;
+    fitCoordinates();
+
+    const { latitude, longitude } = userLocation;
+
+    mapRef.current?.animateCamera({
+      center: { latitude, longitude },
+    });
+
+  }, [userLocation]);
+
+  const handleArrowBack: any = () => {
+    setDriverUpdateLocation?.({
+      ...driverUpdateLocation,
+      error: null,
+      newLocation: null,
+    });
+    handleOpenMapView && handleOpenMapView();
+  };
+
+  const centerPosition = async () => {
+    const { latitude, longitude } = await getCurrentLocation();
+
+    following.current = true;
+    if (mapRef.current) {
+      mapRef.current.animateToRegion(
+        {
+          latitude: latitude,
+          longitude: longitude,
+          latitudeDelta: 0.001,
+          longitudeDelta: 0.001 * ASPECT_RATIO,
+        },
+        2000,
+      );
+
+      // mapRef.current?.animateCamera({
+      //   center: { latitude, longitude },
+      // });
+    }
+  };
+
+  const colors: any = {
+    //BLUE
+    0: theme.colors.statusOrderBlue,
+    3: theme.colors.statusOrderBlue,
+    4: theme.colors.statusOrderBlue,
+    7: theme.colors.statusOrderBlue,
+    8: theme.colors.statusOrderBlue,
+    9: theme.colors.statusOrderBlue,
+    13: theme.colors.statusOrderBlue,
+    14: theme.colors.statusOrderBlue,
+    18: theme.colors.statusOrderBlue,
+    19: theme.colors.statusOrderBlue,
+    20: theme.colors.statusOrderBlue,
+    21: theme.colors.statusOrderBlue,
+    //GREEN
+    1: theme.colors.statusOrderGreen,
+    11: theme.colors.statusOrderGreen,
+    15: theme.colors.statusOrderGreen,
+    //RED
+    2: theme.colors.statusOrderRed,
+    5: theme.colors.statusOrderRed,
+    6: theme.colors.statusOrderRed,
+    10: theme.colors.statusOrderRed,
+    12: theme.colors.statusOrderRed,
+    16: theme.colors.statusOrderRed,
+    17: theme.colors.statusOrderRed,
+  };
+
+  const fitCoordinates = () => {
+    if (mapRef.current) {
+      mapRef.current.fitToCoordinates(
+        [
+          { latitude: location.lat, longitude: location.lng },
+          {
+            latitude: initialPosition.latitude,
+            longitude: initialPosition.longitude,
+          },
+        ],
+        {
+          edgePadding: { top: 80, right: 80, bottom: 80, left: 80 },
+          animated: true,
+        },
+      );
+    }
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (initialPosition.latitude !== 0 && autoFit.current) {
+        if (mapRef.current) {
+          fitCoordinates();
+          autoFit.current = false;
+        }
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [initialPosition]);
+
+  const fitCoordinatesZoom = () => {
+    following.current = false;
+    fitCoordinates();
+  };
+
+  const styles = StyleSheet.create({
+    map: {
+      flex: 1,
+      ...StyleSheet.absoluteFillObject,
+    },
+    image: {
+      borderRadius: 50,
+    },
+    view: {
+      width: 25,
+      position: 'absolute',
+      top: 6,
+      left: 6,
+      bottom: 0,
+      right: 0,
+    },
+    driverIcon: {
+      height: 25,
+      width: 25,
+      backgroundColor: theme.colors.white,
+      borderRadius: 100,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    buttonBack: {
+      borderWidth: 0,
+      maxWidth: 40,
+      alignItems: 'flex-start',
+      justifyContent: 'flex-end',
+    },
+    facContainer: {
+      position: 'absolute',
+      top: 0,
+      zIndex: 9999,
+      width: '100%',
+      backgroundColor: theme.colors.white,
+      paddingHorizontal: 30,
+      paddingTop: 30,
+    },
+    facOrderStatus: {
+      flexDirection: 'row',
+      borderBottomWidth: 11,
+      minHeight: 70,
+      borderBottomColor: theme.colors.inputChat,
+      paddingVertical: 5,
+    },
+    facDistance: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      minHeight: 75,
+    },
+    arrowDistance: {
+      borderWidth: 0,
+    },
+  });
+
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <View 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 ? (
+              <>
+                <Marker
+                  coordinate={{
+                    latitude: location.lat,
+                    longitude: location.lng,
+                  }}
+                  title={location.title}>
+                  <Icon
+                    name="map-marker"
+                    size={50}
+                    color={theme.colors.primary}
+                  />
+                  <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: '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={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
+                color={theme.colors.unselectText}
+                size={13}
+                numberOfLines={2}
+                adjustsFontSizeToFit>
+                {`${travelTime.toFixed(2)} - ${
+                  isMin ? t('MINNUTES', 'mins') : t('HOURS', 'hours')
+                } ${distancesFromTwoPlacesKm.toFixed(2)} km`}
+              </OText>
+            </View>
+          </View>
+        </View>
+        <View>
+          <OLink
+            PressStyle={{paddingHorizontal: 80, paddingVertical: 10,bottom: showAcceptOrReject ? 80 : 0}}
+            hasButton
+            url={Platform.select({
+              ios: `maps:0,0?q=${destination.latitude},${destination.longitude}`,
+              android: `geo:0,0?q=${destination.latitude},${destination.longitude}`,
+            })}
+            shorcut={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+          />
+        </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}
+            widthButton={'45%'}
+            isPadding
+          />
+        )}
+
+        <Alert
+          open={alertState.open}
+          onAccept={closeAlert}
+          onClose={closeAlert}
+          content={alertState.content}
+          title={t('ERROR', 'Error')}
+        />
+      </View>
+    </SafeAreaView>
+  );
+};

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

@@ -0,0 +1,141 @@
+import React from 'react';
+import { FloatingButton as FloatingButtonController } from 'ordering-components/native';
+import { FloatingButtonParams } from '../../types';
+import { Container, Button } from './styles';
+import { OText } from '../shared';
+import { StyleSheet, Platform, View } from 'react-native';
+import { useTheme } from 'styled-components/native';
+
+const FloatingButtonUI = (props: FloatingButtonParams) => {
+  const {
+    btnLeftValue,
+    btnRightValue,
+    btnLeftValueShow,
+    btnRightValueShow,
+    btnText,
+    colorTxt1,
+    secondBtnText,
+    firstColorCustom,
+    secondColorCustom,
+    secondButtonClick,
+    firstButtonClick,
+    disabled,
+    color,
+    isSecondaryBtn,
+    secondButton,
+    widthButton,
+    isPadding,
+  } = props;
+
+  const theme = useTheme();
+
+  const styles = StyleSheet.create({
+    primaryBtn: {
+      backgroundColor: theme.colors.primary,
+    },
+    secodaryBtn: {
+      backgroundColor: theme.colors.textSecondary,
+    },
+    btnTextStyle: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+      paddingHorizontal: 10,
+      paddingVertical: 10,
+      position: 'absolute',
+      width: '100%',
+      left: 0,
+      textAlign: 'center',
+    },
+  });
+
+  return (
+    <Container
+      isIos={Platform.OS === 'ios'}
+      paddingBottomIos={props.paddingBottomIos}
+      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: firstColorCustom || styles.primaryBtn }
+              : color
+              ? { backgroundColor: color }
+              : styles.primaryBtn,
+            ,
+            { width: widthButton },
+          ]}
+          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}
+            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>
+  );
+};
+
+export const FloatingButton = (props: FloatingButtonParams) => {
+  const floatingButtonProps = {
+    ...props,
+    UIComponent: FloatingButtonUI,
+  };
+
+  return <FloatingButtonController {...floatingButtonProps} />;
+};

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

@@ -0,0 +1,35 @@
+import styled, { css } from 'styled-components/native';
+
+export const Container = styled.View`
+  flex-direction: row;
+  position: absolute;
+  flex: 1;
+  bottom: 0px;
+  left: 0;
+  padding-vertical: 10px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  background-color: #fff;
+  z-index: 1000;
+  ${(props: any) =>
+    props.isIos &&
+    css`
+      padding-bottom: ${(props: any) => props.paddingBottomIos ? `${props.paddingBottomIos}px` : '5px'};
+    `}
+`;
+
+export const Button = styled.TouchableOpacity`
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 7px;
+  height: 50px;
+
+  ${(props: any) =>
+    css`
+      width: ${props.secondButton ? '45%' : '100%'};
+    `}
+  flex-direction: row;
+`;