text: import React, { useState, useEffect } from 'react';
  import { useStateValue } from '../state/StateProvider';
  import CheckoutProduct from './checkout/CheckoutProduct';
  import { Link, useHistory } from 'react-router-dom';
  import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js';
  import CurrencyFormat from 'react-currency-format';
  import { getBasketTotal } from '../state/reducer';
  import { db } from '../../firebase';
  import axios from '../../axios';
  
  function Payment() {
  	const [{ basket, user }, dispatch] = useStateValue();
  	const [error, setError] = useState(null);
  	const [disabled, setDisabled] = useState(true);
  	const [processing, setProcessing] = useState('');
  	const [succeeded, setSucceeded] = useState(false);
  	const [clientSecret, setClientSecret] = useState(true);
  
  	const stripe = useStripe();
  	const elements = useElements();
  	const history = useHistory();
  
  	useEffect(() => {
  		const getClientSecret = async () => {
  			const response = await axios({
  				method: 'post',
  				url: `/payments/create?total=${getBasketTotal(basket) * 100}`,
  			});
  			setClientSecret(response.data.clientSecret);
  		};
  
  		getClientSecret();
  	}, [basket]);
  
  	console.log('client secret is >>>', clientSecret);
  
  	const handleSubmit = async (e) => {
  		e.preventDefault();
  		setProcessing(true);
  
  		const payload = await stripe
  			.confirmCardPayment(clientSecret, {
  				payment_method: {
  					card: elements.getElement(CardElement),
  				},
  			})
  			.then(({ paymentIntent }) => {
  				db.collection('users')
  					.doc(user?.uid)
  					.collection('orders')
  					.doc(paymentIntent.id)
  					.set({
  						basket: basket,
  						amount: paymentIntent.amount,
  						created: paymentIntent.created,
  					});
  
  				setSucceeded(true);
  				setError(null);
  				setProcessing(false);
  				dispatch({
  					type: 'EMPTY_BASKET',
  				});
  				history.replace('/orders');
  			});
  	};
  
  	const handleChange = (e) => {
  		setDisabled(e.empty);
  		setError(e.error ? e.error.message : '');
  	};
  	return (
  		<div className='payment'>
  			<div className='payment_container'>
  				<h1>
  					Checkout (<Link to='/checkout'>{basket?.length} items</Link>)
  				</h1>
  				<div className='payment_container_section'>
  					<div className='payment_container_section_title'>
  						<h3>Delivery Address</h3>
  					</div>
  					<div className='payment_container_section_address'>
  						<p>{user?.email}</p>
  						<p>123 React Lane</p>
  						<p>Los Angeles, CA</p>
  					</div>
  				</div>
  				<div className='payment_container_section'>
  					<div className='payment_container_section_title'>
  						<h3>Review items and delivery</h3>
  					</div>
  					<div className='payment_container_section__items'>
  						{basket.map((item) => (
  							<CheckoutProduct
  								id={item.id}
  								title={item.title}
  								image={item.image}
  								price={item.price}
  								rating={item.rating}
  							/>
  						))}
  					</div>
  				</div>
  				<div className='payment_container_section'>
  					<div className='payment_container_section_title'>
  						<h3>Payment Method</h3>
  					</div>
  					<div className='payment_container_section_details'>
  						<form action='' onSubmit={handleSubmit}>
  							<CardElement onChange={handleChange} />
  							<div className='price_container'>
  								<CurrencyFormat
  									renderText={(value) => <h3>Order Total: {value}</h3>}
  									decimalScale={2}
  									value={getBasketTotal(basket)}
  									displayType={'text'}
  									thousandSeperator={true}
  									prefix={'$'}
  								/>
  								<button disabled={processing || disabled || succeeded}>
  									<span>{processing ? <p>Processing</p> : 'Buy Now'}</span>
  								</button>
  							</div>
  							{error && <div>{error}</div>}
  						</form>
  					</div>
  				</div>
  			</div>
  		</div>
  	);
  }
  
  export default Payment;
  