Improve per unit translations

CHANGELOG.md

@@ -14,6 +14,10 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2018-XX-XX
 
+- [change] Remove generic perUnit translations and replace them with specific night, day and unit
+  translations depending on booking unit chosen in config.
+  [#970](https://github.com/sharetribe/flex-template-web/pull/970)
+
 - [fix] Formatting docs with newest Prettier - related commit was lost in #967 at some point.
   [#975](https://github.com/sharetribe/flex-template-web/pull/975)
 - [change] Improved documents related to onboarding: env.md, deploying-to-production.md,

src/components/ListingCard/ListingCard.js

@@ -3,7 +3,7 @@ import { string, func } from 'prop-types';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import { lazyLoadWithDimensions } from '../../util/contextHelpers';
-import { propTypes } from '../../util/types';
+import { LINE_ITEM_DAY, LINE_ITEM_NIGHT, propTypes } from '../../util/types';
 import { formatMoney } from '../../util/currency';
 import { ensureListing, ensureUser } from '../../util/data';
 import { richText } from '../../util/richText';
@@ -55,6 +55,16 @@ export const ListingCardComponent = props => {
 
   const { formattedPrice, priceTitle } = priceData(price, intl);
 
+  const unitType = config.bookingUnitType;
+  const isNightly = unitType === LINE_ITEM_NIGHT;
+  const isDaily = unitType === LINE_ITEM_DAY;
+
+  const unitTranslationKey = isNightly
+    ? 'ListingCard.perNight'
+    : isDaily
+    ? 'ListingCard.perDay'
+    : 'ListingCard.perUnit';
+
   return (
     <NamedLink className={classes} name="ListingPage" params={{ id, slug }}>
       <div
@@ -78,7 +88,7 @@ export const ListingCardComponent = props => {
             {formattedPrice}
           </div>
           <div className={css.perUnit}>
-            <FormattedMessage id="ListingCard.perUnit" />
+            <FormattedMessage id={unitTranslationKey} />
           </div>
         </div>
         <div className={css.mainInfo}>

src/components/ListingCard/__snapshots__/ListingCard.test.js.snap

@@ -38,7 +38,7 @@ exports[`ListingCard matches snapshot 1`] = `
       </div>
       <div>
         <FormattedMessage
-          id="ListingCard.perUnit"
+          id="ListingCard.perNight"
           values={Object {}}
         />
       </div>

src/components/ManageListingCard/ManageListingCard.js

@@ -6,6 +6,8 @@ import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import routeConfiguration from '../../routeConfiguration';
 import {
+  LINE_ITEM_NIGHT,
+  LINE_ITEM_DAY,
   LISTING_STATE_PENDING_APPROVAL,
   LISTING_STATE_CLOSED,
   LISTING_STATE_DRAFT,
@@ -152,6 +154,16 @@ export const ManageListingCardComponent = props => {
     ? LISTING_PAGE_PARAM_TYPE_DRAFT
     : LISTING_PAGE_PARAM_TYPE_EDIT;
 
+  const unitType = config.bookingUnitType;
+  const isNightly = unitType === LINE_ITEM_NIGHT;
+  const isDaily = unitType === LINE_ITEM_DAY;
+
+  const unitTranslationKey = isNightly
+    ? 'ManageListingCard.perNight'
+    : isDaily
+    ? 'ManageListingCard.perDay'
+    : 'ManageListingCard.perUnit';
+
   return (
     <div className={classes}>
       <div
@@ -289,7 +301,7 @@ export const ManageListingCardComponent = props => {
                 {formattedPrice}
               </div>
               <div className={css.perUnit}>
-                <FormattedMessage id="ManageListingCard.perUnit" />
+                <FormattedMessage id={unitTranslationKey} />
               </div>
             </React.Fragment>
           ) : (

src/components/ManageListingCard/__snapshots__/ManageListingCard.test.js.snap

@@ -101,7 +101,7 @@ exports[`ManageListingCard matches snapshot 1`] = `
       </div>
       <div>
         <FormattedMessage
-          id="ManageListingCard.perUnit"
+          id="ManageListingCard.perNight"
           values={Object {}}
         />
       </div>

src/config.js

@@ -32,9 +32,8 @@ const bookingProcessAlias = 'preauth-with-nightly-booking/release-1';
 //
 // Possible values: ['line-item/night', 'line-item/day', 'line-item/units';]
 //
-// Note: if you change this, many of the generic translations will
-// still show information about nights. Make sure to go through the
-// translations when the unit is changed.
+// Note: translations will use different translation keys for night, day or unit
+// depending on the value chosen.
 const bookingUnitType = 'line-item/night';
 
 // Should the application fetch available time slots (currently defined as

src/containers/ListingPage/SectionBooking.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { ModalInMobile, Button } from '../../components';
 import { BookingDatesForm } from '../../forms';
+import { LINE_ITEM_NIGHT, LINE_ITEM_DAY } from '../../util/types';
 
 import css from './ListingPage.css';
 
@@ -29,6 +30,15 @@ const SectionBooking = props => {
   } = props;
   const showClosedListingHelpText = listing.id && isClosed;
 
+  const isNightly = unitType === LINE_ITEM_NIGHT;
+  const isDaily = unitType === LINE_ITEM_DAY;
+
+  const unitTranslationKey = isNightly
+    ? 'ListingPage.perNight'
+    : isDaily
+    ? 'ListingPage.perDay'
+    : 'ListingPage.perUnit';
+
   return (
     <div>
       <ModalInMobile
@@ -82,7 +92,7 @@ const SectionBooking = props => {
             {formattedPrice}
           </div>
           <div className={css.perUnit}>
-            <FormattedMessage id="ListingPage.perUnit" />
+            <FormattedMessage id={unitTranslationKey} />
           </div>
         </div>
 

src/containers/ListingPage/SectionHeading.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { InlineTextButton } from '../../components';
+import { LINE_ITEM_NIGHT, LINE_ITEM_DAY } from '../../util/types';
+import config from '../../config';
 
 import css from './ListingPage.css';
 
@@ -14,14 +16,25 @@ const SectionHeading = props => {
     showContactUser,
     onContactUser,
   } = props;
+
+  const unitType = config.bookingUnitType;
+  const isNightly = unitType === LINE_ITEM_NIGHT;
+  const isDaily = unitType === LINE_ITEM_DAY;
+
+  const unitTranslationKey = isNightly
+    ? 'ListingPage.perNight'
+    : isDaily
+    ? 'ListingPage.perDay'
+    : 'ListingPage.perUnit';
+
   return (
     <div className={css.sectionHeading}>
       <div className={css.desktopPriceContainer}>
         <div className={css.desktopPriceValue} title={priceTitle}>
           {formattedPrice}
         </div>
         <div className={css.desktopPerUnit}>
-          <FormattedMessage id="ListingPage.perUnit" />
+          <FormattedMessage id={unitTranslationKey} />
         </div>
       </div>
       <div className={css.heading}>

src/forms/EditListingPricingForm/EditListingPricingForm.js

@@ -5,12 +5,11 @@ import { Form as FinalForm } from 'react-final-form';
 import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import config from '../../config';
-import { propTypes } from '../../util/types';
+import { LINE_ITEM_NIGHT, LINE_ITEM_DAY, propTypes } from '../../util/types';
 import * as validators from '../../util/validators';
 import { formatMoney } from '../../util/currency';
 import { types as sdkTypes } from '../../util/sdkLoader';
 import { Button, Form, FieldCurrencyInput } from '../../components';
-
 import css from './EditListingPricingForm.css';
 
 const { Money } = sdkTypes;
@@ -32,9 +31,20 @@ export const EditListingPricingFormComponent = props => (
         fetchErrors,
       } = fieldRenderProps;
 
+      const unitType = config.bookingUnitType;
+      const isNightly = unitType === LINE_ITEM_NIGHT;
+      const isDaily = unitType === LINE_ITEM_DAY;
+
+      const translationKey = isNightly
+        ? 'EditListingPricingForm.pricePerNight'
+        : isDaily
+        ? 'EditListingPricingForm.pricePerDay'
+        : 'EditListingPricingForm.pricePerUnit';
+
       const pricePerUnitMessage = intl.formatMessage({
-        id: 'EditListingPricingForm.pricePerUnit',
+        id: translationKey,
       });
+
       const pricePlaceholderMessage = intl.formatMessage({
         id: 'EditListingPricingForm.priceInputPlaceholder',
       });

src/forms/EditListingPricingForm/__snapshots__/EditListingPricingForm.test.js.snap

@@ -13,7 +13,7 @@ exports[`EditListingPricingForm matches snapshot 1`] = `
     <label
       htmlFor="price"
     >
-      EditListingPricingForm.pricePerUnit
+      EditListingPricingForm.pricePerNight
     </label>
     <input
       autoFocus={true}

src/translations/en.json

@@ -173,7 +173,9 @@
   "EditListingPoliciesPanel.createListingTitle": "Time to set some ground rules for the bathers.",
   "EditListingPoliciesPanel.title": "Edit the rules of {listingTitle}",
   "EditListingPricingForm.priceInputPlaceholder": "Choose your price…",
-  "EditListingPricingForm.pricePerUnit": "Price per night in euros",
+  "EditListingPricingForm.pricePerDay": "Price per day in euros",
+  "EditListingPricingForm.pricePerNight": "Price per night in euros",
+  "EditListingPricingForm.pricePerUnit": "Price per unit in euros",
   "EditListingPricingForm.priceRequired": "You need to add a valid price.",
   "EditListingPricingForm.priceTooLow": "Price should be at least {minPrice}.",
   "EditListingPricingForm.showListingFailed": "Fetching listing data failed",
@@ -279,7 +281,9 @@
   "LandingPage.schemaDescription": "Book a sauna using Saunatime or earn some income by sharing your sauna",
   "LandingPage.schemaTitle": "Book saunas everywhere | {siteTitle}",
   "ListingCard.hostedBy": "Hosted by {authorName}.",
-  "ListingCard.perUnit": "per night",
+  "ListingCard.perDay": "per day",
+  "ListingCard.perNight": "per night",
+  "ListingCard.perUnit": "per unit",
   "ListingCard.unsupportedPrice": "({currency})",
   "ListingCard.unsupportedPriceTitle": "Unsupported currency ({currency})",
   "ListingPage.bannedUserDisplayName": "Banned user",
@@ -305,7 +309,9 @@
   "ListingPage.ownListing": "This is your own listing.",
   "ListingPage.ownListingDraft": "This listing is a draft.",
   "ListingPage.ownListingPendingApproval": "This listing is pending approval.",
-  "ListingPage.perUnit": "per night",
+  "ListingPage.perDay": "per day",
+  "ListingPage.perNight": "per night",
+  "ListingPage.perUnit": "per unit",
   "ListingPage.reviewsError": "Loading reviews failed.",
   "ListingPage.reviewsHeading": "Reviews ({count})",
   "ListingPage.rulesTitle": "Sauna rules",
@@ -333,8 +339,10 @@
   "ManageListingCard.manageAvailability": "Manage availability",
   "ManageListingCard.openListing": "Open listing",
   "ManageListingCard.pendingApproval": "{listingTitle} is pending admin approval and can't be booked.",
-  "ManageListingCard.perUnit": "per night",
-  "ManageListingCard.priceNotSet": "Price per night not set",
+  "ManageListingCard.perDay": "per day",
+  "ManageListingCard.perNight": "per night",
+  "ManageListingCard.perUnit": "per unit",
+  "ManageListingCard.priceNotSet": "Price not set",
   "ManageListingCard.unsupportedPrice": "({currency})",
   "ManageListingCard.unsupportedPriceTitle": "Unsupported currency ({currency})",
   "ManageListingCard.viewListing": "View listing",

src/translations/fr.json

@@ -173,7 +173,9 @@
   "EditListingPoliciesPanel.createListingTitle": "C'est le moment de préciser quelques règles pour vos locataires.",
   "EditListingPoliciesPanel.title": "Modifier le règlement de {listingTitle}",
   "EditListingPricingForm.priceInputPlaceholder": "Définir votre prix…",
-  "EditListingPricingForm.pricePerUnit": "Prix par nuit, en Euros",
+  "EditListingPricingForm.pricePerDay": "Price per day in euros",
+  "EditListingPricingForm.pricePerNight": "Prix par nuit, en Euros",
+  "EditListingPricingForm.pricePerUnit": "Price per unit in euros",
   "EditListingPricingForm.priceRequired": "Vous devez ajouter un prix.",
   "EditListingPricingForm.priceTooLow": "Le prix doit être d'au moins {minPrice}.",
   "EditListingPricingForm.showListingFailed": "Impossible de récupérer les informations de l'annonce",
@@ -279,7 +281,9 @@
   "LandingPage.schemaDescription": "Louez un sauna avec Saunatime ou gagnez de l'argent en partageant le vôtre !",
   "LandingPage.schemaTitle": "Louez un sauna où que vous soyez | {siteTitle}",
   "ListingCard.hostedBy": "Proposé par {authorName}.",
-  "ListingCard.perUnit": "par nuit",
+  "ListingCard.perDay": "per day",
+  "ListingCard.perNight": "par nuit",
+  "ListingCard.perUnit": "per unit",
   "ListingCard.unsupportedPrice": "({currency})",
   "ListingCard.unsupportedPriceTitle": "Devise non supportée ({currency})",
   "ListingPage.bannedUserDisplayName": "Utilisateur banni",
@@ -305,7 +309,9 @@
   "ListingPage.ownListing": "Ceci est votre propre annonce.",
   "ListingPage.ownListingDraft": "Cette annonce est un brouillon.",
   "ListingPage.ownListingPendingApproval": "Cette annonce est en attente de validation.",
-  "ListingPage.perUnit": "par nuit",
+  "ListingPage.perDay": "per day",
+  "ListingPage.perNight": "par nuit",
+  "ListingPage.perUnit": "per unit",
   "ListingPage.reviewsError": "Impossible de charger les commentaires.",
   "ListingPage.reviewsHeading": "Commentaires ({count})",
   "ListingPage.rulesTitle": "Règlement",
@@ -333,8 +339,10 @@
   "ManageListingCard.manageAvailability": "Gérer la disponibilité",
   "ManageListingCard.openListing": "Réouvrir",
   "ManageListingCard.pendingApproval": "{listingTitle} est en attente de validation par les administrateurs et ne peut être réservée.",
-  "ManageListingCard.perUnit": "par nuit",
-  "ManageListingCard.priceNotSet": "Prix par nuit non configuré",
+  "ManageListingCard.perDay": "per day",
+  "ManageListingCard.perNight": "par nuit",
+  "ManageListingCard.perUnit": "per unit",
+  "ManageListingCard.priceNotSet": "Price not set",
   "ManageListingCard.unsupportedPrice": "({currency})",
   "ManageListingCard.unsupportedPriceTitle": "Devise non supportée ({currency})",
   "ManageListingCard.viewListing": "Voir l'annonce",