feat: Drawer.

client/src/components/Dashboard/Dashboard.js

@@ -14,6 +14,7 @@ import Search from 'containers/GeneralSearch/Search';
 import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
 import GlobalHotkeys from './GlobalHotkeys';
 import withSettingsActions from 'containers/Settings/withSettingsActions';
+import DrawersContainer from 'components/DrawersContainer';
 
 import { compose } from 'utils';
 
@@ -47,6 +48,7 @@ function Dashboard({
       <Search />
       <DialogsContainer />
       <GlobalHotkeys />
+      <DrawersContainer />
     </DashboardLoadingIndicator>
   );
 }

client/src/components/DrawersContainer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import EstimateDrawer from 'containers/Sales/Estimate/EstimateDrawer';
+import InvoiceDrawer from 'containers/Sales/Invoice/InvoiceDrawer';
+
+export default function DrawersContainer() {
+  return (
+    <div>
+      <EstimateDrawer name={'estimate-drawer'} />
+      <InvoiceDrawer name={'invoice-drawer'} />
+    </div>
+  );
+}

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>
-  )
-}
+  );
+}

client/src/lang/en/index.js

@@ -967,5 +967,8 @@ export default {
   view_all: 'View all',
   payment_via_voucher: 'Payment via voucher',
   voucher_number: 'Voucher number',
-  voucher: 'Voucher'
+  voucher: 'Voucher',
+  view_paper: 'View Paper',
+  estimate_paper:'Estimate Paper',
+  invoice_paper:'Invoice Paper',
 };

client/src/store/dashboard/dashboard.actions.js

@@ -6,7 +6,7 @@ export function openDialog(name, payload) {
     name: name,
     payload: payload,
   };
-};
+}
 
 export function closeDialog(name, payload) {
   return {
@@ -17,7 +17,7 @@ export function closeDialog(name, payload) {
 }
 
 export function openAlert(name, payload) {
-  return  {
+  return {
     type: t.OPEN_ALERT,
     name,
     payload,
@@ -25,9 +25,24 @@ export function openAlert(name, payload) {
 }
 
 export function closeAlert(name, payload) {
-  return  {
+  return {
     type: t.CLOSE_ALERT,
     name,
     payload,
   };
-}
+}
+
+export function openDrawer(name, payload) {
+  return {
+    type: t.OPEN_DRAWER,
+    name,
+    payload,
+  };
+}
+export function closeDrawer(name, payload) {
+  return {
+    type: t.CLOSE_DRAWER,
+    name,
+    payload,
+  };
+}

client/src/store/dashboard/dashboard.reducer.js

@@ -1,7 +1,7 @@
 import t from 'store/types';
 import { createReducer } from '@reduxjs/toolkit';
-import { persistReducer } from 'redux-persist'
-import storage from 'redux-persist/lib/storage' // defaults to localStorage for web
+import { persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web
 
 const initialState = {
   pageTitle: '',
@@ -12,6 +12,7 @@ const initialState = {
   previousSidebarExpended: null,
   dialogs: {},
   alerts: {},
+  drawers: {},
   topbarEditViewId: null,
   requestsLoading: 0,
   backLink: false,
@@ -61,10 +62,19 @@ const reducerInstance = createReducer(initialState, {
       isOpen: false,
     };
   },
-
-  [t.CLOSE_ALL_DIALOGS]: (state, action) => {
-    
+  [t.OPEN_DRAWER]: (state, action) => {
+    state.drawers[action.name] = {
+      isOpen: true,
+      payload: action.payload || {},
+    };
   },
+  [t.CLOSE_DRAWER]: (state, action) => {
+    state.drawers[action.name] = {
+      ...state.drawers[action.name],
+      isOpen: false,
+    };
+  },
+  [t.CLOSE_ALL_DIALOGS]: (state, action) => {},
 
   [t.SET_TOPBAR_EDIT_VIEW]: (state, action) => {
     state.topbarEditViewId = action.id;
@@ -102,27 +112,31 @@ const reducerInstance = createReducer(initialState, {
   [t.SET_DASHBOARD_BACK_LINK]: (state, action) => {
     const { backLink } = action.payload;
     state.backLink = backLink;
-  }
+  },
 });
 
-export default persistReducer({
-  key: 'bigcapital:dashboard',
-  blacklist: [
-    'pageTitle',
-    'pageSubtitle',
-    'pageHint',
-    'preferencesPageTitle',
-    'topbarEditViewId',
-    'backLink'
-  ],
-  storage,
-}, reducerInstance);
+export default persistReducer(
+  {
+    key: 'bigcapital:dashboard',
+    blacklist: [
+      'pageTitle',
+      'pageSubtitle',
+      'pageHint',
+      'preferencesPageTitle',
+      'topbarEditViewId',
+      'backLink',
+    ],
+    storage,
+  },
+  reducerInstance,
+);
 
 export const getDialogPayload = (state, dialogName) => {
   return typeof state.dashboard.dialogs[dialogName] !== 'undefined'
-    ? state.dashboard.dialogs[dialogName].payload : {};
+    ? state.dashboard.dialogs[dialogName].payload
+    : {};
 };
 
 export const getDialogActiveStatus = (state, dialogName) => {
   return true;
-};
+};

client/src/store/dashboard/dashboard.selectors.js

@@ -1,33 +1,40 @@
-import { createSelector } from "@reduxjs/toolkit";
+import { createSelector } from '@reduxjs/toolkit';
 
-const dialogByNameSelector = (state, props) => state.dashboard.dialogs?.[props.dialogName];
+const dialogByNameSelector = (state, props) =>
+  state.dashboard.dialogs?.[props.dialogName];
 
-export const isDialogOpenFactory = () => createSelector(
-  dialogByNameSelector,
-  (dialog) => {
+export const isDialogOpenFactory = () =>
+  createSelector(dialogByNameSelector, (dialog) => {
     return dialog && dialog.isOpen;
-  },
-);
+  });
 
-export const getDialogPayloadFactory = () => createSelector(
-  dialogByNameSelector,
-  (dialog) => {
+export const getDialogPayloadFactory = () =>
+  createSelector(dialogByNameSelector, (dialog) => {
     return { ...dialog?.payload };
-  },
-);
+  });
 
-const alertByNameSelector = (state, props) => state.dashboard.alerts?.[props.name];
+const alertByNameSelector = (state, props) =>
+  state.dashboard.alerts?.[props.name];
 
-export const isAlertOpenFactory = () => createSelector(
-  alertByNameSelector,
-  (alert) => {
+export const isAlertOpenFactory = () =>
+  createSelector(alertByNameSelector, (alert) => {
     return alert && alert.isOpen;
-  },
-);
+  });
 
-export const getAlertPayloadFactory = () => createSelector(
-  alertByNameSelector,
-  (alert) => {
+export const getAlertPayloadFactory = () =>
+  createSelector(alertByNameSelector, (alert) => {
     return { ...alert?.payload };
-  },
-);
+  });
+
+const drawerByNameSelector = (state, props) =>
+  state.dashboard.drawers?.[props.name];
+
+export const isDrawerOpenFactory = () =>
+  createSelector(drawerByNameSelector, (drawer) => {
+    return drawer && drawer.isOpen;
+  });
+
+export const getDrawerPayloadFactory = () =>
+  createSelector(drawerByNameSelector, (drawer) => {
+    return { ...drawer?.payload };
+  });

client/src/store/dashboard/dashboard.types.js

@@ -1,4 +1,3 @@
-
 export default {
   OPEN_DIALOG: 'OPEN_DIALOG',
   CLOSE_DIALOG: 'CLOSE_DIALOG',
@@ -6,6 +5,8 @@ export default {
   CLOSE_ALERT: 'CLOSE_ALERT',
   CLOSE_ALL_DIALOGS: 'CLOSE_ALL_DIALOGS',
   CLOSE_ALL_ALERTS: 'CLOSE_ALL_ALERTS',
+  OPEN_DRAWER: 'OPEN_DRAWER',
+  CLOSE_DRAWER: 'CLOSE_DRAWER',
   CHANGE_DASHBOARD_PAGE_TITLE: 'CHANGE_DASHBOARD_PAGE_TITLE',
   CHANGE_DASHBOARD_PAGE_HINT: 'CHANGE_DASHBOARD_PAGE_HINT',
   CHANGE_PREFERENCES_PAGE_TITLE: 'CHANGE_PREFERENCES_PAGE_TITLE',
@@ -18,5 +19,5 @@ export default {
   SIDEBAR_SHRINK: 'SIDEBAR_SHRINK',
   RESET_SIDEBAR_PREVIOUS_EXPAND: 'RESET_SIDEBAR_PREVIOUS_EXPAND',
   RECORD_SIDEBAR_PREVIOUS_EXPAND: 'RECORD_SIDEBAR_PREVIOUS_EXPAND',
-  SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK'
-};
+  SET_DASHBOARD_BACK_LINK: 'SET_DASHBOARD_BACK_LINK',
+};

client/src/style/components/Drawer/DrawerTemplate.scss

@@ -0,0 +1,181 @@
+#page-size {
+  margin: 0 auto;
+  // background-color: #ffffff;
+  background-color: transparent;
+  width: 21cm;
+  height: 29.7cm;
+  padding-bottom: 20px;
+}
+
+.template {
+  background-color: transparent;
+  // margin: 30px;
+  margin: 20px;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0px 40px 16px 0px;
+    &--title h1 {
+      color: #1c4587;
+      margin: 0;
+    }
+    &--title p {
+      color: #666666;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-wrap: wrap;
+    border-bottom: 2px solid #1155cc;
+    // padding-bottom: 40px;
+    padding-bottom: 35px;
+
+    &__info {
+      flex: 0 1 25%;
+      padding-left: 5px;
+      color: #999999;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 1.6rem;
+      margin-bottom: 10px;
+
+      .info-paragraph-amount {
+        margin-top: 8px;
+        color: #123163;
+        font-size: 26px;
+        font-weight: 500;
+      }
+
+      .info-paragraph {
+        font-size: 15px;
+        color: #000;
+      }
+    }
+
+    // &__content {
+    //   display: flex;
+    //   flex-wrap: wrap;
+    //   border-bottom: 2px solid #1155cc;
+    //   padding-bottom: 45px;
+
+    //   &--info {
+    //     flex: 0 1 25%;
+    //     padding-left: 5px;
+    //     margin-bottom: 10px;
+    //   }
+    //   &--info > span {
+    //     color: #999999;
+    //     font-size: 16px;
+    //   }
+    //   &--info > p:not(.-info--amount) {
+    //     color: #000;
+    //     font-size: 14px;
+    //   }
+    //   // span {
+    //   //   color: #999999;
+    //   //   font-size: 16px;
+    //   // }
+    //   // p {
+    //   //   color: #000;
+    //   // }
+
+    //   .info--amount {
+    //     color: #123163;
+    //   }
+
+    // p {
+    //   // font-size: 16px;
+    //   // font-weight: 500;
+    //   // margin: 5px 0px;
+    //   color: #000;
+    // }
+
+    // &--amount {
+    //   color: #123163;
+    //   color: red;
+    //   //         margin-top: 8px;
+    //   //         font-size: 25px;
+    //   //         font-weight: 700;
+    // }
+  }
+
+  &__table {
+    display: flex;
+    flex-direction: column;
+    padding: 0px 5px;
+    margin: 5px 0px 20px 0px;
+    font-size: 16px;
+
+    &__rows {
+      display: flex;
+      margin-bottom: 15px;
+      color: #1155cc;
+
+      &--cell {
+        flex: 0 20%;
+      }
+
+      &--cell:first-child {
+        flex: 1 0 20%;
+        padding-left: 5px;
+      }
+    }
+
+    &__rows:not(:first-child) {
+      color: #000;
+      border-bottom: 1px solid #cecbcb;
+      padding-bottom: 15px;
+    }
+  }
+
+  &__terms {
+    padding: 0px 5px;
+    &__title h4 {
+      font-size: 16px;
+      font-weight: 400;
+      color: #666666;
+      margin-bottom: 5px;
+
+      // font-size: 18px;
+      // font-weight: 500;
+    }
+
+    ul {
+      list-style: none;
+    }
+    ul li {
+      color: #000;
+      font-size: 14px;
+    }
+    ul li::before {
+      content: '•';
+      color: #b7b7b7;
+      display: inline-block;
+      width: 1em;
+      margin-left: 0.7em;
+    }
+  }
+}
+
+.bp3-drawer.bp3-position-right {
+  bottom: 0;
+  right: 0;
+  top: 0;
+  overflow: auto;
+  height: 100%;
+  .bp3-drawer-header .bp3-heading {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+    flex: 1 1 auto;
+    line-height: inherit;
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #0d244a;
+  }
+}