ordering-ui-react-native 0.16.40 → 0.16.41

package/package.json

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

package/src/components/LoginForm/index.tsx

@@ -165,6 +165,12 @@ const LoginFormUI = (props: LoginParams) => {
 
   const handleOpenRecaptcha = () => {
     setRecaptchaVerified(false)
+
+    if (recaptchaVerified) {
+      handleReCaptcha && handleReCaptcha('')
+      return
+    }
+
     if (!recaptchaConfig?.siteKey) {
       showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
       return
@@ -385,6 +391,15 @@ const LoginFormUI = (props: LoginParams) => {
                   baseUrl={recaptchaConfig?.baseUrl}
                   onVerify={onRecaptchaVerify}
                   onExpire={() => setRecaptchaVerified(false)}
+                  footerComponent={<OButton
+                    onClick={() => recaptchaRef.current.close()}
+                    style={{ borderRadius: 0 }}
+                    text={t('CLOSE', 'Close')}
+                    bgColor={theme.colors.primary}
+                    borderColor={theme.colors.primary}
+                    textStyle={{ color: 'white' }}
+                    imgRightSrc={null}
+                  />}
                 />
               </>
             )}

package/src/components/SignupForm/index.tsx

@@ -245,6 +245,12 @@ const SignupFormUI = (props: SignupParams) => {
 
   const handleOpenRecaptcha = () => {
     setRecaptchaVerified(false)
+
+    if (recaptchaVerified) {
+      handleReCaptcha && handleReCaptcha('')
+      return
+    }
+
     if (!recaptchaConfig?.siteKey) {
       showToast(ToastType.Error, t('NO_RECAPTCHA_SITE_KEY', 'The config doesn\'t have recaptcha site key'));
       return
@@ -555,6 +561,15 @@ const SignupFormUI = (props: SignupParams) => {
                 baseUrl={recaptchaConfig?.baseUrl}
                 onVerify={onRecaptchaVerify}
                 onExpire={() => setRecaptchaVerified(false)}
+                footerComponent={<OButton
+                  onClick={() => recaptchaRef.current.close()}
+                  style={{ borderRadius: 0 }}
+                  text={t('CLOSE', 'Close')}
+                  bgColor={theme.colors.primary}
+                  borderColor={theme.colors.primary}
+                  textStyle={{ color: 'white' }}
+                  imgRightSrc={null}
+                />}
               />
             </>
           )}

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

@@ -94,7 +94,8 @@ export const BusinessBasicInformation = (
 			height: 20,
 			justifyContent: 'center',
 			alignItems: 'center',
-			marginLeft: 5
+			marginRight: 5,
+			marginBottom: 7
 		},
 		tiktokIcon: {
 			height: 12,
@@ -238,53 +239,6 @@ export const BusinessBasicInformation = (
 									</OText>
 								</RibbonBox>
 							)}
-							<SocialListWrapper
-								showsVerticalScrollIndicator={false}
-								showsHorizontalScrollIndicator={false}
-								horizontal
-								contentContainerStyle={{ flex: 1, justifyContent: 'flex-end'}}
-							>
-								{!!business?.facebook_profile && (
-									<SocialNetWork
-										socialLink={business?.facebook_profile}
-										iconTitle='facebook'
-									/>
-								)}
-								{!!business?.instagram_profile && (
-									<SocialNetWork
-										socialLink={business?.instagram_profile}
-										iconTitle='instagram'
-									/>
-								)}
-								{!!business?.tiktok_profile && (
-									<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
-										<View style={styles.tiktokIcon}>
-											<OIcon
-												src={theme.images.general.tiktok}
-												style={{ width: '100%', height: '100%'}}
-											/>
-										</View>
-									</TouchableOpacity>
-								)}
-								{!!business?.pinterest_profile && (
-									<SocialNetWork
-										socialLink={business?.pinterest_profile}
-										iconTitle='pinterest'
-									/>
-								)}
-								{!!business?.whatsapp_number && (
-									<SocialNetWork
-										socialLink={business?.whatsapp_number}
-										iconTitle='whatsapp'
-									/>
-								)}
-								{!!business?.snapchat_profile && (
-									<SocialNetWork
-										socialLink={business?.snapchat_profile}
-										iconTitle='snapchat'
-									/>
-								)}
-							</SocialListWrapper>
 						</TitleWrapper>
 					)}
 				</BusinessInfoItem>
@@ -297,6 +251,65 @@ export const BusinessBasicInformation = (
 						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
 					</View>
 				)}
+				{loading ? (
+					<Placeholder Animation={Fade}>
+						<View style={{ flexDirection: 'row' }}>
+							{[...Array(5).keys()].map(i => (
+								<View style={styles.socialIcon} key={i}>
+									<PlaceholderLine width={100} height={20} style={{ marginBottom: 0 }} />
+								</View>
+							))}
+						</View>
+					</Placeholder>
+				) : (
+					<SocialListWrapper
+						showsVerticalScrollIndicator={false}
+						showsHorizontalScrollIndicator={false}
+						horizontal
+						contentContainerStyle={{ flex: 1}}
+					>
+						{!!business?.facebook_profile && (
+							<SocialNetWork
+								socialLink={business?.facebook_profile}
+								iconTitle='facebook'
+							/>
+						)}
+						{!!business?.instagram_profile && (
+							<SocialNetWork
+								socialLink={business?.instagram_profile}
+								iconTitle='instagram'
+							/>
+						)}
+						{!!business?.tiktok_profile && (
+							<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
+								<View style={styles.tiktokIcon}>
+									<OIcon
+										src={theme.images.general.tiktok}
+										style={{ width: '100%', height: '100%'}}
+									/>
+								</View>
+							</TouchableOpacity>
+						)}
+						{!!business?.pinterest_profile && (
+							<SocialNetWork
+								socialLink={business?.pinterest_profile}
+								iconTitle='pinterest'
+							/>
+						)}
+						{!!business?.whatsapp_number && (
+							<SocialNetWork
+								socialLink={business?.whatsapp_number}
+								iconTitle='whatsapp'
+							/>
+						)}
+						{!!business?.snapchat_profile && (
+							<SocialNetWork
+								socialLink={business?.snapchat_profile}
+								iconTitle='snapchat'
+							/>
+						)}
+					</SocialListWrapper>
+				)}
 				<View>
 					<BusinessInfoItem>
 						{loading && (

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
 	BusinessReviews as BusinessReviewController,
 	useLanguage,
@@ -22,6 +22,7 @@ import {
 import { BusinessReviewsParams } from '../../types';
 import { ProgressBar, TouchableRipple } from 'react-native-paper';
 import moment from 'moment';
+import { setLocalMoment } from '../../utils';
 
 const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 	const { businessState, reviewsList } = props;
@@ -99,6 +100,10 @@ const BusinessReviewsUI = (props: BusinessReviewsParams) => {
 		</View>
 	);
 
+	useEffect(() => {
+		setLocalMoment(moment, t)
+	}, [])
+
 	return (
 		<BusinessReviewsContainer>
 			<BusinessReviewContent

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

@@ -78,7 +78,6 @@ const SignupFormUI = (props: SignupParams) => {
 		handleChangeInput,
 		willVerifyOtpState,
 		setOtpState,
-		otpState,
 		setSignUpTab,
 		signUpTab,
 		useSignUpFullDetails,
@@ -120,10 +119,9 @@ const SignupFormUI = (props: SignupParams) => {
 	const [, t] = useLanguage();
 	const [, { login }] = useSession();
 	const [{ configs }] = useConfig();
-	const { control, handleSubmit, errors, register, setValue } = useForm();
+	const { control, handleSubmit, clearErrors, errors, register, unregister, setValue } = useForm();
 
 	const [passwordSee, setPasswordSee] = useState(false);
-	const [otpErrMsg, setOtpErrMsg] = useState('')
 	const [formValues, setFormValues] = useState(null);
 	const [isModalVisible, setIsModalVisible] = useState(false);
 	const [isLoadingVerifyModal, setIsLoadingVerifyModal] = useState(false);
@@ -238,6 +236,11 @@ const SignupFormUI = (props: SignupParams) => {
 		navigation.navigate('Home');
 	};
 
+	const handleSignUpTab = (tab: string) => {
+		setSignUpTab && setSignUpTab(tab)
+		clearErrors()
+	}
+
 	const onSubmit = (values?: any) => {
 		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
@@ -344,7 +347,7 @@ const SignupFormUI = (props: SignupParams) => {
 
 	const onRecaptchaVerify = (token: any) => {
 		setRecaptchaVerified(true)
-		handleReCaptcha(token)
+		handleReCaptcha && handleReCaptcha(token)
 	}
 
 	useEffect(() => {
@@ -368,15 +371,19 @@ const SignupFormUI = (props: SignupParams) => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
 		}
-	}, [errors]);
+	}, [errors])
 
 	useEffect(() => {
-		register('cellphone', {
-			required: isRequiredField('cellphone')
-				? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
-				: null
-		})
-	}, [register])
+		if (signUpTab === 'default' || signUpTab === 'otpCellphone') {
+			register('cellphone', {
+				required: isRequiredField('cellphone')
+					? t('VALIDATION_ERROR_MOBILE_PHONE_REQUIRED', 'The field Mobile phone is required').replace('_attribute_', t('CELLPHONE', 'Cellphone'))
+					: null
+			})
+		} else {
+			unregister('cellphone')
+		}
+	}, [signUpTab])
 
 	useEffect(() => {
 		if (phoneInputData?.phone?.cellphone) setValue('cellphone', phoneInputData?.phone?.cellphone, '')
@@ -415,9 +422,11 @@ const SignupFormUI = (props: SignupParams) => {
 
 	useEffect(() => {
 		if (checkPhoneCodeState?.result?.error) {
-			setOtpErrMsg((typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0]) || t('ERROR', 'Error'))
-		} else if (checkPhoneCodeState?.result?.result && checkPhoneCodeState?.result?.result?.[0] === 'VERIFICATION_CODE_WAS_SENT_TO') {
-			setOtpErrMsg(t('CODE_SENT', 'The code has been sent'))
+			setAlertState({
+				open: true,
+				title: (typeof checkPhoneCodeState?.result?.result === 'string' ? checkPhoneCodeState?.result?.result : checkPhoneCodeState?.result?.result[0].toString()) || t('ERROR', 'Error'),
+				content: []
+			})
 		}
 	}, [checkPhoneCodeState])
 
@@ -442,7 +451,7 @@ const SignupFormUI = (props: SignupParams) => {
 							ref={tabsRef}
 						>
 							<TabBtn
-								onPress={() => setSignUpTab && setSignUpTab('default')}
+								onPress={() => handleSignUpTab('default')}
 								onLayout={(event: any) => handleOnLayout(event, 'default')}
 							>
 								<OTab
@@ -466,7 +475,7 @@ const SignupFormUI = (props: SignupParams) => {
 							</TabBtn>
 							{useSignUpOtpEmail && (
 								<TabBtn
-									onPress={() => setSignUpTab && setSignUpTab('otpEmail')}
+									onPress={() => handleSignUpTab('otpEmail')}
 									onLayout={(event: any) => handleOnLayout(event, 'otpEmail')}
 								>
 									<OTab
@@ -492,7 +501,7 @@ const SignupFormUI = (props: SignupParams) => {
 							)}
 							{useSignUpOtpCellphone && (
 								<TabBtn
-									onPress={() => setSignUpTab && setSignUpTab('otpCellphone')}
+									onPress={() => handleSignUpTab('otpCellphone')}
 									onLayout={(event: any) => handleOnLayout(event, 'otpCellphone')}
 								>
 									<OTab

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

@@ -120,7 +120,7 @@ export interface SignupParams {
 	handleChangeInput?: (in1: any, in2: any) => void;
 	enableReCaptcha?: boolean;
 	generateOtpCode?: (in1?: any) => void;
-	handleReCaptcha?: () => void;
+	handleReCaptcha?: (token?: any) => void;
 	setSignUpTab?: (in1: string) => void;
 	setWillVerifyOtpState?: (in1: boolean) => void;
 	setOtpState?: (in1: string) => void;

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

@@ -40,6 +40,72 @@ export const getTraduction = (key: string) => {
   return keyList[key] ? t(key, keyList[key]) : t(key)
 }
 
+/**
+ * Change local moment variables
+ */
+ export const setLocalMoment = (moment : any, t : any) => {
+  moment.locale('custom', {
+    months: [
+      t('MONTH1','January'),
+      t('MONTH2','February'),
+      t('MONTH3','March'),
+      t('MONTH4','April'),
+      t('MONTH5','May'),
+      t('MONTH6','June'),
+      t('MONTH7','July'),
+      t('MONTH8','August'),
+      t('MONTH9','September'),
+      t('MONTH10','October'),
+      t('MONTH11','November'),
+      t('MONTH12','December')
+    ],
+    monthsShort: [
+      t('MONTHSHORT1','Jan'),
+      t('MONTHSHORT2','Feb'),
+      t('MONTHSHORT3','Mar'),
+      t('MONTHSHORT4','Apr'),
+      t('MONTHSHORT5','May'),
+      t('MONTHSHORT6','Jun'),
+      t('MONTHSHORT7','Jul'),
+      t('MONTHSHORT8','Aug'),
+      t('MONTHSHORT9','Sep'),
+      t('MONTHSHORT10','Oct'),
+      t('MONTHSHORT11','Nov'),
+      t('MONTHSHORT12','Dec')
+    ],
+    weekdays: [
+      t('DAY7','Sunday'),
+      t('DAY1','Monday'),
+      t('DAY2','Tuesday'),
+      t('DAY3','Wednesday'),
+      t('DAY4','Thursday'),
+      t('DAY5','Friday'),
+      t('DAY6','Saturday')
+    ],
+    weekdaysShort: [
+      t('DAYSHORT7','Sun'),
+      t('DAYSHORT1','Mon'),
+      t('DAYSHORT2','Tue'),
+      t('DAYSHORT3','Wed'),
+      t('DAYSHORT4','Thu'),
+      t('DAYSHORT5','Fri'),
+      t('DAYSHORT6','Sat')
+    ],
+    weekdaysMin: [
+      t('DAYMIN7','Su'),
+      t('DAYMIN1','Mo'),
+      t('DAYMIN2','Tu'),
+      t('DAYMIN3','We'),
+      t('DAYMIN4','Th'),
+      t('DAYMIN5','Fr'),
+      t('DAYMIN6','Sa')
+    ],
+    meridiem : function (hours : any) {
+      return hours < 12 ? t('AM', 'AM') : t('PM','PM');
+    }
+  })
+}
+
 /**
  * Function to convert delivery time in minutes
  * @param {string} time business delivery time