TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-09-21 18:08:51 +03:00
Code Issues Projects Releases Wiki Activity

Added coupon support to StripeSubscribePage

Browse Source 
no-issue

Only shows the (disabled) input when a coupon is available
This commit is contained in:
Fabien O'Carroll 2019-04-16 19:06:26 +02:00
parent 5cb9850784
commit eb0463b119
1 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ghost/members-auth-pages/pages/StripeSubscribePage.js
View File

@ -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">