fix(bookings): Biennale Tecnologia (#470)

* fix(bookings): biennale tecnologia bookings * fix(bookings): day view for events, descr in booking modal,fix navigate to place from booking screen * fix(bookings): prevent crashes on successful bookings * fix(bookings): remove infocovid and fix check-in time (maybe) * fix(bookings): fix title of booking screen * fix(bookings): refetch query after check-in --------- Co-authored-by: Emanuele Coricciati <ema@MacBook-Air-di-Emanuele.local> Co-authored-by: Luca Pezzolla <me@lucapezzolla.com> Co-authored-by: Mobile AppleDev <mobile@studenti.polito.it>
polito · Apr 15, 2024 · 553071a · 553071a
1 parent 67cbb57
commit 553071a
Show file tree

Hide file tree

Showing 12 changed files with 161 additions and 146 deletions.
diff --git a/assets/translations/en.json b/assets/translations/en.json
@@ -33,8 +33,6 @@
   "bookingSeatScreen": {
     "confirm": "Confirm booking",
     "deadlineExpired": "We're sorry,\nthe deadline to book for this round has passed",
-    "informationAcknowledgment": "I declare that I have read it\nof the ",
-    "informationAcknowledgmentLink": "COVID 19 emergency information",
     "noSeatSelected": "No seat",
     "noSeatsAvailable": "We're sorry,\nthere are no places available",
     "seatStatus": {

diff --git a/assets/translations/it.json b/assets/translations/it.json
@@ -33,8 +33,6 @@
   "bookingSeatScreen": {
     "confirm": "Conferma prenotazione",
     "deadlineExpired": "Siamo spiacenti,\nè scaduto il termine ultimo per potersi prenotare a questo turno",
-    "informationAcknowledgment": "Dichiaro di aver preso visione \ndell' ",
-    "informationAcknowledgmentLink": "Informativa emergenza COVID 19",
     "noSeatSelected": "Nessuna",
     "noSeatsAvailable": "Siamo spiacenti,\nnon ci sono posti disponibili",
     "seatStatus": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "@miblanchard/react-native-slider": "^2.2.0",
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
     "@orama/orama": "^2.0.0-beta.8",
-    "@polito/api-client": "^1.0.0-ALPHA.58",
+    "@polito/api-client": "^1.0.0-ALPHA.60",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-clipboard/clipboard": "^1.12.1",
     "@react-native-community/blur": "^4.3.0",

diff --git a/src/core/queries/bookingHooks.ts b/src/core/queries/bookingHooks.ts
@@ -6,9 +6,9 @@ import { DateTime } from 'luxon';
 import { pluckData } from '../../utils/queries';
 
 export const BOOKINGS_QUERY_KEY = ['bookings'];
-export const BOOKINGS_TOPICS_QUERY_KEY = ['bookings', 'topics'];
-export const BOOKINGS_SLOTS_QUERY_KEY = ['bookings', 'slots'];
-export const BOOKINGS_SEATS_QUERY_KEY = ['bookings', 'seats'];
+export const BOOKINGS_TOPICS_QUERY_KEY = ['booking', 'topics'];
+export const BOOKINGS_SLOTS_QUERY_KEY = ['booking', 'slots'];
+export const BOOKINGS_SEATS_QUERY_KEY = ['booking', 'seats'];
 
 const useBookingClient = (): BookingsApi => {
   return new BookingsApi();

diff --git a/src/features/agenda/screens/BookingScreen.tsx b/src/features/agenda/screens/BookingScreen.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Linking,
@@ -7,12 +7,13 @@ import {
   ScrollView,
   StyleSheet,
   View,
+  useWindowDimensions,
 } from 'react-native';
 import Barcode from 'react-native-barcode-svg';
 
 import { faCheckCircle, faLocation } from '@fortawesome/free-solid-svg-icons';
 import { Card } from '@lib/ui/components/Card';
-import { CtaButton, CtaButtonSpacer } from '@lib/ui/components/CtaButton';
+import { CtaButton } from '@lib/ui/components/CtaButton';
 import { CtaButtonContainer } from '@lib/ui/components/CtaButtonContainer';
 import { Icon } from '@lib/ui/components/Icon';
 import { ListItem } from '@lib/ui/components/ListItem';
@@ -30,13 +31,15 @@ import { isToday } from '@lib/ui/utils/calendar';
 import { Booking } from '@polito/api-client';
 import { NativeStackScreenProps } from '@react-navigation/native-stack';
 
+import { inRange } from 'lodash';
 import { DateTime, IANAZone } from 'luxon';
 
 import { BottomBarSpacer } from '../../../core/components/BottomBarSpacer';
 import { useFeedbackContext } from '../../../core/contexts/FeedbackContext';
 import { useConfirmationDialog } from '../../../core/hooks/useConfirmationDialog';
 import { useGeolocation } from '../../../core/hooks/useGeolocation';
 import { useOfflineDisabled } from '../../../core/hooks/useOfflineDisabled';
+import { useTitlesStyles } from '../../../core/hooks/useTitlesStyles';
 import {
   useDeleteBooking,
   useGetBookings,
@@ -61,6 +64,7 @@ export const BookingScreen = ({ navigation, route }: Props) => {
   const { setFeedback } = useFeedbackContext();
   const { getCurrentPosition, computeDistance } = useGeolocation();
   const { colors, palettes, spacing } = useTheme();
+  const theme = useTheme();
   const bookingsQuery = useGetBookings();
   const deleteBookingMutation = useDeleteBooking(id);
   const updateBookingMutation = useUpdateBooking();
@@ -74,6 +78,18 @@ export const BookingScreen = ({ navigation, route }: Props) => {
   const booking = bookingsQuery.data?.find((e: Booking) => e.id === id);
   const title = booking?.topic?.title ?? '';
   const subTopicTitle = booking?.subtopic?.title ?? '';
+  const titleStyles = useTitlesStyles(theme);
+  const { width } = useWindowDimensions();
+  const description = booking?.description;
+  const screenTitle = description ? description : title;
+  useEffect(() => {
+    if (!bookingsQuery.data) return;
+    if (description) {
+      navigation.setOptions({
+        headerTitle: title,
+      });
+    }
+  }, [bookingsQuery, titleStyles.headerStyle, width, description, title]);
 
   const hasCheckIn = useMemo(
     () =>
@@ -83,6 +99,11 @@ export const BookingScreen = ({ navigation, route }: Props) => {
           zone: IANAZone.create('Europe/Rome'),
         }),
       ) &&
+      inRange(
+        Date.now(),
+        booking?.startsAt.getTime(),
+        booking?.endsAt.getTime(),
+      ) &&
       booking?.locationCheck?.enabled &&
       bookingLocationHasValidCoordinates(booking?.locationCheck),
     [booking],
@@ -115,6 +136,7 @@ export const BookingScreen = ({ navigation, route }: Props) => {
           })
           .then(() => {
             setFeedback({ text: t('bookingScreen.checkInFeedback') });
+            bookingsQuery.refetch();
           });
       } else {
         setFeedback({ text: t('bookingScreen.checkLocationErrorFeedback') });
@@ -153,7 +175,10 @@ export const BookingScreen = ({ navigation, route }: Props) => {
       >
         <SafeAreaView>
           <View style={{ padding: spacing[5] }} accessible>
-            <ScreenTitle style={{ marginBottom: spacing[2] }} title={title} />
+            <ScreenTitle
+              style={{ marginBottom: spacing[2] }}
+              title={screenTitle}
+            />
             {subTopicTitle && (
               <Text variant="caption" style={{ marginBottom: spacing[1] }}>
                 {subTopicTitle}
@@ -225,43 +250,47 @@ export const BookingScreen = ({ navigation, route }: Props) => {
               )}
             </Card>
           </Section>
-          {hasCheckIn && <CtaButtonSpacer />}
-          {canBeCancelled && <CtaButtonSpacer />}
-          <BottomBarSpacer />
         </SafeAreaView>
       </ScrollView>
-      <CtaButtonContainer absolute={true}>
-        {hasCheckIn && (
-          <CtaButton
-            title={
-              completedCheckIn
-                ? t('bookingScreen.checkInFeedback')
-                : t('bookingScreen.checkIn')
-            }
-            action={onPressCheckIn}
-            loading={updateBookingMutation.isLoading}
-            variant="outlined"
-            icon={completedCheckIn ? faCheckCircle : undefined}
-            absolute={false}
-            success={completedCheckIn}
-            disabled={
-              isDisabled || updateBookingMutation.isLoading || completedCheckIn
-            }
-            containerStyle={{ paddingVertical: 0 }}
-          />
-        )}
-        {canBeCancelled && (
-          <CtaButton
-            title={t('bookingScreen.cancelBooking')}
-            action={onPressDelete}
-            loading={deleteBookingMutation.isLoading}
-            absolute={false}
-            disabled={isDisabled || deleteBookingMutation.isLoading}
-            destructive={true}
-            containerStyle={{ paddingVertical: 0 }}
-          />
-        )}
-      </CtaButtonContainer>
+      {(hasCheckIn || canBeCancelled) && (
+        <>
+          <CtaButtonContainer absolute={false}>
+            {hasCheckIn && (
+              <CtaButton
+                title={
+                  completedCheckIn
+                    ? t('bookingScreen.checkInFeedback')
+                    : t('bookingScreen.checkIn')
+                }
+                action={onPressCheckIn}
+                loading={updateBookingMutation.isLoading}
+                variant="outlined"
+                icon={completedCheckIn ? faCheckCircle : undefined}
+                absolute={false}
+                success={completedCheckIn}
+                disabled={
+                  isDisabled ||
+                  updateBookingMutation.isLoading ||
+                  completedCheckIn
+                }
+                containerStyle={{ paddingVertical: 0 }}
+              />
+            )}
+            {canBeCancelled && (
+              <CtaButton
+                title={t('bookingScreen.cancelBooking')}
+                action={onPressDelete}
+                loading={deleteBookingMutation.isLoading}
+                absolute={false}
+                disabled={isDisabled || deleteBookingMutation.isLoading}
+                destructive={true}
+                containerStyle={{ paddingVertical: 0 }}
+              />
+            )}
+          </CtaButtonContainer>
+          <BottomBarSpacer />
+        </>
+      )}
     </>
   );
 };

diff --git a/src/features/bookings/components/BookingSeatsCta.tsx b/src/features/bookings/components/BookingSeatsCta.tsx
@@ -1,22 +1,10 @@
-import { PropsWithChildren, useMemo, useState } from 'react';
+import { PropsWithChildren, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Linking,
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
-import { faFilePdf } from '@fortawesome/free-regular-svg-icons';
-import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { CtaButton } from '@lib/ui/components/CtaButton';
 import { CtaButtonContainer } from '@lib/ui/components/CtaButtonContainer';
-import { Icon } from '@lib/ui/components/Icon';
-import { Row } from '@lib/ui/components/Row';
-import { Text } from '@lib/ui/components/Text';
 import { useStylesheet } from '@lib/ui/hooks/useStylesheet';
-import { useTheme } from '@lib/ui/hooks/useTheme';
 import { Theme } from '@lib/ui/types/Theme';
 import { useNavigation } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -46,18 +34,14 @@ export const BookingSeatsCta = ({
 }: BookingSeatsCtaProps) => {
   const styles = useStylesheet(createStyles);
   const { t } = useTranslation();
-  const { palettes } = useTheme();
   const createBookingMutation = useCreateBooking();
-  const [informationAcknowledgment, setInformationAcknowledgment] =
-    useState(false);
   const navigation =
     useNavigation<NativeStackNavigationProp<ServiceStackParamList>>();
-  const ctaEnabled = useMemo(() => {
-    if (hasSeatSelection) {
-      return !!seatId && informationAcknowledgment;
-    }
-    return informationAcknowledgment;
-  }, [hasSeatSelection, informationAcknowledgment, seatId]);
+
+  const ctaEnabled = useMemo(
+    () => (hasSeatSelection ? !!seatId : true),
+    [hasSeatSelection, seatId],
+  );
 
   return (
     <CtaButtonContainer
@@ -66,56 +50,6 @@ export const BookingSeatsCta = ({
       style={StyleSheet.compose(styles.ctaButtonContainer, style)}
     >
       {children}
-      <Row style={styles.checkboxContainer} align="center">
-        <Pressable
-          accessible
-          accessibilityRole="checkbox"
-          accessibilityLabel={`${t(
-            'bookingSeatScreen.informationAcknowledgment',
-          )} ${t('bookingSeatScreen.informationAcknowledgmentLink')}`}
-          style={styles.checkbox}
-          hitSlop={{
-            top: 10,
-            bottom: 10,
-            left: 10,
-            right: 10,
-          }}
-          onPress={() =>
-            setInformationAcknowledgment(!informationAcknowledgment)
-          }
-        >
-          {informationAcknowledgment && (
-            <Icon icon={faCheck} size={14} color={palettes.primary['500']} />
-          )}
-        </Pressable>
-        <Text style={styles.acknowledgmentTextContainer}>
-          <Text style={styles.acknowledgmentText}>
-            {t('bookingSeatScreen.informationAcknowledgment')}
-          </Text>
-          <Text
-            onPress={async () => {
-              await Linking.openURL(
-                'https://didattica.polito.it/pdf/informativa_covid.pdf',
-              );
-            }}
-            style={StyleSheet.compose(
-              styles.acknowledgmentText,
-              styles.underline,
-            )}
-            variant="link"
-          >
-            {t('bookingSeatScreen.informationAcknowledgmentLink')}
-          </Text>
-        </Text>
-        <Row align="flex-end" style={{ height: '100%' }}>
-          <Icon
-            icon={faFilePdf}
-            size={12}
-            color={palettes.primary['500']}
-            style={styles.icon}
-          />
-        </Row>
-      </Row>
       <CtaButton
         title={t('bookingSeatScreen.confirm')}
         variant="filled"
@@ -128,10 +62,7 @@ export const BookingSeatsCta = ({
             })
             .then(() => {
               onCloseModal?.();
-              setTimeout(() => {
-                navigation.navigate('Services');
-                navigation.navigate('Bookings');
-              }, 0);
+              navigation.pop(2);
             })
         }
         disabled={!ctaEnabled}