Repository: kiwicom/mobile
Pull request #1336 (2018-11-15 09:33:24)

Hotels: Translate bedding info


Patch:
diff --git a/app/hotels/src/singleHotel/roomList/BeddingInfo.js b/app/hotels/src/singleHotel/roomList/BeddingInfo.js
index fbcf4f9d..5bb3f965 100644
--- a/app/hotels/src/singleHotel/roomList/BeddingInfo.js
+++ b/app/hotels/src/singleHotel/roomList/BeddingInfo.js
@@ -19,16 +19,29 @@ type Props = {
 };
 
 export class BeddingInfo extends React.Component<Props> {
-  formatBeddingInfo = (): string => {
+  formatBeddingInfo = (): $ReadOnlyArray<React.Element<typeof Translation>> => {
     const { room } = this.props;
     const beddingOptions = room?.bedding ?? [];
-    return beddingOptions
-      .map(beddingOption => {
-        const type = beddingOption?.type;
-        const amount = beddingOption?.amount;
-        return [amount, type].filter(value => value != null).join(' ');
-      })
-      .join(' or '); // TODO: Translate
+    const beddingTranslation = [];
+    beddingOptions.forEach((beddingOption, index) => {
+      const type = beddingOption?.type;
+      const amount = beddingOption?.amount;
+      if (index > 0) {
+        beddingTranslation.push(
+          <Translation
+            key={`key-${index}`}
+            id="single_hotel.bedding_info.or"
+          />,
+        );
+      }
+      beddingTranslation.push(
+        <Translation
+          key={`${type || ''}-${amount || ''}`}
+          passThrough={[amount, type].filter(value => value != null).join(' ')}
+        />,
+      );
+    });
+    return beddingTranslation;
   };
 
   render() {
@@ -39,9 +52,7 @@ export class BeddingInfo extends React.Component<Props> {
       <View>
         <View style={styles.row}>
           <TextIcon code="&#xe085;" style={styles.icon} />
-          <Text style={styles.text}>
-            <Translation passThrough={` ${this.formatBeddingInfo()}`} />
-          </Text>
+          <Text style={styles.text}>{this.formatBeddingInfo()}</Text>
         </View>
         <View style={styles.row}>
           <TextIcon code="(" style={styles.icon} />
diff --git a/packages/localization/src/vocabularies/Hotels.js b/packages/localization/src/vocabularies/Hotels.js
index d1d4c003..0b5757fb 100644
--- a/packages/localization/src/vocabularies/Hotels.js
+++ b/packages/localization/src/vocabularies/Hotels.js
@@ -98,6 +98,7 @@ export default {
   'hotels_search.all_hotels_search_list.show_list': 'Show list',
 
   'single_hotel.bedding_info.guests': '__numberOfGuests__ Guests',
+  'single_hotel.bedding_info.or': ' or ',
   'single_hotel.book_now': 'Book Now',
   'single_hotel.book_now.description':
     '__1_personCount__ Guests · __2_numberOfRooms__ Rooms',


Test patch:
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/formatBeddingInfo.test.js.snap b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/formatBeddingInfo.test.js.snap
index 53961866..8cac6b8e 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/formatBeddingInfo.test.js.snap
+++ b/app/hotels/src/singleHotel/roomList/__tests__/__snapshots__/formatBeddingInfo.test.js.snap
@@ -1,9 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`doesn't crash on empty input 1`] = `""`;
+exports[`doesn't crash on empty input 1`] = `Array []`;
 
-exports[`formats bedding information 1`] = `"1 Single Bed(s)"`;
+exports[`doesn't crash on empty input 2`] = `Array []`;
 
-exports[`pluralizes persons 1`] = `"2 Single Bed(s)"`;
+exports[`formats bedding information 1`] = `
+Array [
+  <Translation
+    passThrough="1 Single Bed(s)"
+  />,
+]
+`;
 
-exports[`provides all bedding options 1`] = `"2 Single Bed(s) or 1 Twin Bed(s)"`;
+exports[`pluralizes persons 1`] = `
+Array [
+  <Translation
+    passThrough="2 Single Bed(s)"
+  />,
+]
+`;
+
+exports[`provides all bedding options 1`] = `
+Array [
+  <Translation
+    passThrough="2 Single Bed(s)"
+  />,
+  <Translation
+    id="single_hotel.bedding_info.or"
+  />,
+  <Translation
+    passThrough="1 Twin Bed(s)"
+  />,
+]
+`;
diff --git a/app/hotels/src/singleHotel/roomList/__tests__/formatBeddingInfo.test.js b/app/hotels/src/singleHotel/roomList/__tests__/formatBeddingInfo.test.js
index d42ffe89..da76a02f 100644
--- a/app/hotels/src/singleHotel/roomList/__tests__/formatBeddingInfo.test.js
+++ b/app/hotels/src/singleHotel/roomList/__tests__/formatBeddingInfo.test.js
@@ -58,7 +58,7 @@ it('provides all bedding options', () => {
 });
 
 it("doesn't crash on empty input", () => {
-  expect(new BeddingInfo({ room: null }).formatBeddingInfo()).toEqual('');
+  expect(new BeddingInfo({ room: null }).formatBeddingInfo()).toMatchSnapshot();
   expect(
     // $FlowRelayIssue: https://github.com/facebook/relay/issues/2394
     new BeddingInfo({