@plone/volto 14.6.0 → 14.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 14.7.0 (2022-01-28)
+
+### Feature
+
+- Add `<FormattedDate>` and `<FormattedRelativeDate>` components. Check their Storybook stories for details. This is part of ongoing work to minimize the use of 'deprecated' momentjs. @sneridagh @tiberiuichim
+
+### Internal
+
+- Upgrade jest to latest release, 27 major. @tiberiuichim
+- Lazyload momentjs. `parseDateTime` helper now requires passing the momentjs library @tiberiuichim
+
 ## 14.6.0 (2022-01-27)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.6.0",
+  "version": "14.7.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -35,7 +35,7 @@
     "build": "razzle build",
     "build-spa": "razzle build --type=spa",
     "test": "razzle test --env=jest-environment-jsdom-sixteen --maxWorkers=50%",
-    "test:ci": "CI=true razzle test --env=jest-environment-jsdom-sixteen",
+    "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test --env=jest-environment-jsdom-sixteen",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "start:prod": "NODE_ENV=production node build/server.js",
@@ -414,7 +414,9 @@
     "@storybook/react": "^6.3.0",
     "babel-loader": "^8.1.0",
     "crypto-random-string": "3.2.0",
+    "full-icu": "1.4.0",
     "identity-obj-proxy": "3.0.0",
+    "jest": "27.4.5",
     "jest-environment-jsdom-sixteen": "1.0.3",
     "react-is": "^16.13.1",
     "tmp": "0.2.1",

package/src/components/index.js

@@ -198,5 +198,7 @@ export ToCSettingsSchema from '@plone/volto/components/manage/Blocks/ToC/Schema'
 
 export MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 export ContentMetadataTags from '@plone/volto/components/theme/ContentMetadataTags/ContentMetadataTags';
+export FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
+export FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate';
 
 export App from '@plone/volto/components/theme/App/App';

package/src/components/manage/Contents/Contents.test.jsx

@@ -24,13 +24,6 @@ jest.mock('./ContentsUploadModal', () =>
   jest.fn(() => <div className="UploadModal" />),
 );
 
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-    fromNow: jest.fn(() => 'a few seconds ago'),
-  })),
-);
-
 describe('Contents', () => {
   it('renders a folder contents view component', () => {
     const store = mockStore({

package/src/components/manage/Contents/ContentsItem.jsx

@@ -8,9 +8,8 @@ import { Button, Dropdown, Table } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import moment from 'moment';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { Icon, Circle } from '@plone/volto/components';
+import { Circle, FormattedDate, Icon } from '@plone/volto/components';
 import { getContentIcon } from '@plone/volto/helpers';
 import moreSVG from '@plone/volto/icons/more.svg';
 import checkboxUncheckedSVG from '@plone/volto/icons/checkbox-unchecked.svg';
@@ -48,6 +47,10 @@ const messages = defineMessages({
     id: 'no workflow state',
     defaultMessage: 'No workflow state',
   },
+  none: {
+    id: 'None',
+    defaultMessage: 'None',
+  },
 });
 
 function getColor(string) {
@@ -187,21 +190,13 @@ export const ContentsItemComponent = ({
               </div>
             )}
             {index.type === 'date' && (
-              <span
-                title={
-                  item[index.id] !== 'None' ? (
-                    moment(item[index.id]).format('LLLL')
-                  ) : (
-                    <FormattedMessage id="None" defaultMessage="None" />
-                  )
-                }
-              >
+              <>
                 {item[index.id] !== 'None' ? (
-                  moment(item[index.id]).format('L')
+                  <FormattedDate date={item[index.id]} />
                 ) : (
-                  <FormattedMessage id="None" defaultMessage="None" />
+                  intl.formatMessage(messages.none)
                 )}
-              </span>
+              </>
             )}
             {index.type === 'array' && (
               <span>{item[index.id]?.join(', ')}</span>

package/src/components/manage/Contents/ContentsUploadModal.jsx

@@ -20,10 +20,10 @@ import {
 } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 import { concat, filter, map } from 'lodash';
-import moment from 'moment';
 import filesize from 'filesize';
 import { readAsDataURL } from 'promise-file-reader';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedRelativeDate } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
 
 const Dropzone = loadable(() => import('react-dropzone'));
@@ -180,8 +180,6 @@ class ContentsUploadModal extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    moment.locale(this.props.intl.locale);
-
     return (
       this.props.open && (
         <Modal open={this.props.open}>
@@ -269,7 +267,7 @@ class ContentsUploadModal extends Component {
                     <Table.Row className="upload-row" key={file.name}>
                       <Table.Cell>{file.name}</Table.Cell>
                       <Table.Cell>
-                        {moment(file.lastModifiedDate).fromNow()}
+                        <FormattedRelativeDate date={file.lastModifiedDate} />
                       </Table.Cell>
                       <Table.Cell>
                         {filesize(file.size, { round: 0 })}

package/src/components/manage/Controlpanels/ModerateComments.jsx

@@ -11,11 +11,15 @@ import { Link } from 'react-router-dom';
 import { getParentUrl, Helmet } from '@plone/volto/helpers';
 import { Portal } from 'react-portal';
 import { Container, Button, Table } from 'semantic-ui-react';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import { deleteComment, searchContent } from '@plone/volto/actions';
-import { CommentEditModal, Icon, Toolbar } from '@plone/volto/components';
+import {
+  CommentEditModal,
+  FormattedRelativeDate,
+  Icon,
+  Toolbar,
+} from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -230,9 +234,7 @@ class ModerateComments extends Component {
                     <Table.Row key={item['@id']}>
                       <Table.Cell>{item.author_name}</Table.Cell>
                       <Table.Cell>
-                        <span title={moment(item.creation_date).format('LLLL')}>
-                          {moment(item.creation_date).fromNow()}
-                        </span>
+                        <FormattedRelativeDate date={item.creation_date} />
                       </Table.Cell>
                       <Table.Cell>{item.text.data}</Table.Cell>
                       <Table.Cell>

package/src/components/manage/Diff/Diff.jsx

@@ -12,7 +12,6 @@ import { filter, isEqual, map } from 'lodash';
 import { Container, Button, Dropdown, Grid, Table } from 'semantic-ui-react';
 import { Link, withRouter } from 'react-router-dom';
 import { Portal } from 'react-portal';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
 
@@ -23,7 +22,12 @@ import {
   getBlocksLayoutFieldname,
   hasBlocksData,
 } from '@plone/volto/helpers';
-import { DiffField, Icon, Toolbar } from '@plone/volto/components';
+import {
+  DiffField,
+  FormattedDate,
+  Icon,
+  Toolbar,
+} from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -189,9 +193,13 @@ class Diff extends Component {
     const versions = map(
       filter(this.props.historyEntries, (entry) => 'version' in entry),
       (entry, index) => ({
-        text: `${index === 0 ? 'Current' : entry.version} (${moment(
-          entry.time,
-        ).format('LLLL')}, ${entry.actor.fullname})`,
+        text: (
+          <>
+            {index === 0 ? 'Current' : entry.version}&nbsp;(
+            <FormattedDate date={entry.time} long className="text" />, &nbsp;
+            {entry.actor.fullname})
+          </>
+        ),
         value: `${entry.version}`,
         key: `${entry.version}`,
       }),

package/src/components/manage/Diff/Diff.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -12,11 +11,6 @@ const mockStore = configureStore();
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-  })),
-);
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(

package/src/components/manage/Diff/DiffField.jsx

@@ -8,11 +8,11 @@ import React from 'react';
 import { join, map } from 'lodash';
 import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
-import moment from 'moment';
 import ReactDOMServer from 'react-dom/server';
 import { Provider } from 'react-intl-redux';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router';
+import { useSelector } from 'react-redux';
 
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
@@ -44,6 +44,11 @@ const DiffField = ({
   schema,
   diffLib,
 }) => {
+  const language = useSelector((state) => state.intl.locale);
+  const readable_date_format = {
+    dateStyle: 'full',
+    timeStyle: 'short',
+  };
   const diffWords = (oneStr, twoStr) => {
     return diffLib.diffWords(String(oneStr), String(twoStr));
   };
@@ -56,8 +61,12 @@ const DiffField = ({
         break;
       case 'datetime':
         parts = diffWords(
-          moment(one).format('LLLL'),
-          moment(two).format('LLLL'),
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(one),
+          ),
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(two),
+          ),
         );
         break;
       case 'json':

package/src/components/manage/Diff/DiffField.test.jsx

@@ -5,12 +5,6 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 import DiffField from './DiffField';
 
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-  })),
-);
-
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>

package/src/components/manage/History/History.jsx

@@ -12,10 +12,13 @@ import { compose } from 'redux';
 import { Container, Dropdown, Icon, Segment, Table } from 'semantic-ui-react';
 import { concat, map, reverse } from 'lodash';
 import { Portal } from 'react-portal';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
-import { Icon as IconNext, Toolbar } from '@plone/volto/components';
+import {
+  FormattedRelativeDate,
+  Icon as IconNext,
+  Toolbar,
+} from '@plone/volto/components';
 import { getHistory, revertHistory } from '@plone/volto/actions';
 import { getBaseUrl } from '@plone/volto/helpers';
 
@@ -206,9 +209,7 @@ class History extends Component {
                   </Table.Cell>
                   <Table.Cell>{entry.actor.fullname}</Table.Cell>
                   <Table.Cell>
-                    <span title={moment(entry.time).format('LLLL')}>
-                      {moment(entry.time).fromNow()}
-                    </span>
+                    <FormattedRelativeDate date={entry.time} />
                   </Table.Cell>
                   <Table.Cell>{entry.comments}</Table.Cell>
                   <Table.Cell>

package/src/components/manage/History/History.test.jsx

@@ -3,21 +3,26 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
+import FakeTimers from '@sinonjs/fake-timers';
+
 import History from './History';
 
 const mockStore = configureStore();
-
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-    fromNow: jest.fn(() => 'a few seconds ago'),
-  })),
-);
+
+const FIXED_SYSTEM_TIME = '2017-04-23T15:38:00.000Z';
 
 describe('History', () => {
+  let clock;
+  beforeEach(() => {
+    clock = FakeTimers.install({ now: Date.parse(FIXED_SYSTEM_TIME) });
+  });
+  afterEach(() => {
+    clock.uninstall();
+  });
+
   it('renders a history component', () => {
     const store = mockStore({
       history: {

package/src/components/manage/Widgets/DatetimeWidget.jsx

@@ -93,7 +93,7 @@ export class DatetimeWidgetComponent extends Component {
    */
   constructor(props) {
     super(props);
-    const moment = props.moment.default;
+    this.moment = props.moment.default;
 
     this.state = {
       focused: false,
@@ -102,12 +102,19 @@ export class DatetimeWidgetComponent extends Component {
         parseDateTime(
           this.props.intl.locale,
           this.props.value,
-        )?.toISOString() === moment().utc().toISOString(),
+          undefined,
+          this.moment,
+        )?.toISOString() === this.moment().utc().toISOString(),
     };
   }
 
   getInternalValue() {
-    return parseDateTime(this.props.intl.locale, this.props.value);
+    return parseDateTime(
+      this.props.intl.locale,
+      this.props.value,
+      undefined,
+      this.moment,
+    );
   }
 
   getDateOnly() {

package/src/components/manage/Widgets/DatetimeWidget.test.jsx

@@ -1,4 +1,3 @@
-import moment from 'moment';
 import React from 'react';
 import { Provider } from 'react-intl-redux';
 import configureStore from 'redux-mock-store';
@@ -20,6 +19,7 @@ test('renders a datetime widget component', async () => {
       messages: {},
     },
   });
+  const isoDate = new Date('2019-10-21').toISOString();
   const { container } = render(
     <Provider store={store}>
       <DatetimeWidget
@@ -27,7 +27,7 @@ test('renders a datetime widget component', async () => {
         title="My field"
         fieldSet="default"
         onChange={() => {}}
-        value={moment('2019-10-21').toISOString()}
+        value={isoDate}
       />
     </Provider>,
   );

package/src/components/manage/Widgets/RecurrenceWidget/ByDayField.jsx

@@ -6,17 +6,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Form, Grid, Button } from 'semantic-ui-react';
-import moment from 'moment';
 import { Days } from './Utils';
 import { useIntl } from 'react-intl';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 /**
  * ByDayField component class.
  * @function ByDayField
  * @returns {string} Markup of the component.
  */
-const ByDayField = ({ label, value, onChange }) => {
+const ByDayField = ({ label, value, onChange, moment: momentlib }) => {
   const intl = useIntl();
+  const moment = momentlib.default;
   moment.locale(intl.locale);
 
   const toggleWeekDay = (dayName) => {
@@ -84,4 +85,4 @@ ByDayField.defaultProps = {
   onChange: null,
 };
 
-export default ByDayField;
+export default injectLazyLibs(['moment'])(ByDayField);

package/src/components/manage/Widgets/RecurrenceWidget/MonthOfTheYearField.jsx

@@ -6,17 +6,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import moment from 'moment';
 import { useIntl } from 'react-intl';
 import { Form } from 'semantic-ui-react';
 import SelectInput from './SelectInput';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 /**
  * MonthOfTheYearField component class.
  * @function MonthOfTheYearField
  * @returns {string} Markup of the component.
  */
-const MonthOfTheYearField = ({ value, disabled, inline, onChange }) => {
+const MonthOfTheYearField = ({
+  value,
+  disabled,
+  inline,
+  onChange,
+  moment: momentlib,
+}) => {
+  const moment = momentlib.default;
   const intl = useIntl();
   moment.locale(intl.locale);
   const monthList = [
@@ -63,4 +70,4 @@ MonthOfTheYearField.defaultProps = {
   onChange: null,
 };
 
-export default MonthOfTheYearField;
+export default injectLazyLibs(['moment'])(MonthOfTheYearField);

package/src/components/manage/Widgets/RecurrenceWidget/Occurences.jsx

@@ -6,12 +6,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import moment from 'moment';
 import cx from 'classnames';
 import { List, Button, Header, Label } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import addSVG from '@plone/volto/icons/circle-plus.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { toISOString } from './Utils';
 
@@ -46,7 +46,7 @@ const messages = defineMessages({
   },
 });
 
-const formatDate = (d) => {
+const formatDate = (d, moment) => {
   const m = moment(d);
   return m.format('dddd') + ', ' + m.format('LL');
 };
@@ -56,14 +56,16 @@ const formatDate = (d) => {
  * @function Occurences
  * @returns {string} Markup of the component.
  */
-const Occurences = ({
+const Occurences_ = ({
   rruleSet,
   exclude,
   undoExclude,
   intl,
   showTitle,
   editOccurences,
+  moment: momentlib,
 }) => {
+  const moment = momentlib.default;
   moment.locale(intl.locale);
   let all = [];
   const isExcluded = (date) => {
@@ -154,7 +156,7 @@ const Occurences = ({
                 </List.Content>
               )}
               <List.Content className={cx({ excluded: excluded })}>
-                {formatDate(date)}
+                {formatDate(date, moment)}
                 {isAdditional(date) && (
                   <Label
                     pointing="left"
@@ -182,6 +184,8 @@ const Occurences = ({
   );
 };
 
+export const Occurences = injectLazyLibs(['moment'])(Occurences_);
+
 /**
  * Property types.
  * @property {Object} propTypes Property types.

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import { compose } from 'redux';
 import { RRule, RRuleSet, rrulestr } from 'rrule';
 
 import cx from 'classnames';
@@ -22,6 +22,7 @@ import {
 } from 'semantic-ui-react';
 
 import { SelectWidget, Icon, DatetimeWidget } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import editingSVG from '@plone/volto/icons/editing.svg';
@@ -179,7 +180,8 @@ class RecurrenceWidget extends Component {
   constructor(props, intl) {
     super(props);
 
-    moment.locale(this.props.intl.locale);
+    this.moment = this.props.moment.default;
+    this.moment.locale(this.props.intl.locale);
 
     let rruleSet = this.props.value
       ? rrulestr(props.value, {
@@ -197,7 +199,7 @@ class RecurrenceWidget extends Component {
       open: false,
       rruleSet: rruleSet,
       formValues: this.getFormValues(rruleSet),
-      RRULE_LANGUAGE: rrulei18n(this.props.intl),
+      RRULE_LANGUAGE: rrulei18n(this.props.intl, this.moment),
     };
   }
 
@@ -257,8 +259,8 @@ class RecurrenceWidget extends Component {
 
   getUTCDate = (date) => {
     return date.match(/T(.)*(-|\+|Z)/g)
-      ? moment(date).utc()
-      : moment(`${date}Z`).utc();
+      ? this.moment(date).utc()
+      : this.moment(`${date}Z`).utc();
   };
 
   show = (dimmer) => () => {
@@ -412,7 +414,7 @@ class RecurrenceWidget extends Component {
           }
           break;
         case 'until':
-          value = value ? moment(new Date(value)).utc().toDate() : null;
+          value = value ? this.moment(new Date(value)).utc().toDate() : null;
           break;
         default:
           break;
@@ -437,7 +439,7 @@ class RecurrenceWidget extends Component {
         ? value
         : rruleSet.dtstart()
         ? rruleSet.dtstart()
-        : moment().utc().toDate();
+        : this.moment().utc().toDate();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 
@@ -457,6 +459,7 @@ class RecurrenceWidget extends Component {
   };
 
   getDefaultUntil = (freq) => {
+    const moment = this.moment;
     var end = this.props.formData?.end
       ? toISOString(this.getUTCDate(this.props.formData.end).toDate())
       : null;
@@ -495,18 +498,19 @@ class RecurrenceWidget extends Component {
   changeField = (formValues, field, value) => {
     //  git p.log('field', field, 'value', value);
     //get weekday from state.
-    var byweekday =
+    const moment = this.moment;
+    const byweekday =
       this.state?.rruleSet?.rrules().length > 0
         ? this.state.rruleSet.rrules()[0].origOptions.byweekday
         : null;
-    var currWeekday = this.getWeekday(moment().day() - 1);
-    var currMonth = moment().month() + 1;
+    const currWeekday = this.getWeekday(moment().day() - 1);
+    const currMonth = moment().month() + 1;
 
-    var startMonth = this.props.formData?.start
+    const startMonth = this.props.formData?.start
       ? moment(this.props.formData.start).month() + 1
       : currMonth;
 
-    var startWeekday = this.props.formData?.start
+    const startWeekday = this.props.formData?.start
       ? this.getWeekday(moment(this.props.formData.start).day() - 1)
       : currWeekday;
     formValues[field] = value;
@@ -687,6 +691,7 @@ class RecurrenceWidget extends Component {
   };
 
   addDate = (date) => {
+    const moment = this.moment;
     let all = concat(this.state.rruleSet.all(), this.state.rruleSet.exdates());
 
     var simpleDate = moment(new Date(date)).startOf('day').toDate().getTime();
@@ -957,4 +962,7 @@ class RecurrenceWidget extends Component {
   }
 }
 
-export default injectIntl(RecurrenceWidget);
+export default compose(
+  injectLazyLibs(['moment']),
+  injectIntl,
+)(RecurrenceWidget);

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.test.jsx

@@ -6,6 +6,12 @@ import { waitFor } from '@testing-library/react';
 
 import RecurrenceWidget from './RecurrenceWidget';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 const mockStore = configureStore();
 
 test('renders a recurrence widget component', async () => {

package/src/components/manage/Widgets/RecurrenceWidget/Utils.js

@@ -1,5 +1,4 @@
 import { RRule } from 'rrule';
-import moment from 'moment';
 import { defineMessages } from 'react-intl';
 
 export const Days = {
@@ -43,7 +42,7 @@ export const toISOString = (date) => {
   return date.toISOString().split('T')[0];
 };
 
-export const rrulei18n = (intl) => {
+export const rrulei18n = (intl, moment) => {
   moment.locale(intl.locale);
 
   const messages = defineMessages({