fix(ContactBalanceSummary): BIG-288 percentage of column.

src/containers/FinancialStatements/CustomersBalanceSummary/components.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import * as R from 'ramda';
 
 import { If } from 'components';
 import FinancialLoadingBar from '../FinancialLoadingBar';
@@ -9,29 +10,53 @@ import { useCustomersBalanceSummaryContext } from './CustomersBalanceSummaryProv
  * Retrieve customers balance summary columns.
  */
 export const useCustomersSummaryColumns = () => {
-  return React.useMemo(
-    () => [
-      {
-        Header: intl.get('customer_name'),
-        accessor: 'cells[0].value',
-        className: 'customer_name',
-        width: 240,
-      },
-      {
-        Header: intl.get('total'),
-        accessor: 'cells[1].value',
-        className: 'total',
-        width: 140,
-      },
-      {
-        Header: intl.get('percentage_of_column'),
-        accessor: 'cells[2].value',
-        className: 'total',
-        width: 140,
-      },
-    ],
-    [],
-  );
+  const {
+    CustomerBalanceSummary: { table },
+  } = useCustomersBalanceSummaryContext();
+
+  return React.useMemo(() => {
+    return dynamicColumns(table.columns || []);
+  }, [table.columns]);
+};
+
+/**
+ * Account name column accessor.
+ */
+const accountNameColumnAccessor = () => ({
+  Header: intl.get('customer_name'),
+  accessor: 'cells[0].value',
+  className: 'customer_name',
+  width: 240,
+});
+
+/**
+ * Total column accessor.
+ */
+const totalColumnAccessor = () => ({
+  Header: intl.get('total'),
+  accessor: 'cells[1].value',
+  className: 'total',
+  width: 140,
+});
+
+/**
+ * Percentage column accessor.
+ */
+const percentageColumnAccessor = () => ({
+  Header: intl.get('percentage_of_column'),
+  accessor: 'cells[2].value',
+  className: 'total',
+  width: 140,
+});
+
+const dynamicColumns = (columns) => {
+  return R.map(
+    R.compose(
+      R.when(R.pathEq(['key'], 'name'), accountNameColumnAccessor),
+      R.when(R.pathEq(['key'], 'total'), totalColumnAccessor),
+      R.when(R.pathEq(['key'], 'percentage_of_column'), percentageColumnAccessor),
+    ),
+  )(columns);
 };
 
 /**