ordering-ui-react-native 0.14.91 → 0.14.92-release

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

@@ -26,10 +26,13 @@ import {
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
 
+let BusinessInformation: null | React.ElementType = null
+let BusinessReviews: null | React.ElementType = null
+
 export const BusinessBasicInformation = (
 	props: BusinessBasicInformationParams,
 ) => {
-	const { navigation, businessState, isBusinessInfoShow, logo, header } = props;
+	const { navigation, businessState, isBusinessInfoShow, logo, header, isPreOrder } = props;
 	const { business, loading } = businessState;
 
 	const theme = useTheme();
@@ -38,6 +41,25 @@ export const BusinessBasicInformation = (
 	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
 	const [openBusinessInformation, setOpenBusinessInformation] = useState(false);
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
+	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
+	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
+
+	const handleClickBusinessInformation = () => {
+		if (!businessInformationObtained) {
+			BusinessInformation = require('../BusinessInformation').BusinessInformation
+			setBusinessInformationObtained(true)
+		}
+		setOpenBusinessInformation(true)
+	}
+
+	const handleClickBusinessReviews = () => {
+		if (!businessReviewsObtained) {
+			BusinessReviews = require('../BusinessReviews').BusinessReviews
+			setBusinessReviewsObtainedbtained(true)
+		}
+		setOpenBusinessReviews(true)
+	}
+
 	const getBusinessType = () => {
 		if (Object.keys(business).length <= 0) return t('GENERAL', 'General');
 		const _types: any = [];
@@ -51,7 +73,7 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
-	
+
 	useEffect(() => {
 		if (businessState?.loading) return
 		let timeout: any = null
@@ -65,16 +87,16 @@ export const BusinessBasicInformation = (
 			})
 		}
 		if (lapse) {
-		  const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
-		  const timeToClose = (to.unix() - currentDate.unix()) * 1000
-		  timeout = setTimeout(() => {
-			navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })
-		  }, timeToClose)
+			const to = currentDate.hour(lapse.close.hour).minute(lapse.close.minute)
+			const timeToClose = (to.unix() - currentDate.unix()) * 1000
+			timeout = setTimeout(() => {
+				navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })
+			}, timeToClose)
 		}
 		return () => {
-		  timeout && clearTimeout(timeout)
+			timeout && clearTimeout(timeout)
 		}
-	  }, [businessState?.business])
+	}, [businessState?.business])
 
 	return (
 		<BusinessContainer>
@@ -90,7 +112,7 @@ export const BusinessBasicInformation = (
 						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
 				}}>
 				{!isBusinessInfoShow && (
-					<WrapBusinessInfo onPress={() => setOpenBusinessInformation(true)}>
+					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
 						<OIcon src={theme.images.general.info} width={24} />
 					</WrapBusinessInfo>
 				)}
@@ -181,13 +203,17 @@ export const BusinessBasicInformation = (
 				<WrapReviews>
 					{!isBusinessInfoShow && (
 						<>
-							<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
-								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-									{t('PRE_ORDER', 'Preorder')}
-								</OText>
-							</TouchableOpacity>
-							<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
-							<TouchableOpacity onPress={() => setOpenBusinessReviews(true)}>
+							{isPreOrder && (
+								<>
+									<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
+										<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+											{t('PRE_ORDER', 'Preorder')}
+										</OText>
+									</TouchableOpacity>
+									<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+								</>
+							)}
+							<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
 								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
 									{t('REVIEWS', 'Reviews')}
 								</OText>
@@ -196,28 +222,37 @@ export const BusinessBasicInformation = (
 					)}
 				</WrapReviews>
 			</BusinessInfo>
-			<OModal
-				titleSectionStyle={styles.modalTitleSectionStyle}
-				open={openBusinessInformation}
-				onClose={() => setOpenBusinessInformation(false)}
-				isNotDecoration>
-				<BusinessInformation
-					businessState={businessState}
-					business={business}
-				/>
-			</OModal>
-			<OModal
-				entireModal
-				titleSectionStyle={styles.modalTitleSectionStyle}
-				open={openBusinessReviews}
-				onClose={() => setOpenBusinessReviews(false)}
-				isNotDecoration>
-				<BusinessReviews
-					businessState={businessState}
-					businessId={business.id}
-					reviews={business.reviews?.reviews}
-				/>
-			</OModal>
+			{businessInformationObtained ? (
+				<OModal
+					titleSectionStyle={styles.modalTitleSectionStyle}
+					open={openBusinessInformation}
+					onClose={() => setOpenBusinessInformation(false)}
+					isNotDecoration>
+					{BusinessInformation && (
+						<BusinessInformation
+							businessState={businessState}
+							business={business}
+						/>
+					)}
+				</OModal>
+			) : null}
+			{businessReviewsObtained ? (
+				<OModal
+					entireModal
+					titleSectionStyle={styles.modalTitleSectionStyle}
+					open={openBusinessReviews}
+					onClose={() => setOpenBusinessReviews(false)}
+					isNotDecoration
+				>
+					{BusinessReviews && (
+						<BusinessReviews
+							businessState={businessState}
+							businessId={business.id}
+							reviews={business.reviews?.reviews}
+						/>
+					)}
+				</OModal>
+			) : null}
 		</BusinessContainer>
 	);
 };
@@ -262,4 +297,4 @@ const styles = StyleSheet.create({
 		zIndex: 100,
 		left: 40
 	},
-});
+});

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

@@ -4,6 +4,7 @@ import {
 	useUtils,
 	useOrder,
 	useLanguage,
+	useConfig
 } from 'ordering-components/native';
 import { OIcon, OText } from '../shared';
 import { StyleSheet, View } from 'react-native';
@@ -29,9 +30,9 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	const [{ parsePrice, parseDistance, parseNumber, optimizeImage }] =
 		useUtils();
 	const [orderState] = useOrder();
+	const [configState] = useConfig();
 	const [, t] = useLanguage();
 	const theme = useTheme()
-
 	const styles = StyleSheet.create({
 		headerStyle: {
 			borderTopLeftRadius: 7.6,
@@ -111,7 +112,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 				<FastImage
 					style={{ height: 120 }}
 					source={{
-							uri: optimizeImage(business?.header, 'h_120,c_limit'),
+							uri: optimizeImage(business?.header, 'h_500,c_limit'),
 							priority: FastImage.priority.normal,
 					}}
 					resizeMode={FastImage.resizeMode.cover}
@@ -122,7 +123,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 					</View>
 				)}
 				<BusinessState>
-					{!isBusinessOpen && (
+					{!isBusinessOpen && (configState?.configs?.preorder_status_enabled?.value === '1') && (
 						<View style={styles.businessStateView}>
 							<OText
 								color={theme.colors.textThird}
@@ -140,7 +141,7 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 						<FastImage
 							style={{ width: 56, height: 56 }}
 							source={{
-									uri: optimizeImage(business?.logo, 'h_60,c_limit'),
+									uri: optimizeImage(business?.logo, 'h_150,c_limit'),
 									priority: FastImage.priority.normal,
 							}}
 							resizeMode={FastImage.resizeMode.cover}

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

@@ -7,6 +7,7 @@ import { useTheme } from 'styled-components/native'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import SelectDropdown from 'react-native-select-dropdown'
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const windowHeight = Dimensions.get('window').height;
 
@@ -18,6 +19,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
 
   const [, t] = useLanguage()
   const theme = useTheme()
+  const {top} = useSafeAreaInsets()
 
   const styles = StyleSheet.create({
     container: {
@@ -81,7 +83,7 @@ const BusinessMenuListUI = (props: BusinessMenuListParams) => {
                 dropdownStyle={{
                   borderRadius: 8,
                   borderColor: theme.colors.lightGray,
-                  marginTop: Platform.OS === 'ios' ? 12 : -15,
+                  marginTop: Platform.OS === 'ios' ? 12 : -top,
                   maxHeight: 160
                 }}
                 rowStyle={{
@@ -123,4 +125,4 @@ export const BusinessMenuList = (props: any) => {
   };
 
   return <BusinessMenuListing {...businessMenuListProps} />;
-};
+};

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 && (
+          <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,
 							{