ordering-ui-react-native 0.12.14 → 0.12.18

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { LogoutAction } from 'ordering-components/native';
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { OIcon, OText } from '../shared';
+import { _retrieveStoreData, _clearStoreData } from '../../providers/StoreUtil';
+
+const LogoutButtonUI = (props: any) => {
+  const { handleLogoutClick } = props;
+  const [, t] = useLanguage();
+  const theme = useTheme();
+
+  const handleClick = async () => {
+    const data = await _retrieveStoreData('notification_state');
+    const res = await handleLogoutClick(data);
+    if (res) {
+      _clearStoreData({ excludedKeys: ['project_name'] });
+    }
+  };
+
+  const styles = StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      flexDirection: 'row',
+      marginBottom: 40,
+    },
+    text: {
+      color: theme.colors.textGray,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 16,
+      marginRight: 10,
+    },
+  });
+
+  return (
+    <TouchableOpacity style={styles.container} onPress={() => handleClick()}>
+      <OText space style={styles.text}>
+        {t('LOGOUT', 'logout')}
+      </OText>
+
+      <OIcon
+        src={theme.images.general.menulogout}
+        width={18}
+        height={18}
+        color={theme.colors.disabledContrast}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export const LogoutButton = (props: any) => {
+  const logoutProps = {
+    ...props,
+    isNative: true,
+    UIComponent: LogoutButtonUI,
+  };
+
+  return <LogoutAction {...logoutProps} />;
+};

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

@@ -0,0 +1,317 @@
+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, OFab } from '../shared'
+const MapViewComponent = (props: MapViewParams) => {
+
+  const {
+    isLoadingBusinessMarkers,
+    markerGroups,
+    customerMarkerGroups,
+    alertState,
+    setAlertState,
+    onNavigationRedirect,
+    getBusinessLocations,
+  } = 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 | any>(null);
+  const following = useRef<boolean>(true);
+  const [isFocused, setIsFocused] = useState(false)
+  const [locationSelected, setLocationSelected] = useState<any>(null)
+  const {
+    initialPosition,
+    userLocation,
+    stopFollowUserLocation,
+    followUserLocation
+  } = useLocation();
+
+  const location = { lat: userLocation.latitude, lng: userLocation.longitude }
+  const haveOrders = Object.values(markerGroups)?.length > 0 && Object.values(customerMarkerGroups)?.length > 0
+  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 },
+        },
+      );
+    }
+  };
+
+  const onPressZoomIn = () => {
+    const lastRegion = mapRef?.current?.__lastRegion
+    mapRef?.current && mapRef.current.animateToRegion({
+      ...mapRef?.current?.__lastRegion,
+      longitudeDelta: lastRegion.longitudeDelta / 8,
+      latitudeDelta: lastRegion.longitudeDelta / 8
+    })
+  }
+
+  const onPressZoomOut = () => {
+    const lastRegion = mapRef?.current?.__lastRegion
+    mapRef?.current && mapRef.current.animateToRegion({
+      ...lastRegion,
+      longitudeDelta: lastRegion.longitudeDelta * 8,
+      latitudeDelta: lastRegion.longitudeDelta * 8
+    })
+  }
+
+  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()
+      }
+    }, [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 }}>
+        {!isLoadingBusinessMarkers && isFocused && (
+          <View style={{ flex: 1 }}>
+            <MapView
+              ref={mapRef}
+              provider={PROVIDER_GOOGLE}
+              initialRegion={{
+                latitude: initialPosition.latitude,
+                longitude: initialPosition.longitude,
+                latitudeDelta: haveOrders ? 0.01 : 0.1,
+                longitudeDelta: haveOrders ? 0.01 * ASPECT_RATIO : 0.1 * 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>
+            <OFab
+              materialIcon
+              iconName="plus"
+              onPress={() => onPressZoomIn()}
+              style={{
+                position: 'absolute',
+                bottom: 75,
+                right: 20,
+              }}
+            />
+            <OFab
+              materialIcon
+              iconName="minus"
+              onPress={() => onPressZoomOut()}
+              style={{
+                position: 'absolute',
+                bottom: 35,
+                right: 20,
+              }}
+            />
+          </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 2/MessagesOption/index.tsx

@@ -0,0 +1,337 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Pressable,
+  StyleSheet,
+  Dimensions,
+  ScrollView,
+} from 'react-native';
+import { Contacts, useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import { OText, OButton } from '../shared';
+import { NotFoundSource } from '../NotFoundSource';
+import { PreviousMessages } from '../PreviousMessages';
+// import { Contacts } from '../Contacts';
+import { FiltersTab, TabsContainer, TagsContainer, Tag } from './styles';
+import { MessagesOptionParams } from '../../types';
+import { useDeviceOrientation } from '../../../../../src/hooks/DeviceOrientation';
+const MessagesOptionUI = (props: MessagesOptionParams) => {
+  const {
+    orders,
+    setOrders,
+    loadMore,
+    pagination,
+    messages,
+    onNavigationRedirect,
+    setSortBy,
+  } = props;
+
+  const theme = useTheme();
+  const [, t] = useLanguage();
+
+  const { loading, error, data: values } = orders;
+  const [{ dimensions }] = useDeviceOrientation();
+  const tabs = [
+    { key: 0, text: t('ORDERS', 'Orders'), tags: [0, 1] },
+    // { key: 1, text: t('CONTACTS', 'Contacts'), tags: [2, 3, 4] },
+  ];
+
+  const tags = [
+    {
+      key: 0,
+      text: t('NEWEST', 'Newest'),
+      sortBy: { param: 'last_direct_message_at', direction: 'asc' },
+    },
+    {
+      key: 1,
+      text: t('ORDER_NUMBER', 'Order number'),
+      sortBy: { param: 'id', direction: 'desc' },
+    },
+    { key: 2, text: t('BUSINESSES', 'Businesses') },
+    { key: 3, text: t('CUSTOMERS', 'Customers') },
+    { key: 4, text: t('DRIVERS', 'Drivers') },
+  ];
+
+  const [tabsFilter, setTabsFilter] = useState(tabs[0].tags);
+  const [activeTag, setActiveTag] = useState(tags[0].key);
+  const [reload, setReload] = useState(false);
+  const [unreadMessages, setUnreadMessages] = useState(
+    values?.reduce(
+      (total: number, order: any) => total + order.unread_count,
+      0,
+    ),
+  );
+
+  const [orientation, setOrientation] = useState(
+    Dimensions.get('window').width < Dimensions.get('window').height
+      ? 'Portrait'
+      : 'Landscape',
+  );
+
+  const getTagFilter = (key: number) => {
+    return tags.find(value => value.key === key)?.text;
+  };
+
+  const handleChangeTab = (tags: number[]) => {
+    const key = tags[0];
+
+    setTabsFilter(tags);
+    setActiveTag(key);
+
+    if (tabs[0].tags.includes(key)) {
+      setSortBy({ param: 'last_direct_message_at', direction: 'asc' });
+      setReload(true);
+    }
+  };
+
+  const handleChangeTag = (key: number) => {
+    if (activeTag !== key) {
+      const tag = tags.find(tag => tag.key === key);
+      setActiveTag(key);
+
+      if (tabs[0].tags.includes(key)) {
+        setSortBy(tag?.sortBy);
+        setReload(true);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (reload && !loading) {
+      setReload(!reload);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    setUnreadMessages(
+      values?.reduce(
+        (total: number, order: any) => total + order.unread_count,
+        0,
+      ),
+    );
+  }, [orders]);
+
+  Dimensions.addEventListener('change', ({ window: { width, height } }) => {
+    if (width < height) {
+      setOrientation('Portrait');
+    } else {
+      setOrientation('Landscape');
+    }
+  });
+
+  const styles = StyleSheet.create({
+    header: {
+      marginBottom: 25,
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    title: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 26,
+      color: theme.colors.textGray,
+    },
+    icons: {
+      flexDirection: 'row',
+    },
+    tab: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontSize: 16,
+      paddingBottom: 5,
+      marginBottom: -1,
+      zIndex: 100,
+      borderColor: theme.colors.textGray,
+    },
+    tagsContainer: {
+      marginBottom: 20,
+    },
+    tag: {
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 14,
+    },
+    pressable: {
+      alignItems: 'center',
+    },
+    loadButton: {
+      borderRadius: 7.6,
+      height: 44,
+      marginRight: 10,
+      marginBottom: 10,
+      marginTop: 5,
+    },
+    loadButtonText: {
+      color: theme.colors.white,
+      fontFamily: 'Poppins',
+      fontStyle: 'normal',
+      fontWeight: 'normal',
+      fontSize: 18,
+    },
+  });
+
+  return (
+    <>
+      <View style={styles.header}>
+        <OText style={styles.title}>{t('MESSAGES', 'Messages')}</OText>
+      </View>
+
+      <FiltersTab>
+        <TabsContainer width={dimensions.width - 42}>
+          {tabs.map((tab: any) => (
+            <Pressable
+              key={tab.key}
+              style={{
+                ...styles.tab,
+                borderBottomWidth: 1,
+              }}
+              onPress={() => handleChangeTab(tab.tags)}>
+              <OText
+                style={styles.tab}
+                color={
+                  JSON.stringify(tabsFilter) === JSON.stringify(tab.tags)
+                    ? theme.colors.textGray
+                    : theme.colors.unselectText
+                }
+                weight={
+                  JSON.stringify(tabsFilter) === JSON.stringify(tab.tags)
+                    ? '600'
+                    : 'normal'
+                }>
+                {tab.text}
+                {` ${tab.key === 0 ? `(${unreadMessages || 0})` : ''}`}
+              </OText>
+            </Pressable>
+          ))}
+        </TabsContainer>
+      </FiltersTab>
+
+      <View>
+        <TagsContainer
+          showsVerticalScrollIndicator={false}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.tagsContainer}
+          horizontal>
+          {tabsFilter.map((key: number) => (
+            <Tag
+              key={key}
+              onPress={() => handleChangeTag(key)}
+              isSelected={
+                activeTag === key ? theme.colors.primary : theme.colors.tabBar
+              }>
+              <OText
+                style={styles.tag}
+                color={
+                  activeTag === key ? theme.colors.white : theme.colors.black
+                }>
+                {getTagFilter(key)}
+              </OText>
+            </Tag>
+          ))}
+        </TagsContainer>
+      </View>
+
+      {!loading && (values.length === 0 || error) && (
+        <NotFoundSource
+          content={
+            !error
+              ? t('NO_RESULTS_FOUND', 'Sorry, no results found')
+              : error[0]?.message ||
+                error[0] ||
+                t('NETWORK_ERROR', 'Network Error')
+          }
+          image={theme.images.general.notFound}
+          conditioned={false}
+        />
+      )}
+
+      <ScrollView showsVerticalScrollIndicator={false} style={{ flex: 1 }}>
+        {!reload &&
+          !error &&
+          values.length > 0 &&
+          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) && (
+            <PreviousMessages
+              orders={values}
+              setOrders={setOrders}
+              messages={messages}
+              onNavigationRedirect={onNavigationRedirect}
+            />
+          )}
+
+        {/* {!reload &&
+        !error &&
+        orders.length > 0 &&
+        JSON.stringify(tabsFilter) === JSON.stringify(tabs[1].tags) && (
+          <Contacts
+            orders={values}
+            activeTag={activeTag}
+            messages={messages}
+            setMessages={setMessages}
+            loadMessages={loadMessages}
+            onNavigationRedirect={onNavigationRedirect}
+          />
+        )} */}
+
+        {(loading || reload) && (
+          <>
+            <View>
+              {[...Array(5)].map((item, i) => (
+                <Placeholder key={i} Animation={Fade}>
+                  <View
+                    style={{
+                      width: '100%',
+                      flexDirection: 'row',
+                      marginBottom: 10,
+                    }}>
+                    <PlaceholderLine
+                      width={orientation === 'Portrait' ? 22 : 11}
+                      height={74}
+                      style={{
+                        marginRight: 20,
+                        marginBottom: 20,
+                        borderRadius: 7.6,
+                      }}
+                    />
+                    <Placeholder>
+                      <PlaceholderLine width={30} style={{ marginTop: 5 }} />
+                      <PlaceholderLine width={50} />
+                      <PlaceholderLine width={20} />
+                    </Placeholder>
+                  </View>
+                </Placeholder>
+              ))}
+            </View>
+          </>
+        )}
+
+        {pagination?.totalPages &&
+          !loading &&
+          !reload &&
+          JSON.stringify(tabsFilter) === JSON.stringify(tabs[0].tags) &&
+          pagination?.currentPage < pagination?.totalPages && (
+            <OButton
+              onClick={() => loadMore && loadMore()}
+              text={t('LOAD_MORE_ORDERS', 'Load more orders')}
+              imgRightSrc={null}
+              textStyle={styles.loadButtonText}
+              style={styles.loadButton}
+              bgColor={theme.colors.primary}
+              borderColor={theme.colors.primary}
+            />
+          )}
+      </ScrollView>
+    </>
+  );
+};
+
+export const MessagesOption = (props: MessagesOptionParams) => {
+  const MyOrdersProps = {
+    ...props,
+    UIComponent: MessagesOptionUI,
+  };
+
+  return <Contacts {...MyOrdersProps} />;
+};