feat: Drawer.

client/src/containers/Drawer/withDrawerActions.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import t from 'store/types';
+
+export const mapStateToProps = (state, props) => {
+  return {};
+};
+
+export const mapDispatchToProps = (dispatch) => ({
+  openDrawer: (name, payload) =>
+    dispatch({ type: t.OPEN_DRAWER, name, payload }),
+  closeDrawer: (name, payload) =>
+    dispatch({ type: t.CLOSE_DRAWER, name, payload }),
+});
+
+export default connect(null, mapDispatchToProps);

client/src/containers/Drawer/withDrawers.js

@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import {
+  isDrawerOpenFactory,
+  getDrawerPayloadFactory,
+} from 'store/dashboard/dashboard.selectors';
+
+export default (mapState) => {
+  const isDrawerOpen = isDrawerOpenFactory();
+  const getDrawerPayload = getDrawerPayloadFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      isOpen: isDrawerOpen(state, props),
+      payload: getDrawerPayload(state, props),
+    };
+    return mapState ? mapState(mapped) : mapped;
+  };
+  return connect(mapStateToProps);
+};

client/src/containers/Drawers/DrawerTemplate.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+import { Position, Drawer } from '@blueprintjs/core';
+
+export default function DrawerTemplate({
+  children,
+  isOpen,
+  isClose,
+  drawerProps,
+}) {
+  return (
+    <div>
+      <Drawer
+        isOpen={isOpen}
+        usePortal={false}
+        hasBackdrop={true}
+        title={<T id={'view_paper'} />}
+        position={Position.RIGHT}
+        canOutsideClickClose={true}
+        canEscapeKeyClose={true}
+        size={'65%'}
+        onClose={isClose}
+        {...drawerProps}
+      >
+        {children}
+      </Drawer>
+    </div>
+  );
+}

client/src/containers/Drawers/PaperTemplate.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Icon } from 'components';
+import 'style/components/Drawer/DrawerTemplate.scss';
+
+export default function PaperTemplate({ labels: propLabels }) {
+  const labels = {
+    name: 'Estimate',
+    billedTo: 'Billed to',
+    date: 'Estimate date',
+    refNo: 'Estimate No.',
+    billedFrom: 'Billed from',
+    amount: 'Estimate amount',
+    dueDate: 'Due date',
+    ...propLabels,
+  };
+
+  return (
+    <div id={'page-size'}>
+      <div className={'template'}>
+        <div className={'template__header'}>
+          <div className={'template__header--title'}>
+            <h1>{labels.name}</h1>
+            <p>info@bigcapital.ly </p>
+          </div>
+          <Icon icon="bigcapital" height={30} width={200} />
+        </div>
+
+        <div className="template__content">
+          <div className="template__content__info">
+            <span> {labels.billedTo} </span>
+            <p className={'info-paragraph'}>Joe Biden</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.date} </span>
+
+            <p className={'info-paragraph'}>1/1/2022</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.refNo} </span>
+            <p className={'info-paragraph'}>IN-2022</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.amount} </span>
+            <p className={'info-paragraph-amount'}>6,000 LYD</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.billedFrom} </span>
+            <p className={'info-paragraph'}>Donald Trump</p>
+          </div>
+          <div className="template__content__info">
+            <span> {labels.dueDate} </span>
+            <p className={'info-paragraph'}>25/03/2022</p>
+          </div>
+        </div>
+
+        <div className="template__table">
+          <div className="template__table__rows">
+            <span className="template__table__rows--cell ">Description</span>
+            <span className="template__table__rows--cell">Rate</span>
+            <span className="template__table__rows--cell">Qty</span>
+            <span className="template__table__rows--cell">Total</span>
+          </div>
+          <div className="template__table__rows">
+            <span className="template__table__rows--cell">
+              Nulla commodo magnanon dolor excepteur nisi aute laborum.
+            </span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">100 LYD</span>
+          </div>
+
+          <div className="template__table__rows">
+            <span className="template__table__rows--cell">
+              Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
+              laborum.
+            </span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">100 LYD</span>
+          </div>
+          <div className="template__table__rows">
+            <span className="template__table__rows--cell">
+              Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
+              laborum.
+            </span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">100 LYD</span>
+          </div>
+          <div className="template__table__rows">
+            <span className="template__table__rows--cell">
+              Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
+              laborum.
+            </span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">100 LYD</span>
+          </div>
+          <div className="template__table__rows">
+            <span className="template__table__rows--cell">
+              Nulla comm non dolor excepteur elit dolore eiusmod nisi aute
+              laborum.
+            </span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">1</span>
+            <span className="template__table__rows--cell">100 LYD</span>
+          </div>
+        </div>
+
+        <div className="template__terms">
+          <div className="template__terms__title">
+            <h4>Conditions and terms</h4>
+          </div>
+          <ul>
+            <li>Est excepteur laboris do sit dolore sit exercitation non.</li>
+            <li>Lorem duis aliqua minim elit cillum.</li>
+            <li>Dolor ad quis Lorem ut mollit consectetur.</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/containers/Sales/Estimate/EstimateDrawer.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
+import PaperTemplate from 'containers/Drawers/PaperTemplate';
+import withDrawers from 'containers/Drawer/withDrawers';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+function EstimateDrawer({
+  name,
+  //#withDrawer
+  isOpen,
+  payload,
+
+  closeDrawer,
+}) {
+  // handle close Drawer
+  const handleDrawerClose = () => {
+    closeDrawer(name);
+  };
+
+  return (
+    <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
+      <PaperTemplate />
+    </DrawerTemplate>
+  );
+}
+
+export default compose(withDrawers(), withDrawerActions)(EstimateDrawer);

client/src/containers/Sales/Estimate/EstimatesDataTable.js

@@ -46,6 +46,7 @@ function EstimatesDataTable({
   onDeliverEstimate,
   onApproveEstimate,
   onRejectEstimate,
+  onDrawerEstimate,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -112,6 +113,11 @@ function EstimatesDataTable({
             />
           </Choose.When>
         </Choose>
+        <MenuItem
+          text={formatMessage({ id: 'estimate_paper' })}
+          onClick={() => onDrawerEstimate()}
+        />
+
         <MenuItem
           text={formatMessage({ id: 'delete_estimate' })}
           intent={Intent.DANGER}

client/src/containers/Sales/Estimate/EstimatesList.js

@@ -19,6 +19,7 @@ import withEstimates from './withEstimates';
 import withEstimateActions from 'containers/Sales/Estimate/withEstimateActions';
 import withViewsActions from 'containers/Views/withViewsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -37,6 +38,9 @@ function EstimatesList({
   // #withAlertsActions.
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   //#withEistimateActions
   requestFetchEstimatesTable,
   requestDeliverdEstimate,
@@ -46,10 +50,6 @@ function EstimatesList({
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-  const [deliverEstimate, setDeliverEstimate] = useState(false);
-  const [approveEstimate, setApproveEstimate] = useState(false);
-  const [rejectEstimate, setRejectEstimate] = useState(false);
-
   const [selectedRows, setSelectedRows] = useState([]);
 
   const fetchResourceViews = useQuery(
@@ -103,6 +103,10 @@ function EstimatesList({
     [openAlert],
   );
 
+  const handleEstimateDrawer = useCallback(() => {
+    openDrawer('estimate-drawer', {});
+  }, [openDrawer]);
+
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, []);
 
@@ -147,6 +151,7 @@ function EstimatesList({
               onDeliverEstimate={handleDeliverEstimate}
               onApproveEstimate={handleApproveEstimate}
               onRejectEstimate={handleRejectEstimate}
+              onDrawerEstimate={handleEstimateDrawer}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -167,4 +172,5 @@ export default compose(
     estimateViews,
   })),
   withAlertsActions,
+  withDrawerActions,
 )(EstimatesList);

client/src/containers/Sales/Invoice/InvoiceDrawer.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import DrawerTemplate from 'containers/Drawers/DrawerTemplate';
+import PaperTemplate from 'containers/Drawers/PaperTemplate';
+import withDrawers from 'containers/Drawer/withDrawers';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+function InvoiceDrawer({
+  name,
+  //#withDrawer
+  isOpen,
+  payload,
+
+  closeDrawer,
+}) {
+  // handle close Drawer
+  const handleDrawerClose = () => {
+    closeDrawer(name);
+  };
+
+  const propLabels = {
+    labels: {
+      name: 'Invoice',
+      billedTo: 'Billed to',
+      date: 'Invoice date',
+      refNo: 'Invoice No.',
+      billedFrom: 'Billed from',
+      amount: 'Invoice amount',
+      dueDate: 'Due date',
+    },
+  };
+
+  return (
+    <DrawerTemplate isOpen={isOpen} isClose={handleDrawerClose}>
+      <PaperTemplate propLabels={propLabels} />
+    </DrawerTemplate>
+  );
+}
+
+export default compose(withDrawers(), withDrawerActions)(InvoiceDrawer);

client/src/containers/Sales/Invoice/InvoicesDataTable.js

@@ -55,6 +55,7 @@ function InvoicesDataTable({
   onEditInvoice,
   onDeleteInvoice,
   onDeliverInvoice,
+  onDrawerInvoice,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -93,6 +94,10 @@ function InvoicesDataTable({
             onClick={() => onDeliverInvoice(invoice)}
           />
         </If>
+        <MenuItem
+          text={formatMessage({ id: 'invoice_paper' })}
+          onClick={() => onDrawerInvoice()}
+        />
         <MenuItem
           text={formatMessage({ id: 'delete_invoice' })}
           intent={Intent.DANGER}

client/src/containers/Sales/Invoice/InvoicesList.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useCallback, useMemo, useState } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
-import { useQuery} from 'react-query';
+import { useQuery } from 'react-query';
 
 import 'style/pages/SaleInvoice/List.scss';
 
@@ -19,6 +19,7 @@ import withInvoices from './withInvoices';
 import withInvoiceActions from 'containers/Sales/Invoice/withInvoiceActions';
 import withViewsActions from 'containers/Views/withViewsActions';
 import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
 
 import { compose } from 'utils';
 
@@ -40,14 +41,17 @@ function InvoicesList({
   // #withAlertsActions.
   openAlert,
 
+  // #withDrawerActions
+  openDrawer,
+
   //#withInvoiceActions
   requestFetchInvoiceTable,
-  
+
   addInvoiceTableQueries,
 }) {
   const history = useHistory();
   const { formatMessage } = useIntl();
-   const [selectedRows, setSelectedRows] = useState([]);
+  const [selectedRows, setSelectedRows] = useState([]);
 
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'invoices_list' }));
@@ -77,17 +81,20 @@ function InvoicesList({
 
   // Handle cancel/confirm invoice deliver.
   const handleDeliverInvoice = useCallback(
-    ({id}) => {
+    ({ id }) => {
       openAlert('invoice-deliver', { invoiceId: id });
     },
     [openAlert],
   );
 
-
   const handleEditInvoice = useCallback((invoice) => {
     history.push(`/invoices/${invoice.id}/edit`);
   });
 
+  const handleInvoiceDrawer = useCallback(() => {
+    openDrawer('invoice-drawer', {});
+  }, [openDrawer]);
+
   // Handle filter change to re-fetch data-table.
   const handleFilterChanged = useCallback(() => {}, []);
 
@@ -118,6 +125,7 @@ function InvoicesList({
               onDeleteInvoice={handleDeleteInvoice}
               onEditInvoice={handleEditInvoice}
               onDeliverInvoice={handleDeliverInvoice}
+              onDrawerInvoice={handleInvoiceDrawer}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
           </Route>
@@ -138,4 +146,5 @@ export default compose(
     invoicesTableQuery,
   })),
   withAlertsActions,
+  withDrawerActions,
 )(InvoicesList);

client/src/containers/Subscriptions/BillingPlansForm.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { FormattedMessage as T } from 'react-intl';
 
-import 'style/pages/Subscription/BillingPlans.scss'
+import 'style/pages/Subscription/BillingPlans.scss';
 
 import BillingPlansInput from 'containers/Subscriptions/BillingPlansInput';
 import BillingPeriodsInput from 'containers/Subscriptions/BillingPeriodsInput';
-import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentMethod';
+import BillingPaymentMethod from 'containers/Subscriptions/BillingPaymentmethod';
 
 /**
  * Billing plans form.
@@ -26,5 +26,5 @@ export default function BillingPlansForm() {
         description={<T id={'please_enter_your_preferred_payment_method'} />}
       />
     </div>
-  )
-}
+  );
+}