Ghost/ghost/admin/app/components/modal-product-price.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">
        <h4 class="gh-main-section-header small bn">Pricing</h4>
        <div class="gh-main-section-content grey gh-product-priceform-block">
            <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="name">
                <label for="name" class="fw6">Name</label>
                <GhTextInput
                    @value={{readonly this.price.nickname}}
                    @input={{action (mut this.price.nickname) value="target.value"}}
                    @name="name"
                    @id="name"
                    @class="gh-input" />
                <GhErrorMessage @errors={{this.price.errors}} @property="name" />
            </GhFormGroup>
            <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="description">
                <label for="description" class="fw6">Description</label>
                <GhTextInput
                    @value=''
                    @name="description"
                    @id="description"
                    @class="gh-input" />
                <GhErrorMessage @errors={{this.price.errors}} @property="description" />
            </GhFormGroup>
            <div class="gh-product-priceform-pricecurrency">    
                <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="price">
                    <label for="price" class="fw6">Price</label>
                    <div class="flex items-center justify-center gh-labs-price-label">
                        <GhTextInput
                            @value={{this.price.amount}}
                            @type="number"
                            @disabled={{this.isExistingPrice}}
                            @input={{action "setAmount" value="target.value"}}
                        />
                        {{!-- <span class="gh-input-append"><span class="ttu">{{capitalize (or this.currencyVal "usd")}} </span>/{{or this.periodVal "month"}}</span> --}}
                    </div>
                    <GhErrorMessage @errors={{this.price.errors}} @property="price" />
                </GhFormGroup>
                <GhFormGroup @class="for-select">
                    <label class="fw6 f8"for="currency">Plan currency</label>
                    <span class="gh-select mt1">
                        {{one-way-select this.selectedCurrencyObj
                            id="currency"
                            name="currency"
                            options=(readonly this.allCurrencies)
                            optionValuePath="value"
                            optionLabelPath="label"
                            disabled=this.isExistingPrice
                            update=(action "setCurrency")
                        }}
                        {{svg-jar "arrow-down-small"}}
                    </span>
                </GhFormGroup>
            </div>
            <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="billing-period">
                <label for="billing-period" class="fw6">Billing period</label>
                <GhProductsPriceBillingperiod 
                    @updatePeriod={{action "updatePeriod"}}
                    @triggerId="period-input" 
                    @value={{this.price.interval}} @disabled={{this.isExistingPrice}} 
                />
            </GhFormGroup>
        </div>

        <h4 class="gh-main-section-header small bn">Advanced</h4>
        <div class="gh-main-section-content grey gh-product-priceform-block">
            <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="welcome-page">
                <label for="welcome-page" class="fw6">Welcome page</label>
                <GhTextInput
                    @value=''
                    @name="welcome-page"
                    @id="welcome-page"
                    @class="gh-input" />
                <p>Redirect to this URL after signing up with this price</p>
                <GhErrorMessage @errors={{this.price.errors}} @property="welcome-page" />
            </GhFormGroup>
            <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="stripe-url">
                <label for="stripe-url" class="fw6">Stripe Checkout URL</label>
                <GhTextInput
                    @value='https://example.com/checkout'
                    @name="stripe-url"
                    @id="stripe-url"
                    @disabled={{true}}
                    @class="gh-input" />
                <GhErrorMessage @errors={{this.price.errors}} @property="stripe-url" />
            </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="Save price"
        @successText={{this.successText}}
        @task={{this.savePrice}}
        @class="gh-btn gh-btn-black gh-btn-icon"
        data-test-button="save-price" />
</div>