change: display the next shipping time range instead of the opening hours

Author: vladimir-8

src/components/RestaurantCard.js

@@ -3,7 +3,7 @@ import { Text } from 'native-base';
 import { Image, StyleSheet, View } from 'react-native';
 import { TimingBadge } from '../navigation/checkout/components/RestaurantBadges';
 import { useBackgroundContainerColor } from '../styles/theme';
-import { isRestaurantAvailable } from '../utils/checkout';
+import { isRestaurantOrderingAvailable } from '../utils/checkout';
 import { RestaurantBadge } from './RestaurantBadge';
 import { RestaurantTag } from './RestaurantTag';
 import { RestaurantBanner } from './RestaurantBanner';
@@ -92,7 +92,7 @@ const styles = StyleSheet.create({
 
 export const RestaurantCard = ({ restaurant }) => {
   const backgroundColor = useBackgroundContainerColor();
-  const isAvailable = isRestaurantAvailable(restaurant);
+  const isAvailable = isRestaurantOrderingAvailable(restaurant);
 
   return (
     <View style={[styles.item, { backgroundColor }]}>

src/i18n/locales/en.json

@@ -425,6 +425,7 @@
     "RESTAURANT_PRODUCT_OPTIONS": "Product options",
     "RESTAURANT_PRE_ORDER": "Pre-order",
     "RESTAURANT_CLOSED_BUT_OPENS": "This restaurant is closed now but opens {{ datetime }}. You can still order for later on though!",
+    "RESTAURANT_CLOSED_PRE_ORDER": "This restaurant is closed now. You can still order for {{ datetime }} though!",
     "RESTAURANT_CLOSED_AND_NOT_AVAILABLE": "This restaurant is closed and not available until {{ datetime }}.",
     "CHECKOUT_AS_GUEST": "Checkout as guest",
     "GUEST_CHECKOUT_ORDER_EMAIL_HELP": "To send you updates about your order",

src/navigation/checkout/Restaurant.js

@@ -221,7 +221,7 @@ function Restaurant(props) {
             {i18n.t('RESTAURANT_OPENING_HOURS')}
           </Text>
           <OpeningHours
-            openingHoursSpecification={props.openingHoursSpecification}
+            openingHoursSpecification={openingHoursSpecification}
           />
         </Box>
         <Pressable

src/navigation/checkout/components/CartFooterButton.js

@@ -7,7 +7,7 @@ import { Animated, View } from 'react-native';
 import { formatPrice } from '../../../utils/formatting';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import {
-  isRestaurantAvailable,
+  isRestaurantOrderingAvailable,
   shouldShowPreOrder,
 } from '../../../utils/checkout';
 import { useSolidButtonTextColor } from '../../../styles/theme';
@@ -65,7 +65,7 @@ class CartFooterButton extends Component {
   render() {
     const { cart, restaurant } = this.props;
 
-    const isAvailable = isRestaurantAvailable(restaurant);
+    const isAvailable = isRestaurantOrderingAvailable(restaurant);
     const showPreOrder = shouldShowPreOrder(restaurant);
 
     if (!cart || cart.items.length === 0 || !isAvailable) {

src/navigation/checkout/components/RestaurantBadges.js

@@ -6,7 +6,7 @@ import Svg, { Path } from 'react-native-svg';
 import { useBaseTextColor } from '../../../styles/theme';
 import {
   getNextShippingTimeAsText,
-  isRestaurantAvailable,
+  isRestaurantOrderingAvailable,
   shouldShowPreOrder,
 } from '../../../utils/checkout';
 
@@ -49,9 +49,9 @@ export const CategoryBadge = ({ label }) => {
 export const TimingBadge = ({ restaurant }) => {
   const color = useBaseTextColor();
 
-  const isAvailable = isRestaurantAvailable(restaurant);
-  const shippingTime = getNextShippingTimeAsText(restaurant);
+  const isAvailable = isRestaurantOrderingAvailable(restaurant);
   const showPreOrder = shouldShowPreOrder(restaurant);
+  const shippingTime = getNextShippingTimeAsText(restaurant);
 
   return (
     <HStack style={[styles.badge]}>

src/navigation/checkout/components/RestaurantProfile.js

@@ -15,8 +15,8 @@ import DangerAlert from '../../../components/DangerAlert';
 import i18n from '../../../i18n';
 import moment from 'moment/moment';
 import {
-  isRestaurantAvailable,
-  isRestaurantOpeningSoon,
+  getNextShippingTime,
+  isRestaurantOrderingAvailable,
   shouldShowPreOrder,
 } from '../../../utils/checkout';
 import { RestaurantBanner } from '../../../components/RestaurantBanner';
@@ -96,17 +96,26 @@ const styles = StyleSheet.create({
 });
 
 function OpeningHoursWarning({
-  currentTimeSlot,
-  isAvailable,
-  isOpeningSoon,
+  openingHoursSpecification,
+  isOrderingAvailable,
   showPreOrder,
+  nextShippingTime,
 }) {
-  if (showPreOrder) {
+  if (!isOrderingAvailable) {
+    //FIXME: this is based on the regular opening hours
+    // and does not take closing rules ("Holidays") into account
+    const nextOpeningHours = openingHoursSpecification.currentTimeSlot.timeSlot;
+
+    if (!nextOpeningHours) {
+      // when restaurant is disabled it will be shown on the banner
+      // and in the 'timing' section
+      return null;
+    }
+
     return (
       <DangerAlert
-        adjustsFontSizeToFit={true}
-        text={`${i18n.t('RESTAURANT_CLOSED_BUT_OPENS', {
-          datetime: moment(currentTimeSlot.timeSlot[0])
+        text={`${i18n.t('RESTAURANT_CLOSED_AND_NOT_AVAILABLE', {
+          datetime: moment(nextOpeningHours[0])
             .calendar(moment(), {
               sameElse: 'llll',
             })
@@ -116,11 +125,12 @@ function OpeningHoursWarning({
     );
   }
 
-  if (!isAvailable && isOpeningSoon) {
+  if (showPreOrder) {
     return (
       <DangerAlert
-        text={`${i18n.t('RESTAURANT_CLOSED_AND_NOT_AVAILABLE', {
-          datetime: moment(currentTimeSlot.timeSlot[0])
+        adjustsFontSizeToFit={true}
+        text={`${i18n.t('RESTAURANT_CLOSED_PRE_ORDER', {
+          datetime: moment(nextShippingTime.range[0])
             .calendar(moment(), {
               sameElse: 'llll',
             })
@@ -130,13 +140,12 @@ function OpeningHoursWarning({
     );
   }
 
-  // when restaurant is not available
-  // it will be shown on the banner and in the 'timing' section
+  // no warnings
   return null;
 }
 
-function BannerOverlay({ isAvailable, showPreOrder }) {
-  if (!isAvailable) {
+function BannerOverlay({ isOrderingAvailable, showPreOrder }) {
+  if (!isOrderingAvailable) {
     return <RestaurantNotAvailableBannerOverlay />;
   }
 
@@ -152,28 +161,26 @@ function RestaurantProfile({ restaurant, openingHoursSpecification, onInfo }) {
   const stroke = useBaseTextColor();
   const textSecondary = useSecondaryTextColor();
 
-  const currentTimeSlot = useMemo(
-    () => openingHoursSpecification.currentTimeSlot,
-    [openingHoursSpecification],
-  );
-
-  const isAvailable = useMemo(
-    () => isRestaurantAvailable(restaurant),
-    [restaurant],
-  );
-  const isOpeningSoon = useMemo(
-    () => isRestaurantOpeningSoon(restaurant),
+  const isOrderingAvailable = useMemo(
+    () => isRestaurantOrderingAvailable(restaurant),
     [restaurant],
   );
   const showPreOrder = useMemo(
     () => shouldShowPreOrder(restaurant),
     [restaurant],
   );
+  const nextShippingTime = useMemo(
+    () => getNextShippingTime(restaurant),
+    [restaurant],
+  );
 
   return (
     <View style={([styles.profile], { backgroundColor })}>
       <RestaurantBanner src={restaurant.bannerImage ?? restaurant.image} />
-      <BannerOverlay isAvailable={isAvailable} showPreOrder={showPreOrder} />
+      <BannerOverlay
+        isOrderingAvailable={isOrderingAvailable}
+        showPreOrder={showPreOrder}
+      />
       <View style={styles.detailsWrapper}>
         <View style={[styles.logoWrapper, { backgroundColor }]}>
           <View style={styles.logoWrapperShadow}>
@@ -200,10 +207,10 @@ function RestaurantProfile({ restaurant, openingHoursSpecification, onInfo }) {
       </View>
       <View style={styles.content}>
         <OpeningHoursWarning
-          currentTimeSlot={currentTimeSlot}
-          isAvailable={isAvailable}
-          isOpeningSoon={isOpeningSoon}
+          openingHoursSpecification={openingHoursSpecification}
+          isOrderingAvailable={isOrderingAvailable}
           showPreOrder={showPreOrder}
+          nextShippingTime={nextShippingTime}
         />
         <View style={{ display: 'flex', flexDirection: 'row', gap: 4 }}>
           <TimingBadge restaurant={restaurant} />

src/utils/checkout.js

@@ -11,13 +11,6 @@ function round5(x) {
 }
 
 function timingAsText(timing, now) {
-  // FIXME
-  // This hotfixes a bug on the API
-  // https://github.com/coopcycle/coopcycle-web/issues/2213
-  if (timing.range[0] === timing.range[1]) {
-    return i18n.t('NOT_AVAILABLE_ATM');
-  }
-
   const lower = moment.parseZone(timing.range[0]);
 
   if (timing.fast) {
@@ -43,18 +36,38 @@ function timingAsText(timing, now) {
   return lower.calendar(now);
 }
 
+export function getNextShippingTime(restaurant) {
+
+  const timing = restaurant.timing.delivery || restaurant.timing.collection;
+
+  if (!timing) {
+    return null;
+  }
+
+  // FIXME
+  // This hotfixes a bug on the API
+  // https://github.com/coopcycle/coopcycle-web/issues/2213
+  if (!Array.isArray(timing.range)) {
+    return null;
+  }
+  if (timing.range[0] === timing.range[1]) {
+    return null;
+  }
+
+  return timing;
+}
+
+
 export function getNextShippingTimeAsText(restaurant, now) {
   now = now || moment();
 
-  if (restaurant.timing.delivery) {
-    return timingAsText(restaurant.timing.delivery, now);
-  }
+  const timing = getNextShippingTime(restaurant);
 
-  if (restaurant.timing.collection) {
-    return timingAsText(restaurant.timing.collection, now);
+  if (!timing) {
+    return i18n.t('NOT_AVAILABLE_ATM');
   }
 
-  return i18n.t('NOT_AVAILABLE_ATM');
+  return timingAsText(timing, now);
 }
 
 export function getRestaurantCaption(restaurant) {
@@ -65,23 +78,9 @@ export function getRestaurantCaption(restaurant) {
  * While the restaurant might be available (for ordering)
  * it might be either opened or closed at the moment
  */
-export function isRestaurantAvailable(restaurant) {
-  if (!restaurant.timing.delivery && !restaurant.timing.collection) {
-    return false;
-  }
-
-  // FIXME
-  // This hotfixes a bug on the API
-  // https://github.com/coopcycle/coopcycle-web/issues/2213
-  if (
-    restaurant.timing.delivery &&
-    Array.isArray(restaurant.timing.delivery.range) &&
-    restaurant.timing.delivery.range[0] === restaurant.timing.delivery.range[1]
-  ) {
-    return false;
-  }
-
-  return true;
+export function isRestaurantOrderingAvailable(restaurant) {
+  const timing = getNextShippingTime(restaurant);
+  return Boolean(timing);
 }
 
 /**
@@ -105,7 +104,7 @@ export function isRestaurantOpeningSoon(restaurant) {
  * If the pre-order is soon, we show a regular order button
  */
 export function shouldShowPreOrder(restaurant) {
-  if (!isRestaurantAvailable(restaurant)) {
+  if (!isRestaurantOrderingAvailable(restaurant)) {
     return false;
   }