ordering-ui-react-native 0.17.49 → 0.17.50-release

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

@@ -56,7 +56,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
       if (order?.driver && !order?.user_review) {
         onNavigationRedirect('ReviewDriver', { order: order })
       } else {
-        onNavigationRedirect('MyOrders')
+        onNavigationRedirect('BottomTab', { screen: 'MyOrders' })
       }
     }
   }, [formState])
@@ -67,27 +67,39 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
         <NavBar
           title={t('REVIEW_PRODUCT', 'Review product')}
           titleAlign={'center'}
-          onActionLeft={() => onNavigationRedirect('MyOrders')}
+          onActionLeft={() => onNavigationRedirect('BottomTab', { screen: 'MyOrders' })}
           showCall={false}
           btnStyle={{ paddingLeft: 0 }}
           style={{ flexDirection: 'column', alignItems: 'flex-start' }}
           titleWrapStyle={{ paddingHorizontal: 0 }}
           titleStyle={{ marginRight: 0, marginLeft: 0 }}
         />
-        {order?.products?.map((product: any) => !product?.deleted && (
-          <SingleProductReview
-            key={product.id}
-            product={product}
-            formState={formState}
-            handleChangeFormState={handleChangeFormState}
-          />
+        {order?.products && order.products.length > 0 && order?.products.map(productsOrder => (
+          productsOrder?.length ? productsOrder?.map((product: any, i: any) => !product?.deleted ?
+            <SingleProductReview
+              key={i}
+              product={product}
+              formState={formState}
+              handleChangeFormState={handleChangeFormState}
+            /> : null
+          ) : (!productsOrder?.deleted ? (
+            <SingleProductReview
+              product={productsOrder}
+              formState={formState}
+              handleChangeFormState={handleChangeFormState}
+            />
+          ) : null
+          )
         ))}
       </ReviewProductsContainer>
 
       <FloatingBottomContainer>
         <ActionContainer>
           <SkipButton
-            onPress={() => (order?.driver && !order?.user_review) ? onNavigationRedirect('ReviewDriver', { order: order }) : onNavigationRedirect('MyOrders')}
+            onPress={() => (order?.driver && !order?.user_review) ?
+              onNavigationRedirect('ReviewDriver', { order: order }) :
+              onNavigationRedirect('BottomTab', { screen: 'MyOrders' })
+            }
           >
             <OText weight={700} size={18} color={theme.colors.textNormal}>{t('FRONT_VISUALS_SKIP', 'Skip')}</OText>
           </SkipButton>
@@ -95,7 +107,7 @@ const ReviewProductsUI = (props: ReviewProductParams) => {
             textStyle={{ color: theme.colors.white, paddingRight: 10 }}
             text={order?.driver && !order?.user_review ? t('CONTINUE', 'Continue') : t('SEND_REVIEW', 'Send Review')}
             style={{ borderRadius: 8 }}
-			      imgRightSrc={theme.images.general.arrow_right}
+            imgRightSrc={theme.images.general.arrow_right}
             imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
             isDisabled={formState.loading || formState?.changes?.length === 0}
             onClick={() => handleContinueClick()}

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

@@ -8,7 +8,8 @@ import {
   FormReviews,
   ActionContainer,
   RatingStarContainer,
-  PlacedDate
+  PlacedDate,
+  MultiLogosContainer
 } from './styles'
 import { OButton, OIcon, OText } from '../shared'
 import { StyleSheet, View, I18nManager } from 'react-native';
@@ -79,13 +80,30 @@ export const ReviewTrigger = (props: any) => {
     <>
       <ReviewOrderContainer>
         <BusinessLogo>
-          <View style={styles.logoWrapper}>
-            <OIcon
-              url={order?.logo}
-              width={80}
-              height={80}
-            />
-          </View>
+          {typeof order?.logo === 'string' || !order?.logo ? (
+            <View style={styles.logoWrapper}>
+              <OIcon
+                url={order?.logo}
+                width={80}
+                height={80}
+              />
+            </View>
+          ) : (
+            <MultiLogosContainer>
+              {order?.logo?.map((logo : string, i : number) => (
+                <React.Fragment key={logo}>
+                  <View style={styles.logoWrapper}>
+                    <OIcon
+                      url={logo}
+                      width={80}
+                      height={80}
+                    />
+                  </View>
+                </React.Fragment>
+              ))}
+            </MultiLogosContainer>
+
+          )}
         </BusinessLogo>
         {!!order?.business_name && <OText style={{ textAlign: 'center', marginTop: 15 }} color={theme.colors.textNormal}>{order?.business_name}</OText>}
         <View style={{ flex: 1, justifyContent: 'flex-end' }}>
@@ -115,4 +133,4 @@ export const ReviewTrigger = (props: any) => {
       </FloatingBottomContainer>
     </>
   )
-}
+}

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

@@ -31,4 +31,11 @@ export const RatingStarContainer = styled.View`
 `
 export const PlacedDate = styled.View`
   margin-top: 30px;
-`
+`
+
+export const MultiLogosContainer = styled.View`
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  width: 100%;
+`

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react'
+import { Platform, View } from 'react-native'
+import { useLanguage } from 'ordering-components/native';
+import { useTheme } from 'styled-components/native';
+
+import {
+	Accordion,
+	AccordionSection,
+	DropdownWrapper,
+} from './styles'
+import { OIcon, OText } from '../shared';
+
+export const ScheduleAccordion = (props: any) => {
+
+	const {
+		scheduleFormatted,
+		schedule,
+		weekIndex
+	} = props
+
+	const [isActive, setActiveState] = useState(false)
+	const [, t] = useLanguage()
+	const theme = useTheme();
+
+	const daysOfWeek = [
+		t('DAY7', 'Sunday'),
+		t('DAY1', 'Monday'),
+		t('DAY2', 'Tuesday'),
+		t('DAY3', 'Wednesday'),
+		t('DAY4', 'Thursday'),
+		t('DAY5', 'Friday'),
+		t('DAY6', 'Saturday'),
+	];
+
+	return (
+		<AccordionSection>
+			<Accordion
+				onPress={() => setActiveState(!isActive)}
+				activeOpacity={1}
+			>
+				<DropdownWrapper>
+					<OText
+						mBottom={16}
+						mRight={8}
+						lineHeight={21}
+						size={14}
+						weight={Platform.OS === 'android' ? 'bold' : '600'}
+					>{daysOfWeek[weekIndex]}</OText>
+					<OIcon src={theme.images.general.arrow_down} color={theme.colors.textNormal} width={8} />
+				</DropdownWrapper>
+				<View style={{ display: isActive ? 'flex' : 'none', paddingStart: 20 }}>
+					{schedule?.lapses?.map((lapse: any) => (
+						schedule?.enabled ?
+							<OText mBottom={16}>
+								{scheduleFormatted(lapse.open) +
+									' - ' +
+									scheduleFormatted(lapse.close)}
+							</OText>
+							:
+							<OText color={theme.colors.red} mBottom={16}>
+								{t('CLOSED', 'Closed')}
+							</OText>
+					))}
+				</View>
+			</Accordion>
+		</AccordionSection>
+	)
+}

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

@@ -0,0 +1,14 @@
+import styled from 'styled-components/native'
+
+export const AccordionSection = styled.View`
+  background: #FFF;
+`
+
+export const Accordion = styled.TouchableOpacity`
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+export const DropdownWrapper = styled.View`
+  flex-direction: row;
+`

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useTheme } from 'styled-components/native'
-import { Platform, View, StyleSheet, Dimensions, ScrollView, TouchableOpacity } from 'react-native'
+import { Platform, View, StyleSheet, Dimensions, ScrollView, TouchableOpacity, Text } from 'react-native'
 import { OText, OButton, OModal, OIcon } from '../shared'
 import FastImage from 'react-native-fast-image'
 import IconAntDesign from 'react-native-vector-icons/AntDesign'
@@ -11,6 +11,8 @@ import FeatherIcon from 'react-native-vector-icons/Feather';
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ServiceFormParams } from '../../types'
 import { Placeholder, PlaceholderLine, Fade } from 'rn-placeholder';
+import uuid from 'react-native-uuid';
+import { orderTypeList } from '../../utils'
 
 import {
   ProductForm as ProductFormController,
@@ -45,7 +47,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     maxProductQuantity,
     onClose,
     professionalListState,
-    isCartProduct
+    isCartProduct,
+    actionStatus,
+    handleCreateGuestUser
   } = props
 
   const theme = useTheme()
@@ -65,6 +69,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
   const [isOpen, setIsOpen] = useState(false)
   const [currentProfessional, setCurrentProfessional] = useState<any>(null)
 
+  const guestCheckoutEnabled = configs?.guest_checkout_enabled?.value === '1'
+  const orderTypeEnabled = !orderTypeList[orderState?.options?.type - 1] || configs?.allowed_order_types_guest_checkout?.value?.includes(orderTypeList[orderState?.options?.type - 1])
+
   const dropdownRef = useRef<any>(null)
 
   const styles = StyleSheet.create({
@@ -103,17 +110,41 @@ const ServiceFormUI = (props: ServiceFormParams) => {
       height: 40,
       marginBottom: 30
     },
+    dropDownRow: {
+      color: theme.colors.primary,
+      fontSize: 14,
+      marginHorizontal: 0
+    },
     professionalList: {
       paddingHorizontal: 40,
-      paddingVertical: 30
+      paddingVertical: 30,
     }
   })
 
-  const isBusyTime = (professional: any) => {
-    if (professional?.busy_times?.length === 0 || !dateSelected) return false
-    const valid = professional?.busy_times.some((item: any) => {
-      return moment(item?.start).valueOf() <= moment(dateSelected).valueOf() &&
-        moment(dateSelected).valueOf() <= moment(item?.end).valueOf()
+  const getMomentTime = (time) => {
+    const _moment = moment(`${moment(selectDate).format('YYYY-MM-DD')} ${time}`, 'YYYY-MM-DD HH:mm').toDate()
+    return _moment
+  }
+
+  const isBusyTime = (professional, selectedMoment) => {
+    if (!selectedMoment) return false
+    const startDay = moment(selectedMoment).utc().format('d')
+    const isStartScheduleEnabled = professional?.schedule?.[startDay]?.enabled
+    const duration = product?.duration ?? 0
+    const endDay = moment(selectedMoment).add(duration - 1, 'minutes').utc().format('d')
+    const isEndScheduleEnabled = professional?.schedule?.[endDay]?.enabled
+    if (!isStartScheduleEnabled || !isEndScheduleEnabled) return true
+
+    if (professional?.busy_times?.length === 0) return false
+
+    const busyTimes = isCartProduct
+      ? professional?.busy_times.filter(item => !(item.start === productCart?.calendar_event?.start && item.end === productCart?.calendar_event?.end))
+      : [...professional?.busy_times]
+    const valid = busyTimes.some(item => {
+      return (moment.utc(item?.start).local().valueOf() <= moment(selectedMoment).valueOf() &&
+        moment(selectedMoment).valueOf() < moment.utc(item?.end).local().valueOf()) ||
+        (moment.utc(item?.start).local().valueOf() < moment(selectedMoment).add(duration, 'minutes').valueOf() &&
+        moment(selectedMoment).add(duration, 'minutes').valueOf() < moment.utc(item?.end).local().valueOf())
     })
     return valid
   }
@@ -134,6 +165,11 @@ const ServiceFormUI = (props: ServiceFormParams) => {
     )
   }
 
+  const handleUpdateGuest = () => {
+		const guestToken = uuid.v4()
+		if (guestToken) handleCreateGuestUser({ guest_token: guestToken })
+	}
+
   const customDayHeaderStylesCallback = () => {
     return {
       textStyle: {
@@ -365,9 +401,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                         size={12}
                         weight={'400'}
                         lineHeight={17}
-                        color={isBusyTime(currentProfessional) ? theme.colors.danger5 : theme.colors.success500}
+                        color={isBusyTime(currentProfessional, dateSelected) ? theme.colors.danger5 : theme.colors.success500}
                       >
-                        {isBusyTime(currentProfessional)
+                        {isBusyTime(currentProfessional, dateSelected)
                           ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
                           : t('AVAILABLE', 'Available')
                         }
@@ -447,10 +483,12 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       paddingTop: 8,
                       paddingHorizontal: 12
                     }}
-                    rowTextStyle={{
-                      color: theme.colors.disabled,
-                      fontSize: 14,
-                      marginHorizontal: 0
+                    renderCustomizedRowChild={(item, index) => {
+                      return (
+                        <Text style={[styles.dropDownRow, { color: isBusyTime(currentProfessional, getMomentTime(item.value)) ? theme.colors.lightGray : theme.colors.primary } ]}>
+                          {item.text}
+                        </Text>
+                      )
                     }}
                     renderDropdownIcon={() => dropDownIcon()}
                     dropdownOverlayColor='transparent'
@@ -523,7 +561,7 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                       ? t('SOLD_OUT', 'Sold out')
                       : t('BOOK', 'Book'))}
                   style={styles.buttonStyle}
-                  isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected}
+                  isDisabled={isSoldOut || maxProductQuantity <= 0 || !currentProfessional?.id || !dateSelected || isBusyTime(currentProfessional, dateSelected)}
                   textStyle={{ fontSize: 14, color: theme.colors.white }}
                 />
               )}
@@ -557,6 +595,17 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                   }}
                 />
               )}
+              {!auth && guestCheckoutEnabled && orderTypeEnabled &&  (
+                <TouchableOpacity style={{ marginTop: 10 }} onPress={handleUpdateGuest}>
+                  {actionStatus?.loading ? (
+                    <Placeholder Animation={Fade}>
+                      <PlaceholderLine width={60} height={20} />
+                    </Placeholder>
+                  ) : (
+                    <OText color={theme.colors.primary} size={13}>{t('WITH_GUEST_USER', 'With Guest user')}</OText>
+                  )}
+                </TouchableOpacity>
+              )}
           </ButtonWrapper>
         </Container>
       )}
@@ -610,9 +659,9 @@ const ServiceFormUI = (props: ServiceFormParams) => {
                     size={12}
                     weight={'400'}
                     lineHeight={17}
-                    color={isBusyTime(professional) ? theme.colors.danger5 : theme.colors.success500}
+                    color={isBusyTime(professional, dateSelected) ? theme.colors.danger5 : theme.colors.success500}
                   >
-                    {isBusyTime(professional)
+                    {isBusyTime(professional, dateSelected)
                       ? t('BUSY_ON_SELECTED_TIME', 'Busy on selected time')
                       : t('AVAILABLE', 'Available')
                     }

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, TouchableOpacity } from 'react-native'
+import { View, TouchableOpacity, Platform } from 'react-native'
 import { useLanguage, useSession, useUtils, Sessions as SessionsController } from 'ordering-components/native'
 import NavBar from '../NavBar'
 import { SessionsParams } from '../../types'
@@ -12,7 +12,8 @@ import AntIcon from 'react-native-vector-icons/AntDesign'
 import {
   SessionsWrapper,
   SessionItem,
-  DurationWrapper
+  DurationWrapper,
+  Container
 } from './styles'
 
 export const SessionsUI = (props: SessionsParams) => {
@@ -27,7 +28,7 @@ export const SessionsUI = (props: SessionsParams) => {
   const [, t] = useLanguage()
   const [{ user }] = useSession()
   const [{ parseDate }] = useUtils()
-	const theme = useTheme()
+  const theme = useTheme()
   const [confirm, setConfirm] = useState<any>({ open: false, content: null, handleOnAccept: null, id: null, title: null })
   const goToBack = () => navigation?.canGoBack() && navigation.goBack()
 
@@ -61,7 +62,9 @@ export const SessionsUI = (props: SessionsParams) => {
   }
 
   return (
-    <>
+    <Container
+      pdng={Platform.OS === 'ios' ? '10px' : '0'}
+    >
       <NavBar
         title={t('SESSIONS', 'Sessions')}
         titleAlign={'center'}
@@ -77,11 +80,11 @@ export const SessionsUI = (props: SessionsParams) => {
               <SessionItem key={i}>
                 <Placeholder Animation={Fade}>
                   <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                    <View style={{ flex: 1}}>
+                    <View style={{ flex: 1 }}>
                       <PlaceholderLine width={40} />
                       <PlaceholderLine width={40} />
                     </View>
-                    <PlaceholderLine width={5}/>
+                    <PlaceholderLine width={5} />
                   </View>
                 </Placeholder>
               </SessionItem>
@@ -120,7 +123,7 @@ export const SessionsUI = (props: SessionsParams) => {
                   style={{ borderRadius: 7.6, marginTop: 20 }}
                 />
               </SessionsWrapper>
-             ) : (
+            ) : (
               <OText>{t('YOU_DONT_HAVE_ANY_SESSIONS', 'You don\'t have any sessions')}</OText>
             )
           )}
@@ -147,7 +150,7 @@ export const SessionsUI = (props: SessionsParams) => {
         onCancel={() => setConfirm({ ...confirm, open: false, title: null })}
         onClose={() => setConfirm({ ...confirm, open: false, title: null })}
       />
-    </>
+    </Container>
   )
 }
 

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

@@ -13,3 +13,8 @@ export const SessionItem = styled.View`
 export const DurationWrapper = styled.View`
   /* flex-direction: row; */
 `
+
+export const Container = styled.View`
+  padding-top: ${(props: any) => props.pdng};
+  margin-bottom: 50px;
+`

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

@@ -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,
@@ -37,7 +38,7 @@ import Alert from '../../../../../src/providers/AlertProvider'
 import { OText, OButton, OInput } from '../shared';
 import { OModal } from '../../../../../src/components/shared';
 import { SignupParams } from '../../types';
-import { sortInputFields } from '../../utils';
+import { sortInputFields, vibrateApp } from '../../utils';
 import { GoogleLogin } from '../GoogleLogin';
 import { AppleLogin } from '../AppleLogin';
 
@@ -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,6 +255,7 @@ const SignupFormUI = (props: SignupParams) => {
 	const onSubmit = (values?: any) => {
 		if (phoneInputData.error && signUpTab !== 'otpEmail') {
 			showToast(ToastType.Error, phoneInputData.error);
+			vibrateApp()
 			return;
 		}
 		if (
@@ -262,6 +273,7 @@ const SignupFormUI = (props: SignupParams) => {
 					'The field Mobile phone is required.',
 				),
 			);
+			vibrateApp()
 			return;
 		}
 		if (signUpTab === 'otpEmail' || signUpTab === 'otpCellphone') {
@@ -320,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) => {
@@ -330,6 +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')))
+			vibrateApp()
 		}
 	}
 
@@ -337,10 +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'));
+			vibrateApp()
 			return
 		}
 		if (!recaptchaConfig?.baseUrl) {
 			showToast(ToastType.Error, t('NO_RECAPTCHA_BASE_URL', 'The config doesn\'t have recaptcha base url'));
+			vibrateApp()
 			return
 		}
 		recaptchaRef.current.open()
@@ -384,10 +399,13 @@ const SignupFormUI = (props: SignupParams) => {
 					baseUrl: configs?.security_recaptcha_base_url?.value || null
 				})
 				showToast(ToastType.Info, t('TRY_AGAIN', 'Please try again'))
+				vibrateApp()
 				return
 			}
-			formState.result?.result &&
-				showToast(ToastType.Error, formState.result?.result[0]);
+			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]);
@@ -395,6 +413,7 @@ const SignupFormUI = (props: SignupParams) => {
 	useEffect(() => {
 		if (Object.keys(errors).length > 0) {
 			setIsLoadingVerifyModal(false);
+			vibrateApp()
 		}
 	}, [errors])
 
@@ -423,6 +442,7 @@ const SignupFormUI = (props: SignupParams) => {
 						? verifyPhoneState?.result?.result
 						: verifyPhoneState?.result?.result[0];
 				verifyPhoneState.result?.result && showToast(ToastType.Error, message);
+				verifyPhoneState.result?.result && vibrateApp()
 				setIsLoadingVerifyModal(false);
 				return;
 			}
@@ -457,16 +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 }}
-				style={{ flexDirection: 'column', alignItems: 'flex-start' }}
-				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>
@@ -579,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'
@@ -886,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)) &&
@@ -918,7 +941,7 @@ const SignupFormUI = (props: SignupParams) => {
 										(
 											<FacebookLogin
 												notificationState={notificationState}
-												handleErrors={(err: any) => showToast(ToastType.Error, err)}
+												handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 												handleLoading={(val: boolean) => setIsFBLoading(val)}
 												handleSuccessFacebookLogin={handleSuccessFacebook}
 											/>
@@ -927,7 +950,7 @@ const SignupFormUI = (props: SignupParams) => {
 										<GoogleLogin
 											notificationState={notificationState}
 											webClientId={configs?.google_login_client_id?.value}
-											handleErrors={(err: any) => showToast(ToastType.Error, err)}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessGoogleLogin={handleSuccessFacebook}
 										/>
@@ -935,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)}
+											handleErrors={(err: any) => { showToast(ToastType.Error, err), vibrateApp() }}
 											handleLoading={(val: boolean) => setIsFBLoading(val)}
 											handleSuccessAppleLogin={handleSuccessFacebook}
 										/>