diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js index de75a65b3..f7f326347 100644 --- a/client/src/components/DrawersContainer.js +++ b/client/src/components/DrawersContainer.js @@ -2,6 +2,7 @@ import React from 'react'; import EstimateDrawer from 'containers/Sales/Estimate/EstimateDrawer'; import InvoiceDrawer from 'containers/Sales/Invoice/InvoiceDrawer'; import ReceiptDrawer from 'containers/Sales/Receipt/ReceiptDrawer'; +import PaymentReceive from 'containers/Sales/PaymentReceive/PaymentReceiveDrawer'; export default function DrawersContainer() { return ( @@ -9,6 +10,7 @@ export default function DrawersContainer() { + ); } diff --git a/client/src/containers/Drawers/PaymentPaperTemplate.js b/client/src/containers/Drawers/PaymentPaperTemplate.js new file mode 100644 index 000000000..c5eb4a3e5 --- /dev/null +++ b/client/src/containers/Drawers/PaymentPaperTemplate.js @@ -0,0 +1,102 @@ +import React from 'react'; +import { Icon } from 'components'; +import 'style/components/Drawer/DrawerTemplate.scss'; + +export default function PaymentPaperTemplate({ labels: propLabels }) { + const labels = { + title: 'Payment receive', + billedTo: 'Billed to', + paymentDate: 'Payment date', + paymentNo: 'Payment No.', + billedFrom: 'Billed from', + referenceNo: 'Reference No', + amountReceived: 'Amount received', + ...propLabels, + }; + + return ( +
+
+
+
+

{labels.title}

+

info@bigcapital.ly

+
+ +
+ +
+
+ {labels.billedTo} +

Step Currency

+
+
+ {labels.paymentDate} +

1/1/2022

+
+
+ {labels.paymentNo} +

IN-2022

+
+
+ {labels.amountReceived} +

60,000 USD

+
+
+ {labels.billedFrom} +

Klay Thompson

+
+
+ {labels.referenceNo} +

+
+
+
+
+ + Invoice number + + + Invoice date + + + Invoice amount + + + Payment amount + +
+ +
+ + INV-1 + + + 12 Jan 2021 + + + 50,000 USD + + + 1000 USD + +
+
+ + INV-2{' '} + + + 12 Jan 2021 + + + 50,000 USD + + + 1000 USD + +
+
+
+
+ ); +} diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceiveDrawer.js b/client/src/containers/Sales/PaymentReceive/PaymentReceiveDrawer.js new file mode 100644 index 000000000..a2cf23a5d --- /dev/null +++ b/client/src/containers/Sales/PaymentReceive/PaymentReceiveDrawer.js @@ -0,0 +1,29 @@ +import React from 'react'; +import DrawerTemplate from 'containers/Drawers/DrawerTemplate'; +import PaymentPaperTemplate from 'containers/Drawers/PaymentPaperTemplate'; +import withDrawers from 'containers/Drawer/withDrawers'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; + +import { compose } from 'utils'; + +function PaymentReceiveDrawer({ + name, + //#withDrawer + isOpen, + payload, + + closeDrawer, +}) { + // handle close Drawer + const handleDrawerClose = () => { + closeDrawer(name); + }; + + return ( + + + + ); +} + +export default compose(withDrawers(), withDrawerActions)(PaymentReceiveDrawer); diff --git a/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js b/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js index 2358e68c0..cf7f2c7d7 100644 --- a/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js +++ b/client/src/containers/Sales/PaymentReceive/PaymentReceivesDataTable.js @@ -43,10 +43,11 @@ function PaymentReceivesDataTable({ // #withSettings baseCurrency, - + // #OwnProps onEditPaymentReceive, onDeletePaymentReceive, + onDrawerPaymentReceive, onSelectedRowsChange, }) { const isLoaded = useIsValuePassed(paymentReceivesLoading, false); @@ -105,6 +106,10 @@ function PaymentReceivesDataTable({ text={formatMessage({ id: 'edit_payment_receive' })} onClick={handleEditPaymentReceive(paymentReceive)} /> + onDrawerPaymentReceive()} + /> { + openDrawer('payment-receive-drawer', {}); + }, [openDrawer]); + // Handle filter change to re-fetch data-table. const handleFilterChanged = useCallback(() => {}, [fetchPaymentReceives]); @@ -86,6 +94,7 @@ function PaymentReceiveList({ @@ -104,4 +113,5 @@ export default compose( paymentReceivesTableQuery, })), withAlertsActions, + withDrawerActions, )(PaymentReceiveList); diff --git a/client/src/lang/en/index.js b/client/src/lang/en/index.js index 88f264907..abdc0876b 100644 --- a/client/src/lang/en/index.js +++ b/client/src/lang/en/index.js @@ -973,4 +973,5 @@ export default { invoice_paper: 'Invoice Paper', receipt_paper: 'Receipt Paper', payable_aging_summary: 'Payable Aging Summary', + payment_receive_paper: 'Payment Receive Paper', }; diff --git a/client/src/style/components/Drawer/DrawerTemplate.scss b/client/src/style/components/Drawer/DrawerTemplate.scss index f21bf42be..b04724d89 100644 --- a/client/src/style/components/Drawer/DrawerTemplate.scss +++ b/client/src/style/components/Drawer/DrawerTemplate.scss @@ -18,6 +18,7 @@ justify-content: space-between; margin: 0px 40px 16px 0px; &--title h1 { + font-weight: 600; color: #1c4587; margin: 0; } @@ -54,52 +55,6 @@ 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 { @@ -117,6 +72,9 @@ &--cell { flex: 0 20%; } + &--cell-payment-receive { + flex: 1; + } &--cell:first-child { flex: 1 0 20%;