ordering-ui-react-native 0.15.83 → 0.15.84-release

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

@@ -3,57 +3,3 @@ import styled from 'styled-components/native'
 export const ActiveOrdersContainer = styled.View`
   margin-bottom: 20px;
 `
-
-export const Card = styled.TouchableOpacity`
-`
-
-export const Map = styled.View`
-  flex: 1;
-  height: 125px;
-  margin-bottom: 10px;
-`
-
-export const Information = styled.View`
-  flex-direction: row;
-  height: 100px;
-  align-items: center;
-  padding-vertical: 5px;
-`
-
-export const Logo = styled.View`
-	border-radius: 7.6px;
-	box-shadow: 0 1px 2px #0000001A;
-`
-
-export const OrderInformation = styled.View`
-  flex-direction: row;
-  justify-content: space-between;
-  flex: 1;
-  padding-left: 14px;
-`
-
-export const BusinessInformation = styled.View`
-	flex-basis: 65%;
-`
-
-export const Price = styled.View`
-  justify-content: space-between;
-  align-items: flex-end;
-  margin-left: 10px;
-  width: 30%;
-`
-
-export const UnreadMessageCounter = styled.View`
-  justify-content: center;
-  align-items: center;
-  margin-left: 10px;
-  width: 24px;
-  height: 24px;
-  border-radius: 7.6px;
-  background-color: ${(props: any) => props.theme.colors.primaryContrast};
-`
-export const LoadMore = styled.View`
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 10px;
-`

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
@@ -510,7 +511,7 @@ const AddressFormUI = (props: AddressFormParams) => {
 					onActionLeft={goToBack}
 					showCall={false}
 					btnStyle={{ paddingLeft: 0 }}
-					style={{ flexDirection: 'column', alignItems: 'flex-start', marginTop: Platform.OS === 'ios' ? 0 : 30 }}
+					style={{ marginTop: Platform.OS === 'ios' ? 0 : 30 }}
 					titleWrapStyle={{ paddingHorizontal: 0 }}
 					titleStyle={{ marginRight: 0, marginLeft: 0 }}
 				/>
@@ -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/AddressList/index.tsx

@@ -179,7 +179,7 @@ const AddressListUI = (props: AddressListParams) => {
 								showCall={false}
 								btnStyle={{ paddingLeft: 0 }}
 								paddingTop={0}
-								style={{ flexDirection: 'column', alignItems: 'flex-start', marginTop: Platform.OS === 'ios' ? 0 : 40 }}
+								style={{ marginTop: Platform.OS === 'ios' ? 0 : 40 }}
 								titleWrapStyle={{ paddingHorizontal: 0 }}
 								titleStyle={{ marginLeft: 0, marginRight: 0 }}
 							/>

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Platform, Text, StyleSheet } from 'react-native';
-import { useApi, useSession, useLanguage, useConfig, useToast, ToastType } from 'ordering-components/native';
+import { useApi, useSession, useLanguage, useConfig } from 'ordering-components/native';
 import { appleAuthAndroid, appleAuth } from '@invertase/react-native-apple-authentication';
 import uuid from 'react-native-uuid';
 import Icon from 'react-native-vector-icons/FontAwesome5';
@@ -19,14 +19,13 @@ export const AppleLogin = (props: any) => {
   const [{ auth }] = useSession();
   const [, t] = useLanguage();
   const [{ configs }] = useConfig();
-  const [, {showToast}] = useToast()
   const [credentialStateForUser, updateCredentialStateForUser] = useState<any>(-1);
 
-  let user : any= null
+  let user: any = null
 
   const buttonText = auth
     ? t('CONTINUE_WITH_APPLE', 'Logout with Apple')
-    : t('CONTINUE_WITH_FACEBOOK', 'Continue with Apple');
+    : t('CONTINUE_WITH_APPLE', 'Continue with Apple');
 
   const performAppleLogin = async (code: string) => {
     try {
@@ -54,7 +53,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser : any) => {
+  const fetchAndUpdateCredentialState = async (updateCredentialStateForUser: any) => {
     if (user === null) {
       updateCredentialStateForUser('N/A');
     } else {
@@ -67,7 +66,7 @@ export const AppleLogin = (props: any) => {
     }
   }
 
-  const onIOSButtonPress = async (updateCredentialStateForUser : any) => {
+  const onIOSButtonPress = async (updateCredentialStateForUser: any) => {
     try {
       const appleAuthRequestResponse = await appleAuth.performRequest({
         requestedOperation: appleAuth.Operation.LOGIN,
@@ -80,7 +79,7 @@ export const AppleLogin = (props: any) => {
         identityToken,
         authorizationCode
       } = appleAuthRequestResponse;
-  
+
       user = newUser;
 
       fetchAndUpdateCredentialState(updateCredentialStateForUser).catch(error =>
@@ -88,7 +87,6 @@ export const AppleLogin = (props: any) => {
       );
 
       if (identityToken && authorizationCode) {
-        showToast(ToastType.Success, `Apple Authentication Completed, ${email}`)
         performAppleLogin(authorizationCode)
       } else {
         handleErrors && handleErrors('UNABLE_LOGIN_TOKEN', 'Unable to login, no token found')

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

@@ -1,10 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Linking, Pressable } from 'react-native';
 import { useUtils, useOrder, useLanguage } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import { OIcon, OText, OModal } from '../shared';
 import { BusinessBasicInformationParams } from '../../types';
 import { convertHoursToMinutes, shape } from '../../utils';
+import MaterialComIcon from 'react-native-vector-icons/MaterialCommunityIcons'
 import dayjs from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import isBetween from 'dayjs/plugin/isBetween';
@@ -21,7 +22,8 @@ import {
 	WrapReviews,
 	WrapBusinessInfo,
 	TitleWrapper,
-	RibbonBox
+	RibbonBox,
+	SocialListWrapper
 } from './styles';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 const types = ['food', 'laundry', 'alcohol', 'groceries'];
@@ -43,6 +45,80 @@ export const BusinessBasicInformation = (
 	const [openBusinessReviews, setOpenBusinessReviews] = useState(false);
 	const [businessInformationObtained, setBusinessInformationObtained] = useState(false)
 	const [businessReviewsObtained, setBusinessReviewsObtainedbtained] = useState(false)
+	const isChewLayout = theme?.business_view?.components?.header?.components?.layout?.type === 'original'
+	const showLogo = !theme?.business_view?.components?.header?.components?.business?.components?.logo?.hidden
+
+	const styles = StyleSheet.create({
+		businesInfoheaderStyle: {
+			height: 150,
+		},
+		headerStyle: {
+			height: isChewLayout ? 170 : 260,
+		},
+		businessLogo: {
+			width: 72,
+			height: 72,
+			borderRadius: 7.6,
+			justifyContent: 'flex-start',
+			alignItems: 'flex-start',
+		},
+		businessInfo: {
+			paddingHorizontal: 40,
+			paddingTop: isChewLayout ? 0 : 56,
+		},
+		bullet: {
+			flexDirection: 'row',
+			alignItems: 'center',
+		},
+		metadata: {
+			marginRight: 2,
+		},
+		starIcon: {
+			marginHorizontal: 5,
+		},
+		reviewStyle: {
+			flexDirection: 'row',
+			alignItems: 'center',
+			justifyContent: 'center'
+		},
+		modalTitleSectionStyle: {
+			position: 'absolute',
+			width: '100%',
+			top: 0,
+			zIndex: 100,
+			left: 40
+		},
+		socialIcon: {
+			borderRadius: 3,
+			borderColor: theme.colors.border,
+			borderWidth: isChewLayout ? 0 : 1,
+			width: 20,
+			height: 20,
+			justifyContent: 'center',
+			alignItems: 'center',
+			marginRight: 5,
+			marginBottom: 7
+		},
+		tiktokIcon: {
+			height: 12,
+			width: 12,
+			margin: 0,
+			padding: 0,
+			display: 'flex',
+			justifyContent: 'center',
+			alignItems: 'center'
+		},
+		headerChewStyle: {
+			paddingHorizontal: 30,
+			justifyContent: 'center',
+			height: '100%'
+		},
+		socialIconsChewContainer: {
+			flexDirection: 'row',
+			justifyContent: 'flex-start',
+			marginTop: 5
+		}
+	});
 
 	const handleClickBusinessInformation = () => {
 		if (!businessInformationObtained) {
@@ -73,6 +149,19 @@ export const BusinessBasicInformation = (
 		return _types.join(', ');
 	};
 
+	const SocialNetWork = (props: any) => {
+		const { socialLink, iconTitle } = props
+
+		return (
+			<TouchableOpacity style={styles.socialIcon} onPress={() => Linking.openURL(socialLink)}>
+				<MaterialComIcon
+					name={iconTitle}
+					color={isChewLayout ? theme.colors.black : theme.colors.textNormal}
+					size={isChewLayout ? 18 : 14}
+				/>
+			</TouchableOpacity>
+		)
+	}
 
 	useEffect(() => {
 		if (businessState?.loading) return
@@ -98,9 +187,84 @@ export const BusinessBasicInformation = (
 		}
 	}, [businessState?.business])
 
+	const SocialIcons = () => {
+		return (
+			<>
+				{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 && (
+							<Pressable style={styles.socialIcon} onPress={() => Linking.openURL(business?.tiktok_profile)}>
+								<View style={styles.tiktokIcon}>
+									<OIcon
+										src={theme.images.general.tiktok}
+										style={{ width: 10, height: 12 }}
+										cover
+									/>
+								</View>
+							</Pressable>
+						)}
+						{!!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'
+							/>
+						)}
+						{isChewLayout && (
+							<TouchableOpacity onPress={() => handleClickBusinessInformation()}>
+								<OText style={{ textDecorationColor: theme.colors.black, textDecorationLine: 'underline' }}>
+									{t('SEE_MORE_DESCRIPTION', 'See more')}
+								</OText>
+							</TouchableOpacity>
+						)}
+					</SocialListWrapper>
+				)}
+			</>
+		)
+	}
+
 	return (
-		<BusinessContainer>
+		<BusinessContainer isChewLayout={isChewLayout && !showLogo}>
 			<BusinessHeader
+				isChewLayout={isChewLayout}
 				style={
 					isBusinessInfoShow
 						? styles.businesInfoheaderStyle
@@ -110,23 +274,34 @@ export const BusinessBasicInformation = (
 					uri:
 						header ||
 						optimizeImage(businessState?.business?.header, 'h_250,c_limit'),
-				}}>
-				{!isBusinessInfoShow && (
+				}}
+				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>
+						)}
+						<View style={styles.socialIconsChewContainer}>
+							<SocialIcons />
+						</View>
+					</View>
+				)}
 			</BusinessHeader>
 			<BusinessInfo style={styles.businessInfo}>
-				<BusinessLogo>
-					{loading ? (
-						<View>
-							<Placeholder Animation={Fade}>
-								<PlaceholderLine height={50} width={20} />
-							</Placeholder>
-						</View>
-					) : (
-						!isBusinessInfoShow && (
+				{showLogo && (
+					<BusinessLogo isChewLayout={isChewLayout}>
+						{!isBusinessInfoShow && (
 							<OIcon
 								url={
 									logo ||
@@ -134,113 +309,121 @@ export const BusinessBasicInformation = (
 								}
 								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}
+						)}
+					</BusinessLogo>
+				)}
+				{!isChewLayout && (
+
+					<>
+						<BusinessInfoItem>
+							{loading ? (
+								<Placeholder Animation={Fade}>
+									<PlaceholderLine height={30} width={20} />
+								</Placeholder>
+							) : (
+								<TitleWrapper>
+									<OText size={24} weight={'600'} numberOfLines={2}>
+										{business?.name}
 									</OText>
-								</RibbonBox>
+									{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>
 							)}
-						</TitleWrapper>
-					)}
-				</BusinessInfoItem>
-				{loading ? (
-					<Placeholder Animation={Fade}>
-						<PlaceholderLine width={10} />
-					</Placeholder>
-				) : (
-					<View style={{ width: '75%' }}>
-						<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
-					</View>
-				)}
-				<View>
-					<BusinessInfoItem>
-						{loading && (
+						</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>
+								<PlaceholderLine width={10} />
 							</Placeholder>
+						) : (
+							<View style={{ width: '75%' }}>
+								<OText color={theme.colors.textNormal}>{getBusinessType()}</OText>
+							</View>
 						)}
-						<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>
+						{!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 && (
+						<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('PREORDER', '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
@@ -276,45 +459,3 @@ export const BusinessBasicInformation = (
 		</BusinessContainer>
 	);
 };
-
-const styles = StyleSheet.create({
-	businesInfoheaderStyle: {
-		height: 150,
-	},
-	headerStyle: {
-		height: 260,
-	},
-	businessLogo: {
-		width: 72,
-		height: 72,
-		borderRadius: 7.6,
-		justifyContent: 'flex-start',
-		alignItems: 'flex-start',
-	},
-	businessInfo: {
-		paddingHorizontal: 40,
-		paddingTop: 56,
-	},
-	bullet: {
-		flexDirection: 'row',
-		alignItems: 'center',
-	},
-	metadata: {
-		marginRight: 2,
-	},
-	starIcon: {
-		marginHorizontal: 5,
-	},
-	reviewStyle: {
-		flexDirection: 'row',
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	modalTitleSectionStyle: {
-		position: 'absolute',
-		width: '100%',
-		top: 0,
-		zIndex: 100,
-		left: 40
-	},
-});