fix: use date-fns functional programming module

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
 

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 cashInDuration = differenceInHours(cashInMoment, startDate)
-  const cashOutDuration = differenceInHours(startDate, cashOutMoment)
+  const cashOutDuration = differenceInHours(cashOutMoment, startDate)
 
   return _.ceil(_.max([cashInDuration, cashOutDuration, 0]))
 }

lib/logs.js

@@ -1,6 +1,6 @@
 const _ = require('lodash/fp')
-const { format } = require('date-fns')
+const { format } = require('date-fns/fp')
-const { zonedTimeToUtc, utcToZonedTime } = require('date-fns-tz')
+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)
+          const date = utcToZonedTime(timezone, log[field])
-          return `${format(date, 'yyyy-MM-dd')}T${format(date, 'HH:mm:ss.SSS')}`
+          return `${format('yyyy-MM-dd', date)}T${format('HH:mm:ss.SSS', date)}`
         },
         fields
       )

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 = {

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',
-                'MMM'
+                date
-              )} ${format(date, 'yyyy')}`}</span>
+              )} ${format('yyyy', date)}`}</span>
-              <span className={classes.weekDay}>{format(date, 'EEEE')}</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({

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) ||
+        isSameMonth(minDate, prevMonth) ||
-          differenceInMonths(prevMonth, minDate) > 0
+          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) ||
+        isSameMonth(maxDate, nextMonth) ||
-          differenceInMonths(maxDate, nextMonth) > 0
+          differenceInMonths(nextMonth, maxDate) > 0
           ? nextMonth
           : currentDisplayedMonth
       )
@@ -155,9 +155,9 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
           <Arrow />
         </button>
         <span>
-          {`${format(currentDisplayedMonth, 'MMMM')} ${format(
+          {`${format('MMMM', currentDisplayedMonth)} ${format(
-            currentDisplayedMonth,
+            'yyyy',
-            '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)) ||
+                      (maxDate && isAfter(maxDate, day)) ||
-                      (minDate && isAfter(minDate, day))
+                      (minDate && isAfter(day, minDate))
                     }
-                    isLowerBound={isSameDay(day, props.from)}
+                    isLowerBound={isSameDay(props.from, day)}
-                    isUpperBound={isSameDay(day, props.to)}
+                    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>
               ))}

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) ||
+      (maxDate && differenceInDays(maxDate, day) > 0) ||
-      (minDate && differenceInDays(minDate, 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
     }

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)

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])
 

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 {

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
     }
   ]

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',

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)
       )
     }
   ]

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)

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(ranges[selectedRange].right, toTimezone(t.created, timezone)) &&
-        isAfter(new Date(), 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].left, toTimezone(t.created, timezone)) &&
-      isAfter(ranges[selectedRange].right, toTimezone(t.created, timezone))
+      isAfter(toTimezone(t.created, timezone), ranges[selectedRange].right)
     )
   }
 

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.date}>{format('yyyy-MM-dd', it.date)}</Td>
-                    <Td width={sizes.time}>{format(it.date, 'hh:mm:ss')}</Td>
+                    <Td width={sizes.time}>{format('hh:mm:ss', it.date)}</Td>
                     <Td width={sizes.big}>add</Td>
                   </Tr>
                 ))}

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`
   }

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'
     },
     {

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 from = sub({ minutes: MINUTES_OFFSET }, tx.created)
-  const until = add(tx.created, { minutes: MINUTES_OFFSET })
+  const until = add({ minutes: MINUTES_OFFSET }, tx.created)
 
   const downloadRawLogs = ({ id: txId, deviceId, txClass }, timezone) => {
     fetchSummary({

new-lamassu-admin/src/utils/timezones.js

@@ -1,32 +1,25 @@
-import { format } from 'date-fns'
+import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz/fp'
-import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'
+import { format } from 'date-fns/fp'
-// 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)
+  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) => {
+const formatDateNonUtc = (date, pattern) => format(pattern, date)
-  return format(date, pattern)
-}
 
 export { toUtc, toTimezone, formatDate, formatDateNonUtc }