Repository: kiwicom/mobile
Pull request #937 (2018-07-30 13:10:07)

Hotels: Add label passed from native to payment screen
@ferrannp please also have a look at this, it will involve some changes to the playgrounds I assume. 


Patch:
diff --git a/app/core/src/screens/HotelsPackageWrapper.js b/app/core/src/screens/HotelsPackageWrapper.js
index fd573a05..379ab3cf 100644
--- a/app/core/src/screens/HotelsPackageWrapper.js
+++ b/app/core/src/screens/HotelsPackageWrapper.js
@@ -8,14 +8,14 @@ import { type DimensionType } from '@kiwicom/mobile-shared';
 import Config from '../../config/application';
 
 type Props = {|
-  navigation: NavigationType,
-  coordinates: null | {|
-    latitude: number,
-    longitude: number,
+  +navigation: NavigationType,
+  +coordinates: null | {|
+    +latitude: number,
+    +longitude: number,
   |},
-  checkin?: string,
-  checkout?: string,
-  dimensions: DimensionType,
+  +checkin?: string,
+  +checkout?: string,
+  +dimensions: DimensionType,
 |};
 
 export default class HotelsPackageWrapper extends React.Component<Props> {
@@ -23,7 +23,6 @@ export default class HotelsPackageWrapper extends React.Component<Props> {
 
   render = () => {
     const affiliate = String(Config.affiliate.bookingCom);
-    const coordinates = this.props.coordinates;
 
     return (
       <HotelsStandalonePackage
@@ -32,10 +31,11 @@ export default class HotelsPackageWrapper extends React.Component<Props> {
         currency="EUR" // Only EUR is now fully supported as PriceFilter can't handle anything but EUR
         onBackClicked={this.goToHomepage}
         dataSaverEnabled={false}
-        coordinates={coordinates}
+        coordinates={this.props.coordinates}
         checkin={this.props.checkin}
         checkout={this.props.checkout}
         dimensions={this.props.dimensions}
+        version="rn-development"
       />
     );
   };
diff --git a/app/core/src/screens/SingleHotelPackageWrapper.js b/app/core/src/screens/SingleHotelPackageWrapper.js
index e00f511b..a6931c46 100644
--- a/app/core/src/screens/SingleHotelPackageWrapper.js
+++ b/app/core/src/screens/SingleHotelPackageWrapper.js
@@ -9,8 +9,8 @@ import { type DimensionType } from '@kiwicom/mobile-shared';
 import Config from '../../config/application';
 
 type Props = {|
-  navigation: NavigationType,
-  dimensions: DimensionType,
+  +navigation: NavigationType,
+  +dimensions: DimensionType,
 |};
 
 export default class SingleHotelPackageWrapper extends React.Component<Props> {
@@ -30,6 +30,7 @@ export default class SingleHotelPackageWrapper extends React.Component<Props> {
         hotelId="aG90ZWw6ODAyMDQ="
         roomsConfiguration={[{ adultsCount: 1, children: [] }]}
         dimensions={this.props.dimensions}
+        version="rn-development"
       />
     );
   };
diff --git a/app/hotels/README.md b/app/hotels/README.md
index 4ca52d84..e62402ab 100644
--- a/app/hotels/README.md
+++ b/app/hotels/README.md
@@ -16,6 +16,7 @@ const render = () => <HotelsStandalonePackage
    // checkin and checkout are optional props, pass with format "YYYY-MM-DD"
   checkin="2018-12-01"
   checkout="2018-12-05"
+  version="3.7.13-9d55ad66"
 />
 ```
 
@@ -39,6 +40,7 @@ const render = () => <SingleHotelStandAlonePackage
   checkout="2018-05-05" 
   roomsConfiguration={roomsConfiguration}
   hotelId="fq34rffa3="
+  version="3.7.13-9d55ad66"
 />
 ```
 
diff --git a/app/hotels/src/HotelsContext.js b/app/hotels/src/HotelsContext.js
new file mode 100644
index 00000000..a5262433
--- /dev/null
+++ b/app/hotels/src/HotelsContext.js
@@ -0,0 +1,41 @@
+// @flow
+
+import * as React from 'react';
+
+const defaultState = {
+  version: '',
+};
+
+const { Consumer, Provider: ContextProvider } = React.createContext({
+  ...defaultState,
+});
+
+type Props = {|
+  +children: React.Node,
+  +version: string,
+|};
+
+type State = {|
+  +version: string,
+|};
+
+class Provider extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      version: props.version,
+    };
+  }
+  render = () => (
+    <ContextProvider value={this.state}>{this.props.children}</ContextProvider>
+  );
+}
+
+export default { Consumer, Provider };
+
+export function withHotelsContext(Component: React.ElementType) {
+  return function WithHotelsContext(props: Object) {
+    return <Consumer>{value => <Component {...props} {...value} />}</Consumer>;
+  };
+}
diff --git a/app/hotels/src/appRegistry/HotelsStandalonePackage.js b/app/hotels/src/appRegistry/HotelsStandalonePackage.js
index 5e38b539..886ea155 100644
--- a/app/hotels/src/appRegistry/HotelsStandalonePackage.js
+++ b/app/hotels/src/appRegistry/HotelsStandalonePackage.js
@@ -11,16 +11,17 @@ import HotelsStack from '../navigation/NavigationStack';
 import type { Coordinates } from '../CoordinatesType';
 
 type Props = {
-  bookingComAffiliate: string,
-  language: string,
-  currency: string,
-  dataSaverEnabled: boolean,
-  coordinates: Coordinates | null,
-  checkin?: string,
-  checkout?: string,
-  onNavigationStateChange: () => void,
-  onBackClicked: () => void,
-  dimensions: DimensionType,
+  +bookingComAffiliate: string,
+  +language: string,
+  +currency: string,
+  +dataSaverEnabled: boolean,
+  +coordinates: Coordinates | null,
+  +checkin?: string,
+  +checkout?: string,
+  +onNavigationStateChange: () => void,
+  +onBackClicked: () => void,
+  +dimensions: DimensionType,
+  +version: string,
 };
 
 class HotelsStandalonePackage extends React.Component<Props> {
@@ -47,6 +48,7 @@ class HotelsStandalonePackage extends React.Component<Props> {
       <RootComponent
         dimensions={this.props.dimensions}
         dataSaverEnabled={this.props.dataSaverEnabled}
+        version={this.props.version}
       >
         {this.renderInnerComponent()}
       </RootComponent>
diff --git a/app/hotels/src/appRegistry/RootComponent.js b/app/hotels/src/appRegistry/RootComponent.js
index 14298650..bfd73e63 100644
--- a/app/hotels/src/appRegistry/RootComponent.js
+++ b/app/hotels/src/appRegistry/RootComponent.js
@@ -10,11 +10,13 @@ import {
 
 import HotelsSearchContext from '../HotelsSearchContext';
 import HotelsFilterContext from '../HotelsFilterContext';
+import HotelsContext from '../HotelsContext';
 
 type Props = {|
-  dataSaverEnabled: boolean,
-  children: React.Node,
-  dimensions: DimensionType,
+  +dataSaverEnabled: boolean,
+  +children: React.Node,
+  +dimensions: DimensionType,
+  +version: string,
 |};
 
 export default class RootComponent extends React.Component<Props> {
@@ -23,9 +25,11 @@ export default class RootComponent extends React.Component<Props> {
       <HotelsSearchContext.Provider>
         <HotelsFilterContext.Provider>
           <GeolocationContext.Provider>
-            <Dimensions.Provider dimensions={this.props.dimensions}>
-              {this.props.children}
-            </Dimensions.Provider>
+            <HotelsContext.Provider version={this.props.version}>
+              <Dimensions.Provider dimensions={this.props.dimensions}>
+                {this.props.children}
+              </Dimensions.Provider>
+            </HotelsContext.Provider>
           </GeolocationContext.Provider>
         </HotelsFilterContext.Provider>
       </HotelsSearchContext.Provider>
diff --git a/app/hotels/src/appRegistry/SingleHotelStandalonePackage.js b/app/hotels/src/appRegistry/SingleHotelStandalonePackage.js
index 6fcf1831..439a3acb 100644
--- a/app/hotels/src/appRegistry/SingleHotelStandalonePackage.js
+++ b/app/hotels/src/appRegistry/SingleHotelStandalonePackage.js
@@ -11,17 +11,18 @@ import SingleHotelStack from '../navigation/singleHotel/SingleHotelStack';
 import type { RoomsConfiguration } from '../singleHotel/AvailableHotelSearchInput';
 
 type Props = {
-  dataSaverEnabled: boolean,
-  hotelId: string,
-  checkin: string,
-  checkout: string,
-  roomsConfiguration: RoomsConfiguration,
-  bookingComAffiliate: string,
-  currency: string,
-  language: string,
-  onNavigationStateChange: () => void,
-  onBackClicked: () => void,
-  dimensions: DimensionType,
+  +dataSaverEnabled: boolean,
+  +hotelId: string,
+  +checkin: string,
+  +checkout: string,
+  +roomsConfiguration: RoomsConfiguration,
+  +bookingComAffiliate: string,
+  +currency: string,
+  +language: string,
+  +onNavigationStateChange: () => void,
+  +onBackClicked: () => void,
+  +dimensions: DimensionType,
+  +version: string,
 };
 
 class SingleHotelStandAlonePackage extends React.Component<Props> {
@@ -48,6 +49,7 @@ class SingleHotelStandAlonePackage extends React.Component<Props> {
       <RootComponent
         dimensions={this.props.dimensions}
         dataSaverEnabled={this.props.dataSaverEnabled}
+        version={this.props.version}
       >
         {this.renderInnerComponent()}
       </RootComponent>
diff --git a/app/hotels/src/singleHotel/PaymentScreen.js b/app/hotels/src/singleHotel/PaymentScreen.js
index b708c4ff..420788d1 100644
--- a/app/hotels/src/singleHotel/PaymentScreen.js
+++ b/app/hotels/src/singleHotel/PaymentScreen.js
@@ -11,7 +11,7 @@ import { DateUtils } from '@kiwicom/mobile-localization';
 import querystring from 'querystring';
 
 import { sanitizeDate } from '../GraphQLSanitizers';
-import hotelPackage from '../../package.json';
+import { withHotelsContext } from '../HotelsContext';
 
 export type PaymentParameters = {|
   +hotelId: number,
@@ -24,9 +24,10 @@ export type PaymentParameters = {|
   +affiliateId: string,
   +language: string,
   +currency: string,
+  +version: string,
 |};
 
-export default class PaymentScreen extends React.Component<PaymentParameters> {
+export class PaymentScreen extends React.Component<PaymentParameters> {
   componentDidMount = () => {
     Logger.ancillaryDisplayed(Logger.Type.ANCILLARY_STEP_PAYMENT);
   };
@@ -47,6 +48,8 @@ export default class PaymentScreen extends React.Component<PaymentParameters> {
   );
 }
 
+export default withHotelsContext(PaymentScreen);
+
 export function createURI(pp: PaymentParameters): string {
   const checkinQuery = sanitizeDate(pp.checkin);
   const intervalQuery = DateUtils.diffInDays(pp.checkout, pp.checkin);
@@ -69,7 +72,7 @@ export function createURI(pp: PaymentParameters): string {
       ...roomsQuery,
       rt_pos_selected: '', // ???
       aid: pp.affiliateId,
-      label: `kiwi-${Platform.OS}-react-${hotelPackage.version}`,
+      label: `kiwi-${Platform.OS}-react-${pp.version}`,
       lang: pp.language,
       selected_currency: pp.currency,
     })


Test patch:
diff --git a/app/hotels/src/CoordinatesType.js b/app/hotels/src/CoordinatesType.js
index b5a3c861..f93e0323 100644
--- a/app/hotels/src/CoordinatesType.js
+++ b/app/hotels/src/CoordinatesType.js
@@ -1,6 +1,6 @@
 // @flow
 
 export type Coordinates = {|
-  latitude: number,
-  longitude: number,
+  +latitude: number,
+  +longitude: number,
 |};
diff --git a/app/hotels/src/singleHotel/__tests__/PaymentScreen.test.js b/app/hotels/src/singleHotel/__tests__/PaymentScreen.test.js
index 469ff8e0..1f0a3876 100644
--- a/app/hotels/src/singleHotel/__tests__/PaymentScreen.test.js
+++ b/app/hotels/src/singleHotel/__tests__/PaymentScreen.test.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import ShallowRenderer from 'react-test-renderer/shallow';
 import { NativeModules } from 'react-native';
 
-import PaymentScreen, { createURI } from '../PaymentScreen';
+import { PaymentScreen, createURI } from '../PaymentScreen';
 
 const renderer = new ShallowRenderer();
 const ONE_DAY = 8.64e7; // ms
@@ -32,6 +32,7 @@ it('creates correct URL', () => {
       affiliateId: '123',
       language: 'en',
       currency: 'EUR',
+      version: 'rn-test',
     }),
   ).toMatchSnapshot();
 
@@ -49,6 +50,7 @@ it('creates correct URL', () => {
       affiliateId: '321',
       language: 'cs',
       currency: 'JPY',
+      version: 'rn-test',
     }),
   ).toMatchSnapshot();
 
@@ -67,6 +69,7 @@ it('creates correct URL', () => {
         affiliateId="321"
         language="cs"
         currency="JPY"
+        version="rn-test"
       />,
     ),
   ).toMatchSnapshot();
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 f10c3e4f..23f001a9 100644
--- a/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap
+++ b/app/hotels/src/singleHotel/__tests__/__snapshots__/PaymentScreen.test.js.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`creates correct URL 1`] = `"https://secure.booking.com/book.html?from_source=hotel&hostname=hotels.kiwi.com&hotel_id=1&stage=1&checkin=1970-01-02&interval=2&children_extrabeds=&nr_rooms_7709411_91461863_1_1_0=1&nr_rooms_7709404_91461863_0_1_0=2&rt_pos_selected=&aid=123&label=kiwi-ios-react-1.0.0&lang=en&selected_currency=EUR"`;
+exports[`creates correct URL 1`] = `"https://secure.booking.com/book.html?from_source=hotel&hostname=hotels.kiwi.com&hotel_id=1&stage=1&checkin=1970-01-02&interval=2&children_extrabeds=&nr_rooms_7709411_91461863_1_1_0=1&nr_rooms_7709404_91461863_0_1_0=2&rt_pos_selected=&aid=123&label=kiwi-ios-react-rn-test&lang=en&selected_currency=EUR"`;
 
-exports[`creates correct URL 2`] = `"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"`;
+exports[`creates correct URL 2`] = `"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-rn-test&lang=cs&selected_currency=JPY"`;
 
 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",
+      "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-rn-test&lang=cs&selected_currency=JPY",
     }
   }
 />