ordering-ui-react-native 0.17.75 → 0.17.76-release

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity, Vibration } from 'react-native';
+import { View, Pressable, StyleSheet, Linking, Platform, TouchableOpacity } from 'react-native';
 import { useForm, Controller } from 'react-hook-form';
 import Spinner from 'react-native-loading-spinner-overlay';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -8,6 +8,7 @@ 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 ReactNativeHapticFeedback from "react-native-haptic-feedback";
 
 import {
 	SignupForm as SignUpController,
@@ -83,7 +84,8 @@ const SignupFormUI = (props: SignupParams) => {
 		signUpTab,
 		useSignUpFullDetails,
 		useSignUpOtpEmail,
-		useSignUpOtpCellphone
+		useSignUpOtpCellphone,
+		isGuest
 	} = props;
 
 	const theme = useTheme();
@@ -163,6 +165,14 @@ const SignupFormUI = (props: SignupParams) => {
 		})
 	}
 
+	const vibrateApp = (impact?: string) => {
+		const options = {
+			enableVibrateFallback: true,
+			ignoreAndroidSystemSettings: false
+		};
+		ReactNativeHapticFeedback.trigger(impact || "impactLight", options);
+	}
+
 	const handleRefs = (ref: any, code: string) => {
 		switch (code) {
 			case 'name': {
@@ -245,7 +255,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const onSubmit = (values?: any) => {
 		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (
@@ -263,7 +273,7 @@ const SignupFormUI = (props: SignupParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
-			Vibration.vibrate()
+			vibrateApp()
 			return;
 		}
 		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
@@ -322,7 +332,7 @@ const SignupFormUI = (props: SignupParams) => {
 	};
 
 	const handleChangeInputEmail = (value: string, onChange: any) => {
-		onChange(value.toLowerCase().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
+		onChange(value.toLowerCase().trim().replace(/[&,()%";:ç?<>{}\\[\]\s]/g, ''));
 	};
 
 	const handleOpenTermsUrl = async (url: any) => {
@@ -332,7 +342,7 @@ const SignupFormUI = (props: SignupParams) => {
 			await Linking.openURL(url);
 		} else {
 			showToast(ToastType.Error, t('VALIDATION_ERROR_ACTIVE_URL', 'The _attribute_ is not a valid URL.').replace('_attribute_', t('URL', 'URL')))
-			Vibration.vibrate()
+			vibrateApp()
 		}
 	}
 
@@ -340,12 +350,12 @@ const SignupFormUI = (props: SignupParams) => {
 		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
 		}
 		recaptchaRef.current.open()
@@ -389,11 +399,13 @@ const SignupFormUI = (props: SignupParams) => {
 					baseUrl: configs?.security_recaptcha_base_url?.value || null
 				})
 				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
-				Vibration.vibrate()
+				vibrateApp()
 				return
 			}
-			formState.result?.result && showToast(ToastType.Error, formState.result?.result[0]);
-			formState.result?.result && Vibration.vibrate()
+			formState.result?.result && formState.result?.result[0]?.includes("_") ?
+				showToast(ToastType.Error, t(`${formState.result?.result[0]}`, 'Phone number already used')) :
+				showToast(ToastType.Error, formState.result?.result[0])
+			formState.result?.result && vibrateApp()
 			setIsLoadingVerifyModal(false);
 		}
 	}, [formState]);
@@ -401,7 +413,7 @@ const SignupFormUI = (props: SignupParams) => {
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
-			Vibration.vibrate()
+			vibrateApp()
 		}
 	}, [errors])
 
@@ -430,7 +442,7 @@ const SignupFormUI = (props: SignupParams) => {
 						? 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;
 			}
@@ -465,15 +477,19 @@ const SignupFormUI = (props: SignupParams) => {
 
 	return (
 		<View>
-			<NavBar
-				title={t('SIGNUP', 'Signup')}
-				titleAlign={'center'}
-				onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
-				showCall={false}
-				btnStyle={{ paddingLeft: 0 }}
-				titleWrapStyle={{ paddingHorizontal: 0 }}
-				titleStyle={{ marginLeft: 0, marginRight: 0 }}
-			/>
+			{isGuest ? (
+				<OText style={{ textAlign: 'center', marginBottom: 10 }} size={18}>{t('SIGNUP', 'Signup')}</OText>
+			) : (
+				<NavBar
+					title={t('SIGNUP', 'Signup')}
+					titleAlign={'center'}
+					onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+					showCall={false}
+					btnStyle={{ paddingLeft: 0 }}
+					titleWrapStyle={{ paddingHorizontal: 0 }}
+					titleStyle={{ marginLeft: 0, marginRight: 0 }}
+				/>
+			)}
 			<FormSide>
 				{((Number(useSignUpFullDetails) + Number(useSignUpOtpEmail) + Number(useSignUpOtpCellphone)) > 1) && (
 					<SignupWith>
@@ -586,7 +602,7 @@ const SignupFormUI = (props: SignupParams) => {
 												control={control}
 												render={({ onChange, value }: any) => (
 													<OInput
-														placeholder={t(field.name)}
+														placeholder={t(field.name?.replace(/\s/g, '_')?.toUpperCase(), field.name)}
 														style={style.inputStyle}
 														icon={
 															field.code === 'email'
@@ -893,7 +909,7 @@ const SignupFormUI = (props: SignupParams) => {
 						</View>
 					)
 				}
-				{configs && Object.keys(configs).length > 0 && (
+				{configs && Object.keys(configs).length > 0 && !isGuest && (
 					(((configs?.facebook_login?.value === 'true' || configs?.facebook_login?.value === '1') && configs?.facebook_id?.value && facebookLoginEnabled) ||
 						((configs?.google_login_client_id?.value !== '' && configs?.google_login_client_id?.value !== null) && googleLoginEnabled) ||
 						((configs?.apple_login_client_id?.value !== '' && configs?.apple_login_client_id?.value !== null) && appleLoginEnabled)) &&
@@ -925,7 +941,7 @@ const SignupFormUI = (props: SignupParams) => {
 										(
 											<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}
 											/>
@@ -934,7 +950,7 @@ const SignupFormUI = (props: SignupParams) => {
 										<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}
 										/>
@@ -942,7 +958,7 @@ const SignupFormUI = (props: SignupParams) => {
 									{(configs?.apple_login_client_id?.value !== '' && configs?.apple_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}
 										/>

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

@@ -1,16 +1,18 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
   SingleOrderCard as SingleOrderCardController,
   useUtils,
   useOrder,
   useLanguage
 } from 'ordering-components/native';
+import FastImage from 'react-native-fast-image'
 import { StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OButton } from '../shared';
 import { SingleOrderCardParams } from '../../types';
 import { OAlert } from '../../../../../src/components/shared'
-
+import { OrderEta } from '../OrderDetails/OrderEta'
+import { useIsFocused } from '@react-navigation/native';
 import {
   InnerContainer,
   Logo,
@@ -44,12 +46,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   const [, t] = useLanguage();
   const [{ carts }] = useOrder()
   const theme = useTheme();
+  const isFocused = useIsFocused();
 
-  const [reorderSelected, setReorderSelected] = useState<number | null>(null);
+  let [reorderSelected, setReorderSelected] = useState<number | null>(null);
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const [isPressed, setIsPressed] = useState(false)
 
-  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12];
+  const allowedOrderStatus = [1, 2, 5, 6, 10, 11, 12, 15];
 
   const styles = StyleSheet.create({
     container: {
@@ -84,9 +87,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       marginRight: 2,
     },
     reorderLoading: {
-      width: 80,
-      height: 40,
-      borderRadius: 10,
+      height: 23,
+      paddingLeft: 20,
+      paddingRight: 20,
+      borderRadius: 23,
+      shadowOpacity: 0,
+      backgroundColor: theme.colors.primary,
+      borderWidth: 0,
     },
     reorderbutton: {
       height: 23,
@@ -124,19 +131,29 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
   });
 
   const handleReorderClick = (order: any) => {
-    if (carts[`businessId:${order?.business_id}`] && carts[`businessId:${order?.business_id}`]?.products?.length > 0) {
+    setReorderSelected(null)
+    reorderSelected = null
+    const isMultiOrders = Array.isArray(order?.id)
+
+    const isRemoveCart = isMultiOrders
+      ? order?.business_id?.some((businessId: any) => !!carts[`businessId:${businessId}`]?.uuid)
+      : carts[`businessId:${order?.business_id}`] && !!carts[`businessId:${order?.business_id}`]?.uuid
+
+    if (isRemoveCart) {
       setConfirm({
         open: true,
         content: [t('QUESTION_DELETE_PRODUCTS_FROM_CART', 'Are you sure that you want to delete all products from cart?')],
         title: t('ORDER', 'Order'),
         handleOnAccept: async () => {
-          handleRemoveCart()
+          handleRemoveCart(order)
           setConfirm({ ...confirm, open: false })
         }
       })
     } else {
-      setReorderSelected(order?.id);
-      handleReorder && handleReorder(order?.id);
+      const orderId = Array.isArray(order?.id) ? order?.id[0] : order?.id
+      setReorderSelected(orderId)
+      reorderSelected = orderId
+      handleReorder && handleReorder(order?.id)
     }
   };
 
@@ -147,7 +164,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           order: {
             id: order?.id,
             business_id: order?.business_id,
-            logo: order?.business?.length > 1 ? order?.business?.map?.((business : any) => business?.logo): order?.business?.logo,
+            logo: order?.business?.length > 1 ? order?.business?.map?.((business: any) => business?.logo) : order?.business?.logo,
             driver: order?.driver,
             products: order?.products,
             review: order?.review,
@@ -170,7 +187,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
       handleClickOrder(order?.uuid)
       return
     }
-    if (order?.cart_group_id){
+    if (order?.cart_group_id) {
       onNavigationRedirect?.('MultiOrdersDetails', { orderId: order?.cart_group_id });
     } else {
       onNavigationRedirect?.('OrderDetails', { orderId: order?.uuid });
@@ -183,10 +200,21 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
 
   const handleOriginalReorder = () => {
     setConfirm({ ...confirm, open: false, title: null })
-    setReorderSelected(order?.id);
-    handleReorder && handleReorder(order?.id);
   }
 
+  const hideBusinessLogo = theme?.orders?.components?.business_logo?.hidden
+  const hideDate = theme?.orders?.components?.date?.hidden
+  const hideBusinessName = theme?.orders?.components?.business_name?.hidden
+  const hideOrderNumber = theme?.orders?.components?.order_number?.hidden
+  const hideReviewOrderButton = theme?.orders?.components?.review_order_button?.hidden
+  const hideReorderButton = theme?.orders?.components?.reorder_button?.hidden
+  const hideFavorite = theme?.orders?.components?.favorite?.hidden
+  const hideOrderStatus = theme?.orders?.components?.order_status?.hidden
+
+  useEffect(() => {
+    if (isFocused) setReorderSelected(null)
+  }, [isFocused])
+
   return (
     <>
       <CardAnimation
@@ -194,35 +222,39 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
         style={[styles.container]}
       >
         <InnerContainer>
-          {(!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
+          {!hideBusinessLogo && (!!order.business?.logo || theme?.images?.dummies?.businessLogo) && (
             <>
               {order?.business?.length > 1 ? (
                 <MultiLogosContainer>
-                  {order?.business?.map((business: any, i: number) => (
-                    <View key={business?.id}>
-                      {i > 1 ? (
-                        <>
-                          {console.log(order?.business?.length - 2)}
-                        <OText mRight={3}> + {order?.business?.length - 2}</OText>
-                        </>
-                      ) : (
-                        <Logo style={styles.logoWrapper} isMulti>
-                          <OIcon
-                            url={optimizeImage(business?.logo, 'h_300,c_limit')}
-                            src={optimizeImage(!business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
-                            style={styles.minilogo}
-                          />
-                        </Logo>
-                      )}
-                    </View>
+                  {order?.business?.map((business: any, i: number) => i < 2 && (
+                    <Logo
+                      isMulti
+                      key={business?.id}
+                      style={styles.logoWrapper}
+                    >
+                      <FastImage
+                        style={styles.minilogo}
+                        source={business?.logo ? {
+                          uri: optimizeImage(business?.logo, 'h_300,c_limit'),
+                          priority: FastImage.priority.normal,
+                        } : theme?.images?.dummies?.businessLogo}
+                        resizeMode={FastImage.resizeMode.contain}
+                      />
+                    </Logo>
                   ))}
+                  {order?.business?.length > 1 && (order?.business?.length - 2) > 0 && (
+                    <OText mRight={3}> + {order?.business?.length - 2}</OText>
+                  )}
                 </MultiLogosContainer>
               ) : (
                 <Logo style={styles.logoWrapper}>
-                  <OIcon
-                    url={optimizeImage(order.business?.logo, 'h_300,c_limit')}
-                    src={optimizeImage(!order.business?.logo && theme?.images?.dummies?.businessLogo, 'h_300,c_limit')}
+                  <FastImage
                     style={styles.logo}
+                    source={order.business?.logo ? {
+                      uri: optimizeImage(order.business?.logo, 'h_300,c_limit'),
+                      priority: FastImage.priority.normal,
+                    } : theme?.images?.dummies?.businessLogo}
+                    resizeMode={FastImage.resizeMode.contain}
                   />
                 </Logo>
               )}
@@ -230,11 +262,13 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
           )}
           <CardInfoWrapper>
             <ContentHeader>
-              <View style={{ flex: 1 }}>
-                <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
-                  {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
-                </OText>
-              </View>
+              {(order?.business?.length > 1 && !hideOrderNumber) || (!order?.business?.length && !hideBusinessName) && (
+                <View style={{ flex: 1 }}>
+                  <OText size={12} lineHeight={18} weight={'600'} numberOfLines={1} ellipsizeMode={'tail'}>
+                    {order?.business?.length > 1 ? `${t('GROUP_ORDER', 'Group Order')} ${t('No', 'No')}. ${order?.cart_group_id}` : order.business?.name}
+                  </OText>
+                </View>
+              )}
               {!!!pastOrders && (
                 <>
                   {isMessageView ? (
@@ -258,8 +292,9 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
               )}
               {!!pastOrders && (
                 <ButtonWrapper>
-                  {allowedOrderStatus.includes(parseInt(order?.status)) &&
-                    !order.review && (
+                  {!hideReviewOrderButton &&
+                    allowedOrderStatus.includes(parseInt(order?.status)) &&
+                    !order.review && order?.cart && (
                       <TouchableOpacity
                         onPress={() => handleClickOrderReview(order)}
                         style={styles.reviewButton}>
@@ -268,7 +303,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                         </OText>
                       </TouchableOpacity>
                     )}
-                  {order.cart && (
+                  {!hideReorderButton && typeof order?.id === 'number' && order?.cart && (
                     <OButton
                       text={t('REORDER', 'Reorder')}
                       imgRightSrc={''}
@@ -288,7 +323,7 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
             <ContentFooter>
               <View style={{ flex: 1 }}>
                 <View style={styles.infoText}>
-                  {(!!!pastOrders || order?.business?.length > 1) && (
+                  {(!!!pastOrders || order?.business?.length > 1) && !hideOrderNumber && (
                     <>
                       <OText
                         size={10}
@@ -311,33 +346,37 @@ const SingleOrderCardUI = (props: SingleOrderCardParams) => {
                       </OText>
                     </>
                   )}
+                  {!hideDate && (
+                    <OText
+                      size={10}
+                      lineHeight={15}
+                      color={theme.colors.textSecondary}
+                      style={{ marginVertical: 3 }}
+                      numberOfLines={1}>
+                      {
+                        pastOrders
+                          ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
+                          : <OrderEta order={order} />
+                      }
+                    </OText>
+                  )}
+                </View>
+                {!hideOrderStatus && (
                   <OText
+                    color={theme.colors.primary}
                     size={10}
                     lineHeight={15}
-                    color={theme.colors.textSecondary}
-                    style={{ marginVertical: 3 }}
                     numberOfLines={1}>
-                    {
-                      pastOrders
-                        ? order?.delivery_datetime_utc ? parseDate(order?.delivery_datetime_utc) : parseDate(order?.delivery_datetime, { utc: false })
-                        : order?.eta_time + 'min'
-                    }
+                    {getOrderStatus(order.status)?.value}
                   </OText>
-                </View>
-                <OText
-                  color={theme.colors.primary}
-                  size={10}
-                  lineHeight={15}
-                  numberOfLines={1}>
-                  {getOrderStatus(order.status)?.value}
-                </OText>
+                )}
               </View>
-              {!isMessageView && !order?.business?.length && (
+              {!isMessageView && !order?.business?.length && !hideFavorite && (
                 <LottieAnimation
                   type='favorite'
                   onClick={handleChangeFavorite}
-                  initialValue={order?.favorite ? 0.75 : 0}
-                  toValue={order?.favorite ? 0 : 0.75}
+                  initialValue={order?.favorite ? 0.5 : 0}
+                  toValue={order?.favorite ? 0 : 0.5}
                   style={{ marginBottom: 5 }}
                   iconProps={{ color: theme.colors.danger5, size: 16, style: { top: 7 } }}
                   isActive={order?.favorite}

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

@@ -19,7 +19,7 @@ export const CardInfoWrapper = styled.View`
 
 export const ContentHeader = styled.View`
   flex-direction: row;
-  justify-content: space-between;
+  justify-content: flex-end;
 `
 
 export const ButtonWrapper = styled.View`