ordering-ui-react-native 0.15.89 → 0.15.92

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

@@ -93,6 +93,8 @@ const LoginFormUI = (props: LoginParams) => {
 	const [recaptchaConfig, setRecaptchaConfig] = useState<any>({})
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
+	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const tabsRef = useRef<any>(null)
 
 	const theme = useTheme();
 	const isOtpEmail = loginTab === 'otp' && otpType === 'email'
@@ -146,9 +148,10 @@ const LoginFormUI = (props: LoginParams) => {
 	const passwordRef = useRef<any>({});
 	const recaptchaRef = useRef<any>({});
 
-	const handleChangeTab = (val: string) => {
+	const handleChangeTab = (val: string, otpType?: string) => {
 		props.handleChangeTab(val);
 		setPasswordSee(false);
+		handleCategoryScroll(otpType ? `${val}_${otpType}` : val)
 	};
 
 	const onSubmit = (values?: any) => {
@@ -231,7 +234,7 @@ const LoginFormUI = (props: LoginParams) => {
 	}
 
 	const handleChangeOtpType = (type: string) => {
-		handleChangeTab('otp')
+		handleChangeTab('otp', type)
 		setOtpType(type)
 	}
 
@@ -248,6 +251,20 @@ const LoginFormUI = (props: LoginParams) => {
 		})
 	}
 
+	const handleCategoryScroll = (opc : string) => {
+		tabsRef.current.scrollTo({
+			x: tabLayouts?.[opc]?.x - 40,
+			animated: true
+		})
+	}
+
+	const handleOnLayout = (event: any, opc: string) => {
+		const _tabLayouts = { ...tabLayouts }
+		const categoryKey = opc
+		_tabLayouts[categoryKey] = event.nativeEvent.layout
+		setTabLayouts(_tabLayouts)
+	}
+
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
 			setRecaptchaConfig({
@@ -331,9 +348,16 @@ const LoginFormUI = (props: LoginParams) => {
 			<FormSide>
 				{((useLoginByEmail && useLoginByCellphone) || useLoginOtp) && (
 					<LoginWith>
-						<OTabs horizontal>
+						<OTabs
+							horizontal 
+							showsHorizontalScrollIndicator={false}
+							ref={tabsRef}
+						>
 							{useLoginByEmail && (
-								<TabBtn onPress={() => handleChangeTab('email')}>
+								<TabBtn 
+									onPress={() => handleChangeTab('email')}
+									onLayout={(event: any) => handleOnLayout(event, 'email')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -355,7 +379,10 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginByCellphone && (
-								<TabBtn onPress={() => handleChangeTab('cellphone')}>
+								<TabBtn 
+									onPress={() => handleChangeTab('cellphone')}
+									onLayout={(event: any) => handleOnLayout(event, 'cellphone')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -377,7 +404,10 @@ const LoginFormUI = (props: LoginParams) => {
 								</TabBtn>
 							)}
 							{useLoginOtpEmail && (
-								<TabBtn onPress={() => handleChangeOtpType('email')}>
+								<TabBtn 
+									onPress={() => handleChangeOtpType('email')}
+									onLayout={(event: any) => handleOnLayout(event, 'otp_email')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -393,13 +423,16 @@ const LoginFormUI = (props: LoginParams) => {
 													: theme.colors.disabled
 											}
 											weight={isOtpEmail ? 'bold' : 'normal'}>
-											{t('LOGIN_BY_OTP_EMAIL', 'Login by Otp Email')}
+											{t('BY_OTP_EMAIL', 'By Otp Email')}
 										</OText>
 									</OTab>
 								</TabBtn>
 							)}
 							{useLoginOtpCellphone && (
-								<TabBtn onPress={() => handleChangeOtpType('cellphone')}>
+								<TabBtn 
+									onPress={() => handleChangeOtpType('cellphone')}
+									onLayout={(event: any) => handleOnLayout(event, 'otp_cellphone')}
+								>
 									<OTab
 										style={{
 											borderBottomColor:
@@ -415,7 +448,7 @@ const LoginFormUI = (props: LoginParams) => {
 													: theme.colors.disabled
 											}
 											weight={isOtpCellphone ? 'bold' : 'normal'}>
-											{t('LOGIN_BY_OTP_PHONE', 'Login by Otp Phone')}
+											{t('BY_OTP_PHONE', 'By Otp Phone')}
 										</OText>
 									</OTab>
 								</TabBtn>

package/themes/original/src/components/LoginForm/styles.tsx

@@ -12,11 +12,9 @@ export const FormSide = styled.View`
   margin: auto;
 `;
 
-export const OTabs = styled.View`
+export const OTabs = styled.ScrollView`
   flex-direction: row;
   width: 100%;
-  flex-wrap: wrap;
-  justify-content: flex-start;
   margin-bottom: -1px;
 `;
 

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

@@ -42,7 +42,7 @@ import { OSRow } from '../OrderSummary/styles';
 import AntIcon from 'react-native-vector-icons/AntDesign'
 import { TaxInformation } from '../TaxInformation';
 import { Placeholder, PlaceholderLine } from 'rn-placeholder';
-
+import NavBar from '../NavBar'
 export const OrderDetailsUI = (props: OrderDetailsParams) => {
   const {
     navigation,
@@ -82,7 +82,8 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       justifyContent: 'flex-start',
       paddingLeft: 0,
       height: 30,
-      width: 40,
+      width: 30,
+      marginTop: Platform.OS === 'ios' ? 0 : 30
     },
   });
 
@@ -364,7 +365,7 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
   }
 
   const RenderGoogleMap = () => {
-    const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l : string) => l.replace(/[^-.0-9]/g, ''))
+    const driverLocationString = typeof order?.driver?.location?.location === 'string' && order?.driver?.location?.location?.split(',').map((l: string) => l.replace(/[^-.0-9]/g, ''))
     const parsedLocations = locations.map(location => typeof location?.location === 'string' ? {
       ...location,
       lat: parseFloat(location?.location?.split(',')[0].replace(/[^-.0-9]/g, '')),
@@ -498,27 +499,23 @@ export const OrderDetailsUI = (props: OrderDetailsParams) => {
       {order && Object.keys(order).length > 0 && (
         <>
           <Header>
-            <OButton
-              imgLeftSrc={theme.images.general.arrow_left}
-              imgRightSrc={null}
-              style={styles.btnBackArrow}
-              onClick={() => handleArrowBack()}
-              imgLeftStyle={{ tintColor: theme.colors.disabled }}
+            <NavBar
+              title={`${t('ORDER', 'Order')} #${order?.id}`}
+              titleAlign={'center'}
+              onActionLeft={handleArrowBack}
+              showCall={false}
+              btnStyle={{ paddingLeft: 0 }}
+              style={{ flexDirection: 'column', alignItems: 'flex-start', marginTop: Platform.OS === 'ios' ? 0 : 20 }}
+              titleWrapStyle={{ paddingHorizontal: 0 }}
+              titleStyle={{ marginRight: 0, marginLeft: 0 }}
+              subTitle={<OText size={12} lineHeight={18} color={theme.colors.textNormal}>
+                {order?.delivery_datetime_utc
+                  ? parseDate(order?.delivery_datetime_utc)
+                  : parseDate(order?.delivery_datetime, { utc: false })}
+              </OText>}
             />
             <OrderInfo>
               <OrderData>
-                <OText
-                  size={20}
-                  lineHeight={30}
-                  weight={'600'}
-                  color={theme.colors.textNormal}>
-                  {t('ORDER', 'Order')} #{order?.id}
-                </OText>
-                <OText size={12} lineHeight={18} color={theme.colors.textNormal}>
-                  {order?.delivery_datetime_utc
-                    ? parseDate(order?.delivery_datetime_utc)
-                    : parseDate(order?.delivery_datetime, { utc: false })}
-                </OText>
                 {
                   (
                     parseInt(order?.status) === 1 ||

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

@@ -112,6 +112,7 @@ const PaymentOptionWalletUI = (props: any) => {
                     true: theme.colors.primary,
                     false: theme.colors.disabled
                   }}
+                  onChange={() => handleOnChange(idx, wallet)}
                   tintColor={theme.colors.disabled}
                   onCheckColor={theme.colors.primary}
                   onTintColor={theme.colors.primary}

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

@@ -175,6 +175,7 @@ export const ProductOptionsUI = (props: any) => {
 	const [optionLayout, setOptionLayout] = useState<any>({})
 	const [headerRefHeight, setHeaderRefHeight] = useState(0)
 	const [summaryRefHeight, setSummaryRefHeight] = useState(0)
+	const [isScrollAvailable, setIsScrollAvailable] = useState(null)
 
 	const isError = (id: number) => {
 		let bgColor = theme.colors.white;
@@ -278,6 +279,52 @@ export const ProductOptionsUI = (props: any) => {
 		setOptionLayout(_optionLayout)
 	}
 
+	const saveErrors =
+		orderState.loading ||
+		maxProductQuantity === 0 ||
+		Object.keys(errors).length > 0;
+
+	const ExtraOptions = ({ eID, options }: any) => (
+		<>
+			{options.map(({ id, name, respect_to, suboptions }: any) => (
+				<React.Fragment key={`cont_key_${id}`}>
+					{respect_to == null && suboptions?.length > 0 && (
+						<TouchableOpacity
+							key={`eopt_key_${id}`}
+							onPress={() => setSelectedOpt(id)}
+							style={[
+								styles.extraItem,
+								{
+									borderBottomColor:
+										selOpt == id ? theme.colors.textNormal : theme.colors.border,
+								},
+							]}>
+							<OText
+								color={
+									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
+								}
+								size={selOpt == id ? 14 : 12}
+								weight={selOpt == id ? '600' : 'normal'}>
+								{name}
+							</OText>
+						</TouchableOpacity>
+					)}
+				</React.Fragment>
+			))}
+		</>
+	);
+
+	const handleGoBack = navigation?.canGoBack()
+		? () => navigation.goBack()
+		: () => navigation.navigate('Business', { store: props.businessSlug })
+
+	useEffect(() => {
+		if (isScrollAvailable) {
+			setIsScrollAvailable(null)
+			scrollDown(isScrollAvailable)
+		}
+	}, [errors])
+
 	useEffect(() => {
 		const imageList: any = []
 		const videoList: any = []
@@ -319,45 +366,6 @@ export const ProductOptionsUI = (props: any) => {
 		}
 	}, [product])
 
-	const saveErrors =
-		orderState.loading ||
-		maxProductQuantity === 0 ||
-		Object.keys(errors).length > 0;
-
-	const ExtraOptions = ({ eID, options }: any) => (
-		<>
-			{options.map(({ id, name, respect_to, suboptions }: any) => (
-				<React.Fragment key={`cont_key_${id}`}>
-					{respect_to == null && suboptions?.length > 0 && (
-						<TouchableOpacity
-							key={`eopt_key_${id}`}
-							onPress={() => setSelectedOpt(id)}
-							style={[
-								styles.extraItem,
-								{
-									borderBottomColor:
-										selOpt == id ? theme.colors.textNormal : theme.colors.border,
-								},
-							]}>
-							<OText
-								color={
-									selOpt == id ? theme.colors.textNormal : theme.colors.textSecondary
-								}
-								size={selOpt == id ? 14 : 12}
-								weight={selOpt == id ? '600' : 'normal'}>
-								{name}
-							</OText>
-						</TouchableOpacity>
-					)}
-				</React.Fragment>
-			))}
-		</>
-	);
-
-	const handleGoBack = navigation?.canGoBack()
-		? () => navigation.goBack()
-		: () => navigation.navigate('Business', { store: props.businessSlug })
-
 	return (
 		<SafeAreaView style={{ flex: 1 }}>
 			<TopHeader>
@@ -738,7 +746,7 @@ export const ProductOptionsUI = (props: any) => {
 																								isSoldOut ||
 																								maxProductQuantity <= 0
 																							}
-																							scrollDown={scrollDown}
+																							setIsScrollAvailable={setIsScrollAvailable}
 																							error={errors[`id:${option.id}`]}
 																						/>
 																					);

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

@@ -28,36 +28,40 @@ export const ProductOptionSubOptionUI = (props: any) => {
 		toggleSelect,
 		changePosition,
 		disabled,
-		error,
-		scrollDown
+		setIsScrollAvailable
 	} = props
 
+	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
+	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
+	
 	const theme = useTheme();
-
 	const [, t] = useLanguage()
 	const [{ parsePrice }] = useUtils()
 	const [showMessage, setShowMessage] = useState(false)
+	const [isDirty, setIsDirty] = useState(false)
 
 	const handleSuboptionClick = () => {
 		toggleSelect()
-
-		if (balance === option?.max - 1 && !state.selected) {
-			scrollDown(option?.id)
-		}
+		setIsDirty(true)
 
 		if (balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1)) {
 			setShowMessage(true)
 		}
 	}
 
+	useEffect(() => {
+		if (balance === option?.max && state?.selected && isDirty) {
+			setIsDirty(false)
+			setIsScrollAvailable(option?.id)
+		}
+	}, [state?.selected])
+
 	useEffect(() => {
 		if (!(balance === option?.max && option?.suboptions?.length > balance && !(option?.min === 1 && option?.max === 1))) {
 			setShowMessage(false)
 		}
 	}, [balance])
 
-	const disableIncrement = option?.limit_suboptions_by_max ? balance === option?.max : state.quantity === suboption?.max || (!state.selected && balance === option?.max)
-	const price = option?.with_half_option && suboption?.half_price && state.position !== 'whole' ? suboption?.half_price : suboption?.price
 	return (
 		<View>
 			<Container onPress={() => handleSuboptionClick()}>

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

@@ -17,7 +17,7 @@ import { useTheme } from 'styled-components/native';
 import { OButton, OIcon, OModal, OText } from '../shared'
 import { Placeholder, PlaceholderLine } from 'rn-placeholder'
 import { NotFoundSource } from '../NotFoundSource'
-import { View, StyleSheet, ScrollView, Platform } from 'react-native'
+import { View, StyleSheet, ScrollView, Platform, RefreshControl } from 'react-native'
 import FastImage from 'react-native-fast-image'
 import { PromotionParams } from '../../types'
 import { Container } from '../../layouts/Container'
@@ -28,6 +28,7 @@ const PromotionsUI = (props: PromotionParams) => {
         offersState,
         handleSearchValue,
         searchValue,
+        loadOffers,
         offerSelected,
         setOfferSelected
     } = props
@@ -68,6 +69,7 @@ const PromotionsUI = (props: PromotionParams) => {
     const [, t] = useLanguage()
     const [{ parseDate, parsePrice, optimizeImage }] = useUtils()
     const [openModal, setOpenModal] = useState(false)
+    const [refreshing] = useState(false);
 
     const handleClickOffer = (offer: any) => {
         setOpenModal(true)
@@ -79,6 +81,12 @@ const PromotionsUI = (props: PromotionParams) => {
         navigation.navigate('Business', { store: store.slug })
     }
 
+    const handleOnRefresh = () => {
+        if (!offersState.loading) {
+            loadOffers();
+        }
+    }
+
     const filteredOffers = offersState?.offers?.filter((offer: any) => offer.name.toLowerCase().includes(searchValue.toLowerCase()))
     const targetString = offerSelected?.target === 1
         ? t('SUBTOTAL', 'Subtotal')
@@ -87,7 +95,15 @@ const PromotionsUI = (props: PromotionParams) => {
             : t('SERVICE_FEE', 'Service fee')
 
     return (
-        <Container noPadding>
+        <Container
+            noPadding
+            refreshControl={
+                <RefreshControl
+                    refreshing={refreshing}
+                    onRefresh={() => handleOnRefresh()}
+                />
+            }
+        >
             <NavBar
                 title={t('PROMOTIONS', 'Promotions')}
                 titleAlign={'center'}

package/themes/original/src/types/index.tsx

@@ -153,6 +153,7 @@ export interface BusinessesListingParams {
 	defaultBusinessType?: any;
 	franchiseId?: any;
 	businessId?: any;
+	isGuestUser?: any;
 }
 export interface HighestRatedBusinessesParams {
 	businessesList: { businesses: Array<any>, loading: boolean, error: null | string };
@@ -576,7 +577,8 @@ export interface BusinessSearchParams {
 	filters: any,
 	businessTypes: Array<number>,
 	setFilters: (filters: any) => void,
-	lazySearch?: boolean
+	lazySearch?: boolean,
+	brandList?: any;
 }
 
 export interface NoNetworkParams {