@tycoonsystems/tycoon-modules/modules/payment/CreditCard.js

www.tv.tycoon.systems/documentation

import React from"react";import{Elements,CardElement,ElementsConsumer}from"@stripe/react-stripe-js";import{loadStripe}from"@stripe/stripe-js";import{getStripeSecretData,saveCreditCardInfo}from"@tycoonsystems/tycoon-modules/utility/payment/index";import{checkSignedIn,checkSignedInAndPrompt,logout}from"@tycoonsystems/tycoon-modules/utility/onboarding/SignIn";import{fireGlobalEvent}from"@tycoonsystems/tycoon-modules/utility/utility";const DEFAULT_SOLUTION={payment:"stripe"},Module=i=>{const n=React.useRef(),[e,t]=React.useState(!1),[a,r]=React.useState(!1),[c,l]=React.useState(!1),[s,o]=React.useState(!1),[m,d]=React.useState(null),[u,p]=React.useState(!1),[g,y]=React.useState(!1),[_,S]=React.useState(DEFAULT_SOLUTION),f=React.useRef(),E=(React.useEffect(()=>{e||(i._setSolution&&i._setSolution(_),i.stagger&&(f.current=setTimeout(()=>{r(!0)},i.stagger)),t(!0))},[e,i.stagger,_]),React.useCallback(e=>{var t;return"incomplete"===i?._loggedIn?.meta?.account?(t=i._loggedIn.meta).firstName+" "+t.lastName:""})),C=(React.useEffect(()=>{var e;i?._loggedIn?.meta?.location&&i?.regionsData&&i.regionsData[i._loggedIn.meta.location]&&((e=i.regionsData[i._loggedIn.meta.location]).payment!==_.payment||!_||_&&!_.payment)&&(S(e),i.setSolution&&i.setSolution(e),i.setShowContent)&&i.setShowContent(-1<["stripe"].indexOf(e.payment))},[i._loggedIn,i.regionsData,_,i.setSolution]),React.useEffect(()=>{var e;console.log(i.useAdmin,i.paymentConfig),i?.useAdmin?(e=loadStripe(i.useAdmin))&&d(e):i?.paymentConfig?.keys?.stripe&&!m&&(e=loadStripe(i.paymentConfig.keys.stripe))&&d(e)},[i?.paymentConfig?.keys?.stripe,i.useAdmin]),React.useEffect(()=>{!async function(){if("stripe"===_.payment&&!c&&i._loggedIn&&!s&&!i._stripeSecret)try{o(!0);var e=await getStripeSecretData(i.apiUrl,i.domainKey,i._loggedIn,{useAdmin:i?.useAdmin});if(!(e&&e.client_secret&&e.card))throw new Error;i._setStripeSecret(e),o(!1)}catch(e){console.log(e),o(!1)}}()},[i._loggedIn,i._stripeSecret,_,i.useAdmin]),React.useEffect(()=>{C(i._stripeSecret)},[i._stripeSecret]),e=>{e?.card?.data&&e.card.data[0]&&e.card.data[0]?.card&&e.card.data[0]?.billing_details&&e.card.data[0].card?.last4&&e.card.data[0].card?.exp_month&&e.card.data[0].card?.exp_year&&l({name:e.card.data[0].billing_details.name||null,last4:e.card.data[0].card.last4,exp_month:e.card.data[0].card.exp_month,exp_year:(t=>{try{var e=t.toString();if(4===e.length)return e.substring(2,4);throw new Error}catch(e){return console.log(e),t}})(e.card.data[0].card.exp_year)})});React.useEffect(()=>{(!i._setValidCc||i._validCc===c||!c)&&c||i._setValidCc(c)},[i?._validCc,c]),React.useEffect(()=>{(i?._stripeSecret.adminSecret&&i.validCc&&!i.useAdmin||i.useAdmin&&i?._stripeSecret&&!i._stripeSecret.adminSecret)&&(l(!1),i._setStripeSecret(!1))},[i?._stripeSecret,i?.useAdmin,i?._validCc]);var R=React.useCallback(e=>{if(u)return p(!1),1;p(!0)});const h="full"===i._loggedIn?.meta?.account;return React.createElement("div",{className:""+i.className,style:i.sx},React.createElement("div",{className:g?"fetchNotBusy fetchBusy":"fetchNotBusy"}),i.useAdmin?React.createElement("div",{style:{background:"#353535"}},"Payments to Tycoon Systems Corp."):null,!i.stagger||i.stagger&&a?React.createElement(React.Fragment,null,"stripe"===_?.payment?c&&!u?React.createElement("div",null,React.createElement("div",{className:"Ecommerce_CreditCard_Container",style:{padding:".125rem"}},i.purchaseDescription?React.createElement("span",null,i.purchaseDescription):null,React.createElement("div",{className:"Ecommerce_CreditCard_Container_Meta"},React.createElement("div",null,React.createElement("p",{style:{marginBottom:"0.1rem",paddingBottom:"0rem",margin:0}},"Ending in ",React.createElement("span",null,c.last4)),React.createElement("p",{style:{marginBottom:"0.1rem",paddingBottom:"0rem",margin:0}},"Expiry ",React.createElement("span",null,c.exp_month," / ",c.exp_year))),c.name?React.createElement("p",{style:{marginTop:0,margin:0}},c.name):null))):i._stripeSecret&&i._stripeSecret.client_secret?React.createElement(Elements,{stripe:m,options:{clientSecret:i._stripeSecret.client_secret}},React.createElement(ElementsConsumer,null,({elements:t,stripe:a})=>React.createElement("form",{onSubmit:e=>{(async(e,t,a,n)=>{try{e.preventDefault();var r,c,l=document.getElementById("Ecommerce_CreditCard_FullNameInput")??n?.current;console.log(e,t,a,l),g||(y(!0),setTimeout(()=>{y(!1)},15e3),checkSignedInAndPrompt()&&(l.value?((r={fullName:"",result:null,stripeSecret:i._stripeSecret}).fullName=l.value,r.result=await a.confirmCardSetup(i._stripeSecret.client_secret,{payment_method:{card:t.getElement(CardElement),billing_details:{name:r.fullName}}}),console.log("Stripe Payment",r,i),(c=await saveCreditCardInfo(i.apiUrl,i.domainKey,r,checkSignedIn,{useAdmin:i?.useAdmin}))?"disauthenticated"==c?(i._setLoggedIn(!1),i._setStripeSecret(!1),logout(),y(!1)):"success"==c.status&&c.newSecret&&(p(!1),i._setStripeSecret(c.newSecret),y(!1),i.expressCheckout&&(i.setFetchBusy(!0),setTimeout(()=>{i.setFetchBusy(!1),setTimeout(()=>{fireGlobalEvent({event:"checkout"},i._LocalEventEmitter)},1)},500)),i.saveBillingInfoFunction)&&(i.setFetchBusy(!0),setTimeout(()=>{i.setFetchBusy(!1),setTimeout(()=>{i.saveBillingInfoFunction()},1)},Object.prototype.hasOwnProperty.call(i,"saveBillingInfoFunctionDelay")?i.saveBillingInfoFunctionDelay:150)):(i._setPageError("Failed to save Credit Card"),y(!1))):(i._setPageError("Please type in your Full Name as it appears on your Credit Card"),y(!1))))}catch(e){console.log(e),y(!1)}})(e,t,a,n)},style:{display:"grid",gap:".125rem"}},React.createElement("input",{className:"Ecommerce_CreditCard_FullNameInput_Default",type:"text",placeholder:"Full Name on Card",ref:n,defaultValue:E()}),React.createElement(CardElement,{options:{iconStyle:"solid",style:{base:{fontSize:"16px",color:"black",fontWeight:500,"::placeholder":{color:"grey"},fontSmoothing:"antialiased",width:"100%",backgroundColor:"white"},invalid:{color:"#9e2146"}}}}),h?React.createElement("button",{type:"submit"},i.saveBillingInfoText??"Save Billing Info"):!h&&i?._stripeSecret?.client_secret?React.createElement("button",{type:"submit",modif:"hidden_initiate_save_billing_info"},i.saveBillingInfoText??i?.expressCheckout?"Purchase":"Save Billing Info"):null))):null:null,"stripe"===_?.payment&&c?React.createElement("div",{style:{display:"grid",gap:".125rem",marginTop:".125rem"}},React.createElement("button",{type:"submit",onClick:R},u?"Use Current Card":"Register New Card")):null):null)};export default Module;