improved appointment formatting

Author: samuelcolvin

src/components/App.js

@@ -16,7 +16,7 @@ class App extends Component {
       enquiry_form_info: null,
     }
     this.url = props.url_generator
-    this.get_text = this.get_text.bind(this)
+    this.get_text = (...args) => this.props.config.get_text(...args)
 
     this.get_enquiry = this.get_enquiry.bind(this)
     this.set_enquiry = this.set_enquiry.bind(this)
@@ -28,18 +28,6 @@ class App extends Component {
     }
   }
 
-  get_text (name, replacements) {
-    let s = this.props.config.messages[name]
-    if (!s) {
-      console.warn(`not translation found for "${name}"`)
-      return name
-    }
-    for (let [k, v] of Object.entries(replacements || {})) {
-      s = s.replace(`{${k}}`, v)
-    }
-    return s
-  }
-
   get_enquiry () {
     if (this.state.enquiry_form_info === null) {
       async_start(this.set_enquiry)

src/components/appointments/Appointments.js

@@ -34,8 +34,8 @@ const AptDayGroup = ({appointments, props}) => {
                 <span>{apt.topic} ({apt.service_name})</span>
               </div>
               <div>
-                <span>{props.config.format_time_diff(apt.finish, apt.start, props.config)}</span>&bull;
-                <span>£{apt.price}</span>
+                <span>{props.config.format_time_diff(apt.finish, apt.start)}</span>&bull;
+                <span>{props.config.format_money(apt.price)}</span>
               </div>
             </div>
           </Link>

src/components/appointments/AptModal.js

@@ -14,7 +14,7 @@ class AptModal extends Component {
     this.check_client = this.check_client.bind(this)
     this.signout = this.signout.bind(this)
     this.book = this.book.bind(this)
-    this.get_srs = this.get_srs.bind(this)
+    this.get_students = this.get_students.bind(this)
     this.state = {
       apt: props.appointments && props.appointments.find(a => a.id === this.apt_id),
       signature: null,
@@ -74,7 +74,7 @@ class AptModal extends Component {
       const r = await this.props.root.requests.get('check-client', args, {set_app_state: false})
       this.setState({appointment_attendees: r.appointment_attendees[this.apt_id] || [], booking_allowed: true})
     } catch (e) {
-      if (e.xhr.status === 403) {
+      if (e.xhr.status === 401) {
         this.signout()
       } else {
         this.props.root.setState({error: e.msg})
@@ -122,7 +122,7 @@ class AptModal extends Component {
     window.sessionStorage.removeItem(LS_KEY)
   }
 
-  get_srs () {
+  get_students () {
     return this.state.display_data && Object.entries(this.state.display_data.srs).map(([k, name]) => {
       const sr_id = parseInt(k, 10)
       return {
@@ -155,15 +155,15 @@ class AptModal extends Component {
         {apt.topic}
       </span>
     )
-    const srs = this.get_srs()
+    const students = this.get_students()
     const spaces_available = apt.attendees_max - apt.attendees_count - this.state.extra_attendees
     const booking_allowed = this.state.booking_allowed && spaces_available > 0
     return (
       <Modal history={this.props.history} title={title} last_url={this.props.last_url} flex={false}>
         <div className="tcs-modal-flex">
           <div className="tcs-extra">
             <div className="tcs-price">
-              £{apt.price}
+              {this.props.config.format_money(apt.price)}
               <div className="tcs-label">Price</div>
             </div>
           </div>
@@ -194,10 +194,10 @@ class AptModal extends Component {
           <div className="tcs-book">
             <IfElse v={this.state.display_data}>
                 <div>
-                  {srs && (
+                  {students && (
                     <div className="tcs-book-existing">
                       <div>Add your existing Students to the lesson</div>
-                      {srs.map(({id, name, already_on_apt}) => (
+                      {students.map(({id, name, already_on_apt}) => (
                         <div key={id} className="tcs-book-item">
                           <div className="tcs-existing-name">
                             {name}

src/formatting.js

@@ -0,0 +1,52 @@
+export function get_text (name, replacements) {
+  let s = this.messages[name]
+  if (!s) {
+    console.warn(`not translation found for "${name}"`)
+    return name
+  }
+  if (replacements) {
+    for (let [k, v] of Object.entries(replacements)) {
+      s = s.replace(`{${k}}`, v)
+    }
+  }
+  return s
+}
+
+export function format_money (amount) {
+  const symbol = this.currency ? this.currency.symbol : ''
+  if (amount % 1 === 0) {
+    return symbol + amount
+  } else {
+    return symbol + amount.toFixed(2)
+  }
+}
+
+export function format_date (ts) {
+  return this.date_fns.format(new Date(ts), this.format.date)
+}
+
+export function format_datetime (ts) {
+  return this.date_fns.format(new Date(ts), this.format.datetime)
+}
+
+export function format_time_diff (ts1, ts2) {
+  const d1 = new Date(ts1)
+  const d2 = new Date(ts2)
+  let minutes = Math.round((d1 - d2) / 60000)
+  if (minutes === 60) {
+    return this.get_text('diff_1hour')
+  }
+  if (minutes < 60) {
+    return this.get_text('diff_minutes', {minutes})
+  }
+  const hours = Math.floor(minutes / 60)
+  minutes = minutes % 60
+  if (hours === 1) {
+    return this.get_text('diff_1hour_minutes', {minutes})
+  }
+  if (minutes === 0) {
+    return this.get_text('diff_hours', {hours})
+  } else {
+    return this.get_text('diff_hours_minutes', {hours, minutes})
+  }
+}

src/index.js

@@ -3,11 +3,11 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import 'babel-polyfill'
 import format from 'date-fns/format'
-import distanceInWordsStrict from 'date-fns/distance_in_words_strict'
 import './main.scss'
 import App from './components/App'
 import {BrowserRouter, HashRouter} from 'react-router-dom'
 import {auto_url_root, get_company_options} from './utils'
+import {format_date, format_datetime, format_money, format_time_diff, get_text} from './formatting'
 
 const raven_config = {
   release: process.env.REACT_APP_RELEASE,
@@ -52,6 +52,11 @@ const STRINGS = {
   distance_away: '{distance}km away',
   book_appointment_button: 'Book Lesson',
   add_to_lesson: 'Add to Lesson',
+  diff_minutes: '{minutes} minutes',
+  diff_1hour: '1 hour',
+  diff_1hour_minutes: '1 hour {minutes} minutes',
+  diff_hours: '{hours} hours',
+  diff_hours_minutes: '{hours} hours {minutes} minutes',
 }
 
 const MODES = ['grid', 'list', 'enquiry', 'enquiry-modal', 'appointments']
@@ -129,32 +134,19 @@ window.socket = async function (public_key, config) {
     datetime: 'HH:mm DD/MM/YYYY',
     date: 'DD/MM/YYYY'
   }
-  config.date_fns = {format, distanceInWordsStrict}
-  config.format_date = config.date_format || (
-    function (ts) {return this.date_fns.format(new Date(ts), this.format.date)}
-  )
-  config.format_date = config.format_date.bind(config)
-
-  config.format_datetime = config.format_datetime || (
-    function (ts) {return this.date_fns.format(new Date(ts), this.format.datetime)}
-  )
-  config.format_datetime = config.format_datetime.bind(config)
-  config.format_time_diff = config.format_time_diff || (
-    (ts1, ts2, config) => config.date_fns.distanceInWordsStrict(new Date(ts1), new Date(ts2))
-  )
+  config.date_fns = {format}
+  config.format_date = (config.date_format || format_date).bind(config)
+  config.format_datetime = (config.format_datetime || format_datetime).bind(config)
+  config.format_time_diff = (config.format_time_diff || format_time_diff).bind(config)
+  config.format_money = (config.format_money || format_money).bind(config)
 
   const el = document.querySelector(config.element)
   if (el === null) {
     config.console.error(`SOCKET: page element "${config.element}" does not exist, unable to start socket view.`)
     return
   }
-
-  config.messages = config.messages || {}
-  for (let k of Object.keys(STRINGS)) {
-    if (!config.messages[k]) {
-      config.messages[k] = STRINGS[k]
-    }
-  }
+  config.messages = Object.assign(Object.assign({}, STRINGS), config.messages || {})
+  config.get_text = (config.get_text || get_text).bind(config)
   config.random_id = Math.random().toString(36).substring(2, 10)
   config.grecaptcha_key = process.env.REACT_APP_GRECAPTCHA_KEY