Added upgrade page to members auth (#10513)

no-issue

ghost/members-auth-pages/components/Modal.js

@@ -9,6 +9,7 @@ import PasswordResetSentPage from '../pages/PasswordResetSentPage';
 import ResetPasswordPage from '../pages/ResetPasswordPage';
 import StripePaymentPage from '../pages/StripePaymentPage';
 import { IconClose } from '../components/icons';
+import StripeSubscribePage from '../pages/StripeSubscribePage';
 
 export default class Modal extends Component {
     constructor(props, context) {
@@ -55,7 +56,19 @@ export default class Modal extends Component {
         }
         return (
             <SignupPage error={error} hash="signup" handleSubmit={signup} handleClose={closeModal} />
-        )
+        );
+    }
+
+    renderUpgradePage(props, state) {
+        const { error, paymentConfig } = state;
+        const { members } = this.context;
+        const closeModal = () => this.close();
+        const createSubscription = (data) => this.handleAction(
+            members.createSubscription(data)
+        );
+        const stripeConfig = paymentConfig && paymentConfig.find(({adapter}) => adapter === 'stripe');
+        return <StripeSubscribePage frameLocation={props.frameLocation} stripeConfig={stripeConfig} error={error} hash="upgrade" handleSubmit={createSubscription} handleClose={closeModal}/>
+
     }
 
     render(props, state) {
@@ -83,6 +96,7 @@ export default class Modal extends Component {
                 <SigninPage error={error} hash="" handleSubmit={signup} />
                 <SigninPage error={error} hash="signin" handleSubmit={signin} />
                 {this.renderSignupPage({error, stripeConfig, members, signup, closeModal})}
+                {this.renderUpgradePage(props, state)}
                 <RequestPasswordResetPage error={error} hash="request-password-reset" handleSubmit={requestReset} />
                 <PasswordResetSentPage error={error} hash="password-reset-sent" handleSubmit={requestReset} />
                 <ResetPasswordPage error={error} hash="reset-password" handleSubmit={resetPassword} />

ghost/members-auth-pages/pages/StripeSubscribePage.js

@@ -0,0 +1,118 @@
+import { Elements, StripeProvider, injectStripe } from 'react-stripe-elements';
+import { Component } from 'react';
+import FormHeader from '../components/FormHeader';
+import FormSubmit from '../components/FormSubmit';
+import FormHeaderCTA from '../components/FormHeaderCTA';
+import { IconClose } from '../components/icons';
+import NameInput from '../components/NameInput';
+import EmailInput from '../components/EmailInput';
+import PasswordInput from '../components/PasswordInput';
+import CheckoutForm from '../components/CheckoutForm';
+import Form from '../components/Form';
+
+class PaymentForm extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    handleSubmit = ({ name, email, password, plan }) => {
+        // 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 : "";
+        this.props.stripe.createToken({ name: name }).then(({ token }) => {
+            this.props.handleSubmit({
+                adapter: 'stripe',
+                plan: plan,
+                stripeToken: token.id,
+                name, email, password
+            });
+        });
+    };
+
+    render({frameLocation}) {
+        return (
+            <Form onSubmit={(data) => this.handleSubmit(data)}>
+                <CheckoutForm />
+
+                <FormSubmit label="Confirm Payment" />
+            </Form>
+        );
+    }
+}
+
+const PaymentFormWrapped = injectStripe(PaymentForm);
+
+export default class StripeSubscriptionPage extends Component {
+    constructor(props) {
+        super(props);
+        this.plans = props.stripeConfig.config.plans || [];
+        this.state = {
+            selectedPlan: this.plans[0] ? this.plans[0] : ""
+        }
+    }
+
+    renderPlan({ currency, amount, id, interval, name }) {
+        const selectedPlanId = this.state.selectedPlan ? this.state.selectedPlan.id : "";
+        return (
+            <div class="gm-plan">
+                <input type="radio" id={id} name="radio-group" value={id} defaultChecked={id === selectedPlanId} />
+                <label for={id}>
+                    <span class="gm-amount">{`$${amount}`}</span>
+                    <span class="gm-interval">{`${interval}`}</span>
+                </label>
+            </div>
+        )
+    }
+
+    changePlan(e) {
+        const plan = this.plans.find(plan => plan.id === e.target.value);
+        this.setState({
+            selectedPlan: plan
+        })
+    }
+
+    renderPlans(plans) {
+        return (
+            <div onChange={(e) => this.changePlan(e)}>
+                {
+                    plans.map((plan) => this.renderPlan(plan))
+                }
+            </div>
+        );
+    }
+
+    renderPlansSection() {
+        return (
+            <div className="gm-plans-container">
+                <div className="gm-publication-info">
+                    <div className="gm-logo"></div>
+                    <div className="gm-publication-name">
+                        <h2>Expensive Publication</h2>
+                        <span>Subscription</span>
+                    </div>
+                </div>
+                {this.renderPlans(this.plans)}
+            </div>
+        )
+    }
+
+    render({ error, handleSubmit, stripeConfig }) {
+        const publicKey = stripeConfig.config.publicKey || '';
+        return (
+            <div className="flex">
+                <div className="gm-modal-form gm-subscribe-form">
+                    <FormHeader title="Subscribe" error={error} errorText="Unable to confirm payment">
+                        <FormHeaderCTA title="Already a member?" label="Log in" hash="#signin" />
+                    </FormHeader>
+                    <StripeProvider apiKey={publicKey}>
+                        <Elements>
+                            <PaymentFormWrapped handleSubmit={handleSubmit} publicKey={publicKey} selectedPlan={this.state.selectedPlan} />
+                        </Elements>
+                    </StripeProvider>
+                </div>
+                {this.renderPlansSection()}
+            </div>
+        )
+    }
+};