diff --git a/src/components/RestaurantCard.js b/src/components/RestaurantCard.js index 1b17da1a7..b396f5141 100644 --- a/src/components/RestaurantCard.js +++ b/src/components/RestaurantCard.js @@ -4,6 +4,9 @@ import {TimingBadge} from '../navigation/checkout/components/RestaurantBadges'; import {RestaurantBadge} from './RestaurantBadge'; import {RestaurantTag} from './RestaurantTag'; import React from 'react'; +import {getRestaurantIsAvailable} from '../utils/checkout'; +import i18n from '../i18n'; +import Svg, {Path} from 'react-native-svg'; const logoSize = 64; @@ -16,110 +19,161 @@ const OneLineText = props => ( </Text> ); +const styles = StyleSheet.create({ + item: { + marginHorizontal: 16, + marginTop: 16, + borderRadius: 8, + overflow: 'hidden', + marginBottom: 0, + // backgroundColor: backgroundColor, + }, + images: { + width: '100%', + }, + banner: { + aspectRatio: '16/9', + width: '100%', + marginBottom: -50, + }, + overlay: { + position: 'absolute', + width: '100%', + backgroundColor: 'rgba(0,0,0,0.5)', + justifyContent: 'center', + alignItems: 'center', + aspectRatio: '16/9', + color: 'white', + }, + closedLabel: { + fontWeight: 500, + fontSize: 16, + color: 'white', + }, + closedIcon: { + height: 32, + width: 32, + stroke: "white" + }, + logoWrapper: { + borderRadius: 16, + display: 'inline-flex', + marginLeft: 16, + padding: 8, + position: 'relative', + boxSizing: 'border-box', + width: logoSize + 16, + }, + logo: { + width: logoSize, + aspectRatio: '1', + borderRadius: 8, + }, + content: { + width: '100%', + display: 'flex', + flexDirection: 'column', + paddingTop: 8, + paddingRight: 24, + paddingBottom: 24, + paddingLeft: 24, + gap: 12, + }, + name: { + fontWeight: '600', + fontSize: 18, + }, + timing: { + alignItems: 'center', + alignSelf: 'left', + borderRadius: 4, + }, + badgesWrapper: { + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + gap: 8, + left: 0, + padding: 12, + position: 'absolute', + top: 0, + width: '100%', + }, + details: { + overflow: 'hidden', + whiteSpace: 'nowrap', + display: 'flex', + flexDirection: 'row', + gap: 4, + }, + detailsText: { + fontSize: 14, + opacity: 0.75, + }, +}); + export const RestaurantCard = ({restaurant}) => { - const backgroundColor = useColorModeValue('white', '#121212'); + // const backgroundColor = useColorModeValue('white', '#121212'); + // const backgroundColor = useColorModeValue('white', '#222222'); + const backgroundColor = useColorModeValue('white', '#1a1a1a'); + const isClosed = getRestaurantIsAvailable(restaurant); + const overlayBackgroundColor = useColorModeValue( + 'rgba(0,0,0,0.5)', + 'rgba(0,0,0,0.75)', + ); // const backgroundColor = useColorModeValue('white', '#FFFFFF16'); - const styles = StyleSheet.create({ - item: { - marginHorizontal: 16, - marginTop: 16, - borderRadius: 8, - overflow: 'hidden', - marginBottom: 0, - backgroundColor: backgroundColor, - }, - images: { - width: '100%', - }, - banner: { - aspectRatio: '16/9', - width: '100%', - marginBottom: -50, - }, - logoWrapper: { - // backgroundColor: '#fff', - backgroundColor: backgroundColor, - borderRadius: 16, - display: 'inline-flex', - marginLeft: 16, - padding: 8, - position: 'relative', - boxSizing: 'border-box', - width: logoSize + 16, - }, - logo: { - width: logoSize, - aspectRatio: '1', - borderRadius: 8, - }, - content: { - width: '100%', - display: 'flex', - flexDirection: 'column', - paddingTop: 8, - paddingRight: 24, - paddingBottom: 24, - paddingLeft: 24, - gap: 8, - }, - name: { - fontWeight: '600', - fontSize: 18, - }, - timing: { - alignItems: 'center', - alignSelf: 'left', - borderRadius: 4, - }, - badgesWrapper: { - display: 'flex', - flexDirection: 'row', - flexWrap: 'wrap', - gap: 8, - left: 0, - padding: 12, - position: 'absolute', - top: 0, - width: '100%', - }, - details: { - overflow: "hidden", - whiteSpace: 'nowrap', - display: 'flex', - flexDirection: "row", - gap: 4 - }, - detailsText: { - fontSize: 14, - opacity: 0.75, - }, - }); - return ( - <View style={styles.item}> + <View style={[styles.item, {backgroundColor}]}> <View style={styles.images}> <View styles={styles.bannerWrapper}> <Image style={styles.banner} resizeMode="cover" - source={{uri: restaurant.bannerImage || restaurant.image }} + source={{uri: restaurant.bannerImage || restaurant.image}} /> </View> - <View style={styles.logoWrapper}> + {restaurant.badges && ( + <View style={styles.badgesWrapper}> + {restaurant.badges.map((badge, i) => ( + <RestaurantBadge type={badge} key={i} /> + ))} + </View> + )} + {isClosed ? ( + <View + style={[styles.overlay, {backgroundColor: overlayBackgroundColor}]}> + <Svg + style={[styles.closedIcon]} + xmlns="http://www.w3.org/2000/svg" + // width={22} + // height={22} + viewBox="0 0 24 24" + strokeWidth="1.5" + fill="none" + strokeLinecap="round" + strokeLinejoin="round"> + <Path d="M13.55 17.733a5.806 5.806 0 0 1 -7.356 -4.052a5.81 5.81 0 0 1 1.537 -5.627l2.054 -2.054l7.165 7.165" /> + <Path d="M4 20l3.5 -3.5" /> + <Path d="M15 4l-3.5 3.5" /> + <Path d="M20 9l-3.5 3.5" /> + <Path d="M16 16l4 4" /> + <Path d="M20 16l-4 4" /> + </Svg> + <Text style={styles.closedLabel} numberOfLines={1}> + {i18n.t('NOT_AVAILABLE_ATM')} + </Text> + </View> + ) : ( + '' + )} + <View style={[styles.logoWrapper, {backgroundColor}]}> <Image style={styles.logo} resizeMode="cover" source={{uri: restaurant.image}} /> </View> - { restaurant.badges && - <View style={styles.badgesWrapper}> - {restaurant.badges.map((badge, i) => ( - <RestaurantBadge type={badge} key={i} /> - ))} - </View> - } </View> <View style={styles.content}> <View> @@ -129,7 +183,7 @@ export const RestaurantCard = ({restaurant}) => { <TimingBadge restaurant={restaurant} /> </View> <View style={styles.details}> - { restaurant.tags?.length > 0 ? ( + {restaurant.tags?.length > 0 ? ( restaurant.tags.map((tag, i) => ( <RestaurantTag key={i} text={tag} /> )) diff --git a/src/navigation/checkout/components/RestaurantBadges.js b/src/navigation/checkout/components/RestaurantBadges.js index b66f383e5..7f195c7bf 100644 --- a/src/navigation/checkout/components/RestaurantBadges.js +++ b/src/navigation/checkout/components/RestaurantBadges.js @@ -3,6 +3,7 @@ import {Badge, HStack, Icon, Text, useColorModeValue} from 'native-base'; import FontAwesome from 'react-native-vector-icons/FontAwesome'; import { getNextShippingTimeAsText, + getRestaurantIsAvailable, shouldShowPreOrder, } from '../../../utils/checkout'; import React from 'react'; @@ -36,6 +37,7 @@ export const CategoryBadge = ({label}) => { export const TimingBadge = ({restaurant}) => { const color = useColorModeValue('#000', '#fff'); + const isClosed = getRestaurantIsAvailable(restaurant); const shippingTime = getNextShippingTimeAsText(restaurant); const showPreOrder = shouldShowPreOrder(restaurant); @@ -56,7 +58,7 @@ export const TimingBadge = ({restaurant}) => { <Path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /> <Path d="M12 7v5l3 3" /> </Svg> - ) : ( + ) : !isClosed ? ( <Svg xmlns="http://www.w3.org/2000/svg" width={19} @@ -65,9 +67,29 @@ export const TimingBadge = ({restaurant}) => { viewBox="0 0 18 11.38"> <Path d="M14.52 4.41c-.29 0-.58.05-.85.12l-.72-2.23s-.02-.06-.04-.09v-.03l.8-.14v.47c0 .1.08.17.17.17h1c.1 0 .17-.08.17-.17V1.22c0-.2-.09-.39-.24-.53a.684.684 0 00-.55-.16l-2.49.43a.71.71 0 00-.49.37c-.07.15-.09.32-.05.48H6.52l-.29-.74h.86c.33 0 .59-.24.59-.54s-.27-.54-.59-.54h-2.1c-.33 0-.59.24-.59.54 0 .23.15.42.37.5l.56 1.44-.79 1.63a3.5 3.5 0 00-.97-.14c-1.98 0-3.58 1.66-3.58 3.7s1.61 3.7 3.58 3.7c1.66 0 3.07-1.19 3.47-2.79l.04.13c.07.25.27.44.52.49.25.05.5-.05.66-.25l3.8-5 .37 1.16c-.85.64-1.4 1.64-1.4 2.78 0 1.92 1.56 3.48 3.48 3.48s3.48-1.56 3.48-3.48-1.56-3.48-3.48-3.48zm2.17 3.48c0 1.19-.97 2.17-2.17 2.17s-2.17-.97-2.17-2.17.97-2.17 2.17-2.17 2.17.97 2.17 2.17zM5.83 7.67c0 1.28-1 2.32-2.24 2.32S1.35 8.95 1.35 7.67s1-2.32 2.24-2.32 2.24 1.04 2.24 2.32zM6.08 5c-.1-.1-.2-.19-.31-.27l.15-.31.16.58zm4.87-1.8L8.04 7.03 6.98 3.2h3.96z" /> </Svg> + ) : ( + <Svg + xmlns="http://www.w3.org/2000/svg" + width={22} + height={22} + viewBox="0 0 24 24" + strokeWidth="1.5" + stroke={color} + fill="none" + strokeLinecap="round" + strokeLinejoin="round"> + <Path d="M13.55 17.733a5.806 5.806 0 0 1 -7.356 -4.052a5.81 5.81 0 0 1 1.537 -5.627l2.054 -2.054l7.165 7.165" /> + <Path d="M4 20l3.5 -3.5" /> + <Path d="M15 4l-3.5 3.5" /> + <Path d="M20 9l-3.5 3.5" /> + <Path d="M16 16l4 4" /> + <Path d="M20 16l-4 4" /> + </Svg> )} - <Text style={showPreOrder ? styles.badgeTextPreOrder : styles.badgeText}>{shippingTime}</Text> + <Text style={showPreOrder || isClosed ? styles.badgeTextPreOrder : styles.badgeText}> + {shippingTime} + </Text> </HStack> ); }; diff --git a/src/utils/checkout.js b/src/utils/checkout.js index eff51aa50..a00af78b9 100644 --- a/src/utils/checkout.js +++ b/src/utils/checkout.js @@ -58,6 +58,14 @@ export function getNextShippingTimeAsText(restaurant, now) { return i18n.t('NOT_AVAILABLE_ATM') } +export function getRestaurantIsAvailable(restaurant) { + if (!restaurant.timing.delivery && !restaurant.timing.collection) { + return true; + } else { + return false; + } +} + export function getRestaurantCaption(restaurant) { return restaurant.description || restaurant.address.streetAddress } @@ -67,7 +75,7 @@ export function shouldShowPreOrder(restaurant) { if (restaurant.timing.delivery.range && Array.isArray(restaurant.timing.delivery.range)) { const duration = moment.duration(moment(restaurant.timing.delivery.range[0]).diff(moment())); - return duration.asHours() > 1; + return duration.asHours() > .75; } }