ordering-ui-react-native 0.17.31-release → 0.17.32-release

package/package.json

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

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

@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { formatSeconds } from '../../../utils'
-import { StyleSheet, TouchableOpacity } from 'react-native';
+import { StyleSheet, TouchableOpacity, View, Platform } from 'react-native';
 import { useCountdownTimer } from '../../../../../../src/hooks/useCountdownTimer';
 import { useLanguage } from 'ordering-components/native';
 import { OTPContainer } from './styles';
-import { OText, OButton } from '../../shared';
+import { OText, OButton, OIcon } from '../../shared';
 import OtpInputs from 'react-native-otp-inputs';
 import { useTheme } from 'styled-components/native';
 import { otpParams } from '../../../types'
@@ -16,7 +16,9 @@ export const Otp = (props: otpParams) => {
     onSubmit,
     handleLoginOtp,
     setAlertState,
-    pinCount
+    pinCount,
+    otpError,
+    setOtpError
   } = props
 
   const theme = useTheme();
@@ -25,7 +27,7 @@ export const Otp = (props: otpParams) => {
     600, willVerifyOtpState)
 
   const [code, setCode] = useState('')
-
+  const inputRef = useRef<any>()
 
   const handleOnSubmit = () => {
     setAlertState({
@@ -36,6 +38,16 @@ export const Otp = (props: otpParams) => {
     onSubmit()
   }
 
+  const handleChangeCode = (code : string) => {
+    setCode(code)
+    setOtpError(null)
+  }
+
+  const handleCloseOtp = () => {
+    setWillVerifyOtpState(false)
+    setOtpError(null)
+  }
+
   useEffect(() => {
     if (otpLeftTime === 0) {
       setAlertState({
@@ -49,6 +61,7 @@ export const Otp = (props: otpParams) => {
   useEffect(() => {
     if (code?.length === (pinCount || 6)) {
       handleLoginOtp(code)
+      inputRef?.current?.reset()
     }
   }, [code])
 
@@ -73,28 +86,63 @@ export const Otp = (props: otpParams) => {
       color: theme.colors.primary,
       fontSize: 16
     },
+    wrapperIcon: {
+      marginTop: Platform.OS === 'ios' ? 40 : 12,
+      marginBottom: 20,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingRight: 35
+    },
+    closeContainer: {
+      width: '100%',
+      flexDirection: 'row',
+    }
   });
 
   return (
     <>
       <OTPContainer>
+        <View
+          style={loginStyle.closeContainer}>
+          <TouchableOpacity onPress={() => handleCloseOtp()} style={loginStyle.wrapperIcon}>
+            <OIcon
+              src={theme.images.general.close}
+              width={22}
+            />
+          </TouchableOpacity>
+          <OText size={22} style={{
+            marginTop: 5
+          }}>
+            {t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+          </OText>
+        </View>
         <OText size={24}>
           {formatSeconds(otpLeftTime)}
         </OText>
         <OtpInputs
+          ref={inputRef}
           autofillFromClipboard
           numberOfInputs={pinCount || 6}
           style={loginStyle.container}
           inputStyles={loginStyle.underlineStyleBase}
-          handleChange={setCode}
+          handleChange={handleChangeCode}
         />
+        {!!otpError && (
+          <OText
+            color={theme?.colors?.error}
+            size={20}
+            mBottom={10}
+          >
+            {t(otpError, otpError)}
+          </OText>
+        )}
         <TouchableOpacity onPress={() => handleOnSubmit()} disabled={otpLeftTime > 520}>
           <OText size={16} mBottom={30} color={otpLeftTime > 520 ? theme.colors.disabled : theme.colors.primary}>
             {t('RESEND_CODE', 'Resend code')}
           </OText>
         </TouchableOpacity>
         <OButton
-          onClick={() => setWillVerifyOtpState(false)}
+          onClick={() => handleCloseOtp()}
           bgColor={theme.colors.white}
           borderColor={theme.colors.primary}
           textStyle={{ color: theme.colors.primary }}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { StyleSheet, View, Keyboard, Vibration } from 'react-native';
+import { StyleSheet, View, Keyboard, Modal } from 'react-native';
 import Spinner from 'react-native-loading-spinner-overlay';
 import { useForm, Controller } from 'react-hook-form';
 import { PhoneInputNumber } from '../PhoneInputNumber';
@@ -97,6 +97,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const [recaptchaVerified, setRecaptchaVerified] = useState(false)
 	const [alertState, setAlertState] = useState({ open: false, title: '', content: [] })
 	const [tabLayouts, setTabLayouts] = useState<any>({})
+	const [otpError, setOtpError] = useState(null)
 	const tabsRef = useRef<any>(null)
 	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 	const theme = useTheme();
@@ -175,7 +176,7 @@ const LoginFormUI = (props: LoginParams) => {
 		if (loginTab === 'otp') {
 			if (phoneInputData.error && (loginTab !== 'otp' || (otpType === 'cellphone' && loginTab === 'otp'))) {
 				showToast(ToastType.Error, t('INVALID_PHONE_NUMBER', 'Invalid phone number'));
-				Vibration.vibrate()
+				vibrateApp()
 				return
 			}
 			if (!values?.cellphone && otpType === 'cellphone') {
@@ -192,7 +193,7 @@ const LoginFormUI = (props: LoginParams) => {
 		} else {
 			if (phoneInputData.error) {
 				showToast(ToastType.Error, phoneInputData.error);
-				Vibration.vibrate()
+				vibrateApp()
 				return;
 			}
 			handleButtonLoginClick({
@@ -205,7 +206,7 @@ const LoginFormUI = (props: LoginParams) => {
 	const handleVerifyCodeClick = () => {
 		if (phoneInputData.error) {
 			showToast(ToastType.Error, phoneInputData.error);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (
@@ -220,7 +221,7 @@ const LoginFormUI = (props: LoginParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		handleSendVerifyCode && handleSendVerifyCode(phoneInputData.phone);
@@ -242,12 +243,12 @@ const LoginFormUI = (props: LoginParams) => {
 		setRecaptchaVerified(false)
 		if (!recaptchaConfig?.siteKey) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 		if (!recaptchaConfig?.baseUrl) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
-			Vibration.vibrate()
+			vibrateApp()
 			return
 		}
 
@@ -270,11 +271,7 @@ const LoginFormUI = (props: LoginParams) => {
 		if (logged) {
 			setWillVerifyOtpState(false)
 		} else {
-			setAlertState({
-				open: true,
-				title: '',
-				content: t('OTP_CODE_INCORRECT', 'Otp code incorrect')
-			})
+			setOtpError(t('OTP_CODE_INCORRECT', 'Otp code incorrect'))
 		}
 	}
 
@@ -333,7 +330,7 @@ const LoginFormUI = (props: LoginParams) => {
 					baseUrl: configs?.security_recaptcha_base_url?.value || null
 				})
 				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
-				Vibration.vibrate()
+				vibrateApp()
 				return
 			}
 			formState.result?.result &&
@@ -343,7 +340,7 @@ const LoginFormUI = (props: LoginParams) => {
 						? formState.result?.result
 						: formState.result?.result[0],
 				);
-			formState.result?.result && Vibration.vibrate()
+			formState.result?.result && vibrateApp()
 		}
 	}, [formState]);
 
@@ -355,7 +352,7 @@ const LoginFormUI = (props: LoginParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
-				verifyPhoneState.result?.result && Vibration.vibrate();
+				verifyPhoneState.result?.result && vibrateApp();
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -396,7 +393,7 @@ const LoginFormUI = (props: LoginParams) => {
 	}, [checkPhoneCodeState])
 
 	useEffect(() => {
-		if (!!Object.values(errors)?.length) Vibration.vibrate()
+		if (!!Object.values(errors)?.length) vibrateApp()
 	}, [errors])
 
 	return (
@@ -788,7 +785,7 @@ const LoginFormUI = (props: LoginParams) => {
 										facebookLoginEnabled && (
 											<FacebookLogin
 												notificationState={notificationState}
-												handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 												handleLoading={(val: boolean) => setIsFBLoading(val)}
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
@@ -797,7 +794,7 @@ const LoginFormUI = (props: LoginParams) => {
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
@@ -805,7 +802,7 @@ const LoginFormUI = (props: LoginParams) => {
 									{(configs?.apple_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && appleLoginEnabled && (
 										<AppleLogin
 											notificationState={notificationState}
-											handleErrors={(err: any) => { showToast(ToastType.Error, err), Vibration.vibrate() }}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessAppleLogin={handleSuccessFacebook}
 										/>
@@ -851,20 +848,21 @@ const LoginFormUI = (props: LoginParams) => {
 					onClose={() => setIsModalVisible(false)}
 				/>
 			</OModal>
-			<OModal
-				open={willVerifyOtpState}
-				onClose={() => setWillVerifyOtpState(false)}
-				entireModal
-				title={t('ENTER_VERIFICATION_CODE', 'Enter verification code')}
+			<Modal
+				visible={willVerifyOtpState}
+				onDismiss={() => setWillVerifyOtpState(false)}
+				animationType='slide'
 			>
 				<Otp
 					willVerifyOtpState={willVerifyOtpState}
+					otpError={otpError}
+					setOtpError={setOtpError}
 					setWillVerifyOtpState={setWillVerifyOtpState}
 					handleLoginOtp={handleLoginOtp}
 					onSubmit={onSubmit}
 					setAlertState={setAlertState}
 				/>
-			</OModal>
+			</Modal>
 			<Alert
 				open={alertState.open}
 				content={alertState.content}

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

@@ -169,7 +169,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 	}
 
 	return (
-		<InView style={{ minHeight: hideAddButton ? 125 : 190 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
+		<InView style={{ minHeight: hideAddButton ? 125 : 190, marginLeft: logoPosition === 'left' ? 12.5 : 0 }} triggerOnce={true} onChange={(inView: boolean) => handleChangeIntersection()}>
 			{isIntersectionObserver ? (
 				<CardAnimation
 					onClick={() => handleClickproduct()}
@@ -182,7 +182,7 @@ const SingleProductCardUI = React.memo((props: SingleProductCardParams) => {
 					<View style={{ flexDirection: logoPosition === 'left' ? 'row-reverse' : 'row' }}>
 						{productAddedToCartLength > 0 && (
 							<QuantityContainer businessSingleId={businessSingleId} style={[styles.quantityContainer, {
-								transform: [{ translateX: 25 }, { translateY: -25 }],
+								transform: [{ translateX: logoPosition === 'right' ? 25 : -25 }, { translateY: -25 }],
 							}]}>
 								<OText size={12} color={theme.colors.white}>{productAddedToCartLength.toString()}</OText>
 							</QuantityContainer>

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

@@ -18,7 +18,6 @@ export const QuantityContainer = styled.View`
   background: ${({ theme }: any) => theme.colors.primary};
   align-items: center;
   justify-content: center;
-  left: 0;
 `
 export const PricesContainer = styled.View`
   flex-direction: row;

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

@@ -18,14 +18,15 @@ import {
 	OSItemActions,
 } from '../PaymentOptionStripe/styles';
 
-const StripeCardsListUI = (props: any) => {
+export const StripeCardsListUI = (props: any) => {
 	const {
 		onSelectCard,
 		deleteCard,
 		cardSelected,
 		cardsList,
 		handleCardClick,
-		setAddCardOpen
+		setAddCardOpen,
+		gateway
 	} = props;
 
 	const theme = useTheme();
@@ -33,13 +34,15 @@ const StripeCardsListUI = (props: any) => {
 	const [{ token }] = useSession();
 	const [, t] = useLanguage();
 
+	const paymethodsWithoutSaveCards = ['credomatic']
+
 	const handleCardSelected = (card: any) => {
 		handleCardClick(card);
 		onSelectCard(card);
 	}
 
 	useEffect(() => {
-		if (!cardsList && !cardsList?.loading && cardsList?.cards?.length === 0) {
+		if (!cardsList && !cardsList?.loading && cardsList?.cards?.length === 0 && !paymethodsWithoutSaveCards.includes(gateway)) {
 			setAddCardOpen(true)
 		}
 	}, [cardsList?.loading])

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

@@ -714,6 +714,8 @@ export interface otpParams {
 	handleLoginOtp: (code: string) => void,
 	setAlertState: any;
 	pinCount: number;
+	otpError: any,
+	setOtpError: any
 }
 
 export interface FavoriteParams {