chrone: sperate client and server to different repos.

src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawer.js

@@ -0,0 +1,29 @@
+import React, { lazy } from 'react';
+import withDrawers from 'containers/Drawer/withDrawers';
+
+import { Drawer, DrawerSuspense } from 'components';
+import { compose } from 'utils';
+
+const ReceiptDrawerContent = lazy(() => import('./ReceiptDrawerContent'));
+
+/**
+ *  receipt drawer.
+ */
+const ReceiptDrawer = ({
+  name,
+  //#withDrawer
+  isOpen,
+  payload: { receiptId },
+}) => {
+  return (
+    <div>
+      <Drawer isOpen={isOpen} name={name}>
+        <DrawerSuspense>
+          <ReceiptDrawerContent receiptId={receiptId} />
+        </DrawerSuspense>
+      </Drawer>
+    </div>
+  );
+};
+
+export default compose(withDrawers())(ReceiptDrawer);

src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerContent.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ReceiptDrawerProvider } from './ReceiptDrawerProvider';
+import ReceiptPaper from './ReceiptPaper';
+
+/**
+ *  Receipt drawer content.
+ */
+export default function ReceiptDrawerContent({
+  // #ownProp
+  receiptId,
+}) {
+  return (
+    <ReceiptDrawerProvider receiptId={receiptId}>
+      <ReceiptPaper />
+    </ReceiptDrawerProvider>
+  );
+}

src/containers/Sales/Receipts/ReceiptDetails/ReceiptDrawerProvider.js

@@ -0,0 +1,33 @@
+import React, { createContext, useContext } from 'react';
+import { useReceipt } from 'hooks/query';
+import { DrawerHeaderContent, DashboardInsider } from 'components';
+
+const ReceiptDrawerContext = createContext();
+
+function ReceiptDrawerProvider({ receiptId, ...props }) {
+  // Fetch sale receipt details.
+  const {
+    data: { entries, ...receipt },
+    isFetching: isReceiptLoading,
+  } = useReceipt(receiptId, {
+    enabled: !!receiptId,
+  });
+  // Provider payload.
+  const provider = {
+    receiptId,
+    receipt,
+    entries,
+
+    isReceiptLoading,
+  };
+
+  return (
+    <DashboardInsider loading={isReceiptLoading}>
+      <DrawerHeaderContent name={'receipt-drawer'} />
+      <ReceiptDrawerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+const useReceiptDrawerContext = () => useContext(ReceiptDrawerContext);
+
+export { ReceiptDrawerProvider, useReceiptDrawerContext };

src/containers/Sales/Receipts/ReceiptDetails/ReceiptPaper.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useReceiptDrawerContext } from './ReceiptDrawerProvider';
+import PaperTemplate from 'containers/Drawers/PaperTemplate/PaperTemplate';
+import intl from 'react-intl-universal';
+
+export default function ReceiptPaper() {
+  const { receipt, entries } = useReceiptDrawerContext();
+
+  const propLabels = {
+    labels: {
+      name: intl.get('receipt_'),
+      billedTo: intl.get('billed_to'),
+      date: intl.get('receipt_date_'),
+      refNo: intl.get('receipt_no'),
+      billedFrom: intl.get('billed_from'),
+      amount: intl.get('receipt_amount'),
+      dueDate: intl.get('due_date_'),
+    },
+  };
+
+  const receipts = {
+    billedTo: receipt.customer.display_name,
+    date: receipt.receipt_date,
+    amount: '',
+    billedFrom: '',
+    dueDate: receipt.due_date,
+    referenceNo: receipt.receipt_number,
+    ...receipt,
+  };
+
+  return (
+    <PaperTemplate
+      labels={propLabels.labels}
+      paperData={receipts}
+      entries={entries}
+    />
+  );
+}