Use booked seconds instead of hours

src/js/background.js

@@ -12,7 +12,7 @@ function resetBubble({ tab, apiClient, service }) {
     messenger.postMessage(tab, {
       type: "showBubble",
       payload: {
-        bookedHours: parseFloat(data.hours),
+        bookedSeconds: data.seconds,
         timedActivity: data.timed_activity,
         service,
       },

src/js/components/Bubble.js

@@ -5,14 +5,14 @@ import mocoTimerLogo from "images/moco-timer-32x32.png"
 import { parseISO } from "date-fns"
 import Timer from "./shared/Timer"
 
-const Bubble = ({ bookedHours, timedActivity }) => {
+const Bubble = ({ bookedSeconds, timedActivity }) => {
   const logo = timedActivity ? mocoTimerLogo : mocoLogo
 
   return (
     <div className="moco-bx-bubble-inner">
       <img className="moco-bx-logo" src={chrome.extension.getURL(logo)} />
-      {!timedActivity && bookedHours > 0 && (
+      {!timedActivity && bookedSeconds > 0 && (
-        <span className="moco-bx-booked-hours">{bookedHours.toFixed(2)}</span>
+        <span className="moco-bx-booked-hours">{(bookedSeconds / 3600).toFixed(2)}</span>
       )}
       {timedActivity && (
         <Timer
@@ -26,7 +26,7 @@ const Bubble = ({ bookedHours, timedActivity }) => {
 }
 
 Bubble.propTypes = {
-  bookedHours: PropTypes.number,
+  bookedSeconds: PropTypes.number,
   timedActivity: PropTypes.shape({
     timer_started_at: PropTypes.string.isRequired,
     seconds: PropTypes.number.isRequired,
@@ -34,7 +34,7 @@ Bubble.propTypes = {
 }
 
 Bubble.defaultProps = {
-  bookedHours: 0,
+  bookedSeconds: 0,
 }
 
 export default Bubble

src/js/content.js

@@ -25,7 +25,7 @@ chrome.runtime.onConnect.addListener(function(port) {
     document.removeEventListener("click", clickHandler, true)
   })
 
-  function updateBubble({ service, bookedHours, timedActivity } = {}) {
+  function updateBubble({ service, bookedSeconds, timedActivity } = {}) {
     if (!document.getElementById("moco-bx-root")) {
       const domRoot = document.createElement("div")
       domRoot.setAttribute("id", "moco-bx-root")
@@ -47,7 +47,11 @@ chrome.runtime.onConnect.addListener(function(port) {
           // eslint-disable-next-line react/display-name
           (props => (
             <animated.div className="moco-bx-bubble" style={{ ...props, ...service.position }}>
-              <Bubble key={service.url} bookedHours={bookedHours} timedActivity={timedActivity} />
+              <Bubble
+                key={service.url}
+                bookedSeconds={bookedSeconds}
+                timedActivity={timedActivity}
+              />
             </animated.div>
           ))
         }

src/js/utils/messageHandlers.js

@@ -10,7 +10,7 @@ import {
 import { get, forEach, reject, isNil } from "lodash/fp"
 import { createMatcher } from "utils/urlMatcher"
 import remoteServices from "remoteServices"
-import { queryTabs, isBrowserTab, getSettings } from "utils/browser"
+import { queryTabs, isBrowserTab, getSettings, setStorage } from "utils/browser"
 
 const matcher = createMatcher(remoteServices)
 
@@ -30,7 +30,7 @@ export function tabUpdated(tab, { messenger, settings }) {
           messenger.postMessage(tab, {
             type: "showBubble",
             payload: {
-              bookedHours: parseFloat(data.hours),
+              bookedSeconds: data.seconds,
               timedActivity: data.timed_activity,
               service,
             },
@@ -40,7 +40,7 @@ export function tabUpdated(tab, { messenger, settings }) {
           messenger.postMessage(tab, {
             type: "showBubble",
             payload: {
-              bookedHours: 0,
+              bookedSeconds: 0,
               service,
             },
           })