chrone: sperate client and server to different repos.

src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplate.js

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import 'style/components/Drawers/DrawerTemplate.scss';
+
+import PaymentPaperTemplateHeader from './PaymentPaperTemplateHeader';
+import PaymentPaperTemplateTable from './PaymentPaperTemplateTable';
+import intl from 'react-intl-universal';
+
+
+export default function PaymentPaperTemplate({
+  labels: propLabels,
+  paperData,
+}) {
+  const labels = {
+    name: intl.get('payment_receive'),
+    billedTo: intl.get('billed_to'),
+    date: intl.get('payment_date_'),
+    refNo: intl.get('payment_no'),
+    billedFrom: intl.get('billed_from'),
+    referenceNo: intl.get('reference_no'),
+    amount: intl.get('amount_received'),
+    dueDate: intl.get('due_date_'),
+    ...propLabels,
+  };
+  const defaultValues = {
+    billedTo: paperData.customer.display_name,
+    date: paperData.payment_date,
+    amount: '',
+    billedFrom: '',
+    referenceNo: paperData.payment_receive_no,
+    ...paperData,
+  };
+
+  return (
+    <div id={'page-size'}>
+      {[defaultValues].map(({ entries, ...defaultValues }) => (
+        <div className={'template'}>
+          <PaymentPaperTemplateHeader
+            defaultLabels={labels}
+            headerData={defaultValues}
+          />
+          <PaymentPaperTemplateTable
+            tableData={entries}
+            currencyCode={paperData.currency_code}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateHeader.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TemplateHeader, TemplateContent } from '../components';
+
+export default function PaymentPaperTemplateHeader({
+  defaultLabels,
+  headerData: { referenceNo, amount, date, billedTo, currency_code },
+}) {
+  return (
+    <>
+      <TemplateHeader defaultLabels={defaultLabels} />
+      <TemplateContent
+        defaultLabels={defaultLabels}
+        billedTo={billedTo}
+        date={date}
+        referenceNo={referenceNo}
+        amount={amount}
+        billedFrom={''}
+        currencyCode={currency_code}
+      />
+    </>
+  );
+}

src/containers/Drawers/PaymentPaperTemplate/PaymentPaperTemplateTable.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import moment from 'moment';
+import intl from 'react-intl-universal';
+import { DataTable, Money } from 'components';
+
+export default function PaymentPaperTemplateTable({ tableData, currencyCode }) {
+  const columns = React.useMemo(
+    () => [
+      {
+        Header: intl.get('invoice_number'),
+        accessor: 'invoice.invoice_no',
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('invoice_date'),
+        accessor: ({ invoice_date }) =>
+          moment(invoice_date).format('YYYY MMM DD'),
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('invoice_amount'),
+        accessor: ({ invoice }) => (
+          <Money amount={invoice.balance} currency={currencyCode} />
+        ),
+        disableSortBy: true,
+      },
+      {
+        Header: intl.get('payment_amount'),
+        accessor: ({ payment_amount }) => (
+          <Money amount={payment_amount} currency={currencyCode} />
+        ),
+        disableSortBy: true,
+      },
+    ],
+    [],
+  );
+  return (
+    <div className="template__table">
+      <DataTable columns={columns} data={tableData} />
+    </div>
+  );
+}