npm - ordering-ui-react-native - Versions diffs - 0.16.54 → 0.16.57 - Mend

ordering-ui-react-native 0.16.54 → 0.16.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/package.json CHANGED Viewed

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

package/src/components/PaymentOptionsWebView/index.tsx CHANGED Viewed

@@ -59,7 +59,7 @@ export const PaymentOptionsWebView = (props: PaymentOptionsWebViewParams) => {
     if (e?.nativeEvent?.data && e?.nativeEvent?.data !== 'undefined') {
       let payment = JSON.parse(e.nativeEvent.data);
-      if (payment === 'api error') {
+      if (payment === 'api error' || payment === 'Cancelled by user') {
         setShowGateway({ closedByUser: true, open: false })
         setProg(true);
       }

package/themes/business/src/components/DriverSchedule/index.tsx CHANGED Viewed

@@ -1,13 +1,15 @@
-import React from 'react'
-import { View } from 'react-native'
+import React, { useState } from 'react'
+import { RefreshControl, ScrollView, View } from 'react-native'
 import { OText } from '../shared'
-import { useLanguage } from 'ordering-components/native'
+import { useLanguage, useSession } from 'ordering-components/native'
 import { DayContainer } from './styles'
 import { useTheme } from 'styled-components/native'
-export const DriverSchedule = (props : any) => {
+export const DriverSchedule = (props: any) => {
     const { schedule } = props
     const [, t] = useLanguage()
     const theme = useTheme()
+    const [, { refreshUserInfo }] = useSession()
+    const [refreshing] = useState(false);
     const daysOfWeek = [
         t('SUNDAY_ABBREVIATION', 'Sun'),
@@ -25,30 +27,45 @@ export const DriverSchedule = (props : any) => {
     }
     return (
-        <View >
-            <OText size={24} style={{paddingLeft: 30}}>
+        <ScrollView
+            refreshControl={<RefreshControl
+                refreshing={refreshing}
+                onRefresh={() => refreshUserInfo()}
+            />}
+        >
+            <OText size={24} style={{ paddingLeft: 30 }}>
                 {t('SCHEDULE', 'Schedule')}
             </OText>
-            <View style={{padding: 30}}>
+            <View style={{ padding: 30 }}>
                 {schedule.map((item: any, i: number) => (
                     <DayContainer key={daysOfWeek[i]}>
-                        <OText style={{width: '20%'}} size={22} weight={700}>{daysOfWeek[i]}</OText>
-                        <View style={{width: '80%', alignItems: 'center'}}>
+                        <OText style={{ width: '20%' }} size={22} weight={700}>{daysOfWeek[i]}</OText>
+                        <View style={{ width: '80%', alignItems: 'center' }}>
                             <>
-                            {item?.enabled ? (
-                                <>
-                                    {item?.lapses.map((lapse: any, i: number) => (
-                                        <OText size={18} style={{marginTop: 3, marginBottom: 20}} key={`${daysOfWeek[i]}_${i}`}>{scheduleFormatted(lapse.open)} - {scheduleFormatted(lapse.close)}</OText>
-                                    ))}
-                                </>
-                            ) : (
-                                <OText size={18} style={{marginTop: 3, marginBottom: 10}} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
-                            )}
+                                {item?.enabled ? (
+                                    <View>
+                                        {item?.lapses.map((lapse: any, i: number) => (
+                                            <View key={`${daysOfWeek[i]}_${i}`} style={{ marginTop: 3, marginBottom: 20, flexDirection: 'row', justifyContent: 'space-between' }}>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.open)}
+                                                </OText>
+                                                <OText size={18} style={{ width: 15 }}>
+                                                    -
+                                                </OText>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.close)}
+                                                </OText>
+                                            </View>
+                                        ))}
+                                    </View>
+                                ) : (
+                                    <OText size={18} style={{ marginTop: 3, marginBottom: 10 }} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
+                                )}
                             </>
                         </View>
                     </DayContainer>
                 ))}
             </View>
-        </View>
+        </ScrollView>
     )
 }

package/themes/business/src/components/PreviousOrders/index.tsx CHANGED Viewed

@@ -31,8 +31,8 @@ export const PreviousOrders = (props: any) => {
   const theme = useTheme();
   const [, setCurrentTime] = useState()
   const [allowColumns, setAllowColumns] = useState({
-    timer: true,
-    slaBar: true,
+    timer: configState?.configs?.order_deadlines_enabled?.value === '1',
+    slaBar: configState?.configs?.order_deadlines_enabled?.value === '1',
   })
   const [orientationState] = useDeviceOrientation();

package/themes/business/src/components/ScheduleBlocked/index.tsx CHANGED Viewed

@@ -12,13 +12,13 @@ export const ScheduleBlocked = (props : any) => {
     const deviceWidth = Dimensions.get('screen').width
     const daysOfWeek = [
+        t('SUNDAY', 'Sunday'),
         t('MONDAY', 'Monday'),
         t('TUESDAY', 'Tuesday'),
         t('WEDNESDAY', 'Wednesday'),
         t('THURSDAY', 'Thurday'),
         t('FRIDAY', 'Friday'),
         t('SATURDAY', 'Saturday'),
-        t('SUNDAY', 'Sunday')
     ]
     const scheduleFormatted = ({ hour, minute }: any) => {
@@ -41,7 +41,7 @@ export const ScheduleBlocked = (props : any) => {
             <OText>{t('OUTSIDE_ESTABLISHED_SCHEDULE', 'You are outside the established schedule')}</OText>
             <View style={{ flexDirection: 'row', marginBottom: 20 }}>
                 <OText color={theme.colors.primary}>{t('NEXT_TIME', 'Next time')}: </OText>
-                <OText>{daysOfWeek[nextSchedule?.day - 1]} {scheduleFormatted(nextSchedule?.schedule?.open)}</OText>
+                <OText>{daysOfWeek[nextSchedule?.day]} {scheduleFormatted(nextSchedule?.schedule?.open)}</OText>
             </View>
             <OButton
                 text={t('GO_BACK', 'Go back')}

package/themes/original/src/components/AddressForm/index.tsx CHANGED Viewed

@@ -109,8 +109,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 			zIndex: 1002,
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? {  paddingVertical: 0, paddingHorizontal: 40 }
-			: {  paddingVertical: 20, paddingHorizontal: 40 }
+			? { paddingVertical: 0, paddingHorizontal: 40 }
+			: { paddingVertical: 20, paddingHorizontal: 40 }
 	});
 	const [, t] = useLanguage();
@@ -156,7 +156,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const maxLimitLocation =
 		configState?.configs?.meters_to_change_address?.value;
-	const continueAsGuest = () => navigation.navigate('BusinessList');
+	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 	const getAddressFormatted = (address: any) => {
@@ -203,6 +203,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 						saveAddress(data.address);
 						if (isGuestUser) {
 							continueAsGuest();
+							return;
 						}
 						if (!isGuestUser && !auth) {
 							!isFromProductsList
@@ -600,13 +601,13 @@ const AddressFormUI = (props: AddressFormParams) => {
 								/>
 								{hasEditing ? (
 									<View style={styles.pinIcon}>
-										<GPSButton
+										<GPSButton
 											apiKey={googleMapsApiKey}
 											handleGPS={(data: any, detail: any) => {
 												handleChangeAddress(data, detail);
 												setValue(data.address);
 												if (googleInput?.current) {
-													googleInput?.current?.setAddressText( data.address );
+													googleInput?.current?.setAddressText(data.address);
 												}
 											}}
 											IconButton={<OIcon src={theme.images.general.pin} width={16} />}

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

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import {
 	BusinessController as BusinessSingleCard,
 	useUtils,
@@ -138,27 +139,27 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 	}
 	return (
-		<InView triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
-			<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
-				{business?.ribbon?.enabled && (
-					<RibbonBox
-						bgColor={business?.ribbon?.color}
-						isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
-						isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
-					>
-						<OText
-							size={10}
-							weight={'400'}
-							color={theme.colors.white}
-							numberOfLines={2}
-							ellipsizeMode='tail'
-							lineHeight={13}
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(inView)}>
+			{isIntersectionObserver ? (
+				<Card activeOpacity={1} onPress={() => handleBusinessClick(business)} style={style}>
+					{business?.ribbon?.enabled && (
+						<RibbonBox
+							bgColor={business?.ribbon?.color}
+							isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+							isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
 						>
-							{business?.ribbon?.text}
-						</OText>
-					</RibbonBox>
-				)}
-				{isIntersectionObserver && (
+							<OText
+								size={10}
+								weight={'400'}
+								color={theme.colors.white}
+								numberOfLines={2}
+								ellipsizeMode='tail'
+								lineHeight={13}
+							>
+								{business?.ribbon?.text}
+							</OText>
+						</RibbonBox>
+					)}
 					<BusinessHero>
 						<FastImage
 							style={{ height: 120 }}
@@ -186,10 +187,8 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 							)}
 						</BusinessState>
 					</BusinessHero>
-				)}
-				<BusinessContent>
-					<BusinessInfo>
-						{isIntersectionObserver && (
+					<BusinessContent>
+						<BusinessInfo>
 							<BusinessLogo style={styles.businessLogo}>
 								<FastImage
 									style={{ width: 56, height: 56 }}
@@ -200,64 +199,103 @@ export const BusinessControllerUI = (props: BusinessControllerParams) => {
 									resizeMode={FastImage.resizeMode.cover}
 								/>
 							</BusinessLogo>
-						)}
-						<ReviewAndFavorite>
-							{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
-								<Reviews>
-									<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
-									<OText size={10} style={{ lineHeight: 15 }}>
-										{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
-									</OText>
-								</Reviews>
-							)}
-							<TouchableOpacity
-								onPress={handleChangeFavorite}
-							>
-								<IconAntDesign
-									name={business?.favorite ? 'heart' : 'hearto'}
-									color={theme.colors.danger5}
-									size={18}
-								/>
-							</TouchableOpacity>
-						</ReviewAndFavorite>
-					</BusinessInfo>
-					<OText
-						size={12}
-						style={{ lineHeight: 18, marginBottom: 6 }}
-						weight={'500'}>
-						{business?.name}
-					</OText>
-					<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
-						{business?.address}
-					</OText>
-					{/* <BusinessCategory>
+							<ReviewAndFavorite>
+								{(businessReviews?.reviews?.total > 0 ?? business?.reviews?.total > 0) && (
+									<Reviews>
+										<OIcon src={theme.images.general.star} width={12} style={styles.starIcon} />
+										<OText size={10} style={{ lineHeight: 15 }}>
+											{parseNumber(businessReviews?.reviews?.total ?? business?.reviews?.total, { separator: '.' })}
+										</OText>
+									</Reviews>
+								)}
+								<TouchableOpacity
+									onPress={handleChangeFavorite}
+								>
+									<IconAntDesign
+										name={business?.favorite ? 'heart' : 'hearto'}
+										color={theme.colors.danger5}
+										size={18}
+									/>
+								</TouchableOpacity>
+							</ReviewAndFavorite>
+						</BusinessInfo>
+						<OText
+							size={12}
+							style={{ lineHeight: 18, marginBottom: 6 }}
+							weight={'500'}>
+							{business?.name}
+						</OText>
+						<OText size={10} style={{ lineHeight: 15, marginBottom: 3 }}>
+							{business?.address}
+						</OText>
+						{/* <BusinessCategory>
           <OText>{getBusinessType()}</OText>
         </BusinessCategory> */}
-					<Metadata>
-						{!isBusinessOpen ? (
-							<View style={styles.closed}>
-								<OText size={10} color={theme.colors.red}>
-									{t('CLOSED', 'Closed')}
-								</OText>
-							</View>
-						) : (
-							<View style={styles.bullet}>
-								{orderState?.options?.type === 1 && (
-									<OText size={10} color={theme.colors.textSecondary}>
-										{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+						<Metadata>
+							{!isBusinessOpen ? (
+								<View style={styles.closed}>
+									<OText size={10} color={theme.colors.red}>
+										{t('CLOSED', 'Closed')}
 									</OText>
-								)}
-								<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
-									orderState?.options?.type === 1
-										? (businessDeliveryTime ?? business?.delivery_time)
-										: (businessPickupTime ?? business?.pickup_time),
-								)} \u2022 `}</OText>
-								<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+								</View>
+							) : (
+								<View style={styles.bullet}>
+									{orderState?.options?.type === 1 && (
+										<OText size={10} color={theme.colors.textSecondary}>
+											{`${t('DELIVERY_FEE', 'Delivery fee')} ${parsePrice(businessDeliveryPrice ?? business?.delivery_price) + ' \u2022 '}`}
+										</OText>
+									)}
+									<OText size={10} color={theme.colors.textSecondary}>{`${convertHoursToMinutes(
+										orderState?.options?.type === 1
+											? (businessDeliveryTime ?? business?.delivery_time)
+											: (businessPickupTime ?? business?.pickup_time),
+									)} \u2022 `}</OText>
+									<OText size={10} color={theme.colors.textSecondary}>{parseDistance(businessDistance ?? business?.distance)}</OText>
+								</View>
+							)}
+						</Metadata>
+					</BusinessContent>
+				</Card>
+			) : (
+				<Placeholder
+					Animation={Fade}
+					style={{ marginBottom: 20 }}>
+					<View style={{ width: '100%' }}>
+						<PlaceholderLine
+							height={200}
+							style={{ marginBottom: 20, borderRadius: 25 }}
+						/>
+						<View style={{ paddingHorizontal: 10 }}>
+							<View
+								style={{
+									flexDirection: 'row',
+									justifyContent: 'space-between',
+								}}>
+								<PlaceholderLine
+									height={25}
+									width={40}
+									style={{ marginBottom: 10 }}
+								/>
+								<PlaceholderLine
+									height={25}
+									width={20}
+									style={{ marginBottom: 10 }}
+								/>
 							</View>
-						)}
-					</Metadata>
-				</BusinessContent>
-			</Card>
+							<PlaceholderLine
+								height={20}
+								width={30}
+								style={{ marginBottom: 10 }}
+							/>
+							<PlaceholderLine
+								height={20}
+								width={80}
+								style={{ marginBottom: 10 }}
+							/>
+						</View>
+					</View>
+				</Placeholder>
+			)}
 		</InView>
 	);
 };

package/themes/original/src/components/BusinessListingSearch/index.tsx CHANGED Viewed

@@ -33,6 +33,7 @@ import { convertHoursToMinutes } from '../../utils'
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { BusinessSearchParams } from '../../types'
 import { MyOrders } from '../MyOrders'
+import { useIsFocused } from '@react-navigation/native';
 export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
@@ -82,6 +83,8 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     { level: '5', content: '$$$$$' }
   ]
+  const isFocused = useIsFocused();
   const styles = StyleSheet.create({
     container: {
       paddingHorizontal: 40,
@@ -217,6 +220,11 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
     handleSearchbusinessAndProducts(true)
   }, [])
+  useEffect(() => {
+    handleChangeTermValue('')
+  }, [isFocused])
   const MaxSectionItem = ({ title, options, filter }: any) => {
     const parseValue = (option: number) => {
       return filter === 'max_distance'
@@ -309,9 +317,6 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
   return (
     <ScrollView style={styles.container}>
       <WrapHeader style={{ paddingTop: top + 20, marginVertical: 2 }}>
-        <TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', paddingVertical: 20 }}>
-          <OIcon src={theme.images.general.arrow_left} width={20} />
-        </TouchableOpacity>
         <OText
           size={20}
           mBottom={15}
@@ -323,6 +328,7 @@ export const BusinessListingSearchUI = (props: BusinessSearchParams) => {
       </WrapHeader>
       <SearchWrapper>
         <SearchBar
+          autoFocus
           lazyLoad
           inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? {} : { paddingBottom: 4 } }}
           placeholder={`${t('SEARCH_BUSINESSES', 'Search Businesses')} / ${t('TYPE_AT_LEAST_3_CHARACTERS', 'type at least 3 characters')}`}

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { View, TouchableOpacity, StyleSheet, SafeAreaView, Dimensions, Platform, KeyboardAvoidingViewBase, KeyboardAvoidingView } from 'react-native'
+import { IOScrollView } from 'react-native-intersection-observer'
 import { useTheme } from 'styled-components/native';
 import {
 	BusinessAndProductList,
@@ -24,7 +25,6 @@ import {
 	TopHeader,
 	WrapSearchBar,
 	WrapContent,
-	BusinessProductsListingContainer,
 	FiltProductsContainer,
 	ContainerSafeAreaView,
 	BackgroundGray,
@@ -81,7 +81,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 	const styles = StyleSheet.create({
 		mainContainer: {
-			flex: 1,
+			flex: 1
 		},
 		BackIcon: {
 			paddingRight: 20,
@@ -331,11 +331,14 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 				{isOpenFiltProducts && (
 					<BackgroundGray />
 				)}
-				<BusinessProductsListingContainer
+				<IOScrollView
 					stickyHeaderIndices={[2]}
-					style={styles.mainContainer}
+					style={{
+						...styles.mainContainer,
+						marginBottom: currentCart?.products?.length > 0 && categoryState.products.length !== 0 ?
+							50 : 0
+					}}
 					ref={scrollViewRef}
-					isActiveFloatingButtom={currentCart?.products?.length > 0 && categoryState.products.length !== 0}
 					onScroll={handlePageScroll}
 					onScrollBeginDrag={handleTouchDrag}
 					scrollEventThrottle={16}
@@ -448,7 +451,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 							</WrapContent>
 						</>
 					)}
-				</BusinessProductsListingContainer>
+				</IOScrollView>
 				{!loading && auth && currentCart?.products?.length > 0 && categoryState.products.length !== 0 && (
 					<FloatingButton
 						btnText={

package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx CHANGED Viewed

@@ -270,7 +270,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}, [businessesList?.businesses?.length])
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+		<IOScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -469,32 +469,30 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						)}
 					/>
 				)}
-				<IOScrollView>
-					{businessesList.businesses?.map(
-						(business: any, i: number) => (
-							<BusinessController
-								key={`${business.id}_` + i}
-								enableIntersection
-								business={business}
-								isBusinessOpen={business.open}
-								handleCustomClick={handleBusinessClick}
-								orderType={orderState?.options?.type}
-								navigation={navigation}
-								businessHeader={business?.header}
-								businessFeatured={business?.featured}
-								businessLogo={business?.logo}
-								businessReviews={business?.reviews}
-								businessDeliveryPrice={business?.delivery_price}
-								businessDeliveryTime={business?.delivery_time}
-								businessPickupTime={business?.pickup_time}
-								businessDistance={business?.distance}
-								handleUpdateBusinessList={handleUpdateBusinessList}
-								favoriteIds={favoriteIds}
-								setFavoriteIds={setFavoriteIds}
-							/>
-						)
-					)}
-				</IOScrollView>
+				{businessesList.businesses?.map(
+					(business: any, i: number) => (
+						<BusinessController
+							key={`${business.id}_` + i}
+							enableIntersection
+							business={business}
+							isBusinessOpen={business.open}
+							handleCustomClick={handleBusinessClick}
+							orderType={orderState?.options?.type}
+							navigation={navigation}
+							businessHeader={business?.header}
+							businessFeatured={business?.featured}
+							businessLogo={business?.logo}
+							businessReviews={business?.reviews}
+							businessDeliveryPrice={business?.delivery_price}
+							businessDeliveryTime={business?.delivery_time}
+							businessPickupTime={business?.pickup_time}
+							businessDistance={business?.distance}
+							handleUpdateBusinessList={handleUpdateBusinessList}
+							favoriteIds={favoriteIds}
+							setFavoriteIds={setFavoriteIds}
+						/>
+					)
+				)}
 				{businessesList.loading && (
 					<>
 						{[
@@ -547,7 +545,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</>
 				)}
 			</ListWrapper>
-		</ScrollView>
+		</IOScrollView>
 	);
 };

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx CHANGED Viewed

@@ -316,7 +316,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+		<IOScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -553,33 +553,30 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						)}
 					/>
 				)}
-				<IOScrollView>
-					{businessesList.businesses?.map(
-						(business: any, i: number) => (
-							<BusinessController
-								key={`${business.id}_` + i}
-								enableIntersection
-								business={business}
-								isBusinessOpen={business.open}
-								handleCustomClick={handleBusinessClick}
-								orderType={orderState?.options?.type}
-								navigation={navigation}
-								businessHeader={business?.header}
-								businessFeatured={business?.featured}
-								businessLogo={business?.logo}
-								businessReviews={business?.reviews}
-								businessDeliveryPrice={business?.delivery_price}
-								businessDeliveryTime={business?.delivery_time}
-								businessPickupTime={business?.pickup_time}
-								businessDistance={business?.distance}
-								handleUpdateBusinessList={handleUpdateBusinessList}
-								favoriteIds={favoriteIds}
-								setFavoriteIds={setFavoriteIds}
-							/>
-						)
-					)}
-				</IOScrollView>
+				{businessesList.businesses?.map(
+					(business: any, i: number) => (
+						<BusinessController
+							key={`${business.id}_` + i}
+							enableIntersection
+							business={business}
+							isBusinessOpen={business.open}
+							handleCustomClick={handleBusinessClick}
+							orderType={orderState?.options?.type}
+							navigation={navigation}
+							businessHeader={business?.header}
+							businessFeatured={business?.featured}
+							businessLogo={business?.logo}
+							businessReviews={business?.reviews}
+							businessDeliveryPrice={business?.delivery_price}
+							businessDeliveryTime={business?.delivery_time}
+							businessPickupTime={business?.pickup_time}
+							businessDistance={business?.distance}
+							handleUpdateBusinessList={handleUpdateBusinessList}
+							favoriteIds={favoriteIds}
+							setFavoriteIds={setFavoriteIds}
+						/>
+					)
+				)}
 				{businessesList.loading && (
 					<>
 						{[
@@ -657,7 +654,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					))}
 				</View>
 			</OModal>
-		</ScrollView>
+		</IOScrollView>
 	);
 };

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

@@ -85,7 +85,7 @@ export const BusinessesListing = (props: any) => {
           transparent={true}
           onClose={() => setLastOrderReview({ ...lastOrderReview, isReviewOpen: false, order: defaultOrder })}
           title={t('HEY', 'Hey! ') + t('HOW_WAS_YOUR_ORDER', 'How was your order?')}
-          bottomContainerStyle={{ height: 'auto' }}
+          bottomContainerStyle={{ height: 'auto', borderRadius: 10 }}
           titleStyle={{ textAlign: 'center' }}
           closeIcon={theme.images.general.close}
         >

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

@@ -217,7 +217,7 @@ const CheckoutUI = (props: any) => {
 		const _requiredFields: any = []
 		Object.values(validationFields?.fields?.checkout).map((field: any) => {
-			if (field?.required && !notFields.includes(field.code)) {
+			if (field?.required && !notFields.includes(field.code) && field?.enabled) {
 				if (!user[field?.code]) {
 					_requiredFields.push(field?.code)
 				}

package/themes/original/src/components/OrderDetails/index.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet, BackHandler, Platform, Linking } from 'react-native';
+import { View, StyleSheet, BackHandler, Platform, Linking, RefreshControl } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { _setStoreData } from '../../providers/StoreUtil';
 import {
@@ -54,7 +54,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     driverLocation,
     onNavigationRedirect,
     reorderState,
-    handleReorder
+    handleReorder,
+    getOrder
   } = props;
   const theme = useTheme();
@@ -101,6 +102,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const [isReviewed, setIsReviewed] = useState(false)
   const [isOrderHistory, setIsOrderHistory] = useState(false)
   const [openTaxModal, setOpenTaxModal] = useState<any>({ open: false, tax: null, type: '' })
+  const [refreshing] = useState(false);
   const { order, businessData } = props.order;
   const mapValidStatuses = [9, 19, 23]
@@ -380,6 +382,11 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
     ) && !order.review && !isReviewed && handleClickOrderReview(order)
   }
+  const resfreshOrder = () => {
+    getOrder()
+  }
   useEffect(() => {
     const _businessId = 'businessId:' + businessData?.id
     if (reorderState?.error) {
@@ -447,7 +454,15 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }, [driverLocation]);
   return (
-    <OrderDetailsContainer keyboardShouldPersistTaps="handled">
+    <OrderDetailsContainer
+      keyboardShouldPersistTaps="handled"
+      refreshControl={
+        <RefreshControl
+          refreshing={refreshing}
+          onRefresh={() => resfreshOrder()}
+        />
+      }
+    >
       {(!order || Object.keys(order).length === 0) && (
         <Placeholder style={{ marginTop: 30 }}>
           <Header>

package/themes/original/src/components/ProductForm/index.tsx CHANGED Viewed

@@ -598,7 +598,7 @@ export const ProductOptionsUI = (props: any) => {
 							horizontal
 							showsHorizontalScrollIndicator={false}
 							style={{ marginBottom: 20 }}
-							contentContainerStyle={{ marginHorizontal: 40, paddingHorizontal: 33, backgroundColor: theme.colors.white }}
+							contentContainerStyle={{ paddingHorizontal: 33, backgroundColor: theme.colors.white }}
 						>
 							<TouchableOpacity
 								key={`eopt_all_0`}

package/themes/original/src/components/ProductForm/styles.tsx CHANGED Viewed

@@ -84,7 +84,7 @@ export const ProductActions = styled.View`
   border-top-color: ${(props: any) => props.theme.colors.border};
 `
 export const ExtraOptionWrap = styled.ScrollView`
-	margin-horizontal: -40px;
+	margin-horizontal: 30px;
 `;
 export const WeightUnitSwitch = styled.View`

package/themes/original/src/components/ReviewTrigger/index.tsx CHANGED Viewed

@@ -101,7 +101,7 @@ export const ReviewTrigger = (props: any) => {
           </FormReviews>
         </View>
       </ReviewOrderContainer>
-      <FloatingBottomContainer>
+      <FloatingBottomContainer borderTopWidth={0} borderRadius={10}>
         <ActionContainer>
           <OButton
             textStyle={{ color: theme.colors.white, paddingRight: 10 }}

package/themes/original/src/components/ReviewTrigger/styles.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import styled from 'styled-components/native'
 export const ReviewOrderContainer = styled.ScrollView`
-  padding: 20px 40px;
+  padding: 0 25px;
   margin-bottom: 100px;
 `
@@ -13,7 +13,7 @@ export const BusinessLogo = styled.View`
 export const FormReviews = styled.View`
   flex: 1;
   height: 100%;
-  margin-top: 30px;
+  margin-top: 10px;
 `
 export const ActionContainer = styled.View`

package/themes/original/src/components/SingleProductCard/index.tsx CHANGED Viewed

@@ -122,8 +122,8 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 	return (
-		<InView style={{ minHeight: 140 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
-			{isIntersectionObserver && (
+		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => setIsIntersectionObserver(true)}>
+			{isIntersectionObserver ? (
 				<CardContainer
 					showAddButton={showAddButton}
 					style={[
@@ -240,6 +240,20 @@ const SinguleProductCardUI = React.memo((props: SingleProductCardParams) => {
 						/>
 					)}
 				</CardContainer>
+			) : (
+				<Placeholder style={{ padding: 5 }} Animation={Fade}>
+					<View style={{ flexDirection: 'row' }}>
+						<PlaceholderLine
+							width={24}
+							height={70}
+							style={{ marginRight: 10, marginBottom: 10 }}
+						/>
+						<Placeholder style={{ paddingVertical: 10 }}>
+							<PlaceholderLine width={60} style={{ marginBottom: 25 }} />
+							<PlaceholderLine width={20} />
+						</Placeholder>
+					</View>
+				</Placeholder>
 			)}
 		</InView>
 	);

package/themes/original/src/components/shared/OBottomPopup.tsx CHANGED Viewed

@@ -47,19 +47,21 @@ const OBottomPopup = (props: Props) => {
 				</TouchableWithoutFeedback>
 				<View style={{ ...styles.bottomContainer, ...bottomContainerStyle }}>
 					<View style={{ paddingTop: top, paddingBottom: bottom }}>
-						{closeIcon && (
-							<TouchableOpacity onPress={onClose} style={styles.closeIconStyle}>
-								<OIcon
-									src={closeIcon}
-									width={30}
-								/>
-							</TouchableOpacity>
-						)}
-						{!!title && (
-							<Text style={{ ...styles.titleStyle, ...titleStyle }}>
-								{title}
-							</Text>
-						)}
+						<View style={styles.modalTitleStyle}>
+							{closeIcon && (
+								<TouchableOpacity onPress={onClose} style={styles.closeIconStyle}>
+									<OIcon
+										src={closeIcon}
+										width={30}
+									/>
+								</TouchableOpacity>
+							)}
+							{!!title && (
+								<Text style={{ ...styles.titleStyle, ...titleStyle }}>
+									{title}
+								</Text>
+							)}
+						</View>
 						{children}
 					</View>
 				</View>
@@ -86,12 +88,17 @@ const styles = StyleSheet.create({
 	},
 	titleStyle: {
 		fontSize: 20,
-		fontWeight: 'bold',
-		marginVertical: 10
+		fontWeight: 'bold'
 	},
 	closeIconStyle: {
-		paddingTop: 20,
-		paddingLeft: 20
+		position: 'absolute',
+		left: 25,
+		top: 22.5
+	},
+	modalTitleStyle: {
+		position: 'relative',
+		paddingHorizontal: 10,
+		paddingVertical: 20
 	}
 })

package/themes/original/src/layouts/FloatingBottomContainer.tsx CHANGED Viewed

@@ -19,7 +19,11 @@ export const Container = styled.View`
 export const FloatingBottomContainer = (props: any) => {
   return (
-    <Container style={{ width: windowWidth }}>
+    <Container style={{
+      width: windowWidth,
+      borderTopWidth: props?.borderTopWidth ?? 1,
+      borderRadius: props?.borderRadius ?? 0
+    }}>
       {props.children}
     </Container>
   )