Ghost/ghost/admin/app/templates/settings/membership.hbs

<section class="gh-canvas circle-bg" {{did-insert this.setup}}>
    <GhCanvasHeader class="gh-canvas-header gh-setting-members-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="settings">Settings</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            Membership
        </h2>
        <section class="view-actions">
            <GhTaskButton
                @buttonText="Save"
                @task={{this.saveSettingsTask}}
                @successText="Saved"
                @runningText="Saving"
                @class="gh-btn gh-btn-primary gh-btn-icon"
                {{on-key "cmd+s"}}
                data-test-button="save-settings"
            />
        </section>
    </GhCanvasHeader>

    <section class="view-container settings-debug">

        <div class="gh-main-layout content-preview">
            <div class="gh-setting-members-basicsform">
                <p class="intro">Fund your work with subscription revenue. Connect your Stripe account and offer premium content to your audience. Our creators are already making over $12 million per year, while <strong>Ghost takes 0% payment fees</strong>.</p>
                <hr>
                <div>
                    <section class="gh-expandable gh-setting-members-portalcta">
                        <div class="gh-expandable-block">
                            <div class="gh-expandable-header">
                                <div>
                                    <h4 class="gh-expandable-title">Portal Settings</h4>
                                    <p class="gh-expandable-description">
                                        Customize members modal signup flow
                                    </p>
                                </div>
                                <button type="button" class="gh-btn gh-btn-green" disabled={{eq this.settings.membersSignupAccess "none"}} {{on "click" this.openPortalSettings}} data-test-toggle="portal-settings">
                                    <span>Customize Portal &rarr;</span>
                                </button>
                            </div>
                        </div>
                    </section>

                    <div class="gh-setting-rich-dropdown">
                        <Settings::MembersSubscriptionAccess @onChange={{this.membersSubscriptionAccessChanged}} />
                        <Settings::MembersDefaultPostAccess />
                    </div>
                </div>
            </div>
            <div class="gh-setting-members-portalpreview">
                <div class="gh-setting-members-portal-mock {{if (feature "multipleProducts") "mock-enabled"}}">
                    {{#if (or (eq this.settings.membersSignupAccess 'none') this.switchFromNoneTask.isRunning)}}
                        <div class="gh-setting-members-portal-disabled" data-test-portal-preview-disabled>
                            <span class="lightgrey">{{svg-jar "portal-logo-stroke"}}</span>
                            <h4>Portal disabled</h4>
                            <p>Change your Subscription Access setting to re-enable Portal</p>
                        </div>
                    {{else}}
                        <GhSiteIframe
                            scrolling="no"
                            @src={{this.portalPreviewUrl}}
                            @invisibleUntilLoaded="portal-ready"
                            @onInserted={{this.portalPreviewInserted}}
                            @onDestroyed={{this.portalPreviewDestroyed}}
                            data-test-iframe="portal-preview"/>
                    {{/if}}
                </div>
            </div>
        </div>

        <div class="gh-setting-members-tierscontainer">
            <div class="gh-settings-members-tiersheader">
                <h4 class="gh-main-section-header small bn">Membership tiers</h4>
                {{#if this.session.user.isAdmin}}
                <button type="button" class="gh-btn gh-btn-outline gh-btn-stripe-status {{if this.isConnectDisallowed "disabled"}} {{if this.settings.stripeConnectAccountId "connected" ""}}" {{on "click" this.openStripeConnect}}>
                    <span>
                        {{if this.settings.stripeConnectAccountId "Connected to Stripe" "Stripe not connected"}}
                    </span>
                </button>
                {{/if}}
            </div>
            <section class="gh-expandable">
                <div class="gh-expandable-block">
                    <div class="gh-expandable-header">
                        <div>
                            <h4 class="gh-expandable-title">Free</h4>
                            <p class="gh-expandable-description">Free member sign up settings</p>
                        </div>
                        <button type="button" class="gh-btn" {{on "click" (toggle "freeOpen" this)}} data-test-button="toggle-free-settings"><span>{{if this.freeOpen "Close" "Expand"}}</span></button>
                    </div>
                    <div class="gh-expandable-content">
                        {{#liquid-if this.freeOpen}}
                        <div class="gh-setting-content-extended" data-test-free-settings-expanded>
                            {{#if (feature "multipleProducts")}}
                                <GhProductCard
                                    @product={{this.freeProduct}}
                                    @products={{this.products}}
                                    @openEditProduct={{this.openEditProduct}}
                                />
                            {{/if}}
                            {{#if (or (not (feature "tierWelcomePages")) (not (feature "multipleProducts")))}}
                                <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="free-welcome-page">
                                    <label for="freeWelcomePage">Welcome page</label>
                                    <GhUrlInput
                                        @id="freeWelcomePage"
                                        @value={{readonly this.settings.membersFreeSignupRedirect}}
                                        @baseUrl={{readonly this.siteUrl}}
                                        @setResult={{this.setFreeSignupRedirect}}
                                        @validateUrl={{this.validateFreeSignupRedirect}}
                                        @placeholder={{readonly this.siteUrl}}
                                        data-test-input="old-free-welcome-page"
                                    />
                                    <GhErrorMessage
                                        @errors={{this.settings.errors}}
                                        @property="membersFreeSignupRedirect"
                                    />
                                    <p>Redirect to this URL after signup for a free membership</p>
                                </GhFormGroup>
                            {{else}}
                                <GhFormGroup>
                                    <label for="welcomePage" class="fw6">Welcome page</label>
                                    <GhUrlInput
                                        @id="welcomePage"
                                        @value={{readonly this.freeProduct.welcomePageURL}}
                                        @baseUrl={{readonly this.siteUrl}}
                                        @setResult={{this.setWelcomePageURL}}
                                        @validateUrl={{this.validateWelcomePageURL}}
                                        @placeholder={{readonly this.siteUrl}}
                                        data-test-input="free-welcome-page"
                                    />
                                    <p>Redirect to this URL after signup for a free membership</p>
                                </GhFormGroup>
                            {{/if}}
                        </div>
                        {{/liquid-if}}
                    </div>
                </div>
            </section>
            <section class="gh-expandable">
                <div class="gh-expandable-block">
                    <div class="gh-expandable-header">
                        <div>
                            <h4 class="gh-expandable-title">Premium</h4>
                            <p class="gh-expandable-description">Set prices and paid member sign up settings</p>
                        </div>

                        {{#if this.settings.stripeConnectAccountId}}
                            <button type="button" class="gh-btn" {{on "click" (toggle "paidOpen" this)}} data-test-toggle-pub-info><span>{{if this.paidOpen "Close" "Expand"}}</span></button>
                        {{else}}
                            <button type="button" class="stripe-connect {{if (or (not this.session.user.isAdmin) this.isConnectDisallowed) "disabled"}}" {{on "click" this.openStripeConnect}}>
                                <span>Connect with Stripe</span>
                            </button>
                        {{/if}}
                    </div>
                    {{#if this.isConnectDisallowed}}
                    <div class="gh-setting-nossl">
                        <div class="gh-setting-nossl-container">
                            <span class="red">{{svg-jar "shield-lock"}}</span>
                            <h4>Your site is not secured</h4>
                            <p>Paid memberships through Ghost can only be run on sites secured by SSL (HTTPS vs. HTTP). More information on adding a free SSL Certificate to your Ghost site can be <a href="https://ghost.org/integrations/lets-encrypt/" target="_blank" rel="noopener noreferrer">found here</a>.</p>
                        </div>
                    </div>
                    {{/if}}
                    <div class="gh-expandable-content">
                        {{#liquid-if this.paidOpen}}
                        <div class="gh-setting-content-extended">
                            {{#if this.fetchDefaultProduct.isRunning}}
                                Loading...
                            {{else}}
                                {{#if (feature "multipleProducts")}}
                                    <GhMembershipProductsAlpha
                                        @products={{this.paidProducts}}
                                        @confirmProductSave={{this.confirmProductSave}}
                                    />
                                {{else}}
                                    <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="prices">
                                        <div class="gh-settings-members-pricelabelcont">
                                            <label for="monthlyPrice">Prices</label>
                                            <span>–</span>
                                            <div>
                                                <span class="gh-setting-members-currency gh-select">
                                                    <div class="gh-setting-members-currencylabel">
                                                        <span>{{this.currency}}</span>
                                                        {{svg-jar "arrow-down-small"}}
                                                    </div>
                                                    <OneWaySelect
                                                        @value={{this.selectedCurrency}}
                                                        id="currency"
                                                        name="currency"
                                                        @options={{readonly this.allCurrencies}}
                                                        @optionValuePath="value"
                                                        @optionLabelPath="label"
                                                        @update={{this.setStripePlansCurrency}}
                                                    />
                                                </span>
                                            </div>
                                        </div>
                                        <div class="gh-setting-members-prices">

                                            <div class="gh-input-group">
                                                <GhTextInput
                                                    @id="monthlyPrice"
                                                    @value={{readonly this.stripeMonthlyAmount}}
                                                    @type="number"
                                                    @input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
                                                    @focus-out={{action "validateStripePlans"}}
                                                />
                                                <span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
                                            </div>
                                            <div class="gh-input-group">
                                                <GhTextInput
                                                    @id="yearlyPrice"
                                                    @value={{readonly this.stripeYearlyAmount}}
                                                    @type="number"
                                                    @input={{action (mut this.stripeYearlyAmount) value="target.value"}}
                                                    @focus-out={{this.validateStripePlans}}
                                                    @placeholder=''
                                                    data-test-title-input={{true}}
                                                />
                                                <span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
                                            </div>
                                        </div>
                                        {{#if this.stripePlanError}}
                                            <p class="response w-100"><span class="red">{{this.stripePlanError}}</span></p>
                                        {{/if}}
                                    </GhFormGroup>
                                {{/if}}
                                {{#if (or (not (feature "tierWelcomePages")) (not (feature "multipleProducts")))}}
                                    <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="paid-welcome-page">
                                        <label for="paidWelcomePage">Welcome page</label>
                                        <GhUrlInput
                                            @value={{readonly this.settings.membersPaidSignupRedirect}}
                                            @baseUrl={{readonly this.siteUrl}}
                                            @setResult={{this.setPaidSignupRedirect}}
                                            @validateUrl={{this.validatePaidSignupRedirect}}
                                            @placeholder={{readonly this.siteUrl}}
                                        />
                                        <GhErrorMessage
                                            @errors={{this.settings.errors}}
                                            @property="membersPaidSignupRedirect"
                                        />
                                        <p>Redirect to this URL after signup for premium membership</p>
                                    </GhFormGroup>
                                {{/if}}
                            {{/if}}
                        </div>
                        {{/liquid-if}}
                    </div>
                </div>
            </section>
        </div>
    </section>

    {{#if this.showLeaveRouteModal}}
        <GhFullscreenModal
            @modal="leave-settings"
            @confirm={{this.confirmLeave}}
            @close={{this.cancelLeave}}
            @modifier="action wide"
        />
    {{/if}}

    {{#if this.showPortalSettings}}
        <GhFullscreenModal @modal="portal-settings"
            @model={{hash
                preloadTask=this.saveSettingsTask
                openStripeSettings=this.openStripeConnect
                products=this.products
            }}
            @close={{this.closePortalSettings}}
            @modifier="full-overlay portal-settings" />
    {{/if}}

    {{#if this.showLeavePortalModal}}
        <GhFullscreenModal
            @modal="leave-settings"
            @confirm={{this.confirmClosePortalSettings}}
            @close={{this.cancelClosePortalSettings}}
            @modifier="action wide"
        />
    {{/if}}

    {{#if this.showStripeConnect}}
        <GhFullscreenModal
            @modal="stripe-connect"
            @close={{this.closeStripeConnect}}
            @modifier="action wide stripe-connect" />
    {{/if}}
    {{#if this.showProductModal}}
        <GhFullscreenModal
            @modal="product"
            @model={{hash
                product=this.productModel
                products=this.products
            }}
            @confirm={{this.confirmProductSave}}
            @close={{this.closeProductModal}}
            @modifier="edit-product action wide" />
    {{/if}}
</section>