From 4d9ddbf77a8c4dde6a42b8eb126bfef694dc7a64 Mon Sep 17 00:00:00 2001
From: Fabien O'Carroll <fabien@allou.is>
Date: Tue, 16 Apr 2019 19:06:26 +0200
Subject: [PATCH] Added coupon support to StripeSubscribePage

no-issue

Only shows the (disabled) input when a coupon is available
---
 .../static/auth/pages/StripeSubscribePage.js  | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/core/server/lib/members/static/auth/pages/StripeSubscribePage.js b/core/server/lib/members/static/auth/pages/StripeSubscribePage.js
index 7099a2fa96..4bc186dd79 100644
--- a/core/server/lib/members/static/auth/pages/StripeSubscribePage.js
+++ b/core/server/lib/members/static/auth/pages/StripeSubscribePage.js
@@ -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">