ordering-ui-react-native 0.21.31-testing → 0.21.32-release

package/themes/business/src/components/BusinessProductList/ProductList.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback } from 'react'
+import { StyleSheet, View, TouchableOpacity } from 'react-native'
+import { useTheme } from 'styled-components/native';
+import { OIcon, OText } from '../shared';
+import { NotFoundSource } from '../NotFoundSource';
+import ToggleSwitch from 'toggle-switch-react-native';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import { SearchBar } from '../SearchBar';
+import { IOScrollView } from 'react-native-intersection-observer';
+import {
+  useLanguage,
+  useUtils,
+  ToastType,
+  useToast,
+} from 'ordering-components/native'
+
+const PIXELS_TO_SCROLL = 2000
+
+export const ProductList = (props: any) => {
+  const { productsList, onClose, updateProduct, searchValue, handleChangeSearch, getCategoryProducts } = props
+
+  const { loading, products, error } = productsList
+
+  const theme = useTheme()
+  const [{ optimizeImage }] = useUtils();
+  const [, { showToast }] = useToast()
+  const [, t] = useLanguage()
+
+  const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      marginBottom: 0
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 10,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+    sectionTitle: {
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 20,
+      color: theme.colors.textGray,
+    },
+    logo: {
+      padding: 2,
+      borderRadius: 18,
+      shadowColor: '#000',
+      shadowOffset: {
+        width: 0,
+        height: 1.5,
+      },
+      shadowOpacity: 0.21,
+      shadowRadius: 3,
+      elevation: 7,
+    },
+    icon: {
+      borderRadius: 7.6,
+      width: 35,
+      height: 35,
+      marginRight: 5
+    },
+    borderStyle: {
+      borderColor: theme.colors.red,
+      borderWidth: 0,
+      borderRadius: 10,
+    },
+  });
+
+  const handleSwitch = (enabled: boolean, categoryId: any, productId: any) => {
+    updateProduct && updateProduct(categoryId, productId, { enabled })
+  };
+
+  const handleScroll = ({ nativeEvent }: any) => {
+    const y = nativeEvent.contentOffset.y;
+    const height = nativeEvent.contentSize.height;
+    const hasMore = !(
+      productsList.pagination.totalPages === productsList.pagination.currentPage
+    );
+
+    if (y + PIXELS_TO_SCROLL > height && !productsList.loading && hasMore && productsList?.products?.length > 0) {
+      getCategoryProducts(false)
+      showToast(ToastType.Info, t('LOADING_MORE_PRODUCTS', 'Loading more products'))
+    }
+  };
+
+  return (
+    <View style={{ flex: 1, paddingHorizontal: 20, paddingVertical: 20 }}>
+      <View style={styles.header}>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <TouchableOpacity
+            onPress={onClose}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <OText style={styles.sectionTitle}>{t('PRODUCTS', 'Products')}</OText>
+        </View>
+        <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
+          <SearchBar
+            borderStyle={styles.borderStyle}
+            onSearch={handleChangeSearch}
+            searchValue={searchValue}
+            lazyLoad
+            isCancelXButtonShow={!!searchValue}
+            onCancel={() => handleChangeSearch('')}
+            placeholder={t('SEARCH', 'Search')}
+            containerStyle={{ width: 180 }}
+          />
+        </View>
+      </View>
+      <IOScrollView
+        style={styles.container}
+        onScroll={handleScroll}
+        scrollEventThrottle={16}
+        bounces={false}
+      >
+        {!loading && products?.length === 0 && (
+          <NotFoundSource
+            content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+            image={theme.images.general.notFound}
+            conditioned={false}
+          />
+        )}
+        {!loading && products?.length > 0 && (
+          <View style={{ borderTopColor: theme.colors.borderTops, borderTopWidth: 1 }}>
+            {products.map((product: any, i: number) => (
+              <View
+                key={i}
+                style={{
+                  flexDirection: 'row',
+                  justifyContent: 'space-between',
+                  borderBottomColor: theme.colors.borderTops,
+                  borderBottomWidth: 1,
+                  paddingVertical: 15
+                }}
+              >
+                <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', marginRight: 36 }}>
+                  <OIcon
+                    url={optimizeImage(product?.images, 'h_300,c_limit')}
+                    src={!product?.images && theme?.images?.dummies?.businessLogo}
+                    style={styles.icon}
+                  />
+                  <OText numberOfLines={2} size={12} ellipsizeMode='tail'>{product?.name}</OText>
+                </View>
+                <ToggleSwitch
+                  isOn={product?.enabled}
+                  onColor={theme.colors.primary}
+                  offColor={theme.colors.offColor}
+                  size="small"
+                  onToggle={(value: boolean) => handleSwitch(value, product?.category_id, product.id)}
+                  disabled={loading}
+                  animationSpeed={200}
+                />
+              </View>
+            ))}
+          </View>
+        )}
+        {loading && (
+          <View style={{ borderTopColor: theme.colors.borderTops, borderTopWidth: 1 }}>
+            {[...Array(6)].map((item, i) => (
+              <Placeholder key={i} Animation={Fade}>
+                <View
+                  style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 10,
+                    borderBottomColor: theme.colors.borderTops,
+                    borderBottomWidth: 1,
+                    paddingVertical: 10
+                  }}
+                >
+                  <PlaceholderLine width={50} />
+                  <PlaceholderLine width={20} />
+                </View>
+              </Placeholder>
+            ))}
+          </View>
+        )}
+      </IOScrollView>
+    </View>
+  )
+}

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

@@ -0,0 +1,196 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, ScrollView, Dimensions, TouchableOpacity } from 'react-native';
+import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import { useTheme } from 'styled-components/native';
+import { SearchBar } from '../SearchBar';
+import {
+  ToastType,
+  useToast,
+  useLanguage,
+  StoreProductList
+} from 'ordering-components/native';
+import { NotFoundSource } from '../NotFoundSource';
+import { OText, OIcon } from '../shared';
+import { IterateCategories } from './IterateCategories';
+import { ProductList } from './ProductList'
+
+const BusinessProductListUI = (props: any) => {
+  const {
+    navigation,
+    businessState,
+    productsList,
+    updateStoreCategory,
+    updateStoreProduct,
+    productSearch,
+    categorySearch,
+    handleChangeCategory,
+    handleChangeProductSearch,
+    handleChangeCategorySearch,
+    getCategoryProducts,
+    categories
+  } = props;
+
+  const { loading, error, business } = businessState;
+
+  const [, t] = useLanguage();
+  const [, { showToast }] = useToast();
+  const theme = useTheme();
+
+  const [showModal, setShowModal] = useState(false)
+
+  const handleOpenProducts = (category: any) => {
+    handleChangeCategory(category)
+    setShowModal(true)
+  }
+
+  useEffect(() => {
+    if (error) {
+      showToast(
+        ToastType.Error,
+        error || error[0] || t('NETWORK_ERROR', 'Network Error'),
+      );
+    }
+  }, [loading]);
+
+  const styles = StyleSheet.create({
+    container: {
+      paddingBottom: 20,
+      marginBottom: 0,
+      flex: 1,
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: 10,
+    },
+    sectionTitle: {
+      fontStyle: 'normal',
+      fontWeight: '600',
+      fontSize: 20,
+      color: theme.colors.textGray,
+    },
+    borderStyle: {
+      borderColor: theme.colors.red,
+      borderWidth: 0,
+      borderRadius: 10,
+    },
+    btnBackArrow: {
+      borderWidth: 0,
+      width: 32,
+      height: 32,
+      tintColor: theme.colors.textGray,
+      backgroundColor: theme.colors.clear,
+      borderColor: theme.colors.clear,
+      shadowColor: theme.colors.clear,
+      paddingLeft: 0,
+      paddingRight: 0
+    },
+  });
+
+  return (
+    <>
+      <View style={styles.header}>
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <TouchableOpacity
+            onPress={() => navigation?.canGoBack() && navigation.goBack()}
+            style={styles.btnBackArrow}
+          >
+            <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+          </TouchableOpacity>
+          <OText style={styles.sectionTitle}>{t('CATEGORIES', 'Categories')}</OText>
+        </View>
+        <View style={{ flexDirection: 'row', justifyContent: 'flex-end' }}>
+          <SearchBar
+            borderStyle={styles.borderStyle}
+            onSearch={handleChangeCategorySearch}
+            searchValue={categorySearch}
+            lazyLoad
+            isCancelXButtonShow={!!categorySearch}
+            onCancel={() => handleChangeCategorySearch('')}
+            placeholder={t('SEARCH', 'Search')}
+            containerStyle={{ width: 180 }}
+          />
+        </View>
+      </View>
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        style={styles.container}>
+        {!loading && business?.categories?.length === 0 && (
+          <NotFoundSource
+            content={t('NO_RESULTS_FOUND', 'Sorry, no results found')}
+            image={theme.images.general.notFound}
+            conditioned={false}
+          />
+        )}
+        {!error && !loading && categories?.length > 0 && (
+          <View
+            style={{
+              borderTopColor: theme.colors.borderTops,
+              borderTopWidth: 1
+            }}
+          >
+            <IterateCategories
+              list={categories}
+              handlerClickCategory={handleOpenProducts}
+              updateCategory={updateStoreCategory}
+            />
+          </View>
+        )}
+        {loading && (
+          <View style={{ borderTopColor: theme.colors.borderTops, borderTopWidth: 1 }}>
+            {[...Array(6)].map((item, i) => (
+              <Placeholder key={i} Animation={Fade}>
+                <View
+                  style={{
+                    flex: 1,
+                    flexDirection: 'row',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    marginBottom: 10,
+                    borderBottomColor: theme.colors.borderTops,
+                    borderBottomWidth: 1,
+                    paddingVertical: 10
+                  }}
+                >
+                  <PlaceholderLine width={50} />
+                  <PlaceholderLine width={20} />
+                </View>
+              </Placeholder>
+            ))}
+          </View>
+        )}
+      </ScrollView>
+      {showModal && (
+        <View
+          style={{
+            flex: 1,
+            position: 'absolute',
+            top: 0,
+            width: Dimensions.get('window').width,
+            height: Dimensions.get('window').height,
+            backgroundColor: theme.colors.backgroundLight,
+            left: 0
+          }}
+        >
+          <ProductList
+            productsList={productsList}
+            updateProduct={updateStoreProduct}
+            searchValue={productSearch}
+            handleChangeSearch={handleChangeProductSearch}
+            getCategoryProducts={getCategoryProducts}
+            onClose={() => setShowModal(false)}
+          />
+        </View>
+      )}
+    </>
+  );
+};
+
+export const BusinessProductList = (props: any) => {
+  const businessProductListProps = {
+    ...props,
+    UIComponent: BusinessProductListUI,
+  };
+
+  return <StoreProductList {...businessProductListProps} />;
+};

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

@@ -0,0 +1,10 @@
+import styled from 'styled-components/native';
+
+export const CategoryTab = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  padding-vertical: 10px;
+  border-bottom-color: ${(props: any) => props.theme.colors.borderTops};
+  border-bottom-width: 1px;
+  margin-left: ${(props: any) => props.isSpace ? '10px' : '0px'};
+`

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

@@ -386,21 +386,30 @@ const ChatUI = (props: MessagesParams) => {
           style={{ ...styles.firstMessageText, textAlign: 'center' }}
         >
           {
-            message.change?.attribute !== 'driver_id'
-            ?
-            `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute)
-              ? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
-              : `${message.change?.attribute !== 'logistic_status'
-                ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
-                : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
-                  ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
-                  : getLogisticTag(message.change.new)}`
-            }`
-            : message.change.new
+            message.change?.attribute === 'driver_group_id'
+            ? message.change.old
+              ? t('ORDER_ATTRIBUTE_CHANGED_FROM_TO')
+                  .replace('_attribute_', t(message.change?.attribute.toUpperCase()).toLowerCase())
+                  .replace('_from_', message.change.old)
+                  .replace('_to_', message.change.new)
+              : t('ORDER_ATTRIBUTE_CHANGED_TO')
+                  .replace('_attribute_', t(message.change?.attribute.toUpperCase()).toLowerCase())
+                  .replace('_to_', message.change.new)
+            : message.change?.attribute !== 'driver_id'
               ?
-              `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
-              :
-              `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
+              `${t('ORDER', 'Order')} ${t(message.change.attribute.toUpperCase(), message.change.attribute.replace('_', ' '))} ${t('CHANGED_FROM', 'Changed from')} ${filterSpecialStatus.includes(message.change.attribute)
+                ? `${message.change.old === null ? '0' : message.change.old} ${t('TO', 'to')} ${message.change.new} ${t('MINUTES', 'Minutes')}`
+                : `${message.change?.attribute !== 'logistic_status'
+                  ? message.change.old !== null && t(ORDER_STATUS[parseInt(message.change.old, 10)])
+                  : message.change.old !== null && getLogisticTag(message.change.old)} ${t('TO', 'to')} ${message.change?.attribute !== 'logistic_status'
+                    ? t(ORDER_STATUS[parseInt(message.change.new, 10)])
+                    : getLogisticTag(message.change.new)}`
+              }`
+              : message.change.new
+                ?
+                `${message.driver?.name} ${message.driver?.lastname !== null ? message.driver.lastname : ''} ${t('WAS_ASSIGNED_AS_DRIVER', 'Was assigned as driver')} ${message.comment ? message.comment.length : ''}`
+                :
+                `${t('DRIVER_UNASSIGNED', 'Driver unassigned')}`
           }
         </OText>
         <OText size={10} color={'#aaa'} style={{ alignSelf: 'flex-start' }}>

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

@@ -30,7 +30,6 @@ export const DriverMap = (props: GoogleMapsParams) => {
     isBusinessMarker,
     isToFollow,
     handleViewActionOrder,
-    updateDriverPosition,
     driverUpdateLocation,
     setDriverUpdateLocation,
   } = props;
@@ -59,6 +58,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     key?: string | null;
   }>({ open: false, content: [], key: null });
   const distanceUnit = configState?.configs?.distance_unit?.value
+  const isHideRejectButtons = configState?.configs?.reject_orders_enabled && configState?.configs?.reject_orders_enabled?.value !== '1'
 
   const {
     hasLocation,
@@ -69,11 +69,20 @@ export const DriverMap = (props: GoogleMapsParams) => {
     stopFollowUserLocation,
   } = useLocation();
 
-  const origin = {
-    latitude: initialPosition.latitude,
-    longitude: initialPosition.longitude,
+  const destination = {
+    latitude: typeof location?.lat === 'string' ? parseFloat(location?.lat) || 0 : location?.lat || 0,
+    longitude: typeof location?.lng === 'string' ? parseFloat(location?.lng) || 0 : location?.lng || 0
   };
-  const destination = { latitude: location.lat, longitude: location.lng };
+
+  const parsedInitialPosition = {
+    latitude: typeof initialPosition.latitude === 'string' ? parseFloat(initialPosition.latitude) || 0 : initialPosition.latitude || 0,
+    longitude: typeof initialPosition.longitude === 'string' ? parseFloat(initialPosition.longitude) || 0 : initialPosition.longitude || 0,
+  }
+
+  const parsedUserLocation = {
+    latitude: typeof userLocation?.latitude === 'string' ? parseFloat(userLocation?.latitude) || 0 : userLocation?.latitude || 0,
+    longitude: typeof userLocation?.longitude === 'string' ? parseFloat(userLocation?.longitude) || 0 : userLocation?.longitude || 0
+  }
 
   useEffect(() => {
     if (isToFollow) {
@@ -161,7 +170,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (driverUpdateLocation.error) return;
 
     calculateDistance(
-      { lat: userLocation.latitude, lng: userLocation.longitude },
+      { lat: parsedUserLocation.latitude, lng: parsedUserLocation.longitude },
       destination,
     );
     // geocodePosition(userLocation);
@@ -169,13 +178,13 @@ export const DriverMap = (props: GoogleMapsParams) => {
     if (!following.current) return;
     fitCoordinates();
 
-    const { latitude, longitude } = userLocation;
+    const { latitude, longitude } = parsedUserLocation;
 
     mapRef.current?.animateCamera({
       center: { latitude, longitude },
     });
 
-  }, [userLocation]);
+  }, [parsedUserLocation]);
 
   const handleArrowBack: any = () => {
     setDriverUpdateLocation?.({
@@ -241,8 +250,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
         [
           { latitude: location.lat, longitude: location.lng },
           {
-            latitude: initialPosition.latitude,
-            longitude: initialPosition.longitude,
+            latitude: parsedInitialPosition.latitude,
+            longitude: parsedInitialPosition.longitude,
           },
         ],
         {
@@ -255,7 +264,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      if (initialPosition.latitude !== 0 && autoFit.current) {
+      if (parsedInitialPosition.latitude !== 0 && autoFit.current) {
         if (mapRef.current) {
           fitCoordinates();
           autoFit.current = false;
@@ -263,7 +272,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
       }
     }, 1000);
     return () => clearInterval(interval);
-  }, [initialPosition]);
+  }, [parsedInitialPosition]);
 
   const fitCoordinatesZoom = () => {
     following.current = false;
@@ -346,8 +355,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ref={mapRef}
             provider={PROVIDER_GOOGLE}
             initialRegion={{
-              latitude: initialPosition.latitude,
-              longitude: initialPosition.longitude,
+              latitude: parsedInitialPosition.latitude,
+              longitude: parsedInitialPosition.longitude,
               latitudeDelta: 0.001,
               longitudeDelta: 0.001 * ASPECT_RATIO,
             }}
@@ -369,8 +378,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
               <>
                 <Marker
                   coordinate={{
-                    latitude: location.lat,
-                    longitude: location.lng,
+                    latitude: typeof destination?.latitude !== 'object' ? destination?.latitude : 0,
+                    longitude: typeof destination?.longitude !== 'object' ? destination?.latitude : 0
                   }}
                   title={location.title}>
                   <Icon
@@ -381,13 +390,16 @@ export const DriverMap = (props: GoogleMapsParams) => {
                   <View style={styles.view}>
                     <OIcon
                       style={styles.image}
-                      url={location.icon}
+                      src={typeof location.icon === 'number' ? location.icon : { uri: location.icon }}
                       width={25}
                       height={25}
                     />
                   </View>
                 </Marker>
-                <Marker coordinate={userLocation}>
+                <Marker coordinate={{
+                  latitude: typeof parsedUserLocation?.latitude !== 'object' ? parsedUserLocation?.latitude : 0,
+                  longitude: typeof parsedUserLocation?.longitude !== 'object' ? parsedUserLocation?.latitude : 0
+                }}>
                   <View style={styles.driverIcon}>
                     <OIcon
                       style={styles.image}
@@ -401,8 +413,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             ) : (
               <Marker
                 coordinate={{
-                  latitude: userLocation.latitude,
-                  longitude: userLocation.longitude,
+                  latitude: typeof parsedUserLocation?.latitude !== 'object' ? parsedUserLocation?.latitude : 0,
+                  longitude: typeof parsedUserLocation?.longitude !== 'object' ? parsedUserLocation?.latitude : 0
                 }}
                 title={markerTitle || t('YOUR_LOCATION', 'Your Location')}
               />
@@ -516,8 +528,8 @@ export const DriverMap = (props: GoogleMapsParams) => {
             options={{
               latitude: destination.latitude,
               longitude: destination.longitude,
-              sourceLatitude: userLocation.latitude,
-              sourceLongitude: userLocation.longitude,
+              sourceLatitude: parsedUserLocation.latitude,
+              sourceLongitude: parsedUserLocation.longitude,
               naverCallerName: 'com.deliveryapp',
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
@@ -539,8 +551,9 @@ export const DriverMap = (props: GoogleMapsParams) => {
             secondButton={true}
             firstColorCustom={theme.colors.red}
             secondColorCustom={theme.colors.green}
-            widthButton={'45%'}
+            widthButton={isHideRejectButtons ? '100%' : '45%'}
             isPadding
+            isHideRejectButtons={isHideRejectButtons}
           />
         )}