ordering-ui-react-native 0.14.96 → 0.14.98-release

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

@@ -21,6 +21,7 @@ import {
   TimeContentWrapper,
   TimeItem
 } from './styles'
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const windowHeight = Dimensions.get('window').height;
 
@@ -50,7 +51,9 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
   const [selectDate, setSelectedDate] = useState<any>(null)
   const [datesWhitelist, setDateWhitelist] = useState<any>([{ start: null, end: null }])
   const [isEnabled, setIsEnabled] = useState(false)
-
+  const { top } = useSafeAreaInsets()
+  const showOrderTime = (selectedPreorderType === 1 && Object.keys(menu)?.length > 0) || selectedPreorderType === 0
+  const isPreOrderSetting = configs?.preorder_status_enabled?.value === '1'
   const styles = StyleSheet.create({
     container: {
       height: windowHeight,
@@ -299,60 +302,62 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             />
           </View>
         </BusinessInfoWrapper>
-        <PreorderTypeWrapper>
-          <OText
-            size={16}
-            style={{
-              fontWeight: '600',
-              lineHeight: 24,
-              marginBottom: 12
-            }}
-          >
-            {t('PREORDER_TYPE', 'Preorder type')}
-          </OText>
-          <SelectDropdown
-            defaultValueByIndex={selectedPreorderType}
-            data={preorderTypeList}
-            // disabled={orderState.loading}
-            onSelect={(selectedItem, index) => {
-              setSelectedPreorderType(index)
-            }}
-            buttonTextAfterSelection={(selectedItem, index) => {
-              return selectedItem.name
-            }}
-            rowTextForSelection={(item, index) => {
-              return item.name
-            }}
-            buttonStyle={styles.selectOption}
-            buttonTextStyle={{
-              color: theme.colors.disabled,
-              fontSize: 14,
-              textAlign: 'left',
-              marginHorizontal: 0
-            }}
-            dropdownStyle={{
-              borderRadius: 8,
-              borderColor: theme.colors.lightGray,
-              marginTop: Platform.OS === 'ios' ? 12 : -15
-            }}
-            rowStyle={{
-              borderBottomColor: theme.colors.backgroundGray100,
-              backgroundColor: theme.colors.backgroundGray100,
-              height: 40,
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-              paddingTop: 8,
-              paddingHorizontal: 14
-            }}
-            rowTextStyle={{
-              color: theme.colors.disabled,
-              fontSize: 14,
-              marginHorizontal: 0
-            }}
-            renderDropdownIcon={() => dropDownIcon()}
-            dropdownOverlayColor='transparent'
-          />
-        </PreorderTypeWrapper>
+        {isPreOrderSetting && (
+          <PreorderTypeWrapper>
+            <OText
+              size={16}
+              style={{
+                fontWeight: '600',
+                lineHeight: 24,
+                marginBottom: 12
+              }}
+            >
+              {t('PREORDER_TYPE', 'Preorder type')}
+            </OText>
+            <SelectDropdown
+              defaultValueByIndex={selectedPreorderType}
+              data={preorderTypeList}
+              // disabled={orderState.loading}
+              onSelect={(selectedItem, index) => {
+                setSelectedPreorderType(index)
+              }}
+              buttonTextAfterSelection={(selectedItem, index) => {
+                return selectedItem.name
+              }}
+              rowTextForSelection={(item, index) => {
+                return item.name
+              }}
+              buttonStyle={styles.selectOption}
+              buttonTextStyle={{
+                color: theme.colors.disabled,
+                fontSize: 14,
+                textAlign: 'left',
+                marginHorizontal: 0
+              }}
+              dropdownStyle={{
+                borderRadius: 8,
+                borderColor: theme.colors.lightGray,
+                marginTop: Platform.OS === 'ios' ? 12 : -top
+              }}
+              rowStyle={{
+                borderBottomColor: theme.colors.backgroundGray100,
+                backgroundColor: theme.colors.backgroundGray100,
+                height: 40,
+                flexDirection: 'column',
+                alignItems: 'flex-start',
+                paddingTop: 8,
+                paddingHorizontal: 14
+              }}
+              rowTextStyle={{
+                color: theme.colors.disabled,
+                fontSize: 14,
+                marginHorizontal: 0
+              }}
+              renderDropdownIcon={() => dropDownIcon()}
+              dropdownOverlayColor='transparent'
+            />
+          </PreorderTypeWrapper>
+        )}
         {selectedPreorderType === 1 && (
           <MenuWrapper>
             <OText
@@ -372,78 +377,94 @@ const BusinessPreorderUI = (props: BusinessPreorderParams) => {
             />
           </MenuWrapper>
         )}
-        <OrderTimeWrapper>
+        {isPreOrderSetting && showOrderTime && (
+          <OrderTimeWrapper>
+            <OText
+              size={16}
+              style={{
+                fontWeight: '600',
+                lineHeight: 24
+              }}
+            >
+              {t('ORDER_TIME', 'Order time')}
+            </OText>
+            <View style={{ flex: 1 }}>
+              {selectDate && datesWhitelist[0]?.start !== null && (
+                <CalendarStrip
+                  scrollable
+                  style={styles.calendar}
+                  calendarHeaderContainerStyle={styles.calendarHeaderContainer}
+                  calendarHeaderStyle={styles.calendarHeader}
+                  dateNumberStyle={styles.dateNumber}
+                  dateNameStyle={styles.dateName}
+                  iconContainer={{ flex: 0.1 }}
+                  highlightDateNameStyle={styles.highlightDateName}
+                  highlightDateNumberStyle={styles.highlightDateNumber}
+                  dayContainerStyle={{ height: '100%' }}
+                  highlightDateContainerStyle={{ height: '100%' }}
+                  calendarHeaderFormat='MMMM, YYYY'
+                  iconStyle={{ borderWidth: 1 }}
+                  selectedDate={selectDate}
+                  datesWhitelist={datesWhitelist}
+                  disabledDateNameStyle={styles.disabledDateName}
+                  disabledDateNumberStyle={styles.disabledDateNumber}
+                  disabledDateOpacity={0.6}
+                  onDateSelected={(date) => onSelectDate(date)}
+                  leftSelector={<LeftSelector />}
+                  rightSelector={<RightSelector />}
+                />
+              )}
+            </View>
+            <TimeListWrapper nestedScrollEnabled={true}>
+              {(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>
+        )}
+        {!isPreOrderSetting && (
           <OText
             size={16}
             style={{
               fontWeight: '600',
-              lineHeight: 24
+              lineHeight: 24,
+              marginTop: 30,
+              marginBottom: 12,
+              textAlign: 'center'
             }}
-          >
-            {t('ORDER_TIME', 'Order time')}
+            >
+            {t('ERROR_ADD_PRODUCT_BUSINESS_CLOSED', 'The business is closed at the moment')}
           </OText>
-          <View style={{ flex: 1 }}>
-            {selectDate && datesWhitelist[0]?.start !== null && (
-              <CalendarStrip
-                scrollable
-                style={styles.calendar}
-                calendarHeaderContainerStyle={styles.calendarHeaderContainer}
-                calendarHeaderStyle={styles.calendarHeader}
-                dateNumberStyle={styles.dateNumber}
-                dateNameStyle={styles.dateName}
-                iconContainer={{ flex: 0.1 }}
-                highlightDateNameStyle={styles.highlightDateName}
-                highlightDateNumberStyle={styles.highlightDateNumber}
-                dayContainerStyle={{ height: '100%' }}
-                highlightDateContainerStyle={{ height: '100%' }}
-                calendarHeaderFormat='MMMM, YYYY'
-                iconStyle={{ borderWidth: 1 }}
-                selectedDate={selectDate}
-                datesWhitelist={datesWhitelist}
-                disabledDateNameStyle={styles.disabledDateName}
-                disabledDateNumberStyle={styles.disabledDateNumber}
-                disabledDateOpacity={0.6}
-                onDateSelected={(date) => onSelectDate(date)}
-                leftSelector={<LeftSelector />}
-                rightSelector={<RightSelector />}
-              />
-            )}
-          </View>
-          <TimeListWrapper nestedScrollEnabled={true}>
-            {(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
           text={t('GO_TO_MENU', 'Go to menu')}
           textStyle={{ color: 'white' }}

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

@@ -44,11 +44,11 @@ const BusinessProductsCategoriesUI = (props: any) => {
 			borderTopStartRadius: 4,
 			borderTopEndRadius: 4,
 			backgroundColor: theme.colors.textPrimary,
-		  },
-		  tabDeactived: {
+		},
+		tabDeactived: {
 			marginTop: 10,
 			height: 4
-		  }
+		}
 	});
 
 	const handleCategoryScroll = (category: any) => {
@@ -111,8 +111,10 @@ const BusinessProductsCategoriesUI = (props: any) => {
 				categories.length &&
 				categories.map((category: any) => (
 					<Tab
-						key={category.name}
-						onPress={() => handleCategoryScroll(category)}
+						key={category.id}
+						onPress={() => requestAnimationFrame(() => {
+							handleCategoryScroll(category)
+						})}
 						style={[
 							category.id === 'featured' && !featured && styles.featuredStyle,
 							{

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

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ProductsList, useLanguage, useUtils, useConfig } from 'ordering-components/native';
 import { SingleProductCard } from '../SingleProductCard';
 import { NotFoundSource } from '../NotFoundSource';
 import { BusinessProductsListParams } from '../../types';
-import { OIcon, OText } from '../shared';
+import { OButton, OIcon, OModal, OText } from '../shared';
 import { ProductsContainer, ErrorMessage, WrapperNotFound } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native';
+import { useTheme } from 'styled-components/native';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -32,8 +33,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const [, t] = useLanguage();
   const [{ optimizeImage }] = useUtils()
   const [{ configs }] = useConfig()
+  const theme = useTheme()
   const isUseParentCategory = configs?.use_parent_category?.value === 'true' || configs?.use_parent_category?.value === '1'
-
+  const [openDescription, setOpenDescription] = useState<any>(null)
   const handleOnLayout = (event: any, categoryId: any) => {
     const _categoriesLayout = { ...categoriesLayout }
     const categoryKey = 'cat_' + categoryId
@@ -42,7 +44,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   }
 
   return (
-    <ProductsContainer>
+    <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
       {category.id &&
         categoryState.products?.sort((a: any, b: any) => a.rank - b.rank).map((product: any) => (
           <SingleProductCard
@@ -84,8 +86,11 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 
       {!category?.id && categories.filter(category => category?.id !== null).map((category, i, _categories) => {
         const products = !isUseParentCategory
-          ? categoryState?.products?.filter((product : any) => product?.category_id === category?.id) ?? []
-          : categoryState?.products?.filter((product : any) => category?.children?.some((cat : any) => cat.category_id === product?.category_id)) ?? []
+          ? categoryState?.products?.filter((product: any) => product?.category_id === category?.id) ?? []
+          : categoryState?.products?.filter((product: any) => category?.children?.some((cat: any) => cat.category_id === product?.category_id)) ?? []
+
+        const shortCategoryDescription = category?.description?.length > 80 ? `${category?.description?.substring(0, 80)}...` : category?.description
+
         return (
           <React.Fragment key={'cat_' + category.id}>
             {products.length > 0 && (
@@ -96,7 +101,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                 >
                   <View style={bpStyles.catIcon}>
                     <OIcon
-                      url={optimizeImage(category.image, 'h_100,c_limit')}
+                      url={optimizeImage(category.image, 'h_250,c_limit')}
                       width={41}
                       height={41}
                       style={{ borderRadius: 7.6 }}
@@ -106,6 +111,28 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     {category.name}
                   </OText>
                 </View>
+                {!!category?.description && (
+                  <View style={{ position: 'relative' }}>
+                    <OText size={12} weight={'500'} mBottom={5}>
+                      {shortCategoryDescription}
+                      {category?.description?.length > 80 && (
+                        <OButton
+                          style={{ height: 15, paddingRight: 0, paddingLeft: 0, borderWidth: 0 }}
+                          text={t('SEE_MORE', 'See more')}
+                          parentStyle={{ padding: 0 }}
+                          onClick={() => setOpenDescription(category)}
+                          bgColor='transparent'
+                          textStyle={{
+                            fontSize: 12,
+                            borderBottomWidth: 1,
+                            borderBottomColor: theme.colors.primary,
+                            color: theme.colors.primary
+                          }}
+                        />
+                      )}
+                    </OText>
+                  </View>
+                )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
@@ -188,12 +215,29 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <OText>{e}</OText>
           </ErrorMessage>
         ))}
+      <OModal
+        open={!!openDescription}
+        title={openDescription?.name}
+        onClose={() => setOpenDescription(null)}
+      >
+        <View style={{ padding: 20 }}>
+          {!!openDescription?.image && (
+            <OIcon
+              url={optimizeImage(openDescription?.image, 'h_100,c_limit')}
+              width={240}
+              height={240}
+              style={{ borderRadius: 7.6 }}
+            />
+          )}
+          <OText>{openDescription?.description}</OText>
+        </View>
+      </OModal>
     </ProductsContainer>
   );
 };
 
 const bpStyles = StyleSheet.create({
-  catWrap: { flexDirection: 'row', alignItems: 'center', height: 41, marginBottom: 19 },
+  catWrap: { flexDirection: 'row', alignItems: 'center', marginBottom: 19 },
   catIcon: {
     borderRadius: 7.6,
     shadowColor: '#000000',

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

@@ -8,7 +8,8 @@ import {
 	useSession,
 	useUtils,
 	ToastType,
-	useToast
+	useToast,
+	useConfig
 } from 'ordering-components/native'
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { BusinessBasicInformation } from '../BusinessBasicInformation'
@@ -52,7 +53,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const [orderState] = useOrder()
 	const [{ parsePrice }] = useUtils()
 	const [, { showToast }] = useToast()
-
+	const [{ configs }] = useConfig()
+	const isPreOrder = configs?.preorder_status_enabled?.value === '1'
 	const styles = StyleSheet.create({
 		mainContainer: {
 			flex: 1,
@@ -70,6 +72,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			borderWidth: 0,
 			backgroundColor: theme.colors.clear,
 			shadowColor: theme.colors.clear,
+			padding: 40,
 		},
 		searchIcon: {
 			borderWidth: 0,
@@ -96,10 +99,10 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const onProductClick = (product: any) => {
-    onRedirect('ProductDetails', {
+		onRedirect('ProductDetails', {
 			product: product,
-      businessSlug: business.slug,
-      businessId: business.id,
+			businessSlug: business.slug,
+			businessId: business.id,
 		})
 	}
 
@@ -154,8 +157,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	const handleTouchDrag = useCallback(() => {
 		setCategoryClicked(false);
-	  }, []);
-	
+	}, []);
+
 	const handleBackNavigation = () => {
 		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
 	}
@@ -218,6 +221,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					openBusinessInformation={openBusinessInformation}
 					header={header}
 					logo={logo}
+					isPreOrder={isPreOrder}
 				/>
 				<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
 				{!loading && business?.id && (
@@ -235,7 +239,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								selectedCategoryId={selectedCategoryId}
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
-              					setCategoryClicked={setCategoryClicked}
+								setCategoryClicked={setCategoryClicked}
 							/>
 						)}
 					</>
@@ -294,16 +298,18 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
 				<FloatingButton
 					btnText={
-						currentCart?.subtotal >= currentCart?.minimum
-							? t('VIEW_ORDER', 'View Order')
-							: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
+						openUpselling
+							? t('LOADING', 'Loading')
+							: currentCart?.subtotal >= currentCart?.minimum
+								? t('VIEW_ORDER', 'View Order')
+								: `${t('MINIMUN_SUBTOTAL_ORDER', 'Minimum subtotal order:')} ${parsePrice(currentCart?.minimum)}`
 					}
-					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum}
+					isSecondaryBtn={currentCart?.subtotal < currentCart?.minimum || openUpselling}
 					btnLeftValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
 					btnRightValueShow={currentCart?.subtotal >= currentCart?.minimum && currentCart?.products?.length > 0}
 					btnLeftValue={currentCart?.products?.length}
 					btnRightValue={parsePrice(currentCart?.total)}
-					disabled={currentCart?.subtotal < currentCart?.minimum}
+					disabled={currentCart?.subtotal < currentCart?.minimum || openUpselling}
 					handleClick={() => setOpenUpselling(true)}
 				/>
 			)}
@@ -313,13 +319,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					business={currentCart?.business}
 					cartProducts={currentCart?.products}
 					cart={currentCart}
-          			setOpenUpselling={setOpenUpselling}
+					setOpenUpselling={setOpenUpselling}
 					handleUpsellingPage={handleUpsellingPage}
 					handleCloseUpsellingPage={handleCloseUpsellingPage}
 					openUpselling={openUpselling}
 					canOpenUpselling={canOpenUpselling}
 					setCanOpenUpselling={setCanOpenUpselling}
-          			onRedirect={onRedirect}
+					onRedirect={onRedirect}
 				/>
 			)}
 		</SafeAreaView>

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

@@ -237,9 +237,10 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 							))}
 					</>
 				)}
-				{!reviewsList.loading && reviewsList?.reviews.length === 0 && (
-					<OText>{t('REVIEWS_NOT_FOUND', 'Reviews Not Found')}</OText>
-				)}
+				{reviewsList?.reviews
+					.filter((review: any) => searchReview !== '' ? review.comment?.toLowerCase()?.includes(searchReview?.toLowerCase()) : true).length === 0 && (
+						<OText>{t('REVIEWS_NOT_FOUND', 'Reviews Not Found')}</OText>
+					)}
 			</BusinessReviewContent>
 		</BusinessReviewsContainer>
 	);

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import {
 	StyleSheet,
 	FlatList,
@@ -24,24 +24,13 @@ import { BusinessTypeFilterParams } from '../../types';
 const windowWidth = Dimensions.get('window').width;
 
 export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
-	const { 
-		typesState, 
-		currentTypeSelected, 
-		handleChangeBusinessType,
-		setBusinessTypes
-	} = props;
+	const { typesState, currentTypeSelected, handleChangeBusinessType } = props;
 
 	const [, t] = useLanguage();
 
 	const theme = useTheme();
 	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
 
-	useEffect(() => {
-		if(typesState?.types?.length > 0){
-		  setBusinessTypes && setBusinessTypes(typesState?.types)
-		}
-	  }, [typesState])
-
 	const renderTypes = ({ item }: any) => {
 		return (
 			<TouchableOpacity