ordering-ui-react-native 0.16.53 → 0.16.54-release

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

@@ -1,8 +1,5 @@
 import styled, { css } from 'styled-components/native'
 
-export const ContainerSafeAreaView = styled.SafeAreaView`
-`
-
 export const WrapHeader = styled.View`
   position: relative;
 `
@@ -14,7 +11,6 @@ export const TopHeader = styled.View`
   z-index: 1;
   height: 60px;
   min-height: 60px;
-  margin-top: ${(props : any) => props.isIos ? '0' : '40px'};
 `
 export const AddressInput = styled.TouchableOpacity`
   flex: 1;
@@ -28,7 +24,7 @@ export const WrapSearchBar = styled.View`
   flex: 1;
 `
 export const WrapContent = styled.View`
-  padding: 10px 40px;
+  padding-vertical: 10px;
 `
 
 export const BusinessProductsListingContainer = styled.ScrollView`
@@ -41,18 +37,16 @@ export const BusinessProductsListingContainer = styled.ScrollView`
 export const FiltProductsContainer = styled.ScrollView`
   position: absolute;
   width: 100%;
-  z-index: 2000;
-  top: ${(props : any) => props.isIos ? '40px': '80px'};
-  margin-top: 20px;
+  z-index: 20000;
 `
 
 export const BackgroundGray = styled.View`
   flex: 1;
-  height: 100%;
+  height: ${(props: any) => props.isIos ? '80%' : '100%'};
   background-color: rgba(0,0,0,0.5);
-  position: absolute; 
-  margin-top: 100px; 
-  z-index: 100;
+  position: absolute;
+  margin-top: 100px;
+  z-index: 10000;
   width: 100%;
 `
 
@@ -64,4 +58,12 @@ export const ProfessionalFilterWrapper = styled.View`
 export const NearBusiness = styled.View`
   width: 100%;
   padding-left: 20px;
+  max-height: 80px;
 `
+
+export const TopActions = styled.TouchableOpacity`
+	height: 60px;
+	justify-content: center;
+  padding-horizontal: 30px;
+  width: 100px;
+`;

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

@@ -38,6 +38,7 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 
 	const theme = useTheme();
 	const [isOpenAllCategories, setIsOpenAllCategories] = useState(false)
+	const defaultImage = (name : string) => theme.images?.categories?.[name.toLowerCase().replace(' ', '')]
 
 	useEffect(() => {
 		if(typesState?.types?.length > 0){
@@ -197,9 +198,9 @@ export const BusinessTypeFilterUI = (props: BusinessTypeFilterParams) => {
 									isOpenAllCategories && setIsOpenAllCategories(false)
 								}}
 							>
-								{item.image ? (
+								{(defaultImage(item.name) || item.image) ? (
 									<OIcon
-										url={item.image}
+										url={typeof item.name === 'number' ? item.image || defaultImage(item.name) : defaultImage(item.name) || item.image}
 										style={styles.logo}
 									/>
 								) : (

package/themes/original/src/components/BusinessesListing/Layout/Appointment/index.tsx

@@ -22,6 +22,7 @@ import {
 } from 'ordering-components/native';
 import { useTheme } from 'styled-components/native';
 import Ionicons from 'react-native-vector-icons/Ionicons'
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
 
 import {
 	Search,
@@ -270,7 +271,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}, [businessesList?.businesses?.length])
 
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+		<IOScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -283,7 +284,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				style={{ paddingTop: top + 20 }}>
 				{!auth && (
 					<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-						<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
+						<IconAntDesign name='arrowleft' size={26} />
 					</TouchableOpacity>
 				)}
 				<Search>
@@ -469,32 +470,30 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						)}
 					/>
 				)}
-				<IOScrollView>
-					{businessesList.businesses?.map(
-						(business: any, i: number) => (
-							<BusinessController
-								key={`${business.id}_` + i}
-								enableIntersection
-								business={business}
-								isBusinessOpen={business.open}
-								handleCustomClick={handleBusinessClick}
-								orderType={orderState?.options?.type}
-								navigation={navigation}
-								businessHeader={business?.header}
-								businessFeatured={business?.featured}
-								businessLogo={business?.logo}
-								businessReviews={business?.reviews}
-								businessDeliveryPrice={business?.delivery_price}
-								businessDeliveryTime={business?.delivery_time}
-								businessPickupTime={business?.pickup_time}
-								businessDistance={business?.distance}
-								handleUpdateBusinessList={handleUpdateBusinessList}
-								favoriteIds={favoriteIds}
-								setFavoriteIds={setFavoriteIds}
-							/>
-						)
-					)}
-				</IOScrollView>
+				{businessesList.businesses?.map(
+					(business: any, i: number) => (
+						<BusinessController
+							key={`${business.id}_` + i}
+							enableIntersection
+							business={business}
+							isBusinessOpen={business.open}
+							handleCustomClick={handleBusinessClick}
+							orderType={orderState?.options?.type}
+							navigation={navigation}
+							businessHeader={business?.header}
+							businessFeatured={business?.featured}
+							businessLogo={business?.logo}
+							businessReviews={business?.reviews}
+							businessDeliveryPrice={business?.delivery_price}
+							businessDeliveryTime={business?.delivery_time}
+							businessPickupTime={business?.pickup_time}
+							businessDistance={business?.distance}
+							handleUpdateBusinessList={handleUpdateBusinessList}
+							favoriteIds={favoriteIds}
+							setFavoriteIds={setFavoriteIds}
+						/>
+					)
+				)}
 				{businessesList.loading && (
 					<>
 						{[
@@ -547,7 +546,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</>
 				)}
 			</ListWrapper>
-		</ScrollView>
+		</IOScrollView>
 	);
 };
 

package/themes/original/src/components/BusinessesListing/Layout/Original/index.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
 import Geolocation from '@react-native-community/geolocation'
+import { IOScrollView } from 'react-native-intersection-observer'
 import { getTrackingStatus, requestTrackingPermission } from 'react-native-tracking-transparency'
 import {
 	View,
@@ -31,7 +32,6 @@ import {
 	HeaderWrapper,
 	ListWrapper,
 	FeaturedWrapper,
-	OrderProgressWrapper,
 	FarAwayMessage,
 	AddressInputContainer,
 	PreorderInput,
@@ -39,8 +39,7 @@ import {
 	BusinessLogosContainer
 } from './styles';
 
-import { SearchBar } from '../../../SearchBar';
-import { OButton, OIcon, OText, OBottomPopup, OModal } from '../../../shared';
+import { OIcon, OText, OModal } from '../../../shared';
 import { BusinessesListingParams } from '../../../../types';
 import { NotFoundSource } from '../../../NotFoundSource';
 import { BusinessTypeFilter } from '../../../BusinessTypeFilter';
@@ -49,10 +48,12 @@ import { OrderTypeSelector } from '../../../OrderTypeSelector';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BusinessFeaturedController } from '../../../BusinessFeaturedController';
 import { HighestRatedBusinesses } from '../../../HighestRatedBusinesses';
-import { getTypesText, convertToRadian } from '../../../../utils';
+import { getTypesText } from '../../../../utils';
 import { OrderProgress } from '../../../OrderProgress';
 import { useFocusEffect, useIsFocused } from '@react-navigation/native';
 import FastImage from 'react-native-fast-image';
+import IconAntDesign from 'react-native-vector-icons/AntDesign';
+import { CitiesControl } from '../../../CitiesControl'
 
 const PIXELS_TO_SCROLL = 2000;
 
@@ -60,12 +61,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const {
 		navigation,
 		businessesList,
-		searchValue,
 		getBusinesses,
 		handleChangeBusinessType,
 		handleBusinessClick,
 		paginationProps,
-		handleChangeSearch,
 		businessId,
 		isGuestUser,
 		handleUpdateBusinessList,
@@ -77,11 +76,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const [orderingTheme] = useOrderingTheme()
 	const isFocused = useIsFocused();
 	const appState = useRef(AppState.currentState)
-	const searchBarRef = useRef<any>()
-	const [appStateVisible, setAppStateVisible] = useState(appState.current);
-	const isChewLayout = theme?.layouts?.header?.components?.layout?.type === 'chew'
-	const showCities = !orderingTheme?.theme?.business_listing_view?.components?.cities?.hidden
+	const isChewLayout = theme?.header?.components?.layout?.type === 'chew'
+	const hideCities = theme?.business_listing_view?.components?.cities?.hidden ?? true
 	const [refreshing] = useState(false);
+	const bgHeader =  orderingTheme?.theme?.business_listing_view?.components?.business_hero?.components?.image 
 	const styles = StyleSheet.create({
 		container: {
 			marginBottom: 0,
@@ -131,8 +129,18 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			borderColor: theme.colors.backgroundGray,
 			borderRadius: 8,
 			marginHorizontal: 40,
-			height: 45
-		}
+			minHeight: 45,
+			paddingVertical: 5,
+			paddingHorizontal: 20,
+			borderWidth: 1,
+			justifyContent: 'center'
+		},
+		businessSkeleton: {
+			borderRadius: 8,
+			marginRight: 20,
+			width: 56,
+			height: 56
+		},
 	});
 
 
@@ -155,16 +163,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	const timerId = useRef<any>(false)
 	const [favoriteIds, setFavoriteIds] = useState<any>([])
 	const chewOrderTypes = [{ name: t('DELIVERY', 'Delivery').toUpperCase(), value: 1 }, { name: t('PICKUP', 'Pickup').toUpperCase(), value: 2 }]
-
-	// const panResponder = useRef(
-	// 	PanResponder.create({
-	// 		onMoveShouldSetPanResponder: (e, gestureState) => {
-	// 			const { dx, dy } = gestureState;
-	// 			resetInactivityTimeout()
-	// 			return (Math.abs(dx) > 20) || (Math.abs(dy) > 20);
-	// 		},
-	// 	})
-	// ).current
+	const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
 	const handleMomentClick = () => {
 		if (isPreorderEnabled) {
@@ -184,11 +183,15 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			paginationProps.totalPages === paginationProps.currentPage
 		);
 
-		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore) {
+		if (y + PIXELS_TO_SCROLL > height && !businessesList.loading && hasMore && businessesList?.businesses?.length > 0) {
 			getBusinesses();
 		}
 	};
 
+	const convertToRadian = (value: number) => {
+		return value * Math.PI / 180
+	}
+
 	const getDistance = (lat1: any, lon1: any, lat2: any, lon2: any) => {
 		const R = 6371 // km
 		const dLat = convertToRadian(lat2 - lat1)
@@ -201,7 +204,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 
 	const resetInactivityTimeout = () => {
-		if(!logosLayout){
+		if (!logosLayout) {
 			clearTimeout(timerId.current)
 			timerId.current = setInterval(() => {
 				getBusinesses(true)
@@ -209,6 +212,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 		}
 	}
 
+	const handleChangeCity = (cityId: number | null) => {
+		changeCityFilter(orderState?.options?.city_id === cityId ? null : cityId)
+		setIsOpenCities(false)
+	}
+
 	useEffect(() => {
 		if (!businessesList?.loading) {
 			const fb = businessesList.businesses.filter((b) => b.featured === true && b?.open);
@@ -247,7 +255,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 
 	useEffect(() => {
-		if(!logosLayout){
+		if (!logosLayout) {
 			checkUserLocation()
 		}
 	}, [orderState?.options?.address?.location])
@@ -282,24 +290,44 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 
 	if (logosLayout) {
 		return (
-			<BusinessLogosContainer horizontal>
+			<BusinessLogosContainer
+				horizontal
+				showsHorizontalScrollIndicator={false}
+			>
 				{businessesList?.loading ? (
-						<Placeholder Animation={Fade}>
-							{[...Array(10).keys()].map(item => (
-								<PlaceholderLine key={item} width={56} height={56} />
+					<Placeholder Animation={Fade}>
+						<View style={{ flexDirection: 'row' }}>
+							{[...Array(10).keys()].map(i => (
+								<View style={styles.businessSkeleton} key={i}>
+									<PlaceholderLine style={{ width: '100%', height: '100%' }} />
+								</View>
 							))}
-						</Placeholder>
+						</View>
+					</Placeholder>
 				) : (
 					<>
 						{businessesList.businesses
-							?.filter(business => business?.slug !== actualSlug && business?.open)
+							?.filter(business => business?.open)
 							?.map(business => (
 								<TouchableOpacity
 									key={business?.id}
 									onPress={() => handleBusinessClick && handleBusinessClick(business)}
+									style={{
+										width: 60,
+										height: 60,
+										borderRadius: 8,
+										marginRight: 5
+									}}
 								>
 									<FastImage
-										style={{ width: 56, height: 56, marginRight: 20, borderRadius: 7.6 }}
+										style={{
+											width: 56,
+											height: 56,
+											marginRight: 20,
+											borderRadius: 8,
+											borderColor: theme.colors.primary,
+											borderWidth: business?.slug === actualSlug ? 2 : 0
+										}}
 										source={{
 											uri: business?.logo,
 											priority: FastImage.priority.normal,
@@ -315,7 +343,10 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 	}
 
 	return (
-		<ScrollView style={styles.container} onScroll={(e) => handleScroll(e)} showsVerticalScrollIndicator={false}
+		<IOScrollView
+			style={styles.container}
+			onScroll={(e) => handleScroll(e)}
+			showsVerticalScrollIndicator={false}
 			refreshControl={
 				<RefreshControl
 					refreshing={refreshing}
@@ -323,6 +354,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				/>
 			}
 		>
+			{enabledPoweredByOrdering && auth && (
+				<View style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', top: 20 }}>
+					<OText>
+						Powered By Ordering.co
+					</OText>
+				</View>
+			)}
 			<View style={{
 				height: !isPreOrderSetting && isChewLayout ? 150 : isChewLayout ? 200 : isFarAway ? 150 : 100,
 				marginTop: Platform.OS == 'ios' ? 0 : 50,
@@ -331,14 +369,9 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			>
 				{isChewLayout && (
 					<View style={{ marginTop: 30, paddingHorizontal: 30, flexDirection: 'row', justifyContent: 'space-between' }}>
-						<OText size={18} weight={700} color={theme.colors?.white}>
-							{t('WELCOME', 'Welcome')} {user?.name}!
+						<OText size={24} weight={700} color={theme.colors?.white}>
+							{t('WELCOME', 'Welcome')} {user?.name}
 						</OText>
-						<TouchableOpacity
-							onPress={() => searchBarRef?.current?.focus?.()}
-						>
-							<Ionicons name='search' style={{ ...styles.iconStyle, color: theme.colors?.white }} />
-						</TouchableOpacity>
 					</View>
 				)}
 				<Search isChewLayout={isChewLayout}>
@@ -415,7 +448,7 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</OrderControlContainer>
 				) : (
 					<>
-						{!isPreOrderSetting && (// cambiar
+						{isPreOrderSetting && (
 							<View style={{ paddingHorizontal: 30 }}>
 								<PreorderInput
 									isChewLayout={isChewLayout}
@@ -433,13 +466,14 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			</View>
 			{!isChewLayout ? (
 				<HeaderWrapper
-					source={theme.images.general.homeHero}
+					source={bgHeader ? { uri: bgHeader } : theme.images.backgrounds.business_list_header}
 					style={{ paddingTop: top + 20 }}
-					resizeMode='stretch'
+					resizeMode='cover'
 				>
 					{!auth && (
+
 						<TouchableOpacity onPress={() => navigation?.canGoBack() && navigation.goBack()} style={{ position: 'absolute', marginStart: 40, paddingVertical: 20 }}>
-							<OIcon src={theme.images.general.arrow_left} width={20} style={{ tintColor: theme.colors.white }} />
+							<IconAntDesign name='arrowleft' size={26} />
 						</TouchableOpacity>
 					)}
 				</HeaderWrapper>
@@ -449,47 +483,28 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 						handleChangeBusinessType={handleChangeBusinessType}
 						isChewLayout
 						chewOrderTypes={chewOrderTypes}
+						handleChangeType={setOrderTypeValue}
 					/>
 				</OrderTypesContainer>
 			)}
-			{!businessId && (
-				<SearchBar
-					forwardRef={searchBarRef}
-					onSearch={handleChangeSearch}
-					searchValue={searchValue}
-					lazyLoad
-					hideIcon
-					isCancelXButtonShow={!!searchValue}
-					onCancel={() => handleChangeSearch('')}
-					placeholder={t('SEARCH', 'Search')}
-					height={50}
-					isDisabled={!businessTypes}
-					inputContainerStyles={styles.inputContainerStyles}
-					containerStyles={{
-						marginHorizontal: 40,
-						marginTop: 20
-					}}
-					inputStyle={{ ...styles.searchInput, ...Platform.OS === 'ios' ? { paddingBottom: 6 } : { paddingBottom: 4 } }}
-					onSubmitEditing={() => { configs?.advanced_business_search_enabled?.value === '1' && navigation.navigate('BusinessSearch', { businessTypes, defaultTerm: searchValue }) }}
-				/>
-			)}
 
-			{showCities && (
-				<View style={{ marginTop: 10 }}>
-					<OButton
-						onClick={() => setIsOpenCities(true)}
-						text={citiesState?.cities?.find((city : any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
-						style={styles?.buttonCityStyle}
-						textStyle={{ color: theme.colors.backgroundGray, fontWeight: 'bold', fontSize: 18 }}
-					/>
+			{!hideCities && orderTypeValue === 2 && (
+				<View style={{ marginTop: 20 }}>
+					<TouchableOpacity
+						style={styles.buttonCityStyle}
+						onPress={() => setIsOpenCities(true)}
+						disabled={orderState?.loading}
+					>
+						<OText size={18} color={theme.colors.backgroundGray} weight='bold' style={{ textAlign: 'center' }}>
+							{citiesState?.cities?.find((city: any) => city?.id === orderState?.options?.city_id)?.name || t('FILTER_BY_CITY', 'Filter by city')}
+						</OText>
+					</TouchableOpacity>
 				</View>
 			)}
-			<OrderProgressWrapper>
-				<OrderProgress
-					{...props}
-					isFocused={isFocused}
-				/>
-			</OrderProgressWrapper>
+			<OrderProgress
+				{...props}
+				isFocused={isFocused}
+			/>
 			{
 				!businessId && !props.franchiseId && featuredBusiness && featuredBusiness.length > 0 && (
 					<FeaturedWrapper>
@@ -522,19 +537,23 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					</FeaturedWrapper>
 				)
 			}
+			{!isChewLayout && (
+				<>
+					<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
+					{
+						!businessId && !props.franchiseId && (
+							<HighestRatedBusinesses
+								onBusinessClick={handleBusinessClick}
+								navigation={navigation}
+								favoriteIds={favoriteIds}
+								setFavoriteIds={setFavoriteIds}
+							/>
+						)
+					}
+				</>
+			)}
 			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			{
-				!businessId && !props.franchiseId && (
-					<HighestRatedBusinesses
-						onBusinessClick={handleBusinessClick}
-						navigation={navigation}
-						favoriteIds={favoriteIds}
-						setFavoriteIds={setFavoriteIds}
-					/>
-				)
-			}
-			<View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />
-			<ListWrapper>
+			<ListWrapper style={{ paddingHorizontal: isChewLayout ? 20 : 40 }}>
 				{!businessId && (
 					<BusinessTypeFilter
 						images={props.images}
@@ -556,6 +575,8 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 					(business: any, i: number) => (
 						<BusinessController
 							key={`${business.id}_` + i}
+							enableIntersection
+							isCustomLayout={isChewLayout}
 							business={business}
 							isBusinessOpen={business.open}
 							handleCustomClick={handleBusinessClick}
@@ -632,27 +653,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 				onClose={() => setIsOpenCities(false)}
 				title={t('SELECT_A_CITY', 'Select a city')}
 			>
-				<View style={{ padding: 40, width: '100%' }}>
-					{citiesState?.cities?.map((city : any) => (
-						<TouchableOpacity
-							key={city?.id}
-							style={{
-								padding: 10,
-								borderBottomWidth: 1,
-								borderBottomColor: orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.backgroundGray,
-								marginBottom: 10,
-							}}
-							onPress={() => changeCityFilter(city?.id)}
-							disabled={orderState?.loading}
-						>
-							<OText color={orderState?.options?.city_id === city?.id ? theme.colors.primary : theme.colors.black}>
-								{city?.name}
-							</OText>
-						</TouchableOpacity>
-					))}
-				</View>
+				<CitiesControl
+					cities={citiesState?.cities}
+					onClose={() => setIsOpenCities(false)}
+					handleChangeCity={handleChangeCity}
+				/>
 			</OModal>
-		</ScrollView>
+		</IOScrollView>
 	);
 };
 

package/themes/original/src/components/BusinessesListing/Layout/Original/styles.tsx

@@ -60,28 +60,20 @@ export const WrapMomentOption = styled.TouchableOpacity`
 
 export const HeaderWrapper = styled.ImageBackground`
 	width: 100%;
-	height: 270px;
+  height: 270px;
 	padding: 20px 40px;
 	background-color: transparent;
 `;
 
 export const ListWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	padding-horizontal: 40px;
 `;
 
 export const FeaturedWrapper = styled.View`
 	background-color: ${(props: any) => props.theme.colors.backgroundLight};
-	height: 220px;
 	paddingVertical: 30px;
 `;
 
-export const OrderProgressWrapper = styled.View`
-  margin-top: 37px;
-  margin-bottom: 20px;
-	padding-horizontal: 40px;
-`
-
 export const FarAwayMessage = styled.View`
   flex-direction: row;
   align-items: center;