ordering-ui-react-native 0.15.6 → 0.15.8-release

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useLanguage, BusinessMenuListing } from 'ordering-components/native'
 import { OText } from '../shared'
 import { BusinessMenuListParams } from '../../types'
@@ -19,7 +19,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
-  const {top} = useSafeAreaInsets()
+  const { top } = useSafeAreaInsets()
 
   const styles = StyleSheet.create({
     container: {
@@ -36,7 +36,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
       height: 44,
       width: '100%'
     }
-	})
+  })
 
   const dropDownIcon = () => {
     return (
@@ -48,12 +48,18 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
     )
   }
 
+  useEffect(() => {
+    if (!businessMenuList?.loading && businessMenuList?.menus?.length === 1){
+      setMenu(businessMenuList?.menus[0])
+    }
+  }, [businessMenuList?.menus])
+
   return (
     <>
       {businessMenuList.loading ? (
         <Placeholder Animation={Fade}>
           <View>
-            <PlaceholderLine height={44}/>
+            <PlaceholderLine height={44} />
           </View>
         </Placeholder>
       ) : (
@@ -67,6 +73,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
                 onSelect={(selectedItem, index) => {
                   setMenu(selectedItem)
                 }}
+                defaultValue={businessMenuList?.menus?.length === 1 && businessMenuList?.menus[0]}
                 buttonTextAfterSelection={(selectedItem, index) => {
                   return selectedItem.name
                 }}

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

@@ -51,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 { 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,
@@ -300,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 : -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>
+        {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
@@ -373,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

@@ -44,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
@@ -90,7 +90,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
           : 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 && (
@@ -133,6 +133,9 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                     </OText>
                   </View>
                 )}
+                {category?.subcategories?.length > 0 && (
+                  <SubcategoriesComponent category={category} />
+                )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
@@ -237,7 +240,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
 };
 
 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

@@ -72,6 +72,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 			borderWidth: 0,
 			backgroundColor: theme.colors.clear,
 			shadowColor: theme.colors.clear,
+			padding: 40,
 		},
 		searchIcon: {
 			borderWidth: 0,
@@ -98,24 +99,11 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	}
 
 	const onProductClick = (product: any) => {
-		const cartProduct = currentCart?.products?.find((cproduct: any) => cproduct?.id === product?.id)
-		if (cartProduct) {
-			onRedirect('ProductDetails', {
-				businessId:  business.id,
-				isCartProduct: true,
-				productCart: cartProduct,
-				businessSlug: business?.slug,
-				categoryId: cartProduct?.category_id,
-				productId: cartProduct?.id,
-			})
-		} else {
-			onRedirect('ProductDetails', {
-				product: product,
-				businessSlug: business.slug,
-				businessId: business.id,
-			})
-		}
-
+		onRedirect('ProductDetails', {
+			product: product,
+			businessSlug: business.slug,
+			businessId: business.id,
+		})
 	}
 
 	const handleCancel = () => {
@@ -169,8 +157,8 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 
 	const handleTouchDrag = useCallback(() => {
 		setCategoryClicked(false);
-	  }, []);
-	
+	}, []);
+
 	const handleBackNavigation = () => {
 		navigation?.canGoBack() ? navigation.goBack() : navigation.navigate('BottomTab')
 	}
@@ -251,7 +239,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								selectedCategoryId={selectedCategoryId}
 								lazyLoadProductsRecommended={business?.lazy_load_products_recommended}
 								setSelectedCategoryId={setSelectedCategoryId}
-              					setCategoryClicked={setCategoryClicked}
+								setCategoryClicked={setCategoryClicked}
 							/>
 						)}
 					</>
@@ -310,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)}
 				/>
 			)}
@@ -329,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

@@ -90,33 +90,12 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 		</View>
 	);
 
-	const ReviewItem = ({ comment, created_at, total, customer }: any) => (
+	const ReviewItem = ({ comment, created_at, total }: any) => (
 		<View style={{ marginBottom: 30 }}>
-			<View
-				style={{ flexDirection: 'row', marginBottom: 19, alignItems: 'center' }}>
-				<OIcon
-					url={theme.images.dummies.customerPhoto}
-					width={38}
-					height={38}
-					style={{
-						borderRadius: 7.6,
-						borderWidth: 1,
-						borderColor: theme.colors.border,
-						marginEnd: 9,
-					}}
-				/>
-				<View>
-					<OText size={12} color={theme.colors.textNormal} weight={'500'}>
-						{customer?.name || 'Jane Cooper'}
-					</OText>
-					<OText size={10} color={theme.colors.textSecondary}>
-						{moment(created_at).format('MMMM d, yyyy • hh:mm')}
-					</OText>
-				</View>
-			</View>
-			<OText size={10} color={theme.colors.textNormal}>
-				{comment}
+			<OText size={12} color={theme.colors.textSecondary}>
+				{moment(created_at).format('MMMM d, yyyy • hh:mm')}
 			</OText>
+			<OText size={12} color={theme.colors.textNormal}>{comment}</OText>
 		</View>
 	);