Ghost/ghost/admin/app/components/modal-product.hbs

<header class="modal-header" data-test-modal="webhook-form">
    <h1 data-test-text="title">{{this.title}}</h1>
</header>
<button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
    {{svg-jar "close"}}
</button>

<form>
<div class="modal-body">
    <div class="gh-main-section-block">
        <div class="gh-main-section-content grey gh-product-priceform-block">
            <GhFormGroup @errors={{this.errors}} @property="name">
                <label for="name" class="fw6">Name</label>
                <GhTextInput
                    @value={{readonly this.product.name}}
                    @input={{action (mut this.product.name) value="target.value"}}
                    @name="name"
                    @id="name"
                    @class="gh-input" />
                <GhErrorMessage @errors={{this.errors}} @property="name" />
            </GhFormGroup>
            <GhFormGroup @errors={{this.errors}} @property="description">
                <label for="description" class="fw6">Description</label>
                <GhTextInput
                    @value={{readonly this.product.description}}
                    @input={{action (mut this.product.description) value="target.value"}}
                    @name="description"
                    @id="description"
                    @class="gh-input" />
                <GhErrorMessage @errors={{this.errors}} @property="description" />
            </GhFormGroup>
            <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={{action "setCurrency"}}
                            />
                        </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>
        </div>
    </div>
</div>
</form>

<div class="modal-footer">
    <button
        class="gh-btn"
        {{action "closeModal"}}
        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
        {{action (optional this.noop) on="mouseDown"}}
        data-test-button="cancel-webhook"
    >
        <span>Cancel</span>
    </button>
    <GhTaskButton @buttonText="{{if this.isExistingProduct "Save" "Add product"}}"
        @successText={{this.successText}}
        @task={{this.saveProduct}}
        @idleClass="gh-btn-primary"
        @class="gh-btn {{if this.isExistingProduct "gh-btn-black" "gh-btn-green"}} gh-btn-icon"
        data-test-button="save-product" />
</div>