Change BookingPanel title handling

Use title and sub title provided by a parent component.
sharetribe · Dec 17, 2018 · 2b60890 · 2b60890
1 parent f721480
commit 2b60890
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 29 deletions.
diff --git a/src/components/BookingPanel/BookingPanel.example.js b/src/components/BookingPanel/BookingPanel.example.js
@@ -10,7 +10,8 @@ export const Default = {
     className: css.example,
     listing: createListing('listing_1'),
     handleBookingSubmit: values => console.log('Submit:', values),
-    title: <span>title</span>,
+    title: <span>Booking title</span>,
+    subTitle: 'Hosted by Author N',
     authorDisplayName: 'Author Name',
     onManageDisableScrolling: () => null,
   },
@@ -22,7 +23,8 @@ export const WithClosedListing = {
     className: css.example,
     listing: createListing('listing_1', { state: LISTING_STATE_CLOSED }),
     handleBookingSubmit: values => console.log('Submit:', values),
-    title: <span>title</span>,
+    title: <span>Booking title</span>,
+    subTitle: 'Hosted by Author N',
     authorDisplayName: 'Author Name',
     onManageDisableScrolling: () => null,
   },

diff --git a/src/components/BookingPanel/BookingPanel.js b/src/components/BookingPanel/BookingPanel.js
@@ -57,6 +57,7 @@ const BookingPanel = props => {
     unitType,
     handleBookingSubmit,
     title,
+    subTitle,
     authorDisplayName,
     onManageDisableScrolling,
     timeSlots,
@@ -72,6 +73,12 @@ const BookingPanel = props => {
   const { formattedPrice, priceTitle } = priceData(price, intl);
   const isBook = !!parse(location.search).book;
 
+  const subTitleText = !!subTitle
+    ? subTitle
+    : showClosedListingHelpText
+    ? intl.formatMessage({ id: 'BookingPanel.subTitleClosedListing' })
+    : null;
+
   const classes = classNames(rootClassName || css.root, className);
 
   return (
@@ -92,18 +99,8 @@ const BookingPanel = props => {
         </div>
 
         <div className={css.bookingHeading}>
-          <h2 className={css.bookingTitle}>
-            <FormattedMessage id="BookingPanel.bookingTitle" values={{ title }} />
-          </h2>
-          <div className={css.bookingHelp}>
-            <FormattedMessage
-              id={
-                showClosedListingHelpText
-                  ? 'BookingPanel.bookingHelpClosedListing'
-                  : 'BookingPanel.bookingHelp'
-              }
-            />
-          </div>
+          <h2 className={css.bookingTitle}>{title}</h2>
+          {subTitleText ? <div className={css.bookingHelp}>{subTitleText}</div> : null}
         </div>
         {!isClosed ? (
           <BookingDatesForm
@@ -149,6 +146,7 @@ BookingPanel.defaultProps = {
   rootClassName: null,
   className: null,
   isOwnListing: false,
+  subTitle: null,
   unitType: config.bookingUnitType,
   timeSlots: null,
   fetchTimeSlotsError: null,
@@ -161,7 +159,8 @@ BookingPanel.propTypes = {
   isOwnListing: bool,
   unitType: propTypes.bookingUnitType,
   handleBookingSubmit: func.isRequired,
-  title: oneOfType([object, string]),
+  title: oneOfType([object, string]).isRequired,
+  subTitle: oneOfType([object, string]),
   authorDisplayName: string.isRequired,
   onManageDisableScrolling: func.isRequired,
   timeSlots: arrayOf(propTypes.timeSlot),

diff --git a/src/containers/ListingPage/ListingPage.js b/src/containers/ListingPage/ListingPage.js
@@ -229,6 +229,11 @@ export class ListingPageComponent extends Component {
       </span>
     );
 
+    const bookingTitle = (
+      <FormattedMessage id="ListingPage.bookingTitle" values={{ title: richTitle }} />
+    );
+    const bookingSubTitle = intl.formatMessage({ id: 'ListingPage.bookingSubTitle' });
+
     const topbar = <TopbarContainer />;
 
     if (showListingError && showListingError.status === 404) {
@@ -437,7 +442,8 @@ export class ListingPageComponent extends Component {
                   isOwnListing={isOwnListing}
                   unitType={unitType}
                   handleBookingSubmit={handleBookingSubmit}
-                  title={richTitle}
+                  title={bookingTitle}
+                  subTitle={bookingSubTitle}
                   authorDisplayName={authorDisplayName}
                   onManageDisableScrolling={onManageDisableScrolling}
                   timeSlots={timeSlots}

diff --git a/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap b/src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap
@@ -305,15 +305,23 @@ exports[`ListingPage matches snapshot 1`] = `
               }
             }
             onManageDisableScrolling={[Function]}
+            subTitle="ListingPage.bookingSubTitle"
             timeSlots={null}
             title={
-              <span>
-                
-                listing1
-                 
-                title
-                
-              </span>
+              <FormattedMessage
+                id="ListingPage.bookingTitle"
+                values={
+                  Object {
+                    "title": <span>
+                      
+                      listing1
+                       
+                      title
+                      
+                  </span>,
+                  }
+                }
+              />
             }
             unitType="line-item/night"
           />

diff --git a/src/translations/en.json b/src/translations/en.json
@@ -67,13 +67,11 @@
   "BookingDatesForm.requiredDate": "Oops, make sure your date is correct!",
   "BookingDatesForm.timeSlotsError": "Loading listing availability failed. Please refresh the page.",
   "BookingDatesForm.youWontBeChargedInfo": "You won't be charged yet",
-  "BookingPanel.bookingHelp": "Start by choosing your dates.",
-  "BookingPanel.bookingHelpClosedListing": "Sorry, this listing has been closed.",
-  "BookingPanel.bookingTitle": "Book {title}",
   "BookingPanel.closedListingButtonText": "Sorry, this listing has been closed.",
   "BookingPanel.ctaButtonMessage": "Request to book",
   "BookingPanel.hostedBy": "Hosted by {name}",
   "BookingPanel.perUnit": "per night",
+  "BookingPanel.subTitleClosedListing": "Sorry, this listing has been closed.",
   "CheckoutPage.bookingTimeNotAvailableMessage": "Unfortunately, the requested time is already booked.",
   "CheckoutPage.errorlistingLinkText": "the sauna page",
   "CheckoutPage.goToLandingPage": "Go to homepage",
@@ -294,6 +292,8 @@
   "ListingCard.unsupportedPrice": "({currency})",
   "ListingCard.unsupportedPriceTitle": "Unsupported currency ({currency})",
   "ListingPage.bannedUserDisplayName": "Banned user",
+  "ListingPage.bookingSubTitle": "Start by choosing your dates.",
+  "ListingPage.bookingTitle": "Book {title}",
   "ListingPage.closedListing": "This listing has been closed and can't be booked.",
   "ListingPage.contactUser": "Contact",
   "ListingPage.descriptionTitle": "About this sauna",

diff --git a/src/translations/fr.json b/src/translations/fr.json
@@ -67,13 +67,11 @@
   "BookingDatesForm.requiredDate": "Oups, vérifiez que la date est correcte",
   "BookingDatesForm.timeSlotsError": "Le chargement des disponibilités pour cette annonce a échoué. Veuillez rafraîchir la page.",
   "BookingDatesForm.youWontBeChargedInfo": "Vous ne serez pas facturé immédiatement",
-  "BookingPanel.bookingHelp": "À quelle date souhaiteriez-vous réserver ?",
-  "BookingPanel.bookingHelpClosedListing": "Navré, cette annonce est close.",
-  "BookingPanel.bookingTitle": "Réserver {title}",
   "BookingPanel.closedListingButtonText": "Navré, cette annonce est close.",
   "BookingPanel.ctaButtonMessage": "Réserver",
   "BookingPanel.hostedBy": "Proposé par {name}",
   "BookingPanel.perUnit": "par nuit",
+  "BookingPanel.subTitleClosedListing": "Navré, cette annonce est close.",
   "CheckoutPage.bookingTimeNotAvailableMessage": "Hélas, le créneau souhaité est déjà réservé.",
   "CheckoutPage.errorlistingLinkText": "la page de l'annonce",
   "CheckoutPage.goToLandingPage": "Aller sur la page d'accueil",
@@ -294,6 +292,8 @@
   "ListingCard.unsupportedPrice": "({currency})",
   "ListingCard.unsupportedPriceTitle": "Devise non supportée ({currency})",
   "ListingPage.bannedUserDisplayName": "Utilisateur banni",
+  "ListingPage.bookingSubTitle": "À quelle date souhaiteriez-vous réserver ?",
+  "ListingPage.bookingTitle": "Réserver {title}",
   "ListingPage.closedListing": "Cette annonce est close et ne peut être réservée.",
   "ListingPage.contactUser": "Envoyer un message",
   "ListingPage.descriptionTitle": "À propos de ce sauna",