ordering-ui-react-native 0.16.75 → 0.16.77

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

@@ -12,6 +12,7 @@ import { useTheme } from 'styled-components/native';
 import { shape } from '../../utils'
 import { CategoryDescriptionMemoized } from './CategoryDescription';
 import { OrderItAgain } from '../OrderItAgain'
+import { SubcategoriesComponentMemoized } from './SubcategoriesComponent';
 
 const BusinessProductsListUI = (props: BusinessProductsListParams) => {
   const {
@@ -70,49 +71,15 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
     }
   }
 
-  const SubcategoriesComponent = ({ category }: any) => {
-    const allsubcategorySelected = !subcategoriesSelected?.some((subcategory: any) => category?.id === subcategory?.parent_category_id)
-
-    return (
-      <SubCategoriesContainer>
-        <ContainerButton
-          isSelected={allsubcategorySelected}
-        >
-          <OButton
-            onClick={() => onClickSubcategory(null, category)}
-            bgColor={allsubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-            text={`${t('ALL', 'All')} ${allsubcategorySelected ? 'X' : ''}`}
-            style={bpStyles.categoryButtonStyle}
-            textStyle={{ color: allsubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-          />
-        </ContainerButton>
-        {category?.subcategories?.map((subcategory: any) => {
-          const isSubcategorySelected = subcategoriesSelected?.find((_subcategory: any) => _subcategory?.id === subcategory?.id)
-          return (
-            <ContainerButton
-              key={subcategory?.id}
-              isSelected={isSubcategorySelected}
-            >
-              <OButton
-                onClick={() => onClickSubcategory(subcategory, category)}
-                bgColor={isSubcategorySelected ? theme.colors.primary : theme.colors.backgroundGray}
-                text={`${subcategory?.name} ${isSubcategorySelected ? 'X' : ''}`}
-                style={bpStyles.categoryButtonStyle}
-                textStyle={{ color: isSubcategorySelected ? theme.colors.white : theme.colors.textNormal, fontSize: 12 }}
-              />
-            </ContainerButton>
-          )
-        }
-        )}
-      </SubCategoriesContainer>
-    )
-  }
-
   return (
     <ProductsContainer renderToHardwareTextureAndroid={categoryState.loading || isBusinessLoading}>
       <HeaderWrapper>
         {category?.subcategories?.length > 0 && (
-          <SubcategoriesComponent category={category} />
+          <SubcategoriesComponentMemoized
+            category={category}
+            subcategoriesSelected={subcategoriesSelected}
+            onClickSubcategory={onClickSubcategory}
+          />
         )}
       </HeaderWrapper>
       {previouslyProducts?.length > 0 && (
@@ -136,7 +103,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
             <SingleProductCard
               key={'prod_' + product.id + `_${i}`}
               isSoldOut={product.inventoried && !product.quantity}
-              enableIntersection={!isFiltMode}
+              enableIntersection={!isFiltMode && categoryState.products?.length < 80}
               product={product}
               businessId={businessId}
               categoryState={categoryState}
@@ -164,7 +131,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                       key={'feat_' + product.id + `_${i}`}
                       isSoldOut={product.inventoried && !product.quantity}
                       product={product}
-                      enableIntersection={!isFiltMode}
+                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
                       businessId={businessId}
                       categoryState={categoryState}
                       onProductClick={onProductClick}
@@ -251,13 +218,17 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
                   </View>
                 )}
                 {category?.subcategories?.length > 0 && !isFiltMode && (
-                  <SubcategoriesComponent category={category} />
+                  <SubcategoriesComponentMemoized
+                    category={category}
+                    subcategoriesSelected={subcategoriesSelected}
+                    onClickSubcategory={onClickSubcategory}
+                  />
                 )}
                 <>
                   {products.sort((a: any, b: any) => a.rank - b.rank).map((product: any, i: any) => (
                     <SingleProductCard
                       key={`${product?.id}_${i}`}
-                      enableIntersection={!isFiltMode}
+                      enableIntersection={!isFiltMode && categoryState.products?.length < 80}
                       isSoldOut={product.inventoried && !product.quantity}
                       businessId={businessId}
                       product={product}
@@ -279,7 +250,7 @@ const BusinessProductsListUI = (props: BusinessProductsListParams) => {
         <>
           {[...Array(categoryState?.pagination?.nextPageItems).keys()].map(
             (item, i) => (
-              <View style={{ minHeight: 165, marginBottom: 28, padding: 12 }}>
+              <View style={{ minHeight: 165, marginBottom: 28, padding: 12 }} key={i}>
                 <Placeholder style={{ padding: 5 }} Animation={Fade}>
                   <View style={{ flexDirection: 'row' }}>
                     <Placeholder style={{ paddingVertical: 10, flex: 1 }}>

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

@@ -363,6 +363,7 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 					onScroll={handlePageScroll}
 					onScrollBeginDrag={handleTouchDrag}
 					scrollEventThrottle={16}
+					bounces={false}
 				>
 					<BusinessBasicInformation
 						navigation={navigation}

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

@@ -445,9 +445,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			</View>
 			{!isChewLayout ? (
 				<HeaderWrapper
-					source={theme.images.general.homeHero}
+					source={theme.images.backgrounds.business_list_header}
 					style={{ paddingTop: top + 20 }}
-					resizeMode='stretch'
+					resizeMode='cover'
 				>
 					{!auth && (
 						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>

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

@@ -93,6 +93,7 @@ export const BusinessesListing = (props: any) => {
           bottomContainerStyle={{ height: 'auto', borderRadius: 10 }}
           titleStyle={{ textAlign: 'center' }}
           closeIcon={theme.images.general.close}
+          presentationStyle='overFullScreen'
         >
           {lastOrderReview?.order && <ReviewTrigger order={lastOrderReview?.order} handleOpenOrderReview={handleOpenOrderReview} />}
         </OBottomPopup>

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

@@ -106,8 +106,7 @@ const CheckoutUI = (props: any) => {
 			padding: 20
 		},
 		pagePadding: {
-			paddingLeft: 40,
-			paddingRight: 40
+			paddingHorizontal: 40
 		},
 		icon: {
 			top: 15,

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

@@ -76,7 +76,6 @@ export const ChCart = styled(ChPaymethods)``
 
 export const WalletPaymentOptionContainer = styled(ChPaymethods)`
   padding-bottom: 0;
-  margin-left: -20px;
 `
 
 export const ChPlaceOrderBtn = styled.View`

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

@@ -5,6 +5,7 @@ import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
 	LoginForm as LoginFormController,
@@ -235,7 +236,7 @@ const LoginFormUI = (props: LoginParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha(token)
+		handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
 	const handleChangeOtpType = (type: string) => {
@@ -272,15 +273,39 @@ const LoginFormUI = (props: LoginParams) => {
 
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
-			setRecaptchaConfig({
-				siteKey: configs?.security_recaptcha_site_key?.value || null,
-				baseUrl: configs?.security_recaptcha_base_url?.value || null
-			})
+			if (configs?.security_recaptcha_type?.value === 'v3' &&
+				configs?.security_recaptcha_score_v3?.value > 0 &&
+				configs?.security_recaptcha_site_key_v3?.value
+			) {
+				setRecaptchaConfig({
+					version: 'v3',
+					siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				return
+			}
+			if (configs?.security_recaptcha_site_key?.value) {
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+			}
 		}
 	}, [configs, enableReCaptcha])
 
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
+			if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+				setRecaptchaVerified(false)
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+				return
+			}
 			formState.result?.result &&
 				showToast(
 					ToastType.Error,
@@ -596,35 +621,47 @@ const LoginFormUI = (props: LoginParams) => {
 							</TouchableOpacity>
 						)}
 
-						{enableReCaptcha && (
+						{(enableReCaptcha && recaptchaConfig?.version) && (
 							<>
-								<TouchableOpacity
-									onPress={handleOpenRecaptcha}
-								>
-									<RecaptchaButton>
-										{recaptchaVerified ? (
-											<MaterialCommunityIcons
-												name="checkbox-marked"
-												size={26}
-												color={theme.colors.primary}
-											/>
-										) : (
-											<MaterialCommunityIcons
-												name="checkbox-blank-outline"
-												size={26}
-												color={theme.colors.mediumGray}
-											/>
-										)}
-										<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
-									</RecaptchaButton>
-								</TouchableOpacity>
-								<Recaptcha
-									ref={recaptchaRef}
-									siteKey={recaptchaConfig?.siteKey}
-									baseUrl={recaptchaConfig?.baseUrl}
-									onVerify={onRecaptchaVerify}
-									onExpire={() => setRecaptchaVerified(false)}
-								/>
+								{recaptchaConfig?.version === 'v3' ? (
+									<ReCaptcha
+										url={recaptchaConfig?.baseUrl}
+										siteKey={recaptchaConfig?.siteKey}
+										containerStyle={{ height: 40 }}
+										onExecute={onRecaptchaVerify}
+										reCaptchaType={1}
+									/>
+								) : (
+									<>
+										<TouchableOpacity
+											onPress={handleOpenRecaptcha}
+										>
+											<RecaptchaButton>
+												{recaptchaVerified ? (
+													<MaterialCommunityIcons
+														name="checkbox-marked"
+														size={26}
+														color={theme.colors.primary}
+													/>
+												) : (
+													<MaterialCommunityIcons
+														name="checkbox-blank-outline"
+														size={26}
+														color={theme.colors.mediumGray}
+													/>
+												)}
+												<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+											</RecaptchaButton>
+										</TouchableOpacity>
+										<Recaptcha
+											ref={recaptchaRef}
+											siteKey={recaptchaConfig?.siteKey}
+											baseUrl={recaptchaConfig?.baseUrl}
+											onVerify={onRecaptchaVerify}
+											onExpire={() => setRecaptchaVerified(false)}
+										/>
+									</>)
+								}
 							</>
 						)}
 						<OButton

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

@@ -7,6 +7,7 @@ import CheckBox from '@react-native-community/checkbox';
 import { PhoneInputNumber } from '../PhoneInputNumber';
 import { FacebookLogin } from '../FacebookLogin';
 import Recaptcha from 'react-native-recaptcha-that-works'
+import ReCaptcha from '@fatnlazycat/react-native-recaptcha-v3'
 
 import {
 	SignupForm as SignUpController,
@@ -347,20 +348,44 @@ const SignupFormUI = (props: SignupParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha && handleReCaptcha(token)
+		handleReCaptcha && handleReCaptcha({ code: token, version: recaptchaConfig?.version })
 	}
 
 	useEffect(() => {
 		if (configs && Object.keys(configs).length > 0 && enableReCaptcha) {
-			setRecaptchaConfig({
-				siteKey: configs?.security_recaptcha_site_key?.value || null,
-				baseUrl: configs?.security_recaptcha_base_url?.value || null
-			})
+			if (configs?.security_recaptcha_type?.value === 'v3' &&
+				configs?.security_recaptcha_score_v3?.value > 0 &&
+				configs?.security_recaptcha_site_key_v3?.value
+			) {
+				setRecaptchaConfig({
+					version: 'v3',
+					siteKey: configs?.security_recaptcha_site_key_v3?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				return
+			}
+			if (configs?.security_recaptcha_site_key?.value) {
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+			}
 		}
 	}, [configs, enableReCaptcha])
 
 	useEffect(() => {
 		if (!formState.loading && formState.result?.error) {
+			if (formState.result?.result?.[0] === 'ERROR_AUTH_VERIFICATION_CODE') {
+				setRecaptchaVerified(false)
+				setRecaptchaConfig({
+					version: 'v2',
+					siteKey: configs?.security_recaptcha_site_key?.value || null,
+					baseUrl: configs?.security_recaptcha_base_url?.value || null
+				})
+				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+				return
+			}
 			formState.result?.result &&
 				showToast(ToastType.Error, formState.result?.result[0]);
 			setIsLoadingVerifyModal(false);
@@ -627,36 +652,49 @@ const SignupFormUI = (props: SignupParams) => {
 								</View>
 							)}
 
-							{enableReCaptcha && (
+							{(enableReCaptcha && recaptchaConfig?.version) && (
 								<>
-									<TouchableOpacity
-										onPress={handleOpenRecaptcha}
-										style={{ marginHorizontal: 4, marginBottom: 10 }}
-									>
-										<RecaptchaButton>
-											{recaptchaVerified ? (
-												<MaterialCommunityIcons
-													name="checkbox-marked"
-													size={23}
-													color={theme.colors.primary}
-												/>
-											) : (
-												<MaterialCommunityIcons
-													name="checkbox-blank-outline"
-													size={23}
-													color={theme.colors.disabled}
-												/>
-											)}
-											<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
-										</RecaptchaButton>
-									</TouchableOpacity>
-									<Recaptcha
-										ref={recaptchaRef}
-										siteKey={recaptchaConfig?.siteKey}
-										baseUrl={recaptchaConfig?.baseUrl}
-										onVerify={onRecaptchaVerify}
-										onExpire={() => setRecaptchaVerified(false)}
-									/>
+									{recaptchaConfig?.version === 'v3' ? (
+										<ReCaptcha
+											url={recaptchaConfig?.baseUrl}
+											siteKey={recaptchaConfig?.siteKey}
+											containerStyle={{ height: 40 }}
+											onExecute={onRecaptchaVerify}
+											reCaptchaType={1}
+										/>
+									) : (
+										<>
+											<TouchableOpacity
+												onPress={handleOpenRecaptcha}
+												style={{ marginHorizontal: 4, marginBottom: 10 }}
+											>
+												<RecaptchaButton>
+													{recaptchaVerified ? (
+														<MaterialCommunityIcons
+															name="checkbox-marked"
+															size={23}
+															color={theme.colors.primary}
+														/>
+													) : (
+														<MaterialCommunityIcons
+															name="checkbox-blank-outline"
+															size={23}
+															color={theme.colors.disabled}
+														/>
+													)}
+													<OText size={14} mLeft={8}>{t('VERIFY_ReCAPTCHA', 'Verify reCAPTCHA')}</OText>
+												</RecaptchaButton>
+											</TouchableOpacity>
+											<Recaptcha
+												ref={recaptchaRef}
+												siteKey={recaptchaConfig?.siteKey}
+												baseUrl={recaptchaConfig?.baseUrl}
+												onVerify={onRecaptchaVerify}
+												onExpire={() => setRecaptchaVerified(false)}
+											/>
+										</>
+									)}
+
 								</>
 							)}
 							{(signUpTab === 'default') && (

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

@@ -42,7 +42,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	const theme = useTheme();
 	const hideAddButton = theme?.business_view?.components?.products?.components?.add_to_cart_button?.hidden ?? true
 
-	const fadeAnim = useRef(new Animated.Value(0)).current;
+	const fadeAnim = useRef(new Animated.Value(enableIntersection ? 0 : 1)).current;
 
 	const styles = StyleSheet.create({
 		container: {
@@ -50,7 +50,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 			borderRadius: 7.6,
 			borderColor: theme.colors.border,
 			marginBottom: 28,
-			minHeight: 165
+			minHeight: hideAddButton ? 100 : 165
 		},
 		titleWrapper: {
 			flexDirection: 'row',
@@ -123,7 +123,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 		maxCartProductConfig,
 		maxCartProductInventory,
 	);
-
+	
 	const fadeIn = () => {
 		Animated.timing(fadeAnim, {
 			toValue: 1,
@@ -141,16 +141,18 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	const handleChangeIntersection = () => {
-		setIsIntersectionObserver(true);
-		fadeIn();
+		if (enableIntersection) {
+			setIsIntersectionObserver(true);
+			fadeIn();
+		}
 	}
 
 	useEffect(() => {
-		if (!enableIntersection) fadeIn()
+		if (enableIntersection) fadeIn()
 	}, [enableIntersection])
 
 	return (
-		<InView style={{ minHeight: 200 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<InView style={{ minHeight: hideAddButton ? 125 : 165 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
 				<CardContainer
 					showAddButton={!hideAddButton}
@@ -164,7 +166,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					<View style={{ flexDirection: 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer style={[styles.quantityContainer, {
-								transform: [{ translateX: 25 }, { translateY: -55 }],
+								transform: [{ translateX: 25 }, { translateY: hideAddButton ? -25 : -55 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>
@@ -281,7 +283,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					)}
 				</CardContainer>
 			) : (
-				<View style={{ minHeight: 165, marginBottom: 28, padding: 12 }}>
+				<View style={{ marginBottom: 28, padding: 12, height: hideAddButton ? 125 : 165 }}>
 					<Placeholder style={{ padding: 5 }} Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
 							<Placeholder style={{ paddingVertical: 10, flex: 1 }}>

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

@@ -14,6 +14,7 @@ interface Props {
 	bottomContainerStyle?: any;
 	titleStyle?: any;
 	closeIcon?: any;
+	presentationStyle?: "fullScreen" | "pageSheet" | "formSheet" | "overFullScreen" | undefined
 }
 const OBottomPopup = (props: Props) => {
 	const {
@@ -25,17 +26,18 @@ const OBottomPopup = (props: Props) => {
 		isStatusBar,
 		titleStyle,
 		bottomContainerStyle,
-		closeIcon
+		closeIcon,
+		presentationStyle
 	} = props
 	const { top, bottom } = useSafeAreaInsets();
-
+	
 	return (
 		<Modal
 			animationType='slide'
 			transparent={transparent}
 			visible={open}
 			onRequestClose={() => onClose()}
-			presentationStyle={'fullScreen'}
+			presentationStyle={presentationStyle || 'fullScreen'}
 		>
 			{isStatusBar && <StatusBar translucent={false} />}
 			<View style={styles.container}>