ordering-ui-react-native 0.14.50 → 0.14.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.14.50",
+  "version": "0.14.53",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/src/components/OrderDetails/index.tsx

@@ -453,7 +453,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
                   {order?.offer_type === 1 ? (
                     <OText>
                       {t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}{' '}
-                      <span>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</span>
+                      <OText>{`(${verifyDecimals(order?.offer_rate, parsePrice)}%)`}</OText>
                     </OText>
                   ) : (
                     <OText>{t('DISCOUNT', theme?.defaultLanguages?.DISCOUNT || 'Discount')}</OText>

package/themes/kiosk/src/components/CustomerName/index.tsx

@@ -24,7 +24,7 @@ const CustomerName = (props: Props): React.ReactElement => {
   const [orientationState] = useDeviceOrientation();
 
   const onSubmit = (values: any) => {
-    _setStoreData('customer_name', {customerName: values.name});
+    _setStoreData('customer_name', { customerName: values.name });
     onProceedToPay()
   };
 
@@ -52,27 +52,31 @@ const CustomerName = (props: Props): React.ReactElement => {
 
   const goToBack = () => navigation?.goBack();
 
-  const submitButton  = (<OButton
-    text={t('PROCEED_TO_PAY', 'Proceed to Pay')}
-    onClick={handleSubmit(onSubmit)}
-    textStyle={{color: theme.colors.primaryContrast, fontSize: 20}}
-    parentStyle={{
-      height: orientationState?.orientation === PORTRAIT
-         ? 50 : 100
-    }}
-    style={{
-      width: orientationState?.orientation === PORTRAIT
-        ? orientationState?.dimensions.width - 40
-        : orientationState?.dimensions.width * 0.5,
-    }}
-  />);
+  const submitButton = (
+    <View style={{ flex: 1, alignItems: 'center' }}>
+      <OButton
+        text={t('PROCEED_TO_PAY', 'Proceed to Pay')}
+        onClick={handleSubmit(onSubmit)}
+        textStyle={{ color: theme.colors.primaryContrast, fontSize: 20 }}
+        parentStyle={{
+          height: orientationState?.orientation === PORTRAIT
+            ? 50 : 100
+        }}
+        style={{
+          width: orientationState?.orientation === PORTRAIT
+            ? orientationState?.dimensions.width * 0.5
+            : orientationState?.dimensions.width * 0.5
+        }}
+      />
+    </View>
+  );
 
-  const skipButton  = (
-    <View style={{flex:1, left: orientationState?.dimensions.width * 0.2,}}>
+  const skipButton = (
+    <View style={{ flex: 1, alignItems: 'center' }}>
       <OButton
         text={t('SKIP', 'Skip')}
         onClick={onProceedToPay}
-        textStyle={{color: theme.colors.primary, fontSize: 20}}
+        textStyle={{ color: theme.colors.primary, fontSize: 20 }}
         parentStyle={{
           height: orientationState?.orientation === PORTRAIT
             ? 50 : 100
@@ -80,7 +84,7 @@ const CustomerName = (props: Props): React.ReactElement => {
         style={{
           backgroundColor: theme.colors.white,
           width: orientationState?.orientation === PORTRAIT
-            ? orientationState?.dimensions.width - 40
+            ? orientationState?.dimensions.width * 0.2
             : orientationState?.dimensions.width * 0.1,
         }}
       />
@@ -89,78 +93,78 @@ const CustomerName = (props: Props): React.ReactElement => {
 
   return (
     <>
-        <Container>
-          <NavBar
-                title={t('YOUR_NAME', 'Your name')}
-                onActionLeft={goToBack}
-                btnStyle={{paddingLeft: 0}}
-          />
-          <View style={{ 
-            marginVertical: orientationState?.dimensions?.height * 0.08,
-            paddingLeft: orientationState?.dimensions?.width * 0.25
-          }}>
-              <OText
-                size={orientationState?.dimensions?.width * 0.05}
-                style={{bottom: 20}}
-              >
-                {t('WHATS_YOUR_NAME', "What's your name?")}
-                {/* <OText
+      <Container>
+        <NavBar
+          title={t('YOUR_NAME', 'Your name')}
+          onActionLeft={goToBack}
+          btnStyle={{ paddingLeft: 0 }}
+        />
+        <View style={{
+          marginVertical: orientationState?.dimensions?.height * 0.08,
+          alignItems: 'center'
+        }}>
+          <OText
+            size={orientationState?.dimensions?.width * 0.05}
+            style={{ bottom: 20 }}
+          >
+            {t('WHATS_YOUR_NAME', "What's your name?")}
+            {/* <OText
                   size={orientationState?.dimensions?.width * 0.05}
                   weight={'700'}
                 >
                   {`${t('ORDER_BE_FOR', 'order be for?')}`}
                 </OText> */}
-              </OText>
-              <Controller
-                control={control}
-                render={({ onChange, value }: any) => (
-                  <OInput
-                    placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
-                    style={{
-                      ...styles.inputStyle,
-                      width: orientationState?.orientation === PORTRAIT
-                        ? orientationState?.dimensions.width - 40
-                        : orientationState?.dimensions.width * 0.5,
-                    }}
-                    value={value}
-                    autoCapitalize="words"
-                    autoCorrect={false}
-                    onChange={(val: any) => onChange(val)}
-                    onSubmitEditing={handleSubmit(onSubmit)}
-                  />
-                )}
-                name="name"
-                rules={{
-                  required: t(
-                    'VALIDATION_ERROR_REQUIRED',
-                    'The field Customer Name is required',
-                  ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
-                  pattern: {
-                    value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
-                    message: t(
-                      'INVALID_ERROR',
-                      'Invalid name',
-                    ).replace('_attribute_', t('NAME', 'Name')),
-                  }
+          </OText>
+          <Controller
+            control={control}
+            render={({ onChange, value }: any) => (
+              <OInput
+                placeholder={t('WRITE_YOUR_NAME', 'Write your name')}
+                style={{
+                  ...styles.inputStyle,
+                  width: orientationState?.orientation === PORTRAIT
+                    ? orientationState?.dimensions.width * 0.5
+                    : orientationState?.dimensions.width * 0.5,
                 }}
-                defaultValue=""
+                value={value}
+                autoCapitalize="words"
+                autoCorrect={false}
+                onChange={(val: any) => onChange(val)}
+                onSubmitEditing={handleSubmit(onSubmit)}
               />
+            )}
+            name="name"
+            rules={{
+              required: t(
+                'VALIDATION_ERROR_REQUIRED',
+                'The field Customer Name is required',
+              ).replace('_attribute_', t('REQUEST_COLLECTION_CUSTOMER_NAME', 'Customer Name')),
+              pattern: {
+                value: /^[a-zA-Z áéíóúüñçÁÉÍÓÚÜÑÇ]+$/i,
+                message: t(
+                  'INVALID_ERROR',
+                  'Invalid name',
+                ).replace('_attribute_', t('NAME', 'Name')),
+              }
+            }}
+            defaultValue=""
+          />
 
-              {orientationState?.orientation === LANDSCAPE && submitButton}
-              {orientationState?.orientation === LANDSCAPE && skipButton}
-              {(orientationState?.orientation === PORTRAIT) && (
-                <OSActions>
-                  {submitButton}
-                </OSActions>
-              )}
-              {(orientationState?.orientation === PORTRAIT) && (
-                <OSActions>
-                  {skipButton}
-                </OSActions>
-              )}
-            </View>
-        </Container>
-      </>
+          {orientationState?.orientation === LANDSCAPE && submitButton}
+          {orientationState?.orientation === LANDSCAPE && skipButton}
+          {(orientationState?.orientation === PORTRAIT) && (
+            <OSActions>
+              {submitButton}
+            </OSActions>
+          )}
+          {(orientationState?.orientation === PORTRAIT) && (
+            <OSActions>
+              {skipButton}
+            </OSActions>
+          )}
+        </View>
+      </Container>
+    </>
   );
 };
 

package/themes/kiosk/src/components/Intro/index.tsx

@@ -65,7 +65,7 @@ const Intro = (props: any): React.ReactElement => {
               />
 
               <OButton
-                text={t('TOUCH_TO_ORDER', 'Touch to order')}
+                text={t('TOUCH_ANYWHERE_TO_ORDER', 'Touch anywhere to order')}
                 parentStyle={{
                   alignItems: 'center',
                   width: orientationState?.dimensions?.width - _offset

package/themes/kiosk/src/components/NavBar/index.tsx

@@ -5,7 +5,6 @@ import { ImageStyle, TextStyle, View, Platform } from 'react-native'
 import { OrderTypeSelector } from '../OrderTypeSelector'
 import { useConfig, useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native'
-
 const Wrapper = styled.View`
   background-color: ${(props: any) => props.theme.colors.white};
   padding: 10px 0px 20px 0px;
@@ -65,27 +64,28 @@ const NavBar = (props: Props) => {
 
   return (
     <Wrapper style={{ paddingTop: props.paddingTop, ...props.style }}>
-      {(props?.onActionLeft || props?.leftImg) && (
+      {(props?.onActionLeft) && (
         <OButton
-          imgLeftSrc={props.leftImg || theme.images.general.arrow_left}
+          imgLeftSrc={props.leftImg}
           imgRightSrc={null}
           style={{ ...btnBackArrow, ...props.btnStyle }}
           onClick={props.onActionLeft}
-          imgLeftStyle= {props.imgLeftStyle}
+          imgLeftStyle={props.imgLeftStyle}
+          {...(!props.leftImg && { iconProps: { name: 'arrowleft', size: 28, color: props.btnStyle?.color } })}
         />)
       }
       <TitleTopWrapper>
         {props.withIcon
           ? (
-              <OIcon
-                url={props.icon}
-                style={{
-                  borderColor: theme.colors.lightGray,
-                  borderRadius: 20,
-                }}
-                width={60}
-                height={60}
-              />
+            <OIcon
+              url={props.icon}
+              style={{
+                borderColor: theme.colors.lightGray,
+                borderRadius: 20,
+              }}
+              width={60}
+              height={60}
+            />
           )
           : null
         }
@@ -125,7 +125,7 @@ const NavBar = (props: Props) => {
         </View>
       )}
 
-      { props.rightComponent }
+      {props.rightComponent}
     </Wrapper>
   )
 }

package/themes/kiosk/src/components/ProductForm/index.tsx

@@ -69,7 +69,7 @@ export const ProductOptionsUI = (props: any) => {
 
   const { product, loading, error } = productObject;
 
-  const HEADER_EXPANDED_HEIGHT =  Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
+  const HEADER_EXPANDED_HEIGHT = Platform.OS === 'ios' ? orientationState?.dimensions?.height * 0.65 : orientationState?.dimensions?.height * 0.4;
   const HEADER_COLLAPSED_HEIGHT = orientationState?.dimensions?.height * 0.2;
 
   const isError = (id: number) => {
@@ -100,35 +100,35 @@ export const ProductOptionsUI = (props: any) => {
   const saveErrors = orderState.loading || maxProductQuantity === 0 || Object.keys(errors)?.length > 0
 
   const [scrollY] = useState(new Animated.Value(0));
-  
+
   const headerHeight = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [HEADER_EXPANDED_HEIGHT, HEADER_COLLAPSED_HEIGHT],
     extrapolate: 'clamp'
   });
   const heroContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
   const heroTranslateY = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
-    outputRange: [0, -(HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT)],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
+    outputRange: [0, -(HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT)],
     extrapolate: 'clamp'
   });
   const navBar1ContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
   const navBar2ContainerOpacity = scrollY.interpolate({
-    inputRange: [0, HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [0, HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [0, 1],
     extrapolate: 'clamp'
   });
 
   const collapsedBarContainerOpacity = scrollY.interpolate({
-    inputRange: [HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT - ((HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT) * 0.08), HEADER_EXPANDED_HEIGHT-HEADER_COLLAPSED_HEIGHT],
+    inputRange: [HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT - ((HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT) * 0.08), HEADER_EXPANDED_HEIGHT - HEADER_COLLAPSED_HEIGHT],
     outputRange: [0, 1],
     extrapolate: 'clamp'
   });
@@ -223,7 +223,7 @@ export const ProductOptionsUI = (props: any) => {
     shadow: {
       shadowColor: '#000',
       shadowOffset: { width: 1, height: 1 },
-      shadowOpacity:  0.4,
+      shadowOpacity: 0.4,
       shadowRadius: 3,
       elevation: 5,
     }
@@ -235,33 +235,31 @@ export const ProductOptionsUI = (props: any) => {
         style={styles.mainContainer}
         contentContainerStyle={styles.scrollContainer}
         onScroll={Animated.event(
-          [{ nativeEvent: { contentOffset: { y: scrollY }} }],
-          {useNativeDriver: false})
+          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
+          { useNativeDriver: false })
         }
         scrollEventThrottle={16}
       >
         <Animated.View style={[styles.header, { height: headerHeight }]}>
           {!isDrawer && (<Animated.View style={{ opacity: navBar1ContainerOpacity }}>
-              <NavBar
-                {...navBarProps}
-                titleColor={theme.colors.white}
-                {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left_white })}
-                btnStyle={{
-                  width: 55,
-                  height: 55,
-                  backgroundColor: 'black',
-                  borderRadius: 100,
-                  opacity: 0.8,
-                  left: 20,
-                }}
-                imgLeftStyle={{ width: 27, height: 27 }}
-              />
-            </Animated.View>
+            <NavBar
+              {...navBarProps}
+              titleColor={theme.colors.white}
+              btnStyle={{
+                width: 66,
+                height: 66,
+                backgroundColor: 'black',
+                borderRadius: 100,
+                color: 'white',
+                opacity: 0.8,
+                left: 20,
+              }}
+            />
+          </Animated.View>
           )}
           <Animated.View style={{ opacity: navBar2ContainerOpacity, position: 'absolute' }}>
             <NavBar
               {...navBarProps}
-              {...((navigation || onClose) && { leftImg: theme.images.general.arrow_left })}
               btnStyle={{
                 width: 55,
                 height: 55,
@@ -269,7 +267,6 @@ export const ProductOptionsUI = (props: any) => {
                 borderRadius: 100,
                 left: 20,
               }}
-              imgLeftStyle={{ width: 27, height: 27 }}
             />
           </Animated.View>
 
@@ -288,7 +285,7 @@ export const ProductOptionsUI = (props: any) => {
               }}
             >
               <OImage
-                source={{uri: product?.images}}
+                source={{ uri: product?.images }}
                 width={70}
                 height={70}
                 resizeMode="cover"
@@ -319,7 +316,7 @@ export const ProductOptionsUI = (props: any) => {
             opacity: heroContainerOpacity,
             position: 'absolute',
             zIndex: -100,
-            transform: [{translateY: heroTranslateY }],
+            transform: [{ translateY: heroTranslateY }],
           }}>
             <View
               style={{
@@ -330,13 +327,13 @@ export const ProductOptionsUI = (props: any) => {
                 backgroundColor: 'rgba(24, 28, 50, 0.4)',
               }}
             >
-              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex:1, justifyContent: 'center' }} />
+              <ImageBackground source={{ uri: product?.images }} resizeMode='cover' style={{ flex: 1, justifyContent: 'center' }} />
 
             </View>
 
             <Animated.View
               style={{
-                transform: [{translateY: heroTranslateY }],
+                transform: [{ translateY: heroTranslateY }],
                 width: orientationState?.dimensions?.width * 0.75,
                 height: HEADER_EXPANDED_HEIGHT / 2,
                 position: 'relative',
@@ -347,7 +344,7 @@ export const ProductOptionsUI = (props: any) => {
             >
               <OText
                 color={theme.colors.white}
-                size={orientationState?.dimensions?.width * 0.048}
+                size={orientationState?.dimensions?.width * 0.038}
                 weight="bold"
                 mBottom={10}
                 numberOfLines={2}
@@ -369,18 +366,18 @@ export const ProductOptionsUI = (props: any) => {
           <Spinner visible={loading} />
         )} */}
         {!loading && !error && product && (
-          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}> 
+          <View style={{ paddingTop: isDrawer ? 10 : 20, paddingBottom: 80 }}>
             <WrapContent isDrawer={isDrawer}>
               <ProductDescription>
                 {(
                   (product?.sku && product?.sku !== '-1' && product?.sku !== '1') ||
                   (productCart?.sku && productCart?.sku !== '-1' && productCart?.sku !== '1')
-                ) &&(
-                  <>
-                    <OText size={20}>{t('SKU', 'Sku')}</OText>
-                    <OText>{product?.sku || productCart?.sku}</OText>
-                  </>
-                )}
+                ) && (
+                    <>
+                      <OText size={20}>{t('SKU', 'Sku')}</OText>
+                      <OText>{product?.sku || productCart?.sku}</OText>
+                    </>
+                  )}
               </ProductDescription>
               <ProductEditions>
                 {product?.ingredients.length > 0 && (
@@ -504,7 +501,7 @@ export const ProductOptionsUI = (props: any) => {
               </TouchableOpacity>
             </View>
           )}
-          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%':'80%' }}>
+          <View style={{ width: isSoldOut || maxProductQuantity <= 0 ? '100%' : isDrawer ? '70%' : '80%' }}>
             {productCart && !isSoldOut && maxProductQuantity > 0 && auth && orderState.options?.address_id && (
               <OButton
                 onClick={() => handleSaveProduct()}

package/themes/original/src/components/BusinessPreorder/index.tsx

@@ -34,7 +34,9 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     timeSelected,
     handleBusinessClick,
     handleChangeDate,
-    handleChangeTime
+    handleChangeTime,
+    handleAsap,
+    isAsap
   } = props
 
   const theme = useTheme()
@@ -43,10 +45,11 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [{ configs }] = useConfig()
   const [orderState] = useOrder()
   const [selectedPreorderType, setSelectedPreorderType] = useState(0)
-  const [menu, setMenu] = useState({})
+  const [menu, setMenu] = useState<any>({})
   const [timeList, setTimeList] = useState<any>([])
   const [selectDate, setSelectedDate] = useState<any>(null)
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
+  const [isEnabled, setIsEnabled] = useState(false)
 
   const styles = StyleSheet.create({
     container: {
@@ -137,7 +140,13 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     { key: 'business_menu', name: t('BUSINESS_MENU', 'Business menu') }
   ]
 
+  const validateSelectedDate = (curdate: any, menu: any) => {
+    const day = moment(curdate).format('d')
+    setIsEnabled(menu?.schedule[day]?.enabled || false)
+  }
+
   const getTimes = (curdate: any, menu: any) => {
+    validateSelectedDate(curdate, menu)
     const date = new Date()
     var dateSeleted = new Date(curdate)
     var times = []
@@ -240,26 +249,11 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   }
 
   useEffect(() => {
-    if (hoursList.length === 0) return
-    if (Object.keys(menu).length > 0) {
-      const _times: any = getTimes(selectDate, menu)
-      setTimeList(_times)
-    } else {
-      const _timeLists = hoursList.map((hour: any) => {
-        return {
-          value: hour.startTime,
-          text: configs?.format_time?.value === '12' ? (
-            hour.startTime.includes('12')
-              ? `${hour.startTime}PM`
-              : parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'hh:mma' })
-          ) : (
-            parseTime(moment(hour.startTime, 'HH:mm'), { outputFormat: 'HH:mm' })
-          )
-        }
-      })
-      setTimeList(_timeLists)
-    }
-  }, [selectDate, hoursList, menu])
+    if (selectDate === null) return
+    const selectedMenu = Object.keys(menu).length > 0 ? (menu?.use_business_schedule ? business : menu) : business
+    const _times = getTimes(selectDate, selectedMenu)
+    setTimeList(_times)
+  }, [selectDate, menu])
 
   useEffect(() => {
     if (selectedPreorderType === 0 && Object.keys(menu).length > 0) setMenu({})
@@ -273,6 +267,10 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
     }
   }, [dateSelected])
 
+  useEffect(() => {
+    handleAsap && handleAsap()
+  }, [])
+
   return (
     <>
       <PreOrderContainer contentContainerStyle={{ paddingVertical: 32, paddingHorizontal: 40 }}>
@@ -413,24 +411,38 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             )}
           </View>
           <TimeListWrapper nestedScrollEnabled={true}>
-            <TimeContentWrapper>
-              {timeList.map((time: any, i: number) => (
-                <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
-                  <TimeItem active={timeSelected === time.value}>
-                    <OText
-                      size={14}
-                      color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
-                      style={{
-                        lineHeight: 24
-                      }}
-                    >{time.text}</OText>
-                  </TimeItem>
-                </TouchableOpacity>
-              ))}
-              {timeList.length % 3 === 2 && (
-                <TimeItem style={{ backgroundColor: 'transparent' }} />
-              )}
-            </TimeContentWrapper>
+            {(isEnabled && timeList?.length > 0) ? (
+              <TimeContentWrapper>
+                {timeList.map((time: any, i: number) => (
+                  <TouchableOpacity key={i} onPress={() => handleChangeTime(time.value)}>
+                    <TimeItem active={timeSelected === time.value}>
+                      <OText
+                        size={14}
+                        color={timeSelected === time.value ? theme.colors.primary : theme.colors.textNormal}
+                        style={{
+                          lineHeight: 24
+                        }}
+                      >{time.text}</OText>
+                    </TimeItem>
+                  </TouchableOpacity>
+                ))}
+                {timeList.length % 3 === 2 && (
+                  <TimeItem style={{ backgroundColor: 'transparent' }} />
+                )}
+              </TimeContentWrapper>
+            ) : (
+              <OText
+                size={16}
+                style={{
+                  fontWeight: '600',
+                  lineHeight: 24,
+                  marginBottom: 12,
+                  textAlign: 'center'
+                }}
+              >
+                {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
+              </OText>
+            )}
           </TimeListWrapper>
         </OrderTimeWrapper>
         <OButton
@@ -438,6 +450,7 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
           textStyle={{ color: 'white' }}
           style={{ borderRadius: 7.6, marginBottom: 20, marginTop: 30 }}
           onClick={() => handleClickBusiness()}
+          isDisabled={isAsap || !(dateSelected && timeSelected)}
         />
       </PreOrderContainer>
       <Spinner visible={orderState.loading} />

package/themes/original/src/components/BusinessesListing/index.tsx

@@ -240,7 +240,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				{isFarAway && (
 					<FarAwayMessage style={styles.farAwayMsg}>
 						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
+						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
 					</FarAwayMessage>
 				)}
 				<OrderControlContainer>

package/themes/original/src/components/Checkout/index.tsx

@@ -127,6 +127,8 @@ const CheckoutUI = (props: any) => {
 	const [openChangeStore, setOpenChangeStore] = useState(false)
 	const [isDeliveryOptionModalVisible, setIsDeliveryOptionModalVisible] = useState(false)
 
+  const isWalletEnabled = configs?.wallet_enabled?.value === '1'
+
 	const driverTipsOptions = typeof configs?.driver_tip_options?.value === 'string'
 		? JSON.parse(configs?.driver_tip_options?.value) || []
 		: configs?.driver_tip_options?.value || []
@@ -506,7 +508,7 @@ const CheckoutUI = (props: any) => {
 						</ChSection>
 					)}
 
-          {!cartState.loading && cart && (
+          {!cartState.loading && cart && isWalletEnabled && (
             <WalletPaymentOptionContainer>
               <PaymentOptionWallet
                 cart={cart}

package/themes/original/src/components/PaymentOptionWallet/index.tsx

@@ -55,7 +55,7 @@ const PaymentOptionWalletUI = (props: any) => {
   }
 
   const handleOnChange = (position: any, wallet: any) => {
-    const updatedCheckedState = checkedState.map((item, index) =>
+    const updatedCheckedState = checkedState.map((item: any, index: any) =>
       index === position ? !item : item
     );
 
@@ -85,7 +85,7 @@ const PaymentOptionWalletUI = (props: any) => {
         walletsState.result?.length > 0 &&
       (
         <>
-          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && (
+          {walletsState.result?.map((wallet: any, idx: any) => wallet.valid && wallet.balance >= 0 && (
             <Container
               key={wallet.id}
               isBottomBorder={idx === walletsState.result?.filter((wallet: any) => wallet.valid)?.length - 1}

package/themes/original/src/components/UserProfile/index.tsx

@@ -5,6 +5,7 @@ import {
 	useLanguage,
 	ToastType,
 	useToast,
+  useConfig
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { useForm } from 'react-hook-form';
@@ -91,12 +92,15 @@ const ProfileListUI = (props: ProfileParams) => {
 
 	const [{ user }] = useSession();
 	const [, t] = useLanguage();
+	const [{ configs }] = useConfig();
 	const [, { showToast }] = useToast();
 	const { errors } = useForm();
 
 	const { height } = useWindowDimensions();
 	const { top, bottom } = useSafeAreaInsets();
 
+  const isWalletEnabled = configs?.wallet_enabled?.value === '1'
+
 	const onRedirect = (route: string, params?: any) => {
 		navigation.navigate(route, params)
 	}
@@ -161,10 +165,12 @@ const ProfileListUI = (props: ProfileParams) => {
 						<MessageCircle name='message1' style={styles.messageIconStyle} color={theme.colors.textNormal} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('MESSAGES', 'Messages')}</OText>
 					</ListItem>
-					<ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
-						<Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
-						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
-					</ListItem>
+          {!isWalletEnabled && (
+            <ListItem onPress={() => onRedirect('Wallets', { isFromProfile: true, isGoBack: true })} activeOpacity={0.7}>
+              <Ionicons name='wallet-outline' style={styles.messageIconStyle} color={theme.colors.textNormal} />
+              <OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('WALLETS', 'Wallets')}</OText>
+            </ListItem>
+          )}
 					<ListItem onPress={() => navigation.navigate('Help', {})} activeOpacity={0.7}>
 						<OIcon src={theme.images.general.ic_help} width={16} color={theme.colors.textNormal} style={{ marginEnd: 14 }} />
 						<OText size={14} lineHeight={24} weight={'400'} color={theme.colors.textNormal}>{t('HELP', 'Help')}</OText>

package/themes/original/src/components/Wallets/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Pressable, View } from 'react-native';
 import { useTheme } from 'styled-components/native'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
@@ -60,6 +60,14 @@ const WalletsUI = (props: any) => {
     navigation?.canGoBack() && navigation.goBack()
   }
 
+  useEffect(() => {
+    if (configs?.wallet_enabled?.value === '0') {
+      navigation.navigate('BottomTab', {
+        screen: 'Profile'
+      })
+    }
+  }, [configs])
+
   return (
     <Container>
       <NavBar