ghost/admin/app/templates/offer.hbs
<section class="gh-canvas gh-offer circle-bg" {{did-insert this.setup}}>
<GhCanvasHeader class="gh-canvas-header">
<div class="flex flex-column">
<div class="gh-canvas-breadcrumb">
<LinkTo @route="offers" data-test-link="offers-back">
Offers
</LinkTo>
{{svg-jar "arrow-right-small"}} {{if this.offer.isNew "New offer" "Edit offer"}}
</div>
<h2 class="gh-canvas-title" data-test-screen-title>
{{#if this.offer.isNew}}
New Offer
{{else}}
{{this.offer.name}}
{{#if (eq this.offer.status "archived")}}
<span class="gh-badge gh-badge-title">Archived</span>
{{/if}}
{{/if}}
</h2>
</div>
<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.offer.errors}} @property="name" @hasValidated={{this.offer.hasValidated}} class="no-margin">
<label for="name" class="fw6">Name</label>
<GhTextInput
@name="name"
@placeholder="Black Friday"
@id="name"
@value={{this.offer.name}}
@input={{this.setOfferName}}
data-test-input="offer-name"
@class="gh-input" />
<span class="error">
<GhErrorMessage @errors={{this.offer.errors}} @property="name" />
</span>
<p>Visible to members on Stripe Checkout page.</p>
</GhFormGroup>
</div>
<h4 class="gh-main-section-header gh-main-section-header-with-info small bn">
<span>Discount information</span>
<span class="midgrey gh-main-section-header-info tooltip-left" data-tooltip="Once saved, this cannot be changed" >{{svg-jar "info"}}</span>
</h4>
<div class="gh-main-section-content grey">
<GhFormGroup>
<div>
<label class="fw6">Offer type</label>
<div class="gh-offer-type-container {{if this.isDiscountSectionDisabled "disabled"}}">
<button class="gh-radio {{if this.isDiscountOffer "active"}}" type="button" {{on "click" (fn this.changeType "discount")}} disabled={{this.isDiscountSectionDisabled}}>
<div class="gh-radio-button"></div>
<div class="gh-radio-content">
<div class="gh-radio-label">Discount</div>
<div class="gh-radio-desc">Offer a special reduced price.</div>
</div>
</button>
<button class="gh-radio {{if this.isTrialOffer "active"}}"
type="button" {{on "click" (fn this.changeType "trial")}} disabled={{this.isDiscountSectionDisabled}}>
<div class="gh-radio-button"></div>
<div class="gh-radio-content">
<div class="gh-radio-label">Free trial</div>
<div class="gh-radio-desc">Give free access for a limited time.</div>
</div>
</button>
</div>
</div>
</GhFormGroup>
{{#if this.isTrialOffer}}
<div class="gh-offer-tier-and-trial">
<GhFormGroup @errors={{this.errors}} @property="product-cadence">
<label for="product-cadence" class="fw6">Tier – cadence</label>
<span class="gh-select gh-select-product-cadence">
<OneWaySelect
@value={{this.cadence}}
@options={{this.cadences}}
@optionValuePath="name"
@optionLabelPath="label"
@optionTargetPath="name"
@title="{{this.offer.tier.name}} - {{if (eq this.offer.cadence "month") "Monthly" "Yearly" }}"
@disabled={{this.isDiscountSectionDisabled}}
@update={{this.updateCadence}}
/>
{{svg-jar "arrow-down-small"}}
</span>
<GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
</GhFormGroup>
<div class="gh-offer-trial-duration">
<GhFormGroup @errors={{this.offer.errors}} @property="trialDuration">
<label for="trial-duration" class="fw6">Trial duration</label>
<div class="trial-duration">
<input
type="number"
id="trial-duration"
class="gh-input"
name="trial-duration"
value={{this.offer.amount}}
disabled={{this.isDiscountSectionDisabled}}
{{on "input" this.setTrialDuration}}
{{on "blur" (fn this.validateProperty "amount")}}
/>
</div>
<span class="error">
<GhErrorMessage @errors={{this.offer.errors}} @property="amount" />
</span>
</GhFormGroup>
</div>
</div>
<p class="gh-offer-trial-info">Members will be subscribed at full price once the trial ends. <a class="green" href="https://ghost.org/help/free-trials">Learn more</a></p>
{{else}}
<div class="gh-offer-tier-and-trial">
<GhFormGroup @errors={{this.errors}} @property="product-cadence">
<label for="product-cadence" class="fw6">Tier – cadence</label>
<span class="gh-select gh-select-product-cadence">
<OneWaySelect
@value={{this.cadence}}
@options={{this.cadences}}
@optionValuePath="name"
@optionLabelPath="label"
@optionTargetPath="name"
@title="{{this.offer.tier.name}} - {{if (eq this.offer.cadence "month") "Monthly" "Yearly" }}"
@disabled={{this.isDiscountSectionDisabled}}
@update={{this.updateCadence}}
/>
{{svg-jar "arrow-down-small"}}
</span>
<GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
</GhFormGroup>
<div class="gh-offer-discount">
<label for="amount" class="fw6 mb1">Amount off</label>
<div class="flex items-start">
<GhFormGroup @errors={{this.offer.errors}} @property="amount" @hasValidated={{this.offer.hasValidated}}>
<div class="gh-offer-value percentage">
<input
type="number"
id="amount"
class="gh-input"
name="amount"
value={{if (eq this.offer.type 'fixed') (gh-price-amount this.offer.amount) this.offer.amount}}
disabled={{this.isDiscountSectionDisabled}}
{{on "input" this.setDiscountAmount}}
{{on "blur" (fn this.validateProperty "amount")}}
/>
</div>
<span class="error">
<GhErrorMessage @errors={{this.offer.errors}} @property="amount" />
</span>
</GhFormGroup>
<div class="gh-offer-type">
<GhFormGroup @errors={{this.offer.errors}} @property="type" @hasValidated={{this.offer.hasValidated}} class="no-margin">
<span class="gh-select">
<OneWaySelect
@value={{this.offer.type}}
@options={{this.offertypes}}
@optionValuePath="offertype"
@disabled={{this.isDiscountSectionDisabled}}
@optionLabelPath="label"
@optionTargetPath="offertype"
@update={{this.setDiscountType}}
/>
{{svg-jar "arrow-down-small"}}
</span>
<GhErrorMessage @errors={{this.offer.errors}} @property="type" />
</GhFormGroup>
</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
@data-test-select="offer-duration"
@value={{this.offer.duration}}
@options={{this.durations}}
@optionValuePath="duration"
@disabled={{this.isDiscountSectionDisabled}}
@optionLabelPath="label"
@optionTargetPath="duration"
@update={{this.updateDuration}}
/>
{{svg-jar "arrow-down-small"}}
</span>
<span class="error">
<GhErrorMessage @errors={{this.errors}} @property="duration" />
</span>
</GhFormGroup>
{{#if (eq this.offer.duration "repeating")}}
<GhFormGroup @errors={{this.offer.errors}} @property="durationInMonths">
<label for="duration-months" class="fw6">Number of months</label>
<div class="duration-months">
<GhTextInput
@name="duration-months"
@value={{readonly this.offer.durationInMonths}}
@input={{this.setDurationInMonths}}
@disabled={{this.isDiscountSectionDisabled}}
@id="duration-months"
@class="gh-input" />
</div>
<span class="error">
<GhErrorMessage @errors={{this.offer.errors}} @property="durationInMonths" />
</span>
</GhFormGroup>
{{/if}}
</div>
{{/if}}
</div>
<h4 class="gh-main-section-header small bn">Portal settings</h4>
<div class="gh-main-section-content grey">
<div class="form-col2 gh-offer-title-and-code">
<GhFormGroup @errors={{this.offer.errors}} @property="displayTitle" @hasValidated={{this.offer.hasValidated}}>
<label for="display-title" class="fw6">Display title</label>
<GhTextInput
@name="display-title"
@value={{readonly this.offer.displayTitle}}
@input={{this.setPortalTitle}}
@placeholder="Black Friday Special"
@id="display-title"
@class="gh-input" />
<span class="error">
<GhErrorMessage @errors={{this.offer.errors}} @property="displayTitle" />
</span>
</GhFormGroup>
<GhFormGroup @errors={{this.offer.errors}} @property="code" @hasValidated={{this.offer.hasValidated}}>
<label for="code" class="fw6">Offer code</label>
<GhTextInput
@name="code"
@placeholder="black-friday"
@value={{readonly this.offer.code}}
@input={{this.setOfferCode}}
@id="code"
@class="gh-input" />
<span class="error">
<GhErrorMessage @errors={{this.offer.errors}} @property="code" />
</span>
</GhFormGroup>
</div>
<GhFormGroup @errors={{this.offer.errors}} @property="displayDescription">
<label for="description" class="fw6">Display description</label>
<GhTextarea
@id="description"
@name="description"
@placeholder="Take advantage of this limited-time offer."
@value={{readonly this.offer.displayDescription}}
@input={{this.setPortalDescription}}
@stopEnterKeyDownPropagation="true"
/>
<span class="error">
<GhErrorMessage @errors={{this.offer.errors}} @property="displayDescription" />
</span>
</GhFormGroup>
<GhFormGroup @errors={{this.errors}} @property="url" class="gh-offer-url no-margin">
<label for="url" class="fw6">URL</label>
<div class="gh-input-group">
<GhTextInput
data-test-input="offer-portal-url"
@name="url"
@value={{readonly this.offerUrl}}
@id="url"
@disabled="disabled"
@placeholder={{this.defaultSiteUrl}}
@class="gh-input" />
<GhTaskButton
@type="button"
@buttonText="Copy link"
@task={{this.copyOfferUrl}}
@successText="Link copied"
@class="gh-btn gh-btn-icon" />
</div>
<GhErrorMessage @errors={{this.errors}} @property="url" />
</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-setting-members-portalpreview">
<div class="gh-setting-members-portal-mock">
<GhSiteIframe
scrolling="no"
@src={{this.portalPreviewUrl}}
@invisibleUntilLoaded="portal-ready"
@onInserted={{this.portalPreviewInserted}}
@onDestroyed={{this.portalPreviewDestroyed}} />
</div>
</div>
</div>
</div>
</div>
<div class="gh-main-section">
<div class="gh-main-section-block gh-offer-archive-container">
{{#if (eq this.offer.status "active")}}
{{#unless this.offer.isNew}}
<button
type="button"
class="gh-btn gh-btn-black gh-btn-icon"
{{on "click" this.openConfirmArchiveModal}}
>
<span>Archive offer</span>
</button>
<p>
<span>Archiving an offer ensures it is no longer available for use. Don’t worry, existing members remain unchanged and the offer can be reactivated anytime.</span>
</p>
{{/unless}}
{{else}}
<button
type="button"
class="gh-btn gh-btn-black gh-btn-icon"
{{on "click" this.openConfirmUnarchiveModal}}
>
<span>Reactivate offer</span>
</button>
{{/if}}
</div>
</div>
</section>
</section>