Repository: kiwicom/mobile
Pull request #686 (2018-05-31 10:59:21)

MMB: Make BookingDetailContext work on mobile


Patch:
diff --git a/app/MMB/index.js b/app/MMB/index.js
index 4f414642..c0f37e9f 100644
--- a/app/MMB/index.js
+++ b/app/MMB/index.js
@@ -6,6 +6,7 @@ import { AuthContext } from '@kiwicom/mobile-relay';
 import { AdaptableLayout } from '@kiwicom/mobile-shared';
 
 import NavigationStack from './src/navigation/NavigationStack';
+import BookingDetailContext from './src/context/BookingDetailContext';
 
 type Props = {|
   currency: string,
@@ -16,7 +17,9 @@ class ManageMyBookingPackage extends React.Component<Props> {
   render = () => (
     <AdaptableLayout.Provider>
       <AuthContext.Provider accessToken={this.props.accessToken}>
-        <NavigationStack />
+        <BookingDetailContext.Provider>
+          <NavigationStack />
+        </BookingDetailContext.Provider>
       </AuthContext.Provider>
     </AdaptableLayout.Provider>
   );
diff --git a/app/MMB/src/components/Deeplink.js b/app/MMB/src/components/Deeplink.js
index 430adc42..95dc2829 100644
--- a/app/MMB/src/components/Deeplink.js
+++ b/app/MMB/src/components/Deeplink.js
@@ -5,14 +5,14 @@ import { WebView } from '@kiwicom/mobile-shared';
 import { graphql, PrivateApiRenderer } from '@kiwicom/mobile-relay';
 import idx from 'idx';
 
+import BookingDetailContext from '../context/BookingDetailContext';
 import type {
   DirectAccessURLValues,
   DeeplinkQueryResponse,
 } from './__generated__/DeeplinkQuery.graphql';
 
 type Props = {|
-  bookingID: string,
-  to?: DirectAccessURLValues,
+  +to?: DirectAccessURLValues,
 |};
 
 export default class Deeplink extends React.Component<Props> {
@@ -25,22 +25,26 @@ export default class Deeplink extends React.Component<Props> {
   };
 
   render = () => (
-    <PrivateApiRenderer
-      render={this.renderInnerComponent}
-      query={graphql`
-        query DeeplinkQuery(
-          $bookingId: ID!
-          $deeplinkTo: DirectAccessURLValues
-        ) {
-          booking(id: $bookingId) {
-            directAccessURL(deeplinkTo: $deeplinkTo)
-          }
-        }
-      `}
-      variables={{
-        bookingId: this.props.bookingID,
-        deeplinkTo: this.props.to,
-      }}
-    />
+    <BookingDetailContext.Consumer>
+      {({ bookingId }) => (
+        <PrivateApiRenderer
+          render={this.renderInnerComponent}
+          query={graphql`
+            query DeeplinkQuery(
+              $bookingId: ID!
+              $deeplinkTo: DirectAccessURLValues
+            ) {
+              booking(id: $bookingId) {
+                directAccessURL(deeplinkTo: $deeplinkTo)
+              }
+            }
+          `}
+          variables={{
+            bookingId: bookingId,
+            deeplinkTo: this.props.to,
+          }}
+        />
+      )}
+    </BookingDetailContext.Consumer>
   );
 }
diff --git a/app/MMB/src/components/Invoice.js b/app/MMB/src/components/Invoice.js
index ac821937..8c95f21c 100644
--- a/app/MMB/src/components/Invoice.js
+++ b/app/MMB/src/components/Invoice.js
@@ -7,13 +7,10 @@ import { Translation } from '@kiwicom/mobile-localization';
 import PdfViewer from '@kiwicom/mobile-pdf';
 import idx from 'idx';
 
+import BookingDetailContext from '../context/BookingDetailContext';
 import type { InvoiceQueryResponse } from './__generated__/InvoiceQuery.graphql';
 
-type Props = {|
-  bookingID: string,
-|};
-
-export default class Invoice extends React.Component<Props> {
+export default class Invoice extends React.Component<{||}> {
   renderInnerComponent = (renderProps: InvoiceQueryResponse) => {
     const uri = idx(renderProps, _ => _.booking.assets.invoiceUrl);
 
@@ -36,20 +33,24 @@ export default class Invoice extends React.Component<Props> {
   };
 
   render = () => (
-    <PrivateApiRenderer
-      render={this.renderInnerComponent}
-      query={graphql`
-        query InvoiceQuery($bookingId: ID!) {
-          booking(id: $bookingId) {
-            assets {
-              invoiceUrl
+    <BookingDetailContext.Consumer>
+      {({ bookingId }) => (
+        <PrivateApiRenderer
+          render={this.renderInnerComponent}
+          query={graphql`
+            query InvoiceQuery($bookingId: ID!) {
+              booking(id: $bookingId) {
+                assets {
+                  invoiceUrl
+                }
+              }
             }
-          }
-        }
-      `}
-      variables={{
-        bookingId: this.props.bookingID,
-      }}
-    />
+          `}
+          variables={{
+            bookingId: bookingId,
+          }}
+        />
+      )}
+    </BookingDetailContext.Consumer>
   );
 }
diff --git a/app/MMB/src/context/BookingDetailContext.js b/app/MMB/src/context/BookingDetailContext.js
index af15fc31..c466e0cc 100644
--- a/app/MMB/src/context/BookingDetailContext.js
+++ b/app/MMB/src/context/BookingDetailContext.js
@@ -2,9 +2,16 @@
 
 import * as React from 'react';
 
+type BookingDetail = {|
+  +isPastBooking: boolean,
+  +bookingId: string,
+|};
 const defaultState = {
   isPastBooking: false,
   bookingId: '',
+  actions: {
+    setBookingDetail: () => {},
+  },
 };
 
 const { Consumer, Provider: ContextProvider } = React.createContext({
@@ -13,13 +20,13 @@ const { Consumer, Provider: ContextProvider } = React.createContext({
 
 type Props = {|
   +children: React.Node,
-  +isPastBooking: boolean,
-  +bookingId: string,
 |};
 
 type State = {|
-  +isPastBooking: boolean,
-  +bookingId: string,
+  ...BookingDetail,
+  +actions: {|
+    +setBookingDetail: (booking: BookingDetail) => void,
+  |},
 |};
 
 class Provider extends React.Component<Props, State> {
@@ -27,11 +34,18 @@ class Provider extends React.Component<Props, State> {
     super(props);
 
     this.state = {
-      isPastBooking: props.isPastBooking,
-      bookingId: props.bookingId,
+      isPastBooking: false,
+      bookingId: '',
+      actions: {
+        setBookingDetail: this.setBookingDetail,
+      },
     };
   }
 
+  setBookingDetail = ({ isPastBooking, bookingId }: BookingDetail) => {
+    this.setState({ isPastBooking, bookingId });
+  };
+
   render = () => (
     <ContextProvider value={this.state}>{this.props.children}</ContextProvider>
   );
diff --git a/app/MMB/src/navigation/DetailScreen.js b/app/MMB/src/navigation/DetailScreen.js
index 9317619a..404e324a 100644
--- a/app/MMB/src/navigation/DetailScreen.js
+++ b/app/MMB/src/navigation/DetailScreen.js
@@ -14,17 +14,6 @@ import FlightServices, {
 } from '../scenes/flightServices/FlightServices';
 import TripServices from '../scenes/TripServices';
 import PassengerDetailContainer from '../scenes/passenger/PassengerDetailContainer';
-import BookingDetailContext from '../context/BookingDetailContext';
-
-type Props = {|
-  isPastBooking: boolean,
-  bookingId: string,
-  navigation: NavigationType,
-|};
-
-type State = {|
-  activeContainerComponent: string,
-|};
 
 export const MenuComponents = {
   'mmb.passenger_detail': {
@@ -82,6 +71,14 @@ export const MenuComponents = {
   ...OtherSubmenuItems,
 };
 
+type Props = {|
+  +navigation: NavigationType,
+|};
+
+type State = {|
+  activeContainerComponent: string,
+|};
+
 export default class DetailsScreen extends React.Component<Props, State> {
   state = {
     activeContainerComponent: 'mmb.passenger_detail',
@@ -114,12 +111,8 @@ export default class DetailsScreen extends React.Component<Props, State> {
     this.props.navigation.navigate({
       routeName: key,
       key: `key-${key}`,
-      params: {
-        bookingId: this.props.bookingId,
-      },
     });
   };
-
   /**
    * Just change container content for tablets. It's also necessary to change
    * the header title.
@@ -141,25 +134,17 @@ export default class DetailsScreen extends React.Component<Props, State> {
     ).screen;
 
     return (
-      <BookingDetailContext.Provider
-        isPastBooking={this.props.isPastBooking}
-        bookingId={this.props.bookingId}
-      >
-        <Layout
-          menuComponent={
-            <AdaptableLayout.Consumer
-              renderOnWide={<MainMenu openMenu={this.changeContentOnTablet} />}
-              renderOnNarrow={<MainMenu openMenu={this.openMenuOnMobile} />}
-            />
-          }
-          containerComponent={
-            <ContainerComponent
-              navigation={this.props.navigation}
-              bookingId={this.props.bookingId}
-            />
-          }
-        />
-      </BookingDetailContext.Provider>
+      <Layout
+        menuComponent={
+          <AdaptableLayout.Consumer
+            renderOnWide={<MainMenu openMenu={this.changeContentOnTablet} />}
+            renderOnNarrow={<MainMenu openMenu={this.openMenuOnMobile} />}
+          />
+        }
+        containerComponent={
+          <ContainerComponent navigation={this.props.navigation} />
+        }
+      />
     );
   };
 }
diff --git a/app/MMB/src/scenes/FlightServices.js b/app/MMB/src/scenes/FlightServices.js
index c61d64b0..d5651b15 100644
--- a/app/MMB/src/scenes/FlightServices.js
+++ b/app/MMB/src/scenes/FlightServices.js
@@ -14,8 +14,7 @@ import MenuItem from '../components/menu/MenuItem';
 import Deeplink from '../components/Deeplink';
 
 type Props = {|
-  bookingId: string,
-  navigation: NavigationType,
+  +navigation: NavigationType,
 |};
 
 export default class FlightServices extends React.Component<Props> {
@@ -23,9 +22,6 @@ export default class FlightServices extends React.Component<Props> {
     this.props.navigation.navigate({
       routeName: key,
       key: `key-${key}`,
-      params: {
-        bookingId: this.props.bookingId,
-      },
     });
   };
 
@@ -91,39 +87,35 @@ export default class FlightServices extends React.Component<Props> {
   );
 }
 
-type SubmenuProps = {|
-  bookingId: string,
-|};
-
 export const FlightServicesSubmenuItems = {
   'mmb.flight_services.checked_baggage': {
-    screen: function OpenCheckedBaggage({ bookingId }: SubmenuProps) {
-      return <Deeplink to="BAGS" bookingID={bookingId} />;
+    screen: function OpenCheckedBaggage() {
+      return <Deeplink to="BAGS" />;
     },
   },
   'mmb.flight_services.allocated_seating': {
-    screen: function OpenAllocatedSeating({ bookingId }: SubmenuProps) {
-      return <Deeplink to="SEATING" bookingID={bookingId} />;
+    screen: function OpenAllocatedSeating() {
+      return <Deeplink to="SEATING" />;
     },
   },
   'mmb.flight_services.sports_equipment': {
-    screen: function OpenSportsEquipment({ bookingId }: SubmenuProps) {
-      return <Deeplink to="SPORT_EQUIPMENT" bookingID={bookingId} />;
+    screen: function OpenSportsEquipment() {
+      return <Deeplink to="SPORT_EQUIPMENT" />;
     },
   },
   'mmb.flight_services.musical_equipment': {
-    screen: function OpenMusicalEquipment({ bookingId }: SubmenuProps) {
-      return <Deeplink to="MUSICAL_EQUIPMENT" bookingID={bookingId} />;
+    screen: function OpenMusicalEquipment() {
+      return <Deeplink to="MUSICAL_EQUIPMENT" />;
     },
   },
   'mmb.flight_services.special_assistance': {
-    screen: function OpenSpecialAssistance({ bookingId }: SubmenuProps) {
-      return <Deeplink to="ASSISTANCE" bookingID={bookingId} />;
+    screen: function OpenSpecialAssistance() {
+      return <Deeplink to="ASSISTANCE" />;
     },
   },
   'mmb.flight_services.pets': {
-    screen: function OpenPetPassengers({ bookingId }: SubmenuProps) {
-      return <Deeplink to="PETS" bookingID={bookingId} />;
+    screen: function OpenPetPassengers() {
+      return <Deeplink to="PETS" />;
     },
   },
 };
diff --git a/app/MMB/src/scenes/Other.js b/app/MMB/src/scenes/Other.js
index 73b34d63..2672e3ed 100644
--- a/app/MMB/src/scenes/Other.js
+++ b/app/MMB/src/scenes/Other.js
@@ -15,8 +15,7 @@ import Invoice from '../components/Invoice';
 import { SeparatorFullWidth, SeparatorTrimmed } from '../components/Separators';
 
 type Props = {|
-  bookingId: string,
-  navigation: NavigationType,
+  +navigation: NavigationType,
 |};
 
 export default class Other extends React.Component<Props> {
@@ -24,9 +23,6 @@ export default class Other extends React.Component<Props> {
     this.props.navigation.navigate({
       routeName: key,
       key: `key-${key}`,
-      params: {
-        bookingId: this.props.bookingId,
-      },
     });
   };
 
@@ -70,24 +66,20 @@ export default class Other extends React.Component<Props> {
   );
 }
 
-type SubmenuProps = {|
-  bookingId: string,
-|};
-
 export const OtherSubmenuItems = {
   'mmb.other.invoice': {
-    screen: function OtherSubmenuOpenInvoice({ bookingId }: SubmenuProps) {
-      return <Invoice bookingID={bookingId} />;
+    screen: function OtherSubmenuOpenInvoice() {
+      return <Invoice />;
     },
   },
   'mmb.other.open': {
-    screen: function OtherSubmenuOpenOnWeb({ bookingId }: SubmenuProps) {
-      return <Deeplink bookingID={bookingId} />;
+    screen: function OtherSubmenuOpenOnWeb() {
+      return <Deeplink />;
     },
   },
   'mmb.other.refund': {
-    screen: function OtherSubmenuRefundForm({ bookingId }: SubmenuProps) {
-      return <Deeplink to="REFUND" bookingID={bookingId} />;
+    screen: function OtherSubmenuRefundForm() {
+      return <Deeplink to="REFUND" />;
     },
   },
 };
diff --git a/app/MMB/src/scenes/flightServices/FlightServices.js b/app/MMB/src/scenes/flightServices/FlightServices.js
index e135be8f..af0f034c 100644
--- a/app/MMB/src/scenes/flightServices/FlightServices.js
+++ b/app/MMB/src/scenes/flightServices/FlightServices.js
@@ -6,10 +6,9 @@ import { PrivateApiRenderer, graphql } from '@kiwicom/mobile-relay';
 import FlightServicesMenuGroup from './FlightServicesMenuGroup';
 import type { FlightServicesQueryResponse } from './__generated__/FlightServicesQuery.graphql';
 import Deeplink from '../../components/Deeplink';
+import BookingDetailContext from '../../context/BookingDetailContext';
 
-type Props = {|
-  bookingId: string,
-|};
+type Props = {||};
 
 export default class FlightServices extends React.Component<Props> {
   renderInner = (renderProps: FlightServicesQueryResponse) => (
@@ -17,55 +16,55 @@ export default class FlightServices extends React.Component<Props> {
   );
 
   render = () => (
-    <PrivateApiRenderer
-      query={graphql`
-        query FlightServicesQuery($id: ID!) {
-          booking(id: $id) {
-            ...FlightServicesMenuGroup_bookedServices
-          }
-        }
-      `}
-      variables={{
-        id: this.props.bookingId,
-      }}
-      render={this.renderInner}
-    />
+    <BookingDetailContext.Consumer>
+      {({ bookingId }) => (
+        <PrivateApiRenderer
+          query={graphql`
+            query FlightServicesQuery($id: ID!) {
+              booking(id: $id) {
+                ...FlightServicesMenuGroup_bookedServices
+              }
+            }
+          `}
+          variables={{
+            id: bookingId,
+          }}
+          render={this.renderInner}
+        />
+      )}
+    </BookingDetailContext.Consumer>
   );
 }
 
-type SubmenuProps = {|
-  bookingId: string,
-|};
-
 export const FlightServicesSubmenuItems = {
   'mmb.flight_services.checked_baggage': {
-    screen: function OpenCheckedBaggage({ bookingId }: SubmenuProps) {
-      return <Deeplink to="BAGS" bookingID={bookingId} />;
+    screen: function OpenCheckedBaggage() {
+      return <Deeplink to="BAGS" />;
     },
   },
   'mmb.flight_services.allocated_seating': {
-    screen: function OpenAllocatedSeating({ bookingId }: SubmenuProps) {
-      return <Deeplink to="SEATING" bookingID={bookingId} />;
+    screen: function OpenAllocatedSeating() {
+      return <Deeplink to="SEATING" />;
     },
   },
   'mmb.flight_services.sports_equipment': {
-    screen: function OpenSportsEquipment({ bookingId }: SubmenuProps) {
-      return <Deeplink to="SPORT_EQUIPMENT" bookingID={bookingId} />;
+    screen: function OpenSportsEquipment() {
+      return <Deeplink to="SPORT_EQUIPMENT" />;
     },
   },
   'mmb.flight_services.musical_equipment': {
-    screen: function OpenMusicalEquipment({ bookingId }: SubmenuProps) {
-      return <Deeplink to="MUSICAL_EQUIPMENT" bookingID={bookingId} />;
+    screen: function OpenMusicalEquipment() {
+      return <Deeplink to="MUSICAL_EQUIPMENT" />;
     },
   },
   'mmb.flight_services.special_assistance': {
-    screen: function OpenSpecialAssistance({ bookingId }: SubmenuProps) {
-      return <Deeplink to="ASSISTANCE" bookingID={bookingId} />;
+    screen: function OpenSpecialAssistance() {
+      return <Deeplink to="ASSISTANCE" />;
     },
   },
   'mmb.flight_services.pets': {
-    screen: function OpenPetPassengers({ bookingId }: SubmenuProps) {
-      return <Deeplink to="PETS" bookingID={bookingId} />;
+    screen: function OpenPetPassengers() {
+      return <Deeplink to="PETS" />;
     },
   },
 };
diff --git a/app/MMB/src/scenes/list/cityImage/CityImage.js b/app/MMB/src/scenes/list/cityImage/CityImage.js
index 0243f942..86e6d16f 100644
--- a/app/MMB/src/scenes/list/cityImage/CityImage.js
+++ b/app/MMB/src/scenes/list/cityImage/CityImage.js
@@ -17,27 +17,31 @@ import idx from 'idx';
 import FromToRow from './FromToRow';
 import DateAndPassengerCount from './DateAndPassengerCount';
 import ImageBadges from './ImageBadges';
+import BookingDetailContext from '../../../context/BookingDetailContext';
 import type { CityImage_arrival as ArrivalType } from './__generated__/CityImage_arrival.graphql';
 import type { CityImage_departure as DepartureType } from './__generated__/CityImage_departure.graphql';
 import type { CityImage_image as ImageType } from './__generated__/CityImage_image.graphql';
 
-type Props = {|
-  image: ImageType,
-  arrival: ArrivalType,
-  departure: DepartureType,
-  type: 'RETURN' | 'ONE_WAY' | 'MULTICITY',
-  navigation: NavigationType,
+type PropsWithContext = {|
+  ...Props,
+  +setBookingDetail: (booking: {|
+    isPastBooking: boolean,
+    bookingId: string,
+  |}) => void,
 |};
 
-class CityImage extends React.Component<Props> {
+class CityImage extends React.Component<PropsWithContext> {
   goToDetail = () => {
+    const bookingId = idx(this.props.image, _ => _.databaseId) || '';
+    const isPastBooking = Boolean(idx(this.props.image, _ => _.isPastBooking));
+    this.props.setBookingDetail({
+      bookingId: bookingId.toString(),
+      isPastBooking,
+    });
+
     this.props.navigation.navigate({
       routeName: 'DetailScreen',
       key: 'key-DetailScreen',
-      params: {
-        bookingId: idx(this.props.image, _ => _.databaseId),
-        isPastBooking: idx(this.props.image, _ => _.isPastBooking),
-      },
     });
   };
 
@@ -71,8 +75,24 @@ class CityImage extends React.Component<Props> {
   );
 }
 
+type Props = {|
+  +image: ImageType,
+  +arrival: ArrivalType,
+  +departure: DepartureType,
+  +type: 'RETURN' | 'ONE_WAY' | 'MULTICITY',
+  +navigation: NavigationType,
+|};
+
+const CityImageWithContext = (props: Props) => (
+  <BookingDetailContext.Consumer>
+    {({ actions: { setBookingDetail } }) => (
+      <CityImage {...props} setBookingDetail={setBookingDetail} />
+    )}
+  </BookingDetailContext.Consumer>
+);
+
 export default createFragmentContainer(
-  withNavigation(CityImage),
+  withNavigation(CityImageWithContext),
   graphql`
     fragment CityImage_image on BookingInterface {
       databaseId
diff --git a/app/MMB/src/scenes/passenger/PassengerDetailContainer.js b/app/MMB/src/scenes/passenger/PassengerDetailContainer.js
index 1a6c8c26..9e8c3bf3 100644
--- a/app/MMB/src/scenes/passenger/PassengerDetailContainer.js
+++ b/app/MMB/src/scenes/passenger/PassengerDetailContainer.js
@@ -4,11 +4,10 @@ import * as React from 'react';
 import { graphql, PrivateApiRenderer } from '@kiwicom/mobile-relay';
 
 import PassengerDetail from './PassengerDetail';
+import BookingDetailContext from '../../context/BookingDetailContext';
 import type { PassengerDetailContainerQuery } from './__generated__/PassengerDetailContainerQuery.graphql';
 
-type Props = {|
-  bookingId: string,
-|};
+type Props = {||};
 
 export default class PassengerDetailContainer extends React.Component<Props> {
   renderInner = (renderProps: PassengerDetailContainerQuery) => {
@@ -16,16 +15,20 @@ export default class PassengerDetailContainer extends React.Component<Props> {
   };
 
   render = () => (
-    <PrivateApiRenderer
-      query={graphql`
-        query PassengerDetailContainerQuery($id: ID!) {
-          booking(id: $id) {
-            ...PassengerDetail_booking
-          }
-        }
-      `}
-      variables={{ id: this.props.bookingId }}
-      render={this.renderInner}
-    />
+    <BookingDetailContext.Consumer>
+      {({ bookingId }) => (
+        <PrivateApiRenderer
+          query={graphql`
+            query PassengerDetailContainerQuery($id: ID!) {
+              booking(id: $id) {
+                ...PassengerDetail_booking
+              }
+            }
+          `}
+          variables={{ id: bookingId }}
+          render={this.renderInner}
+        />
+      )}
+    </BookingDetailContext.Consumer>
   );
 }


Test patch:
diff --git a/app/MMB/src/context/__tests__/BookingDetailContext.test.js b/app/MMB/src/context/__tests__/BookingDetailContext.test.js
index 09ed9480..e28f8711 100644
--- a/app/MMB/src/context/__tests__/BookingDetailContext.test.js
+++ b/app/MMB/src/context/__tests__/BookingDetailContext.test.js
@@ -9,23 +9,37 @@ class ContextConsumer extends React.Component<{}> {
   render = () => null;
 }
 
+const getWrapper = () =>
+  renderer.create(
+    <BookingDetailContext.Provider>
+      <BookingDetailContext.Consumer>
+        {({ isPastBooking, bookingId, actions: { setBookingDetail } }) => (
+          <ContextConsumer
+            isPastBooking={isPastBooking}
+            bookingId={bookingId}
+            setBookingDetail={setBookingDetail}
+          />
+        )}
+      </BookingDetailContext.Consumer>
+    </BookingDetailContext.Provider>,
+  );
+
 describe('BookingDetailContext', () => {
   it('injects the props to consumers', () => {
-    const wrapper = renderer.create(
-      <BookingDetailContext.Provider isPastBooking={false} bookingId="1234">
-        <BookingDetailContext.Consumer>
-          {({ isPastBooking, bookingId }) => (
-            <ContextConsumer
-              isPastBooking={isPastBooking}
-              bookingId={bookingId}
-            />
-          )}
-        </BookingDetailContext.Consumer>
-      </BookingDetailContext.Provider>,
-    );
+    const wrapper = getWrapper();
 
     const instance = wrapper.root.findByType(ContextConsumer);
     expect(instance.props.isPastBooking).toBe(false);
-    expect(instance.props.bookingId).toBe('1234');
+    expect(instance.props.bookingId).toBe('');
+    expect(typeof instance.props.setBookingDetail).toBe('function');
+  });
+
+  it('it setsBookingDetail', () => {
+    const wrapper = getWrapper();
+    const instance = wrapper.root.findByType(ContextConsumer);
+
+    instance.props.setBookingDetail({ isPastBooking: true, bookingId: '123' });
+    expect(instance.props.isPastBooking).toBe(true);
+    expect(instance.props.bookingId).toBe('123');
   });
 });