import * as React from "react" ; import { MutationFunc } from "react-apollo" ; import { injectStripe , ReactStripeElements , PaymentRequestButtonElement } from "react-stripe-elements" ; import styled from "styled-components" ; import { colors } from "@joincivil/elements" ; import { PaymentExpress , PaymentOrBorder } from "./PaymentsStyledComponents" ; import { ExpressPayText } from "./PaymentsTextComponents" ; const StripePaymentRequest = styled . div `
  border-bottom: 1px solid ${ colors . accent . CIVIL_GRAY_2 };
  margin-bottom: 10px;
  padding: 10px 0;
` ; export interface PaymentRequestProps extends ReactStripeElements . InjectedStripeProps { savePayment : MutationFunc ; boostId : string ; usdToSpend : number ; userChannelID ? : string ; shouldPublicize : boolean ; handlePaymentSuccess ( ) : void ; onPayRequestError ? ( ) : void ; } export interface PaymentRequestStates { canMakePayment : boolean ; paymentRequest : any ; } class PaymentRequestForm extends React . Component < PaymentRequestProps , PaymentRequestStates > { constructor ( props ) { super ( props ) ; const paymentRequest = props . stripe . paymentRequest ( { country : "US" , currency : "usd" , total : { label : "Civil Boost" , amount : this . props . usdToSpend * 100 , } , requestPayerName : true , requestPayerEmail : true , } ) ; paymentRequest . on ( "token" , async ( ev ) => { if ( ev && ev . token && ev . complete && ev . payerEmail ) { return this . handlePaymentRequest ( ev . token , ev . complete , ev . payerEmail ) ; } else { console . error ( "Error processing Payment Request" ) ; if ( this . props . onPayRequestError ) { this . props . onPayRequestError ( ) ; } } } ) ; paymentRequest . canMakePayment ( ) . then ( ( result ) => { this . setState ( { canMakePayment : ! ! result } ) ; } ) ; this . state = { canMakePayment : false , paymentRequest , } ; } public render ( ) { return this . state . canMakePayment ? ( < PaymentExpress > < ExpressPayText /> < StripePaymentRequest > < PaymentRequestButtonElement paymentRequest = { this . state . paymentRequest } className = "PaymentRequestButton" / > < /StripePaymentRequest> < PaymentOrBorder / > < /PaymentExpress>) : (<></ > ) ; } private async handlePaymentRequest ( token , complete , email ) { try { await this . props . savePayment ( { variables : { postID : this . props . boostId , input : { paymentToken : token . id , amount : this . props . usdToSpend , currencyCode : "usd" , emailAddress : email , shouldPublicize : this . props . shouldPublicize , payerChannelID : this . props . userChannelID , } , } , } ) ; complete ( "success" ) ; this . props . handlePaymentSuccess ( ) ; } catch ( err ) { console . error ( err ) ; complete ( "fail" ) ; if ( this . props . onPayRequestError ) { this . props . onPayRequestError ( ) ; } } } } export default injectStripe ( PaymentRequestForm ) ;