import { useState } from "react" ; import { Button } from "@components/dashboard/tasks/index.style" ; import { useStripe } from "@stripe/react-stripe-js" ; import { useCreateSessionMutation } from "@generated/client" ; import { SubscriptionButton } from "./index.style" ; type SubscriptionProps = { email : string ; priceId : string ; customerId ? : string ; addLabel ? : string ; } ; const Subscription = ( { email , priceId , customerId , addLabel } ) => { const [ checkoutError , setCheckoutError ] = useState ( "" ) ; const stripe = useStripe ( ) ; const [ createSession , { loading : createSessionLoading } ] = useCreateSessionMutation ( ) ; const createCheckout = async ( ) => { if ( ! stripe ) return ; const { data } = await createSession ( { variables : { priceId , customerId } } ) ; stripe . redirectToCheckout ( { sessionId : data ?. createSession . id ! } ) . then ( ( result ) => { setCheckoutError ( result . error . message ) ; } ) ; } ; return ( < > { checkoutError ? < p > { checkoutError } < /p> : null} < SubscriptionButton type = "button" variant = "contained" color = "primary" disabled = { createSessionLoading } onClick = { createCheckout } > { createSessionLoading ? "Creating your session..." : `Configure your subscription${ addLabel && addLabel }` } < /SubscriptionButton> < />); } ; export default Subscription ;