Merge pull request #4855 from coopcycle/feature/invoicing-improvements

Minor invoicing UX improvements

Author: alexsegura

cypress/e2e/invoicing/export_data_for_invoicing.cy.js

@@ -14,9 +14,11 @@ context('Invoicing (role: admin)', () => {
     cy.login('admin', '12345678')
   })
 
-  it('prepare data for invoicing', function () {
+  it('show data for invoicing using custom date picker', function () {
     cy.visit('/admin/invoicing')
 
+    cy.get('[data-testid="invoicing.toggleRangePicker"]').click()
+
     // Choose 1 month
     cy.get('.ant-picker-input-active > input').click()
     cy.get(

js/app/admin/invoicing/components/OrdersTable/index.js

@@ -130,6 +130,7 @@ export default function OrdersTable({
       pagination={{
         pageSize,
         total,
+        showSizeChanger: true,
       }}
       onChange={pagination => {
         setCurrentPage(pagination.current)

js/app/admin/invoicing/components/OrdersToInvoice/RangePicker.js

@@ -0,0 +1,44 @@
+import React from 'react'
+import { DatePicker } from 'antd'
+import { useTranslation } from 'react-i18next'
+
+export default function RangePicker({ setDateRange }) {
+  const [isComplexPicker, setIsComplexPicker] = React.useState(false)
+
+  const { t } = useTranslation()
+
+  const title = isComplexPicker
+    ? t('ADMIN_ORDERS_TO_INVOICE_FILTER_RANGE_SIMPLE')
+    : t('ADMIN_ORDERS_TO_INVOICE_FILTER_RANGE_COMPLEX')
+
+  return (
+    <div className="d-flex flex-column">
+      {t('ADMIN_ORDERS_TO_INVOICE_FILTER_RANGE')}
+      {isComplexPicker ? (
+        <DatePicker.RangePicker
+          onChange={dates => {
+            setDateRange(dates)
+          }}
+        />
+      ) : (
+        <DatePicker
+          picker="month"
+          onChange={date => {
+            const range = [
+              date.clone().local().startOf('month'),
+              date.clone().local().endOf('month'),
+            ]
+            setDateRange(range)
+          }}
+        />
+      )}
+      <a
+        className="text-secondary"
+        title={title}
+        data-testid="invoicing.toggleRangePicker"
+        onClick={() => setIsComplexPicker(!isComplexPicker)}>
+        {title}
+      </a>
+    </div>
+  )
+}

js/app/admin/invoicing/components/OrdersToInvoice/index.js

@@ -1,12 +1,12 @@
 import React, { useMemo, useState } from 'react'
 import Modal from 'react-modal'
 import { useTranslation } from 'react-i18next'
-import { DatePicker } from 'antd'
 
 import Button from '../../../../components/core/Button'
 import { prepareParams } from '../../redux/actions'
 import ExportModalContent from '../ExportModalContent'
 import OrganizationsTable from '../OrganizationsTable'
+import RangePicker from './RangePicker'
 
 const ordersStates = ['new', 'accepted', 'fulfilled']
 
@@ -45,11 +45,10 @@ export default () => {
       <h5>{t('ADMIN_ORDERS_TO_INVOICE_TITLE')}</h5>
       <div className="d-flex" style={{ marginTop: '12px', gap: '24px' }}>
         {t('ADMIN_DASHBOARD_NAV_FILTERS')}:
+        <RangePicker setDateRange={setDateRange} />
         <div className="d-flex flex-column">
-          {t('ADMIN_ORDERS_TO_INVOICE_FILTER_RANGE')}
-          <DatePicker.RangePicker onChange={setDateRange} />
-        </div>
-        <div className="d-flex flex-column justify-content-end">
+          {/*invisible text is used to align the Refresh button*/}
+          <span style={{ visibility: 'hidden' }}>{'invisible text'}</span>
           <Button
             testID="invoicing.refresh"
             primary

js/app/admin/invoicing/components/OrganizationsTable/index.js

@@ -113,6 +113,7 @@ export default function OrganizationsTable({
       pagination={{
         pageSize,
         total,
+        showSizeChanger: true,
       }}
       onChange={pagination => {
         reloadData(pagination.current, pagination.pageSize)

js/app/i18n/locales/en.json

@@ -198,6 +198,8 @@
         "ADMIN_INVOICING_TITLE": "Invoicing [PREVIEW]",
         "ADMIN_ORDERS_TO_INVOICE_TITLE": "Orders to invoice",
         "ADMIN_ORDERS_TO_INVOICE_FILTER_RANGE": "Period",
+        "ADMIN_ORDERS_TO_INVOICE_FILTER_RANGE_SIMPLE": "Select month",
+        "ADMIN_ORDERS_TO_INVOICE_FILTER_RANGE_COMPLEX": "Select custom period",
         "ADMIN_ORDERS_TO_INVOICE_REFRESH": "Refresh",
         "ADMIN_ORDERS_TO_INVOICE_DOWNLOAD": "Download",
         "ADMIN_ORDERS_TO_INVOICE_ORGANIZATION_LABEL": "Organization (number of orders)",