Forgot password ?
\n \n \nNew to Bold Reuse?
\nJoin our zero-waste community today.
\n \nYour Bold Reuse subscription has expired. Renew it here.
\n{message}
}\n \n )\n}\n\nexport default CardHeader\n","import React, { useState } from \"react\";\nimport { CardElement, useStripe, useElements } from \"@stripe/react-stripe-js\";\nimport { Form, Button, Modal } from \"semantic-ui-react\";\nimport { useDispatch } from \"react-redux\";\nimport { createPayment, createPaymentAndSignUp } from \"actions/payment\";\nimport { showError } from \"actions/utils\";\nimport { useHistory } from \"react-router\";\nimport { STATUS } from \"api/status\";\nimport CardHeader from \"./CardHeader\";\n\nexport const CardForm = ({ onCancel, userInfo, message, title }) => {\n const dispatch = useDispatch();\n const history = useHistory();\n const [loading, setLoading] = useState(false);\n const [isClicked, setIsClicked] = useState(false);\n\n const stripe = useStripe();\n const elements = useElements();\n\n const handleSubmit = async (event) => {\n event.preventDefault();\n setIsClicked(true)\n const { token } = await stripe.createToken(elements.getElement(CardElement));\n if (token) {\n setLoading(true);\n const response = history.location.pathname === '/renew' ? await dispatch(createPayment({ ...userInfo, stripeToken: token?.id })) : await dispatch(createPaymentAndSignUp({ ...userInfo, stripeToken: token?.id }));\n setLoading(false);\n onCancel();\n\n if(response === STATUS.success) {\n history.push(history.location.pathname === '/renew' ? '/details' : '/login');\n }\n } else {\n setIsClicked(false);\n showError({ text: \"Complete form with correct values\" });\n }\n };\n\n return (\n <>\nCoupons are only available for Annual subscriptions
\n\n {\n `Coupon activated: saved ${discount.type === COUPON_TYPES.price ? `$${discount.value}` : `${discount.value * 100}%`} via \"${discount.couponCode}\"`\n }\n
\n }\n \n }\n {showModal &&\nCreate your Bold Reuse account:
\nSelect your Subscription type below:
\nthe # of credits on your subscription is = to the total # of reusables you can have checked out at once
\nYour Subscription Term:
\nNumber of credits
\n\n Total cost: \n \n {\n formatCurrency(discount.type !== COUPON_TYPES.price ?\n\n tableRows[numberOfSubs.value || 1][subscriptionPlan.value === SUBSCRIPTION_OPTIONS.monthly ? 1 : 2 ]?.value * (subscriptionPlan.value === SUBSCRIPTION_OPTIONS.annual ? 1 - discount.value : 1) \n\n : tableRows[numberOfSubs.value || 1][subscriptionPlan.value === SUBSCRIPTION_OPTIONS.monthly ? 1 : 2 ]?.value - (subscriptionPlan.value === SUBSCRIPTION_OPTIONS.annual ? discount.value : 0 )\n )\n }\n /{subscriptionPlan.value === SUBSCRIPTION_OPTIONS.monthly ? 'month' : 'year'}\n \n
\n