@tycoonsystems/tycoon-modules/modules/admin/InvoiceAdmin.js

www.tv.tycoon.systems/documentation

function _extends(){return(_extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a,n=arguments[t];for(a in n)Object.prototype.hasOwnProperty.call(n,a)&&(e[a]=n[a])}return e}).apply(this,arguments)}import React from"react";import Script from"next/script";import{v4 as uuidv4}from"uuid";import AdminStyles from"./Admin.module.scss";import PIMStyles from"@tycoonsystems/tycoon-modules/ecommerce/product/ProductImageManager.module.scss";import{Survey}from"@tycoonsystems/tycoon-modules/survey";import InvoiceMatix from"./tools/invoiceMatrix";import{fetchPost}from"@tycoonsystems/tycoon-modules/utility/fetch";import{westernMoneyFormat}from"@tycoonsystems/tycoon-modules/utility/ecommerce";import{tryInstantiateCachedState}from"@tycoonsystems/tycoon-modules/utility/utility/cache";const LIMIT=50,Module=l=>{const[t,a]=React.useState(!1),[e,n]=React.useState(null);var[i,,]=React.useState(null);const[r,c]=React.useState(null),[s,o]=React.useState(-1),[m,,]=React.useState(0),[u,p]=React.useState(!1),[d,y]=React.useState(tryInstantiateCachedState("invoice_defaults",null,p,u)??{answers:{},currentStage:null,pipelineDbItem:{},pipelineObject:{currency:"USD",matrix:[{info:"",rate:10,qty:1}],tax:0},imgFor:[]}),[v,f]=React.useState({id:uuidv4(),status:"unpublished",date:""+new Date,simpleData:{}}),b=React.useRef(),R=e=>{if(e?.pipelineObject?.matrix){let t=0;e.pipelineObject.matrix.map(e=>{console.log(e),t+=(null!==e?.rate?Number(e.rate):0)*(null!==e?.qty?Number(e.qty):0)});var a={...v};a.simpleData.subTotal=t,a.simpleData.tax=e.pipelineObject.tax*t,a.simpleData.total=t+a.simpleData.tax,a.simpleData.currency=d?.pipelineObject?.currency?.currency??"USD",u&&localStorage.setItem("invoice_defaults",JSON.stringify(d)),f(a)}y(e)},g=(React.useEffect(()=>{var e;t||(e=uuidv4(),n(e),a(!0))},[t]),React.useEffect(()=>{-1===s&&!r&&l.apiUrl&&l.domainKey&&l._loggedIn&&(o((new Date).getTime()),g(l.apiUrl,l.domainKey,l._loggedIn))},[e,l.apiUrl,l.domainKey,l._loggedIn]),async(e,t,a)=>{if(a.identifier&&a.hash&&t){a={identifier:a.identifier,hash:a.hash,domainKey:t,offset:m,limit:LIMIT},t=await fetchPost(e+"/a/getinvoices",null,null,a);if(t&&t.hasOwnProperty("status")){if("disauthenticated"==t.status)return logout(),"disauthenticated";if("failed"==t.status)return!1;if("success"==t.status&&t.data)return console.log(t.data),c(t.data),t}}return!1});var E=e=>"",S=React.useCallback(e=>{const t=e.currentTarget.value,a=d;var e=a.pipelineObject,n=Object.entries(l.regionsData).find(e=>e[1].currency===t);e.currency=n&&n[1]?n[1]:null,a.pipelineObject=e,R(null),setTimeout(()=>{R(a)},1)}),E=l?.adminInvoiceTemplate??{name:"Invoice Form",stages:{index:{label:"Invoice Details",pipeline:[{label:"Payer Country",input:{type:"text",var:"payerCountry",validation:E}},{label:"Payer Address",input:{type:"text",var:"payerAddress",default:"Unit Street, City, State Postal Code"}},{label:"Payer Company",input:{type:"text",var:"payerEntity",default:"Company Name"}},{label:"Payer Email",input:{type:"text",var:"payerEmail"}},{label:"Payee Country",input:{type:"text",var:"payeeCountry",validation:E}},{label:"Payee Address",input:{type:"text",var:"payeeAddress",default:"Unit Street, City, State Postal Code"}},{label:"Payee Company",input:{type:"text",var:"payeeEntity",default:"Company Name"}},{label:"Currency",input:{type:"jsx"},jsx:React.createElement("select",{style:{width:"100%"},onChange:S,defaultValue:d?.pipelineObject?.currency?.currency??"USD"},l?.regionsData?Object.entries(l.regionsData).map(e=>React.createElement("option",{className:PIMStyles.setCurrencyOption+" "+(e[1].currency===d?.pipelineObject?.currency?.currency?PIMStyles.currencyOptionUsed:null),value:e[1].currency},React.createElement("div",null,e[1].currency),React.createElement("div",null," "),React.createElement("div",null,e[1].name),React.createElement("div",null," "),React.createElement("div",null,e[1].symbol))):null)},{className:"invoiceMatrix_ExternalContainer",label:"Items",input:{type:"component"},component:InvoiceMatix,props:{regionsData:l.regionsData}},{label:"Tax",input:{type:"price",var:"tax"},symbol:"%"},{label:"Note",input:{type:"text",var:"payeeNote",rows:3,default:"Note regarding invoice"}},{label:"Thankyou",input:{type:"text",var:"thankyou",rows:2,default:"Thankyou note"}}],confirm:{label:"Submit",goto:"end"}},end:{func:()=>{console.log("Finalize Invoice",d,window);const l=window?.jspdf?.jsPDF("p","pt","a4",!0);var e=b?.current;if(console.log(l),e){var t=new Date;const i=`${v?.id??""}_${t.getMonth()+1}/${t.getFullYear()}_Invoice`;html2canvas(e).then(e=>{var t=l.internal.pageSize.getWidth(),a=l.internal.pageSize.getHeight(),n=t,t=t/(e.width/e.height);l.addImage(e.toDataURL("image/jpeg"),"JPEG",0,0,n,a<t?a:t),l.save(i+".pdf")})}},submit:!0}}},S=(console.log("Default Data",r,l.regionsData,d?.pipelineObject,window),l?.regionsData&&d?.pipelineObject?.currency?.currency?Object.entries(l.regionsData).find(e=>e[1].currency===d.pipelineObject.currency?.currency):"");return console.log(S),React.createElement("div",{className:l.className+" Admin_Invoice_Container"},React.createElement(Script,{src:"https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"}),React.createElement(Script,{src:"https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"}),i?React.createElement("p",{className:"error",style:{marginTop:".5rem"},onClick:handleCloseError},i):null,React.createElement("h3",null,"Invoicing"),React.createElement("p",{style:{fontWeight:"600"}},"Generate Invoices for your business and manage general Accounts Receivables"),React.createElement("div",{className:"Invoice_Container"},React.createElement("p",{style:{marginTop:"0.5rem",textAlign:"left",fontWeight:"400",color:"#dbdbdb"}},"Tycoon Systems Pay Me service is a simple way for your business to issue invoices and get paid. Start filling out your invoice below."),React.createElement("div",{className:"Invoice_form_print"},React.createElement(Survey,_extends({},l,{survey:E,surveyState:d,setSurveyState:R})),React.createElement("div",null,React.createElement("div",{style:{fontWeight:"600",fontSize:"1.5rem",marginBottom:"2rem",marginTop:"1rem"}},v?.simpleData?.period??" "),React.createElement("div",{className:""+AdminStyles.InvoiceContainer,style:{marginBottom:"2rem",position:"relative"},ref:b},React.createElement("div",{className:""+AdminStyles.InvoiceInternalContainer},-1<["paid"].indexOf(v?.status)?React.createElement("div",{className:""+AdminStyles.PaidStamp},"Paid"):null,React.createElement("div",null,React.createElement("div",{className:""+AdminStyles.Entity,style:{marginBottom:".5rem"}},d?.pipelineObject?.payeeEntity??" "),React.createElement("pre",null,d?.pipelineObject?.payeeAddress??" "),React.createElement("pre",null,d?.pipelineObject?.payeeCountry??" ")),React.createElement("div",{className:""+AdminStyles.QuoteContainer},React.createElement("div",{className:""+AdminStyles.InvoiceLabel},"INVOICE"),React.createElement("div",null,React.createElement("div",{className:"flex",style:{justifyContent:"space-between",marginLeft:"25%"}},React.createElement("div",null,"Invoice #"),React.createElement("div",null,v?.id??" ")),React.createElement("div",{className:"flex",style:{justifyContent:"space-between",marginLeft:"25%"}},React.createElement("div",null,"Date"),React.createElement("div",null,v?.simpleData?.dateIssued?""+new Date(v.simpleData.dateIssued??"").toLocaleDateString():v?.date?""+new Date(v.date).toLocaleDateString():"")))),React.createElement("div",{className:"flex gap-p2",style:{justifyContent:"space-between"}},React.createElement("div",null,React.createElement("div",{style:{fontWeight:"600"}},"Bill To"),React.createElement("pre",null,d?.pipelineObject?.payerEntity??" "),React.createElement("pre",null,d?.pipelineObject?.payerAddress??" "),React.createElement("pre",null,d?.pipelineObject?.payerCountry??" "),React.createElement("pre",null,d?.pipelineObject?.payerEmail??" ")),v?.simpleData?.total&&d?.pipelineObject?.currency?.currency&&S&&S[1]&&S[1].currencyName?React.createElement("div",null,React.createElement("div",{style:{marginBottom:".25rem"}},"TOTAL AMOUNT DUE IN ",S[1].currencyName.toUpperCase()),React.createElement("div",{style:{fontSize:"2rem",textAlign:"right",fontWeight:"600",background:"blue",color:"white"}},"$ ",westernMoneyFormat.format(v.simpleData.total))):null),React.createElement("div",{className:""+AdminStyles.DetailTableContainer},React.createElement("table",{className:""+AdminStyles.DetailTable},React.createElement("tr",null,React.createElement("th",null,"Details"),React.createElement("th",null,"Rate"),React.createElement("th",null,"Qty"),React.createElement("th",null,"Line Total")),d?.pipelineObject?.matrix?d.pipelineObject.matrix.map((e,t)=>React.createElement("tr",{key:t},React.createElement("td",{className:""+AdminStyles.DescriptionContainer},e.info," ",e.customerCharged?`| $${westernMoneyFormat.format(e.customerCharged)} USD was processed this period`:""),React.createElement("td",{className:""+AdminStyles.TableNumber},e.rate?.toFixed?new Intl.NumberFormat("en-US",{minimumFractionDigits:2,maximumFractionDigits:2}).format(e.rate):e.rate),React.createElement("td",{className:""+AdminStyles.TableNumber},e?.qty?.toFixed?new Intl.NumberFormat("en-US",{minimumFractionDigits:2,maximumFractionDigits:2}).format(e.qty):e.qty),React.createElement("td",{className:""+AdminStyles.TableNumber},(e.rate*e.qty).toFixed?new Intl.NumberFormat("en-US",{minimumFractionDigits:2,maximumFractionDigits:2}).format(e.rate*e.qty):e.lineTotal))):null)),React.createElement("div",{className:"flex gap-p20",style:{justifyContent:"space-between",marginTop:"1rem",background:"#f6f6f6",padding:".25rem"}},React.createElement("div",{style:{width:"100%"}},React.createElement("pre",{style:{fontSize:".75rem",marginTop:"1rem",whiteSpace:"pre-line"}},d?.pipelineObject?.payeeNote??" ")),React.createElement("div",{style:{width:"100%"}},React.createElement("div",{className:"flex",style:{justifyContent:"space-between",width:"100%"}},React.createElement("div",null,"Subtotal"),React.createElement("div",{className:"w600"},"$ ",v?.simpleData?.subTotal?westernMoneyFormat.format(v.simpleData.subTotal):" ")),React.createElement("div",{className:"flex",style:{justifyContent:"space-between",width:"100%"}},React.createElement("div",null,"Tax"),React.createElement("div",{className:"w600"},"$ ",v?.simpleData?.subTotal?westernMoneyFormat.format(v.simpleData.tax):" ")),React.createElement("div",null," "),React.createElement("div",{className:"flex",style:{borderTop:"1px solid black",justifyContent:"space-between",width:"100%"}},React.createElement("div",null,"Total Due"),React.createElement("div",{className:"w600"},"$ ",v?.simpleData?.total?westernMoneyFormat.format(v.simpleData.total):" ")),React.createElement("div",{style:{fontSize:".7rem"}},"(",v?.simpleData?.currency??" ",")"))),React.createElement("div",null,React.createElement("pre",{className:""+AdminStyles.millerText,style:{textAlign:"right",fontStyle:"italic"}},d?.pipelineObject?.thankyou??" "))))))))};export default Module;