ordering-ui-react-native 0.12.18 → 0.12.22

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

@@ -1,63 +0,0 @@
-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

@@ -1,317 +0,0 @@
-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

@@ -1,337 +0,0 @@
-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} />;
-};