ordering-ui-react-native 0.11.59 → 0.11.60

package/package.json

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

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

@@ -0,0 +1,286 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Dimensions, SafeAreaView, StyleSheet, View } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native'
+import MapView, {
+  PROVIDER_GOOGLE,
+  Marker,
+  Callout
+} from 'react-native-maps';
+import { useLanguage, useSession, MapView as MapViewController } from 'ordering-components/native';
+import { MapViewParams } from '../../types';
+import Alert from '../../providers/AlertProvider';
+import { useTheme } from 'styled-components/native';
+import { useLocation } from '../../hooks/useLocation';
+import Icon from 'react-native-vector-icons/FontAwesome5';
+import { OIcon, OText } from '../shared'
+
+const MapViewComponent = (props: MapViewParams) => {
+
+  const {
+    onNavigationRedirect,
+    isLoadingBusinessMarkers,
+    getBusinessLocations,
+    markerGroups,
+    customerMarkerGroups
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+  const [{ user }] = useSession()
+  const { width, height } = Dimensions.get('window');
+  const ASPECT_RATIO = width / height;
+  const mapRef = useRef<MapView>(null);
+  const following = useRef<boolean>(true);
+  const [isFocused, setIsFocused] = useState(false)
+  const [locationSelected, setLocationSelected] = useState<any>(null)
+  const [alertState, setAlertState] = useState<{
+    open: boolean;
+    content: Array<string>;
+    key?: string | null;
+  }>({ open: false, content: [], key: null });
+
+  const {
+    initialPosition,
+    userLocation,
+    stopFollowUserLocation,
+    followUserLocation
+  } = useLocation();
+
+  const location = { lat: userLocation.latitude, lng: userLocation.longitude }
+
+  const closeAlert = () => {
+    setAlertState({
+      open: false,
+      content: [],
+    });
+  };
+
+  const fitCoordinates = (location?: any) => {
+    if (mapRef.current) {
+      mapRef.current.fitToCoordinates(
+        [
+          { latitude: location.latitude, longitude: location.longitude },
+          {
+            latitude: userLocation.latitude,
+            longitude: userLocation.longitude,
+          },
+        ],
+        {
+          edgePadding: { top: 120, right: 120, bottom: 120, left: 120 },
+        },
+      );
+    }
+  };
+
+  useEffect(() => {
+    fitCoordinates(locationSelected || userLocation);
+  }, [userLocation, locationSelected]);
+
+
+  useEffect(() => {
+    if (isFocused) {
+      getBusinessLocations()
+    }
+  }, [isFocused])
+
+  useEffect(() => {
+    followUserLocation();
+
+    return () => {
+      stopFollowUserLocation();
+    };
+  }, []);
+
+
+  useFocusEffect(
+    useCallback(() => {
+      setIsFocused(true)
+      return () => {
+        stopFollowUserLocation()
+        setIsFocused(false)
+        setLocationSelected(null)
+      }
+    }, [])
+  )
+
+  const styles = StyleSheet.create({
+    image: {
+      borderRadius: 50,
+    },
+    view: {
+      width: 25,
+      position: 'absolute',
+      top: 6,
+      left: 6,
+      bottom: 0,
+      right: 0,
+    },
+  });
+
+  const RenderMarker = ({ marker, customer, orderIds }: { marker: any, customer?: boolean, orderIds?: Array<number> }) => {
+    const markerRef = useRef<any>()
+    useEffect(() => {
+      if (
+        markerRef?.current?.props?.coordinate?.latitude === locationSelected?.latitude &&
+        markerRef?.current?.props?.coordinate?.longitude === locationSelected?.longitude
+      ) {
+        markerRef?.current?.showCallout()
+      } else {
+        markerRef?.current?.hideCallout()
+      }
+    }, [locationSelected])
+
+    return (
+      <Marker
+        key={customer ? marker?.customer?.id : marker?.business?.id}
+        coordinate={{
+          latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
+          longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+        }}
+        onPress={() =>
+          setLocationSelected({
+            latitude: customer ? marker?.customer?.location?.lat : marker?.business?.location?.lat,
+            longitude: customer ? marker?.customer?.location?.lng : marker?.business?.location?.lng
+          })
+        }
+        ref={(ref) => markerRef.current = ref}
+      >
+        <Icon
+          name="map-marker"
+          size={50}
+          color={theme.colors.primary}
+        />
+        <View style={styles.view}>
+          <OIcon
+            style={styles.image}
+            src={{ uri: customer ? marker?.customer?.photo : marker?.business?.logo }}
+            width={25}
+            height={25}
+          />
+        </View>
+        <Callout
+          onPress={() => !!orderIds && orderIds.toString().includes(',') ? onNavigationRedirect('Orders') : onNavigationRedirect('OrderDetails', { order: marker })}
+        >
+          <View style={{ flex: 1, width: 200, padding: 5 }}>
+            <OText weight='bold'>{customer ? `${marker?.customer?.name} ${marker?.customer?.lastname}` : marker?.business?.name}</OText>
+            <OText>
+              {!!orderIds && orderIds.toString().includes(',') ? (
+                <>
+                  {t('ORDER_NUMBERS', 'Order Numbers')} {orderIds}
+                </>
+              ) : (
+                <>
+                  {t('ORDER_NUMBER', 'Order No.')} {marker?.id}
+                </>
+              )}
+            </OText>
+            <OText>{customer ? marker?.customer?.address : marker?.business?.address}</OText>
+            {((customer && marker?.customer?.city?.address_notes) || !customer) && (
+              <OText>{customer ? marker?.customer?.city?.address_notes : marker?.business?.city?.name}</OText>
+            )}
+            {((customer && marker?.business?.zipcode) || (!customer && marker?.business?.zipcode)) && (
+              <OText>{customer ? marker?.customer?.zipcode : marker?.business?.zipcode}</OText>
+            )}
+            {customer && marker?.customer?.internal_number && (
+              <OText>{marker?.customer?.internal_number}</OText>
+            )}
+            <OText textDecorationLine='underline' color={theme.colors.primary}>
+              {!!orderIds && orderIds.toString().includes(',') ? (
+                <>
+                  {t('SHOW_ORDERS', 'Show orders')}
+                </>
+              ) : (
+                <>
+                  {t('MORE_INFO', 'More info')}
+                </>
+              )}
+            </OText>
+          </View>
+        </Callout>
+      </Marker>
+    )
+  }
+  return (
+    <SafeAreaView style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
+        <View style={{ flex: 1 }}>
+          {typeof initialPosition?.latitude === 'number' && !isLoadingBusinessMarkers && isFocused && (
+            <MapView
+              ref={mapRef}
+              provider={PROVIDER_GOOGLE}
+              initialRegion={{
+                latitude: initialPosition.latitude,
+                longitude: initialPosition.longitude,
+                latitudeDelta: 0.01,
+                longitudeDelta: 0.01 * ASPECT_RATIO,
+              }}
+              style={{ flex: 1 }}
+              zoomTapEnabled
+              zoomEnabled
+              zoomControlEnabled
+              cacheEnabled
+              moveOnMarkerPress
+              onTouchStart={() => (following.current = false)}
+            >
+              <>
+                {Object.values(markerGroups).map((marker: any) => (
+                  <RenderMarker
+                    key={marker[0]?.business_id}
+                    marker={marker[0]}
+                    orderIds={marker.map((order: any) => order.id).join(', ')}
+                  />
+                ))}
+                {Object.values(customerMarkerGroups).map((marker: any) => (
+                  <RenderMarker
+                    key={marker[0]?.customer_id}
+                    marker={marker[0]}
+                    orderIds={marker.map((order: any) => order.id).join(', ')}
+                    customer
+                  />
+                ))}
+                <Marker
+                  coordinate={{
+                    latitude: location.lat,
+                    longitude: location.lng,
+                  }}
+                  title={t('YOUR_LOCATION', 'Your Location')}
+                >
+                  <Icon
+                    name="map-marker"
+                    size={50}
+                    color={theme.colors.primary}
+                  />
+                  <View style={styles.view}>
+                    <OIcon
+                      style={styles.image}
+                      src={{ uri: user.photo }}
+                      width={25}
+                      height={25}
+                    />
+                  </View>
+                </Marker>
+              </>
+            </MapView>
+          )}
+        </View>
+      </View>
+      <View>
+        <Alert
+          open={alertState.open}
+          onAccept={closeAlert}
+          onClose={closeAlert}
+          content={alertState.content}
+          title={t('ERROR', 'Error')}
+        />
+      </View>
+    </SafeAreaView >
+  );
+};
+
+export const MapViewUI = (props: any) => {
+  const MapViewProps = {
+    ...props,
+    UIComponent: MapViewComponent
+  }
+  return <MapViewController {...MapViewProps} />
+}

package/themes/business/src/components/shared/OText.tsx

@@ -23,6 +23,7 @@ const SText = styled.Text`
     css`
       flex: ${props.weight ? 1 : 0};
     `};
+  text-decoration: ${(props : any) => props.textDecorationLine};
 `;
 interface Props {
   color?: string;
@@ -39,6 +40,7 @@ interface Props {
   numberOfLines?: number;
   ellipsizeMode?: string;
   adjustsFontSizeToFit?: boolean;
+  textDecorationLine?: string
 }
 
 const OText = (props: Props): React.ReactElement => {

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

@@ -539,3 +539,11 @@ export interface AcceptOrRejectOrderParams {
   titleReject?: textTranslate;
   appTitle?: textTranslate;
 }
+
+export interface MapViewParams {
+  onNavigationRedirect: (page : string, params ?: any) => void,
+  getBusinessLocations: () => void,
+  isLoadingBusinessMarkers?: boolean,
+  markerGroups: Array<any>,
+  customerMarkerGroups: Array<any>
+}

package/themes/kiosk/src/components/OrderDetails/index.tsx

@@ -27,7 +27,7 @@ import {
 import { OrderDetailsParams, Product } from '../../types'
 import { Container } from '../../layouts/Container';
 import NavBar from '../../components/NavBar';
-import { OButton, OImage, OInput, OText } from '../../components/shared';
+import { OButton, OIconButton, OImage, OInput, OText } from '../../components/shared';
 import GridContainer from '../../layouts/GridContainer';
 import OptionSwitch, { Opt } from '../../components/shared/OOptionToggle';
 import { verifyDecimals } from '../../../../../src/utils'
@@ -35,6 +35,7 @@ import { LANDSCAPE, PORTRAIT, useDeviceOrientation } from '../../../../../src/ho
 import { useTheme } from 'styled-components/native'
 import { _retrieveStoreData } from '../../../../../src/providers/StoreUtil';
 import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons'
+import EvilIcons from 'react-native-vector-icons/EvilIcons'
 const _EMAIL = 'email';
 const _SMS = 'sms';
 
@@ -335,7 +336,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       </OSInputWrapper>
 
       <OButton
-        text={`${t('YOU_ARE_DONE', 'You are done')}!`}
+        text={`${t('YOU_ARE_DONE', 'You are done! Click to close')}!`}
         onClick={() => {
           navigation.reset({
             routes: [{ name: 'Intro' }],
@@ -493,18 +494,46 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
         <>
           <Container>
             <NavBar
-              title={t('TAKE_YOUR_RECEIPT', 'Take your receipt')}
+              title={t('BACK_BUTTON_CONFIRMATION', 'Confirmation')}
               style={{ right: 10 }}
+              rightComponent={
+                <OIconButton
+                  bgColor="transparent"
+                  borderColor="transparent"
+                  RenderIcon={() => 
+                      <EvilIcons
+                        name={'close'}
+                        size={40}
+                        color={theme.colors.primary}
+                      />
+                  }
+                  style={{ flex:1, justifyContent: 'flex-end', left: 30 }}
+                  onClick={() => {
+                    navigation.reset({
+                      routes: [{ name: 'Intro' }],
+                    });
+                  }}
+                />
+              }
             />
 
             <View style={{
               marginVertical: orientationState?.dimensions?.height * 0.03,
               flexDirection: orientationState?.orientation === PORTRAIT ? 'column' : 'row',
             }}>
+              <View
+                style={{
+                  flex: 1,
+                  marginVertical: orientationState?.orientation === PORTRAIT ? 40 : 0,
+                }}
+              >
+                {orderDetailsContent}
+              </View>
               <View style={{
-                flex: 1,
+                flex: 1.1,
                 marginRight: orientationState?.orientation === PORTRAIT ? 0 : 20,
-                justifyContent: 'space-between'
+                justifyContent: 'space-between',
+                marginLeft: 20
               }}>
                 <View>
                   <OText
@@ -523,22 +552,13 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   <OText
                     size={orientationState?.dimensions?.width * (orientationState?.orientation === PORTRAIT ? 0.04 : 0.025)}
                   >
-                    {t('TO_FINISH_TAKE_YOUR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER', 'To finish take your receipt and go to the front counter.')}
+                    {t('TO_FINISH_TAKE_YOUR_RECEIPT_AND_GO_TO_THE_FRONT_COUNTER', "We`ve received your order and we will call you by your name or your order number.")}
                   </OText>
 
                 </View>
 
                 {orientationState?.orientation === LANDSCAPE && actionsContent}
               </View>
-
-              <View
-                style={{
-                  flex: 1.4,
-                  marginVertical: orientationState?.orientation === PORTRAIT ? 40 : 0,
-                }}
-              >
-                {orderDetailsContent}
-              </View>
             </View>
           </Container>