chrone: sperate client and server to different repos.

src/containers/Drawers/PaperTemplate/PaperTemplate.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import 'style/components/Drawers/DrawerTemplate.scss';
+
+import PaperTemplateHeader from './PaperTemplateHeader';
+import PaperTemplateTable from './PaperTemplateTable';
+import PaperTemplateFooter from './PaperTemplateFooter';
+import { updateItemsEntriesTotal } from 'containers/Entries/utils';
+import intl from 'react-intl-universal';
+
+
+function PaperTemplate({ labels: propLabels, paperData, entries }) {
+  const labels = {
+    name: intl.get('estimate_'),
+    billedTo: intl.get('billed_to'),
+    date: intl.get('estimate_date'),
+    refNo: intl.get('estimate_no'),
+    billedFrom: intl.get('billed_from'),
+    amount: intl.get('estimate_amount'),
+    dueDate: intl.get('due_date_'),
+    ...propLabels,
+  };
+
+  const defaultValues = {
+    billedTo: paperData.customer.display_name,
+    date: paperData.estimate_date,
+    amount: '',
+    billedFrom: '',
+    dueDate: paperData.expiration_date,
+    referenceNo: paperData.estimate_number,
+    ...paperData,
+  };
+
+  return (
+    <div id={'page-size'}>
+      <div className={'template'}>
+        <PaperTemplateHeader
+          defaultLabels={labels}
+          headerData={defaultValues}
+        />
+        <PaperTemplateTable
+          tableData={updateItemsEntriesTotal(entries)}
+          currencyCode={paperData.currency_code}
+        />
+        <PaperTemplateFooter footerData={defaultValues} />
+      </div>
+    </div>
+  );
+}
+
+export default PaperTemplate;

src/containers/Drawers/PaperTemplate/PaperTemplateFooter.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { If } from 'components';
+import intl from 'react-intl-universal';
+
+export default function PaperTemplateFooter({
+  footerData: { terms_conditions },
+}) {
+  return (
+    <div className="template__terms">
+      <If condition={terms_conditions}>
+        <div className="template__terms__title">
+          <h4>{intl.get('conditions_and_terms')}</h4>
+        </div>
+
+        <ul>
+          {[terms_conditions].map((terms) => (
+            <li>{terms}</li>
+          ))}
+        </ul>
+      </If>
+    </div>
+  );
+}

src/containers/Drawers/PaperTemplate/PaperTemplateHeader.js

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

src/containers/Drawers/PaperTemplate/PaperTemplateTable.js

@@ -0,0 +1,43 @@
+import React, { useMemo } from 'react';
+import intl from 'react-intl-universal';
+import { DataTable, Money } from 'components';
+
+export default function DrawerTemplateTable({ tableData, currencyCode }) {
+  const columns = useMemo(
+    () => [
+      {
+        Header: intl.get('description'),
+        accessor: 'description',
+        disableSortBy: true,
+        width: 150,
+      },
+      {
+        Header: intl.get('rate'),
+        accessor: 'rate',
+        accessor: ({ rate }) => <Money amount={rate} currency={currencyCode} />,
+        disableSortBy: true,
+        width: 80,
+      },
+      {
+        Header: intl.get('qty'),
+        accessor: 'quantity',
+        disableSortBy: true,
+        width: 80,
+      },
+      {
+        Header: intl.get('total'),
+        accessor: ({ total }) => (
+          <Money amount={total} currency={currencyCode} />
+        ),
+        disableSortBy: true,
+        width: 70,
+      },
+    ],
+    [],
+  );
+  return (
+    <div className="template__table">
+      <DataTable columns={columns} data={tableData} />
+    </div>
+  );
+}