Ghost/ghost/admin/app/components/gh-launch-wizard/set-pricing.hbs

<div class="gh-launch-wizard-settings-container" {{did-insert this.setup}}>
    {{#if this.isConnectDisallowed}}
        <div class="gh-stack overflow-y-auto flex-grow-1">
            <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 class="w-100 mt6">
                <div class="gh-setting-title">Generate secure key</div>
                <div class="flex items-center mb4 gh-members-connectbutton-container justify-between mt2">
                    <div class="stripe-connect disabled"><span>Connect with Stripe</span></div>
                    <div class="ml2 flex items-center flex-nowrap">
                        <span class="mr2 f8 midgrey nowrap">Test mode</span>
                        <div class="for-switch small disabled">
                            <label class="switch" for="stripe-connect-test-mode">
                                <input type="checkbox" class="gh-input" disabled="disabled">
                                <span class="input-toggle-component mt1"></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="gh-setting-action">
                    <GhTextarea
                        class="gh-launch-wizard-stripe-connect-token"
                        placeholder="Paste your secure key here"
                        disabled="disabled"
                    />
                </div>
            </div>
        </div>
    {{else}}
        <div class="gh-stack overflow-y-auto flex-grow-1">
            <div class="gh-stack-item flex-column">
                <div class="w-100">
                    <GhFormGroup @class="for-select">
                        <div class="gh-setting-title" for="currency">Plan currency</div>
                        <span class="gh-select mt2">
                            <OneWaySelect
                                @disabled={{this.disabled}}
                                @value={{this.selectedCurrency}}
                                id="currency"
                                name="currency"
                                @options={{readonly this.allCurrencies}}
                                @optionValuePath="value"
                                @optionLabelPath="label"
                                @update={{this.setStripePlansCurrency}}
                            />
                            {{svg-jar "arrow-down-small"}}
                        </span>
                    </GhFormGroup>
                </div>
                <div class="w-100 flex flex-column flex-row-ns">
                    <div class="w-100 w-50-ns mr3-ns">
                        <GhFormGroup>
                        <div class="gh-setting-title">Monthly price</div>

                        <div class="flex items-center justify-center mt2 gh-input-group gh-labs-price-label">
                            <GhTextInput
                                @disabled={{this.disabled}}
                                @value={{readonly this.stripeMonthlyAmount}}
                                @type="number"
                                @input={{action (mut this.stripeMonthlyAmount) value="target.value"}}
                                {{on "blur" this.validateStripePlans}}
                            />
                            <span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/month</span>
                        </div>
                        </GhFormGroup>
                    </div>
                    <div class="w-100 w-50-ns ml2-ns">
                        <GhFormGroup>
                        <div class="gh-setting-title">Yearly price</div>
                        <div class="flex items-center justify-center mt2 gh-input-group gh-labs-price-label">
                            <GhTextInput
                                @disabled={{this.disabled}}
                                @value={{readonly this.stripeYearlyAmount}}
                                @type="number"
                                @input={{action (mut this.stripeYearlyAmount) value="target.value"}}
                                {{on "blur" this.validateStripePlans}}
                            />
                            <span class="gh-input-append"><span class="ttu">{{this.currency}}</span>/year</span>
                        </div>
                        </GhFormGroup>
                    </div>
                </div>
            </div>
            <div class="w-100 w-50-l flex flex-column flex-row-ns">
                {{#if this.stripePlanError}}
                    <p class="response w-100 red"> {{this.stripePlanError}} </p>
                {{/if}}
            </div>

            <div class="gh-stack-item gh-setting flex-column">
                <div class="gh-setting-title">Plans available at signup</div>
                <div class="form-group mt2 mb0 for-checkbox">
                    <label
                        class="checkbox"
                        for="free-plan"
                    >
                        <input
                            type="checkbox"
                            checked={{this.isFreeChecked}}
                            id="free-plan"
                            name="free-plan"
                            disabled={{this.isFreeDisabled}}
                            class="gh-input post-settings-featured"
                            {{on "click" this.toggleFreePlan}}
                            data-test-checkbox="featured"
                        >
                        <span class="input-toggle-component"></span>
                        <p>Free</p>
                    </label>
                </div>
                <div class="form-group mb0 for-checkbox">
                    <label
                        class="checkbox"
                        for="monthly-plan"
                    >
                        <input
                            type="checkbox"
                            id="monthly-plan"
                            name="monthly-plan"
                            checked={{this.isMonthlyChecked}}
                            disabled={{this.isPaidPriceDisabled}}
                            class="gh-input post-settings-featured"
                            {{on "click" this.toggleMonthlyPlan}}
                            data-test-checkbox="featured"
                        >
                        <span class="input-toggle-component"></span>
                        <p>Monthly</p>
                    </label>
                </div>
                <div class="form-group mb0 for-checkbox">
                    <label
                        class="checkbox"
                        for="yearly-plan"
                    >
                        <input
                            type="checkbox"
                            id="yearly-plan"
                            name="yearly-plan"
                            checked={{this.isYearlyChecked}}
                            disabled={{this.isPaidPriceDisabled}}
                            class="gh-input post-settings-featured"
                            {{on "click" this.toggleYearlyPlan}}
                            data-test-checkbox="featured"
                        >
                        <span class="input-toggle-component"></span>
                        <p>Yearly</p>
                    </label>
                </div>
            </div>
        </div>
    {{/if}}

    <div class="gh-launch-wizard-nav-buttons">
        <button type="button" class="gh-btn gh-btn-outline gh-btn-icon-dark gh-btn-large w-30" {{on "click" this.backStep}}><span>{{svg-jar "arrow-left-tail"}}</span></button>

        {{!-- TODO: reset "failed" state automatically --}}
        <GhTaskButton
            @task={{this.saveAndContinue}}
            @runningText="Saving"
            @class="w-70 ml4 right gh-btn gh-btn-black gh-btn-large gh-btn-icon-right"
            data-test-button="wizard-next"
        >
            <span>{{if this.isHidden "Continue" "Save and continue"}}{{svg-jar "arrow-right-tail"}}</span>
        </GhTaskButton>
    </div>
</div>