mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-11 09:53:32 +03:00
Added coupon support to StripeSubscribePage
no-issue Only shows the (disabled) input when a coupon is available
This commit is contained in:
parent
feee3dc58f
commit
4d9ddbf77a
@ -5,10 +5,16 @@ import FormSubmit from '../components/FormSubmit';
|
||||
import FormHeaderCTA from '../components/FormHeaderCTA';
|
||||
import NameInput from '../components/NameInput';
|
||||
import EmailInput from '../components/EmailInput';
|
||||
import CouponInput from '../components/CouponInput';
|
||||
import PasswordInput from '../components/PasswordInput';
|
||||
import CheckoutForm from '../components/CheckoutForm';
|
||||
import Form from '../components/Form';
|
||||
|
||||
const getCouponData = frameLocation => {
|
||||
const params = new URLSearchParams(frameLocation.query);
|
||||
const coupon = params.get('coupon') || '';
|
||||
return { coupon };
|
||||
};
|
||||
|
||||
class PaymentForm extends Component {
|
||||
|
||||
@ -16,7 +22,7 @@ class PaymentForm extends Component {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSubmit = ({ name, email, password, plan }) => {
|
||||
handleSubmit = ({ name, email, password, plan, coupon }) => {
|
||||
// Within the context of `Elements`, this call to createToken knows which Element to
|
||||
// tokenize, since there's only one in this group.
|
||||
plan = this.props.selectedPlan ? this.props.selectedPlan.name : "";
|
||||
@ -25,7 +31,7 @@ class PaymentForm extends Component {
|
||||
adapter: 'stripe',
|
||||
plan: plan,
|
||||
stripeToken: token.id,
|
||||
name, email, password
|
||||
name, email, password, coupon
|
||||
});
|
||||
});
|
||||
};
|
||||
@ -34,17 +40,19 @@ class PaymentForm extends Component {
|
||||
this.props.stripe.createToken({ name: name });
|
||||
}
|
||||
|
||||
render() {
|
||||
render({frameLocation}) {
|
||||
let label = this.props.showSpinner ? (
|
||||
(
|
||||
<span><span class="gm-spinner"></span> Signing up... </span>
|
||||
)
|
||||
)
|
||||
) : "Confirm payment";
|
||||
const { coupon } = getCouponData(frameLocation);
|
||||
return (
|
||||
<Form bindTo="request-password-reset" onSubmit={(data) => this.handleSubmit(data)}>
|
||||
<Form includeData={getCouponData(frameLocation)} bindTo="request-password-reset" onSubmit={(data) => this.handleSubmit(data)}>
|
||||
<NameInput bindTo="name" className="first" />
|
||||
<EmailInput bindTo="email" />
|
||||
<PasswordInput bindTo="password" />
|
||||
{ coupon ? <CouponInput disabled={true} bindTo="coupon" /> : '' }
|
||||
<CheckoutForm />
|
||||
<FormSubmit label={label} onClick={() => this.onClick()}/>
|
||||
</Form>
|
||||
@ -109,7 +117,7 @@ export default class StripePaymentPage extends Component {
|
||||
)
|
||||
}
|
||||
|
||||
render({ error, handleSubmit, stripeConfig, siteConfig, showSpinner }) {
|
||||
render({ error, handleSubmit, stripeConfig, siteConfig, showSpinner, frameLocation }) {
|
||||
const publicKey = stripeConfig.config.publicKey || '';
|
||||
let iconUrl = siteConfig && siteConfig.icon;
|
||||
let title = (siteConfig && siteConfig.title) || "Ghost Publication";
|
||||
@ -124,7 +132,7 @@ export default class StripePaymentPage extends Component {
|
||||
<div className="gm-modal-form gm-subscribe-form">
|
||||
<StripeProvider apiKey={publicKey}>
|
||||
<Elements>
|
||||
<PaymentFormWrapped handleSubmit={handleSubmit} publicKey={publicKey} selectedPlan={this.state.selectedPlan} showSpinner={showSpinner} />
|
||||
<PaymentFormWrapped handleSubmit={handleSubmit} frameLocation={frameLocation} publicKey={publicKey} selectedPlan={this.state.selectedPlan} showSpinner={showSpinner} />
|
||||
</Elements>
|
||||
</StripeProvider>
|
||||
<div className="flex justify-center mt4">
|
||||
|
Loading…
Reference in New Issue
Block a user