Time display mode settings

config/default.js

@@ -21,6 +21,9 @@ module.exports = {
   currency: 'USD',
   locale: 'en',
 
+  // Default time dipslay mode (12hour|24hour).
+  timeDisplayMode: '12hour',
+
   autoupdate: {
     active: true,
     channel: 'beta',

renderer/components/Activity/Invoice/Invoice.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Text } from 'components/UI'
 import Zap from 'components/Icon/Zap'
-import { CryptoValue, FiatValue } from 'containers/UI'
+import { CryptoValue, FiatValue, FormattedDateTime } from 'containers/UI'
 import messages from './messages'
 import Clock from 'components/Icon/Clock'
 
@@ -33,7 +33,8 @@ const Invoice = ({ activity, showActivityModal, cryptoUnitName, intl, ...rest })
         <FormattedMessage {...messages[activity.isSettled ? 'received' : 'requested']} />
       </Text>
       <Text color="gray" fontSize="xs" fontWeight="normal">
-        <FormattedTime
+        <FormattedDateTime
+          format="time"
           value={activity.isSettled ? activity.settleDate * 1000 : activity.creationDate * 1000}
         />
       </Text>

renderer/components/Activity/Payment/Payment.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedMessage, FormattedTime, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { getDisplayNodeName } from 'reducers/payment/utils'
 import { Message, Text } from 'components/UI'
 import Zap from 'components/Icon/Zap'
-import { CryptoValue, FiatValue } from 'containers/UI'
+import { CryptoValue, FiatValue, FormattedDateTime } from 'containers/UI'
 import ErrorLink from '../ErrorLink'
 import messages from './messages'
 
@@ -57,7 +57,7 @@ const Payment = ({
           </>
         ) : (
           <Text color="gray" fontSize="xs" fontWeight="normal">
-            <FormattedTime value={activity.creationDate * 1000} />
+            <FormattedDateTime format="time" value={activity.creationDate * 1000} />
           </Text>
         )}
       </Box>

renderer/components/Activity/PaymentModal/PaymentModal.js

@@ -1,12 +1,19 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedDate, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { getDisplayNodeName } from 'reducers/payment/utils'
 import { Bar, DataRow, Header, Panel, Text } from 'components/UI'
 import { getTag } from '@zap/utils/crypto'
-import { CopyButton, CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
+import {
+  CopyButton,
+  CryptoSelector,
+  CryptoValue,
+  FiatSelector,
+  FiatValue,
+  FormattedDateTime,
+} from 'containers/UI'
 import { Truncate } from 'components/Util'
 import Lightning from 'components/Icon/Lightning'
 import Route from './Route'
@@ -78,15 +85,10 @@ class PaymentModal extends React.PureComponent {
             right={
               <>
                 <Text>
-                  <FormattedDate
-                    day="2-digit"
-                    month="long"
-                    value={item.creationDate * 1000}
-                    year="numeric"
-                  />
+                  <FormattedDateTime format="date" month="long" value={item.creationDate * 1000} />
                 </Text>
                 <Text>
-                  <FormattedTime value={item.creationDate * 1000} />
+                  <FormattedDateTime format="time" value={item.creationDate * 1000} />
                 </Text>
               </>
             }

renderer/components/Activity/Row.js

@@ -1,15 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedDate } from 'react-intl'
 import { Box } from 'rebass/styled-components'
 import { Bar, Heading } from 'components/UI'
+import { FormattedDateTime } from 'containers/UI'
 
 const Row = ({ style, item, RowComponent }) => (
   <div style={style}>
     {item.title ? (
       <Box mt={4} pl={4}>
         <Heading.H4 fontWeight="normal">
-          <FormattedDate day="2-digit" month="short" value={item.title} year="numeric" />
+          <FormattedDateTime format="date" month="short" value={item.title} />
         </Heading.H4>
         <Bar my={1} />
       </Box>

renderer/components/Activity/Transaction/Transaction.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import findLast from 'lodash/findLast'
-import { FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import config from 'config'
 import { intlShape } from '@zap/i18n'
 import { CoinBig } from '@zap/utils/coin'
 import { Message, Text } from 'components/UI'
 import ChainLink from 'components/Icon/ChainLink'
-import { CryptoValue, FiatValue } from 'containers/UI'
+import { CryptoValue, FiatValue, FormattedDateTime } from 'containers/UI'
 import ErrorLink from '../ErrorLink'
 import messages from './messages'
 
@@ -45,7 +45,7 @@ const Transaction = ({
     if (CoinBig(numConfirmations).gt(confirmed)) {
       return (
         <Text color="gray" fontSize="xs" fontWeight="normal">
-          <FormattedTime value={activity.timeStamp * 1000} />
+          <FormattedDateTime format="time" value={activity.timeStamp * 1000} />
         </Text>
       )
     }

renderer/components/Activity/TransactionModal/TransactionModal.js

@@ -1,19 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import get from 'lodash/get'
-import {
-  FormattedDate,
-  FormattedTime,
-  FormattedMessage,
-  FormattedNumber,
-  injectIntl,
-} from 'react-intl'
+import { FormattedMessage, FormattedNumber, injectIntl } from 'react-intl'
 import { Flex } from 'rebass/styled-components'
 import { CoinBig } from '@zap/utils/coin'
 import { intlShape } from '@zap/i18n'
 import blockExplorer from '@zap/utils/blockExplorer'
 import { Bar, DataRow, Header, Link, Panel, Span, Text, Button } from 'components/UI'
-import { CopyButton, CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
+import {
+  CopyButton,
+  CryptoSelector,
+  CryptoValue,
+  FiatSelector,
+  FiatValue,
+  FormattedDateTime,
+} from 'containers/UI'
 import { Truncate } from 'components/Util'
 import Onchain from 'components/Icon/Onchain'
 import Padlock from 'components/Icon/Padlock'
@@ -127,15 +128,14 @@ class TransactionModal extends React.PureComponent {
                   item.numConfirmations ? (
                     <>
                       <Text>
-                        <FormattedDate
-                          day="2-digit"
+                        <FormattedDateTime
+                          format="date"
                           month="long"
                           value={item.timeStamp * 1000}
-                          year="numeric"
                         />
                       </Text>
                       <Text>
-                        <FormattedTime value={item.timeStamp * 1000} />
+                        <FormattedDateTime format="time" value={item.timeStamp * 1000} />
                       </Text>
                     </>
                   ) : (

renderer/components/Channels/ChannelData.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { FormattedDate, FormattedTime, FormattedMessage, injectIntl } from 'react-intl'
+import { FormattedMessage, injectIntl } from 'react-intl'
 import styled from 'styled-components'
 import { opacity } from 'styled-system'
 import { Box as BaseBox, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import blockExplorer from '@zap/utils/blockExplorer'
 import { Bar, DataRow, Link, Text } from 'components/UI'
 import { Truncate } from 'components/Util'
-import { CopyButton, CryptoValue } from 'containers/UI'
+import { CopyButton, CryptoValue, FormattedDateTime } from 'containers/UI'
 import { CHANNEL_DATA_VIEW_MODE_BASIC, CHANNEL_DATA_VIEW_MODE_FULL } from './constants'
 import messages from './messages'
 
@@ -62,13 +62,7 @@ const ChannelData = ({ channel, cryptoUnitName, intl, networkInfo, viewMode, ...
       body: <FormattedMessage {...messages.funding_date_description} />,
       value: (
         <Text>
-          <FormattedDate
-            day="2-digit"
-            month="short"
-            value={fundingTxTimestamp * 1000}
-            year="numeric"
-          />{' '}
-          <FormattedTime value={fundingTxTimestamp * 1000} />
+          <FormattedDateTime month="short" value={fundingTxTimestamp * 1000} />
         </Text>
       ),
     }),

renderer/components/Request/RequestSummary.js

@@ -1,10 +1,16 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { Box, Flex } from 'rebass/styled-components'
-import { FormattedMessage, FormattedTime, useIntl } from 'react-intl'
+import { FormattedMessage, useIntl } from 'react-intl'
 import copy from 'copy-to-clipboard'
 import { Bar, DataRow, Button, QRCode, Text, Countdown } from 'components/UI'
-import { CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
+import {
+  CryptoSelector,
+  CryptoValue,
+  FiatSelector,
+  FiatValue,
+  FormattedDateTime,
+} from 'containers/UI'
 import { Truncate } from 'components/Util'
 import RequestSettlePrompt from './RequestSettlePrompt'
 import messages from './messages'
@@ -99,9 +105,7 @@ const RequestSummary = ({
 
       <DataRow
         left={<FormattedMessage {...messages.created} />}
-        right={
-          <FormattedTime day="2-digit" month="long" value={creationDate * 1000} year="numeric" />
-        }
+        right={<FormattedDateTime month="long" value={creationDate * 1000} />}
       />
 
       <Bar variant="light" />
@@ -213,12 +217,7 @@ const RequestSummary = ({
                 >
                   <FormattedMessage {...messages.paid} />
                   <br />
-                  <FormattedTime
-                    day="2-digit"
-                    month="long"
-                    value={settleDate * 1000}
-                    year="numeric"
-                  />
+                  <FormattedDateTime month="long" value={settleDate * 1000} />
                 </Text>
               ) : (
                 <Text color={getStatusColor()} fontWeight="light">

renderer/components/Settings/SettingsFieldsGeneral.js

@@ -26,6 +26,15 @@ const themeMessageMapper = key => {
   return filters[key]
 }
 
+const displayModeItems = [{ key: '12hour' }, { key: '24hour' }]
+const displayModeMessageMapper = key => {
+  const filters = {
+    '12hour': messages.timeDisplayMode_option_12hour,
+    '24hour': messages.timeDisplayMode_option_24hour,
+  }
+  return filters[key]
+}
+
 const SettingsFieldsGeneral = ({ currentConfig }) => {
   return (
     <>
@@ -72,6 +81,21 @@ const SettingsFieldsGeneral = ({ currentConfig }) => {
 
       <Bar variant="light" />
 
+      <DataRow
+        left={<FieldLabel itemKey="timeDisplayMode" />}
+        right={
+          <Select
+            field="timeDisplayMode"
+            highlightOnValid={false}
+            initialValue={currentConfig.timeDisplayMode}
+            items={displayModeItems}
+            messageMapper={displayModeMessageMapper}
+          />
+        }
+      />
+
+      <Bar variant="light" />
+
       <DataRow
         left={<FieldLabel itemKey="autoupdate.active" />}
         right={<Toggle field="autoupdate.active" initialValue={currentConfig.autoupdate.active} />}

renderer/components/Settings/messages.js

@@ -63,4 +63,8 @@ export default defineMessages({
   payments_maxParts_label: 'Payment parts',
   payments_maxParts_description:
     'Maximum number of partial payments that may be used to send a payment.',
+  timeDisplayMode_label: 'Time display mode',
+  timeDisplayMode_description: 'Your preferred time display mode.',
+  timeDisplayMode_option_12hour: '12 Hour',
+  timeDisplayMode_option_24hour: '24 Hour',
 })

renderer/containers/UI/FormattedDateTime.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { FormattedDate, FormattedTime } from 'react-intl'
+import { settingsSelectors } from 'reducers/settings'
+
+const mapStateToProps = state => ({
+  timeDisplayMode: settingsSelectors.currentConfig(state).timeDisplayMode,
+})
+
+const FormattedDateTime = ({ timeDisplayMode = '12hour', format, month = 'long', value }) => {
+  const is12Hour = timeDisplayMode === '12hour'
+
+  switch (format) {
+    case 'date':
+      return <FormattedDate day="2-digit" month={month} value={value} year="numeric" />
+    case 'time':
+      return <FormattedTime hour12={is12Hour} value={value} />
+    default:
+      return (
+        <FormattedDate
+          day="2-digit"
+          hour="numeric"
+          hour12={is12Hour}
+          minute="numeric"
+          month={month}
+          value={value}
+          year="numeric"
+        />
+      )
+  }
+}
+
+FormattedDateTime.propTypes = {
+  format: PropTypes.oneOf(['date', 'time']),
+  month: PropTypes.string,
+  timeDisplayMode: PropTypes.oneOf(['12hour', '24hour']),
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])
+    .isRequired,
+}
+
+export default connect(mapStateToProps)(FormattedDateTime)

renderer/containers/UI/index.js

@@ -1,6 +1,7 @@
 export CopyButton from './CopyButton'
 export CryptoSelector from './CryptoSelector'
 export CryptoValue from './CryptoValue'
+export FormattedDateTime from './FormattedDateTime'
 export FiatSelector from './FiatSelector'
 export FiatValue from './FiatValue'
 export CryptoValueSelector from './CryptoValueSelector'

translations/af-ZA.json

@@ -653,6 +653,10 @@
   "components.Settings.theme_label": "",
   "components.Settings.theme_option_dark": "",
   "components.Settings.theme_option_light": "",
+  "components.Settings.timeDisplayMode_description": "",
+  "components.Settings.timeDisplayMode_label": "",
+  "components.Settings.timeDisplayMode_option_12hour": "",
+  "components.Settings.timeDisplayMode_option_24hour": "",
   "components.Syncing.address_copied_notification_description": "",
   "components.Syncing.address_copied_notification_title": "",
   "components.Syncing.block_progress": "",

translations/ar-SA.json

@@ -653,6 +653,10 @@
   "components.Settings.theme_label": "",
   "components.Settings.theme_option_dark": "",
   "components.Settings.theme_option_light": "",
+  "components.Settings.timeDisplayMode_description": "",
+  "components.Settings.timeDisplayMode_label": "",
+  "components.Settings.timeDisplayMode_option_12hour": "",
+  "components.Settings.timeDisplayMode_option_24hour": "",
   "components.Syncing.address_copied_notification_description": "",
   "components.Syncing.address_copied_notification_title": "",
   "components.Syncing.block_progress": "",

translations/bg-BG.json

@@ -653,6 +653,10 @@
   "components.Settings.theme_label": "Тема",
   "components.Settings.theme_option_dark": "Тъмна",
   "components.Settings.theme_option_light": "Светла",
+  "components.Settings.timeDisplayMode_description": "",
+  "components.Settings.timeDisplayMode_label": "",
+  "components.Settings.timeDisplayMode_option_12hour": "",
+  "components.Settings.timeDisplayMode_option_24hour": "",
   "components.Syncing.address_copied_notification_description": "Адресът за плащането е копиран в буферната ви памет",
   "components.Syncing.address_copied_notification_title": "Адресът е копиран",
   "components.Syncing.block_progress": "Блок {currentBlock} от {totalBlocks}",