ordering-ui-react-native 0.18.2 → 0.18.3-release

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

@@ -69,6 +69,8 @@ const ChatUI = (props: MessagesParams) => {
   const [, { showToast }] = useToast();
   const theme = useTheme();
   const [messageList, setMessageList] = useState<any>([])
+  const previousStatus = [1, 2, 5, 6, 10, 11, 12, 16, 17]
+  const chatDisabled = previousStatus.includes(order?.status)
 
   const ORDER_STATUS: any = {
     0: t('ORDER_STATUS_PENDING', 'Order status pending'),
@@ -97,6 +99,17 @@ const ChatUI = (props: MessagesParams) => {
     23: t('ORDER_DRIVER_ON_WAY', 'Driver on way')
   }
 
+  const getLogisticTag = (status: any) => {
+    const keyList: any = {
+      0: t('PENDING', 'Pending'),
+      1: t('IN_PROGRESS', 'In progress'),
+      2: t('IN_QUEUE', 'In queue'),
+      3: t('EXPIRED', 'Expired'),
+      4: t('RESOLVED', 'Resolved'),
+    }
+    return keyList[status] ? keyList[status] : t('UNKNOWN', 'Unknown')
+  }
+
   const storeMessageList: any = [
     { key: 'store_message_1', text: t('STORE_MESSAGE_1', 'store_message_1') },
     { key: 'store_message_2', text: t('STORE_MESSAGE_2', 'store_message_2') },
@@ -176,12 +189,8 @@ const ChatUI = (props: MessagesParams) => {
       fontSize: 12,
     },
     toolbarStyle: {
-      flexDirection: 'column-reverse',
-      paddingVertical: 15,
-      paddingHorizontal: 30,
-      backgroundColor: theme.colors.white,
-      borderTopWidth: 1,
-      borderTopColor: theme.colors.tabBar,
+      padding: Platform.OS === 'ios' && isKeyboardShow ? 0 : 10,
+      flexDirection: 'column-reverse'
     },
     accessoryIcon: {
       height: 32,
@@ -314,14 +323,16 @@ const ChatUI = (props: MessagesParams) => {
         quality: 1
       },
       (response: any) => {
-        if (response.didCancel) {
+        const image = response.assets?.[0];
+        if (!image) return
+        if (image.didCancel) {
           console.log('User cancelled image picker');
-        } else if (response.errorMessage) {
-          console.log('ImagePicker Error: ', response.errorMessage);
-          showToast(ToastType.Error, response.errorMessage);
+        } else if (image.errorMessage) {
+          console.log('ImagePicker Error: ', image.errorMessage);
+          showToast(ToastType.Error, image.errorMessage);
         } else {
-          if (response.uri) {
-            const url = `data:${response.type};base64,${response.base64}`;
+          if (image.uri) {
+            const url = `data:${image.type};base64,${image.base64}`;
             setImage && setImage(url);
           } else {
             showToast(ToastType.Error, t('IMAGE_NOT_FOUND', 'Image not found'));
@@ -372,18 +383,34 @@ const ChatUI = (props: MessagesParams) => {
         }}>
         <OText
           numberOfLines={3}
-          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.old !== null && ORDER_STATUS[parseInt(message.change.old, 10)]} ${t('TO', 'to')} ${ORDER_STATUS[parseInt(message.change.new, 10)]}`
-            }`
-            : message.change.new
+          style={{ ...styles.firstMessageText, textAlign: 'center' }}
+        >
+          {
+            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' }}>
           {parseTime(message?.created_at, { outputFormat: 'hh:mma' })}
@@ -586,16 +613,12 @@ const ChatUI = (props: MessagesParams) => {
   };
 
   const renderAccessory = () => (
+    !chatDisabled &&
     <View>
       <Header
         showsVerticalScrollIndicator={false}
         showsHorizontalScrollIndicator={false}
         horizontal
-        // contentContainerStyle={{
-        //   justifyContent:
-        //     orientation === 'Landscape' ? 'center' : 'space-between',
-        //   width: '100%',
-        // }}
         nestedScrollEnabled={true}
       >
         {user?.level !== 2 && (
@@ -766,113 +789,130 @@ const ChatUI = (props: MessagesParams) => {
       containerStyle={styles.toolbarStyle}
       primaryStyle={{ alignItems: 'center', justifyContent: 'space-between' }}
       accessoryStyle={{ position: 'relative', marginBottom: 45 }}
-      renderAccessory={order ? () => renderAccessory && renderAccessory() : undefined}
+      renderAccessory={() => renderAccessory()}
     />
   );
 
   const renderComposer = (props: any) => (
-    <View
-      style={{
-        flexDirection: 'row',
-        height: 44,
-        width: '85%',
-        backgroundColor: theme.colors.composerView,
-        borderRadius: 7.6,
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingRight: 10,
-      }}>
-      <Composer
-        {...props}
-        textInputStyle={{
-          borderRadius: 7.6,
-          borderColor: theme.colors.transparent,
-          borderWidth: 0,
-          color: '#010300',
-        }}
-        textInputProps={{
-          value: message,
-          onSubmitEditing: onSubmit,
-          returnKeyType: message ? 'send' : 'done',
-          blurOnSubmit: true,
-          multiline: false,
-          numberOfLines: 1,
-          autoCorrect: false,
-          autoCompleteType: 'off',
-          enablesReturnKeyAutomatically: false,
-          selectionColor: theme.colors.primary,
+    chatDisabled ? (
+      <View
+        style={{
+          width: '100%',
+          flexDirection: 'column',
+          alignItems: 'center'
         }}
-        placeholder={t('WRITE_MESSAGE', 'Write message')}
-        placeholderTextColor={theme.colors.composerPlaceHolder}
-      />
-
-      <TouchableOpacity
-        onPress={() => {
-          setImage && setImage(null);
-          setIsShowSignaturePad(!isShowSignaturePad);
-        }}>
+      >
         <MaterialCommunityIcon
-          name="pen"
-          color={
-            isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
-          }
+          name='close-octagon-outline'
           size={24}
         />
-      </TouchableOpacity>
-
-      {!file.type && (
-        <Actions
+        <OText size={14}>{t('NOT_SEND_MESSAGES', 'You can\'t send messages because the order has ended')}</OText>
+      </View>
+    ) : (
+      <View
+        style={{
+          flexDirection: 'row',
+          height: 44,
+          width: '85%',
+          backgroundColor: theme.colors.composerView,
+          borderRadius: 7.6,
+          alignItems: 'center',
+          justifyContent: 'center',
+          paddingRight: 10,
+        }}>
+        <Composer
           {...props}
-          containerStyle={styles.containerActions}
-          optionTintColor="#222845"
-          icon={() => (
-            <>
-              {!file?.type && (
-                <>
-                  <OIconButton
-                    borderColor={theme.colors.transparent}
-                    icon={
-                      !isShowSignaturePad && image
-                        ? { uri: image }
-                        : theme.images.general.imageChat
-                    }
-                    iconStyle={{
-                      borderRadius: image ? 10 : 0,
-                      width: image ? 32 : 28,
-                      height: image ? 32 : 28,
-                    }}
-                    onClick={handleImagePicker}
-                    iconCover
-                  />
-
-                  {image && !isShowSignaturePad && (
-                    <TouchableOpacity
-                      style={{
-                        position: 'absolute',
-                        top: -5,
-                        right: -5,
-                        borderColor: theme.colors.backgroundDark,
-                        backgroundColor: theme.colors.white,
-                        borderRadius: 25,
-                      }}
-                      onPress={() => removeImage()}>
-                      <MaterialCommunityIcon
-                        name="close-circle-outline"
-                        color={theme.colors.backgroundDark}
-                        size={24}
-                      />
-                    </TouchableOpacity>
-                  )}
-                </>
-              )}
-            </>
-          )}
+          textInputStyle={{
+            borderRadius: 7.6,
+            borderColor: theme.colors.transparent,
+            borderWidth: 0,
+            color: '#010300',
+          }}
+          textInputProps={{
+            value: message,
+            onSubmitEditing: onSubmit,
+            returnKeyType: message ? 'send' : 'done',
+            blurOnSubmit: true,
+            multiline: false,
+            numberOfLines: 1,
+            autoCorrect: false,
+            autoCompleteType: 'off',
+            enablesReturnKeyAutomatically: false,
+            selectionColor: theme.colors.primary,
+          }}
+          placeholder={t('WRITE_MESSAGE', 'Write message')}
+          placeholderTextColor={theme.colors.composerPlaceHolder}
         />
-      )}
-    </View>
+
+        <TouchableOpacity
+          onPress={() => {
+            setImage && setImage(null);
+            setIsShowSignaturePad(!isShowSignaturePad);
+          }}>
+          <MaterialCommunityIcon
+            name="pen"
+            color={
+              isShowSignaturePad ? theme.colors.primary : theme.colors.arrowColor
+            }
+            size={24}
+          />
+        </TouchableOpacity>
+
+        {!file.type && (
+          <Actions
+            {...props}
+            containerStyle={styles.containerActions}
+            optionTintColor="#222845"
+            icon={() => (
+              <>
+                {!file?.type && (
+                  <>
+                    <OIconButton
+                      borderColor={theme.colors.transparent}
+                      icon={
+                        !isShowSignaturePad && image
+                          ? { uri: image }
+                          : theme.images.general.imageChat
+                      }
+                      iconStyle={{
+                        borderRadius: image ? 10 : 0,
+                        width: image ? 32 : 28,
+                        height: image ? 32 : 28,
+                      }}
+                      onClick={handleImagePicker}
+                      iconCover
+                    />
+
+                    {!!image && !isShowSignaturePad && (
+                      <TouchableOpacity
+                        style={{
+                          position: 'absolute',
+                          top: -5,
+                          right: -5,
+                          borderColor: theme.colors.backgroundDark,
+                          backgroundColor: theme.colors.white,
+                          borderRadius: 25,
+                        }}
+                        onPress={() => removeImage()}>
+                        <MaterialCommunityIcon
+                          name="close-circle-outline"
+                          color={theme.colors.backgroundDark}
+                          size={24}
+                        />
+                      </TouchableOpacity>
+                    )}
+                  </>
+                )}
+              </>
+            )}
+          />
+        )}
+      </View>
+    )
   );
 
   const renderSend = (props: any) => (
+    !chatDisabled &&
     <Send
       {...props}
       disabled={
@@ -1050,7 +1090,7 @@ const ChatUI = (props: MessagesParams) => {
     .m-signature-pad {
       box-shadow: none;
       border: none;
-    } 
+    }
     .m-signature-pad--body {
       border: none;
     }

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

@@ -12,7 +12,7 @@ import Icon from 'react-native-vector-icons/FontAwesome5';
 import { useTheme } from 'styled-components/native';
 import { useLocation } from '../../hooks/useLocation';
 import { FloatingButton } from '../FloatingButton';
-import { showLocation } from 'react-native-map-link';
+import { Popup } from 'react-native-map-link';
 import { transformDistance } from '../../utils';
 
 export const DriverMap = (props: GoogleMapsParams) => {
@@ -48,6 +48,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
   const [distancesFromTwoPlacesKm, setDistancesFromTwoPlacesKm] = useState(0);
   const [isMin, setIsMin] = useState(false);
   const [{ parseDate }] = useUtils();
+  const [popUp, setPopUp] = useState<boolean>(false);
   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',
@@ -452,7 +453,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 {order?.delivery_datetime_utc
                   ? parseDate(order?.delivery_datetime_utc)
                   : parseDate(order?.delivery_datetime, { utc: false })}
-                {` - ${order?.paymethod?.name}`}
+                {` - ${t(order?.paymethod?.name?.replace(/\s+/g, '_')?.toUpperCase(), order?.paymethod?.name)}`}
               </OText>
               <OText weight="bold">
                 {t('INVOICE_ORDER_NO', 'Order No.')} {order?.id}
@@ -478,7 +479,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
                 style={styles.arrowDistance}
               />
               <OText size={12} numberOfLines={3}>
-                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`} 
+                {`${transformDistance(distancesFromTwoPlacesKm, distanceUnit)} ${t(distanceUnit.toUpperCase(), distanceUnit)}`}
               </OText>
 
             </View>
@@ -501,7 +502,18 @@ export const DriverMap = (props: GoogleMapsParams) => {
             imgRightSrc=''
             textStyle={{ color: theme.colors.white }}
             style={styles.showButton}
-            onClick={() => showLocation({
+            onClick={() => setPopUp(true)}
+            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+          />
+          <Popup
+            isVisible={popUp}
+            onCancelPressed={() => setPopUp(false)}
+            onAppPressed={() => setPopUp(false)}
+            onBackButtonPressed={() => setPopUp(false)}
+            modalProps={{
+              animationIn: 'slideInUp'
+            }}
+            options={{
               latitude: destination.latitude,
               longitude: destination.longitude,
               sourceLatitude: userLocation.latitude,
@@ -510,8 +522,7 @@ export const DriverMap = (props: GoogleMapsParams) => {
               dialogTitle: t('SHOW_IN_OTHER_MAPS', 'Show in other maps'),
               dialogMessage: t('WHAT_APP_WOULD_YOU_USE', 'What app would you like to use?'),
               cancelText: t('CANCEL', 'Cancel'),
-            })}
-            text={t('SHOW_IN_OTHER_MAPS', 'Show in other maps')}
+            }}
           />
         </View>
         {showAcceptOrReject && (