Merge pull request #1689 from coopcycle/restaurant-availability

Add check and design for available restaurant
coopcycle · Mar 5, 2024 · abaae8e · abaae8e
2 parents a5c8467 + 51cafb7
commit abaae8e
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 91 deletions.
diff --git 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
@@ -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
@@ -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;
     }
   }