feat: apply new cards design system.

feat: empty status datatables.
fix: edit account.

client/src/containers/Customers/Customer.js

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
+import { DashboardCard } from 'components';
 import CustomerForm from 'containers/Customers/CustomerForm';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 
@@ -40,12 +41,7 @@ function Customer({
     requestFetchCurrencies(),
   );
 
-  const handleFormSubmit = useCallback(
-    (payload) => {
-      
-    },
-    [history],
-  );
+  const handleFormSubmit = useCallback((payload) => {}, [history]);
 
   const handleCancel = useCallback(() => {
     history.goBack();
@@ -60,11 +56,13 @@ function Customer({
       }
       name={'customer-form'}
     >
-      <CustomerForm
-        onFormSubmit={handleFormSubmit}
-        customerId={id}
-        onCancelForm={handleCancel}
-      />
+      <DashboardCard page>
+        <CustomerForm
+          onFormSubmit={handleFormSubmit}
+          customerId={id}
+          onCancelForm={handleCancel}
+        />
+      </DashboardCard>
     </DashboardInsider>
   );
 }

client/src/containers/Customers/CustomerForm.js

@@ -172,9 +172,9 @@ function CustomerForm({
     const onSuccess = () => {
       AppToaster.show({
         message: formatMessage({
-          id: customer ?
-            'the_item_customer_has_been_successfully_edited' :
-            'the_customer_has_been_successfully_created',
+          id: customer
+            ? 'the_item_customer_has_been_successfully_edited'
+            : 'the_customer_has_been_successfully_created',
         }),
         intent: Intent.SUCCESS,
       });
@@ -191,7 +191,9 @@ function CustomerForm({
     };
 
     if (customer && customer.id) {
-      requestEditCustomer(customer.id, formValues).then(onSuccess).catch(onError);
+      requestEditCustomer(customer.id, formValues)
+        .then(onSuccess)
+        .catch(onError);
     } else {
       requestSubmitCustomer(formValues).then(onSuccess).catch(onError);
     }
@@ -239,14 +241,12 @@ function CustomerForm({
       >
         {({ isSubmitting }) => (
           <Form>
-            <div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
-              <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
-                <CustomerFormPrimarySection />
-              </div>
+            <div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
+              <CustomerFormPrimarySection />
+            </div>
 
-              <div className={'page-form__after-priamry-section'}>
-                <CustomerFormAfterPrimarySection />
-              </div>
+            <div className={'page-form__after-priamry-section'}>
+              <CustomerFormAfterPrimarySection />
             </div>
 
             <div className={classNames(CLASSES.PAGE_FORM_TABS)}>

client/src/containers/Customers/CustomerTable.js

@@ -10,9 +10,11 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { useIsValuePassed } from 'hooks';
+import classNames from 'classnames';
 
 import CustomersEmptyStatus from './CustomersEmptyStatus';
 import { DataTable, Icon, Money, Choose, LoadingIndicator } from 'components';
+import { CLASSES } from 'common/classes';
 
 import withCustomers from './withCustomers';
 import withCustomersActions from './withCustomersActions';
@@ -186,42 +188,41 @@ const CustomerTable = ({
   const showEmptyStatus = [
     customersCurrentViewId === -1,
     customers.length === 0,
-  ].every(condition => condition === true);
+  ].every((condition) => condition === true);
 
   return (
-    <LoadingIndicator
-      loading={customersLoading && !isLoadedBefore}
-      mount={false}
-    >
-      <Choose>
-        <Choose.When condition={showEmptyStatus}>
-          <CustomersEmptyStatus />
-        </Choose.When>
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <LoadingIndicator loading={customersLoading && !isLoadedBefore}>
+        <Choose>
+          <Choose.When condition={showEmptyStatus}>
+            <CustomersEmptyStatus />
+          </Choose.When>
 
-        <Choose.Otherwise>
-          <DataTable
-            noInitialFetch={true}
-            columns={columns}
-            data={customers}
-            // loading={customersLoading}
-            onFetchData={handleFetchData}
-            selectionColumn={true}
-            expandable={false}
-            sticky={true}
-            onSelectedRowsChange={handleSelectedRowsChange}
-            spinnerProps={{ size: 30 }}
-            rowContextMenu={rowContextMenu}
-            pagination={true}
-            manualSortBy={true}
-            pagesCount={customerPagination.pagesCount}
-            autoResetSortBy={false}
-            autoResetPage={false}
-            initialPageSize={customersTableQuery.page_size}
-            initialPageIndex={customersTableQuery.page - 1}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </LoadingIndicator>
+          <Choose.Otherwise>
+            <DataTable
+              noInitialFetch={true}
+              columns={columns}
+              data={customers}
+              // loading={customersLoading}
+              onFetchData={handleFetchData}
+              selectionColumn={true}
+              expandable={false}
+              sticky={true}
+              onSelectedRowsChange={handleSelectedRowsChange}
+              spinnerProps={{ size: 30 }}
+              rowContextMenu={rowContextMenu}
+              pagination={true}
+              manualSortBy={true}
+              pagesCount={customerPagination.pagesCount}
+              autoResetSortBy={false}
+              autoResetPage={false}
+              initialPageSize={customersTableQuery.page_size}
+              initialPageIndex={customersTableQuery.page - 1}
+            />
+          </Choose.Otherwise>
+        </Choose>
+      </LoadingIndicator>
+    </div>
   );
 };
 
@@ -238,7 +239,7 @@ export default compose(
       customersLoading,
       customerPagination,
       customersTableQuery,
-      customersCurrentViewId
+      customersCurrentViewId,
     }),
   ),
   withCustomersActions,