\n\t\t\t\t\t\n\t\t\t\t\t\tI want to make more recurring giving!\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\tClose\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n\nexport default PaymentSuccess;\n","import React, { useState, useEffect } from \"react\";\nimport { CardElement, useStripe, useElements } from \"@stripe/react-stripe-js\";\n\nimport { ModalBody, ModalFooter } from \"reactstrap\";\nimport ApiBase from \"../../../../../common/api/api.base\";\n\nconst CheckoutForm = ({\n\tonSuccess,\n\tdataForSubscription,\n\tgoToPaymentMethod,\n}) => {\n\tconst [succeeded, setSucceeded] = useState(false);\n\tconst [error, setError] = useState(null);\n\tconst [processing, setProcessing] = useState(\"\");\n\tconst [disabled, setDisabled] = useState(true);\n\tconst stripe = useStripe();\n\tconst elements = useElements();\n\n\tconst cardStyle = {\n\t\tstyle: {\n\t\t\tbase: {\n\t\t\t\tcolor: \"#32325d\",\n\t\t\t\tfontFamily: \"Arial, sans-serif\",\n\t\t\t\tfontSmoothing: \"antialiased\",\n\t\t\t\tfontSize: \"16px\",\n\t\t\t\t\"::placeholder\": {\n\t\t\t\t\tcolor: \"#32325d\",\n\t\t\t\t},\n\t\t\t},\n\t\t\tinvalid: {\n\t\t\t\tcolor: \"#fa755a\",\n\t\t\t\ticonColor: \"#fa755a\",\n\t\t\t},\n\t\t},\n\t};\n\n\tconst handleChange = async (event) => {\n\t\tsetDisabled(event.empty);\n\t\tsetError(event.error ? event.error.message : \"\");\n\t};\n\n\tconst handleSubmit = async (ev) => {\n\t\tev.preventDefault();\n\t\tsetProcessing(true);\n\t\tconst card = elements.getElement(CardElement);\n\t\tconst { customerId, priceId } = dataForSubscription;\n\n\t\tconst latestInvoicePaymentIntentStatus = localStorage.getItem(\n\t\t\t\"latestInvoicePaymentIntentStatus\"\n\t\t);\n\n\t\tif (latestInvoicePaymentIntentStatus === \"requires_payment_method\") {\n\t\t\tconst invoiceId = localStorage.getItem(\"latestInvoiceId\");\n\t\t\tconst isPaymentRetry = true;\n\t\t\t// create new payment method & retry payment on invoice with new payment method\n\t\t\tcreatePaymentMethod(\n\t\t\t\tcard,\n\t\t\t\tcustomerId,\n\t\t\t\tpriceId,\n\t\t\t\tisPaymentRetry,\n\t\t\t\tinvoiceId\n\t\t\t);\n\t\t} else {\n\t\t\t// create new payment method & create subscription\n\t\t\tcreatePaymentMethod(card, customerId, priceId, false, \"\");\n\t\t}\n\t};\n\n\tconst createPaymentMethod = (\n\t\tcardElement,\n\t\tcustomerId,\n\t\tpriceId,\n\t\tisPaymentRetry,\n\t\tinvoiceId\n\t) => {\n\t\treturn stripe\n\t\t\t.createPaymentMethod({\n\t\t\t\ttype: \"card\",\n\t\t\t\tcard: cardElement,\n\t\t\t})\n\t\t\t.then((result) => {\n\t\t\t\tif (result.error) {\n\t\t\t\t\tdisplayError(error);\n\t\t\t\t} else {\n\t\t\t\t\tif (isPaymentRetry) {\n\t\t\t\t\t\t// Update the payment method and retry invoice payment\n\t\t\t\t\t\tretryInvoiceWithNewPaymentMethod({\n\t\t\t\t\t\t\tcustomerId: customerId,\n\t\t\t\t\t\t\tpaymentMethodId: result.paymentMethod.id,\n\t\t\t\t\t\t\tinvoiceId: invoiceId,\n\t\t\t\t\t\t\tpriceId: priceId,\n\t\t\t\t\t\t});\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// Create the subscription\n\t\t\t\t\t\tcreateSubscription({\n\t\t\t\t\t\t\tcustomerId: customerId,\n\t\t\t\t\t\t\tpaymentMethodId: result.paymentMethod.id,\n\t\t\t\t\t\t\tpriceId: priceId,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t};\n\n\tconst createSubscription = ({ customerId, paymentMethodId, priceId }) => {\n\t\treturn (\n\t\t\tApiBase.post(\"/api/givings/create-subscription\", {\n\t\t\t\tcustomerId: customerId,\n\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\tpriceId: priceId,\n\t\t\t})\n\t\t\t\t// If the card is declined, display an error to the user.\n\t\t\t\t.then((result) => {\n\t\t\t\t\tif (result.error) {\n\t\t\t\t\t\t// The card had an error when trying to attach it to a customer.\n\t\t\t\t\t\tthrow result;\n\t\t\t\t\t}\n\t\t\t\t\treturn result;\n\t\t\t\t})\n\t\t\t\t// Normalize the result to contain the object returned by Stripe.\n\t\t\t\t// Add the addional details we need.\n\t\t\t\t.then((result) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\t\t\tpriceId: priceId,\n\t\t\t\t\t\tsubscription: result,\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t\t// Some payment methods require a customer to be on session\n\t\t\t\t// to complete the payment process. Check the status of the\n\t\t\t\t// payment intent to handle these actions.\n\t\t\t\t.then(handleCustomerActionRequired)\n\t\t\t\t// If attaching this card to a Customer object succeeds,\n\t\t\t\t// but attempts to charge the customer fail, you\n\t\t\t\t// get a requires_payment_method error.\n\t\t\t\t.then(handlePaymentMethodRequired)\n\t\t\t\t// No more actions required. Provision your service for the user.\n\t\t\t\t.then(onSubscriptionComplete)\n\t\t\t\t.catch((error) => {\n\t\t\t\t\t// An error has happened. Display the failure to the user here.\n\t\t\t\t\t// We utilize the HTML element we created.\n\t\t\t\t\tdisplayError(error);\n\t\t\t\t})\n\t\t);\n\t};\n\n\tconst handleCustomerActionRequired = ({\n\t\tsubscription,\n\t\tinvoice,\n\t\tpriceId,\n\t\tpaymentMethodId,\n\t\tisRetry,\n\t}) => {\n\t\tif (subscription && subscription.status === \"active\") {\n\t\t\t// Subscription is active, no customer actions required.\n\t\t\treturn { subscription, priceId, paymentMethodId };\n\t\t}\n\n\t\t// If it's a first payment attempt, the payment intent is on the subscription latest invoice.\n\t\t// If it's a retry, the payment intent will be on the invoice itself.\n\t\tlet paymentIntent = invoice\n\t\t\t? invoice.payment_intent\n\t\t\t: subscription.latest_invoice.payment_intent;\n\n\t\tif (\n\t\t\tpaymentIntent.status === \"requires_action\" ||\n\t\t\t(isRetry === true &&\n\t\t\t\tpaymentIntent.status === \"requires_payment_method\")\n\t\t) {\n\t\t\treturn stripe\n\t\t\t\t.confirmCardPayment(paymentIntent.client_secret, {\n\t\t\t\t\tpayment_method: paymentMethodId,\n\t\t\t\t\tsetup_future_usage: \"off_session\",\n\t\t\t\t})\n\t\t\t\t.then((result) => {\n\t\t\t\t\tif (result.error) {\n\t\t\t\t\t\t// Start code flow to handle updating the payment details.\n\t\t\t\t\t\t// Display error message in your UI.\n\t\t\t\t\t\t// The card was declined (i.e. insufficient funds, card has expired, etc).\n\t\t\t\t\t\tthrow result;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (result.paymentIntent.status === \"succeeded\") {\n\t\t\t\t\t\t\t// Show a success message to your customer.\n\t\t\t\t\t\t\t// There's a risk of the customer closing the window before the callback.\n\t\t\t\t\t\t\t// We recommend setting up webhook endpoints later in this guide.\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tpriceId: priceId,\n\t\t\t\t\t\t\t\tsubscription: subscription,\n\t\t\t\t\t\t\t\tinvoice: invoice,\n\t\t\t\t\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tdisplayError(error);\n\t\t\t\t});\n\t\t} else {\n\t\t\t// No customer action needed.\n\t\t\treturn { subscription, priceId, paymentMethodId };\n\t\t}\n\t};\n\n\tconst handlePaymentMethodRequired = ({\n\t\tsubscription,\n\t\tpaymentMethodId,\n\t\tpriceId,\n\t}) => {\n\t\tif (subscription.status === \"active\") {\n\t\t\t// subscription is active, no customer actions required.\n\t\t\treturn { subscription, priceId, paymentMethodId };\n\t\t} else if (\n\t\t\tsubscription.latest_invoice.payment_intent.status ===\n\t\t\t\"requires_payment_method\"\n\t\t) {\n\t\t\t// Using localStorage to manage the state of the retry here,\n\t\t\t// feel free to replace with what you prefer.\n\t\t\t// Store the latest invoice ID and status.\n\t\t\tlocalStorage.setItem(\n\t\t\t\t\"latestInvoiceId\",\n\t\t\t\tsubscription.latest_invoice.id\n\t\t\t);\n\t\t\tlocalStorage.setItem(\n\t\t\t\t\"latestInvoicePaymentIntentStatus\",\n\t\t\t\tsubscription.latest_invoice.payment_intent.status\n\t\t\t);\n\t\t\tthrow { error: { message: \"Your card was declined.\" } };\n\t\t} else {\n\t\t\treturn { subscription, priceId, paymentMethodId };\n\t\t}\n\t};\n\n\tconst retryInvoiceWithNewPaymentMethod = (\n\t\tcustomerId,\n\t\tpaymentMethodId,\n\t\tinvoiceId,\n\t\tpriceId\n\t) => {\n\t\treturn (\n\t\t\tApiBase.post(\"/api/givings/retry-invoice\", {\n\t\t\t\tcustomerId: customerId,\n\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\tinvoiceId: invoiceId,\n\t\t\t})\n\t\t\t\t// If the card is declined, display an error to the user.\n\t\t\t\t.then((result) => {\n\t\t\t\t\tif (result.error) {\n\t\t\t\t\t\t// The card had an error when trying to attach it to a customer.\n\t\t\t\t\t\tthrow result;\n\t\t\t\t\t}\n\t\t\t\t\treturn result;\n\t\t\t\t})\n\t\t\t\t// Normalize the result to contain the object returned by Stripe.\n\t\t\t\t// Add the addional details we need.\n\t\t\t\t.then((result) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t// Use the Stripe 'object' property on the\n\t\t\t\t\t\t// returned result to understand what object is returned.\n\t\t\t\t\t\tinvoice: result,\n\t\t\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\t\t\tpriceId: priceId,\n\t\t\t\t\t\tisRetry: true,\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t\t// Some payment methods require a customer to be on session\n\t\t\t\t// to complete the payment process. Check the status of the\n\t\t\t\t// payment intent to handle these actions.\n\t\t\t\t.then(handleCustomerActionRequired)\n\t\t\t\t// No more actions required. Provision your service for the user.\n\t\t\t\t.then(onSubscriptionComplete)\n\t\t\t\t.catch((error) => {\n\t\t\t\t\t// An error has happened. Display the failure to the user here.\n\t\t\t\t\t// We utilize the HTML element we created.\n\t\t\t\t\tdisplayError(error);\n\t\t\t\t})\n\t\t);\n\t};\n\n\tconst onSubscriptionComplete = (result) => {\n\t\t// Payment was successful.\n\t\tif (result.subscription.status === \"active\") {\n\t\t\t// Change your UI to show a success message to your customer.\n\t\t\t// Call your backend to grant access to your service based on\n\t\t\t// `result.subscription.items.data[0].price.product` the customer subscribed to.\n\t\t\tonSuccess();\n\t\t}\n\t};\n\n\tconst displayError = (event) => {\n\t\tsetProcessing(false);\n\t\tif (event.error) {\n\t\t\tsetError(event.error.message);\n\t\t} else {\n\t\t\tsetError(\"\");\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\tYou wish to give ${plan.amount} for{\" \"}\n\t\t\t\t\t\t{designation.name} every month.\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t(The recurring giving can be cancelled any time)\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\n\t\t\t\t{exceedLimit && (\n\t\t\t\t\t
\n\t\t\t\t\t\tSum of the giving can't be more than $\n\t\t\t\t\t\t{STRIPE_MAX_AMOUNT}.\n\t\t\t\t\t
\n\t\t\t\t)}\n\t\t\t\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<Back\n\t\t\t\t\n\n\t\t\t\t\n\t\t\t\t\tConfirm and checkout\n\t\t\t\t\t{loading && }\n\t\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n\nexport default RecurringPaymentConfirmation;\n","import React, { useState, useEffect } from \"react\";\nimport { ModalBody, ModalFooter, Spinner } from \"reactstrap\";\nimport { getCardBrandFullName } from \"../../../../../common/helpers/card.utils\";\nimport { useStripe, useElements } from \"@stripe/react-stripe-js\";\nimport ApiBase from \"../../../../../common/api/api.base\";\n\nconst PaymentMethods = ({\n\tgoToCheckoutForm,\n\tloading,\n\tdataForSubscription,\n\tpaymentMethods,\n\tonSuccess,\n}) => {\n\tconst [selectedPaymentMethod, setSelectedPaymentMethod] = useState({});\n\tconst [error, setError] = useState(null);\n\tconst [processing, setProcessing] = useState(\"\");\n\tconst stripe = useStripe();\n\tconst elements = useElements();\n\n\tconst handlePay = async (ev) => {\n\t\tev.preventDefault();\n\t\tsetProcessing(true);\n\t\tconst { customerId, priceId } = dataForSubscription;\n\n\t\tconst latestInvoicePaymentIntentStatus = localStorage.getItem(\n\t\t\t\"latestInvoicePaymentIntentStatus\"\n\t\t);\n\n\t\tconst paymentMethodId = selectedPaymentMethod.stripePaymentMethodId;\n\n\t\tif (latestInvoicePaymentIntentStatus === \"requires_payment_method\") {\n\t\t\tconst invoiceId = localStorage.getItem(\"latestInvoiceId\");\n\t\t\tconst isPaymentRetry = true;\n\t\t\t// create new payment method & retry payment on invoice with new payment method\n\t\t\tpay(\n\t\t\t\tpaymentMethodId,\n\t\t\t\tcustomerId,\n\t\t\t\tpriceId,\n\t\t\t\tisPaymentRetry,\n\t\t\t\tinvoiceId\n\t\t\t);\n\t\t} else {\n\t\t\t// create new payment method & create subscription\n\t\t\tpay(paymentMethodId, customerId, priceId, false, \"\");\n\t\t}\n\t};\n\n\tconst pay = (\n\t\tpaymentMethodId,\n\t\tcustomerId,\n\t\tpriceId,\n\t\tisPaymentRetry,\n\t\tinvoiceId\n\t) => {\n\t\tif (isPaymentRetry) {\n\t\t\t// Update the payment method and retry invoice payment\n\t\t\tretryInvoiceWithNewPaymentMethod({\n\t\t\t\tcustomerId: customerId,\n\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\tinvoiceId: invoiceId,\n\t\t\t\tpriceId: priceId,\n\t\t\t});\n\t\t} else {\n\t\t\t// Create the subscription\n\t\t\tcreateSubscription({\n\t\t\t\tcustomerId: customerId,\n\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\tpriceId: priceId,\n\t\t\t});\n\t\t}\n\t};\n\n\tconst createSubscription = ({ customerId, paymentMethodId, priceId }) => {\n\t\treturn (\n\t\t\tApiBase.post(\"/api/givings/create-subscription\", {\n\t\t\t\tcustomerId: customerId,\n\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\tpriceId: priceId,\n\t\t\t})\n\t\t\t\t// If the card is declined, display an error to the user.\n\t\t\t\t.then((result) => {\n\t\t\t\t\tif (result.error) {\n\t\t\t\t\t\t// The card had an error when trying to attach it to a customer.\n\t\t\t\t\t\tthrow result;\n\t\t\t\t\t}\n\t\t\t\t\treturn result;\n\t\t\t\t})\n\t\t\t\t// Normalize the result to contain the object returned by Stripe.\n\t\t\t\t// Add the addional details we need.\n\t\t\t\t.then((result) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\t\t\tpriceId: priceId,\n\t\t\t\t\t\tsubscription: result,\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t\t// Some payment methods require a customer to be on session\n\t\t\t\t// to complete the payment process. Check the status of the\n\t\t\t\t// payment intent to handle these actions.\n\t\t\t\t.then(handleCustomerActionRequired)\n\t\t\t\t// If attaching this card to a Customer object succeeds,\n\t\t\t\t// but attempts to charge the customer fail, you\n\t\t\t\t// get a requires_payment_method error.\n\t\t\t\t.then(handlePaymentMethodRequired)\n\t\t\t\t// No more actions required. Provision your service for the user.\n\t\t\t\t.then(onSubscriptionComplete)\n\t\t\t\t.catch((error) => {\n\t\t\t\t\t// An error has happened. Display the failure to the user here.\n\t\t\t\t\t// We utilize the HTML element we created.\n\t\t\t\t\tdisplayError(error);\n\t\t\t\t})\n\t\t);\n\t};\n\n\tconst handleCustomerActionRequired = ({\n\t\tsubscription,\n\t\tinvoice,\n\t\tpriceId,\n\t\tpaymentMethodId,\n\t\tisRetry,\n\t}) => {\n\t\tif (subscription && subscription.status === \"active\") {\n\t\t\t// Subscription is active, no customer actions required.\n\t\t\treturn { subscription, priceId, paymentMethodId };\n\t\t}\n\n\t\t// If it's a first payment attempt, the payment intent is on the subscription latest invoice.\n\t\t// If it's a retry, the payment intent will be on the invoice itself.\n\t\tlet paymentIntent = invoice\n\t\t\t? invoice.payment_intent\n\t\t\t: subscription.latest_invoice.payment_intent;\n\n\t\tif (\n\t\t\tpaymentIntent.status === \"requires_action\" ||\n\t\t\t(isRetry === true &&\n\t\t\t\tpaymentIntent.status === \"requires_payment_method\")\n\t\t) {\n\t\t\treturn stripe\n\t\t\t\t.confirmCardPayment(paymentIntent.client_secret, {\n\t\t\t\t\tpayment_method: paymentMethodId,\n\t\t\t\t\tsetup_future_usage: \"off_session\",\n\t\t\t\t})\n\t\t\t\t.then((result) => {\n\t\t\t\t\tif (result.error) {\n\t\t\t\t\t\t// Start code flow to handle updating the payment details.\n\t\t\t\t\t\t// Display error message in your UI.\n\t\t\t\t\t\t// The card was declined (i.e. insufficient funds, card has expired, etc).\n\t\t\t\t\t\tthrow result;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (result.paymentIntent.status === \"succeeded\") {\n\t\t\t\t\t\t\t// Show a success message to your customer.\n\t\t\t\t\t\t\t// There's a risk of the customer closing the window before the callback.\n\t\t\t\t\t\t\t// We recommend setting up webhook endpoints later in this guide.\n\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\tpriceId: priceId,\n\t\t\t\t\t\t\t\tsubscription: subscription,\n\t\t\t\t\t\t\t\tinvoice: invoice,\n\t\t\t\t\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\t\t\t\t};\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t\t.catch((error) => {\n\t\t\t\t\tdisplayError(error);\n\t\t\t\t});\n\t\t} else {\n\t\t\t// No customer action needed.\n\t\t\treturn { subscription, priceId, paymentMethodId };\n\t\t}\n\t};\n\n\tconst handlePaymentMethodRequired = ({\n\t\tsubscription,\n\t\tpaymentMethodId,\n\t\tpriceId,\n\t}) => {\n\t\tif (subscription.status === \"active\") {\n\t\t\t// subscription is active, no customer actions required.\n\t\t\treturn { subscription, priceId, paymentMethodId };\n\t\t} else if (\n\t\t\tsubscription.latest_invoice.payment_intent.status ===\n\t\t\t\"requires_payment_method\"\n\t\t) {\n\t\t\t// Using localStorage to manage the state of the retry here,\n\t\t\t// feel free to replace with what you prefer.\n\t\t\t// Store the latest invoice ID and status.\n\t\t\tlocalStorage.setItem(\n\t\t\t\t\"latestInvoiceId\",\n\t\t\t\tsubscription.latest_invoice.id\n\t\t\t);\n\t\t\tlocalStorage.setItem(\n\t\t\t\t\"latestInvoicePaymentIntentStatus\",\n\t\t\t\tsubscription.latest_invoice.payment_intent.status\n\t\t\t);\n\t\t\tthrow { error: { message: \"Your card was declined.\" } };\n\t\t} else {\n\t\t\treturn { subscription, priceId, paymentMethodId };\n\t\t}\n\t};\n\n\tconst retryInvoiceWithNewPaymentMethod = (\n\t\tcustomerId,\n\t\tpaymentMethodId,\n\t\tinvoiceId,\n\t\tpriceId\n\t) => {\n\t\treturn (\n\t\t\tApiBase.post(\"/api/givings/retry-invoice\", {\n\t\t\t\tcustomerId: customerId,\n\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\tinvoiceId: invoiceId,\n\t\t\t})\n\t\t\t\t// If the card is declined, display an error to the user.\n\t\t\t\t.then((result) => {\n\t\t\t\t\tif (result.error) {\n\t\t\t\t\t\t// The card had an error when trying to attach it to a customer.\n\t\t\t\t\t\tthrow result;\n\t\t\t\t\t}\n\t\t\t\t\treturn result;\n\t\t\t\t})\n\t\t\t\t// Normalize the result to contain the object returned by Stripe.\n\t\t\t\t// Add the addional details we need.\n\t\t\t\t.then((result) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t// Use the Stripe 'object' property on the\n\t\t\t\t\t\t// returned result to understand what object is returned.\n\t\t\t\t\t\tinvoice: result,\n\t\t\t\t\t\tpaymentMethodId: paymentMethodId,\n\t\t\t\t\t\tpriceId: priceId,\n\t\t\t\t\t\tisRetry: true,\n\t\t\t\t\t};\n\t\t\t\t})\n\t\t\t\t// Some payment methods require a customer to be on session\n\t\t\t\t// to complete the payment process. Check the status of the\n\t\t\t\t// payment intent to handle these actions.\n\t\t\t\t.then(handleCustomerActionRequired)\n\t\t\t\t// No more actions required. Provision your service for the user.\n\t\t\t\t.then(onSubscriptionComplete)\n\t\t\t\t.catch((error) => {\n\t\t\t\t\t// An error has happened. Display the failure to the user here.\n\t\t\t\t\t// We utilize the HTML element we created.\n\t\t\t\t\tdisplayError(error);\n\t\t\t\t})\n\t\t);\n\t};\n\n\tconst onSubscriptionComplete = (result) => {\n\t\t// Payment was successful.\n\t\tif (result.subscription.status === \"active\") {\n\t\t\t// Change your UI to show a success message to your customer.\n\t\t\t// Call your backend to grant access to your service based on\n\t\t\t// `result.subscription.items.data[0].price.product` the customer subscribed to.\n\t\t\tonSuccess();\n\t\t}\n\t};\n\n\tconst displayError = (event) => {\n\t\tsetProcessing(false);\n\t\tif (event.error) {\n\t\t\tsetError(event.error.message);\n\t\t} else {\n\t\t\tsetError(\"\");\n\t\t}\n\t};\n\n\tconst renderPaymentMethods = () => {\n\t\treturn (\n\t\t\t
\n\t\t\t\t\t\t\tYou can set up scheduled giving to the church click\n\t\t\t\t\t\t\ton the link above and sign in to your Peter's Rock\n\t\t\t\t\t\t\tMinistries and then select the Financial tab on your\n\t\t\t\t\t\t\tprofile.\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tCash or check can be given during our Sunday\n\t\t\t\t\t\t\tgatherings. If you'd like to receive a tax deduction\n\t\t\t\t\t\t\tfor cash gifts, the gift should be placed in an\n\t\t\t\t\t\t\toffering envelope with your name and address on it.\n\t\t\t\t\t\t\tOffering envelopes are available at all of our\n\t\t\t\t\t\t\tservices.\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\n\t\t\t\t\t\t
By mail
\n\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\tYou can mail a check, made out to Peter's Rock\n\t\t\t\t\t\t\tMinistries, to our office at 256 S 8th Street,\n\t\t\t\t\t\t\tSalina, KS 67401.\n\t\t\t\t\t\t
\n\t\t\n\t);\n};\n\nexport default MobileNav;\n","import React, { useState } from \"react\";\nimport { NavLink } from \"react-router-dom\";\n\nimport { ReactComponent as DashboardIcon } from \"../../../assets/img/icons/dashboard.svg\";\nimport { ReactComponent as GivingsIcon } from \"../../../assets/img/icons/new_givings_history.svg\";\nimport { ReactComponent as PrayerRequestsIcon } from \"../../../assets/img/icons/prayer_requests.svg\";\nimport { ReactComponent as VideoIcon } from \"../../../assets/img/icons/video_settings.svg\";\nimport { ReactComponent as CommentsIcon } from \"../../../assets/img/icons/new_comments.svg\";\nimport { ReactComponent as PostsIcon } from \"../../../assets/img/icons/new_posts.svg\";\nimport { ReactComponent as LogoutIcon } from \"../../../assets/img/icons/logout.svg\";\nimport { ReactComponent as ChevronRight } from \"../../../assets/img/icons/chevron_right-24px.svg\";\nimport { ReactComponent as ChevronLeft } from \"../../../assets/img/icons/chevron_left-24px.svg\";\nimport { ReactComponent as UserIcon } from \"../../../assets/img/icons/men.svg\";\nimport { ReactComponent as MembersIcon } from \"../../../assets/img/icons/members.svg\";\nimport { ReactComponent as ReportsIcon } from \"../../../assets/img/icons/reports.svg\";\nimport { ReactComponent as EventsIcon } from \"../../../assets/img/icons/events.svg\";\nimport { ReactComponent as PlansIcon } from \"../../../assets/img/icons/plans.svg\";\nimport { ReactComponent as SchedulingIcon } from \"../../../assets/img/icons/scheduling.svg\";\nimport { ReactComponent as SettingsIcon } from \"../../../assets/img/icons/settings.svg\";\nimport MobileNav from \"./MobileNav\";\n\nconst DashboardLayout = ({ onLogout, children }) => {\n\tconst logoutClick = (e) => {\n\t\te.preventDefault();\n\t\tonLogout();\n\t};\n\n\tconst [showMenu, setShowMenu] = useState(\"76px\");\n\n\treturn (\n\t\t<>\n\t\t\t