From 7d6fb171586feed8110bab7eea4b07fa109d0818 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Mon, 22 Nov 2021 17:30:37 +0000
Subject: [PATCH 1/5] feat: convert from using dst offsets to use timezone code
 feat: select timezones from current selected country

---
 lib/logs.js                                   | 10 +-
 lib/plugins.js                                |  5 +-
 lib/routes/customerRoutes.js                  |  8 +-
 new-lamassu-admin/package-lock.json           | 10 ++
 new-lamassu-admin/package.json                |  4 +-
 .../components/tooltips/GraphTooltip.js       |  4 +-
 .../components/wrappers/HourOfDayWrapper.js   |  3 +-
 .../Analytics/graphs/HourOfDayBarGraph.js     |  3 +-
 .../Analytics/graphs/OverTimeDotGraph.js      |  3 +-
 .../Graphs/RefScatterplot.js                  |  5 +-
 .../src/pages/Locales/Locales.js              |  4 +-
 new-lamassu-admin/src/pages/Locales/helper.js | 28 ++++--
 .../src/pages/Transactions/Transactions.js    |  2 +-
 new-lamassu-admin/src/utils/timezones.js      | 98 +++----------------
 package-lock.json                             | 12 ++-
 package.json                                  |  4 +-
 16 files changed, 86 insertions(+), 117 deletions(-)

diff --git a/lib/logs.js b/lib/logs.js
index 50e806b7..44f7c793 100644
--- a/lib/logs.js
+++ b/lib/logs.js
@@ -1,5 +1,6 @@
 const _ = require('lodash/fp')
-const moment = require('moment')
+const { format } = require('date-fns')
+const { zonedTimeToUtc, utcToZonedTime } = require('date-fns-tz')
 
 const db = require('./db')
 const pgp = require('pg-promise')()
@@ -112,10 +113,13 @@ function simpleGetMachineLogs (deviceId, from = new Date(0).toISOString(), until
 }
 
 function logDateFormat (timezone, logs, fields) {
-  const offset = timezone.split(':')[1]
 
   return _.map(log => {
-    const values = _.map(field => moment.utc(log[field]).utcOffset(parseInt(offset)).format('YYYY-MM-DDTHH:mm:ss.SSS'), fields)
+    const values = _.map(
+      field =>
+        format(utcToZonedTime(zonedTimeToUtc(log[field], process.env.TZ), timezone), 'yyyy-MM-ddTHH:mm:ss.SSS'),
+        fields
+      )
     const fieldsToOverride = _.zipObject(fields, values)
 
     return {
diff --git a/lib/plugins.js b/lib/plugins.js
index fe7bd663..bfafe327 100644
--- a/lib/plugins.js
+++ b/lib/plugins.js
@@ -230,7 +230,7 @@ function plugins (settings, deviceId) {
     const localeConfig = configManager.getLocale(deviceId, settings.config)
     const fiatCode = localeConfig.fiatCurrency
     const cryptoCodes = localeConfig.cryptoCurrencies
-    const timezone = localeConfig.timezone.split(':')
+    const timezone = localeConfig.timezone
 
     const tickerPromises = cryptoCodes.map(c => ticker.getRates(settings, fiatCode, c))
     const balancePromises = cryptoCodes.map(c => fiatBalance(fiatCode, c))
@@ -239,13 +239,12 @@ function plugins (settings, deviceId) {
     const currentConfigVersionPromise = fetchCurrentConfigVersion()
     const currentAvailablePromoCodes = loyalty.getNumberOfAvailablePromoCodes()
     const supportsBatchingPromise = cryptoCodes.map(c => wallet.supportsBatching(settings, c))
-    const timezoneObj = { utcOffset: timezone[0], dstOffset: timezone[1] }
 
     const promises = [
       buildAvailableCassettes(),
       pingPromise,
       currentConfigVersionPromise,
-      timezoneObj
+      timezone
     ].concat(
       supportsBatchingPromise,
       tickerPromises,
diff --git a/lib/routes/customerRoutes.js b/lib/routes/customerRoutes.js
index 1093a91d..272da2d8 100644
--- a/lib/routes/customerRoutes.js
+++ b/lib/routes/customerRoutes.js
@@ -18,6 +18,8 @@ const { getCustomerById } = require('../customers')
 const machineLoader = require('../machine-loader')
 const { loadLatestConfig } = require('../new-settings-loader')
 
+const { zonedTimeToUtc, utcToZonedTime } = require('date-fns-tz')
+
 function updateCustomer (req, res, next) {
   const id = req.params.id
   const machineVersion = req.query.version
@@ -129,14 +131,12 @@ function buildSms (data, receiptOptions) {
         .then(([customer, deviceConfig]) => {
           const formattedTx = _.mapKeys(_.camelCase)(tx)
           const localeConfig = configManager.getLocale(formattedTx.deviceId, config)
-          const timezone = localeConfig.timezone.split(':')
-          const dstOffset = timezone[1]
+          const timezone = localeConfig.timezone
 
           const cashInCommission = new BN(1).plus(new BN(formattedTx.commissionPercentage))
 
           const rate = new BN(formattedTx.rawTickerPrice).multipliedBy(cashInCommission).decimalPlaces(2)
-          const date = new Date()
-          date.setMinutes(date.getMinutes() + parseInt(dstOffset))
+          const date = utcToZonedTime(zonedTimeToUtc(new Date(), process.env.TZ), timezone)
           const dateString = `${date.toISOString().replace('T', ' ').slice(0, 19)}`
 
           const data = {
diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json
index cad5fe31..ebbb2730 100644
--- a/new-lamassu-admin/package-lock.json
+++ b/new-lamassu-admin/package-lock.json
@@ -10465,6 +10465,16 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.26.0.tgz",
+      "integrity": "sha512-VQI812dRi3cusdY/fhoBKvc6l2W8BPWU1FNVnFH9Nttjx4AFBRzfSVb/Eyc7jBT6e9sg1XtAGsYpBQ6c/jygbg=="
+    },
+    "date-fns-tz": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.1.6.tgz",
+      "integrity": "sha512-nyy+URfFI3KUY7udEJozcoftju+KduaqkVfwyTIE0traBiVye09QnyWKLZK7drRr5h9B7sPJITmQnS3U6YOdQg=="
+    },
     "debug": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
diff --git a/new-lamassu-admin/package.json b/new-lamassu-admin/package.json
index 6d4a0e43..b807b5c8 100644
--- a/new-lamassu-admin/package.json
+++ b/new-lamassu-admin/package.json
@@ -19,6 +19,8 @@
     "classnames": "2.2.6",
     "countries-and-timezones": "^2.4.0",
     "d3": "^6.2.0",
+    "date-fns": "^2.26.0",
+    "date-fns-tz": "^1.1.6",
     "downshift": "3.3.4",
     "file-saver": "2.0.2",
     "formik": "2.2.0",
@@ -36,8 +38,8 @@
     "react": "^16.12.0",
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.10.2",
-    "react-material-ui-carousel": "^2.2.7",
     "react-dropzone": "^11.4.2",
+    "react-material-ui-carousel": "^2.2.7",
     "react-number-format": "^4.4.1",
     "react-otp-input": "^2.3.0",
     "react-router-dom": "5.1.2",
diff --git a/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.js b/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.js
index e46bc675..a8a5d78f 100644
--- a/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.js
+++ b/new-lamassu-admin/src/pages/Analytics/components/tooltips/GraphTooltip.js
@@ -31,12 +31,12 @@ const GraphTooltip = ({
         formatDate(
           dateInterval[1],
           null,
-          period.code === 'day' ? 'MMM D, HH:mm' : 'MMM D'
+          period.code === 'day' ? 'MMM d, HH:mm' : 'MMM d'
         ),
         formatDate(
           dateInterval[0],
           null,
-          period.code === 'day' ? 'HH:mm' : 'MMM D'
+          period.code === 'day' ? 'HH:mm' : 'MMM d'
         )
       ]
     : [
diff --git a/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js b/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js
index aeadafe4..fb658e70 100644
--- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js
+++ b/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js
@@ -1,5 +1,6 @@
 import { Box } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
+import { getTimezoneOffset } from 'date-fns-tz'
 import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -47,7 +48,7 @@ const HourOfDayBarGraphHeader = ({
     cashOut: <div className={classes.cashOutIcon}></div>
   }
 
-  const offset = parseInt(timezone.split(':')[1]) * MINUTE
+  const offset = getTimezoneOffset(timezone)
 
   const txsPerWeekday = R.reduce(
     (acc, value) => {
diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js b/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js
index b50ccdb7..4aa36d9e 100644
--- a/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js
+++ b/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js
@@ -1,5 +1,6 @@
 import BigNumber from 'bignumber.js'
 import * as d3 from 'd3'
+import { getTimezoneOffset } from 'date-fns-tz'
 import moment from 'moment'
 import * as R from 'ramda'
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
@@ -38,7 +39,7 @@ const Graph = ({
     []
   )
 
-  const offset = parseInt(timezone.split(':')[1]) * MINUTE
+  const offset = getTimezoneOffset(timezone)
 
   const getTickIntervals = (domain, interval) => {
     const ticks = []
diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
index cb64506d..d4dc2fef 100644
--- a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
+++ b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
@@ -1,5 +1,6 @@
 import BigNumber from 'bignumber.js'
 import * as d3 from 'd3'
+import { getTimezoneOffset } from 'date-fns-tz'
 import moment from 'moment'
 import * as R from 'ramda'
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
@@ -40,7 +41,7 @@ const Graph = ({
     []
   )
 
-  const offset = parseInt(timezone.split(':')[1]) * MINUTE
+  const offset = getTimezoneOffset(timezone)
   const NOW = Date.now() + offset
 
   const periodDomains = {
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
index 0c974854..c0d7677e 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
+++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
@@ -1,4 +1,5 @@
 import * as d3 from 'd3'
+import { getTimezoneOffset } from 'date-fns-tz'
 import moment from 'moment'
 import React, { useEffect, useRef, useCallback } from 'react'
 
@@ -11,7 +12,7 @@ const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
     const margin = { top: 25, right: 0, bottom: 25, left: 15 }
     const width = 555 - margin.left - margin.right
     const height = 150 - margin.top - margin.bottom
-    const dstOffset = parseInt(timezone.split(':')[1])
+    const offset = getTimezoneOffset(timezone)
     // finds maximum value for the Y axis. Minimum value is 100. If value is multiple of 1000, add 100
     // (this is because the Y axis looks best with multiples of 100)
     const findMaxY = () => {
@@ -32,7 +33,7 @@ const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
         default:
           return moment
             .utc(v)
-            .add(dstOffset, 'minutes')
+            .add(offset, 'minutes')
             .format('HH:mm')
       }
     }
diff --git a/new-lamassu-admin/src/pages/Locales/Locales.js b/new-lamassu-admin/src/pages/Locales/Locales.js
index a91459e5..a209e753 100644
--- a/new-lamassu-admin/src/pages/Locales/Locales.js
+++ b/new-lamassu-admin/src/pages/Locales/Locales.js
@@ -158,6 +158,8 @@ const Locales = ({ name: SCREEN_KEY }) => {
     setValue(curr)
   }
 
+  console.log('config', config)
+
   const onEditingDefault = (it, editing) => setEditingDefault(editing)
   const onEditingOverrides = (it, editing) => setEditingOverrides(editing)
 
@@ -187,7 +189,7 @@ const Locales = ({ name: SCREEN_KEY }) => {
           save={handleSave}
           validationSchema={LocaleSchema}
           data={R.of(locale)}
-          elements={mainFields(data, onChangeCoin)}
+          elements={mainFields(data, onChangeCoin, R.of(locale))}
           setEditing={onEditingDefault}
           forceDisable={isEditingOverrides}
         />
diff --git a/new-lamassu-admin/src/pages/Locales/helper.js b/new-lamassu-admin/src/pages/Locales/helper.js
index d12c267d..9ea8e8dc 100644
--- a/new-lamassu-admin/src/pages/Locales/helper.js
+++ b/new-lamassu-admin/src/pages/Locales/helper.js
@@ -1,18 +1,19 @@
 import * as ct from 'countries-and-timezones'
+// import { useFormikContext } from 'formik'
 import * as R from 'ramda'
 import * as Yup from 'yup'
 
 import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
-import { getTzLabels } from 'src/utils/timezones'
+// import { getTzLabels } from 'src/utils/timezones'
 
-const getFields = (getData, names, onChange, auxElements = []) => {
+const getFields = (getData, names, onChange, auxElements = [], locale) => {
   return R.filter(
     it => R.includes(it.name, names),
-    allFields(getData, onChange, auxElements)
+    allFields(getData, onChange, auxElements, locale)
   )
 }
 
-const allFields = (getData, onChange, auxElements = []) => {
+const allFields = (getData, onChange, auxElements = [], locale) => {
   const getView = (data, code, compare) => it => {
     if (!data) return ''
 
@@ -33,14 +34,19 @@ const allFields = (getData, onChange, auxElements = []) => {
   const suggestionFilter = it =>
     R.differenceWith((x, y) => x.deviceId === y, it, overridenMachines)
 
+  const localeData = (locale && locale[0]) || {}
+
   const machineData = getData(['machines'])
   const countryData = getData(['countries'])
   const currencyData = getData(['currencies'])
   const languageData = getData(['languages'])
   const cryptoData = getData(['cryptoCurrencies'])
-  const timezonesData = R.values(ct.getAllTimezones())
 
-  const tzLabels = getTzLabels(timezonesData)
+  const countryTimezones = ct.getTimezonesForCountry(localeData?.country) ?? []
+  const timezonesData =
+    R.values(
+      countryTimezones.map(it => ({ label: it.name, code: it.name })) ?? []
+    ) ?? []
 
   const findSuggestion = it => {
     const machine = R.find(R.propEq('deviceId', it.machine))(machineData)
@@ -117,10 +123,10 @@ const allFields = (getData, onChange, auxElements = []) => {
       name: 'timezone',
       width: 320,
       size: 'sm',
-      view: getView(tzLabels, 'label'),
+      view: getView(timezonesData, 'label'),
       input: Autocomplete,
       inputProps: {
-        options: tzLabels,
+        options: timezonesData,
         valueProp: 'code',
         labelProp: 'label'
       }
@@ -128,13 +134,15 @@ const allFields = (getData, onChange, auxElements = []) => {
   ]
 }
 
-const mainFields = (auxData, configureCoin) => {
+const mainFields = (auxData, configureCoin, locale) => {
   const getData = R.path(R.__, auxData)
 
   return getFields(
     getData,
     ['country', 'fiatCurrency', 'languages', 'cryptoCurrencies', 'timezone'],
-    configureCoin
+    configureCoin,
+    undefined,
+    locale
   )
 }
 
diff --git a/new-lamassu-admin/src/pages/Transactions/Transactions.js b/new-lamassu-admin/src/pages/Transactions/Transactions.js
index 64cfbac4..1ea2b927 100644
--- a/new-lamassu-admin/src/pages/Transactions/Transactions.js
+++ b/new-lamassu-admin/src/pages/Transactions/Transactions.js
@@ -218,7 +218,7 @@ const Transactions = () => {
     {
       header: 'Date (UTC)',
       view: it =>
-        timezone && formatDate(it.created, timezone, 'YYYY-MM-DD HH:mm:ss'),
+        timezone && formatDate(it.created, timezone, 'yyyy-MM-dd HH:mm:ss'),
       textAlign: 'right',
       size: 'sm',
       width: 195
diff --git a/new-lamassu-admin/src/utils/timezones.js b/new-lamassu-admin/src/utils/timezones.js
index a4f36ab1..897501ab 100644
--- a/new-lamassu-admin/src/utils/timezones.js
+++ b/new-lamassu-admin/src/utils/timezones.js
@@ -1,89 +1,23 @@
-import moment from 'moment'
-import * as R from 'ramda'
+import { format } from 'date-fns'
+import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'
+// import moment from 'moment'
+// import * as R from 'ramda'
 
-const getPossibleUTCDSTPairs = timezones =>
-  R.map(
-    it => ({
-      utcOffset: it.utcOffset,
-      dstOffset: it.dstOffset,
-      utcOffsetStr: it.utcOffsetStr,
-      dstOffsetStr: it.dstOffsetStr
-    }),
-    R.uniqBy(
-      it => [it.utcOffset, it.dstOffset, it.utcOffsetStr, it.dstOffsetStr],
-      timezones
-    )
-  )
+// const buildLabel = tz => {
+//   return `(UTC${tz.utcOffsetStr}) ${R.map(it => it.city, tz.cities).join(', ')}`
+// }
 
-const getFormattedTimezones = timezones =>
-  R.sort(
-    R.ascend(R.prop('utcOffset')),
-    R.map(
-      it => ({
-        utcOffset: it.utcOffset,
-        dstOffset: it.dstOffset,
-        utcOffsetStr: it.utcOffsetStr,
-        dstOffsetStr: it.dstOffsetStr,
-        cities: R.map(
-          ite => {
-            const regionCityPair = R.split('/', ite.name)
-            return {
-              region: regionCityPair[0],
-              city: R.replace(/_/g, ' ', regionCityPair[1]),
-              country: ite.country
-            }
-          },
-          R.filter(
-            itx =>
-              R.eqProps('utcOffset', it, itx) &&
-              R.eqProps('dstOffset', it, itx) &&
-              !R.isNil(itx.country) &&
-              !R.includes('Etc', itx.name) &&
-              R.includes('/', itx.name),
-            timezones
-          )
-        )
-      }),
-      getPossibleUTCDSTPairs(timezones)
-    )
+const formatDate = (date, timezone, pattern) => {
+  const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  const newDate = utcToZonedTime(
+    zonedTimeToUtc(date, browserTimezone),
+    timezone
   )
-
-const getFinalTimezones = timezones => {
-  const formattedTimezones = getFormattedTimezones(timezones)
-  const nonEmptyTimezones = R.filter(
-    it => !R.isEmpty(it.cities),
-    formattedTimezones
-  )
-  const nonDuplicateCities = R.map(
-    it => ({
-      ...it,
-      cities: R.uniqBy(R.prop('country'), R.uniqBy(R.prop('city'), it.cities))
-    }),
-    nonEmptyTimezones
-  )
-  return nonDuplicateCities
+  return format(newDate, pattern)
 }
 
-const buildLabel = tz => {
-  return `(UTC${tz.utcOffsetStr}) ${R.map(it => it.city, tz.cities).join(', ')}`
+const formatDateNonUtc = (date, pattern) => {
+  return format(date, pattern)
 }
 
-const getTzLabels = timezones =>
-  R.map(
-    it => ({ label: buildLabel(it), code: `${it.utcOffset}:${it.dstOffset}` }),
-    getFinalTimezones(timezones)
-  )
-
-const formatDate = (date, timezoneCode, format) => {
-  const dstOffset = timezoneCode?.split(':')[1] ?? 0
-  return moment
-    .utc(date)
-    .utcOffset(parseInt(dstOffset))
-    .format(format)
-}
-
-const formatDateNonUtc = (date, format) => {
-  return moment(date).format(format)
-}
-
-export { getTzLabels, formatDate, formatDateNonUtc }
+export { formatDate, formatDateNonUtc }
diff --git a/package-lock.json b/package-lock.json
index 46f1fc5f..1cc15cf0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8464,10 +8464,14 @@
       "integrity": "sha512-YzhyDAwA4TaQIhM5go+vCLmU0UikghC/t9DTQYZR2M/UvZ1MdOhPezSDZcjj9uqQJOMqjLcpWtyW2iNINdlatQ=="
     },
     "date-fns": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.16.1.tgz",
-      "integrity": "sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ==",
-      "dev": true
+      "version": "2.26.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.26.0.tgz",
+      "integrity": "sha512-VQI812dRi3cusdY/fhoBKvc6l2W8BPWU1FNVnFH9Nttjx4AFBRzfSVb/Eyc7jBT6e9sg1XtAGsYpBQ6c/jygbg=="
+    },
+    "date-fns-tz": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.1.6.tgz",
+      "integrity": "sha512-nyy+URfFI3KUY7udEJozcoftju+KduaqkVfwyTIE0traBiVye09QnyWKLZK7drRr5h9B7sPJITmQnS3U6YOdQg=="
     },
     "date-time": {
       "version": "2.1.0",
diff --git a/package.json b/package.json
index 7792df3a..c7e9068f 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,8 @@
     "cookie-parser": "^1.4.3",
     "cors": "^2.8.5",
     "dataloader": "^2.0.0",
+    "date-fns": "^2.26.0",
+    "date-fns-tz": "^1.1.6",
     "ethereumjs-tx": "^1.3.3",
     "ethereumjs-util": "^5.2.0",
     "ethereumjs-wallet": "^0.6.3",
@@ -68,8 +70,8 @@
     "pify": "^3.0.0",
     "pretty-ms": "^2.1.0",
     "promise-sequential": "^1.1.1",
-    "request-promise": "^4.2.6",
     "queue-promise": "^2.2.1",
+    "request-promise": "^4.2.6",
     "semver": "^7.1.3",
     "serve-static": "^1.12.4",
     "socket.io": "^2.0.3",

From 973040f40976b0f1d3b32d6599ce6d618c15c828 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Tue, 23 Nov 2021 16:09:15 +0000
Subject: [PATCH 2/5] feat: remove all instances of moment usage

---
 lib/admin/server.js                           | 10 +-
 lib/customers.js                              | 14 +--
 lib/logs.js                                   |  8 +-
 new-lamassu-admin/package-lock.json           |  5 -
 new-lamassu-admin/package.json                |  1 -
 .../src/components/LogsDownloaderPopper.js    | 19 ++--
 .../components/date-range-picker/Calendar.js  | 91 ++++++++++---------
 .../date-range-picker/DateRangePicker.js      | 23 +++--
 .../src/pages/Accounting/Accounting.js        | 30 ++++--
 .../components/wrappers/HourOfDayWrapper.js   |  6 +-
 .../Analytics/graphs/HourOfDayBarGraph.js     | 12 +--
 .../Analytics/graphs/OverTimeDotGraph.js      | 11 ++-
 .../src/pages/Customers/CustomerData.js       | 17 ++--
 .../src/pages/Customers/CustomersList.js      |  5 +-
 .../pages/Customers/components/IdDataCard.js  |  9 +-
 .../Customers/components/TransactionsList.js  |  4 +-
 .../Graphs/RefScatterplot.js                  | 18 ++--
 .../SystemPerformance/SystemPerformance.js    | 31 +++----
 new-lamassu-admin/src/pages/Funding.js        | 10 +-
 .../Machines/MachineComponents/Details.js     |  2 +-
 .../Machines/MachineComponents/Overview.js    |  5 +-
 .../Transactions/Transactions.js              | 19 +++-
 .../src/pages/Maintenance/CashboxHistory.js   | 21 ++++-
 .../src/pages/Maintenance/MachineStatus.js    |  7 +-
 new-lamassu-admin/src/pages/ServerLogs.js     |  2 +-
 .../SessionManagement/SessionManagement.js    | 36 ++++++--
 .../src/pages/Transactions/DetailsCard.js     | 15 ++-
 new-lamassu-admin/src/utils/timezones.js      | 13 ++-
 package.json                                  |  1 -
 29 files changed, 252 insertions(+), 193 deletions(-)

diff --git a/lib/admin/server.js b/lib/admin/server.js
index 0aa93706..f31cf4fd 100644
--- a/lib/admin/server.js
+++ b/lib/admin/server.js
@@ -1,11 +1,11 @@
 const _ = require('lodash/fp')
-const moment = require('moment')
 
 const ticker = require('../ticker')
 const settingsLoader = require('./settings-loader')
 
 const db = require('../db')
 const machineLoader = require('../machine-loader')
+const { intervalToDuration, secondsToMilliseconds, formatDuration } = require('date-fns')
 
 const CONSIDERED_UP_SECS = 30
 
@@ -37,8 +37,8 @@ function machinesLastPing () {
 
       if (downRows.length === 1) {
         const row = downRows[0]
-        const age = moment.duration(row.age, 'seconds')
-        return `${row.name} down for ${age.humanize()}`
+        const age = intervalToDuration({ start: 0, end: secondsToMilliseconds(row.age) })
+        return `${row.name} down for ${formatDuration(age)}`
       }
 
       return 'Multiple machines down'
@@ -54,9 +54,9 @@ function status () {
 
   return Promise.all([checkWasConfigured(), db.oneOrNone(sql, ['ping']), machinesLastPing()])
     .then(([wasConfigured, statusRow, machineStatus]) => {
-      const age = statusRow && moment.duration(statusRow.age, 'seconds')
+      const age = statusRow && intervalToDuration({ start: 0, end: secondsToMilliseconds(statusRow.age) })
       const up = statusRow ? statusRow.age < CONSIDERED_UP_SECS : false
-      const lastPing = statusRow && age.humanize()
+      const lastPing = statusRow && formatDuration(age)
 
       return settingsLoader.loadLatest()
         .catch(() => null)
diff --git a/lib/customers.js b/lib/customers.js
index c7aa00e3..478f6f7c 100644
--- a/lib/customers.js
+++ b/lib/customers.js
@@ -6,7 +6,6 @@ const makeDir = require('make-dir')
 const path = require('path')
 const fs = require('fs')
 const util = require('util')
-const moment = require('moment')
 
 const db = require('./db')
 const BN = require('./bn')
@@ -24,6 +23,7 @@ const operatorDataDir = _.get('operatorDataDir', options)
 const sms = require('./sms')
 const settingsLoader = require('./new-settings-loader')
 const logger = require('./logger')
+const { sub, differenceInHours } = require('date-fns')
 
 const TX_PASSTHROUGH_ERROR_CODES = ['operatorCancel']
 
@@ -215,14 +215,14 @@ function getDailyVolumeMinusCurrentTxQueries (id, txId) {
 }
 
 function getHoursTillLimitClear (cashInDate, cashOutDate) {
-  let startDate = moment()
-  startDate = startDate.subtract(1, 'days')
+  let startDate = new Date()
+  startDate = sub(startDate, { days: 1 })
 
-  const cashInMoment = moment(cashInDate || startDate)
-  const cashOutMoment = moment(cashOutDate || startDate)
+  const cashInMoment = new Date(cashInDate || startDate)
+  const cashOutMoment = new Date(cashOutDate || startDate)
 
-  const cashInDuration = moment.duration(cashInMoment.diff(startDate)).asHours()
-  const cashOutDuration = moment.duration(cashOutMoment.diff(startDate)).asHours()
+  const cashInDuration = differenceInHours(startDate, cashInMoment)
+  const cashOutDuration = differenceInHours(startDate, cashOutMoment)
 
   return _.ceil(_.max([cashInDuration, cashOutDuration, 0]))
 }
diff --git a/lib/logs.js b/lib/logs.js
index 44f7c793..6b6ea61f 100644
--- a/lib/logs.js
+++ b/lib/logs.js
@@ -113,15 +113,17 @@ function simpleGetMachineLogs (deviceId, from = new Date(0).toISOString(), until
 }
 
 function logDateFormat (timezone, logs, fields) {
-
   return _.map(log => {
     const values = _.map(
       field =>
-        format(utcToZonedTime(zonedTimeToUtc(log[field], process.env.TZ), timezone), 'yyyy-MM-ddTHH:mm:ss.SSS'),
+        {
+          if (_.isNil(log[field])) return null
+          const date = utcToZonedTime(log[field], timezone)
+          return `${format(date, 'yyyy-MM-dd')}T${format(date, 'HH:mm:ss.SSS')}`
+        },
         fields
       )
     const fieldsToOverride = _.zipObject(fields, values)
-
     return {
       ...log,
       ...fieldsToOverride
diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json
index ebbb2730..161c8a4e 100644
--- a/new-lamassu-admin/package-lock.json
+++ b/new-lamassu-admin/package-lock.json
@@ -18326,11 +18326,6 @@
         "minimist": "^1.2.5"
       }
     },
-    "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
-    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
diff --git a/new-lamassu-admin/package.json b/new-lamassu-admin/package.json
index b807b5c8..bb59ee3d 100644
--- a/new-lamassu-admin/package.json
+++ b/new-lamassu-admin/package.json
@@ -31,7 +31,6 @@
     "lamassu-coins": "git+https://github.com/lamassu/lamassu-coins.git",
     "libphonenumber-js": "^1.7.50",
     "match-sorter": "^4.2.0",
-    "moment": "2.24.0",
     "pretty-ms": "^2.1.0",
     "qrcode.react": "0.9.3",
     "ramda": "^0.26.1",
diff --git a/new-lamassu-admin/src/components/LogsDownloaderPopper.js b/new-lamassu-admin/src/components/LogsDownloaderPopper.js
index 9d64082f..7ff6a16c 100644
--- a/new-lamassu-admin/src/components/LogsDownloaderPopper.js
+++ b/new-lamassu-admin/src/components/LogsDownloaderPopper.js
@@ -1,8 +1,8 @@
 import { useLazyQuery } from '@apollo/react-hooks'
 import { makeStyles, ClickAwayListener } from '@material-ui/core'
 import classnames from 'classnames'
+import { format, isSameDay } from 'date-fns'
 import FileSaver from 'file-saver'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState, useCallback } from 'react'
 
@@ -65,12 +65,13 @@ const DateContainer = ({ date, children, ...props }) => {
       {date && (
         <>
           <div className={classes.container}>
-            <div className={classes.bigNumber}>{date.format('D')}</div>
+            <div className={classes.bigNumber}>{format(date, 'd')}</div>
             <div className={classes.monthWeekDayContainer}>
-              <span className={classes.monthYear}>{`${date.format(
+              <span className={classes.monthYear}>{`${format(
+                date,
                 'MMM'
-              )} ${date.format('YYYY')}`}</span>
-              <span className={classes.weekDay}>{date.format('dddd')}</span>
+              )} ${format(date, 'yyyy')}`}</span>
+              <span className={classes.weekDay}>{format(date, 'EEEE')}</span>
             </div>
           </div>
         </>
@@ -186,8 +187,8 @@ const LogsDownloaderPopover = ({
     }
 
     if (!range || !range.from) return
-    if (range.from && !range.until) range.until = moment()
-    if (moment(range.from).isSame(range.until, 'day')) range.until = moment()
+    if (range.from && !range.until) range.until = new Date()
+    if (isSameDay(range.from, range.until)) range.until = new Date()
 
     if (selectedRadio === RANGE) {
       fetchLogs({
@@ -203,7 +204,7 @@ const LogsDownloaderPopover = ({
 
   const createLogsFile = (logs, range) => {
     const formatDateFile = date => {
-      return formatDate(date, timezone, 'YYYY-MM-DD_HH-mm')
+      return formatDate(date, timezone, 'yyyy-MM-dd_HH-mm')
     }
 
     const blob = new window.Blob([logs], {
@@ -277,7 +278,7 @@ const LogsDownloaderPopover = ({
                   )}
                 </div>
                 <DateRangePicker
-                  maxDate={moment()}
+                  maxDate={new Date()}
                   onRangeChange={handleRangeChange}
                 />
               </div>
diff --git a/new-lamassu-admin/src/components/date-range-picker/Calendar.js b/new-lamassu-admin/src/components/date-range-picker/Calendar.js
index f93df5dd..7e0661cb 100644
--- a/new-lamassu-admin/src/components/date-range-picker/Calendar.js
+++ b/new-lamassu-admin/src/components/date-range-picker/Calendar.js
@@ -1,5 +1,18 @@
 import { makeStyles } from '@material-ui/core/styles'
-import moment from 'moment'
+import {
+  add,
+  differenceInMonths,
+  format,
+  getDay,
+  getDaysInMonth,
+  isAfter,
+  isSameDay,
+  isSameMonth,
+  lastDayOfMonth,
+  startOfMonth,
+  startOfWeek,
+  sub
+} from 'date-fns'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
@@ -72,49 +85,36 @@ const styles = {
 const useStyles = makeStyles(styles)
 
 const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
-  const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(moment())
+  const [currentDisplayedMonth, setCurrentDisplayedMonth] = useState(new Date())
 
   const classes = useStyles()
 
-  const weekdays = moment.weekdaysMin().map(day => day.slice(0, 1))
-  const monthLength = month =>
-    Number.parseInt(
-      moment(month)
-        .endOf('month')
-        .format('D')
-    )
+  const weekdays = Array.from(Array(7)).map((_, i) =>
+    format(add(startOfWeek(new Date()), { days: i }), 'EEEEE')
+  )
+
+  const monthLength = month => getDaysInMonth(month)
 
   const monthdays = month => {
-    const lastMonth = moment(month).subtract(1, 'month')
-    const lastMonthRange = R.range(
-      0,
-      moment(month)
-        .startOf('month')
-        .weekday()
-    ).reverse()
+    const lastMonth = sub(month, { months: 1 })
+    const lastMonthRange = R.range(0, getDay(startOfMonth(month))).reverse()
     const lastMonthDays = R.map(i =>
-      moment(lastMonth)
-        .endOf('month')
-        .subtract(i, 'days')
+      sub(lastDayOfMonth(lastMonth), { days: i })
     )(lastMonthRange)
 
     const thisMonthRange = R.range(0, monthLength(month))
-    const thisMonthDays = R.map(i =>
-      moment(month)
-        .startOf('month')
-        .add(i, 'days')
-    )(thisMonthRange)
+    const thisMonthDays = R.map(i => add(startOfMonth(month), { days: i }))(
+      thisMonthRange
+    )
 
-    const nextMonth = moment(month).add(1, 'month')
+    const nextMonth = add(month, { months: 1 })
     const nextMonthRange = R.range(
       0,
       42 - lastMonthDays.length - thisMonthDays.length
     )
-    const nextMonthDays = R.map(i =>
-      moment(nextMonth)
-        .startOf('month')
-        .add(i, 'days')
-    )(nextMonthRange)
+    const nextMonthDays = R.map(i => add(startOfMonth(nextMonth), { days: i }))(
+      nextMonthRange
+    )
 
     return R.concat(R.concat(lastMonthDays, thisMonthDays), nextMonthDays)
   }
@@ -122,22 +122,24 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
   const getRow = (month, row) => monthdays(month).slice(row * 7 - 7, row * 7)
 
   const handleNavPrev = currentMonth => {
-    const prevMonth = moment(currentMonth).subtract(1, 'month')
+    const prevMonth = sub(currentMonth, { months: 1 })
     if (!minDate) setCurrentDisplayedMonth(prevMonth)
     else {
       setCurrentDisplayedMonth(
-        prevMonth.isSameOrAfter(minDate, 'month')
+        isSameMonth(prevMonth, minDate) ||
+          differenceInMonths(prevMonth, minDate) > 0
           ? prevMonth
           : currentDisplayedMonth
       )
     }
   }
   const handleNavNext = currentMonth => {
-    const nextMonth = moment(currentMonth).add(1, 'month')
+    const nextMonth = add(currentMonth, { months: 1 })
     if (!maxDate) setCurrentDisplayedMonth(nextMonth)
     else {
       setCurrentDisplayedMonth(
-        nextMonth.isSameOrBefore(maxDate, 'month')
+        isSameMonth(nextMonth, maxDate) ||
+          differenceInMonths(maxDate, nextMonth) > 0
           ? nextMonth
           : currentDisplayedMonth
       )
@@ -153,9 +155,10 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
           <Arrow />
         </button>
         <span>
-          {`${currentDisplayedMonth.format(
-            'MMMM'
-          )} ${currentDisplayedMonth.format('YYYY')}`}
+          {`${format(currentDisplayedMonth, 'MMMM')} ${format(
+            currentDisplayedMonth,
+            'yyyy'
+          )}`}
         </span>
         <button
           className={classes.button}
@@ -180,13 +183,15 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
                   onClick={() => handleSelect(day, minDate, maxDate)}>
                   <Tile
                     isDisabled={
-                      (maxDate && day.isAfter(maxDate, 'day')) ||
-                      (minDate && day.isBefore(minDate, 'day'))
+                      (maxDate && isAfter(day, maxDate)) ||
+                      (minDate && isAfter(minDate, day))
                     }
-                    isLowerBound={day.isSame(props.from, 'day')}
-                    isUpperBound={day.isSame(props.to, 'day')}
-                    isBetween={day.isBetween(props.from, props.to, 'day', [])}>
-                    {day.format('D')}
+                    isLowerBound={isSameDay(day, props.from)}
+                    isUpperBound={isSameDay(day, props.to)}
+                    isBetween={
+                      isAfter(day, props.from) && isAfter(props.to, day)
+                    }>
+                    {format(day, 'd')}
                   </Tile>
                 </td>
               ))}
diff --git a/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js b/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js
index 2a16522e..9f2e2e3d 100644
--- a/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js
+++ b/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js
@@ -1,6 +1,11 @@
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
-import moment from 'moment'
+import {
+  differenceInDays,
+  differenceInMonths,
+  isSameMonth,
+  set
+} from 'date-fns'
 import React, { useState, useEffect } from 'react'
 
 import Calendar from './Calendar'
@@ -26,19 +31,25 @@ const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
 
   const handleSelect = (day, minDate, maxDate) => {
     if (
-      (maxDate && day.isAfter(maxDate, 'day')) ||
-      (minDate && day.isBefore(minDate, 'day'))
+      (maxDate && differenceInDays(day, maxDate) > 0) ||
+      (minDate && differenceInDays(minDate, day) > 0)
     )
       return
 
-    if (from && !to && day.isBefore(from, 'day')) {
+    if (from && !to && differenceInDays(from, day) > 0) {
       setTo(from)
       setFrom(day)
       return
     }
 
-    if (from && !to && day.isSameOrAfter(from, 'day')) {
-      setTo(moment(day.toDate().setHours(23, 59, 59, 999)))
+    if (
+      from &&
+      !to &&
+      (isSameMonth(day, from) || differenceInMonths(day, from) > 0)
+    ) {
+      setTo(
+        set(day, { hours: 23, minutes: 59, seconds: 59, milliseconds: 999 })
+      )
       return
     }
 
diff --git a/new-lamassu-admin/src/pages/Accounting/Accounting.js b/new-lamassu-admin/src/pages/Accounting/Accounting.js
index 7834b50a..7f7b7f07 100644
--- a/new-lamassu-admin/src/pages/Accounting/Accounting.js
+++ b/new-lamassu-admin/src/pages/Accounting/Accounting.js
@@ -1,7 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
 
@@ -10,6 +9,7 @@ import { Tooltip } from 'src/components/Tooltip'
 import TitleSection from 'src/components/layout/TitleSection'
 import DataTable from 'src/components/tables/DataTable'
 import { H4, Info2, P } from 'src/components/typography'
+import { formatDate } from 'src/utils/timezones'
 
 import styles from './Accounting.styles'
 
@@ -49,6 +49,12 @@ const GET_OPERATOR_BY_USERNAME = gql`
   }
 `
 
+const GET_DATA = gql`
+  query getData {
+    config
+  }
+`
+
 const Assets = ({ balance, hedgingReserve, currency }) => {
   const classes = useStyles()
 
@@ -97,12 +103,20 @@ const Accounting = () => {
   const classes = useStyles()
   const { userData } = useContext(AppContext)
 
-  const { data, loading } = useQuery(GET_OPERATOR_BY_USERNAME, {
-    context: { clientName: 'pazuz' },
-    variables: { username: userData?.username }
-  })
+  const { data: opData, loading: operatorLoading } = useQuery(
+    GET_OPERATOR_BY_USERNAME,
+    {
+      context: { clientName: 'pazuz' },
+      variables: { username: userData?.username }
+    }
+  )
 
-  const operatorData = R.path(['operatorByUsername'], data)
+  const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)
+  const timezone = R.path(['config', 'locale_timezone'], configResponse)
+
+  const loading = operatorLoading && configLoading
+
+  const operatorData = R.path(['operatorByUsername'], opData)
 
   const elements = [
     {
@@ -144,14 +158,14 @@ const Accounting = () => {
       width: 150,
       size: 'sm',
       textAlign: 'right',
-      view: it => moment.utc(it.created).format('YYYY-MM-DD')
+      view: it => formatDate(it.created, timezone, 'YYYY-MM-DD')
     },
     {
       header: 'Time',
       width: 150,
       size: 'sm',
       textAlign: 'right',
-      view: it => moment.utc(it.created).format('HH:mm:ss')
+      view: it => formatDate(it.created, timezone, 'YYYY-MM-DD')
     }
   ]
 
diff --git a/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js b/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js
index fb658e70..ce2b137d 100644
--- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js
+++ b/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js
@@ -1,7 +1,7 @@
 import { Box } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
+import { format, add, startOfWeek } from 'date-fns'
 import { getTimezoneOffset } from 'date-fns-tz'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
@@ -25,7 +25,9 @@ const dayOptions = R.map(
     code: R.toLower(it),
     display: it
   }),
-  moment.weekdays()
+  Array.from(Array(7)).map((_, i) =>
+    format(add(startOfWeek(new Date()), { days: i }), 'EEEE')
+  )
 )
 
 const HourOfDayBarGraphHeader = ({
diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js b/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js
index 4aa36d9e..d1650666 100644
--- a/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js
+++ b/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import * as d3 from 'd3'
+import { add, startOfDay } from 'date-fns'
 import { getTimezoneOffset } from 'date-fns-tz'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 
@@ -14,6 +14,7 @@ import {
   subheaderColor
 } from 'src/styling/variables'
 import { MINUTE } from 'src/utils/time'
+import { toUtc } from 'src/utils/timezones'
 
 const Graph = ({
   data,
@@ -98,13 +99,8 @@ const Graph = ({
   const x = d3
     .scaleUtc()
     .domain([
-      moment()
-        .startOf('day')
-        .utc(),
-      moment()
-        .startOf('day')
-        .add(1, 'day')
-        .utc()
+      toUtc(startOfDay(new Date())),
+      toUtc(add(startOfDay(new Date()), { days: 1 }))
     ])
     .rangeRound([GRAPH_MARGIN.left, GRAPH_WIDTH - GRAPH_MARGIN.right])
 
diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
index d4dc2fef..8459d006 100644
--- a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
+++ b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import * as d3 from 'd3'
+import { add, format, startOfWeek, startOfYear } from 'date-fns'
 import { getTimezoneOffset } from 'date-fns-tz'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 
@@ -87,8 +87,13 @@ const Graph = ({
     const previousDateWeekday = previousDate.getUTCDay()
     const previousDateMonth = previousDate.getUTCMonth()
 
-    const daysOfWeek = moment.weekdaysShort()
-    const months = moment.monthsShort()
+    const daysOfWeek = Array.from(Array(7)).map((_, i) =>
+      format(add(startOfWeek(new Date()), { days: i }), 'EEE')
+    )
+
+    const months = Array.from(Array(12)).map((_, i) =>
+      format(add(startOfYear(new Date()), { months: i }), 'LLL')
+    )
 
     return {
       previous:
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js
index 7cd7d501..bc661164 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerData.js
@@ -1,7 +1,7 @@
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
+import { differenceInYears, format } from 'date-fns'
 import _ from 'lodash/fp'
-import moment from 'moment'
 import * as R from 'ramda'
 import { useState, React } from 'react'
 import * as Yup from 'yup'
@@ -23,7 +23,6 @@ import { ReactComponent as CustomerListViewIcon } from 'src/styling/icons/circle
 import { ReactComponent as OverviewReversedIcon } from 'src/styling/icons/circle buttons/overview/white.svg'
 import { ReactComponent as OverviewIcon } from 'src/styling/icons/circle buttons/overview/zodiac.svg'
 import { URI } from 'src/utils/apollo'
-import { ifNotNull } from 'src/utils/nullCheck'
 
 import styles from './CustomerData.styles.js'
 import { EditableCard } from './components'
@@ -66,6 +65,7 @@ const CustomerData = ({ customer, updateCustomer }) => {
   const rawExpirationDate = R.path(['expirationDate'])(idData)
   const country = R.path(['country'])(idData)
   const rawDob = R.path(['dateOfBirth'])(idData)
+  console.log(rawDob)
 
   const sanctions = R.path(['sanctions'])(customer)
   const sanctionsAt = R.path(['sanctionsAt'])(customer)
@@ -116,16 +116,13 @@ const CustomerData = ({ customer, updateCustomer }) => {
     {
       name: 'birthDate',
       label: 'Birth Date',
-      value: ifNotNull(rawDob, moment.utc(rawDob).format('YYYY-MM-DD')),
+      value: (rawDob && format(rawDob, 'yyyy-MM-dd')) ?? '',
       component: TextInput
     },
     {
       name: 'age',
       label: 'Age',
-      value: ifNotNull(
-        rawDob,
-        moment.utc().diff(moment.utc(rawDob).format('YYYY-MM-DD'), 'years')
-      ),
+      value: (rawDob && differenceInYears(new Date(), rawDob)) ?? '',
       component: TextInput
     },
     {
@@ -143,10 +140,8 @@ const CustomerData = ({ customer, updateCustomer }) => {
     {
       name: 'expirationDate',
       label: 'Expiration Date',
-      value: ifNotNull(
-        rawExpirationDate,
-        moment.utc(rawExpirationDate).format('YYYY-MM-DD')
-      ),
+      value:
+        (rawExpirationDate && format(rawExpirationDate, 'yyyy-MM-dd')) ?? '',
       component: TextInput
     }
   ]
diff --git a/new-lamassu-admin/src/pages/Customers/CustomersList.js b/new-lamassu-admin/src/pages/Customers/CustomersList.js
index a44b623d..df228251 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomersList.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomersList.js
@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles'
-import moment from 'moment'
+import { format } from 'date-fns'
 import * as R from 'ramda'
 import React from 'react'
 
@@ -7,7 +7,6 @@ import { MainStatus } from 'src/components/Status'
 import DataTable from 'src/components/tables/DataTable'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
-import { ifNotNull } from 'src/utils/nullCheck'
 
 import styles from './CustomersList.styles'
 import { getAuthorizedStatus, getFormattedPhone, getName } from './helper'
@@ -45,7 +44,7 @@ const CustomersList = ({ data, locale, onClick, loading }) => {
       header: 'Last active',
       width: 137,
       view: it =>
-        ifNotNull(it.lastActive, moment.utc(it.lastActive).format('YYYY-MM-D'))
+        (it.lastActive && format(new Date(it.lastActive), 'yyyy-MM-d')) ?? ''
     },
     {
       header: 'Last transaction',
diff --git a/new-lamassu-admin/src/pages/Customers/components/IdDataCard.js b/new-lamassu-admin/src/pages/Customers/components/IdDataCard.js
index 16080a1c..ef40ce60 100644
--- a/new-lamassu-admin/src/pages/Customers/components/IdDataCard.js
+++ b/new-lamassu-admin/src/pages/Customers/components/IdDataCard.js
@@ -1,5 +1,5 @@
 import { Box } from '@material-ui/core'
-import moment from 'moment'
+import { differenceInYears, format } from 'date-fns'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 
@@ -9,6 +9,7 @@ import {
   OVERRIDE_REJECTED
 } from 'src/pages/Customers/components/propertyCard'
 import { ifNotNull } from 'src/utils/nullCheck'
+import { toUtc } from 'src/utils/timezones'
 
 import { getName } from '../helper'
 
@@ -33,14 +34,14 @@ const IdDataCard = memo(({ customerData, updateCustomer }) => {
     },
     {
       header: 'Birth Date',
-      display: ifNotNull(rawDob, moment.utc(rawDob).format('YYYY-MM-DD')),
+      display: ifNotNull(rawDob, format(rawDob, 'YYYY-MM-DD')),
       size: 110
     },
     {
       header: 'Age',
       display: ifNotNull(
         rawDob,
-        moment.utc().diff(moment.utc(rawDob).format('YYYY-MM-DD'), 'years')
+        differenceInYears(toUtc(new Date()), toUtc(rawDob))
       ),
       size: 50
     },
@@ -58,7 +59,7 @@ const IdDataCard = memo(({ customerData, updateCustomer }) => {
       header: 'Expiration Date',
       display: ifNotNull(
         rawExpirationDate,
-        moment.utc(rawExpirationDate).format('YYYY-MM-DD')
+        format(rawExpirationDate, 'YYYY-MM-DD')
       )
     }
   ]
diff --git a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js b/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js
index 12c1a978..5b150b51 100644
--- a/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js
+++ b/new-lamassu-admin/src/pages/Customers/components/TransactionsList.js
@@ -52,7 +52,7 @@ const TransactionsList = ({ customer, data, loading, locale }) => {
         !R.isNil(timezone) &&
         ifNotNull(
           customer.lastActive,
-          formatDate(customer.lastActive, timezone, 'YYYY-MM-D')
+          formatDate(customer.lastActive, timezone, 'yyyy-MM-d')
         )
     },
     {
@@ -122,7 +122,7 @@ const TransactionsList = ({ customer, data, loading, locale }) => {
     {
       header: 'Date',
       width: 100,
-      view: it => formatDate(it.created, timezone, 'YYYY-MM-D')
+      view: it => formatDate(it.created, timezone, 'yyyy-MM-d')
     },
     {
       header: 'Time (h:m:s)',
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
index c0d7677e..d45ca188 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
+++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
@@ -1,9 +1,9 @@
 import * as d3 from 'd3'
-import { getTimezoneOffset } from 'date-fns-tz'
-import moment from 'moment'
+import { add } from 'date-fns'
 import React, { useEffect, useRef, useCallback } from 'react'
 
 import { backgroundColor, java, neon } from 'src/styling/variables'
+import { formatDate, toUtc } from 'src/utils/timezones'
 
 const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
   const svgRef = useRef()
@@ -12,7 +12,6 @@ const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
     const margin = { top: 25, right: 0, bottom: 25, left: 15 }
     const width = 555 - margin.left - margin.right
     const height = 150 - margin.top - margin.bottom
-    const offset = getTimezoneOffset(timezone)
     // finds maximum value for the Y axis. Minimum value is 100. If value is multiple of 1000, add 100
     // (this is because the Y axis looks best with multiples of 100)
     const findMaxY = () => {
@@ -31,10 +30,7 @@ const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
         case 'Month':
           return d3.timeFormat('%b %d')(v)
         default:
-          return moment
-            .utc(v)
-            .add(offset, 'minutes')
-            .format('HH:mm')
+          return formatDate(v, timezone, 'HH:mm')
       }
     }
 
@@ -96,16 +92,14 @@ const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
     const x = d3
       .scaleTime()
       .domain([
-        moment()
-          .add(-xAxisSettings.subtractDays, 'day')
-          .valueOf(),
-        moment().valueOf()
+        add(new Date(), { days: -xAxisSettings.subtractDays }).valueOf(),
+        new Date().valueOf()
       ])
       .range(xAxisSettings.timeRange)
       .nice(xAxisSettings.nice)
 
     const timeValue = s => {
-      const date = moment.utc(s)
+      const date = toUtc(s)
       return x(date.valueOf())
     }
 
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
index 63891039..dd583a50 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
+++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
@@ -3,8 +3,8 @@ import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
+import { isAfter, sub } from 'date-fns'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
@@ -13,6 +13,7 @@ import { ReactComponent as PercentDownIcon } from 'src/styling/icons/dashboard/d
 import { ReactComponent as PercentNeutralIcon } from 'src/styling/icons/dashboard/equal.svg'
 import { ReactComponent as PercentUpIcon } from 'src/styling/icons/dashboard/up.svg'
 import { fromNamespace } from 'src/utils/config'
+import { toTimezone } from 'src/utils/timezones'
 
 import PercentageChart from './Graphs/PercentageChart'
 import LineChart from './Graphs/RefLineChart'
@@ -28,22 +29,22 @@ const useStyles = makeStyles(styles)
 const mapToFee = R.map(R.prop('cashInFee'))
 
 const getDateSecondsAgo = (seconds = 0, startDate = null) => {
-  const date = startDate ? moment(startDate) : moment()
-  return date.subtract(seconds, 'second')
+  const date = startDate ? new Date(startDate) : new Date()
+  return sub(date, { seconds: seconds })
 }
 
 const ranges = {
   Day: {
-    left: getDateSecondsAgo(2 * 24 * 3600, moment()),
-    right: getDateSecondsAgo(24 * 3600, moment())
+    left: getDateSecondsAgo(2 * 24 * 3600, new Date()),
+    right: getDateSecondsAgo(24 * 3600, new Date())
   },
   Week: {
-    left: getDateSecondsAgo(14 * 24 * 3600, moment()),
-    right: getDateSecondsAgo(7 * 24 * 3600, moment())
+    left: getDateSecondsAgo(14 * 24 * 3600, new Date()),
+    right: getDateSecondsAgo(7 * 24 * 3600, new Date())
   },
   Month: {
-    left: getDateSecondsAgo(60 * 24 * 3600, moment()),
-    right: getDateSecondsAgo(30 * 24 * 3600, moment())
+    left: getDateSecondsAgo(60 * 24 * 3600, new Date()),
+    right: getDateSecondsAgo(30 * 24 * 3600, new Date())
   }
 }
 
@@ -83,18 +84,14 @@ const SystemPerformance = () => {
     if (!getLastTimePeriod) {
       return (
         t.error === null &&
-        moment
-          .utc(t.created)
-          .utcOffset(timezone)
-          .isBetween(ranges[selectedRange].right, moment())
+        isAfter(toTimezone(t.created, timezone), ranges[selectedRange].right) &&
+        isAfter(new Date(), toTimezone(t.created, timezone))
       )
     }
     return (
       t.error === null &&
-      moment
-        .utc(t.created)
-        .utcOffset(timezone)
-        .isBetween(ranges[selectedRange].left, ranges[selectedRange].right)
+      isAfter(toTimezone(t.created, timezone), ranges[selectedRange].left) &&
+      isAfter(ranges[selectedRange].right, toTimezone(t.created, timezone))
     )
   }
 
diff --git a/new-lamassu-admin/src/pages/Funding.js b/new-lamassu-admin/src/pages/Funding.js
index 56740033..9a7bafd7 100644
--- a/new-lamassu-admin/src/pages/Funding.js
+++ b/new-lamassu-admin/src/pages/Funding.js
@@ -2,9 +2,9 @@ import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
+import { format } from 'date-fns'
 import gql from 'graphql-tag'
 import { utils as coinUtils } from 'lamassu-coins'
-import moment from 'moment'
 import QRCode from 'qrcode.react'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -275,12 +275,8 @@ const Funding = () => {
                     <Td width={sizes.big}>
                       {it.fiatValue} {selected.fiatCode}
                     </Td>
-                    <Td width={sizes.date}>
-                      {moment(it.date).format('YYYY-MM-DD')}
-                    </Td>
-                    <Td width={sizes.time}>
-                      {moment(it.date).format('hh:mm:ss')}
-                    </Td>
+                    <Td width={sizes.date}>{format(it.date, 'YYYY-MM-DD')}</Td>
+                    <Td width={sizes.time}>{format(it.date, 'hh:mm:ss')}</Td>
                     <Td width={sizes.big}>add</Td>
                   </Tr>
                 ))}
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js
index e0a86091..e3b5811e 100644
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Details.js
@@ -15,7 +15,7 @@ const Details = ({ data, timezone }) => {
         <Label3 className={classes.label3}>Paired at</Label3>
         <P>
           {data.pairedAt
-            ? formatDate(data.pairedAt, timezone, 'YYYY-MM-DD HH:mm:ss')
+            ? formatDate(data.pairedAt, timezone, 'yyyy-MM-dd HH:mm:ss')
             : ''}
         </P>
       </div>
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js
index be7ce9e2..d8c2f607 100644
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
-import moment from 'moment'
+import { differenceInSeconds } from 'date-fns'
 import React from 'react'
 
 import { Status } from 'src/components/Status'
@@ -13,8 +13,7 @@ const useStyles = makeStyles(styles)
 
 const makeLastPing = lastPing => {
   if (!lastPing) return null
-  const now = moment()
-  const secondsAgo = now.diff(lastPing, 'seconds')
+  const secondsAgo = differenceInSeconds(new Date(), lastPing)
   if (secondsAgo < 60) {
     return `${secondsAgo} ${secondsAgo === 1 ? 'second' : 'seconds'} ago`
   }
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js
index 7d9301b4..dedd15e0 100644
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js
@@ -1,9 +1,8 @@
-import { useLazyQuery } from '@apollo/react-hooks'
+import { useQuery, useLazyQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import gql from 'graphql-tag'
 import { utils as coinUtils } from 'lamassu-coins'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useEffect, useState } from 'react'
 
@@ -12,6 +11,7 @@ import { mainStyles } from 'src/pages/Transactions/Transactions.styles'
 import { getStatus } from 'src/pages/Transactions/helper'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
+import { formatDate } from 'src/utils/timezones'
 
 import DataTable from './DataTable'
 const useStyles = makeStyles(mainStyles)
@@ -57,13 +57,19 @@ const GET_TRANSACTIONS = gql`
   }
 `
 
+const GET_DATA = gql`
+  query getData {
+    config
+  }
+`
+
 const Transactions = ({ id }) => {
   const classes = useStyles()
 
   const [extraHeight, setExtraHeight] = useState(0)
   const [clickedId, setClickedId] = useState('')
 
-  const [getTx, { data: txResponse, loading }] = useLazyQuery(
+  const [getTx, { data: txResponse, loading: txLoading }] = useLazyQuery(
     GET_TRANSACTIONS,
     {
       variables: {
@@ -73,6 +79,11 @@ const Transactions = ({ id }) => {
     }
   )
 
+  const { data: configData, loading: configLoading } = useQuery(GET_DATA)
+  const timezone = R.path(['config', 'locale_timezone'], configData)
+
+  const loading = txLoading && configLoading
+
   if (!loading && txResponse) {
     txResponse.transactions = txResponse.transactions.splice(0, 5)
   }
@@ -135,7 +146,7 @@ const Transactions = ({ id }) => {
     },
     {
       header: 'Date (UTC)',
-      view: it => moment.utc(it.created).format('YYYY-MM-DD'),
+      view: it => formatDate(it.created, timezone, 'yyyy-MM-dd'),
       textAlign: 'left',
       size: 'sm',
       width: 140
diff --git a/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js b/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js
index b3e71917..be484692 100644
--- a/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js
+++ b/new-lamassu-admin/src/pages/Maintenance/CashboxHistory.js
@@ -1,7 +1,6 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 import * as Yup from 'yup'
@@ -13,6 +12,7 @@ import DataTable from 'src/components/tables/DataTable'
 import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
+import { formatDate } from 'src/utils/timezones'
 
 const GET_BATCHES = gql`
   query cashboxBatches {
@@ -41,6 +41,12 @@ const EDIT_BATCH = gql`
   }
 `
 
+const GET_DATA = gql`
+  query getData {
+    config
+  }
+`
+
 const styles = {
   operationType: {
     marginLeft: 8
@@ -68,13 +74,18 @@ const CashboxHistory = ({ machines, currency }) => {
   const [error, setError] = useState(false)
   const [fields, setFields] = useState([])
 
-  const { data, loading } = useQuery(GET_BATCHES)
+  const { data: batchesData, loading: batchesLoading } = useQuery(GET_BATCHES)
 
   const [editBatch] = useMutation(EDIT_BATCH, {
     refetchQueries: () => ['cashboxBatches']
   })
 
-  const batches = R.path(['cashboxBatches'])(data)
+  const { data: configData, loading: configLoading } = useQuery(GET_DATA)
+  const timezone = R.path(['config', 'locale_timezone'], configData)
+
+  const loading = batchesLoading && configLoading
+
+  const batches = R.path(['cashboxBatches'])(batchesData)
 
   const getOperationRender = R.reduce(
     (ret, i) =>
@@ -176,14 +187,14 @@ const CashboxHistory = ({ machines, currency }) => {
       header: 'Date',
       width: 135,
       textAlign: 'right',
-      view: it => moment.utc(it.created).format('YYYY-MM-DD')
+      view: it => formatDate(it.created, timezone, 'YYYY-MM-DD')
     },
     {
       name: 'time',
       header: 'Time (h:m)',
       width: 125,
       textAlign: 'right',
-      view: it => moment.utc(it.created).format('HH:mm')
+      view: it => formatDate(it.created, timezone, 'HH:mm')
     },
     {
       name: 'performedBy',
diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js
index 62cfbba8..1aee31be 100644
--- a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js
+++ b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js
@@ -1,7 +1,7 @@
 import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
+import { formatDistanceToNow } from 'date-fns'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
@@ -89,7 +89,10 @@ const MachineStatus = () => {
       width: 200,
       size: 'sm',
       textAlign: 'left',
-      view: m => (m.lastPing ? moment(m.lastPing).fromNow() : 'unknown')
+      view: m =>
+        m.lastPing
+          ? formatDistanceToNow(new Date(m.lastPing), { addSuffix: true })
+          : 'unknown'
     },
     {
       header: 'Software Version',
diff --git a/new-lamassu-admin/src/pages/ServerLogs.js b/new-lamassu-admin/src/pages/ServerLogs.js
index 73869344..45ec53f1 100644
--- a/new-lamassu-admin/src/pages/ServerLogs.js
+++ b/new-lamassu-admin/src/pages/ServerLogs.js
@@ -197,7 +197,7 @@ const Logs = () => {
                           formatDate(
                             log.timestamp,
                             timezone,
-                            'YYYY-MM-DD HH:mm'
+                            'yyyy-MM-dd HH:mm'
                           )}
                       </TableCell>
                       <TableCell>{log.logLevel}</TableCell>
diff --git a/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js b/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js
index d12d00bc..9ce5ab12 100644
--- a/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js
+++ b/new-lamassu-admin/src/pages/SessionManagement/SessionManagement.js
@@ -1,6 +1,5 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import gql from 'graphql-tag'
-import moment from 'moment'
 import * as R from 'ramda'
 import React from 'react'
 import parser from 'ua-parser-js'
@@ -9,6 +8,7 @@ import { IconButton } from 'src/components/buttons'
 import TitleSection from 'src/components/layout/TitleSection'
 import DataTable from 'src/components/tables/DataTable'
 import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
+import { formatDate } from 'src/utils/timezones'
 
 const GET_SESSIONS = gql`
   query sessions {
@@ -28,17 +28,28 @@ const DELETE_SESSION = gql`
   }
 `
 
+const GET_DATA = gql`
+  query getData {
+    config
+  }
+`
+
 const isLocalhost = ip => {
   return ip === 'localhost' || ip === '::1' || ip === '127.0.0.1'
 }
 
 const SessionManagement = () => {
-  const { data: tknResponse } = useQuery(GET_SESSIONS)
+  const { data: tknResponse, loading: sessionsLoading } = useQuery(GET_SESSIONS)
 
   const [deleteSession] = useMutation(DELETE_SESSION, {
     refetchQueries: () => ['sessions']
   })
 
+  const { data: configResponse, loading: configLoading } = useQuery(GET_DATA)
+  const timezone = R.path(['config', 'locale_timezone'], configResponse)
+
+  const loading = sessionsLoading && configLoading
+
   const elements = [
     {
       header: 'Login',
@@ -73,9 +84,11 @@ const SessionManagement = () => {
       textAlign: 'right',
       size: 'sm',
       view: s =>
-        `${moment.utc(s.expire).format('YYYY-MM-DD')} ${moment
-          .utc(s.expire)
-          .format('HH:mm:ss')}`
+        `${formatDate(s.expire, timezone, 'yyyy-MM-dd')} ${formatDate(
+          s.expire,
+          timezone,
+          'HH:mm:ss'
+        )}`
     },
     {
       header: '',
@@ -94,10 +107,15 @@ const SessionManagement = () => {
   ]
 
   return (
-    <>
-      <TitleSection title="Session Management" />
-      <DataTable elements={elements} data={R.path(['sessions'])(tknResponse)} />
-    </>
+    !loading && (
+      <>
+        <TitleSection title="Session Management" />
+        <DataTable
+          elements={elements}
+          data={R.path(['sessions'])(tknResponse)}
+        />
+      </>
+    )
   )
 }
 
diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
index d665ec28..224cbf08 100644
--- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
+++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
@@ -1,11 +1,11 @@
 import { useLazyQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles, Box } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
+import { add, differenceInYears, format, sub } from 'date-fns'
 import FileSaver from 'file-saver'
 import gql from 'graphql-tag'
 import JSZip from 'jszip'
 import { utils as coinUtils } from 'lamassu-coins'
-import moment from 'moment'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
 
@@ -120,20 +120,17 @@ const DetailsRow = ({ it: tx, timezone }) => {
     name: `${onlyFirstToUpper(
       tx.customerIdCardData.firstName
     )} ${onlyFirstToUpper(tx.customerIdCardData.lastName)}`,
-    age: moment().diff(moment(tx.customerIdCardData.dateOfBirth), 'years'),
+    age: differenceInYears(new Date(), tx.customerIdCardData.dateOfBirth),
     country: tx.customerIdCardData.country,
     idCardNumber: tx.customerIdCardData.documentNumber,
-    idCardExpirationDate: moment(tx.customerIdCardData.expirationDate).format(
+    idCardExpirationDate: format(
+      tx.customerIdCardData.expirationDate,
       'DD-MM-YYYY'
     )
   }
 
-  const from = moment(tx.created)
-    .subtract(MINUTES_OFFSET, 'm')
-    .format()
-  const until = moment(tx.created)
-    .add(MINUTES_OFFSET, 'm')
-    .format()
+  const from = sub(tx.created, { minutes: MINUTES_OFFSET })
+  const until = add(tx.created, { minutes: MINUTES_OFFSET })
 
   const downloadRawLogs = ({ id: txId, deviceId, txClass }, timezone) => {
     fetchSummary({
diff --git a/new-lamassu-admin/src/utils/timezones.js b/new-lamassu-admin/src/utils/timezones.js
index 897501ab..322d6d20 100644
--- a/new-lamassu-admin/src/utils/timezones.js
+++ b/new-lamassu-admin/src/utils/timezones.js
@@ -1,12 +1,21 @@
 import { format } from 'date-fns'
 import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'
-// import moment from 'moment'
 // import * as R from 'ramda'
 
 // const buildLabel = tz => {
 //   return `(UTC${tz.utcOffsetStr}) ${R.map(it => it.city, tz.cities).join(', ')}`
 // }
 
+const toUtc = date => {
+  const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  return zonedTimeToUtc(date, browserTimezone)
+}
+
+const toTimezone = (date, timezone) => {
+  const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
+  return utcToZonedTime(zonedTimeToUtc(date, browserTimezone), timezone)
+}
+
 const formatDate = (date, timezone, pattern) => {
   const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
   const newDate = utcToZonedTime(
@@ -20,4 +29,4 @@ const formatDateNonUtc = (date, pattern) => {
   return format(date, pattern)
 }
 
-export { formatDate, formatDateNonUtc }
+export { toUtc, toTimezone, formatDate, formatDateNonUtc }
diff --git a/package.json b/package.json
index c7e9068f..dd15da5e 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,6 @@
     "mem": "^1.1.0",
     "migrate": "^1.6.2",
     "minimist": "^1.2.0",
-    "moment": "^2.17.0",
     "morgan": "^1.8.2",
     "nan": "^2.14.0",
     "nano-markdown": "^1.2.0",

From b0a031bd9781ce2c68bc9eca308c1920967c423c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Tue, 23 Nov 2021 17:38:08 +0000
Subject: [PATCH 3/5] fix: timezone options

---
 .../src/pages/Locales/Locales.js              |   4 +-
 new-lamassu-admin/src/pages/Locales/helper.js |  24 +---
 new-lamassu-admin/src/utils/timezone-list.js  | 120 ++++++++++++++++++
 3 files changed, 128 insertions(+), 20 deletions(-)
 create mode 100644 new-lamassu-admin/src/utils/timezone-list.js

diff --git a/new-lamassu-admin/src/pages/Locales/Locales.js b/new-lamassu-admin/src/pages/Locales/Locales.js
index a209e753..a91459e5 100644
--- a/new-lamassu-admin/src/pages/Locales/Locales.js
+++ b/new-lamassu-admin/src/pages/Locales/Locales.js
@@ -158,8 +158,6 @@ const Locales = ({ name: SCREEN_KEY }) => {
     setValue(curr)
   }
 
-  console.log('config', config)
-
   const onEditingDefault = (it, editing) => setEditingDefault(editing)
   const onEditingOverrides = (it, editing) => setEditingOverrides(editing)
 
@@ -189,7 +187,7 @@ const Locales = ({ name: SCREEN_KEY }) => {
           save={handleSave}
           validationSchema={LocaleSchema}
           data={R.of(locale)}
-          elements={mainFields(data, onChangeCoin, R.of(locale))}
+          elements={mainFields(data, onChangeCoin)}
           setEditing={onEditingDefault}
           forceDisable={isEditingOverrides}
         />
diff --git a/new-lamassu-admin/src/pages/Locales/helper.js b/new-lamassu-admin/src/pages/Locales/helper.js
index 9ea8e8dc..3158402e 100644
--- a/new-lamassu-admin/src/pages/Locales/helper.js
+++ b/new-lamassu-admin/src/pages/Locales/helper.js
@@ -1,19 +1,17 @@
-import * as ct from 'countries-and-timezones'
-// import { useFormikContext } from 'formik'
 import * as R from 'ramda'
 import * as Yup from 'yup'
 
 import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
-// import { getTzLabels } from 'src/utils/timezones'
+import timezoneList from 'src/utils/timezone-list'
 
-const getFields = (getData, names, onChange, auxElements = [], locale) => {
+const getFields = (getData, names, onChange, auxElements = []) => {
   return R.filter(
     it => R.includes(it.name, names),
-    allFields(getData, onChange, auxElements, locale)
+    allFields(getData, onChange, auxElements)
   )
 }
 
-const allFields = (getData, onChange, auxElements = [], locale) => {
+const allFields = (getData, onChange, auxElements = []) => {
   const getView = (data, code, compare) => it => {
     if (!data) return ''
 
@@ -34,19 +32,12 @@ const allFields = (getData, onChange, auxElements = [], locale) => {
   const suggestionFilter = it =>
     R.differenceWith((x, y) => x.deviceId === y, it, overridenMachines)
 
-  const localeData = (locale && locale[0]) || {}
-
   const machineData = getData(['machines'])
   const countryData = getData(['countries'])
   const currencyData = getData(['currencies'])
   const languageData = getData(['languages'])
   const cryptoData = getData(['cryptoCurrencies'])
-
-  const countryTimezones = ct.getTimezonesForCountry(localeData?.country) ?? []
-  const timezonesData =
-    R.values(
-      countryTimezones.map(it => ({ label: it.name, code: it.name })) ?? []
-    ) ?? []
+  const timezonesData = timezoneList
 
   const findSuggestion = it => {
     const machine = R.find(R.propEq('deviceId', it.machine))(machineData)
@@ -134,15 +125,14 @@ const allFields = (getData, onChange, auxElements = [], locale) => {
   ]
 }
 
-const mainFields = (auxData, configureCoin, locale) => {
+const mainFields = (auxData, configureCoin) => {
   const getData = R.path(R.__, auxData)
 
   return getFields(
     getData,
     ['country', 'fiatCurrency', 'languages', 'cryptoCurrencies', 'timezone'],
     configureCoin,
-    undefined,
-    locale
+    undefined
   )
 }
 
diff --git a/new-lamassu-admin/src/utils/timezone-list.js b/new-lamassu-admin/src/utils/timezone-list.js
new file mode 100644
index 00000000..848cea87
--- /dev/null
+++ b/new-lamassu-admin/src/utils/timezone-list.js
@@ -0,0 +1,120 @@
+import { intervalToDuration } from 'date-fns'
+import { getTimezoneOffset } from 'date-fns-tz'
+import * as R from 'ramda'
+
+const timezones = {
+  'Pacific/Midway': 'Midway Island, Samoa',
+  'Pacific/Honolulu': 'Hawaii',
+  'America/Juneau': 'Alaska',
+  'America/Boise': 'Mountain Time',
+  'America/Dawson': 'Dawson, Yukon',
+  'America/Chihuahua': 'Chihuahua, La Paz, Mazatlan',
+  'America/Phoenix': 'Arizona',
+  'America/Chicago': 'Central Time',
+  'America/Regina': 'Saskatchewan',
+  'America/Mexico_City': 'Guadalajara, Mexico City, Monterrey',
+  'America/Belize': 'Central America',
+  'America/Detroit': 'Eastern Time',
+  'America/Bogota': 'Bogota, Lima, Quito',
+  'America/Caracas': 'Caracas, La Paz',
+  'America/Santiago': 'Santiago',
+  'America/St_Johns': 'Newfoundland and Labrador',
+  'America/Sao_Paulo': 'Brasilia',
+  'America/Tijuana': 'Tijuana',
+  'America/Montevideo': 'Montevideo',
+  'America/Argentina/Buenos_Aires': 'Buenos Aires, Georgetown',
+  'America/Godthab': 'Greenland',
+  'America/Los_Angeles': 'Pacific Time',
+  'Atlantic/Azores': 'Azores',
+  'Atlantic/Cape_Verde': 'Cape Verde Islands',
+  GMT: 'UTC',
+  'Europe/London': 'Edinburgh, London',
+  'Europe/Dublin': 'Dublin',
+  'Europe/Lisbon': 'Lisbon',
+  'Africa/Casablanca': 'Casablanca, Monrovia',
+  'Atlantic/Canary': 'Canary Islands',
+  'Europe/Belgrade': 'Belgrade, Bratislava, Budapest, Ljubljana, Prague',
+  'Europe/Sarajevo': 'Sarajevo, Skopje, Warsaw, Zagreb',
+  'Europe/Brussels': 'Brussels, Copenhagen, Madrid, Paris',
+  'Europe/Amsterdam': 'Amsterdam, Berlin, Bern, Rome, Stockholm, Vienna',
+  'Africa/Algiers': 'West Central Africa',
+  'Europe/Bucharest': 'Bucharest',
+  'Africa/Cairo': 'Cairo',
+  'Europe/Helsinki': 'Helsinki, Kiev, Riga, Sofia, Tallinn, Vilnius',
+  'Europe/Athens': 'Athens, Istanbul, Minsk',
+  'Asia/Jerusalem': 'Jerusalem',
+  'Africa/Harare': 'Harare, Pretoria',
+  'Europe/Moscow': 'Moscow, St. Petersburg, Volgograd',
+  'Asia/Kuwait': 'Kuwait, Riyadh',
+  'Africa/Nairobi': 'Nairobi',
+  'Asia/Baghdad': 'Baghdad',
+  'Asia/Tehran': 'Tehran',
+  'Asia/Dubai': 'Abu Dhabi, Muscat',
+  'Asia/Baku': 'Baku, Tbilisi, Yerevan',
+  'Asia/Kabul': 'Kabul',
+  'Asia/Yekaterinburg': 'Ekaterinburg',
+  'Asia/Karachi': 'Islamabad, Karachi, Tashkent',
+  'Asia/Kolkata': 'Chennai, Kolkata, Mumbai, New Delhi',
+  'Asia/Kathmandu': 'Kathmandu',
+  'Asia/Dhaka': 'Astana, Dhaka',
+  'Asia/Colombo': 'Sri Jayawardenepura',
+  'Asia/Almaty': 'Almaty, Novosibirsk',
+  'Asia/Rangoon': 'Yangon Rangoon',
+  'Asia/Bangkok': 'Bangkok, Hanoi, Jakarta',
+  'Asia/Krasnoyarsk': 'Krasnoyarsk',
+  'Asia/Shanghai': 'Beijing, Chongqing, Hong Kong SAR, Urumqi',
+  'Asia/Kuala_Lumpur': 'Kuala Lumpur, Singapore',
+  'Asia/Taipei': 'Taipei',
+  'Australia/Perth': 'Perth',
+  'Asia/Irkutsk': 'Irkutsk, Ulaanbaatar',
+  'Asia/Seoul': 'Seoul',
+  'Asia/Tokyo': 'Osaka, Sapporo, Tokyo',
+  'Asia/Yakutsk': 'Yakutsk',
+  'Australia/Darwin': 'Darwin',
+  'Australia/Adelaide': 'Adelaide',
+  'Australia/Sydney': 'Canberra, Melbourne, Sydney',
+  'Australia/Brisbane': 'Brisbane',
+  'Australia/Hobart': 'Hobart',
+  'Asia/Vladivostok': 'Vladivostok',
+  'Pacific/Guam': 'Guam, Port Moresby',
+  'Asia/Magadan': 'Magadan, Solomon Islands, New Caledonia',
+  'Asia/Kamchatka': 'Kamchatka, Marshall Islands',
+  'Pacific/Fiji': 'Fiji Islands',
+  'Pacific/Auckland': 'Auckland, Wellington',
+  'Pacific/Tongatapu': "Nuku'alofa"
+}
+
+const buildTzLabels = timezoneList => {
+  const pairs = R.toPairs(timezoneList)
+  return R.reduce(
+    (acc, value) => {
+      const isNegative = getTimezoneOffset(value[0]) < 0
+      const duration = intervalToDuration({
+        start: 0,
+        end: Math.abs(getTimezoneOffset(value[0]))
+      })
+
+      const hours = duration.hours.toLocaleString('en-US', {
+        minimumIntegerDigits: 2,
+        useGrouping: false
+      })
+      const minutes = duration.minutes.toLocaleString('en-US', {
+        minimumIntegerDigits: 2,
+        useGrouping: false
+      })
+
+      const prefix = `(GMT${isNegative ? `-` : `+`}${hours}:${minutes})`
+
+      acc.push({
+        label: `${prefix} - ${value[1]}`,
+        code: value[0]
+      })
+
+      return acc
+    },
+    [],
+    pairs
+  )
+}
+
+export default buildTzLabels(timezones)

From ca2274a8a2cb45228ffc65821decdabe383d2b4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Tue, 23 Nov 2021 18:26:02 +0000
Subject: [PATCH 4/5] fix: use date-fns functional programming module

---
 lib/admin/server.js                           |  2 +-
 lib/customers.js                              |  8 ++--
 lib/logs.js                                   |  8 ++--
 lib/routes/customerRoutes.js                  |  5 +--
 .../src/components/LogsDownloaderPopper.js    | 14 +++---
 .../components/date-range-picker/Calendar.js  | 44 +++++++++----------
 .../date-range-picker/DateRangePicker.js      | 12 ++---
 .../components/wrappers/HourOfDayWrapper.js   |  6 +--
 .../Analytics/graphs/HourOfDayBarGraph.js     |  4 +-
 .../Analytics/graphs/OverTimeDotGraph.js      |  6 +--
 .../src/pages/Customers/CustomerData.js       |  9 ++--
 .../src/pages/Customers/CustomersList.js      |  4 +-
 .../pages/Customers/components/IdDataCard.js  |  8 ++--
 .../Graphs/RefScatterplot.js                  |  4 +-
 .../SystemPerformance/SystemPerformance.js    | 12 ++---
 new-lamassu-admin/src/pages/Funding.js        |  6 +--
 .../Machines/MachineComponents/Overview.js    |  4 +-
 .../src/pages/Maintenance/MachineStatus.js    |  6 ++-
 .../src/pages/Transactions/DetailsCard.js     | 12 ++---
 new-lamassu-admin/src/utils/timezones.js      | 23 ++++------
 20 files changed, 94 insertions(+), 103 deletions(-)

diff --git a/lib/admin/server.js b/lib/admin/server.js
index f31cf4fd..cc5d5415 100644
--- a/lib/admin/server.js
+++ b/lib/admin/server.js
@@ -1,3 +1,4 @@
+const { intervalToDuration, secondsToMilliseconds, formatDuration } = require('date-fns/fp')
 const _ = require('lodash/fp')
 
 const ticker = require('../ticker')
@@ -5,7 +6,6 @@ const settingsLoader = require('./settings-loader')
 
 const db = require('../db')
 const machineLoader = require('../machine-loader')
-const { intervalToDuration, secondsToMilliseconds, formatDuration } = require('date-fns')
 
 const CONSIDERED_UP_SECS = 30
 
diff --git a/lib/customers.js b/lib/customers.js
index 478f6f7c..28808f2e 100644
--- a/lib/customers.js
+++ b/lib/customers.js
@@ -6,6 +6,7 @@ const makeDir = require('make-dir')
 const path = require('path')
 const fs = require('fs')
 const util = require('util')
+const { sub, differenceInHours } = require('date-fns/fp')
 
 const db = require('./db')
 const BN = require('./bn')
@@ -23,7 +24,6 @@ const operatorDataDir = _.get('operatorDataDir', options)
 const sms = require('./sms')
 const settingsLoader = require('./new-settings-loader')
 const logger = require('./logger')
-const { sub, differenceInHours } = require('date-fns')
 
 const TX_PASSTHROUGH_ERROR_CODES = ['operatorCancel']
 
@@ -216,13 +216,13 @@ function getDailyVolumeMinusCurrentTxQueries (id, txId) {
 
 function getHoursTillLimitClear (cashInDate, cashOutDate) {
   let startDate = new Date()
-  startDate = sub(startDate, { days: 1 })
+  startDate = sub({ days: 1 }, startDate)
 
   const cashInMoment = new Date(cashInDate || startDate)
   const cashOutMoment = new Date(cashOutDate || startDate)
 
-  const cashInDuration = differenceInHours(startDate, cashInMoment)
-  const cashOutDuration = differenceInHours(startDate, cashOutMoment)
+  const cashInDuration = differenceInHours(cashInMoment, startDate)
+  const cashOutDuration = differenceInHours(cashOutMoment, startDate)
 
   return _.ceil(_.max([cashInDuration, cashOutDuration, 0]))
 }
diff --git a/lib/logs.js b/lib/logs.js
index 6b6ea61f..3b8421bf 100644
--- a/lib/logs.js
+++ b/lib/logs.js
@@ -1,6 +1,6 @@
 const _ = require('lodash/fp')
-const { format } = require('date-fns')
-const { zonedTimeToUtc, utcToZonedTime } = require('date-fns-tz')
+const { format } = require('date-fns/fp')
+const { utcToZonedTime } = require('date-fns-tz/fp')
 
 const db = require('./db')
 const pgp = require('pg-promise')()
@@ -118,8 +118,8 @@ function logDateFormat (timezone, logs, fields) {
       field =>
         {
           if (_.isNil(log[field])) return null
-          const date = utcToZonedTime(log[field], timezone)
-          return `${format(date, 'yyyy-MM-dd')}T${format(date, 'HH:mm:ss.SSS')}`
+          const date = utcToZonedTime(timezone, log[field])
+          return `${format('yyyy-MM-dd', date)}T${format('HH:mm:ss.SSS', date)}`
         },
         fields
       )
diff --git a/lib/routes/customerRoutes.js b/lib/routes/customerRoutes.js
index 272da2d8..2ea098e3 100644
--- a/lib/routes/customerRoutes.js
+++ b/lib/routes/customerRoutes.js
@@ -4,6 +4,7 @@ const semver = require('semver')
 const sms = require('../sms')
 const _ = require('lodash/fp')
 const BN = require('../bn')
+const { zonedTimeToUtc, utcToZonedTime } = require('date-fns-tz/fp')
 
 const compliance = require('../compliance')
 const complianceTriggers = require('../compliance-triggers')
@@ -18,8 +19,6 @@ const { getCustomerById } = require('../customers')
 const machineLoader = require('../machine-loader')
 const { loadLatestConfig } = require('../new-settings-loader')
 
-const { zonedTimeToUtc, utcToZonedTime } = require('date-fns-tz')
-
 function updateCustomer (req, res, next) {
   const id = req.params.id
   const machineVersion = req.query.version
@@ -136,7 +135,7 @@ function buildSms (data, receiptOptions) {
           const cashInCommission = new BN(1).plus(new BN(formattedTx.commissionPercentage))
 
           const rate = new BN(formattedTx.rawTickerPrice).multipliedBy(cashInCommission).decimalPlaces(2)
-          const date = utcToZonedTime(zonedTimeToUtc(new Date(), process.env.TZ), timezone)
+          const date = utcToZonedTime(timezone, zonedTimeToUtc(process.env.TZ, new Date()))
           const dateString = `${date.toISOString().replace('T', ' ').slice(0, 19)}`
 
           const data = {
diff --git a/new-lamassu-admin/src/components/LogsDownloaderPopper.js b/new-lamassu-admin/src/components/LogsDownloaderPopper.js
index 7ff6a16c..9c02760a 100644
--- a/new-lamassu-admin/src/components/LogsDownloaderPopper.js
+++ b/new-lamassu-admin/src/components/LogsDownloaderPopper.js
@@ -1,7 +1,7 @@
 import { useLazyQuery } from '@apollo/react-hooks'
 import { makeStyles, ClickAwayListener } from '@material-ui/core'
 import classnames from 'classnames'
-import { format, isSameDay } from 'date-fns'
+import { format, isSameDay } from 'date-fns/fp'
 import FileSaver from 'file-saver'
 import * as R from 'ramda'
 import React, { useState, useCallback } from 'react'
@@ -65,13 +65,13 @@ const DateContainer = ({ date, children, ...props }) => {
       {date && (
         <>
           <div className={classes.container}>
-            <div className={classes.bigNumber}>{format(date, 'd')}</div>
+            <div className={classes.bigNumber}>{format('d', date)}</div>
             <div className={classes.monthWeekDayContainer}>
               <span className={classes.monthYear}>{`${format(
-                date,
-                'MMM'
-              )} ${format(date, 'yyyy')}`}</span>
-              <span className={classes.weekDay}>{format(date, 'EEEE')}</span>
+                'MMM',
+                date
+              )} ${format('yyyy', date)}`}</span>
+              <span className={classes.weekDay}>{format('EEEE', date)}</span>
             </div>
           </div>
         </>
@@ -188,7 +188,7 @@ const LogsDownloaderPopover = ({
 
     if (!range || !range.from) return
     if (range.from && !range.until) range.until = new Date()
-    if (isSameDay(range.from, range.until)) range.until = new Date()
+    if (isSameDay(range.until, range.from)) range.until = new Date()
 
     if (selectedRadio === RANGE) {
       fetchLogs({
diff --git a/new-lamassu-admin/src/components/date-range-picker/Calendar.js b/new-lamassu-admin/src/components/date-range-picker/Calendar.js
index 7e0661cb..c6151d73 100644
--- a/new-lamassu-admin/src/components/date-range-picker/Calendar.js
+++ b/new-lamassu-admin/src/components/date-range-picker/Calendar.js
@@ -12,7 +12,7 @@ import {
   startOfMonth,
   startOfWeek,
   sub
-} from 'date-fns'
+} from 'date-fns/fp'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
@@ -90,29 +90,29 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
   const classes = useStyles()
 
   const weekdays = Array.from(Array(7)).map((_, i) =>
-    format(add(startOfWeek(new Date()), { days: i }), 'EEEEE')
+    format('EEEEE', add({ days: i }, startOfWeek(new Date())))
   )
 
   const monthLength = month => getDaysInMonth(month)
 
   const monthdays = month => {
-    const lastMonth = sub(month, { months: 1 })
+    const lastMonth = sub({ months: 1 }, month)
     const lastMonthRange = R.range(0, getDay(startOfMonth(month))).reverse()
     const lastMonthDays = R.map(i =>
-      sub(lastDayOfMonth(lastMonth), { days: i })
+      sub({ days: i }, lastDayOfMonth(lastMonth))
     )(lastMonthRange)
 
     const thisMonthRange = R.range(0, monthLength(month))
-    const thisMonthDays = R.map(i => add(startOfMonth(month), { days: i }))(
+    const thisMonthDays = R.map(i => add({ days: i }, startOfMonth(month)))(
       thisMonthRange
     )
 
-    const nextMonth = add(month, { months: 1 })
+    const nextMonth = add({ months: 1 }, month)
     const nextMonthRange = R.range(
       0,
       42 - lastMonthDays.length - thisMonthDays.length
     )
-    const nextMonthDays = R.map(i => add(startOfMonth(nextMonth), { days: i }))(
+    const nextMonthDays = R.map(i => add({ days: i }, startOfMonth(nextMonth)))(
       nextMonthRange
     )
 
@@ -122,24 +122,24 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
   const getRow = (month, row) => monthdays(month).slice(row * 7 - 7, row * 7)
 
   const handleNavPrev = currentMonth => {
-    const prevMonth = sub(currentMonth, { months: 1 })
+    const prevMonth = sub({ months: 1 }, currentMonth)
     if (!minDate) setCurrentDisplayedMonth(prevMonth)
     else {
       setCurrentDisplayedMonth(
-        isSameMonth(prevMonth, minDate) ||
-          differenceInMonths(prevMonth, minDate) > 0
+        isSameMonth(minDate, prevMonth) ||
+          differenceInMonths(minDate, prevMonth) > 0
           ? prevMonth
           : currentDisplayedMonth
       )
     }
   }
   const handleNavNext = currentMonth => {
-    const nextMonth = add(currentMonth, { months: 1 })
+    const nextMonth = add({ months: 1 }, currentMonth)
     if (!maxDate) setCurrentDisplayedMonth(nextMonth)
     else {
       setCurrentDisplayedMonth(
-        isSameMonth(nextMonth, maxDate) ||
-          differenceInMonths(maxDate, nextMonth) > 0
+        isSameMonth(maxDate, nextMonth) ||
+          differenceInMonths(nextMonth, maxDate) > 0
           ? nextMonth
           : currentDisplayedMonth
       )
@@ -155,9 +155,9 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
           <Arrow />
         </button>
         <span>
-          {`${format(currentDisplayedMonth, 'MMMM')} ${format(
-            currentDisplayedMonth,
-            'yyyy'
+          {`${format('MMMM', currentDisplayedMonth)} ${format(
+            'yyyy',
+            currentDisplayedMonth
           )}`}
         </span>
         <button
@@ -183,15 +183,15 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
                   onClick={() => handleSelect(day, minDate, maxDate)}>
                   <Tile
                     isDisabled={
-                      (maxDate && isAfter(day, maxDate)) ||
-                      (minDate && isAfter(minDate, day))
+                      (maxDate && isAfter(maxDate, day)) ||
+                      (minDate && isAfter(day, minDate))
                     }
-                    isLowerBound={isSameDay(day, props.from)}
-                    isUpperBound={isSameDay(day, props.to)}
+                    isLowerBound={isSameDay(props.from, day)}
+                    isUpperBound={isSameDay(props.to, day)}
                     isBetween={
-                      isAfter(day, props.from) && isAfter(props.to, day)
+                      isAfter(props.from, day) && isAfter(day, props.to)
                     }>
-                    {format(day, 'd')}
+                    {format('d', day)}
                   </Tile>
                 </td>
               ))}
diff --git a/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js b/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js
index 9f2e2e3d..93a7791b 100644
--- a/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js
+++ b/new-lamassu-admin/src/components/date-range-picker/DateRangePicker.js
@@ -5,7 +5,7 @@ import {
   differenceInMonths,
   isSameMonth,
   set
-} from 'date-fns'
+} from 'date-fns/fp'
 import React, { useState, useEffect } from 'react'
 
 import Calendar from './Calendar'
@@ -31,12 +31,12 @@ const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
 
   const handleSelect = (day, minDate, maxDate) => {
     if (
-      (maxDate && differenceInDays(day, maxDate) > 0) ||
-      (minDate && differenceInDays(minDate, day) > 0)
+      (maxDate && differenceInDays(maxDate, day) > 0) ||
+      (minDate && differenceInDays(day, minDate) > 0)
     )
       return
 
-    if (from && !to && differenceInDays(from, day) > 0) {
+    if (from && !to && differenceInDays(day, from) > 0) {
       setTo(from)
       setFrom(day)
       return
@@ -45,10 +45,10 @@ const DateRangePicker = ({ minDate, maxDate, className, onRangeChange }) => {
     if (
       from &&
       !to &&
-      (isSameMonth(day, from) || differenceInMonths(day, from) > 0)
+      (isSameMonth(from, day) || differenceInMonths(from, day) > 0)
     ) {
       setTo(
-        set(day, { hours: 23, minutes: 59, seconds: 59, milliseconds: 999 })
+        set({ hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }, day)
       )
       return
     }
diff --git a/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js b/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js
index ce2b137d..96bc3507 100644
--- a/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js
+++ b/new-lamassu-admin/src/pages/Analytics/components/wrappers/HourOfDayWrapper.js
@@ -1,7 +1,7 @@
 import { Box } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
-import { format, add, startOfWeek } from 'date-fns'
 import { getTimezoneOffset } from 'date-fns-tz'
+import { format, add, startOfWeek } from 'date-fns/fp'
 import * as R from 'ramda'
 import React, { useState } from 'react'
 
@@ -26,7 +26,7 @@ const dayOptions = R.map(
     display: it
   }),
   Array.from(Array(7)).map((_, i) =>
-    format(add(startOfWeek(new Date()), { days: i }), 'EEEE')
+    format('EEEE', add({ days: i }, startOfWeek(new Date())))
   )
 )
 
@@ -55,11 +55,9 @@ const HourOfDayBarGraphHeader = ({
   const txsPerWeekday = R.reduce(
     (acc, value) => {
       const created = new Date(value.created)
-      // console.log('before', R.clone(created))
       created.setTime(
         created.getTime() + created.getTimezoneOffset() * MINUTE + offset
       )
-      // console.log('after', R.clone(created))
       switch (created.getDay()) {
         case 0:
           acc.sunday.push(value)
diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js b/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js
index d1650666..eb61f70c 100644
--- a/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js
+++ b/new-lamassu-admin/src/pages/Analytics/graphs/HourOfDayBarGraph.js
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import * as d3 from 'd3'
-import { add, startOfDay } from 'date-fns'
 import { getTimezoneOffset } from 'date-fns-tz'
+import { add, startOfDay } from 'date-fns/fp'
 import * as R from 'ramda'
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 
@@ -100,7 +100,7 @@ const Graph = ({
     .scaleUtc()
     .domain([
       toUtc(startOfDay(new Date())),
-      toUtc(add(startOfDay(new Date()), { days: 1 }))
+      toUtc(add({ days: 1 }, startOfDay(new Date())))
     ])
     .rangeRound([GRAPH_MARGIN.left, GRAPH_WIDTH - GRAPH_MARGIN.right])
 
diff --git a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
index 8459d006..f0b93d3d 100644
--- a/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
+++ b/new-lamassu-admin/src/pages/Analytics/graphs/OverTimeDotGraph.js
@@ -1,7 +1,7 @@
 import BigNumber from 'bignumber.js'
 import * as d3 from 'd3'
-import { add, format, startOfWeek, startOfYear } from 'date-fns'
 import { getTimezoneOffset } from 'date-fns-tz'
+import { add, format, startOfWeek, startOfYear } from 'date-fns/fp'
 import * as R from 'ramda'
 import React, { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 
@@ -88,11 +88,11 @@ const Graph = ({
     const previousDateMonth = previousDate.getUTCMonth()
 
     const daysOfWeek = Array.from(Array(7)).map((_, i) =>
-      format(add(startOfWeek(new Date()), { days: i }), 'EEE')
+      format('EEE', add({ days: i }, startOfWeek(new Date())))
     )
 
     const months = Array.from(Array(12)).map((_, i) =>
-      format(add(startOfYear(new Date()), { months: i }), 'LLL')
+      format('LLL', add({ months: i }, startOfYear(new Date())))
     )
 
     return {
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js
index bc661164..e957211c 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerData.js
@@ -1,6 +1,6 @@
 import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
-import { differenceInYears, format } from 'date-fns'
+import { differenceInYears, format } from 'date-fns/fp'
 import _ from 'lodash/fp'
 import * as R from 'ramda'
 import { useState, React } from 'react'
@@ -65,7 +65,6 @@ const CustomerData = ({ customer, updateCustomer }) => {
   const rawExpirationDate = R.path(['expirationDate'])(idData)
   const country = R.path(['country'])(idData)
   const rawDob = R.path(['dateOfBirth'])(idData)
-  console.log(rawDob)
 
   const sanctions = R.path(['sanctions'])(customer)
   const sanctionsAt = R.path(['sanctionsAt'])(customer)
@@ -116,13 +115,13 @@ const CustomerData = ({ customer, updateCustomer }) => {
     {
       name: 'birthDate',
       label: 'Birth Date',
-      value: (rawDob && format(rawDob, 'yyyy-MM-dd')) ?? '',
+      value: (rawDob && format('yyyy-MM-dd', rawDob)) ?? '',
       component: TextInput
     },
     {
       name: 'age',
       label: 'Age',
-      value: (rawDob && differenceInYears(new Date(), rawDob)) ?? '',
+      value: (rawDob && differenceInYears(rawDob, new Date())) ?? '',
       component: TextInput
     },
     {
@@ -141,7 +140,7 @@ const CustomerData = ({ customer, updateCustomer }) => {
       name: 'expirationDate',
       label: 'Expiration Date',
       value:
-        (rawExpirationDate && format(rawExpirationDate, 'yyyy-MM-dd')) ?? '',
+        (rawExpirationDate && format('yyyy-MM-dd', rawExpirationDate)) ?? '',
       component: TextInput
     }
   ]
diff --git a/new-lamassu-admin/src/pages/Customers/CustomersList.js b/new-lamassu-admin/src/pages/Customers/CustomersList.js
index df228251..2fdaadc9 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomersList.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomersList.js
@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles'
-import { format } from 'date-fns'
+import { format } from 'date-fns/fp'
 import * as R from 'ramda'
 import React from 'react'
 
@@ -44,7 +44,7 @@ const CustomersList = ({ data, locale, onClick, loading }) => {
       header: 'Last active',
       width: 137,
       view: it =>
-        (it.lastActive && format(new Date(it.lastActive), 'yyyy-MM-d')) ?? ''
+        (it.lastActive && format('yyyy-MM-d', new Date(it.lastActive))) ?? ''
     },
     {
       header: 'Last transaction',
diff --git a/new-lamassu-admin/src/pages/Customers/components/IdDataCard.js b/new-lamassu-admin/src/pages/Customers/components/IdDataCard.js
index ef40ce60..5da592ff 100644
--- a/new-lamassu-admin/src/pages/Customers/components/IdDataCard.js
+++ b/new-lamassu-admin/src/pages/Customers/components/IdDataCard.js
@@ -1,5 +1,5 @@
 import { Box } from '@material-ui/core'
-import { differenceInYears, format } from 'date-fns'
+import { differenceInYears, format } from 'date-fns/fp'
 import * as R from 'ramda'
 import React, { memo } from 'react'
 
@@ -34,14 +34,14 @@ const IdDataCard = memo(({ customerData, updateCustomer }) => {
     },
     {
       header: 'Birth Date',
-      display: ifNotNull(rawDob, format(rawDob, 'YYYY-MM-DD')),
+      display: ifNotNull(rawDob, format('YYYY-MM-DD', rawDob)),
       size: 110
     },
     {
       header: 'Age',
       display: ifNotNull(
         rawDob,
-        differenceInYears(toUtc(new Date()), toUtc(rawDob))
+        differenceInYears(toUtc(rawDob), toUtc(new Date()))
       ),
       size: 50
     },
@@ -59,7 +59,7 @@ const IdDataCard = memo(({ customerData, updateCustomer }) => {
       header: 'Expiration Date',
       display: ifNotNull(
         rawExpirationDate,
-        format(rawExpirationDate, 'YYYY-MM-DD')
+        format('YYYY-MM-DD', rawExpirationDate)
       )
     }
   ]
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
index d45ca188..ace69b0f 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
+++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/Graphs/RefScatterplot.js
@@ -1,5 +1,5 @@
 import * as d3 from 'd3'
-import { add } from 'date-fns'
+import { add } from 'date-fns/fp'
 import React, { useEffect, useRef, useCallback } from 'react'
 
 import { backgroundColor, java, neon } from 'src/styling/variables'
@@ -92,7 +92,7 @@ const RefScatterplot = ({ data: realData, timeFrame, timezone }) => {
     const x = d3
       .scaleTime()
       .domain([
-        add(new Date(), { days: -xAxisSettings.subtractDays }).valueOf(),
+        add({ days: -xAxisSettings.subtractDays }, new Date()).valueOf(),
         new Date().valueOf()
       ])
       .range(xAxisSettings.timeRange)
diff --git a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
index dd583a50..21610885 100644
--- a/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
+++ b/new-lamassu-admin/src/pages/Dashboard/SystemPerformance/SystemPerformance.js
@@ -3,7 +3,7 @@ import Grid from '@material-ui/core/Grid'
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
-import { isAfter, sub } from 'date-fns'
+import { isAfter, sub } from 'date-fns/fp'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState } from 'react'
@@ -30,7 +30,7 @@ const mapToFee = R.map(R.prop('cashInFee'))
 
 const getDateSecondsAgo = (seconds = 0, startDate = null) => {
   const date = startDate ? new Date(startDate) : new Date()
-  return sub(date, { seconds: seconds })
+  return sub({ seconds: seconds }, date)
 }
 
 const ranges = {
@@ -84,14 +84,14 @@ const SystemPerformance = () => {
     if (!getLastTimePeriod) {
       return (
         t.error === null &&
-        isAfter(toTimezone(t.created, timezone), ranges[selectedRange].right) &&
-        isAfter(new Date(), toTimezone(t.created, timezone))
+        isAfter(ranges[selectedRange].right, toTimezone(t.created, timezone)) &&
+        isAfter(toTimezone(t.created, timezone), new Date())
       )
     }
     return (
       t.error === null &&
-      isAfter(toTimezone(t.created, timezone), ranges[selectedRange].left) &&
-      isAfter(ranges[selectedRange].right, toTimezone(t.created, timezone))
+      isAfter(ranges[selectedRange].left, toTimezone(t.created, timezone)) &&
+      isAfter(toTimezone(t.created, timezone), ranges[selectedRange].right)
     )
   }
 
diff --git a/new-lamassu-admin/src/pages/Funding.js b/new-lamassu-admin/src/pages/Funding.js
index 9a7bafd7..98d46d6e 100644
--- a/new-lamassu-admin/src/pages/Funding.js
+++ b/new-lamassu-admin/src/pages/Funding.js
@@ -2,7 +2,7 @@ import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
 import classnames from 'classnames'
-import { format } from 'date-fns'
+import { format } from 'date-fns/fp'
 import gql from 'graphql-tag'
 import { utils as coinUtils } from 'lamassu-coins'
 import QRCode from 'qrcode.react'
@@ -275,8 +275,8 @@ const Funding = () => {
                     <Td width={sizes.big}>
                       {it.fiatValue} {selected.fiatCode}
                     </Td>
-                    <Td width={sizes.date}>{format(it.date, 'YYYY-MM-DD')}</Td>
-                    <Td width={sizes.time}>{format(it.date, 'hh:mm:ss')}</Td>
+                    <Td width={sizes.date}>{format('yyyy-MM-dd', it.date)}</Td>
+                    <Td width={sizes.time}>{format('hh:mm:ss', it.date)}</Td>
                     <Td width={sizes.big}>add</Td>
                   </Tr>
                 ))}
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js
index d8c2f607..6c7c9f65 100644
--- a/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Overview.js
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles'
 import BigNumber from 'bignumber.js'
-import { differenceInSeconds } from 'date-fns'
+import { differenceInSeconds } from 'date-fns/fp'
 import React from 'react'
 
 import { Status } from 'src/components/Status'
@@ -13,7 +13,7 @@ const useStyles = makeStyles(styles)
 
 const makeLastPing = lastPing => {
   if (!lastPing) return null
-  const secondsAgo = differenceInSeconds(new Date(), lastPing)
+  const secondsAgo = differenceInSeconds(lastPing, new Date())
   if (secondsAgo < 60) {
     return `${secondsAgo} ${secondsAgo === 1 ? 'second' : 'seconds'} ago`
   }
diff --git a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js
index 1aee31be..2c3ac5da 100644
--- a/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js
+++ b/new-lamassu-admin/src/pages/Maintenance/MachineStatus.js
@@ -1,6 +1,6 @@
 import { useQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core'
-import { formatDistanceToNow } from 'date-fns'
+import { formatDistance } from 'date-fns'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React from 'react'
@@ -91,7 +91,9 @@ const MachineStatus = () => {
       textAlign: 'left',
       view: m =>
         m.lastPing
-          ? formatDistanceToNow(new Date(m.lastPing), { addSuffix: true })
+          ? formatDistance(new Date(m.lastPing), new Date(), {
+              addSuffix: true
+            })
           : 'unknown'
     },
     {
diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
index 224cbf08..334ee3a5 100644
--- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
+++ b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js
@@ -1,7 +1,7 @@
 import { useLazyQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles, Box } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
-import { add, differenceInYears, format, sub } from 'date-fns'
+import { add, differenceInYears, format, sub } from 'date-fns/fp'
 import FileSaver from 'file-saver'
 import gql from 'graphql-tag'
 import JSZip from 'jszip'
@@ -120,17 +120,17 @@ const DetailsRow = ({ it: tx, timezone }) => {
     name: `${onlyFirstToUpper(
       tx.customerIdCardData.firstName
     )} ${onlyFirstToUpper(tx.customerIdCardData.lastName)}`,
-    age: differenceInYears(new Date(), tx.customerIdCardData.dateOfBirth),
+    age: differenceInYears(tx.customerIdCardData.dateOfBirth, new Date()),
     country: tx.customerIdCardData.country,
     idCardNumber: tx.customerIdCardData.documentNumber,
     idCardExpirationDate: format(
-      tx.customerIdCardData.expirationDate,
-      'DD-MM-YYYY'
+      'dd-MM-yyyy',
+      tx.customerIdCardData.expirationDate
     )
   }
 
-  const from = sub(tx.created, { minutes: MINUTES_OFFSET })
-  const until = add(tx.created, { minutes: MINUTES_OFFSET })
+  const from = sub({ minutes: MINUTES_OFFSET }, tx.created)
+  const until = add({ minutes: MINUTES_OFFSET }, tx.created)
 
   const downloadRawLogs = ({ id: txId, deviceId, txClass }, timezone) => {
     fetchSummary({
diff --git a/new-lamassu-admin/src/utils/timezones.js b/new-lamassu-admin/src/utils/timezones.js
index 322d6d20..88d111ae 100644
--- a/new-lamassu-admin/src/utils/timezones.js
+++ b/new-lamassu-admin/src/utils/timezones.js
@@ -1,32 +1,25 @@
-import { format } from 'date-fns'
-import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'
-// import * as R from 'ramda'
-
-// const buildLabel = tz => {
-//   return `(UTC${tz.utcOffsetStr}) ${R.map(it => it.city, tz.cities).join(', ')}`
-// }
+import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz/fp'
+import { format } from 'date-fns/fp'
 
 const toUtc = date => {
   const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-  return zonedTimeToUtc(date, browserTimezone)
+  return zonedTimeToUtc(browserTimezone, date)
 }
 
 const toTimezone = (date, timezone) => {
   const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
-  return utcToZonedTime(zonedTimeToUtc(date, browserTimezone), timezone)
+  return utcToZonedTime(timezone, zonedTimeToUtc(browserTimezone, date))
 }
 
 const formatDate = (date, timezone, pattern) => {
   const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
   const newDate = utcToZonedTime(
-    zonedTimeToUtc(date, browserTimezone),
-    timezone
+    timezone,
+    zonedTimeToUtc(browserTimezone, date)
   )
-  return format(newDate, pattern)
+  return format(pattern, newDate)
 }
 
-const formatDateNonUtc = (date, pattern) => {
-  return format(date, pattern)
-}
+const formatDateNonUtc = (date, pattern) => format(pattern, date)
 
 export { toUtc, toTimezone, formatDate, formatDateNonUtc }

From 9c15d19c0e9f0ec93a5becf0de1483e01c04272c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= <sergiodiassalgado@gmail.com>
Date: Tue, 23 Nov 2021 18:28:42 +0000
Subject: [PATCH 5/5] fix: offset sent to machine

---
 lib/plugins.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/plugins.js b/lib/plugins.js
index bfafe327..6406d657 100644
--- a/lib/plugins.js
+++ b/lib/plugins.js
@@ -3,6 +3,8 @@ const argv = require('minimist')(process.argv.slice(2))
 const crypto = require('crypto')
 const pgp = require('pg-promise')()
 const dateFormat = require('dateformat')
+const { getTimezoneOffset } = require('date-fns-tz')
+const { millisecondsToMinutes } = require('date-fns/fp')
 
 const BN = require('./bn')
 const dbm = require('./postgresql_interface')
@@ -230,7 +232,7 @@ function plugins (settings, deviceId) {
     const localeConfig = configManager.getLocale(deviceId, settings.config)
     const fiatCode = localeConfig.fiatCurrency
     const cryptoCodes = localeConfig.cryptoCurrencies
-    const timezone = localeConfig.timezone
+    const timezone = millisecondsToMinutes(getTimezoneOffset(localeConfig.timezone))
 
     const tickerPromises = cryptoCodes.map(c => ticker.getRates(settings, fiatCode, c))
     const balancePromises = cryptoCodes.map(c => fiatBalance(fiatCode, c))