Repository: kiwicom/mobile
Pull request #830 (2018-07-06 15:40:54)

MMB: Add information missing to main menu


Patch:
diff --git a/app/MMB/src/MainMenu.js b/app/MMB/src/MainMenu.js
index e1a67247..c22b37ab 100644
--- a/app/MMB/src/MainMenu.js
+++ b/app/MMB/src/MainMenu.js
@@ -9,6 +9,7 @@ import ManageMenuGroup from './menuGroups/ManageMenuGroup';
 import PassengerMenuGroup from './menuGroups/passengerMenuGroup/PassengerMenuGroup';
 import ServicesMenuGroup from './menuGroups/ServicesMenuGroup';
 import TripInfoMenuGroup from './menuGroups/TripInfoMenuGroup';
+import MissingInformation from './components/MissingInformation';
 import type { MainMenu as BookingType } from './__generated__/MainMenu.graphql';
 
 type Props = {|
@@ -45,6 +46,8 @@ class MainMenu extends React.Component<Props, State> {
           openSubmenu={this.handleOpenSubmenu}
         />
 
+        <MissingInformation data={this.props.data} />
+
         <TripInfoMenuGroup
           activeId={activeId}
           openSubmenu={this.handleOpenSubmenu}
@@ -76,6 +79,7 @@ export default createFragmentContainer(
     fragment MainMenu on BookingInterface {
       ...Header
       ...PassengerMenuGroup
+      ...MissingInformation
     }
   `,
 );
diff --git a/app/MMB/src/__generated__/MainMenu.graphql.js b/app/MMB/src/__generated__/MainMenu.graphql.js
index 4f42dfbe..e2c45958 100644
--- a/app/MMB/src/__generated__/MainMenu.graphql.js
+++ b/app/MMB/src/__generated__/MainMenu.graphql.js
@@ -9,11 +9,12 @@
 /*::
 import type { ConcreteFragment } from 'relay-runtime';
 type Header$ref = any;
+type MissingInformation$ref = any;
 type PassengerMenuGroup$ref = any;
 import type { FragmentReference } from "relay-runtime";
 declare export opaque type MainMenu$ref: FragmentReference;
 export type MainMenu = {|
-  +$fragmentRefs: Header$ref & PassengerMenuGroup$ref,
+  +$fragmentRefs: Header$ref & PassengerMenuGroup$ref & MissingInformation$ref,
   +$refType: MainMenu$ref,
 |};
 */
@@ -35,9 +36,14 @@ const node/*: ConcreteFragment*/ = {
       "kind": "FragmentSpread",
       "name": "PassengerMenuGroup",
       "args": null
+    },
+    {
+      "kind": "FragmentSpread",
+      "name": "MissingInformation",
+      "args": null
     }
   ]
 };
 // prettier-ignore
-(node/*: any*/).hash = '2585c83d4a9055f2c3939b4c22f33ee8';
+(node/*: any*/).hash = '001decf0a45eee59ebaa10c71a870206';
 module.exports = node;
diff --git a/app/MMB/src/__generated__/MainMenuContainerQuery.graphql.js b/app/MMB/src/__generated__/MainMenuContainerQuery.graphql.js
index bee991b4..8269c86a 100644
--- a/app/MMB/src/__generated__/MainMenuContainerQuery.graphql.js
+++ b/app/MMB/src/__generated__/MainMenuContainerQuery.graphql.js
@@ -1,6 +1,6 @@
 /**
  * @flow
- * @relayHash 044a39e7b59dac67ae42b1b9856cafa3
+ * @relayHash 6eab53b5b6acce77a30523be27ff5c2b
  */
 
 /* eslint-disable */
@@ -37,6 +37,7 @@ query MainMenuContainerQuery(
 fragment MainMenu on BookingInterface {
   ...Header
   ...PassengerMenuGroup
+  ...MissingInformation
 }
 
 fragment Header on BookingInterface {
@@ -50,6 +51,14 @@ fragment PassengerMenuGroup on BookingInterface {
   ...PassengerMenuDetail
 }
 
+fragment MissingInformation on BookingInterface {
+  passengers {
+    travelDocument {
+      idNumber
+    }
+  }
+}
+
 fragment PassengerMenuDetail on BookingInterface {
   ...Visa
   passengers {
@@ -446,7 +455,7 @@ return {
   "operationKind": "query",
   "name": "MainMenuContainerQuery",
   "id": null,
-  "text": "query MainMenuContainerQuery(\n  $bookingId: ID!\n) {\n  node(id: $bookingId) {\n    __typename\n    ... on BookingInterface {\n      ...MainMenu\n    }\n    id\n  }\n}\n\nfragment MainMenu on BookingInterface {\n  ...Header\n  ...PassengerMenuGroup\n}\n\nfragment Header on BookingInterface {\n  isPastBooking\n  ...StatusBar\n  ...TripInfo\n  ...TripOverview\n}\n\nfragment PassengerMenuGroup on BookingInterface {\n  ...PassengerMenuDetail\n}\n\nfragment PassengerMenuDetail on BookingInterface {\n  ...Visa\n  passengers {\n    databaseId\n    ...Passenger\n  }\n}\n\nfragment Visa on BookingInterface {\n  passengers {\n    visaInformation {\n      requiredIn {\n        name\n        id\n      }\n      warningIn {\n        name\n        id\n      }\n    }\n  }\n}\n\nfragment Passenger on Passenger {\n  fullName\n  title\n  birthday\n}\n\nfragment StatusBar on BookingInterface {\n  ...StatusBarIcon\n  databaseId\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 TripOverview on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...OneWayTimeline\n  }\n  ... on BookingReturn {\n    ...ReturnTimeline\n  }\n  ... on BookingMulticity {\n    ...MulticityTimeline\n  }\n}\n\nfragment OneWayTimeline on BookingOneWay {\n  trip {\n    ...Timeline\n  }\n}\n\nfragment ReturnTimeline on BookingReturn {\n  outbound {\n    ...Timeline\n  }\n  inbound {\n    ...Timeline\n  }\n}\n\nfragment MulticityTimeline on BookingMulticity {\n  trips {\n    ...Timeline\n  }\n}\n\nfragment Timeline on Trip {\n  legs {\n    departure {\n      ...TimelineDeparture_routeStop\n    }\n    arrival {\n      ...TimelineArrival\n    }\n    ...TimelineDeparture_legInfo\n    id\n  }\n}\n\nfragment TimelineDeparture_routeStop on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineArrival on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineDeparture_legInfo on Leg {\n  flightNumber\n  airline {\n    name\n    logoUrl\n  }\n}\n\nfragment TimelineTitle on RouteStop {\n  localTime\n  airport {\n    locationId\n    city {\n      name\n    }\n    id\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\nfragment StatusBarIcon on BookingInterface {\n  status\n  isPastBooking\n}\n",
+  "text": "query MainMenuContainerQuery(\n  $bookingId: ID!\n) {\n  node(id: $bookingId) {\n    __typename\n    ... on BookingInterface {\n      ...MainMenu\n    }\n    id\n  }\n}\n\nfragment MainMenu on BookingInterface {\n  ...Header\n  ...PassengerMenuGroup\n  ...MissingInformation\n}\n\nfragment Header on BookingInterface {\n  isPastBooking\n  ...StatusBar\n  ...TripInfo\n  ...TripOverview\n}\n\nfragment PassengerMenuGroup on BookingInterface {\n  ...PassengerMenuDetail\n}\n\nfragment MissingInformation on BookingInterface {\n  passengers {\n    travelDocument {\n      idNumber\n    }\n  }\n}\n\nfragment PassengerMenuDetail on BookingInterface {\n  ...Visa\n  passengers {\n    databaseId\n    ...Passenger\n  }\n}\n\nfragment Visa on BookingInterface {\n  passengers {\n    visaInformation {\n      requiredIn {\n        name\n        id\n      }\n      warningIn {\n        name\n        id\n      }\n    }\n  }\n}\n\nfragment Passenger on Passenger {\n  fullName\n  title\n  birthday\n}\n\nfragment StatusBar on BookingInterface {\n  ...StatusBarIcon\n  databaseId\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 TripOverview on BookingInterface {\n  __typename\n  ... on BookingOneWay {\n    ...OneWayTimeline\n  }\n  ... on BookingReturn {\n    ...ReturnTimeline\n  }\n  ... on BookingMulticity {\n    ...MulticityTimeline\n  }\n}\n\nfragment OneWayTimeline on BookingOneWay {\n  trip {\n    ...Timeline\n  }\n}\n\nfragment ReturnTimeline on BookingReturn {\n  outbound {\n    ...Timeline\n  }\n  inbound {\n    ...Timeline\n  }\n}\n\nfragment MulticityTimeline on BookingMulticity {\n  trips {\n    ...Timeline\n  }\n}\n\nfragment Timeline on Trip {\n  legs {\n    departure {\n      ...TimelineDeparture_routeStop\n    }\n    arrival {\n      ...TimelineArrival\n    }\n    ...TimelineDeparture_legInfo\n    id\n  }\n}\n\nfragment TimelineDeparture_routeStop on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineArrival on RouteStop {\n  ...TimelineTitle\n}\n\nfragment TimelineDeparture_legInfo on Leg {\n  flightNumber\n  airline {\n    name\n    logoUrl\n  }\n}\n\nfragment TimelineTitle on RouteStop {\n  localTime\n  airport {\n    locationId\n    city {\n      name\n    }\n    id\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\nfragment StatusBarIcon on BookingInterface {\n  status\n  isPastBooking\n}\n",
   "metadata": {},
   "fragment": {
     "kind": "Fragment",
@@ -570,6 +579,24 @@ return {
                 "name": "birthday",
                 "args": null,
                 "storageKey": null
+              },
+              {
+                "kind": "LinkedField",
+                "alias": null,
+                "name": "travelDocument",
+                "storageKey": null,
+                "args": null,
+                "concreteType": "TravelDocument",
+                "plural": false,
+                "selections": [
+                  {
+                    "kind": "ScalarField",
+                    "alias": null,
+                    "name": "idNumber",
+                    "args": null,
+                    "storageKey": null
+                  }
+                ]
               }
             ]
           },
diff --git a/app/MMB/src/components/MissingInformation.js b/app/MMB/src/components/MissingInformation.js
new file mode 100644
index 00000000..4f7ddd73
--- /dev/null
+++ b/app/MMB/src/components/MissingInformation.js
@@ -0,0 +1,93 @@
+// @flow strict
+
+import * as React from 'react';
+import { graphql, createFragmentContainer } from '@kiwicom/mobile-relay';
+import { Translation } from '@kiwicom/mobile-localization';
+import idx from 'idx';
+import { View } from 'react-native';
+import {
+  StyleSheet,
+  SimpleCard,
+  Text,
+  Button,
+  Color,
+} from '@kiwicom/mobile-shared';
+
+import Alert from '../components/alert/Alert';
+import type { MissingInformation as PassengerType } from './__generated__/MissingInformation.graphql';
+
+type Props = {|
+  +data: PassengerType,
+|};
+
+class MissingInformation extends React.Component<Props> {
+  fillInPassengerInfo = () => {
+    console.warn('TODO');
+  };
+
+  render = () => {
+    const passengers = idx(this.props.data, _ => _.passengers) || [];
+    const passengerWithMissingId = passengers.find(passenger =>
+      Boolean(idx(passenger, _ => _.travelDocument.idNumber)),
+    );
+
+    if (passengerWithMissingId != null) {
+      return null;
+    }
+
+    return (
+      <View style={styles.container}>
+        <Alert
+          type="danger"
+          title={
+            <Translation id="mmb.missing_information.missing_informations" />
+          }
+          titleStyle={styles.alertText}
+        />
+        <SimpleCard>
+          <Text style={styles.missingInformationText}>
+            <Translation id="mmb.missing_information.fill_in_information" />
+          </Text>
+          <Button onPress={this.fillInPassengerInfo}>
+            <Text style={styles.buttonText}>
+              <Translation id="mmb.missing_information.button_text" />
+            </Text>
+          </Button>
+        </SimpleCard>
+      </View>
+    );
+  };
+}
+
+export default createFragmentContainer(
+  MissingInformation,
+  graphql`
+    fragment MissingInformation on BookingInterface {
+      passengers {
+        travelDocument {
+          idNumber
+        }
+      }
+    }
+  `,
+);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 22,
+  },
+  alertText: {
+    fontSize: 14,
+    fontWeight: '600',
+    padding: 9,
+  },
+  missingInformationText: {
+    marginTop: 5,
+    marginHorizontal: 5,
+    marginBottom: 15,
+  },
+  buttonText: {
+    fontWeight: '600',
+    color: Color.white,
+  },
+});
diff --git a/app/MMB/src/components/__generated__/MissingInformation.graphql.js b/app/MMB/src/components/__generated__/MissingInformation.graphql.js
new file mode 100644
index 00000000..32138273
--- /dev/null
+++ b/app/MMB/src/components/__generated__/MissingInformation.graphql.js
@@ -0,0 +1,64 @@
+/**
+ * @flow
+ */
+
+/* eslint-disable */
+
+'use strict';
+
+/*::
+import type { ConcreteFragment } from 'relay-runtime';
+import type { FragmentReference } from "relay-runtime";
+declare export opaque type MissingInformation$ref: FragmentReference;
+export type MissingInformation = {|
+  +passengers: ?$ReadOnlyArray<?{|
+    +travelDocument: ?{|
+      +idNumber: ?string
+    |}
+  |}>,
+  +$refType: MissingInformation$ref,
+|};
+*/
+
+
+const node/*: ConcreteFragment*/ = {
+  "kind": "Fragment",
+  "name": "MissingInformation",
+  "type": "BookingInterface",
+  "metadata": null,
+  "argumentDefinitions": [],
+  "selections": [
+    {
+      "kind": "LinkedField",
+      "alias": null,
+      "name": "passengers",
+      "storageKey": null,
+      "args": null,
+      "concreteType": "Passenger",
+      "plural": true,
+      "selections": [
+        {
+          "kind": "LinkedField",
+          "alias": null,
+          "name": "travelDocument",
+          "storageKey": null,
+          "args": null,
+          "concreteType": "TravelDocument",
+          "plural": false,
+          "selections": [
+            {
+              "kind": "ScalarField",
+              "alias": null,
+              "name": "idNumber",
+              "args": null,
+              "storageKey": null
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+// prettier-ignore
+(node/*: any*/).hash = 'f8a8069619f85b92099f63d8ea2b613b';
+module.exports = node;
diff --git a/app/MMB/src/components/alert/Alert.js b/app/MMB/src/components/alert/Alert.js
index d54b442e..bc059c49 100644
--- a/app/MMB/src/components/alert/Alert.js
+++ b/app/MMB/src/components/alert/Alert.js
@@ -1,15 +1,21 @@
 // @flow
 
 import * as React from 'react';
-import { StyleSheet, Icon, Color } from '@kiwicom/mobile-shared';
+import {
+  StyleSheet,
+  Icon,
+  Color,
+  type StylePropType,
+} from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 
 import RenderAlert from './RenderAlert';
 
 type Props = {|
-  type: 'danger' | 'warning' | 'success',
-  title: React.Element<typeof Translation>,
-  children?: React.Node,
+  +type: 'danger' | 'warning' | 'success',
+  +title: React.Element<typeof Translation>,
+  +children?: React.Node,
+  +titleStyle?: StylePropType,
 |};
 
 const ICON_SIZE = 17;
@@ -21,7 +27,7 @@ export default function Alert(props: Props) {
         <RenderAlert
           icon={<Icon name="warning" size={ICON_SIZE} color={RED} />}
           title={props.title}
-          titleStyle={styles.titleDanger}
+          titleStyle={[styles.titleDanger, props.titleStyle]}
           containerStyle={styles.containerDanger}
         >
           {props.children}
@@ -32,7 +38,7 @@ export default function Alert(props: Props) {
         <RenderAlert
           icon={<Icon name="warning" size={ICON_SIZE} color="#eb9d08" />}
           title={props.title}
-          titleStyle={styles.titleWarning}
+          titleStyle={[styles.titleWarning, props.titleStyle]}
           containerStyle={styles.containerWarning}
         >
           {props.children}
@@ -50,7 +56,7 @@ export default function Alert(props: Props) {
             />
           }
           title={props.title}
-          titleStyle={styles.titleSuccess}
+          titleStyle={[styles.titleSuccess, props.titleStyle]}
           containerStyle={styles.containerSuccess}
         >
           {props.children}
diff --git a/app/MMB/src/scenes/passenger/baggage/Baggage.js b/app/MMB/src/scenes/passenger/baggage/Baggage.js
index 635f1cb8..bc9d2d14 100644
--- a/app/MMB/src/scenes/passenger/baggage/Baggage.js
+++ b/app/MMB/src/scenes/passenger/baggage/Baggage.js
@@ -12,6 +12,7 @@ import idx from 'idx';
 
 import CabinBags from './CabinBags';
 import CheckedBaggage from './CheckedBaggage';
+import BaggageGroupButton from './BaggageGroupButton';
 import type { Baggage as BaggageType } from './__generated__/Baggage.graphql';
 
 type Props = {|
@@ -20,12 +21,14 @@ type Props = {|
 
 const Baggage = (props: Props) => (
   <TitledMenuGroup title={<Translation passThrough="Baggage" />}>
-    <MenuGroup
-      customSeparator={<SeparatorTrimmed gapSizeStart={15} gapSizeEnd={15} />}
-    >
-      <CabinBags data={idx(props.data, _ => _.allowedBaggage)} />
-      <CheckedBaggage data={idx(props.data, _ => _.allowedBaggage)} />
-    </MenuGroup>
+    <BaggageGroupButton>
+      <MenuGroup
+        customSeparator={<SeparatorTrimmed gapSizeStart={15} gapSizeEnd={15} />}
+      >
+        <CabinBags data={idx(props.data, _ => _.allowedBaggage)} />
+        <CheckedBaggage data={idx(props.data, _ => _.allowedBaggage)} />
+      </MenuGroup>
+    </BaggageGroupButton>
   </TitledMenuGroup>
 );
 
diff --git a/app/MMB/src/scenes/passenger/baggage/BaggageGroupButton.js b/app/MMB/src/scenes/passenger/baggage/BaggageGroupButton.js
new file mode 100644
index 00000000..4d89416e
--- /dev/null
+++ b/app/MMB/src/scenes/passenger/baggage/BaggageGroupButton.js
@@ -0,0 +1,48 @@
+// @flow strict
+
+import * as React from 'react';
+import { View, Platform } from 'react-native';
+import { Touchable, StyleSheet, Icon, Color } from '@kiwicom/mobile-shared';
+import { withNavigation } from 'react-navigation';
+import { type NavigationType } from '@kiwicom/mobile-navigation';
+
+type Props = {|
+  +children: React.Node,
+  +navigation: NavigationType,
+|};
+
+class BaggageGroupButton extends React.Component<Props> {
+  goToBaggage = () => {
+    this.props.navigation.navigate({
+      routeName: 'mmb.flight_services.checked_baggage',
+      key: 'key-mmb.flight_services.checked_baggage',
+    });
+  };
+
+  render = () => (
+    <Touchable onPress={this.goToBaggage}>
+      <View style={styles.row}>
+        <View style={styles.children}>{this.props.children}</View>
+        {Platform.select({
+          android: <Icon name="mode-edit" size={20} style={styles.icon} />,
+          ios: <Icon name="chevron-right" size={26} style={styles.icon} />,
+        })}
+      </View>
+    </Touchable>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+  },
+  children: {
+    flex: 1,
+  },
+  icon: {
+    color: Color.brand,
+    alignSelf: 'center',
+  },
+});
+
+export default withNavigation(BaggageGroupButton);
diff --git a/packages/localization/src/vocabularies/ManageMyBooking.js b/packages/localization/src/vocabularies/ManageMyBooking.js
index 2adc6523..33feace8 100644
--- a/packages/localization/src/vocabularies/ManageMyBooking.js
+++ b/packages/localization/src/vocabularies/ManageMyBooking.js
@@ -129,6 +129,7 @@ export default {
   'mmb.visa_state.visa_is_required_in': 'Visa required in:',
   'mmb.visa_state.visa_may_be_required_in': 'Visa may be required in:',
   'mmb.visa_state.visa_may_be_required': 'Visa may be required',
+
   // MMB menu:
   'mmb.main_menu.title': 'Manage my bookings',
   'mmb.flight_services': 'Flight Services',
@@ -162,6 +163,12 @@ export default {
 
   'mmb.trip_services.title.ordered': 'Ordered',
 
+  // MMB Missing Information
+  'mmb.missing_information.missing_informations': 'Missing informations',
+  'mmb.missing_information.fill_in_information':
+    'Please fill in passenger info to confirm booking',
+  'mmb.missing_information.button_text': 'Fill Passenger Info',
+
   // MMB Booking Timeline
   'mmb.booking_timeline.today': 'Today',
   'mmb.booking_timeline.explore_airport.button.title': 'Explore Airport',


Test patch:
diff --git a/app/MMB/src/components/alert/__tests__/__snapshots__/Alert.test.js.snap b/app/MMB/src/components/alert/__tests__/__snapshots__/Alert.test.js.snap
index bf0d2f45..7c1eb632 100644
--- a/app/MMB/src/components/alert/__tests__/__snapshots__/Alert.test.js.snap
+++ b/app/MMB/src/components/alert/__tests__/__snapshots__/Alert.test.js.snap
@@ -29,9 +29,12 @@ exports[`Alert renders alert without children 1`] = `
     />
   }
   titleStyle={
-    Object {
-      "color": "#196e25",
-    }
+    Array [
+      Object {
+        "color": "#196e25",
+      },
+      undefined,
+    ]
   }
 />
 `;
@@ -56,9 +59,12 @@ exports[`Alert renders danger type 1`] = `
     />
   }
   titleStyle={
-    Object {
-      "color": "#d0021b",
-    }
+    Array [
+      Object {
+        "color": "#d0021b",
+      },
+      undefined,
+    ]
   }
 >
   <Translation
@@ -96,9 +102,12 @@ exports[`Alert renders success type 1`] = `
     />
   }
   titleStyle={
-    Object {
-      "color": "#196e25",
-    }
+    Array [
+      Object {
+        "color": "#196e25",
+      },
+      undefined,
+    ]
   }
 >
   <Translation
@@ -127,9 +136,12 @@ exports[`Alert renders warning type 1`] = `
     />
   }
   titleStyle={
-    Object {
-      "color": "#eb9d08",
-    }
+    Array [
+      Object {
+        "color": "#eb9d08",
+      },
+      undefined,
+    ]
   }
 >
   <Translation