Ghost/ghost/admin/app/templates/offer.hbs

<section class="gh-canvas circle-bg">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="offers" data-test-link="offers-back">Offers</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            {{#if this.offer.isNew}}
                New Offer
            {{else}}
                {{this.offer.name}}
            {{/if}}
        </h2>
        <section class="view-actions">
            <GhTaskButton @class="gh-btn gh-btn-primary gh-btn-icon" @type="button" @task={{this.saveTask}} @data-test-button="save" />
        </section>
    </GhCanvasHeader>

    <section class="view-container">
        <div class="gh-main-layout content-preview">
            <form>
                <div class="gh-main-section gh-offer-form">
                    <div class="gh-main-section-block no-margin">
                        <h4 class="gh-main-section-header small bn">Basic</h4>
                        <div class="gh-main-section-content grey">
                            <GhFormGroup @errors={{this.errors}} @property="name">
                                <label for="name" class="fw6">Name</label>
                                <GhTextInput
                                    @name="name"
                                    @placeholder="Black Friday"
                                    @id="name"
                                    @value={{this.offer.name}}
                                    @input={{this.setOfferName}}
                                    @class="gh-input" />
                                <GhErrorMessage @errors={{this.errors}} @property="name" />
                                <p>Will be shown to members on the Stripe Checkout page</p>
                            </GhFormGroup>
                        </div>

                        <h4 class="gh-main-section-header small bn">Discount info</h4>
                        <div class="gh-main-section-content grey">
                            <GhFormGroup @errors={{this.errors}} @property="product-cadence">
                                <label for="product-cadence" class="fw6">Tier – cadence</label>
                                <span class="gh-select">
                                    <OneWaySelect
                                        @value={{this.cadence}}
                                        @options={{this.cadences}}
                                        @optionValuePath="name"
                                        @optionLabelPath="label"
                                        @optionTargetPath="name"
                                        @update={{this.updateCadence}}
                                    />
                                    {{svg-jar "arrow-down-small"}}
                                </span>
                                <GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
                            </GhFormGroup>
                            {{#if (eq this.offer.type "percent")}}
                                <GhFormGroup @errors={{this.errors}} @property="amount">
                                    <label for="amount" class="fw6">Percentage off</label>
                                    <div class="gh-offer-value percentage">
                                        <span class="unit">%</span>
                                        <GhTextInput
                                            @type="number"
                                            @name="amount"
                                            @placeholder=""
                                            @id="amount"
                                            @value={{this.offer.amount}}
                                            @input={{this.setDiscountAmount}}
                                            @class="gh-input" />
                                        <GhErrorMessage @errors={{this.errors}} @property="amount" />
                                    </div>
                                </GhFormGroup>
                            {{else}}
                                <GhFormGroup @errors={{this.errors}} @property="amount">
                                    <label for="amount" class="fw6">Amount off</label>
                                    <div class="gh-offer-value fixed {{if (eq this.currencyLength 3) "fullcurrency"}}">
                                        <span class="unit">{{this.displayCurrency}}</span>
                                        <GhTextInput
                                            @name="amount"
                                            @type="number"
                                            @placeholder=""
                                            @value={{this.offer.amount}}
                                            @input={{this.setDiscountAmount}}
                                            @id="amount"
                                            @class="gh-input" />
                                        <GhErrorMessage @errors={{this.errors}} @property="amount" />
                                    </div>
                                </GhFormGroup>
                            {{/if}}
                            <div class="gh-offer-type">
                                <div class="gh-radio {{if (eq this.offer.type "percent") "active"}}" {{on "click" (fn this.setDiscountType "percent")}}>
                                    <div class="gh-radio-button"></div>
                                    <div class="gh-radio-content">
                                        <div class="gh-radio-label">Percentage discount</div>
                                    </div>
                                </div>
                                <div class="gh-radio {{if (eq this.offer.type "fixed") "active"}}" {{on "click" (fn this.setDiscountType "fixed")}}>
                                    <div class="gh-radio-button"></div>
                                    <div class="gh-radio-content">
                                        <div class="gh-radio-label">Fixed amount discount</div>
                                    </div>
                                </div>
                            </div>
                            <div class="gh-offer-duration">
                                <GhFormGroup @errors={{this.errors}} @property="duration">
                                    <label for="product-cadence" class="fw6">Duration</label>
                                    <span class="gh-select">
                                        <OneWaySelect
                                            @value={{this.offer.duration}}
                                            @options={{this.durations}}
                                            @optionValuePath="duration"
                                            @optionLabelPath="label"
                                            @optionTargetPath="duration"
                                            @update = {{this.updateDuration}}
                                        />
                                        {{svg-jar "arrow-down-small"}}
                                    </span>
                                    <GhErrorMessage @errors={{this.errors}} @property="duration" />
                                </GhFormGroup>
                                {{#if (eq this.selectedDuration "multiple-months")}}
                                <GhFormGroup @errors={{this.errors}} @property="duration-months" @class="duration-months">
                                    <label for="duration-months" class="fw6">Number of months</label>
                                    <GhTextInput
                                        @name="duration-months"
                                        @value={{this.offer.durationInMonths}}
                                        @input={{this.setDurationInMonths}}
                                        @id="duration-months"
                                        @class="gh-input" />
                                    <GhErrorMessage @errors={{this.errors}} @property="duration-months" />
                                </GhFormGroup>
                                {{/if}}
                            </div>
                        </div>

                        <h4 class="gh-main-section-header small bn">Portal settings</h4>
                        <div class="gh-main-section-content grey">
                            <div class="form-col2">
                                <GhFormGroup @errors={{this.errors}} @property="display-title">
                                    <label for="display-title" class="fw6">Display title</label>
                                    <GhTextInput
                                        @name="display-title"
                                        @value={{this.offer.displayTitle}}
                                        @input={{this.setPortalTitle}}
                                        @placeholder="Black Friday Special"
                                        @id="display-title"
                                        @class="gh-input" />
                                    <GhErrorMessage @errors={{this.errors}} @property="display-title" />
                                </GhFormGroup>
                                <GhFormGroup @errors={{this.errors}} @property="code">
                                    <label for="code" class="fw6">Offer code</label>
                                    <GhTextInput
                                        @name="code"
                                        @placeholder="black-friday"
                                        @value={{this.offer.code}}
                                        @input={{this.setOfferCode}}
                                        @id="code"
                                        @class="gh-input" />
                                    <GhErrorMessage @errors={{this.errors}} @property="code" />
                                </GhFormGroup>
                            </div>
                            <GhFormGroup @errors={{this.errors}} @property="url" @class="gh-offer-url">
                                <label for="url" class="fw6">URL</label>
                                <div class="gh-input-group">
                                    <GhTextInput
                                        @name="url"
                                        @value="https://example.com/black-friday"
                                        @id="url"
                                        @disabled="disabled"
                                        @class="gh-input" />

                                    <GhTaskButton
                                        @buttonText="Copy link"
                                        @task={{this.copyOfferUrl}}
                                        @successText="Link copied"
                                        @class="gh-btn gh-btn-icon" />
                                </div>
                                <GhErrorMessage @errors={{this.errors}} @property="url" />
                            </GhFormGroup>
                            <GhFormGroup @errors={{this.errors}} @property="description">
                                <label for="description" class="fw6">Description</label>
                                <GhTextarea
                                    @id="description"
                                    @name="description"
                                    @value={{this.offer.displayDescription}}
                                    @input={{this.setPortalDescription}}
                                    @stopEnterKeyDownPropagation="true"
                                />
                                <GhErrorMessage @errors={{this.errors}} @property="description" />
                            </GhFormGroup>
                        </div>
                    </div>
                </div>
            </form>

            <div class="gh-offer-portal-preview">
                <div>
                    <h4 class="gh-main-section-header small bn">Preview</h4>
                    <div class="gh-offer-portal-preview-mock">Portal preview</div>
                </div>
            </div>
        </div>

        {{!-- <div class="gh-main-section">
            <div class="gh-main-section-block">
                <button
                    type="button"
                    class="gh-btn gh-btn-red gh-btn-icon"
                >
                    <span>Archive offer</span>
                </button>
            </div>
        </div> --}}
    </section>
</section>