ordering-ui-react-native 0.16.52 → 0.16.55

package/package.json

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

package/themes/business/src/components/DriverSchedule/index.tsx

@@ -1,13 +1,15 @@
-import React from 'react'
-import { View } from 'react-native'
+import React, { useState } from 'react'
+import { RefreshControl, ScrollView, View } from 'react-native'
 import { OText } from '../shared'
-import { useLanguage } from 'ordering-components/native'
+import { useLanguage, useSession } from 'ordering-components/native'
 import { DayContainer } from './styles'
 import { useTheme } from 'styled-components/native'
-export const DriverSchedule = (props : any) => {
+export const DriverSchedule = (props: any) => {
     const { schedule } = props
     const [, t] = useLanguage()
     const theme = useTheme()
+    const [, { refreshUserInfo }] = useSession()
+    const [refreshing] = useState(false);
 
     const daysOfWeek = [
         t('SUNDAY_ABBREVIATION', 'Sun'),
@@ -25,30 +27,45 @@ export const DriverSchedule = (props : any) => {
     }
 
     return (
-        <View >
-            <OText size={24} style={{paddingLeft: 30}}>
+        <ScrollView
+            refreshControl={<RefreshControl
+                refreshing={refreshing}
+                onRefresh={() => refreshUserInfo()}
+            />}
+        >
+            <OText size={24} style={{ paddingLeft: 30 }}>
                 {t('SCHEDULE', 'Schedule')}
             </OText>
-            <View style={{padding: 30}}>
+            <View style={{ padding: 30 }}>
                 {schedule.map((item: any, i: number) => (
                     <DayContainer key={daysOfWeek[i]}>
-                        <OText style={{width: '20%'}} size={22} weight={700}>{daysOfWeek[i]}</OText>
-                        <View style={{width: '80%', alignItems: 'center'}}>
+                        <OText style={{ width: '20%' }} size={22} weight={700}>{daysOfWeek[i]}</OText>
+                        <View style={{ width: '80%', alignItems: 'center' }}>
                             <>
-                            {item?.enabled ? (
-                                <>
-                                    {item?.lapses.map((lapse: any, i: number) => (
-                                        <OText size={18} style={{marginTop: 3, marginBottom: 20}} key={`${daysOfWeek[i]}_${i}`}>{scheduleFormatted(lapse.open)} - {scheduleFormatted(lapse.close)}</OText>
-                                    ))}
-                                </>
-                            ) : (
-                                <OText size={18} style={{marginTop: 3, marginBottom: 10}} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
-                            )}
+                                {item?.enabled ? (
+                                    <View>
+                                        {item?.lapses.map((lapse: any, i: number) => (
+                                            <View key={`${daysOfWeek[i]}_${i}`} style={{ marginTop: 3, marginBottom: 20, flexDirection: 'row', justifyContent: 'space-between' }}>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.open)}
+                                                </OText>
+                                                <OText size={18} style={{ width: 15 }}>
+                                                    -
+                                                </OText>
+                                                <OText size={18} style={{ width: '30%' }}>
+                                                    {scheduleFormatted(lapse.close)}
+                                                </OText>
+                                            </View>
+                                        ))}
+                                    </View>
+                                ) : (
+                                    <OText size={18} style={{ marginTop: 3, marginBottom: 10 }} color={theme.colors.red}>{t('NOT_AVAILABLE', 'Not available')}</OText>
+                                )}
                             </>
                         </View>
                     </DayContainer>
                 ))}
             </View>
-        </View>
+        </ScrollView>
     )
 }

package/themes/business/src/components/ScheduleBlocked/index.tsx

@@ -12,13 +12,13 @@ export const ScheduleBlocked = (props : any) => {
     const deviceWidth = Dimensions.get('screen').width
 
     const daysOfWeek = [
+        t('SUNDAY', 'Sunday'),
         t('MONDAY', 'Monday'),
         t('TUESDAY', 'Tuesday'),
         t('WEDNESDAY', 'Wednesday'),
         t('THURSDAY', 'Thurday'),
         t('FRIDAY', 'Friday'),
         t('SATURDAY', 'Saturday'),
-        t('SUNDAY', 'Sunday')
     ]
 
     const scheduleFormatted = ({ hour, minute }: any) => {
@@ -41,7 +41,7 @@ export const ScheduleBlocked = (props : any) => {
             <OText>{t('OUTSIDE_ESTABLISHED_SCHEDULE', 'You are outside the established schedule')}</OText>
             <View style={{ flexDirection: 'row', marginBottom: 20 }}>
                 <OText color={theme.colors.primary}>{t('NEXT_TIME', 'Next time')}: </OText>
-                <OText>{daysOfWeek[nextSchedule?.day - 1]} {scheduleFormatted(nextSchedule?.schedule?.open)}</OText>
+                <OText>{daysOfWeek[nextSchedule?.day]} {scheduleFormatted(nextSchedule?.schedule?.open)}</OText>
             </View>
             <OButton
                 text={t('GO_BACK', 'Go back')}

package/themes/original/index.tsx

@@ -29,9 +29,6 @@ import { UserProfileForm } from './src/components/UserProfileForm';
 import { ReviewOrder } from './src/components/ReviewOrder';
 import { ReviewProducts } from './src/components/ReviewProducts';
 import { ReviewDriver } from './src/components/ReviewDriver';
-import { ReviewOrder as ReviewOrderModal } from './src/components/Reviews/ReviewOrder';
-import { ReviewProducts as ReviewProductsModal } from './src/components/Reviews/ReviewProducts';
-import { ReviewDriver as ReviewDriverModal } from './src/components/Reviews/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
 import { Messages } from './src/components/Messages';
@@ -189,9 +186,6 @@ export {
 	ReviewOrder,
 	ReviewProducts,
 	ReviewDriver,
-	ReviewOrderModal,
-	ReviewProductsModal,
-	ReviewDriverModal,
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,

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

@@ -109,8 +109,8 @@ const AddressFormUI = (props: AddressFormParams) => {
 			zIndex: 1002,
 		},
 		wrapperNavbar: Platform.OS === 'ios'
-			? {  paddingVertical: 0, paddingHorizontal: 40 }
-			: {  paddingVertical: 20, paddingHorizontal: 40 }
+			? { paddingVertical: 0, paddingHorizontal: 40 }
+			: { paddingVertical: 20, paddingHorizontal: 40 }
 	});
 
 	const [, t] = useLanguage();
@@ -156,7 +156,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 	const maxLimitLocation =
 		configState?.configs?.meters_to_change_address?.value;
 
-	const continueAsGuest = () => navigation.navigate('BusinessList');
+	const continueAsGuest = () => navigation.navigate('BusinessList', { isGuestUser: true });
 	const goToBack = () => navigation?.canGoBack() && navigation.goBack();
 
 	const getAddressFormatted = (address: any) => {
@@ -203,6 +203,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 						saveAddress(data.address);
 						if (isGuestUser) {
 							continueAsGuest();
+							return;
 						}
 						if (!isGuestUser && !auth) {
 							!isFromProductsList
@@ -600,13 +601,13 @@ const AddressFormUI = (props: AddressFormParams) => {
 								/>
 								{hasEditing ? (
 									<View style={styles.pinIcon}>
-										<GPSButton 
+										<GPSButton
 											apiKey={googleMapsApiKey}
 											handleGPS={(data: any, detail: any) => {
 												handleChangeAddress(data, detail);
 												setValue(data.address);
 												if (googleInput?.current) {
-													googleInput?.current?.setAddressText( data.address );
+													googleInput?.current?.setAddressText(data.address);
 												}
 											}}
 											IconButton={<OIcon src={theme.images.general.pin} width={16} />}

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { StyleSheet, View, TouchableOpacity, Linking } from 'react-native';
-import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
+import { useUtils, useOrder, useLanguage, useOrderingTheme } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
@@ -38,6 +38,7 @@ export const BusinessBasicInformation = (
 	const { business, loading } = businessState;
 
 	const theme = useTheme();
+	const [orderingTheme] = useOrderingTheme()
 	const [orderState] = useOrder();
 	const [, t] = useLanguage();
 	const [{ parsePrice, parseDistance, optimizeImage }] = useUtils();
@@ -45,13 +46,15 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
-
+	const isChewLayout = theme?.layouts?.business_view?.components?.header?.components?.layout?.type === 'chew'
+	const showLogo = !orderingTheme?.theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+	
 	const styles = StyleSheet.create({
 		businesInfoheaderStyle: {
 			height: 150,
 		},
 		headerStyle: {
-			height: 260,
+			height: isChewLayout ? 170 : 260,
 		},
 		businessLogo: {
 			width: 72,
@@ -62,7 +65,7 @@ export const BusinessBasicInformation = (
 		},
 		businessInfo: {
 			paddingHorizontal: 40,
-			paddingTop: 56,
+			paddingTop: isChewLayout ? 0 : 56,
 		},
 		bullet: {
 			flexDirection: 'row',
@@ -89,7 +92,7 @@ export const BusinessBasicInformation = (
 		socialIcon: {
 			borderRadius: 3,
 			borderColor: theme.colors.border,
-			borderWidth: 1,
+			borderWidth: isChewLayout ? 0 : 1,
 			width: 20,
 			height: 20,
 			justifyContent: 'center',
@@ -102,6 +105,16 @@ export const BusinessBasicInformation = (
 			width: 12,
 			margin: 0,
 			padding: 0
+		},
+		headerChewStyle: {
+			paddingHorizontal: 30,
+			justifyContent: 'center',
+			height: '100%'
+		},
+		socialIconsChewContainer: {
+			flexDirection: 'row',
+			justifyContent: 'flex-start',
+			marginTop: 5
 		}
 	});
 
@@ -135,14 +148,14 @@ export const BusinessBasicInformation = (
 	};
 
 	const SocialNetWork = (props: any) => {
-		const { socialLink, iconTitle} = props
+		const { socialLink, iconTitle } = props
 
 		return (
 			<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(socialLink)}>
 				<MaterialComIcon
 					name={iconTitle}
-					color={theme.colors.textNormal}
-					size={14}
+					color={isChewLayout ? theme.colors.black : theme.colors.textNormal}
+					size={isChewLayout ? 18 : 14}
 				/>
 			</TouchableOpacity>
 		)
@@ -172,85 +185,9 @@ export const BusinessBasicInformation = (
 		}
 	}, [businessState?.business])
 
-	return (
-		<BusinessContainer>
-			<BusinessHeader
-				style={
-					isBusinessInfoShow
-						? styles.businesInfoheaderStyle
-						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
-				}
-				source={{
-					uri:
-						header ||
-						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
-				}}>
-				{!isBusinessInfoShow && (
-					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
-						<OIcon src={theme.images.general.info} width={24} />
-					</WrapBusinessInfo>
-				)}
-			</BusinessHeader>
-			<BusinessInfo style={styles.businessInfo}>
-				<BusinessLogo>
-					{loading ? (
-						<View>
-							<Placeholder Animation={Fade}>
-								<PlaceholderLine height={50} width={20} />
-							</Placeholder>
-						</View>
-					) : (
-						!isBusinessInfoShow && (
-							<OIcon
-								url={
-									logo ||
-									optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
-								}
-								style={styles.businessLogo}
-							/>
-						)
-					)}
-				</BusinessLogo>
-				<BusinessInfoItem>
-					{loading ? (
-						<Placeholder Animation={Fade}>
-							<PlaceholderLine height={30} width={20} />
-						</Placeholder>
-					) : (
-						<TitleWrapper>
-							<OText size={24} weight={'600'}>
-								{business?.name}
-							</OText>
-							{business?.ribbon?.enabled && (
-								<RibbonBox
-									bgColor={business?.ribbon?.color}
-									isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
-									isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
-								>
-									<OText
-										size={10}
-										weight={'400'}
-										color={theme.colors.white}
-										numberOfLines={2}
-										ellipsizeMode='tail'
-										lineHeight={13}
-									>
-										{business?.ribbon?.text}
-									</OText>
-								</RibbonBox>
-							)}
-						</TitleWrapper>
-					)}
-				</BusinessInfoItem>
-				{loading ? (
-					<Placeholder Animation={Fade}>
-						<PlaceholderLine width={10} />
-					</Placeholder>
-				) : (
-					<View style={{ width: '75%' }}>
-						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
-					</View>
-				)}
+	const SocialIcons = () => {
+		return (
+			<>
 				{loading ? (
 					<Placeholder Animation={Fade}>
 						<View style={{ flexDirection: 'row' }}>
@@ -266,7 +203,7 @@ export const BusinessBasicInformation = (
 						showsVerticalScrollIndicator={false}
 						showsHorizontalScrollIndicator={false}
 						horizontal
-						contentContainerStyle={{ flex: 1}}
+						contentContainerStyle={{ flex: 1 }}
 					>
 						{!!business?.facebook_profile && (
 							<SocialNetWork
@@ -285,7 +222,7 @@ export const BusinessBasicInformation = (
 								<View style={styles.tiktokIcon}>
 									<OIcon
 										src={theme.images.general.tiktok}
-										style={{ width: '100%', height: '100%'}}
+										style={{ width: '100%', height: '100%' }}
 									/>
 								</View>
 							</TouchableOpacity>
@@ -308,72 +245,190 @@ export const BusinessBasicInformation = (
 								iconTitle='snapchat'
 							/>
 						)}
+						{isChewLayout && (
+							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
+								<OText style={{textDecorationColor: theme.colors.black, textDecorationLine: 'underline'}}>
+									{t('SEE_MORE_DESCRIPTION', 'See more')}
+								</OText>
+							</TouchableOpacity>
+						)}
 					</SocialListWrapper>
 				)}
-				<View>
-					<BusinessInfoItem>
-						{loading && (
-							<Placeholder Animation={Fade}>
-								<View style={{ flexDirection: 'row' }}>
-									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
-									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
-									<PlaceholderLine width={13} style={{ marginRight: 10 }} />
-									<PlaceholderLine width={13} />
-								</View>
-							</Placeholder>
-						)}
-						<View style={styles.bullet}>
-							<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-								{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
+			</>
+		)
+	}
+
+	return (
+		<BusinessContainer isChewLayout={isChewLayout && !showLogo}>
+			<BusinessHeader
+				isChewLayout={isChewLayout}
+				style={
+					isBusinessInfoShow
+						? styles.businesInfoheaderStyle
+						: { ...styles.headerStyle, backgroundColor: theme.colors.backgroundGray }
+				}
+				source={{
+					uri:
+						header ||
+						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
+				}}
+				imageStyle={{ opacity: isChewLayout ? 0.5 : 1 }}
+			>
+				{!isBusinessInfoShow && !isChewLayout && (
+					<WrapBusinessInfo onPress={() => handleClickBusinessInformation()}>
+						<OIcon src={theme.images.general.info} width={24} />
+					</WrapBusinessInfo>
+				)}
+				{isChewLayout && (
+					<View style={styles.headerChewStyle}>
+						<OText size={24} weight={'600'} mBottom={-5}>
+							{business?.name}
+						</OText>
+						{business?.city?.name && (
+							<OText>
+								{business?.city?.name}
 							</OText>
-							{orderState?.options?.type === 1 ? (
-								<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-									{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
-								</OText>
+						)}
+						<View style={styles.socialIconsChewContainer}>
+							<SocialIcons />
+						</View>
+					</View>
+				)}
+			</BusinessHeader>
+			<BusinessInfo style={styles.businessInfo}>
+				{showLogo && (
+					<BusinessLogo isChewLayout={isChewLayout}>
+						{loading ? (
+							<View>
+								<Placeholder Animation={Fade}>
+									<PlaceholderLine height={50} width={20} />
+								</Placeholder>
+							</View>
+						) : (
+							!isBusinessInfoShow && (
+								<OIcon
+									url={
+										logo ||
+										optimizeImage(businessState?.business?.logo, 'h_70,c_limit')
+									}
+									style={styles.businessLogo}
+								/>
+							)
+						)}
+					</BusinessLogo>
+				)}
+				{!isChewLayout && (
+
+					<>
+						<BusinessInfoItem>
+							{loading ? (
+								<Placeholder Animation={Fade}>
+									<PlaceholderLine height={30} width={20} />
+								</Placeholder>
 							) : (
-								<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-									{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
-								</OText>
+								<TitleWrapper>
+									<OText size={24} weight={'600'}>
+										{business?.name}
+									</OText>
+									{business?.ribbon?.enabled && (
+										<RibbonBox
+											bgColor={business?.ribbon?.color}
+											isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
+											isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
+										>
+											<OText
+												size={10}
+												weight={'400'}
+												color={theme.colors.white}
+												numberOfLines={2}
+												ellipsizeMode='tail'
+												lineHeight={13}
+											>
+												{business?.ribbon?.text}
+											</OText>
+										</RibbonBox>
+									)}
+								</TitleWrapper>
 							)}
-							<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
-								{parseDistance(business?.distance || 0) + `  \u2022 `}
-							</OText>
-						</View>
+						</BusinessInfoItem>
+						{loading ? (
+							<Placeholder Animation={Fade}>
+								<PlaceholderLine width={10} />
+							</Placeholder>
+						) : (
+							<View style={{ width: '75%' }}>
+								<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
+							</View>
+						)}
+						{!isChewLayout && (
+							<SocialIcons />
+						)}
+						<View>
+							<BusinessInfoItem>
+								{loading && (
+									<Placeholder Animation={Fade}>
+										<View style={{ flexDirection: 'row' }}>
+											<PlaceholderLine width={13} style={{ marginRight: 10 }} />
+											<PlaceholderLine width={13} style={{ marginRight: 10 }} />
+											<PlaceholderLine width={13} style={{ marginRight: 10 }} />
+											<PlaceholderLine width={13} />
+										</View>
+									</Placeholder>
+								)}
+								<View style={styles.bullet}>
+									<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+										{`${t('DELIVERY_FEE', 'Delivery fee')} ${business && parsePrice(business?.delivery_price || 0)} \u2022 `}
+									</OText>
+									{orderState?.options?.type === 1 ? (
+										<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+											{convertHoursToMinutes(business?.delivery_time) + `  \u2022 `}
+										</OText>
+									) : (
+										<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+											{convertHoursToMinutes(business?.pickup_time) + `  \u2022 `}
+										</OText>
+									)}
+									<OText color={theme.colors.textSecondary} size={12} style={styles.metadata}>
+										{parseDistance(business?.distance || 0) + `  \u2022 `}
+									</OText>
+								</View>
 
-						<View style={styles.reviewStyle}>
-							<OIcon
-								src={theme.images.general.star}
-								width={14}
-								color={theme.colors.textSecondary}
-								style={{ marginTop: -2, marginEnd: 2 }}
-							/>
-							<OText size={12} color={theme.colors.textSecondary}>
-								{business?.reviews?.total}
-							</OText>
+								<View style={styles.reviewStyle}>
+									<OIcon
+										src={theme.images.general.star}
+										width={14}
+										color={theme.colors.textSecondary}
+										style={{ marginTop: -2, marginEnd: 2 }}
+									/>
+									<OText size={12} color={theme.colors.textSecondary}>
+										{business?.reviews?.total}
+									</OText>
+								</View>
+							</BusinessInfoItem>
 						</View>
-					</BusinessInfoItem>
-				</View>
-				<WrapReviews>
-					{!isBusinessInfoShow && (
-						<>
-							{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
+						<WrapReviews>
+							{!isBusinessInfoShow && (
 								<>
-									<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
+									{isPreOrder && (!business?.professionals || business?.professionals?.length === 0) && (
+										<>
+											<TouchableOpacity onPress={() => navigation.navigate('BusinessPreorder', { business: businessState?.business, handleBusinessClick: () => navigation?.goBack() })}>
+												<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
+													{t('PRE_ORDER', 'Preorder')}
+												</OText>
+											</TouchableOpacity>
+											<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
+										</>
+									)}
+									<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
 										<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-											{t('PRE_ORDER', 'Preorder')}
+											{t('REVIEWS', 'Reviews')}
 										</OText>
 									</TouchableOpacity>
-									<OText size={12} color={theme.colors.textSecondary}>{' \u2022 '}</OText>
 								</>
 							)}
-							<TouchableOpacity onPress={() => handleClickBusinessReviews()}>
-								<OText color={theme.colors.textSecondary} style={{ textDecorationLine: 'underline' }}>
-									{t('REVIEWS', 'Reviews')}
-								</OText>
-							</TouchableOpacity>
-						</>
-					)}
-				</WrapReviews>
+						</WrapReviews>
+					</>
+				)}
 			</BusinessInfo>
 			{businessInformationObtained ? (
 				<OModal

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

@@ -3,7 +3,7 @@ import { Platform } from 'react-native';
 
 export const BusinessContainer = styled.View`
   flex-direction: column;
-  padding-bottom: 35px;
+  padding-bottom: ${(props: any) => props.isChewLayout ? '0' : '35px'};
 `;
 export const BusinessHeader = styled.ImageBackground`
   width: 100%;
@@ -20,7 +20,7 @@ export const BusinessLogo = styled.View`
   box-shadow: 0 0 2px ${Platform.OS == 'android' ? '#000000DD' : '#0000001A'};
   elevation: 2;
   background-color: white;
-  border-radius: 7.6px;
+  border-radius: 7.6px;  
 `;
 export const BusinessInfo = styled.View`
   justify-content: flex-start;