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

package/src/utils/index.tsx

@@ -47,10 +47,10 @@ export const getTraduction = (key: string, t: any) => {
  */
 export const convertHoursToMinutes = (time: any) => {
   const [, t] = useLanguage()
-  if (!time) return '0min'
+  if (!time) return `0 ${t('TIME_MIN', 'min')}`
   const [hour, minute] = time.split(':')
   const result = (parseInt(hour, 10) * 60) + parseInt(minute, 10)
-  return `${result}${t('MIN', 'min')}`
+  return `${result}${t('TIME_MIN', 'min')}`
 }
 
 export const getIconCard = (brand: string, size: number) => {
@@ -154,6 +154,11 @@ export const transformCountryCode = (countryCode : number) => {
   return code?.countryCode
 }
 
+export const verifyCountryCode = (countryCode : string) => {
+  const code = CODES.find((code : any) => code.countryCode === (countryCode || '').toUpperCase())
+  return code?.countryCode
+}
+
 /**
  * Function to check if a number is decimal or not
  * @param {*} value number to check if decimal or not

package/themes/business/index.tsx

@@ -1,6 +1,7 @@
 //Components
 import { AcceptOrRejectOrder } from './src/components/AcceptOrRejectOrder';
 import { BusinessController } from './src/components/BusinessController';
+import { BusinessProductList } from './src/components/BusinessProductList';
 import { Chat } from './src/components/Chat';
 import { FloatingButton } from './src/components/FloatingButton';
 import { ForgotPasswordForm } from './src/components/ForgotPasswordForm';
@@ -70,6 +71,7 @@ export {
   //Components
   AcceptOrRejectOrder,
   BusinessController,
+  BusinessProductList,
   Chat,
   DriverMap,
   FloatingButton,

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

@@ -7,13 +7,14 @@ import {
   View,
   KeyboardAvoidingView,
   TextInput,
-  StyleSheet
+  StyleSheet,
+  TouchableOpacity
 } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import SelectDropdown from 'react-native-select-dropdown'
 import { useLanguage } from 'ordering-components/native';
 import { Content, Timer, TimeField, Header, Comments, CommentsButtonGroup, TopActions } from './styles';
-import { OText, OButton, OTextarea, OIconButton } from '../shared';
+import { OText, OButton, OTextarea, OIcon } from '../shared';
 import { AcceptOrRejectOrderParams } from '../../types';
 
 import { orderCommentList } from '../../../../../src/utils'
@@ -95,7 +96,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     upper: {
       flex: 1,
       zIndex: 1001,
-      paddingTop: isPage ? 30 : 50,
+      paddingTop: isPage ? 30 : 40,
       marginBottom: 10,
       backgroundColor: theme.colors.backgroundPage
     },
@@ -109,7 +110,18 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
     bottom: {
       textAlignVertical: "center",
       textAlign: "center",
-    }
+    },
+    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
+    },
   })
 
   const handleFocus = () => {
@@ -203,7 +215,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 7,
       },
       rejectByBusiness: {
-        comment: comments,
+        reasons: comments,
         status: 5,
       },
       acceptByDriver: {
@@ -211,22 +223,22 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         status: 8,
       },
       rejectByDriver: {
-        comment: comments,
+        reasons: comments,
         status: 6,
         reject_reason: rejectReason
       },
       pickupFailedByDriver: {
-        comment: comments,
+        reasons: comments,
         status: 10,
         reject_reason: rejectReason
       },
       deliveryFailedByDriver: {
-        comment: comments,
+        reasons: comments,
         status: 12,
         reject_reason: rejectReason
       },
       orderNotReady: {
-        comment: comments,
+        reasons: comments,
         status: 14,
         reject_reason: rejectReason
       },
@@ -295,22 +307,17 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
   }, [])
 
   return (
-    <KeyboardAvoidingView style={{ flex: 1 }}>
+    <KeyboardAvoidingView
+      enabled
+      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      style={{ flex: 1 }}
+    >
       <View style={styles.parent}>
         <View style={styles.upper}>
           <TopActions>
-            <OIconButton
-              icon={theme.images.general.arrow_left}
-              borderColor={theme.colors.clear}
-              iconStyle={{ width: 20, height: 20 }}
-              style={{
-                maxWidth: 40,
-                height: 35,
-                justifyContent: 'flex-end',
-                marginBottom: 10,
-              }}
-              onClick={() => handleArrowBack()}
-            />
+            <TouchableOpacity onPress={() => handleArrowBack()} style={styles.btnBackArrow}>
+              <OIcon src={theme.images.general.arrow_left} color={theme.colors.textGray} />
+            </TouchableOpacity>
             <OText
               size={20}
               color={theme.colors.textGray}
@@ -339,7 +346,7 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
                         )}
                       </OText>
 
-                      {numberToShow ? (
+                      {!!numberToShow ? (
                         <OButton
                           bgColor="transparent"
                           borderColor={theme.colors.primary}
@@ -508,7 +515,10 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
         <View
           style={{
             ...styles.bottomParent,
-            marginBottom: (keyboardState.height === 0) ? isPage ? 0 : 30 : keyboardState.height - (isPage ? 20 : -10)
+            marginBottom: Platform.OS === 'ios'
+              ? 30 : (keyboardState.height === 0)
+                ? isPage ? 0 : 30
+                : keyboardState.height - (isPage ? 20 : -10)
           }}
         >
           <OButton
@@ -518,8 +528,8 @@ export const AcceptOrRejectOrder = (props: AcceptOrRejectOrderParams) => {
             imgRightSrc={null}
             style={{ borderRadius: 7, height: 45 }}
             parentStyle={{ width: '100%' }}
-            textStyle={{color: '#FFF', fontSize: 18 }}
-            isDisabled={!rejectReason && showTextArea}
+            textStyle={{ color: '#FFF', fontSize: 18 }}
+            isDisabled={showTextArea && !comments}
             onClick={() => handleAcceptOrReject()}
           />
         </View>

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, ActivityIndicator } from 'react-native';
+import { StyleSheet, View, ActivityIndicator, TouchableOpacity } from 'react-native';
 import ToggleSwitch from 'toggle-switch-react-native';
 import { useTheme } from 'styled-components/native';
 import {
@@ -14,7 +14,7 @@ import { OIcon, OText } from '../shared';
 import { BusinessControllerParams } from '../../types';
 
 export const BusinessControllerUI = (props: BusinessControllerParams) => {
-  const { businessState, updateBusiness, isUpdateStore, setIsUpdateStore } =
+  const { businessState, updateBusiness, isUpdateStore, setIsUpdateStore, navigation } =
     props;
 
   const { loading, business, error } = businessState;
@@ -93,21 +93,18 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
     <>
       {business && (
         <Card key={business?.id}>
-          <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
-            <Logo style={styles.logo}>
-              <OIcon
-                url={optimizeImage(business?.logo, 'h_300,c_limit')}
-                src={!business?.logo && theme?.images?.dummies?.businessLogo}
-                style={styles.icon}
-              />
-            </Logo>
-
-            <View
-              style={{
-                flex: 1,
-                flexDirection: 'row',
-                alignItems: 'flex-start',
-              }}>
+          <View style={{ flexDirection: 'row', flex: 1 }}>
+            <TouchableOpacity
+              style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}
+              onPress={() => navigation && business?.slug && navigation.navigate('BusinessProductListing', { slug: business?.slug })}
+            >
+              <Logo style={styles.logo}>
+                <OIcon
+                  url={optimizeImage(business?.logo, 'h_300,c_limit')}
+                  src={!business?.logo && theme?.images?.dummies?.businessLogo}
+                  style={styles.icon}
+                />
+              </Logo>
               <Information>
                 <View style={styles.header}>
                   <OText style={styles.title} numberOfLines={1}>
@@ -123,7 +120,12 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
                   {business?.zipcode}
                 </OText>
               </Information>
+            </TouchableOpacity>
 
+            <View
+              style={{
+                alignItems: 'flex-start',
+              }}>
               {loading && isUpdateStore ? (
                 <ActivityIndicator size="small" color={theme.colors.primary} />
               ) : (

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

@@ -0,0 +1,63 @@
+import { OText } from "../shared"
+import React, { useState } from "react"
+import { View } from "react-native"
+import { TouchableOpacity } from "react-native-gesture-handler"
+import AntDesignIcon from 'react-native-vector-icons/AntDesign'
+import ToggleSwitch from 'toggle-switch-react-native';
+import { useTheme } from 'styled-components/native';
+import { CategoryTab } from './styles'
+
+export const AccordionDropdown = (props: any) => {
+  const { category, IterateCategories, handlerClickCategory, updateCategory } = props
+
+  const theme = useTheme();
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleSwitch = (enabled: boolean, categoryId: any) => {
+    updateCategory && updateCategory(categoryId, { enabled })
+  };
+
+  return (
+    <View style={{ marginLeft: !!category?.parent_category_id ? 10 : 0 }}>
+      <CategoryTab>
+        <View style={{ flexDirection: 'row', alignItems: 'center', flex: 1, marginRight: 5 }}>
+          <TouchableOpacity onPress={() => setIsOpen(prev => !prev)} style={{ marginRight: 10 }}>
+            <AntDesignIcon
+              name={isOpen ? 'caretdown' : 'caretright'}
+              size={14}
+            />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => handlerClickCategory(category)} style={{ flex: 1 }}>
+            <OText numberOfLines={1}>
+              {category.name}
+            </OText>
+          </TouchableOpacity>
+        </View>
+        <View>
+          <ToggleSwitch
+            isOn={category?.enabled}
+            onColor={theme.colors.primary}
+            offColor={theme.colors.offColor}
+            size="small"
+            onToggle={(value: boolean) => handleSwitch(value, category.id)}
+            // disabled={loading}
+            animationSpeed={200}
+          />
+        </View>
+      </CategoryTab>
+      {
+        isOpen && (
+          <View>
+            <IterateCategories
+              list={category.subcategories}
+              isSub
+              currentCat={category}
+              handlerClickCategory={handlerClickCategory}
+              updateCategory={updateCategory}
+            />
+          </View>
+        )
+      }
+    </View>
+  )
+}

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

@@ -0,0 +1,108 @@
+import React from "react"
+import { View, TouchableOpacity } from "react-native"
+import { OText } from "../shared"
+import ToggleSwitch from 'toggle-switch-react-native';
+import { AccordionDropdown } from './AccordionDropdown'
+import { useTheme } from 'styled-components/native';
+import { CategoryTab } from './styles'
+
+export const IterateCategories = (props: any) => {
+  const { list, currentCat, isSub, handlerClickCategory, updateCategory } = props
+
+  const theme = useTheme();
+
+  const handleSwitch = (enabled: boolean, categoryId: any) => {
+    updateCategory && updateCategory(categoryId, { enabled })
+  };
+
+  return (
+    <>
+      {list?.length > 0 && list.map((category: any, i: number) => (
+        <View key={`${category?.id}_${i}`}>
+          {(category?.subcategories?.length > 0 || isSub) ? (
+            <>
+              {category?.subcategories?.length > 0 && (
+                <>
+                  <View>
+                    <AccordionDropdown
+                      category={category}
+                      IterateCategories={IterateCategories}
+                      handlerClickCategory={handlerClickCategory}
+                      updateCategory={updateCategory}
+                    />
+                  </View>
+                </>
+              )}
+              {isSub && !category?.subcategories?.length && (
+                <CategoryTab isSpace={!!category?.parent_category_id}>
+                  <TouchableOpacity
+                    style={{ flex: 1, marginRight: 5 }}
+                    onPress={() => handlerClickCategory(category)}
+                  >
+                    <OText numberOfLines={1}>
+                      {category.name}
+                    </OText>
+                  </TouchableOpacity>
+                  <View>
+                    <ToggleSwitch
+                      isOn={category?.enabled}
+                      onColor={theme.colors.primary}
+                      offColor={theme.colors.offColor}
+                      size="small"
+                      onToggle={(value: boolean) => handleSwitch(value, category.id)}
+                      // disabled={loading}
+                      animationSpeed={200}
+                    />
+                  </View>
+                </CategoryTab>
+              )}
+            </>
+          ) : (
+            <CategoryTab
+              isSpace={!!category?.parent_category_id}
+            >
+              <TouchableOpacity onPress={() => handlerClickCategory(category)} style={{ flex: 1, marginRight: 5 }}>
+                <OText numberOfLines={1}>
+                  {category.name}
+                </OText>
+              </TouchableOpacity>
+              <View>
+                <ToggleSwitch
+                  isOn={category?.enabled}
+                  onColor={theme.colors.primary}
+                  offColor={theme.colors.offColor}
+                  size="small"
+                  onToggle={(value: boolean) => handleSwitch(value, category.id)}
+                  // disabled={loading}
+                  animationSpeed={200}
+                />
+              </View>
+            </CategoryTab>
+          )}
+        </View>
+      ))}
+      {list && list?.length === 0 && isSub && (
+        <CategoryTab
+          isSpace={!!currentCat?.parent_category_id}
+        >
+          <TouchableOpacity onPress={() => handlerClickCategory(currentCat)} style={{ flex: 1, marginRight: 5 }}>
+            <OText numberOfLines={1}>
+              {currentCat.name}
+            </OText>
+          </TouchableOpacity>
+          <View>
+            <ToggleSwitch
+              isOn={currentCat?.enabled}
+              onColor={theme.colors.primary}
+              offColor={theme.colors.offColor}
+              size="small"
+              onToggle={(value: boolean) => handleSwitch(value, currentCat.id)}
+              // disabled={loading}
+              animationSpeed={200}
+            />
+          </View>
+        </CategoryTab>
+      )}
+    </>
+  )
+}

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>
+  )
+}