Repository: kiwicom/mobile
Pull request #975 (2018-08-10 09:20:32)

Insurance context


Patch:
diff --git a/app/MMB/index.js b/app/MMB/index.js
index edc759e7..525d6057 100644
--- a/app/MMB/index.js
+++ b/app/MMB/index.js
@@ -13,6 +13,7 @@ import NavigationStack from './src/navigation/NavigationStack';
 import BookingDetailContext from './src/context/BookingDetailContext';
 import WalletContext from './src/context/WalletContext';
 import TravelDocumentFormContext from './src/scenes/travelDocument/form/TravelDocumentFormContext';
+import InsuranceOverviewContext from './src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewSceneContext';
 
 type Props = {|
   +currency: string,
@@ -34,9 +35,11 @@ class ManageMyBookingPackage extends React.Component<Props> {
         <WalletContext.Provider>
           <BookingDetailContext.Provider>
             <TravelDocumentFormContext.Provider>
-              <NavigationStack
-                onNavigationStateChange={this.props.onNavigationStateChange}
-              />
+              <InsuranceOverviewContext.Provider>
+                <NavigationStack
+                  onNavigationStateChange={this.props.onNavigationStateChange}
+                />
+              </InsuranceOverviewContext.Provider>
             </TravelDocumentFormContext.Provider>
           </BookingDetailContext.Provider>
         </WalletContext.Provider>
diff --git a/app/MMB/src/scenes/tripServices/TripServices.js b/app/MMB/src/scenes/tripServices/TripServices.js
index 9f903e30..bec41157 100644
--- a/app/MMB/src/scenes/tripServices/TripServices.js
+++ b/app/MMB/src/scenes/tripServices/TripServices.js
@@ -18,7 +18,7 @@ import LoungeMenuItem from './LoungeMenuItem';
 import ParkingMenuItem from './ParkingMenuItem';
 import InsuranceMenuItem from './InsuranceMenuItem';
 import CarRentalMenuItem from './CarRentalMenuItem';
-import InsuranceOverviewScene from './insurance/InsuranceOverviewScene';
+import InsuranceOverviewSceneContainer from './insurance/insuranceOverviewScene/InsuranceOverviewSceneContainer';
 import InsuranceSelectionSceneContainer from './insurance/insuranceSelectionScene/InsuranceSelectionSceneContainer';
 import PaymentScene from './insurance/PaymentScene';
 import RefundScene from './insurance/RefundScene';
@@ -132,7 +132,7 @@ export const TripServicesSubmenuItems = {
     }: {|
       +navigation: NavigationType,
     |}) {
-      return <InsuranceOverviewScene navigation={navigation} />;
+      return <InsuranceOverviewSceneContainer navigation={navigation} />;
     },
     headerTitle: function TripServicesHeaderTitle() {
       return (
diff --git a/app/MMB/src/scenes/tripServices/insurance/InsuranceOverviewScene.js b/app/MMB/src/scenes/tripServices/insurance/InsuranceOverviewScene.js
deleted file mode 100644
index 62b65e0a..00000000
--- a/app/MMB/src/scenes/tripServices/insurance/InsuranceOverviewScene.js
+++ /dev/null
@@ -1,121 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import { ScrollView, View } from 'react-native';
-import { LayoutSingleColumn, TextButton } from '@kiwicom/mobile-shared';
-import { graphql, PublicApiRenderer } from '@kiwicom/mobile-relay';
-import { Translation } from '@kiwicom/mobile-localization';
-import {
-  type RouteNamesType,
-  type NavigationType,
-} from '@kiwicom/mobile-navigation';
-
-import InsuranceOverviewPassengerMenuGroup from './InsuranceOverviewPassengerMenuGroup';
-import DestinationImage from './DestinationImage';
-import OrderSummary from './OrderSummary';
-import TripInfo from '../../../components/header/TripInfo';
-import BookingDetailContext from '../../../context/BookingDetailContext';
-import type { InsuranceOverviewSceneQueryResponse } from './__generated__/InsuranceOverviewSceneQuery.graphql';
-
-type Props = {|
-  +data: InsuranceOverviewSceneQueryResponse,
-  +navigation: NavigationType,
-|};
-
-class InsuranceOverviewScene extends React.Component<Props> {
-  navigate = (routeName: RouteNamesType) => {
-    this.props.navigation.navigate(routeName);
-  };
-
-  goToTheInsurancePayment = () => {
-    this.navigate('mmb.trip_services.insurance.payment');
-  };
-
-  goToTheInsuranceRefund = () => {
-    this.navigate('mmb.trip_services.insurance.refund');
-  };
-
-  render = () => {
-    const { data } = this.props;
-
-    return (
-      <React.Fragment>
-        <ScrollView>
-          <LayoutSingleColumn>
-            <DestinationImage data={data.singleBooking} />
-
-            <TripInfo data={data.singleBooking} />
-
-            <InsuranceOverviewPassengerMenuGroup data={data.singleBooking} />
-
-            <View style={{ padding: 10 }}>
-              <TextButton
-                title={
-                  <Translation id="mmb.trip_services.order.process_to_refund" />
-                }
-                onPress={this.goToTheInsuranceRefund}
-              />
-            </View>
-
-            <View style={{ padding: 10 }}>
-              <TextButton
-                title={
-                  <Translation id="mmb.trip_services.order.process_to_payment" />
-                }
-                onPress={this.goToTheInsurancePayment}
-              />
-            </View>
-          </LayoutSingleColumn>
-        </ScrollView>
-        <OrderSummary />
-      </React.Fragment>
-    );
-  };
-}
-
-type ContainerProps = {|
-  navigation: NavigationType,
-|};
-
-export default class InsuranceOverviewSceneContainer extends React.Component<
-  ContainerProps,
-> {
-  renderInnerComponent = (response: InsuranceOverviewSceneQueryResponse) => {
-    return (
-      <InsuranceOverviewScene
-        data={response}
-        navigation={this.props.navigation}
-      />
-    );
-  };
-
-  render = () => {
-    return (
-      <BookingDetailContext.Consumer>
-        {({ bookingId, authToken }) => (
-          <PublicApiRenderer
-            render={this.renderInnerComponent}
-            query={graphql`
-              query InsuranceOverviewSceneQuery(
-                $bookingId: Int!
-                $authToken: String!
-              ) {
-                singleBooking(id: $bookingId, authToken: $authToken) {
-                  ... on BookingInterface {
-                    ...DestinationImage
-                    ...TripInfo
-                    ...InsuranceOverviewPassengerMenuGroup
-                  }
-                }
-              }
-            `}
-            variables={{
-              bookingId,
-              authToken,
-            }}
-          />
-        )}
-      </BookingDetailContext.Consumer>
-    );
-  };
-}
diff --git a/app/MMB/src/scenes/tripServices/insurance/VariantButtons.js b/app/MMB/src/scenes/tripServices/insurance/VariantButtons.js
deleted file mode 100644
index 21225918..00000000
--- a/app/MMB/src/scenes/tripServices/insurance/VariantButtons.js
+++ /dev/null
@@ -1,105 +0,0 @@
-// @flow strict
-
-import * as React from 'react';
-import { View } from 'react-native';
-import {
-  StyleSheet,
-  Color,
-  Price,
-  TextIcon,
-  Touchable,
-  Text,
-} from '@kiwicom/mobile-shared';
-import { Translation } from '@kiwicom/mobile-localization';
-
-type VariantButtonProps = {|
-  +isSelected: boolean,
-  +onPress: () => void,
-  +title: React.Element<typeof Translation>,
-  +iconComponent: React.Element<typeof TextIcon>,
-|};
-
-function VariantButton(props: VariantButtonProps) {
-  const iconComponent = React.cloneElement(props.iconComponent, {
-    style: {
-      color: props.isSelected ? Color.textMedium : Color.textLight,
-      fontSize: 19,
-    },
-  });
-
-  return (
-    <Touchable
-      onPress={props.onPress}
-      style={[
-        styleSheet.variantButton,
-        props.isSelected ? styleSheet.variantButtonSelected : undefined,
-      ]}
-    >
-      <React.Fragment>
-        <View style={styleSheet.iconWrapper}>{iconComponent}</View>
-        <Text style={props.isSelected ? undefined : styleSheet.textDisabled}>
-          {props.title}
-        </Text>
-        <Price
-          amount={-1}
-          currency="WIP"
-          style={props.isSelected ? undefined : styleSheet.textDisabled}
-        />
-      </React.Fragment>
-    </Touchable>
-  );
-}
-
-type Props = {|
-  +isSelected: boolean,
-  +onPress: () => void,
-|};
-
-export function VariantButtonNone(props: Props) {
-  return (
-    <VariantButton
-      iconComponent={<TextIcon code=":" />}
-      title={<Translation id="mmb.trip_services.insurance.variant.none" />}
-      {...props}
-    />
-  );
-}
-
-export function VariantButtonBasic(props: Props) {
-  return (
-    <VariantButton
-      iconComponent={<TextIcon code="'" />}
-      title={<Translation id="mmb.trip_services.insurance.variant.basic" />}
-      {...props}
-    />
-  );
-}
-
-export function VariantButtonPlus(props: Props) {
-  return (
-    <VariantButton
-      iconComponent={<TextIcon code="'" />}
-      title={<Translation id="mmb.trip_services.insurance.variant.plus" />}
-      {...props}
-    />
-  );
-}
-
-const styleSheet = StyleSheet.create({
-  variantButton: {
-    flex: 1,
-    margin: 1,
-    padding: 10,
-    borderRadius: 5,
-    alignItems: 'center',
-  },
-  variantButtonSelected: {
-    backgroundColor: Color.white,
-  },
-  iconWrapper: {
-    marginBottom: 7,
-  },
-  textDisabled: {
-    color: Color.textLight,
-  },
-});
diff --git a/app/MMB/src/scenes/tripServices/insurance/__generated__/InsuranceOverviewPassengerMenuGroup.graphql.js b/app/MMB/src/scenes/tripServices/insurance/__generated__/InsuranceOverviewPassengerMenuGroup.graphql.js
deleted file mode 100644
index 2909d39a..00000000
--- a/app/MMB/src/scenes/tripServices/insurance/__generated__/InsuranceOverviewPassengerMenuGroup.graphql.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * @flow
- */
-
-/* eslint-disable */
-
-'use strict';
-
-/*::
-import type { ConcreteFragment } from 'relay-runtime';
-type PassengerInsuranceMenuItem$ref = any;
-import type { FragmentReference } from "relay-runtime";
-declare export opaque type InsuranceOverviewPassengerMenuGroup$ref: FragmentReference;
-export type InsuranceOverviewPassengerMenuGroup = {|
-  +passengers: ?$ReadOnlyArray<?{|
-    +databaseId: ?number,
-    +$fragmentRefs: PassengerInsuranceMenuItem$ref,
-  |}>,
-  +$refType: InsuranceOverviewPassengerMenuGroup$ref,
-|};
-*/
-
-
-const node/*: ConcreteFragment*/ = {
-  "kind": "Fragment",
-  "name": "InsuranceOverviewPassengerMenuGroup",
-  "type": "BookingInterface",
-  "metadata": null,
-  "argumentDefinitions": [],
-  "selections": [
-    {
-      "kind": "LinkedField",
-      "alias": null,
-      "name": "passengers",
-      "storageKey": null,
-      "args": null,
-      "concreteType": "Passenger",
-      "plural": true,
-      "selections": [
-        {
-          "kind": "ScalarField",
-          "alias": null,
-          "name": "databaseId",
-          "args": null,
-          "storageKey": null
-        },
-        {
-          "kind": "FragmentSpread",
-          "name": "PassengerInsuranceMenuItem",
-          "args": null
-        }
-      ]
-    }
-  ]
-};
-// prettier-ignore
-(node/*: any*/).hash = '0beced77ab433acc048a4a8b27a8262d';
-module.exports = node;
diff --git a/app/MMB/src/scenes/tripServices/insurance/DestinationImage.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/DestinationImage.js
similarity index 100%
rename from app/MMB/src/scenes/tripServices/insurance/DestinationImage.js
rename to app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/DestinationImage.js
diff --git a/app/MMB/src/scenes/tripServices/insurance/InsuranceOverviewPassengerMenuGroup.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewPassengerMenuGroup.js
similarity index 51%
rename from app/MMB/src/scenes/tripServices/insurance/InsuranceOverviewPassengerMenuGroup.js
rename to app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewPassengerMenuGroup.js
index 722f138f..1acee8c5 100644
--- a/app/MMB/src/scenes/tripServices/insurance/InsuranceOverviewPassengerMenuGroup.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewPassengerMenuGroup.js
@@ -1,39 +1,37 @@
 // @flow strict
 
 import * as React from 'react';
-import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { TitledMenuGroup } from '@kiwicom/mobile-navigation';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
 
 import PassengerInsuranceMenuItem from './menuItem/PassengerInsuranceMenuItem';
-import type { InsuranceOverviewPassengerMenuGroup as PassengersType } from './__generated__/InsuranceOverviewPassengerMenuGroup.graphql';
+
+type InsuranceType = 'NONE' | 'TRAVEL_BASIC' | 'TRAVEL_PLUS';
+
+type Passenger = {|
+  +fullName: ?string,
+  +title: ?string,
+  +birthday: ?Date,
+  +databaseId: ?number,
+  +insuranceType: ?InsuranceType,
+|};
 
 type Props = {|
-  +data: PassengersType,
+  +passengers: Passenger[],
 |};
 
 const InsuranceOverviewPassengerMenuGroup = (props: Props) => {
-  const passengers = idx(props.data, _ => _.passengers) || [];
+  const passengers = idx(props, _ => _.passengers) || [];
   return (
     <TitledMenuGroup title={<Translation id="mmb.trip_services.order.pax" />}>
       {passengers.map(passenger => (
         <PassengerInsuranceMenuItem
-          data={passenger}
+          passenger={passenger}
           key={idx(passenger, _ => _.databaseId)}
         />
       ))}
     </TitledMenuGroup>
   );
 };
-export default createFragmentContainer(
-  InsuranceOverviewPassengerMenuGroup,
-  graphql`
-    fragment InsuranceOverviewPassengerMenuGroup on BookingInterface {
-      passengers {
-        databaseId
-        ...PassengerInsuranceMenuItem
-      }
-    }
-  `,
-);
+export default InsuranceOverviewPassengerMenuGroup;
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewScene.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewScene.js
new file mode 100644
index 00000000..468536b2
--- /dev/null
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewScene.js
@@ -0,0 +1,129 @@
+// @flow strict
+
+import * as React from 'react';
+import { ScrollView, View } from 'react-native';
+import { LayoutSingleColumn, TextButton } from '@kiwicom/mobile-shared';
+import { Translation } from '@kiwicom/mobile-localization';
+import {
+  type RouteNamesType,
+  type NavigationType,
+} from '@kiwicom/mobile-navigation';
+
+import InsuranceOverviewPassengerMenuGroup from '../insuranceOverviewScene/InsuranceOverviewPassengerMenuGroup';
+import DestinationImage from '../insuranceOverviewScene/DestinationImage';
+import OrderSummary from '../insuranceOverviewScene/OrderSummary';
+import TripInfo from '../../../../components/header/TripInfo';
+import type { InsuranceOverviewSceneQueryResponse } from './__generated__/InsuranceOverviewSceneContainerQuery.graphql';
+import { withInsuranceContext } from './InsuranceOverviewSceneContext';
+
+type InsuranceType = 'NONE' | 'TRAVEL_BASIC' | 'TRAVEL_PLUS';
+
+type Passenger = {|
+  +fullName: ?string,
+  +title: ?string,
+  +birthday: ?Date,
+  +databaseId: ?number,
+  +insuranceType: ?InsuranceType,
+|};
+
+type InsurancePrice = {|
+  +insuranceType: InsuranceType,
+  +price: {|
+    +amount: number,
+    +currency: string,
+  |},
+|};
+
+type Data = {|
+  +passengers: Passenger[],
+  +insurancePrices: InsurancePrice[],
+|};
+
+type Change = {|
+  +databaseId: ?number,
+  +from: ?InsuranceType,
+  +to: ?InsuranceType,
+|};
+
+type Props = {|
+  +data: InsuranceOverviewSceneQueryResponse,
+  +navigation: NavigationType,
+  +initContext: (data: Data) => void,
+  +passengers: Passenger[],
+  +changes: Change[],
+  +initialised: boolean,
+|};
+
+class InsuranceOverviewScene extends React.Component<Props> {
+  componentDidMount() {
+    const passengers = this.props.data.singleBooking.passengers;
+    const insurancePrices = this.props.data.singleBooking.insurancePrices;
+    this.props.initContext({ passengers, insurancePrices });
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.initialised && !this.props.initialised) {
+      const passengers = this.props.data.singleBooking.passengers;
+      const insurancePrices = this.props.data.singleBooking.insurancePrices;
+      this.props.initContext({ passengers, insurancePrices });
+    }
+  }
+
+  navigate = (routeName: RouteNamesType) => {
+    this.props.navigation.navigate(routeName);
+  };
+
+  goToTheInsurancePayment = () => {
+    this.navigate('mmb.trip_services.insurance.payment');
+  };
+
+  goToTheInsuranceRefund = () => {
+    this.navigate('mmb.trip_services.insurance.refund');
+  };
+
+  render = () => {
+    const { data, passengers, changes } = this.props;
+
+    const hasChanged = changes.some(change => change.to !== change.from);
+
+    return (
+      <React.Fragment>
+        <ScrollView>
+          <LayoutSingleColumn>
+            <DestinationImage data={data.singleBooking} />
+
+            <TripInfo data={data.singleBooking} />
+
+            <InsuranceOverviewPassengerMenuGroup passengers={passengers} />
+
+            <View style={{ padding: 10 }}>
+              <TextButton
+                title={
+                  <Translation id="mmb.trip_services.order.process_to_refund" />
+                }
+                onPress={this.goToTheInsuranceRefund}
+              />
+            </View>
+
+            <View style={{ padding: 10 }}>
+              <TextButton
+                title={
+                  <Translation id="mmb.trip_services.order.process_to_payment" />
+                }
+                onPress={this.goToTheInsurancePayment}
+              />
+            </View>
+          </LayoutSingleColumn>
+        </ScrollView>
+        {hasChanged && <OrderSummary />}
+      </React.Fragment>
+    );
+  };
+}
+
+export default withInsuranceContext(state => ({
+  initContext: state.actions.initState,
+  passengers: state.passengers,
+  changes: state.changes,
+  initialised: state.initialised,
+}))(InsuranceOverviewScene);
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewSceneContainer.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewSceneContainer.js
new file mode 100644
index 00000000..4c446565
--- /dev/null
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewSceneContainer.js
@@ -0,0 +1,69 @@
+// @flow strict
+
+import * as React from 'react';
+import { graphql, PublicApiRenderer } from '@kiwicom/mobile-relay';
+import { type NavigationType } from '@kiwicom/mobile-navigation';
+
+import BookingDetailContext from '../../../../context/BookingDetailContext';
+import type { InsuranceOverviewSceneQueryResponse } from './__generated__/InsuranceOverviewSceneContainerQuery.graphql';
+import InsuranceOverviewScene from './InsuranceOverviewScene';
+
+type ContainerProps = {|
+  +navigation: NavigationType,
+|};
+
+export default class InsuranceOverviewSceneContainer extends React.Component<
+  ContainerProps,
+> {
+  renderInnerComponent = (response: InsuranceOverviewSceneQueryResponse) => {
+    return (
+      <InsuranceOverviewScene
+        data={response}
+        navigation={this.props.navigation}
+      />
+    );
+  };
+
+  render = () => {
+    return (
+      <BookingDetailContext.Consumer>
+        {({ bookingId, authToken }) => (
+          <PublicApiRenderer
+            render={this.renderInnerComponent}
+            query={graphql`
+              query InsuranceOverviewSceneContainerQuery(
+                $bookingId: Int!
+                $authToken: String!
+              ) {
+                singleBooking(id: $bookingId, authToken: $authToken) {
+                  ... on BookingInterface {
+                    ...DestinationImage
+                    ...TripInfo
+                    passengers {
+                      fullName
+                      title
+                      birthday
+                      databaseId
+                      insuranceType
+                    }
+                    insurancePrices {
+                      insuranceType
+                      price {
+                        amount
+                        currency
+                      }
+                    }
+                  }
+                }
+              }
+            `}
+            variables={{
+              bookingId,
+              authToken,
+            }}
+          />
+        )}
+      </BookingDetailContext.Consumer>
+    );
+  };
+}
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewSceneContext.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewSceneContext.js
new file mode 100644
index 00000000..631b6fc6
--- /dev/null
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/InsuranceOverviewSceneContext.js
@@ -0,0 +1,159 @@
+// @flow
+
+import * as React from 'react';
+
+const defaultState = {
+  passengers: [],
+  insurancePrices: [],
+  changes: [],
+  initialised: false,
+  actions: {
+    initState: () => {},
+    updatePassengerInsurance: () => {},
+  },
+};
+
+const { Consumer, Provider: ContextProvider } = React.createContext(
+  defaultState,
+);
+
+type InsuranceType = 'NONE' | 'TRAVEL_BASIC' | 'TRAVEL_PLUS';
+
+type Passenger = {|
+  +fullName: ?string,
+  +title: ?string,
+  +birthday: ?Date,
+  +databaseId: ?number,
+  +insuranceType: ?InsuranceType,
+|};
+
+type InsurancePrice = {|
+  +insuranceType: InsuranceType,
+  +price: {|
+    +amount: number,
+    +currency: string,
+  |},
+|};
+
+type Props = {|
+  +children: React.Node,
+|};
+
+type Data = {|
+  +passengers: Passenger[],
+  +insurancePrices: InsurancePrice[],
+|};
+
+type Change = {|
+  +databaseId: ?number,
+  +from: ?InsuranceType,
+  +to: ?InsuranceType,
+|};
+
+type UpdatePassengerInsurance = {|
+  +databaseId: ?number,
+  +insuranceType: ?InsuranceType,
+|};
+
+type State = {|
+  ...Data,
+  changes: Change[],
+  initialised: boolean,
+  +actions: {
+    +initState: (data: Data) => void,
+    +updatePassengerInsurance: (args: UpdatePassengerInsurance) => void,
+  },
+|};
+
+class Provider extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      ...defaultState,
+      actions: {
+        initState: this.initState,
+        updatePassengerInsurance: this.updatePassengerInsurance,
+      },
+    };
+  }
+
+  initState = ({ passengers, insurancePrices }: Data) => {
+    if (
+      this.state.passengers.length === 0 &&
+      this.state.insurancePrices.length === 0 &&
+      !this.state.initialised
+    ) {
+      const changes = passengers.map(passenger => ({
+        databaseId: passenger.databaseId,
+        from: passenger.insuranceType,
+        to: passenger.insuranceType,
+      }));
+      this.setState({
+        passengers,
+        insurancePrices,
+        changes,
+        initialised: true,
+      });
+    }
+  };
+
+  updatePassengerInsurance = ({
+    databaseId,
+    insuranceType,
+  }: UpdatePassengerInsurance) => {
+    if (!this.state.initialised) {
+      return;
+    }
+
+    const { passengers, changes } = this.state;
+
+    const passengerIndex = passengers.findIndex(
+      _passenger => _passenger.databaseId === databaseId,
+    );
+    const updatedPassengers = [
+      ...passengers.slice(0, passengerIndex),
+      {
+        ...passengers[passengerIndex],
+        insuranceType,
+      },
+      ...passengers.slice(passengerIndex + 1),
+    ];
+    const changeIndex = changes.findIndex(
+      change => change.databaseId === databaseId,
+    );
+    const updatedChanges = [
+      ...changes.slice(0, changeIndex),
+      {
+        ...changes[changeIndex],
+        to: insuranceType,
+      },
+      ...changes.slice(changeIndex + 1),
+    ];
+    this.setState({ passengers: updatedPassengers, changes: updatedChanges });
+  };
+
+  render = () => (
+    <ContextProvider value={this.state}>{this.props.children}</ContextProvider>
+  );
+}
+
+export default { Consumer, Provider };
+
+export function withInsuranceContext(select: (state: State) => Object) {
+  return function(Component: React.ElementType) {
+    const WithInsuranceContext = (props: Object) => {
+      const mapStateToProps = state => {
+        const stateProps = select(state);
+        return <Component {...props} {...stateProps} />;
+      };
+
+      return <Consumer>{mapStateToProps}</Consumer>;
+    };
+
+    // $FlowExpectedError: We need to pass on the navigationOptions if any, flow does not know about it, but a react component might have it
+    if (Component.navigationOptions) {
+      WithInsuranceContext.navigationOptions = Component.navigationOptions;
+    }
+    return WithInsuranceContext;
+  };
+}
diff --git a/app/MMB/src/scenes/tripServices/insurance/OrderSummary.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/OrderSummary.js
similarity index 100%
rename from app/MMB/src/scenes/tripServices/insurance/OrderSummary.js
rename to app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/OrderSummary.js
diff --git a/app/MMB/src/scenes/tripServices/insurance/__generated__/DestinationImage.graphql.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/__generated__/DestinationImage.graphql.js
similarity index 100%
rename from app/MMB/src/scenes/tripServices/insurance/__generated__/DestinationImage.graphql.js
rename to app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/__generated__/DestinationImage.graphql.js
diff --git a/app/MMB/src/scenes/tripServices/insurance/__generated__/InsuranceOverviewSceneQuery.graphql.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/__generated__/InsuranceOverviewSceneContainerQuery.graphql.js
similarity index 61%
rename from app/MMB/src/scenes/tripServices/insurance/__generated__/InsuranceOverviewSceneQuery.graphql.js
rename to app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/__generated__/InsuranceOverviewSceneContainerQuery.graphql.js
index 7c0c8711..5d3ef554 100644
--- a/app/MMB/src/scenes/tripServices/insurance/__generated__/InsuranceOverviewSceneQuery.graphql.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/__generated__/InsuranceOverviewSceneContainerQuery.graphql.js
@@ -1,6 +1,6 @@
 /**
  * @flow
- * @relayHash 3f15b26baf239ce97ef83e3d52a19845
+ * @relayHash 1205277540004d3eaa41d6b370ef55ed
  */
 
 /* eslint-disable */
@@ -10,22 +10,36 @@
 /*::
 import type { ConcreteRequest } from 'relay-runtime';
 type DestinationImage$ref = any;
-type InsuranceOverviewPassengerMenuGroup$ref = any;
 type TripInfo$ref = any;
-export type InsuranceOverviewSceneQueryVariables = {|
+export type InsuranceType = "NONE" | "TRAVEL_BASIC" | "TRAVEL_PLUS" | "%future added value";
+export type InsuranceOverviewSceneContainerQueryVariables = {|
   bookingId: number,
   authToken: string,
 |};
-export type InsuranceOverviewSceneQueryResponse = {|
+export type InsuranceOverviewSceneContainerQueryResponse = {|
   +singleBooking: ?{|
-    +$fragmentRefs: DestinationImage$ref & TripInfo$ref & InsuranceOverviewPassengerMenuGroup$ref
+    +passengers: ?$ReadOnlyArray<?{|
+      +fullName: ?string,
+      +title: ?string,
+      +birthday: ?any,
+      +databaseId: ?number,
+      +insuranceType: ?InsuranceType,
+    |}>,
+    +insurancePrices: ?$ReadOnlyArray<?{|
+      +insuranceType: ?InsuranceType,
+      +price: ?{|
+        +amount: ?number,
+        +currency: ?string,
+      |},
+    |}>,
+    +$fragmentRefs: DestinationImage$ref & TripInfo$ref,
   |}
 |};
 */
 
 
 /*
-query InsuranceOverviewSceneQuery(
+query InsuranceOverviewSceneContainerQuery(
   $bookingId: Int!
   $authToken: String!
 ) {
@@ -33,7 +47,20 @@ query InsuranceOverviewSceneQuery(
     __typename
     ...DestinationImage
     ...TripInfo
-    ...InsuranceOverviewPassengerMenuGroup
+    passengers {
+      fullName
+      title
+      birthday
+      databaseId
+      insuranceType
+    }
+    insurancePrices {
+      insuranceType
+      price {
+        amount
+        currency
+      }
+    }
     id
   }
 }
@@ -55,21 +82,6 @@ fragment TripInfo on BookingInterface {
   }
 }
 
-fragment InsuranceOverviewPassengerMenuGroup on BookingInterface {
-  passengers {
-    databaseId
-    ...PassengerInsuranceMenuItem
-  }
-}
-
-fragment PassengerInsuranceMenuItem on Passenger {
-  fullName
-  title
-  birthday
-  databaseId
-  insuranceType
-}
-
 fragment TripInfoOneWay on BookingOneWay {
   trip {
     ...TripCities
@@ -168,18 +180,102 @@ v1 = [
 v2 = {
   "kind": "ScalarField",
   "alias": null,
-  "name": "id",
+  "name": "insuranceType",
   "args": null,
   "storageKey": null
 },
 v3 = {
+  "kind": "LinkedField",
+  "alias": null,
+  "name": "passengers",
+  "storageKey": null,
+  "args": null,
+  "concreteType": "Passenger",
+  "plural": true,
+  "selections": [
+    {
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "fullName",
+      "args": null,
+      "storageKey": null
+    },
+    {
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "title",
+      "args": null,
+      "storageKey": null
+    },
+    {
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "birthday",
+      "args": null,
+      "storageKey": null
+    },
+    {
+      "kind": "ScalarField",
+      "alias": null,
+      "name": "databaseId",
+      "args": null,
+      "storageKey": null
+    },
+    v2
+  ]
+},
+v4 = {
+  "kind": "LinkedField",
+  "alias": null,
+  "name": "insurancePrices",
+  "storageKey": null,
+  "args": null,
+  "concreteType": "InsurancePrice",
+  "plural": true,
+  "selections": [
+    v2,
+    {
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "price",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "Price",
+      "plural": false,
+      "selections": [
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "amount",
+          "args": null,
+          "storageKey": null
+        },
+        {
+          "kind": "ScalarField",
+          "alias": null,
+          "name": "currency",
+          "args": null,
+          "storageKey": null
+        }
+      ]
+    }
+  ]
+},
+v5 = {
+  "kind": "ScalarField",
+  "alias": null,
+  "name": "id",
+  "args": null,
+  "storageKey": null
+},
+v6 = {
   "kind": "ScalarField",
   "alias": null,
   "name": "localTime",
   "args": null,
   "storageKey": null
 },
-v4 = [
+v7 = [
   {
     "kind": "LinkedField",
     "alias": null,
@@ -214,19 +310,19 @@ v4 = [
         "args": null,
         "storageKey": null
       },
-      v2
+      v5
     ]
   },
-  v3
+  v6
 ],
-v5 = {
+v8 = {
   "kind": "ScalarField",
   "alias": null,
   "name": "duration",
   "args": null,
   "storageKey": null
 },
-v6 = [
+v9 = [
   {
     "kind": "LinkedField",
     "alias": null,
@@ -235,7 +331,7 @@ v6 = [
     "args": null,
     "concreteType": "RouteStop",
     "plural": false,
-    "selections": v4
+    "selections": v7
   },
   {
     "kind": "LinkedField",
@@ -245,23 +341,23 @@ v6 = [
     "args": null,
     "concreteType": "RouteStop",
     "plural": false,
-    "selections": v4
+    "selections": v7
   },
-  v5
+  v8
 ],
-v7 = [
-  v3
+v10 = [
+  v6
 ];
 return {
   "kind": "Request",
   "operationKind": "query",
-  "name": "InsuranceOverviewSceneQuery",
+  "name": "InsuranceOverviewSceneContainerQuery",
   "id": null,
-  "text": "query InsuranceOverviewSceneQuery(\n  $bookingId: Int!\n  $authToken: String!\n) {\n  singleBooking(id: $bookingId, authToken: $authToken) {\n    __typename\n    ...DestinationImage\n    ...TripInfo\n    ...InsuranceOverviewPassengerMenuGroup\n    id\n  }\n}\n\nfragment DestinationImage on BookingInterface {\n  destinationImageUrl(dimensions: _375x165)\n}\n\nfragment TripInfo on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...TripInfoOneWay\n  }\n  ... on BookingReturn {\n    ...TripInfoReturn\n  }\n  ... on BookingMulticity {\n    ...TripInfoMulticity\n  }\n}\n\nfragment InsuranceOverviewPassengerMenuGroup on BookingInterface {\n  passengers {\n    databaseId\n    ...PassengerInsuranceMenuItem\n  }\n}\n\nfragment PassengerInsuranceMenuItem on Passenger {\n  fullName\n  title\n  birthday\n  databaseId\n  insuranceType\n}\n\nfragment TripInfoOneWay on BookingOneWay {\n  trip {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripInfoReturn on BookingReturn {\n  outbound {\n    ...TripCities\n    ...TripTimes\n  }\n  inbound {\n    ...TripTimes\n  }\n}\n\nfragment TripInfoMulticity on BookingMulticity {\n  trips {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripCities on Trip {\n  departure {\n    ...Location\n  }\n  arrival {\n    ...Location\n  }\n}\n\nfragment TripTimes on Trip {\n  ...Duration\n  departure {\n    ...DateTime\n  }\n  arrival {\n    ...DateTime\n  }\n}\n\nfragment Duration on Trip {\n  duration\n}\n\nfragment DateTime on RouteStop {\n  localTime\n}\n\nfragment Location on RouteStop {\n  airport {\n    city {\n      name\n    }\n    ...CountryFlag\n    id\n  }\n}\n\nfragment CountryFlag on Location {\n  countryFlagURL\n}\n",
+  "text": "query InsuranceOverviewSceneContainerQuery(\n  $bookingId: Int!\n  $authToken: String!\n) {\n  singleBooking(id: $bookingId, authToken: $authToken) {\n    __typename\n    ...DestinationImage\n    ...TripInfo\n    passengers {\n      fullName\n      title\n      birthday\n      databaseId\n      insuranceType\n    }\n    insurancePrices {\n      insuranceType\n      price {\n        amount\n        currency\n      }\n    }\n    id\n  }\n}\n\nfragment DestinationImage on BookingInterface {\n  destinationImageUrl(dimensions: _375x165)\n}\n\nfragment TripInfo on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...TripInfoOneWay\n  }\n  ... on BookingReturn {\n    ...TripInfoReturn\n  }\n  ... on BookingMulticity {\n    ...TripInfoMulticity\n  }\n}\n\nfragment TripInfoOneWay on BookingOneWay {\n  trip {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripInfoReturn on BookingReturn {\n  outbound {\n    ...TripCities\n    ...TripTimes\n  }\n  inbound {\n    ...TripTimes\n  }\n}\n\nfragment TripInfoMulticity on BookingMulticity {\n  trips {\n    ...TripCities\n    ...TripTimes\n  }\n}\n\nfragment TripCities on Trip {\n  departure {\n    ...Location\n  }\n  arrival {\n    ...Location\n  }\n}\n\nfragment TripTimes on Trip {\n  ...Duration\n  departure {\n    ...DateTime\n  }\n  arrival {\n    ...DateTime\n  }\n}\n\nfragment Duration on Trip {\n  duration\n}\n\nfragment DateTime on RouteStop {\n  localTime\n}\n\nfragment Location on RouteStop {\n  airport {\n    city {\n      name\n    }\n    ...CountryFlag\n    id\n  }\n}\n\nfragment CountryFlag on Location {\n  countryFlagURL\n}\n",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
-    "name": "InsuranceOverviewSceneQuery",
+    "name": "InsuranceOverviewSceneContainerQuery",
     "type": "RootQuery",
     "metadata": null,
     "argumentDefinitions": v0,
@@ -285,18 +381,15 @@ return {
             "name": "TripInfo",
             "args": null
           },
-          {
-            "kind": "FragmentSpread",
-            "name": "InsuranceOverviewPassengerMenuGroup",
-            "args": null
-          }
+          v3,
+          v4
         ]
       }
     ]
   },
   "operation": {
     "kind": "Operation",
-    "name": "InsuranceOverviewSceneQuery",
+    "name": "InsuranceOverviewSceneContainerQuery",
     "argumentDefinitions": v0,
     "selections": [
       {
@@ -329,53 +422,9 @@ return {
             "args": null,
             "storageKey": null
           },
-          {
-            "kind": "LinkedField",
-            "alias": null,
-            "name": "passengers",
-            "storageKey": null,
-            "args": null,
-            "concreteType": "Passenger",
-            "plural": true,
-            "selections": [
-              {
-                "kind": "ScalarField",
-                "alias": null,
-                "name": "databaseId",
-                "args": null,
-                "storageKey": null
-              },
-              {
-                "kind": "ScalarField",
-                "alias": null,
-                "name": "fullName",
-                "args": null,
-                "storageKey": null
-              },
-              {
-                "kind": "ScalarField",
-                "alias": null,
-                "name": "title",
-                "args": null,
-                "storageKey": null
-              },
-              {
-                "kind": "ScalarField",
-                "alias": null,
-                "name": "birthday",
-                "args": null,
-                "storageKey": null
-              },
-              {
-                "kind": "ScalarField",
-                "alias": null,
-                "name": "insuranceType",
-                "args": null,
-                "storageKey": null
-              }
-            ]
-          },
-          v2,
+          v3,
+          v4,
+          v5,
           {
             "kind": "InlineFragment",
             "type": "BookingMulticity",
@@ -388,7 +437,7 @@ return {
                 "args": null,
                 "concreteType": "Trip",
                 "plural": true,
-                "selections": v6
+                "selections": v9
               }
             ]
           },
@@ -404,7 +453,7 @@ return {
                 "args": null,
                 "concreteType": "Trip",
                 "plural": false,
-                "selections": v6
+                "selections": v9
               },
               {
                 "kind": "LinkedField",
@@ -415,7 +464,7 @@ return {
                 "concreteType": "Trip",
                 "plural": false,
                 "selections": [
-                  v5,
+                  v8,
                   {
                     "kind": "LinkedField",
                     "alias": null,
@@ -424,7 +473,7 @@ return {
                     "args": null,
                     "concreteType": "RouteStop",
                     "plural": false,
-                    "selections": v7
+                    "selections": v10
                   },
                   {
                     "kind": "LinkedField",
@@ -434,7 +483,7 @@ return {
                     "args": null,
                     "concreteType": "RouteStop",
                     "plural": false,
-                    "selections": v7
+                    "selections": v10
                   }
                 ]
               }
@@ -452,7 +501,7 @@ return {
                 "args": null,
                 "concreteType": "Trip",
                 "plural": false,
-                "selections": v6
+                "selections": v9
               }
             ]
           }
@@ -463,5 +512,5 @@ return {
 };
 })();
 // prettier-ignore
-(node/*: any*/).hash = '65f23280b724872ea01ae34e7b748f12';
+(node/*: any*/).hash = '0a26f8835031982177ac297e7c92ef03';
 module.exports = node;
diff --git a/app/MMB/src/scenes/tripServices/insurance/menuItem/PassengerInsuranceMenuItem.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/menuItem/PassengerInsuranceMenuItem.js
similarity index 56%
rename from app/MMB/src/scenes/tripServices/insurance/menuItem/PassengerInsuranceMenuItem.js
rename to app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/menuItem/PassengerInsuranceMenuItem.js
index 4db898a1..95d81de4 100644
--- a/app/MMB/src/scenes/tripServices/insurance/menuItem/PassengerInsuranceMenuItem.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/menuItem/PassengerInsuranceMenuItem.js
@@ -2,23 +2,31 @@
 
 import * as React from 'react';
 import idx from 'idx';
-import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import {
   type NavigationType,
   withNavigation,
 } from '@kiwicom/mobile-navigation';
 
 import PassengerMenuRightContent from './PassengerInsuranceMenuRightContent';
-import PassengerMenuItem from '../../../../components/passengerMenuItem/PassengerMenuItem';
-import type { PassengerInsuranceMenuItem as PassengerResponseType } from './__generated__/PassengerInsuranceMenuItem.graphql';
+import PassengerMenuItem from '../../../../../components/passengerMenuItem/PassengerMenuItem';
+
+type InsuranceType = 'NONE' | 'TRAVEL_BASIC' | 'TRAVEL_PLUS';
+
+type Passenger = {|
+  +fullName: ?string,
+  +title: ?string,
+  +birthday: ?Date,
+  +databaseId: ?number,
+  +insuranceType: ?InsuranceType,
+|};
 
 type Props = {|
-  +data: PassengerResponseType,
+  +passenger: Passenger,
   +navigation: NavigationType,
 |};
 
 const PassengerInsuranceMenuItem = (props: Props) => {
-  const passenger = idx(props, _ => _.data);
+  const passenger = idx(props, _ => _.passenger);
   const fullName = idx(passenger, _ => _.fullName) || '';
   const insuranceType = idx(passenger, _ => _.insuranceType);
 
@@ -38,15 +46,4 @@ const PassengerInsuranceMenuItem = (props: Props) => {
   );
 };
 
-export default createFragmentContainer(
-  withNavigation(PassengerInsuranceMenuItem),
-  graphql`
-    fragment PassengerInsuranceMenuItem on Passenger {
-      fullName
-      title
-      birthday
-      databaseId
-      insuranceType
-    }
-  `,
-);
+export default withNavigation(PassengerInsuranceMenuItem);
diff --git a/app/MMB/src/scenes/tripServices/insurance/menuItem/PassengerInsuranceMenuRightContent.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/menuItem/PassengerInsuranceMenuRightContent.js
similarity index 100%
rename from app/MMB/src/scenes/tripServices/insurance/menuItem/PassengerInsuranceMenuRightContent.js
rename to app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/menuItem/PassengerInsuranceMenuRightContent.js
diff --git a/app/MMB/src/scenes/tripServices/insurance/menuItem/__generated__/PassengerInsuranceMenuItem.graphql.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/menuItem/__generated__/PassengerInsuranceMenuItem.graphql.js
similarity index 100%
rename from app/MMB/src/scenes/tripServices/insurance/menuItem/__generated__/PassengerInsuranceMenuItem.graphql.js
rename to app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/menuItem/__generated__/PassengerInsuranceMenuItem.graphql.js
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/InsuranceSelectionScene.js b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/InsuranceSelectionScene.js
index d5019b07..7110ae2d 100644
--- a/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/InsuranceSelectionScene.js
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceSelectionScene/InsuranceSelectionScene.js
@@ -19,29 +19,46 @@ import type {
   InsuranceSelectionSceneQueryResponse,
   InsuranceType,
 } from './__generated__/InsuranceSelectionSceneContainerQuery.graphql';
+import { withInsuranceContext } from '../insuranceOverviewScene/InsuranceOverviewSceneContext';
 
 type Props = {|
   +navigation: NavigationType,
   +data: InsuranceSelectionSceneQueryResponse,
+  +updatePassengerInsurance: (args: UpdatePassengerInsurance) => void,
 |};
 
 type State = {|
   selectedVariant: InsuranceType,
 |};
 
+type UpdatePassengerInsurance = {|
+  +databaseId: ?number,
+  +insuranceType: ?InsuranceType,
+|};
+
 class InsuranceSelectionScene extends React.Component<Props, State> {
-  state = {
-    selectedVariant: 'NONE',
-  };
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedVariant: this.props.navigation.state.params.passenger
+        .insuranceType,
+    };
+  }
 
   goToMoreInfo = () =>
     this.props.navigation.navigate(
       'mmb.trip_services.insurance.selection.more_info',
     );
 
-  selectVariant = (insuranceType: InsuranceType) =>
-    this.setState({ selectedVariant: insuranceType });
-
+  selectVariant = (insuranceType: InsuranceType) => {
+    this.setState({ selectedVariant: insuranceType }, () => {
+      const { passenger } = this.props.navigation.state.params;
+      this.props.updatePassengerInsurance({
+        databaseId: passenger.databaseId,
+        insuranceType,
+      });
+    });
+  };
   render = () => {
     const { passenger } = this.props.navigation.state.params;
 
@@ -90,7 +107,11 @@ class InsuranceSelectionScene extends React.Component<Props, State> {
   };
 }
 
-export default withNavigation(InsuranceSelectionScene);
+export default withNavigation(
+  withInsuranceContext(state => ({
+    updatePassengerInsurance: state.actions.updatePassengerInsurance,
+  }))(InsuranceSelectionScene),
+);
 
 const styleSheet = StyleSheet.create({
   wrapper: {


Test patch:
diff --git a/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/__tests__/InsuranceOverviewSceneContext.test.js b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/__tests__/InsuranceOverviewSceneContext.test.js
new file mode 100644
index 00000000..7a3c51d0
--- /dev/null
+++ b/app/MMB/src/scenes/tripServices/insurance/insuranceOverviewScene/__tests__/InsuranceOverviewSceneContext.test.js
@@ -0,0 +1,138 @@
+// @flow
+
+import * as React from 'react';
+import renderer from 'react-test-renderer';
+
+import InsuranceOverviewSceneContext from '../InsuranceOverviewSceneContext';
+
+class ContextConsumer extends React.Component<{}> {
+  render = () => null;
+}
+
+const getWrapper = () =>
+  renderer.create(
+    <InsuranceOverviewSceneContext.Provider>
+      <InsuranceOverviewSceneContext.Consumer>
+        {({ actions: { initState, updatePassengerInsurance }, ...rest }) => (
+          <ContextConsumer
+            {...rest}
+            initState={initState}
+            updatePassengerInsurance={updatePassengerInsurance}
+          />
+        )}
+      </InsuranceOverviewSceneContext.Consumer>
+    </InsuranceOverviewSceneContext.Provider>,
+  );
+
+describe('InsuranceOverviewSceneContext', () => {
+  it('injects the props to consumers', () => {
+    const wrapper = getWrapper();
+
+    const instance = wrapper.root.findByType(ContextConsumer);
+    expect(instance.props.passengers).toEqual([]);
+    expect(instance.props.insurancePrices).toEqual([]);
+    expect(instance.props.changes).toEqual([]);
+    expect(instance.props.initialised).toBe(false);
+    expect(typeof instance.props.initState).toBe('function');
+    expect(typeof instance.props.updatePassengerInsurance).toBe('function');
+  });
+
+  it('initialises the state', () => {
+    const wrapper = getWrapper();
+    const instance = wrapper.root.findByType(ContextConsumer);
+
+    instance.props.initState({
+      passengers: [
+        {
+          fullName: 'John Smith',
+          title: 'Mr',
+          birthday: new Date('1980-08-08'),
+          databaseId: 123,
+          insuranceType: 'NONE',
+        },
+      ],
+      insurancePrices: [
+        {
+          insuranceType: 'NONE',
+          price: null,
+        },
+      ],
+    });
+
+    expect(instance.props.passengers).toEqual([
+      {
+        fullName: 'John Smith',
+        title: 'Mr',
+        birthday: new Date('1980-08-08'),
+        databaseId: 123,
+        insuranceType: 'NONE',
+      },
+    ]);
+    expect(instance.props.insurancePrices).toEqual([
+      {
+        insuranceType: 'NONE',
+        price: null,
+      },
+    ]);
+    expect(instance.props.changes).toEqual([
+      {
+        databaseId: 123,
+        from: 'NONE',
+        to: 'NONE',
+      },
+    ]);
+    expect(instance.props.initialised).toBe(true);
+  });
+
+  it("updates a passenger's insurance", () => {
+    const wrapper = getWrapper();
+    const instance = wrapper.root.findByType(ContextConsumer);
+    instance.props.updatePassengerInsurance({
+      databaseId: 123,
+      insuranceType: 'TRAVEL_PLUS',
+    });
+    expect(instance.props.passengers).toEqual([]);
+    expect(instance.props.changes).toEqual([]);
+    expect(instance.props.initialised).toBe(false);
+
+    instance.props.initState({
+      passengers: [
+        {
+          fullName: 'John Smith',
+          title: 'Mr',
+          birthday: new Date('1980-08-08'),
+          databaseId: 123,
+          insuranceType: 'NONE',
+        },
+      ],
+      insurancePrices: [
+        {
+          insuranceType: 'NONE',
+          price: null,
+        },
+      ],
+    });
+
+    instance.props.updatePassengerInsurance({
+      databaseId: 123,
+      insuranceType: 'TRAVEL_PLUS',
+    });
+    expect(instance.props.passengers).toEqual([
+      {
+        fullName: 'John Smith',
+        title: 'Mr',
+        birthday: new Date('1980-08-08'),
+        databaseId: 123,
+        insuranceType: 'TRAVEL_PLUS',
+      },
+    ]);
+    expect(instance.props.changes).toEqual([
+      {
+        databaseId: 123,
+        from: 'NONE',
+        to: 'TRAVEL_PLUS',
+      },
+    ]);
+    expect(instance.props.initialised).toBe(true);
+  });
+});