Repository: kiwicom/mobile
Pull request #924 (2018-07-26 10:42:25)

Hotels: Add ancillaryPurchased logging event when hotel is paid for
closes #924 


Patch:
diff --git a/app/MMB/src/components/alert/Alert.js b/app/MMB/src/components/alert/Alert.js
index bc059c49..8763cd4a 100644
--- a/app/MMB/src/components/alert/Alert.js
+++ b/app/MMB/src/components/alert/Alert.js
@@ -25,7 +25,9 @@ export default function Alert(props: Props) {
     case 'danger':
       return (
         <RenderAlert
-          icon={<Icon name="warning" size={ICON_SIZE} color={RED} />}
+          icon={
+            <Icon name="warning" size={ICON_SIZE} color={Color.red.monza} />
+          }
           title={props.title}
           titleStyle={[styles.titleDanger, props.titleStyle]}
           containerStyle={styles.containerDanger}
@@ -36,7 +38,13 @@ export default function Alert(props: Props) {
     case 'warning':
       return (
         <RenderAlert
-          icon={<Icon name="warning" size={ICON_SIZE} color="#eb9d08" />}
+          icon={
+            <Icon
+              name="warning"
+              size={ICON_SIZE}
+              color={Color.orange.gamboge}
+            />
+          }
           title={props.title}
           titleStyle={[styles.titleWarning, props.titleStyle]}
           containerStyle={styles.containerWarning}
@@ -67,11 +75,9 @@ export default function Alert(props: Props) {
   }
 }
 
-const RED = '#d0021b';
-
 const styles = StyleSheet.create({
   containerDanger: {
-    backgroundColor: 'rgba(208, 2, 27, 0.15)',
+    backgroundColor: Color.red.transparent.monza.$15,
   },
   successIcon: {
     transform: [{ rotate: '180deg' }],
@@ -83,12 +89,12 @@ const styles = StyleSheet.create({
     color: Color.green.dark,
   },
   containerWarning: {
-    backgroundColor: 'rgba(235, 157, 8, 0.15)',
+    backgroundColor: Color.orange.transparent.gamboge.$15,
   },
   titleWarning: {
-    color: '#eb9d08',
+    color: Color.orange.gamboge,
   },
   titleDanger: {
-    color: RED,
+    color: Color.red.monza,
   },
 });
diff --git a/app/MMB/src/scenes/list/cityImage/ImageBadges.js b/app/MMB/src/scenes/list/cityImage/ImageBadges.js
index 8f95fc61..4e78ba16 100644
--- a/app/MMB/src/scenes/list/cityImage/ImageBadges.js
+++ b/app/MMB/src/scenes/list/cityImage/ImageBadges.js
@@ -35,7 +35,7 @@ export default createFragmentContainer(
 
 const styles = StyleSheet.create({
   bookingIdBadge: {
-    backgroundColor: 'rgba(48, 54, 61, 0.6)',
+    backgroundColor: Color.grey.transparent.outerSpace.$60,
   },
   badgeText: {
     fontSize: 10,
diff --git a/app/MMB/src/scenes/passenger/visa/VisaRequired.js b/app/MMB/src/scenes/passenger/visa/VisaRequired.js
index bc901562..cb53a6b9 100644
--- a/app/MMB/src/scenes/passenger/visa/VisaRequired.js
+++ b/app/MMB/src/scenes/passenger/visa/VisaRequired.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { StyleSheet, Text } from '@kiwicom/mobile-shared';
+import { StyleSheet, Text, Color } from '@kiwicom/mobile-shared';
 
 import Alert from '../../../components/alert/Alert';
 
@@ -31,7 +31,7 @@ export default function VisaRequired(props: Props) {
 const styles = StyleSheet.create({
   country: {
     fontSize: 12,
-    color: '#d0021b',
+    color: Color.red.monza,
     fontWeight: '600',
   },
 });
diff --git a/app/MMB/src/scenes/passenger/visa/VisaWarning.js b/app/MMB/src/scenes/passenger/visa/VisaWarning.js
index ce7307b3..34ced517 100644
--- a/app/MMB/src/scenes/passenger/visa/VisaWarning.js
+++ b/app/MMB/src/scenes/passenger/visa/VisaWarning.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Translation } from '@kiwicom/mobile-localization';
-import { StyleSheet, Text } from '@kiwicom/mobile-shared';
+import { StyleSheet, Text, Color } from '@kiwicom/mobile-shared';
 
 import Alert from '../../../components/alert/Alert';
 
@@ -31,7 +31,7 @@ export default function VisaWarning(props: Props) {
 const styles = StyleSheet.create({
   country: {
     fontSize: 12,
-    color: '#eb9d08',
+    color: Color.orange.gamboge,
     fontWeight: '600',
   },
 });
diff --git a/app/hotels/src/allHotels/HotelReviewScore.js b/app/hotels/src/allHotels/HotelReviewScore.js
index 92d78073..3b6ef348 100644
--- a/app/hotels/src/allHotels/HotelReviewScore.js
+++ b/app/hotels/src/allHotels/HotelReviewScore.js
@@ -52,13 +52,13 @@ export class HotelReviewScore extends React.Component<Props> {
    */
   calculateColor = (score: number): ?string => {
     if (score >= 0 === score < 3) {
-      return '#d0021b';
+      return Color.red.monza;
     }
     if (score >= 3 === score <= 7) {
       return Color.orange.normal;
     }
     if (score > 7 === score <= 10) {
-      return '#31a11e';
+      return Color.green.lapalma;
     }
   };
 
diff --git a/app/hotels/src/filter/FilterButton.js b/app/hotels/src/filter/FilterButton.js
index fcc18f3f..8719fe80 100644
--- a/app/hotels/src/filter/FilterButton.js
+++ b/app/hotels/src/filter/FilterButton.js
@@ -52,7 +52,7 @@ const styleSheet = StyleSheet.create({
     backgroundColor: Color.brand,
   },
   buttonGroup: {
-    backgroundColor: '#c4e7e4',
+    backgroundColor: Color.blue.jaggedIce,
     marginEnd: 5,
     ios: {
       height: 36,
diff --git a/app/hotels/src/gallery/PhotosStripe.js b/app/hotels/src/gallery/PhotosStripe.js
index f6f0b69e..488c185c 100644
--- a/app/hotels/src/gallery/PhotosStripe.js
+++ b/app/hotels/src/gallery/PhotosStripe.js
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { View, Platform } from 'react-native';
 import Swiper from 'react-native-swiper';
-import { StyleSheet, NetworkImage } from '@kiwicom/mobile-shared';
+import { StyleSheet, NetworkImage, Color } from '@kiwicom/mobile-shared';
 
 import PhotosStripeHeader from './PhotosStripeHeader';
 
@@ -75,7 +75,7 @@ const styles = StyleSheet.create({
   },
   slide: {
     flex: 1,
-    backgroundColor: '#000',
+    backgroundColor: Color.black,
   },
   networkImage: {
     flex: 1,
diff --git a/app/hotels/src/gallery/PhotosStripeHeader.js b/app/hotels/src/gallery/PhotosStripeHeader.js
index 7863bfd6..c3dd77d8 100644
--- a/app/hotels/src/gallery/PhotosStripeHeader.js
+++ b/app/hotels/src/gallery/PhotosStripeHeader.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { Text, StyleSheet, Touchable } from '@kiwicom/mobile-shared';
+import { Text, StyleSheet, Touchable, Color } from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 
 type Props = {|
@@ -65,7 +65,7 @@ const styles = StyleSheet.create({
       width: 1,
       height: 1,
     },
-    textShadowColor: '#000',
+    textShadowColor: Color.black,
     textShadowRadius: 2,
   },
   subTitle: {
diff --git a/app/hotels/src/map/BottomSheetHandle.js b/app/hotels/src/map/BottomSheetHandle.js
index 62e206c9..eb2ac21a 100644
--- a/app/hotels/src/map/BottomSheetHandle.js
+++ b/app/hotels/src/map/BottomSheetHandle.js
@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { StyleSheet } from '@kiwicom/mobile-shared';
+import { StyleSheet, Color } from '@kiwicom/mobile-shared';
 
 const styles = StyleSheet.create({
   handle: {
     borderBottomWidth: 2,
-    borderBottomColor: '#edeff2',
+    borderBottomColor: Color.grey.athensGrey,
     borderRadius: 130,
     alignSelf: 'center',
     width: 100,
diff --git a/app/hotels/src/map/allHotels/PriceMarker.js b/app/hotels/src/map/allHotels/PriceMarker.js
index 032d8c99..ae920d42 100644
--- a/app/hotels/src/map/allHotels/PriceMarker.js
+++ b/app/hotels/src/map/allHotels/PriceMarker.js
@@ -12,13 +12,13 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     paddingVertical: 5,
     paddingHorizontal: 8,
-    backgroundColor: '#fff',
+    backgroundColor: Color.white,
     borderRadius: 3,
     borderColor: Color.grey.$200,
     borderWidth: 1,
   },
   price: {
-    color: '#000',
+    color: Color.black,
     fontSize: 14,
     fontWeight: 'bold',
   },
@@ -34,7 +34,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
     borderColor: 'transparent',
     borderWidth: 7,
-    borderTopColor: '#fff',
+    borderTopColor: Color.white,
     alignSelf: 'center',
     marginTop: -18,
   },
@@ -45,7 +45,7 @@ const selectedStyles = StyleSheet.create({
     backgroundColor: Color.brand,
   },
   price: {
-    color: '#fff',
+    color: Color.white,
   },
   arrow: {
     borderTopColor: Color.brand,
diff --git a/app/hotels/src/singleHotel/PaymentScreen.js b/app/hotels/src/singleHotel/PaymentScreen.js
index 753e07d5..b708c4ff 100644
--- a/app/hotels/src/singleHotel/PaymentScreen.js
+++ b/app/hotels/src/singleHotel/PaymentScreen.js
@@ -2,7 +2,11 @@
 
 import * as React from 'react';
 import { Platform } from 'react-native';
-import { WebView, Logger } from '@kiwicom/mobile-shared';
+import {
+  WebView,
+  Logger,
+  type WebViewStateChangeEvent,
+} from '@kiwicom/mobile-shared';
 import { DateUtils } from '@kiwicom/mobile-localization';
 import querystring from 'querystring';
 
@@ -10,16 +14,16 @@ import { sanitizeDate } from '../GraphQLSanitizers';
 import hotelPackage from '../../package.json';
 
 export type PaymentParameters = {|
-  hotelId: number,
-  checkin: Date,
-  checkout: Date,
-  rooms: Array<{|
-    id: string,
-    count: number, // how many rooms with this ID?
+  +hotelId: number,
+  +checkin: Date,
+  +checkout: Date,
+  +rooms: Array<{|
+    +id: string,
+    +count: number, // how many rooms with this ID?
   |}>,
-  affiliateId: string,
-  language: string,
-  currency: string,
+  +affiliateId: string,
+  +language: string,
+  +currency: string,
 |};
 
 export default class PaymentScreen extends React.Component<PaymentParameters> {
@@ -27,11 +31,18 @@ export default class PaymentScreen extends React.Component<PaymentParameters> {
     Logger.ancillaryDisplayed(Logger.Type.ANCILLARY_STEP_PAYMENT);
   };
 
+  onNavigationStateChange = (event: WebViewStateChangeEvent) => {
+    if (!event.loading && event.url.includes('booking.com/confirmation')) {
+      Logger.ancillaryPurchased(Logger.Type.ANCILLARY_STEP_PAYMENT);
+    }
+  };
+
   render = () => (
     <WebView
       source={{
         uri: createURI(this.props),
       }}
+      onNavigationStateChange={this.onNavigationStateChange}
     />
   );
 }
diff --git a/app/hotels/src/singleHotel/galleryButton/GalleryButton.js b/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
index 7cb538c0..83a90770 100644
--- a/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
+++ b/app/hotels/src/singleHotel/galleryButton/GalleryButton.js
@@ -2,7 +2,12 @@
 
 import * as React from 'react';
 import { Image, View } from 'react-native';
-import { StyleSheet, Text, type StylePropType } from '@kiwicom/mobile-shared';
+import {
+  StyleSheet,
+  Text,
+  Color,
+  type StylePropType,
+} from '@kiwicom/mobile-shared';
 import idx from 'idx';
 import { Translation } from '@kiwicom/mobile-localization';
 
@@ -12,7 +17,7 @@ const styles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     borderRadius: 2,
-    backgroundColor: 'rgba(48, 54, 61, 0.6)',
+    backgroundColor: Color.grey.transparent.outerSpace.$60,
     paddingVertical: 5,
     paddingHorizontal: 8,
   },
@@ -25,7 +30,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     lineHeight: 14,
     fontWeight: '600',
-    color: '#ffffff',
+    color: Color.white,
     marginStart: 5,
   },
 });
diff --git a/app/hotels/src/singleHotel/header/Header.js b/app/hotels/src/singleHotel/header/Header.js
index d61501ba..7d4970a7 100644
--- a/app/hotels/src/singleHotel/header/Header.js
+++ b/app/hotels/src/singleHotel/header/Header.js
@@ -12,6 +12,7 @@ import {
   Device,
   BlackToAlpha as gradient,
   Dimensions,
+  Color,
 } from '@kiwicom/mobile-shared';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
 import { Translation } from '@kiwicom/mobile-localization';
@@ -60,12 +61,12 @@ const styles = StyleSheet.create({
     lineHeight: 22,
     fontWeight: '600',
     letterSpacing: -0.45,
-    color: '#ffffff',
+    color: Color.white,
   },
   rating: {
     backgroundColor: 'transparent',
     fontSize: 12,
-    color: '#ffffff',
+    color: Color.white,
   },
   tabletContainer: {
     android: {
diff --git a/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js b/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js
index 3f5d4eda..4eecb8a9 100644
--- a/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js
+++ b/app/hotels/src/singleHotel/hotelInformation/description/Facilities.js
@@ -30,7 +30,7 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
   adaptableBadge: {
-    backgroundColor: '#eceff1',
+    backgroundColor: Color.grey.porcelain,
     marginEnd: 5,
     marginBottom: 5,
   },
diff --git a/app/hotels/src/singleHotel/roomList/RoomBadges.js b/app/hotels/src/singleHotel/roomList/RoomBadges.js
index f7ddec6c..4157db86 100644
--- a/app/hotels/src/singleHotel/roomList/RoomBadges.js
+++ b/app/hotels/src/singleHotel/roomList/RoomBadges.js
@@ -2,7 +2,12 @@
 
 import * as React from 'react';
 import { createFragmentContainer, graphql } from '@kiwicom/mobile-relay';
-import { AdaptableBadge, StyleSheet, TextIcon } from '@kiwicom/mobile-shared';
+import {
+  AdaptableBadge,
+  StyleSheet,
+  TextIcon,
+  Color,
+} from '@kiwicom/mobile-shared';
 import { Translation } from '@kiwicom/mobile-localization';
 import idx from 'idx';
 
@@ -19,15 +24,15 @@ type Props = {|
 
 const styles = StyleSheet.create({
   badgeContainer: {
-    backgroundColor: 'rgba(49, 161, 30, 0.15)',
+    backgroundColor: Color.green.transparent.lapalma.$15,
     marginTop: 5,
   },
   badgeText: {
-    color: 'rgb(49, 161, 30)',
+    color: Color.green.lapalma,
     fontSize: 10,
   },
   iconStyle: {
-    color: 'rgb(49, 161, 30)',
+    color: Color.green.lapalma,
     fontSize: 10,
     ios: {
       alignSelf: 'flex-end',
diff --git a/app/hotels/src/singleHotel/roomList/RoomImage.js b/app/hotels/src/singleHotel/roomList/RoomImage.js
index 155546c1..db69aa97 100644
--- a/app/hotels/src/singleHotel/roomList/RoomImage.js
+++ b/app/hotels/src/singleHotel/roomList/RoomImage.js
@@ -2,7 +2,12 @@
 
 import * as React from 'react';
 import { View } from 'react-native';
-import { Touchable, NetworkImage, StyleSheet } from '@kiwicom/mobile-shared';
+import {
+  Touchable,
+  NetworkImage,
+  StyleSheet,
+  Color,
+} from '@kiwicom/mobile-shared';
 
 import GalleryButton from '../galleryButton/GalleryButton';
 
@@ -46,7 +51,7 @@ const styles = StyleSheet.create({
   galleryButtonContainer: {
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    backgroundColor: Color.transparent.black.$30,
     borderRadius: 0,
     paddingVertical: 4,
   },
diff --git a/app/hotels/src/singleHotel/roomPicker/RoomPicker.js b/app/hotels/src/singleHotel/roomPicker/RoomPicker.js
index a291101f..80bd4cc7 100644
--- a/app/hotels/src/singleHotel/roomPicker/RoomPicker.js
+++ b/app/hotels/src/singleHotel/roomPicker/RoomPicker.js
@@ -113,7 +113,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
   },
   container: {
-    backgroundColor: '#c4e7e4',
+    backgroundColor: Color.blue.jaggedIce,
     height: 44,
     paddingHorizontal: 10,
     paddingVertical: 14,
diff --git a/packages/navigation/index.js b/packages/navigation/index.js
index 9e45622b..75063d56 100644
--- a/packages/navigation/index.js
+++ b/packages/navigation/index.js
@@ -154,7 +154,7 @@ export const createTransparentHeaderStyle = (dim: DimensionType) => {
   return {
     headerStyle: {
       borderBottomWidth: 0,
-      backgroundColor: 'rgba(0,0,0,0)',
+      backgroundColor: 'transparent',
       elevation: 0,
       marginTop: StatusBar.currentHeight,
     },
diff --git a/packages/playground/src/Playground.js b/packages/playground/src/Playground.js
index 22568cae..fbb7735e 100644
--- a/packages/playground/src/Playground.js
+++ b/packages/playground/src/Playground.js
@@ -81,12 +81,12 @@ const styles = StyleSheet.create({
     paddingBottom: 10,
     borderTopWidth: 1,
     borderBottomWidth: 1,
-    borderColor: '#000',
-    backgroundColor: '#eee',
+    borderColor: Color.black,
+    backgroundColor: Color.grey.$200,
   },
   sectionText: {
     paddingBottom: 10,
-    color: '#888',
+    color: Color.grey.$550,
     fontSize: 10,
   },
 });
diff --git a/packages/shared/index.js b/packages/shared/index.js
index 808f58d7..b6a3ecfa 100644
--- a/packages/shared/index.js
+++ b/packages/shared/index.js
@@ -114,6 +114,7 @@ export type {
   OnDimensionsChange,
   GestureState,
   PanResponderEvent,
+  WebViewStateChangeEvent,
 } from './types/Events';
 
 export type {
diff --git a/packages/shared/src/AdaptableBadge.js b/packages/shared/src/AdaptableBadge.js
index 6e700dbb..3fcc498e 100644
--- a/packages/shared/src/AdaptableBadge.js
+++ b/packages/shared/src/AdaptableBadge.js
@@ -27,7 +27,7 @@ const style = StyleSheet.create({
     flexWrap: 'wrap',
   },
   text: {
-    color: '#fff',
+    color: Color.white,
   },
 });
 
diff --git a/packages/shared/src/BottomSheet.js b/packages/shared/src/BottomSheet.js
index dde3752f..9e6be941 100644
--- a/packages/shared/src/BottomSheet.js
+++ b/packages/shared/src/BottomSheet.js
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { LayoutAnimation } from '@kiwicom/mobile-shared';
 
+import Color from './Color';
 import StyleSheet from './PlatformStyleSheet';
 import VerticalSwipeResponder from './view/VerticalSwipeResponder';
 
@@ -18,7 +19,7 @@ type State = {|
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#fff',
+    backgroundColor: Color.white,
     overflow: 'hidden',
     android: {
       borderTopRightRadius: 3,
diff --git a/packages/shared/src/Color.js b/packages/shared/src/Color.js
index d301907e..d45d3100 100644
--- a/packages/shared/src/Color.js
+++ b/packages/shared/src/Color.js
@@ -4,6 +4,13 @@ const ColorPalette = {
   black: '#000000',
   white: '#ffffff',
 
+  transparent: {
+    black: {
+      $30: 'rgba(0, 0, 0, 0.3)',
+      $32: 'rgba(0, 0, 0, .32)',
+    },
+  },
+
   product: {
     normal: '#00a991',
     dark: '#007362',
@@ -24,39 +31,67 @@ const ColorPalette = {
     $300: '#e0e0e0',
     $400: '#bdbdbd',
     $500: '#9e9e9e',
+    $550: '#888888',
     $600: '#757575',
     $700: '#616161',
     $800: '#424242',
+    athensGrey: '#edeff2',
+    porcelain: '#eceff1',
+    geyser: '#cad2dc',
+    transparent: {
+      outerSpace: {
+        $60: 'rgba(48, 54, 61, 0.6)',
+      },
+    },
   },
 
   green: {
     normal: '#46b655',
     dark: '#196e25',
     light: '#c4f2ca',
+    lapalma: '#31a11e',
+    transparent: {
+      lapalma: {
+        $15: 'rgba(49, 161, 30, 0.15)',
+      },
+    },
   },
 
   orange: {
     normal: '#f9971e',
     dark: '#a93610',
     light: '#fcf1cd',
+    gamboge: '#eb9d08',
+    transparent: {
+      gamboge: {
+        $15: 'rgba(235, 157, 8, 0.15)',
+      },
+    },
   },
 
   blue: {
     normal: '#0176d2',
     dark: '#005aa0',
     light: '#e0f6ff',
+    jaggedIce: '#c4e7e4',
   },
 
   red: {
     normal: '#e84646',
     dark: '#650808',
     light: '#fae8e8',
+    monza: '#d0021b',
+    transparent: {
+      monza: {
+        $15: 'rgba(208, 2, 27, 0.15)',
+      },
+    },
   },
 };
 
 const tripColorCodes = [
-  '#00A991',
-  '#FBAD18',
+  '#00a991',
+  '#fbad18',
   '#d50c6a',
   '#35dc93',
   '#ef7209',
@@ -76,8 +111,8 @@ export default {
   inputBackground: '#e8edf1',
   backgroundGray: '#f4f6f8',
   disabled: '#b8c1cc',
-  disabledInput: '#FAFBFC',
-  labelDisabled: '#DFE4EA',
+  disabledInput: '#fafbfc',
+  labelDisabled: '#dfe4ea',
 
   border: '#e8edf1',
 
diff --git a/packages/shared/src/Touchable.js b/packages/shared/src/Touchable.js
index 3642dca6..2294d43c 100644
--- a/packages/shared/src/Touchable.js
+++ b/packages/shared/src/Touchable.js
@@ -10,6 +10,7 @@ import {
 } from 'react-native';
 import type { AccessibilityProps } from '@kiwicom/mobile-accessibility';
 
+import Color from './Color';
 import { type StylePropType } from '../types/Styles';
 
 type Props = {|
@@ -37,7 +38,7 @@ type Props = {|
 export default class Touchable extends React.Component<Props> {
   static defaultProps = {
     borderlessRipple: false,
-    rippleColor: 'rgba(0, 0, 0, .32)',
+    rippleColor: Color.transparent.black.$32,
     disabled: false,
   };
 
diff --git a/packages/shared/src/WebView.js b/packages/shared/src/WebView.js
index 475bf061..b8318180 100644
--- a/packages/shared/src/WebView.js
+++ b/packages/shared/src/WebView.js
@@ -5,13 +5,14 @@ import { WebView as NativeWebView } from 'react-native';
 import { Translation } from '@kiwicom/mobile-localization';
 
 import GeneralError from './errors/GeneralError';
+import type { WebViewStateChangeEvent } from '../types/Events';
 
-type Props = {
-  // not exact - may contain additional properties (extend as needed)
-  source: {|
-    uri: string,
+type Props = {|
+  +source: {|
+    +uri: string,
   |},
-};
+  onNavigationStateChange?: (event: WebViewStateChangeEvent) => void,
+|};
 
 export default class WebView extends React.Component<Props> {
   renderError = () => (
@@ -21,11 +22,18 @@ export default class WebView extends React.Component<Props> {
     />
   );
 
+  onNavigationStateChange = (event: WebViewStateChangeEvent) => {
+    if (this.props.onNavigationStateChange) {
+      this.props.onNavigationStateChange(event);
+    }
+  };
+
   render = () => (
     <NativeWebView
       bounces={false}
       startInLoadingState={false} // it feels faster because we don't have to wait until the page is fully loaded
       renderError={this.renderError}
+      onNavigationStateChange={this.onNavigationStateChange}
       {...this.props}
     />
   );
diff --git a/packages/shared/src/forms/Slider.js b/packages/shared/src/forms/Slider.js
index f93dc3e0..09d37616 100644
--- a/packages/shared/src/forms/Slider.js
+++ b/packages/shared/src/forms/Slider.js
@@ -106,10 +106,10 @@ const styles = StyleSheet.create({
     height: 30,
     width: 30,
     borderRadius: 15,
-    backgroundColor: '#fff',
+    backgroundColor: Color.white,
     borderWidth: 1,
     borderColor: Color.grey.$400,
-    shadowColor: '#000',
+    shadowColor: Color.black,
     shadowOffset: { width: 0, height: 3 },
     shadowOpacity: 0.3,
     shadowRadius: 2,
diff --git a/packages/shared/src/view/Layout.js b/packages/shared/src/view/Layout.js
index ca19062a..4ee3e587 100644
--- a/packages/shared/src/view/Layout.js
+++ b/packages/shared/src/view/Layout.js
@@ -3,6 +3,8 @@
 import * as React from 'react';
 import { StatusBar } from 'react-native';
 
+import Color from '../Color';
+
 type Props = {|
   +children: React.Node,
 |};
@@ -13,7 +15,7 @@ export default function Layout(props: Props) {
       <StatusBar
         animated={true}
         barStyle="default"
-        backgroundColor="rgba(0, 0, 0, 0.3)" // Android only
+        backgroundColor={Color.transparent.black.$30} // Android only
       />
       {props.children}
     </React.Fragment>
diff --git a/packages/shared/src/view/LayoutDoubleColumn.js b/packages/shared/src/view/LayoutDoubleColumn.js
index d04a3d2f..df6069a6 100644
--- a/packages/shared/src/view/LayoutDoubleColumn.js
+++ b/packages/shared/src/view/LayoutDoubleColumn.js
@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { View } from 'react-native';
 
+import Color from '../Color';
 import AdaptableLayout from './AdaptableLayout';
 import StyleSheet from '../PlatformStyleSheet';
 import Layout from './Layout';
@@ -92,7 +93,7 @@ const styleSheet = StyleSheet.create({
     width: 520,
     maxWidth: '50%',
     borderEndWidth: 1,
-    borderEndColor: '#cad2dc',
+    borderEndColor: Color.grey.geyser,
   },
   container: {
     flex: 1,
diff --git a/packages/shared/types/Events.js b/packages/shared/types/Events.js
index 638070a3..fd0c0de2 100644
--- a/packages/shared/types/Events.js
+++ b/packages/shared/types/Events.js
@@ -73,3 +73,8 @@ export type PanResponderEvent = {
     touches: [],
   },
 };
+
+export type WebViewStateChangeEvent = {|
+  +url: string,
+  +loading: boolean,
+|};


Test patch:
diff --git a/app/MMB/src/scenes/tickets/boardingPasses/__tests__/__snapshots__/BoardingPassMultiCity.test.js.snap b/app/MMB/src/scenes/tickets/boardingPasses/__tests__/__snapshots__/BoardingPassMultiCity.test.js.snap
index 05955045..ca7b29d5 100644
--- a/app/MMB/src/scenes/tickets/boardingPasses/__tests__/__snapshots__/BoardingPassMultiCity.test.js.snap
+++ b/app/MMB/src/scenes/tickets/boardingPasses/__tests__/__snapshots__/BoardingPassMultiCity.test.js.snap
@@ -17,7 +17,7 @@ Array [
               ],
             },
             Object {
-              "color": "#00A991",
+              "color": "#00a991",
             },
           ]
         }
@@ -40,7 +40,7 @@ Array [
               ],
             },
             Object {
-              "color": "#FBAD18",
+              "color": "#fbad18",
             },
           ]
         }
diff --git a/app/hotels/src/allHotels/__tests__/HotelReviewScore.test.js b/app/hotels/src/allHotels/__tests__/HotelReviewScore.test.js
index 007db213..15366be3 100644
--- a/app/hotels/src/allHotels/__tests__/HotelReviewScore.test.js
+++ b/app/hotels/src/allHotels/__tests__/HotelReviewScore.test.js
@@ -1,5 +1,7 @@
 // @flow
 
+import { Color } from '@kiwicom/mobile-shared';
+
 import { HotelReviewScore } from '../HotelReviewScore';
 
 let HRS;
@@ -20,9 +22,9 @@ describe('formatScore', () => {
 
 describe('calculateColor', () => {
   it('returns correct score color', () => {
-    const RED = '#d0021b';
-    const ORANGE = '#f9971e';
-    const GREEN = '#31a11e';
+    const RED = Color.red.monza;
+    const ORANGE = Color.orange.normal;
+    const GREEN = Color.green.lapalma;
 
     expect(HRS.calculateColor(-1)).toBeUndefined();
     expect(HRS.calculateColor(0)).toBe(RED);
diff --git a/app/hotels/src/gallery/__tests__/__snapshots__/PhotosStripeHeader.test.js.snap b/app/hotels/src/gallery/__tests__/__snapshots__/PhotosStripeHeader.test.js.snap
index af84e44a..26a094e5 100644
--- a/app/hotels/src/gallery/__tests__/__snapshots__/PhotosStripeHeader.test.js.snap
+++ b/app/hotels/src/gallery/__tests__/__snapshots__/PhotosStripeHeader.test.js.snap
@@ -49,7 +49,7 @@ exports[`renders header with title 1`] = `
           "color": "white",
           "fontWeight": "bold",
           "textAlign": "center",
-          "textShadowColor": "#000",
+          "textShadowColor": "#000000",
           "textShadowOffset": Object {
             "height": 1,
             "width": 1,
@@ -141,7 +141,7 @@ exports[`renders header with very long title 1`] = `
           "color": "white",
           "fontWeight": "bold",
           "textAlign": "center",
-          "textShadowColor": "#000",
+          "textShadowColor": "#000000",
           "textShadowOffset": Object {
             "height": 1,
             "width": 1,
diff --git a/app/hotels/src/singleHotel/__tests__/PaymentScreen.test.js b/app/hotels/src/singleHotel/__tests__/PaymentScreen.test.js
index c51b75a4..469ff8e0 100644
--- a/app/hotels/src/singleHotel/__tests__/PaymentScreen.test.js
+++ b/app/hotels/src/singleHotel/__tests__/PaymentScreen.test.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
+import { NativeModules } from 'react-native';
 
 import PaymentScreen, { createURI } from '../PaymentScreen';
 
@@ -70,3 +71,31 @@ it('creates correct URL', () => {
     ),
   ).toMatchSnapshot();
 });
+
+it('logs ancillaryPurchased event', () => {
+  jest.resetAllMocks();
+  // $FlowExpectedError: We don't need props for this test
+  const Component = new PaymentScreen({});
+  const loadingEvent = {
+    loading: true,
+    url: 'https://secure.booking.com/confirmation-en-gb.com',
+  };
+
+  const loadingDoneEvent = {
+    loading: false,
+    url: 'https://secure.booking.com/confirmation-en-gb.com',
+  };
+
+  const badUrlEvent = {
+    loading: false,
+    url: 'https://secure.booking.com/book.html',
+  };
+
+  Component.onNavigationStateChange(loadingDoneEvent);
+  Component.onNavigationStateChange(badUrlEvent);
+  Component.onNavigationStateChange(loadingEvent);
+
+  expect(
+    NativeModules.RNLoggingModule.ancillaryPurchased,
+  ).toHaveBeenCalledTimes(1);
+});
diff --git a/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap b/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap
index 7d8f98f9..f10c3e4f 100644
--- a/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap
+++ b/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap
@@ -6,6 +6,7 @@ exports[`creates correct URL 2`] = `"https://secure.booking.com/book.html?from_s
 
 exports[`creates correct URL 3`] = `
 <WebView
+  onNavigationStateChange={[Function]}
   source={
     Object {
       "uri": "https://secure.booking.com/book.html?from_source=hotel&hostname=hotels.kiwi.com&hotel_id=2&stage=1&checkin=1970-01-03&interval=14&children_extrabeds=&nr_rooms_7709411_91461863_1_1_0=5&rt_pos_selected=&aid=321&label=kiwi-ios-react-1.0.0&lang=cs&selected_currency=JPY",
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
index 1753b9b1..4da8eb6b 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
+++ b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/RoomBadges.test.js.snap
@@ -9,7 +9,7 @@ Array [
         style={
           Object {
             "alignSelf": "flex-end",
-            "color": "rgb(49, 161, 30)",
+            "color": "#31a11e",
             "fontSize": 10,
             "marginEnd": 5,
           }
@@ -24,7 +24,7 @@ Array [
     }
     textStyle={
       Object {
-        "color": "rgb(49, 161, 30)",
+        "color": "#31a11e",
         "fontSize": 10,
       }
     }
@@ -41,7 +41,7 @@ Array [
         style={
           Object {
             "alignSelf": "flex-end",
-            "color": "rgb(49, 161, 30)",
+            "color": "#31a11e",
             "fontSize": 10,
             "marginEnd": 5,
           }
@@ -56,7 +56,7 @@ Array [
     }
     textStyle={
       Object {
-        "color": "rgb(49, 161, 30)",
+        "color": "#31a11e",
         "fontSize": 10,
       }
     }
diff --git a/packages/shared/src/__tests__/__snapshots__/AdaptableBadge.test.js.snap b/packages/shared/src/__tests__/__snapshots__/AdaptableBadge.test.js.snap
index 68bd6501..bda0fc15 100644
--- a/packages/shared/src/__tests__/__snapshots__/AdaptableBadge.test.js.snap
+++ b/packages/shared/src/__tests__/__snapshots__/AdaptableBadge.test.js.snap
@@ -21,7 +21,7 @@ exports[`renders text 1`] = `
     style={
       Array [
         Object {
-          "color": "#fff",
+          "color": "#ffffff",
         },
         undefined,
       ]
@@ -57,7 +57,7 @@ exports[`renders text with color 1`] = `
     style={
       Array [
         Object {
-          "color": "#fff",
+          "color": "#ffffff",
         },
         undefined,
       ]
@@ -91,7 +91,7 @@ exports[`renders very long texts 1`] = `
     style={
       Array [
         Object {
-          "color": "#fff",
+          "color": "#ffffff",
         },
         undefined,
       ]
diff --git a/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap b/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
index ccd20ebd..2d907a9b 100644
--- a/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
+++ b/packages/shared/src/forms/__tests__/__snapshots__/Slider.test.js.snap
@@ -28,13 +28,13 @@ exports[`Slider renders 1`] = `
     markerOffsetY={0}
     markerStyle={
       Object {
-        "backgroundColor": "#fff",
+        "backgroundColor": "#ffffff",
         "borderColor": "#bdbdbd",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000",
+        "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -51,13 +51,13 @@ exports[`Slider renders 1`] = `
     onValuesChangeStart={[Function]}
     pressedMarkerStyle={
       Object {
-        "backgroundColor": "#fff",
+        "backgroundColor": "#ffffff",
         "borderColor": "#bdbdbd",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000",
+        "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -132,13 +132,13 @@ exports[`Slider renders correctly with all values equal 1`] = `
     markerOffsetY={0}
     markerStyle={
       Object {
-        "backgroundColor": "#fff",
+        "backgroundColor": "#ffffff",
         "borderColor": "#bdbdbd",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000",
+        "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -155,13 +155,13 @@ exports[`Slider renders correctly with all values equal 1`] = `
     onValuesChangeStart={[Function]}
     pressedMarkerStyle={
       Object {
-        "backgroundColor": "#fff",
+        "backgroundColor": "#ffffff",
         "borderColor": "#bdbdbd",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000",
+        "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -236,13 +236,13 @@ exports[`Slider renders with endValue undefined 1`] = `
     markerOffsetY={0}
     markerStyle={
       Object {
-        "backgroundColor": "#fff",
+        "backgroundColor": "#ffffff",
         "borderColor": "#bdbdbd",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000",
+        "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,
@@ -259,13 +259,13 @@ exports[`Slider renders with endValue undefined 1`] = `
     onValuesChangeStart={[Function]}
     pressedMarkerStyle={
       Object {
-        "backgroundColor": "#fff",
+        "backgroundColor": "#ffffff",
         "borderColor": "#bdbdbd",
         "borderRadius": 15,
         "borderWidth": 1,
         "height": 30,
         "margin": 3,
-        "shadowColor": "#000",
+        "shadowColor": "#000000",
         "shadowOffset": Object {
           "height": 3,
           "width": 0,