From b8ea6e2bfa4dfeef86f6ea7f7e347ea5740eb57e Mon Sep 17 00:00:00 2001 From: JoshBot Date: Thu, 1 Sep 2022 15:02:04 +0100 Subject: [PATCH 1/2] Add new screens --- src/App.css | 4 ++ src/Components/CannotViewModal/CannotView.jsx | 25 +++++++ .../CannotViewModal/cannotviewmodal.css | 5 ++ src/Components/InvoiceButton.jsx | 21 ++++-- src/Components/LinksModal/LinksModal.jsx | 1 - .../ProfileDetails/profiledetails.css | 2 +- src/Components/ReceiptModal/ReceiptModal.jsx | 65 ++++++++++++++++++ src/Components/ReceiptModal/receiptmodal.css | 47 +++++++++++++ src/Pages/CreateInvoice/CreateInvoice.jsx | 13 ++-- src/Pages/InvoicePage.jsx | 17 +++-- src/assets/error-circle.png | Bin 0 -> 1787 bytes src/assets/view-error.png | Bin 0 -> 891 bytes 12 files changed, 182 insertions(+), 18 deletions(-) create mode 100644 src/Components/CannotViewModal/CannotView.jsx create mode 100644 src/Components/CannotViewModal/cannotviewmodal.css create mode 100644 src/Components/ReceiptModal/ReceiptModal.jsx create mode 100644 src/Components/ReceiptModal/receiptmodal.css create mode 100644 src/assets/error-circle.png create mode 100644 src/assets/view-error.png diff --git a/src/App.css b/src/App.css index 85a508d..e988da9 100644 --- a/src/App.css +++ b/src/App.css @@ -251,6 +251,10 @@ input { font-size: 14px; } +.font-18{ + font-size: 18; +} + .font-16 { font-size: 16px; } diff --git a/src/Components/CannotViewModal/CannotView.jsx b/src/Components/CannotViewModal/CannotView.jsx new file mode 100644 index 0000000..4e433b3 --- /dev/null +++ b/src/Components/CannotViewModal/CannotView.jsx @@ -0,0 +1,25 @@ +import Modal from "../Modal/modal"; +import ErrorImage from "../../assets/view-error.png"; +import { useNavigate } from "react-router-dom"; + +import "./cannotviewmodal.css"; + +const CannotViewModal = () =>{ + + const navigate = useNavigate(); + + const handleNavigate = () => { + navigate("/"); + } + + return( + +
+ + You do not have permission to view the contents of this page. + +
+ + ) +} +export default CannotViewModal; \ No newline at end of file diff --git a/src/Components/CannotViewModal/cannotviewmodal.css b/src/Components/CannotViewModal/cannotviewmodal.css new file mode 100644 index 0000000..2c37178 --- /dev/null +++ b/src/Components/CannotViewModal/cannotviewmodal.css @@ -0,0 +1,5 @@ +.cannot-view-modal{ + width: 464px; + padding: 70px 30px 50px 30px; + gap:30px; +} \ No newline at end of file diff --git a/src/Components/InvoiceButton.jsx b/src/Components/InvoiceButton.jsx index 970a481..a944f0a 100644 --- a/src/Components/InvoiceButton.jsx +++ b/src/Components/InvoiceButton.jsx @@ -4,12 +4,14 @@ import { ethers } from "ethers"; import { networks } from "../network.config.json"; import { useSelector } from "react-redux/es/exports"; import { initWeb3 } from "../utils/init"; +import { useState } from 'react'; +import ReceiptModal from './ReceiptModal/ReceiptModal'; -const InvoiceButton = ({ invoice, account, contract }) => { +const InvoiceButton = ({ invoice, invoiceData, account, contract }) => { const { chainId, isSupported } = useSelector((state) => state.network); const web3 = initWeb3(); - console.log(invoice) + const [modal, setModal] = useState(false); const payHandler = async ( e, @@ -65,16 +67,21 @@ const InvoiceButton = ({ invoice, account, contract }) => { } }; + const openDownloadModal = () => { + setModal(true); + } + return ( + <>
{invoice.invoiceCreator === account ? (
e.stopPropagation()}> {invoice.isCancelled ? ( - ) : invoice.isPaid ? ( - ) : ( @@ -89,11 +96,11 @@ const InvoiceButton = ({ invoice, account, contract }) => { ) : (
e.stopPropagation()}> {invoice.isPaid ? ( - ) : invoice.isCancelled ? ( - ) : ( @@ -107,6 +114,8 @@ const InvoiceButton = ({ invoice, account, contract }) => {
)}
+ {modal && setModal(false)} />} + ); }; diff --git a/src/Components/LinksModal/LinksModal.jsx b/src/Components/LinksModal/LinksModal.jsx index 06bf6a6..eb2fe39 100644 --- a/src/Components/LinksModal/LinksModal.jsx +++ b/src/Components/LinksModal/LinksModal.jsx @@ -10,7 +10,6 @@ const LinksModal = ({closeModal, link}) => {
Share Link - Download
Share the payment link by copying the web address below diff --git a/src/Components/ProfileDetails/profiledetails.css b/src/Components/ProfileDetails/profiledetails.css index 393e300..b72c60e 100644 --- a/src/Components/ProfileDetails/profiledetails.css +++ b/src/Components/ProfileDetails/profiledetails.css @@ -62,7 +62,7 @@ .modal-button button { width: 100%; height: 60px; - background: var(--content-background); + background: var(--xeggo-gradient); border: 1px solid var(--border-color); border-radius: 10px; font-size: 16px; diff --git a/src/Components/ReceiptModal/ReceiptModal.jsx b/src/Components/ReceiptModal/ReceiptModal.jsx new file mode 100644 index 0000000..d3d9631 --- /dev/null +++ b/src/Components/ReceiptModal/ReceiptModal.jsx @@ -0,0 +1,65 @@ +import { useEffect } from "react"; +import Modal from "../Modal/modal"; + +import "./receiptmodal.css" + +const ReceiptModal = ({invoice,invoiceData, closeModal}) => { + + useEffect(()=>{ + console.log({invoice, invoiceData}, "This is my invoice data") + }, [invoice]) + return ( + +
+
+
You have successfully paid for
+
Invoice #{invoiceData.invoice_id}
+
+
+ Invoice Details +
+
+
+ Invoice Paid To: + {invoiceData.sender_name} +
+
+ Invoice No: + #{invoiceData.invoice_id} +
+
+ Asset: + cUSD(Celo) +
+
+ Item Description: + Amount +
+ {invoiceData.items.map(item=>( +
+ {item.item} x{item.quantity}: + {item.price} +
+ ))} +
+ Total Net Amount: + {invoiceData.net_amount} +
+
+ Total Vat Amount: + {invoiceData.vat_amount} +
+
+ Total Gross Amount: + {invoiceData.gross_amount} +
+
+
+ +
+
+ + ); +} + +export default ReceiptModal; \ No newline at end of file diff --git a/src/Components/ReceiptModal/receiptmodal.css b/src/Components/ReceiptModal/receiptmodal.css new file mode 100644 index 0000000..e231af1 --- /dev/null +++ b/src/Components/ReceiptModal/receiptmodal.css @@ -0,0 +1,47 @@ +.receipt-modal{ + width: 380px; + padding: 45px 25px 25px 25px; +} + +.receipt-modal .text{ + width: 250px; +} + +.modal-nav{ + border-bottom: 1px solid var(--light-dark); + margin-bottom: 30px; +} + + +.modal-nav-link { + display: inline-block; + font-weight: 600; + font-size: 12px; + line-height: 18px; + color: var(--nav-link-text); + margin-right: 30px; + cursor: pointer; +} + +.modal-nav-link.active{ + font-weight: 500; + color: var(--secondary-text); + position: relative; + cursor: default; +} + +.modal-nav-link.active::after { + position: absolute; + bottom: -3.5px; + left:0; + display: block; + content: ""; + width: 100%; + height: 3px; + background: var(--xeggo-gradient); + border-radius: 10px; +} + +.faded{ + color: #BABABA; +} \ No newline at end of file diff --git a/src/Pages/CreateInvoice/CreateInvoice.jsx b/src/Pages/CreateInvoice/CreateInvoice.jsx index 92a2a1e..a019e72 100644 --- a/src/Pages/CreateInvoice/CreateInvoice.jsx +++ b/src/Pages/CreateInvoice/CreateInvoice.jsx @@ -348,15 +348,15 @@ const CreateInvoice = ({contract, account}) => { {rows.map((row,i) => ( - handleRow(e,i,"item")} type="text" placeholder='Enter Item Description' /> - handleRow(e,i,"quantity")} type="number" placeholder='-' className='center-input' /> - handleRow(e,i,"price")} type="number" placeholder='-' className='center-input' /> + handleRow(e,i,"item")} type="text" placeholder='Enter Item Description' readOnly /> + handleRow(e,i,"quantity")} type="number" placeholder='-' className='center-input' readOnly /> + handleRow(e,i,"price")} type="number" placeholder='-' className='center-input' readOnly /> - handleRow(e,i,"vat_rate")} placeholder='-' className='center-input pr-10' /> + handleRow(e,i,"vat_rate")} placeholder='-' className='center-input pr-10' readOnly /> % - handleRow(e,i,"vat_amount")} placeholder='-' className='center-input' /> - handleRow(e,i,"gross_amount")} placeholder='-' className='center-input' /> + handleRow(e,i,"vat_amount")} placeholder='-' className='center-input' readOnly /> + handleRow(e,i,"gross_amount")} placeholder='-' className='center-input' readOnly /> {i > 0 && removeRow(i)}>Delete} @@ -371,6 +371,7 @@ const CreateInvoice = ({contract, account}) => { placeholder='Thank you for your business' className='notes-text' value={notes} onChange={(e)=>setNotes(e.target.value)} + readOnly >
diff --git a/src/Pages/InvoicePage.jsx b/src/Pages/InvoicePage.jsx index 20efaa1..721d1a0 100644 --- a/src/Pages/InvoicePage.jsx +++ b/src/Pages/InvoicePage.jsx @@ -6,6 +6,7 @@ import moment from 'moment'; import TickIcon from "../assets/tick.svg"; import { getParticularInvoice } from "../utils/dbQueries"; import LinksModal from "../Components/LinksModal/LinksModal"; +import CannotViewModal from "../Components/CannotViewModal/CannotView"; const InvoicePage = ({invoices, account, contract, web3}) => { @@ -13,6 +14,7 @@ const InvoicePage = ({invoices, account, contract, web3}) => { const [invoice, setInvoice] = useState(false); const [invoiceData, setInvoiceData] = useState(false); const [link, setLink] = useState(""); + const [loading, setLoading] = useState(true) useEffect(()=>{ const accountInvoice = invoices.find((invoice) => { @@ -22,7 +24,12 @@ const InvoicePage = ({invoices, account, contract, web3}) => { }, [invoices]); useEffect(()=>{ - handleInvoiceData(invoice.invoiceID); + (async ()=>{ + if(invoice){ + await handleInvoiceData(invoice.invoiceID); + await setLoading(false) + } + })() },[invoice]) const handleInvoiceData = async (invoice_id) => { @@ -194,14 +201,16 @@ const InvoicePage = ({invoices, account, contract, web3}) => {
- +
- ) : ( -

Loading...

+ ) : !loading && ( +
+ +
)} {link.length > 0 && setLink(false)} link={link} />} diff --git a/src/assets/error-circle.png b/src/assets/error-circle.png new file mode 100644 index 0000000000000000000000000000000000000000..f8b594d4bee52e3e583a53a28d9b8c5a66d7131f GIT binary patch literal 1787 zcmVtc5pmc)pCZJ5%WU20RcFX zGh^pqg(f?Ju#oUi&K|&4h7y>GWxDdv{6a%q2}EjgzmC}$^uF|Xv6s&d3m>1fPHWt zE>Uo;08OB6!ylQ57Pj^}bf1c;&(Wvt~%H`kDCTY;NRd--# z%9P=h#x6t81dbxS6FrAmhAHDyLSXTO3$LP&MhOAM4=TKhJ~|}?5mwvmz7Pui%uPYMFlV6258y^1zN-RVr{He#WDaht2rZztHI97W8;ad2_4(B9$eTF?&0=r`* zrlenP|-0Un>XkF)byfYQn0s6yW0MP^Yk3#x9|7#W8+SfZvET~ z#6bz`iXPLx0B3ZG{=+RsjrfnC%c-P7?fYkX(lk4F4~kUY`*2OduRxK?@9Ih8-K5dB z^SZ!77SyhvRll?)V*CO{8XHY`o5xeP1CYXwk3FiyqmaUSNVFaopWCBAMj0RtH{%xO4j zx4`e#q}5u%>LyIwW*~nj!#b^Rgc6=kS`NAp<4{nA?KSt%MiAi%75`wA#y%%|P9g={ z=dL!ZRe~}WCG6?x6~R2dLOp*p_73lLg70kUzSt#bdUi-w5K#2dVK~&AqTK*TP*%>~ zp=|-2F$K6nSxJmz8|64=AOW-)tP+wK$F>|L?#_W4`n&8n*WC{V%FAEh*E;k4#evrQ zCFJZ6H7dJoFK+{__un!RDx@t@7o1BCpEP)K~#7F?VF8t zn=lZ^|73x>6GWMy?gn&%bOU>XdIQ`EnobaBg0>Uboxtq`kO}Gyt~w+Ug7G&eWR%}~ zXJeipr~7mIL?jS~fRX+hTf5b!tc@Cf-B|mh?U}z5V1;XhgVr|Fw$%1d8(m<0jVT$? z!bTS|wFM?2<7!7_m>UY!I&;@ z)ulxkLjrx_N#McPZGtYb!Cyn*CyS6A`h!iWHM)mKd{6fH3uNl=$He$K4>Ap2E^v4F znxmQ@9yv-htXyRk&cPN+B6zlGi@&Lmubj5$9ThiwG{_*=trSO|>jH&S#|dOccqC|P z2tJuz8SseV(Hhg10JeTA3=eM5XU&ss8IWPPWX%Tgl>h_2`wk9%T0haufFa*~$9?@r zC4g-u6^2h*?-A-5FhM+2%W8E2Qp7`54N3vXOn4OHfxE<8K5!WzvxpEjpZFtY0m_)2 z03Q$^Wz0?hh4@hX@g~5&#e$*3v2zAQD}d(R4I<}FfJAOBE_ih8&n^Qth>tR6CqRMt zDEPw(@E3jwq37X!NRSGQ+u;84EZZENdAMW-J|FsAU4_(lLws(m5@cW2EkXbU8?342yen%uf z7En#UThn2i9+GXrueOu64U+7MzP6?Q&5pv%(a*R*YF1j-r%@PS8b94du>7u%}1-j(QL|8xqlB*6~+5;pBT!hOS zyc0x_+C+V>aamIMgv`+OA%Nhy4E;^vZ8rSqA@C)Iw6TNC!sfzL;3-1IW&{sz)*S~u zmq_)4ugqKmnK5{3jkly6ld?P^DqtpKym+~ie10h^KpXV(_IQ(WiQM Date: Fri, 2 Sep 2022 12:28:26 +0100 Subject: [PATCH 2/2] fix create invoice issues --- src/Pages/CreateInvoice/CreateInvoice.jsx | 9 ++++----- src/Pages/InvoicePage.jsx | 10 +++++----- 2 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/Pages/CreateInvoice/CreateInvoice.jsx b/src/Pages/CreateInvoice/CreateInvoice.jsx index a019e72..9cacfb9 100644 --- a/src/Pages/CreateInvoice/CreateInvoice.jsx +++ b/src/Pages/CreateInvoice/CreateInvoice.jsx @@ -348,11 +348,11 @@ const CreateInvoice = ({contract, account}) => { {rows.map((row,i) => ( - handleRow(e,i,"item")} type="text" placeholder='Enter Item Description' readOnly /> - handleRow(e,i,"quantity")} type="number" placeholder='-' className='center-input' readOnly /> - handleRow(e,i,"price")} type="number" placeholder='-' className='center-input' readOnly /> + handleRow(e,i,"item")} type="text" placeholder='Enter Item Description' /> + handleRow(e,i,"quantity")} type="number" placeholder='-' className='center-input' /> + handleRow(e,i,"price")} type="number" placeholder='-' className='center-input' /> - handleRow(e,i,"vat_rate")} placeholder='-' className='center-input pr-10' readOnly /> + handleRow(e,i,"vat_rate")} placeholder='-' className='center-input pr-10' /> % handleRow(e,i,"vat_amount")} placeholder='-' className='center-input' readOnly /> @@ -371,7 +371,6 @@ const CreateInvoice = ({contract, account}) => { placeholder='Thank you for your business' className='notes-text' value={notes} onChange={(e)=>setNotes(e.target.value)} - readOnly >
diff --git a/src/Pages/InvoicePage.jsx b/src/Pages/InvoicePage.jsx index 721d1a0..73d195c 100644 --- a/src/Pages/InvoicePage.jsx +++ b/src/Pages/InvoicePage.jsx @@ -137,14 +137,14 @@ const InvoicePage = ({invoices, account, contract, web3}) => { {invoiceData.total_items?.map((row,i) => ( - - + + - + % - - + + ))}