}\n
\n
\n \n
\n {reader.label}
\n \n Serial: {reader.serial_number}\n \n \n \n
\n \n {this.renderConnectionStatus(reader)}\n
\n \n
\n );\n }\n}","import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst PhoneNumber = ({phone}) => {\n if (!phone) {\n return null;\n }\n\n const number = `(${phone.number.substr(0, 3)}) ${phone.number.substr(3, 3)}-${phone.number.substr(6)}`;\n const ext = phone.ext ? ` x${phone.ext}` : '';\n\n return {number + ext};\n};\n\nPhoneNumber.propTypes = {\n phone: PropTypes.shape({\n category: PropTypes.string.isRequired,\n number: PropTypes.string.isRequired,\n ext: PropTypes.string\n }).isRequired\n};\n\nexport default PhoneNumber;","import {loadStripeTerminal} from '@stripe/terminal-js';\nimport Rails from '@rails/ujs';\n\nconst fetchConnectionToken = () => new Promise((resolve, reject) => {\n Rails.ajax({\n url: '/stripe/connection_token',\n type: 'post',\n async: false,\n success: data => {\n resolve(data.secret);\n },\n error: error => {\n reject(error);\n }\n });\n});\n\nconst unexpectedDisconnect = () => {\n /*\n * In this function, your app should notify the user that the reader disconnected.\n * You can also include a way to attempt to reconnect to a reader.\n */\n};\n\nconst createInstance = async() => {\n const terminal = await loadStripeTerminal();\n return terminal.create({\n onFetchConnectionToken: fetchConnectionToken,\n onUnexpectedReaderDisconnect: unexpectedDisconnect\n });\n};\n\nconst discoverStripeReaders = terminal => new Promise((resolve, reject) => {\n terminal.discoverReaders({simulated: false}).then(discoverResult => {\n if (discoverResult.error) {\n reject(discoverResult.error);\n }\n else if (discoverResult.discoveredReaders.length === 0) {\n reject(new Error('No available readers.'));\n }\n else {\n resolve(discoverResult.discoveredReaders);\n }\n });\n});\n\nexport default class StripeTerminal {\n static create() {\n const stripe = {};\n return new Promise((resolve, reject) => {\n createInstance().then(async instance => {\n stripe.instance = instance;\n stripe.readers = await discoverStripeReaders(instance).catch(error => reject(error));\n resolve(stripe);\n }).catch(error => {\n reject(error);\n });\n });\n }\n}","import React, {PureComponent} from 'react';\nimport StripeIcon from '../assets/images/stripe.svg';\nimport Rails from '@rails/ujs';\nimport Foundation from 'foundation-sites';\nimport $ from 'jquery';\nimport DialogCloseButton from './dialog_buttons/DialogCloseButton';\nimport {AlertCallout, InfoCallout, SuccessCallout, WarningCallout} from './utilities/Callout';\nimport FAIcon from './utilities/FAIcon';\nimport Cookies from 'js-cookie';\nimport StripeTerminal from './StripeTerminal';\nimport MoneyInput from './form_fields/MoneyInput';\nimport PropTypes from 'prop-types';\n\n/* global Rollbar */\nexport default class TerminalPayment extends PureComponent {\n constructor(props) {\n super(props);\n\n this.clientSecret = null;\n this.activeReaderId = null;\n this.state = {\n addressLine1: props.addressLine1 || '',\n amount: props.amount?.toString(),\n connected: false,\n cardNumber: '',\n cardMonth: '',\n cardYear: '',\n cardCvc: '',\n email: props.email || '',\n error: null,\n estimateId: props.estimateId || '',\n jobId: props.jobId || '',\n method: 'terminal',\n initializingPayment: false,\n waitingOnCustomer: false,\n processingPayment: false,\n payment: null,\n stripe: null,\n paymentSucceeded: false,\n collectingPayment: false,\n breakpoint: Foundation.MediaQuery.current\n };\n this._isMounted = false;\n }\n\n componentDidMount() {\n this._isMounted = true;\n $(window).resize(this.handleResize);\n $(document).on('closed.zf.reveal', this.cancelPayment);\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n $(window).off('resize', this.handleResize);\n\n if (this.dialog) {\n this.dialog.destroy();\n }\n }\n\n handleResize = () => {\n if (this.state.breakpoint !== Foundation.MediaQuery.current) {\n this.setState({breakpoint: Foundation.MediaQuery.current});\n }\n };\n\n initialize = () => {\n this.setState({error: null});\n this.activeReaderId = Cookies.get('activeReaderId');\n StripeTerminal.create().then(stripe => {\n this.setState({stripe});\n const reader = stripe.readers.find(r => r.id === this.activeReaderId);\n\n if (reader) {\n this.connectReader(reader);\n }\n }).catch(error => {\n this.setState({error: error.message});\n });\n };\n\n openDialog = () => {\n const {connected} = this.state;\n\n if (!this.dialog) {\n this.dialog = new Foundation.Reveal($('#stripe-terminal'));\n }\n\n this.dialog.open();\n\n if (!connected) {\n this.initialize();\n }\n };\n\n connectReader = reader => {\n const {stripe} = this.state;\n stripe.instance.connectReader(reader).then(connectResult => {\n if (connectResult.error) {\n this.setState({error: connectResult.error.message});\n }\n else {\n this.setState({connected: true});\n }\n });\n };\n\n fetchPaymentIntent = () => new Promise((resolve, reject) => {\n const {amount, email, estimateId, jobId} = this.state;\n const data = new FormData();\n data.append('amount', amount);\n data.append('receipt_email', email);\n data.append('estimate_id', estimateId);\n data.append('job_id', jobId);\n data.append('address_line1', this.state.addressLine1);\n\n Rails.ajax({\n url: '/stripe/create_payment_intent',\n type: 'post',\n data,\n success: response => {\n if (this._isMounted) {\n this.clientSecret = response.client_secret;\n resolve(response.client_secret);\n }\n },\n error: error => {\n if (this._isMounted) {\n this.clientSecret = null;\n reject(new Error(error));\n }\n }\n });\n });\n\n collectPayment = async() => {\n const {stripe, addressLine1} = this.state;\n\n if (!addressLine1) {\n this.setState({error: 'Job Address is required to collect payment.'});\n return;\n }\n\n this.setState({error: null, initializingPayment: true});\n const clientSecret = this.clientSecret || await this.fetchPaymentIntent().catch(error => {\n this.setState({error: error.message});\n });\n\n if (!clientSecret) {\n this.setState({initializingPayment: false});\n return;\n }\n\n this.setState({initializingPayment: false, waitingOnCustomer: true});\n\n stripe.instance.collectPaymentMethod(clientSecret).then(result => {\n if (result.error) {\n this.setState({error: result.error.message});\n }\n else {\n this.processPayment(result.paymentIntent);\n }\n }).catch(error => {\n this.setState({error: error.message});\n }).finally(() => {\n this.setState({waitingOnCustomer: false});\n });\n };\n\n processPayment = paymentIntent => {\n const {stripe} = this.state;\n this.setState({waitingOnCustomer: false, collectingPayment: true});\n stripe.instance.processPayment(paymentIntent).then(result => {\n if (result.error) {\n this.setState({error: result.error.message});\n }\n // when processing debit cards, the payment intent is already succeeded\n else if (result.paymentIntent.status === 'succeeded') {\n this.savePayment(result.paymentIntent.charges.data[0]);\n this.setState({paymentSucceeded: true, payment: result.paymentIntent});\n this.clientSecret = null;\n }\n // when processing credit cards, the payment intent needs to be captured\n else {\n this.capturePaymentIntent(result.paymentIntent.id);\n }\n }).catch(error => {\n this.setState({error: error.message});\n }).finally(() => {\n this.setState({collectingPayment: false});\n });\n };\n\n processPaymentManually = () => { // eslint-disable-line max-statements\n const {cardNumber, cardMonth, cardYear, cardCvc, amount, email, addressLine1, estimateId, jobId} = this.state;\n\n // Check if job address is present\n if (!addressLine1) {\n this.setState({error: 'Job Address is required to process payment manually.'});\n return;\n }\n\n this.setState({error: null, processingPayment: true});\n const data = new FormData();\n data.append('credit_card_number', cardNumber);\n data.append('expiry_month', cardMonth);\n data.append('expiry_year', cardYear);\n data.append('cvc', cardCvc);\n data.append('amount', amount);\n data.append('receipt_email', email);\n data.append('estimate_id', estimateId);\n data.append('job_id', jobId);\n data.append('address_line1', addressLine1);\n\n Rails.ajax({\n url: '/stripe/process_credit_card_manually',\n type: 'post',\n data,\n success: response => {\n if (this._isMounted) {\n this.savePayment(response);\n this.setState({payment: response, paymentSucceeded: true});\n }\n },\n error: error => {\n if (this._isMounted) {\n this.setState({error: error});\n }\n },\n complete: () => {\n if (this._isMounted) {\n this.setState({processingPayment: false});\n }\n }\n });\n };\n\n capturePaymentIntent = paymentIntentId => {\n const {estimateId, jobId} = this.state;\n this.setState({processingPayment: true});\n const data = new FormData();\n data.append('id', paymentIntentId);\n data.append('estimate_id', estimateId);\n data.append('job_id', jobId);\n\n Rails.ajax({\n url: '/stripe/capture_payment_intent',\n type: 'post',\n data,\n success: response => {\n if (this._isMounted) {\n this.savePayment(response.charges.data[0]);\n this.setState({payment: response});\n this.clientSecret = null;\n }\n },\n error: error => {\n if (this._isMounted) {\n this.setState({error});\n }\n },\n complete: () => {\n if (this._isMounted) {\n this.setState({paymentSucceeded: true, processingPayment: false});\n }\n }\n });\n };\n\n savePayment = charge => {\n const dataObj = {};\n const data = new FormData();\n const paymentMethod = this.state.method === 'manual' ? 'STRIPE' : 'TERMINAL';\n data.append('job_id', this.state.jobId);\n data.append('notify', true);\n data.append('estimate_id', this.state.estimateId);\n data.append('payment[amount]', charge.amount / 100.0);\n data.append('payment[method]', paymentMethod);\n data.append('payment[description]', charge.description);\n data.append('payment[stripe_charge_id]', charge.id);\n data.append('payment[stripe_receipt_url]', charge.receipt_url);\n data.forEach((value, key) => {\n dataObj[key] = value;\n });\n\n Rails.ajax({\n url: '/payments.json',\n type: 'post',\n data,\n error: error => {\n Rollbar.error(`Failed to save payment: ${error.message}`, {charge, data: dataObj});\n\n if (this._isMounted) {\n this.setState({\n error: `Although the transaction succeeded, the payment could not be saved \n for the following reason: ${error.message}. You need to manually record this payment.`\n });\n }\n }\n });\n };\n\n paymentInProgress = () => {\n const {collectingPayment, initializingPayment, processingPayment, waitingOnCustomer} = this.state;\n return initializingPayment || waitingOnCustomer || collectingPayment || processingPayment;\n };\n\n reset = () => {\n this.clientSecret = null;\n this.setState({\n cardNumber: '',\n cardMonth: '',\n cardYear: '',\n cardCvc: '',\n error: null,\n initializingPayment: false,\n waitingOnCustomer: false,\n processingPayment: false,\n paymentSucceeded: false,\n collectingPayment: false\n });\n };\n\n cancelPayment = () => {\n const {stripe, waitingOnCustomer} = this.state;\n\n if (waitingOnCustomer) {\n stripe.instance.cancelCollectPaymentMethod().finally(this.reset);\n }\n };\n\n renderPaymentStatus = () => {\n const {\n collectingPayment,\n connected,\n error,\n initializingPayment,\n paymentSucceeded,\n payment,\n processingPayment,\n stripe,\n waitingOnCustomer\n } = this.state;\n let message;\n\n if (error) {\n return \n Stripe Terminal Card Readers\n
\n \n {readers\n ? readers.map(this.renderCardReader)\n : !error && }\n
\n \n
\n \n
\n \n \n Cancel\n \n
\n \n
\n \n Payment successful.\n
\n \n \n Print Receipt\n \n
\n \n
\n \n Payment successful.\n
\n \n \n Print Receipt\n \n
\n \n \n 
\n \n
\n );\n }\n}\n\nTerminalPayment.propTypes = {\n addressLine1: PropTypes.string,\n amount: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n breakpoint: PropTypes.string.isRequired,\n email: PropTypes.string,\n estimateId: PropTypes.number,\n jobId: PropTypes.number\n};","import React, {PureComponent} from 'react';\nimport PropTypes from 'prop-types';\nimport Util from './Util';\n\nexport default class TextArea extends PureComponent {\n state = {value: this.props.value || ''};\n\n render() {\n const id = Util.uuid();\n const {value} = this.state;\n const {label, minLength, name, placeholder, required, rows} = this.props;\n return (\n \n \n This payment will not be assigned to an estimate.\n If you wish to pay an estimate, open the estimate and then initiate payment.\n }\n {this.renderPaymentForm()}\n {method === 'terminal' && connected && !paymentInProgress && !paymentSucceeded && \n Initiate Payment\n }\n {method === 'terminal' && this.renderPaymentStatus()}\n {method === 'manual' && this.renderManualPaymentForm()}\n {method === 'manual' && !paymentInProgress && !paymentSucceeded && \n Submit Payment\n }\n {method === 'manual' && this.renderManualPaymentStatus()}\n
\n \n
\n \n
\n Accept Stripe Payment
\n\n Reset\n \n
\n \n
\n {!estimateId && \n {\n this.reset();\n this.setState({method: 'terminal'});\n }}\n type='radio'\n value='terminal'/>\n \n
\n \n {\n this.reset();\n this.setState({method: 'manual'});\n }}\n type='radio'\n value='manual'/>\n \n
\n \n \n