@tycoonsystems/tycoon-modules/modules/admin/BillingAdmin.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,l=arguments[t];for(a in l)Object.prototype.hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e}).apply(this,arguments)}import React from"react";import{v4 as uuidv4}from"uuid";import AdminStyles from"./Admin.module.scss";import{logout}from"@tycoonsystems/tycoon-modules/utility/onboarding/SignIn";import{fetchPost}from"@tycoonsystems/tycoon-modules/utility/fetch";import{MONTHS}from"@tycoonsystems/tycoon-modules/utility/utility/date";import{westernMoneyFormat}from"@tycoonsystems/tycoon-modules/utility/ecommerce";import{CreditCard}from"@tycoonsystems/tycoon-modules/payment";const moduleName="BillingAdmin",Module=c=>{const[t,a]=React.useState(!1),[,l]=React.useState(null),[i,r]=React.useState(!1),[s,n]=React.useState((new Date).getMonth()),[o,m]=React.useState((new Date).getFullYear()),[e,d]=React.useState(null),[u,y]=React.useState(null),[R,p]=React.useState([]),[E,v]=React.useState(!1),[f,g]=React.useState(null),[b,N]=React.useState(0),[h,S]=React.useState("Invoice"),w=(c._LocalEventEmitter.unsubscribe(moduleName),c._LocalEventEmitter.subscribe(moduleName,e=>{e&&e.dispatch}),React.useEffect(()=>{var e;t||(e=uuidv4(),l(e),w(),a(!0))},[t]),async(e,t)=>{var a,l,n,m;try{if(!i)return r(!0),a=setTimeout(()=>{r(!1)},1e4),l={domainKey:c.domainKey,hash:c._loggedIn.hash,identifier:c._loggedIn.identifier,month:void 0!==e?e:s,year:void 0!==t?t:o,adminStripeSecretKey:!0},(n=await fetchPost(c.apiUrl+"/a/getplatformbillinginvoices",null,null,l))?n.hasOwnProperty("status")?(r(!1),clearTimeout(a),"disauthenticated"==n.status?(logout(),"disauthenticated"):"failed"==n.status?(d(null),!1):"success"==n.status?(console.log(n),n?.data&&d(n.data),n?.adminStripeSecretKey&&(g(n.adminStripeSecretKey),v(!0)),n.outstanding&&y(n.outstanding),n?.payments&&n.payments?.nestedResults&&(m=n.payments.nestedResults,p(m)),n?.credits&&!isNaN(Number(n.credits))&&N(Number(n.credits)),n):void 0):void 0:(r(!1),clearTimeout(a),!1)}catch(e){r(!1)}}),D=React.useCallback(async e=>{var t;e?.currentTarget?.getAttribute&&(t=e.currentTarget.getAttribute("m"),e=e.currentTarget.getAttribute("y"),void 0!==t)&&void 0!==e&&(n(Number(t)),m(Number(e)),await w(Number(t),Number(e)))});var T=React.useMemo(()=>{var t=[];let a=(new Date).getMonth(),l=(new Date).getFullYear();for(let e=0;e<24;e++)t.push({m:a,y:l}),0===a?(--l,a=11):--a;return t},[s,o]);const C=React.useCallback(e=>{e?.currentTarget?.getAttribute("modif")&&S(e.currentTarget.getAttribute("modif"))});return console.log(s,o,e,c),React.createElement("div",{className:`${c.className} ${moduleName}_Container`},React.createElement("h3",null,"Billing"),React.createElement("div",{className:"Billing_Container"},React.createElement("div",{className:"tagContainer tinyBar",style:{paddingBottom:".25rem"}},["Invoice","Payments"].map((e,t)=>React.createElement("button",{className:"tagItem "+(h===e?"tagItemSelected":""),style:{whiteSpace:"nowrap"},key:t,modif:e,onClick:C},e))),"Invoice"===h?React.createElement("div",null,React.createElement("div",{className:AdminStyles.MonthsContainer+" tagContainer tinyBar",style:{paddingBottom:".25rem"}},T.map((e,t)=>React.createElement("button",{className:"tagItem "+(s===e.m&&o===e.y?"tagItemSelected":""),style:{whiteSpace:"nowrap"},key:t,m:e.m,y:e.y,onClick:D},MONTHS[e.m]," ",e.y))),React.createElement("div",{className:"flex gap-p10",style:{marginTop:".25rem",marginBottom:".5rem"}},i?null:React.createElement(React.Fragment,null,u?React.createElement("div",{className:"info_box"},React.createElement("div",{style:{fontSize:"1rem",fontWeight:"600"}},"Outstanding"),React.createElement("div",null,"$ ",u.total?westernMoneyFormat.format(u.total):"0")):null,React.createElement("div",{className:"info_box"},React.createElement("div",{style:{fontSize:"1rem",fontWeight:"600"}},"Credits"),React.createElement("div",{style:{color:"#4dffbb"}},"$ ",b?westernMoneyFormat.format(b):"0")))),i?React.createElement("div",{className:"Ecommerce_Spinner Ecommerce_SpinnerVisible",style:{height:"25px",width:"50px",position:"relative"}},React.createElement("div",{className:"spinner spinnerSm opacity1",style:{margin:0}})):0===e?.simpleData?.total&&"not due"!==e?.status?React.createElement("div",{style:{marginBottom:".5rem"}},React.createElement("div",{style:{fontSize:"1rem",fontWeight:"600"}},"No bill this month"),React.createElement("div",null,"Thankyou for your Business")):"paid"===e?.status?React.createElement("div",{style:{marginBottom:".5rem"}},React.createElement("div",{style:{fontSize:"1rem",fontWeight:"600"}},"Paid"),React.createElement("div",null,"Thankyou for your Business")):null,React.createElement("div",null,i?null:e?React.createElement("div",{className:""+AdminStyles.ChargesExternalContainer,style:{marginTop:".5rem"}},React.createElement("div",{style:{marginBottom:"2rem",marginTop:"1rem"}},React.createElement("div",{style:{fontWeight:"600",fontSize:"1.5rem",borderBottom:"2px solid grey"}},"Tycoon Systems Corp. charges by service"),React.createElement("div",{style:{color:"grey",fontSize:".75rem",display:"flex",justifyContent:"space-between"}},React.createElement("span",null,e?.id??""),React.createElement("span",null,e?.simpleData?.period??""))),React.createElement("div",{className:""+AdminStyles.ChargesContainer,style:{marginBottom:"2rem"}},React.createElement("div",{className:""+AdminStyles.ChargesInternalContainer},React.createElement("div",{className:""+AdminStyles.DetailTableContainer},React.createElement("table",{className:AdminStyles.DetailTable+" "+AdminStyles.DetailTableCheckered,style:{width:"100%"}},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")),e?.simpleData?.table?e.simpleData.table.map((e,t)=>React.createElement("tr",{key:t},React.createElement("td",{className:""+AdminStyles.DescriptionContainer},e.description,e.customerCharged?React.createElement(React.Fragment,null,React.createElement("span",null," | "),React.createElement("span",null,React.createElement("span",{style:{color:"#27ff27",fontWeight:"600"}},"$",westernMoneyFormat.format(e.customerCharged))," USD was processed this period")):null,e.simpleCount?React.createElement(React.Fragment,null,React.createElement("span",null," | "),React.createElement("span",null,React.createElement("span",{style:{color:"#ffe17c"}},isNaN(Number(e.simpleCount))?e.simpleCount:Number(e.simpleCount).toLocaleString()),e?.rawMeaBy?" "+e.rawMeaBy:"")):null),React.createElement("td",{className:""+AdminStyles.TableNumber},e.rate?.toFixed?new Intl.NumberFormat("en-US",{minimumFractionDigits:2,maximumFractionDigits:e.rate<.01?6:2}).format(e.rate):e.rate,"/",e.measureBy),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?.lineTotal?.toFixed?new Intl.NumberFormat("en-US",{minimumFractionDigits:2,maximumFractionDigits:2}).format(e.lineTotal):e.lineTotal))):null)),React.createElement("div",{className:"flex gap-p20",style:{justifyContent:"right",marginTop:"1rem"}},React.createElement("div",{style:{maxWidth:"300px",width:"100%"}},React.createElement("div",{className:"flex",style:{justifyContent:"space-between",width:"100%"}},React.createElement("div",null,"Subtotal"),e?.simpleData?.oldTotal?React.createElement("div",{className:"w600",style:{color:"red",textDecoration:"line-through"}},"$ ",e?.simpleData?.oldTotal?westernMoneyFormat.format(e.simpleData.oldTotal):"0"):React.createElement("div",{className:"w600"},"$ ",e?.simpleData?.subTotal?westernMoneyFormat.format(e.simpleData.subTotal):"0")),e?.simpleData?.discount?React.createElement(React.Fragment,null,React.createElement("div",{className:"flex",style:{justifyContent:"space-between",width:"100%"}},React.createElement("div",null,"Discount"),React.createElement("div",{className:"w600",style:{color:"rgb(39, 255, 39)"}},"$ ",e?.simpleData?.discount?westernMoneyFormat.format(e.simpleData.discount):"0")),React.createElement("div",{className:"flex",style:{justifyContent:"space-between",width:"100%"}},React.createElement("div",null,"Updated Subtotal"),React.createElement("div",{className:"w600"},"$ ",e?.simpleData?.subTotal?westernMoneyFormat.format(e.simpleData.subTotal):"0"))):null,React.createElement("div",{className:"flex",style:{justifyContent:"space-between",width:"100%"}},React.createElement("div",null,"Tax"),React.createElement("div",{className:"w600"},"$ ",e?.simpleData?.subTotal?westernMoneyFormat.format(e.simpleData.tax):"0")),React.createElement("div",null," "),React.createElement("div",{className:"flex",style:{borderTop:"1px solid black",justifyContent:"space-between",width:"100%"}},React.createElement("div",null,"Current Bill Total"),React.createElement("div",{className:"w600"},"$ ",e?.simpleData?.total?westernMoneyFormat.format(e.simpleData.total):"0")),React.createElement("div",{style:{fontSize:".7rem"}},"(",e?.simpleData?.currency??" ",")"))),React.createElement("div",null,React.createElement("div",{style:{marginTop:"1rem",fontSize:".75rem"}},"not due"===e?.status?"This Bill is not due yet. None of the posted values are final until period is complete":-1<["due","sent"].indexOf(e?.status)?"This Bill is due, please see Invoice":-1<["paid"].indexOf(e?.status)?"This Bill has been paid":" "))))):React.createElement("div",null,"No Billing Info for this period"),!i&&-1<["due","sent","paid"].indexOf(e?.status)&&void 0!==s&&null!==e&&0!==e?.simpleData?.total?React.createElement("div",null,React.createElement("div",{style:{fontWeight:"600",fontSize:"1.5rem",marginBottom:"2rem",marginTop:"1rem"}},"Please see your Invoice for the month of ",e?.simpleData?.period??""+MONTHS[s]+o??" "," below"),React.createElement("div",{className:""+AdminStyles.InvoiceContainer,style:{marginBottom:"2rem",position:"relative"}},React.createElement("div",{className:""+AdminStyles.InvoiceInternalContainer},-1<["paid"].indexOf(e?.status)?React.createElement("div",{className:""+AdminStyles.PaidStamp},"Paid"):null,React.createElement("div",null,React.createElement("div",{className:""+AdminStyles.Entity,style:{marginBottom:".5rem"}},e?.data?.payeeEntity??" "),React.createElement("div",null,e?.data?.address??" "),React.createElement("div",{className:"flex gap-p2"},React.createElement("div",null,e?.data?.payeeCity?e.data.payeeCity+", ":" "),React.createElement("div",null,e?.data?.payeeState??" "),React.createElement("div",null,e?.data?.payeePostalCode??" ")),React.createElement("div",null,e?.data?.payeeCountry??" "),React.createElement("div",{className:"flex gap-p2"},React.createElement("div",null,e?.data?.payeeNumber??" "),React.createElement("div",null,e?.data?.payeeNumber&&e?.data?.payeeWebsite?"|":" "),React.createElement("div",null,e?.data?.payeeWebsite??" "))),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,e?.id??" ")),React.createElement("div",{className:"flex",style:{justifyContent:"space-between",marginLeft:"25%"}},React.createElement("div",null,"Date"),React.createElement("div",null,e?.simpleData?.dateIssued?new Date(e.simpleData.dateIssued).toLocaleDateString()+" "+new Date(e.simpleData.dateIssued).toTimeString():" ")))),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("div",null,e?.data?.payerEntity?e.data.payerEntity.toUpperCase():""),React.createElement("div",{className:"flex gap-p2"},React.createElement("div",null,e?.data?.payerCity?e.data.payerCity+", ":""),React.createElement("div",null,e?.data?.payerState??""),React.createElement("div",null,e?.data?.payerPostalCode??"")),React.createElement("div",null,e?.data?.payerCountry??""),React.createElement("div",{className:"flex gap-p2"},e?.data?.payerNumber?React.createElement("div",null,e?.data?.payerNumber):null,e?.data?.payerNumber&&e?.data?.payerWebsite?React.createElement("div",null,e?.data?.payerNumber&&e?.data?.payerWebsite?"|":""):null,React.createElement("div",null,e?.data?.payerWebsite??" "))),e?.simpleData?.total&&e?.data?.currency?React.createElement("div",null,React.createElement("div",{style:{marginBottom:".25rem"}},"TOTAL AMOUNT DUE IN ",e.data.currency),React.createElement("div",{style:{fontSize:"2rem",textAlign:"right",fontWeight:"600",background:"blue",color:"white"}},"$ ",westernMoneyFormat.format(e.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")),e?.simpleData?.table?e.simpleData.table.map((e,t)=>React.createElement("tr",{key:t},React.createElement("td",{className:""+AdminStyles.DescriptionContainer},e.description," ",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,"/",e.measureBy),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?.lineTotal?.toFixed?new Intl.NumberFormat("en-US",{minimumFractionDigits:2,maximumFractionDigits:2}).format(e.lineTotal):e.lineTotal))):null)),React.createElement("div",{className:"flex gap-p20",style:{justifyContent:"space-between",marginTop:"1rem"}},React.createElement("div",{style:{width:"100%"}},React.createElement("div",{className:"w600",style:{fontSize:".8rem"}},"Payment Method"),React.createElement("div",{style:{fontSize:".75rem"}},e?.data?.paymentMethod??" "),React.createElement("div",{style:{fontSize:".75rem",marginTop:"1rem"}},e?.data?.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"},"$ ",e?.simpleData?.subTotal?westernMoneyFormat.format(e.simpleData.subTotal):" ")),React.createElement("div",{className:"flex",style:{justifyContent:"space-between",width:"100%"}},React.createElement("div",null,"Tax"),React.createElement("div",{className:"w600"},"$ ",e?.simpleData?.subTotal?westernMoneyFormat.format(e.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"},"$ ",e?.simpleData?.total?westernMoneyFormat.format(e.simpleData.total):" ")),React.createElement("div",{style:{fontSize:".7rem"}},"(",e?.simpleData?.currency??" ",")"))),React.createElement("div",null,React.createElement("div",{className:""+AdminStyles.millerText,style:{textAlign:"right",fontStyle:"italic"}},e?.data?.paymentThankyou??" "))))):null)):"Payments"===h?React.createElement("div",null,E?React.createElement("div",{style:{marginBottom:".5rem"}},React.createElement(CreditCard,_extends({},c,{useAdmin:f,hide:E}))):null,0<R?.length?React.createElement("div",null,React.createElement("div",{style:{fontSize:"1rem",fontWeight:"600"}},"Payments"),React.createElement("div",{style:{overflow:"auto"}},React.createElement("table",{className:AdminStyles.DetailTable+" "+AdminStyles.DetailTableCheckered,style:{width:"100%"}},React.createElement("tr",null,React.createElement("th",null,"Total"),React.createElement("th",null,"Status"),React.createElement("th",null,"Date"),React.createElement("th",null,"id")),R.map((e,t)=>React.createElement(React.Fragment,null,e?.meta?.status?React.createElement("tr",{key:t},React.createElement("td",{style:{fontWeight:600,color:-1<["succeeded"].indexOf(e.meta.status)?"#a6e22e":""}},"$ ",e?.completetotal?westernMoneyFormat.format(e.completetotal):""," ",e?.meta?.currency?e.meta.currency.toUpperCase():""),React.createElement("td",null,"succeeded"===e.meta.status?"Paid":e.meta.status),React.createElement("td",null,e?.meta?.created&&!isNaN(new Date(e.meta.created))?new Date(e.meta.created).toString():""),React.createElement("td",null,e?.id??"")):null))))):null):null))};export default Module;