import * as React from "react" ; import styled from "styled-components" ; import { PaymentInputLabel } from "./PaymentsStyledComponents" ; import { InputValidationUI , InputStripeValidationUI , StripeElement , InputErrorMessage } from "./PaymentsInputValidationUI" ; import { PaymentEmailPrepopulatedText , PaymentEmailConfirmationText , AddCardEmailConfirmationText } from "./PaymentsTextComponents" ; import { CardElement } from "react-stripe-elements" ; const StripeWrapper = styled . div `
  margin: 20px 0 0;
  max-width: 500px;
  width: 100%;
` ; interface PaymentsStripeCardComponentProps { email : string ; wasEmailPrepopulated : boolean ; emailState : string ; nameState : string ; cardInfoState : string ; displayStripeErrorMessage : string ; showAddCardText ? : boolean ; handleOnBlur ( event ) : void ; handleStripeChange ( event ) : void ; } export const PaymentsStripeCardComponent = props => { const { email , wasEmailPrepopulated , emailState , nameState , cardInfoState , displayStripeErrorMessage , handleOnBlur , handleStripeChange , showAddCardText } = props ; return ( < StripeWrapper > { wasEmailPrepopulated && < PaymentEmailPrepopulatedText email = { email } / > } { ! wasEmailPrepopulated && ( < > < PaymentInputLabel > Email Address < /PaymentInputLabel> < InputValidationUI inputState = { emailState } > < input defaultValue = { email } id = "email" name = "email" type = "email" maxLength = { 254 } onBlur = { ( ) => handleOnBlur ( event ) } /> { showAddCardText && < AddCardEmailConfirmationText />} { ! showAddCardText && < PaymentEmailConfirmationText />} < /InputValidationUI> < />)} < PaymentInputLabel > Name on card < /PaymentInputLabel> < InputValidationUI inputState = { nameState } > < input id = "name" name = "name" onBlur = { ( ) => handleOnBlur ( event ) } required / > < /InputValidationUI> < PaymentInputLabel > Card information < /PaymentInputLabel> < InputStripeValidationUI inputState = { cardInfoState } > < StripeElement inputState = { cardInfoState } > < CardElement id = "card-info" style = { { base : { fontSize : "13px" } } } onChange = { handleStripeChange } / > < /StripeElement> { displayStripeErrorMessage !== "" && ( < InputErrorMessage > { displayStripeErrorMessage } < /InputErrorMessage>)} < /InputStripeValidationUI> < /StripeWrapper>); } ;