2021-10-21 23:49:13 +03:00
<section class="gh-canvas gh-offer circle-bg" {{ did-insert this .setup }} >
2021-10-04 17:17:32 +03:00
<GhCanvasHeader class="gh-canvas-header">
2022-10-04 08:35:29 +03:00
<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" }} 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 }}
2021-10-15 13:49:42 +03:00
{{ / if }}
2022-10-04 08:35:29 +03:00
</h2>
</div>
2021-10-04 14:01:12 +03:00
<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">
2021-10-04 16:00:41 +03:00
<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">
2021-10-19 10:35:18 +03:00
<GhFormGroup @errors= {{ this .offer .errors }} @property="name" @hasValidated= {{ this .offer .hasValidated }} class="no-margin">
2021-10-04 16:00:41 +03:00
<label for="name" class="fw6">Name</label>
<GhTextInput
@name="name"
@placeholder="Black Friday"
@id="name"
2021-10-06 17:29:15 +03:00
@value= {{ this .offer .name }}
@input= {{ this .setOfferName }}
2021-10-08 13:33:16 +03:00
data-test-input="offer-name"
2021-10-04 16:00:41 +03:00
@class="gh-input" />
2021-10-19 10:35:18 +03:00
<span class="error">
<GhErrorMessage @errors= {{ this .offer .errors }} @property="name" />
</span>
<p>Visible to members on Stripe Checkout page.</p>
2021-10-04 16:00:41 +03:00
</GhFormGroup>
</div>
2022-08-17 16:23:49 +03:00
{{ # if ( feature 'freeTrial' ) }}
2022-08-17 13:55:24 +03:00
<h4 class="gh-main-section-header gh-main-section-header-with-info small bn">
<span>Discount information</span>
2022-08-23 19:07:12 +03:00
<span class="midgrey gh-main-section-header-info tooltip-left" data-tooltip="Once saved, this cannot be changed" > {{ svg-jar "info" }} </span>
2022-08-17 16:23:49 +03:00
</h4>
{{ else }}
<h4 class="gh-main-section-header small bn">
2022-08-23 19:07:12 +03:00
Discount information <span class="midgrey"> – Once saved, this cannot be changed.</span>
2021-10-19 16:57:33 +03:00
</h4>
2022-08-17 16:23:49 +03:00
{{ / if }}
2021-10-04 16:00:41 +03:00
<div class="gh-main-section-content grey">
2022-08-10 10:49:53 +03:00
{{ # if ( feature 'freeTrial' ) }}
2022-08-11 18:06:06 +03:00
<GhFormGroup>
<div>
2022-08-10 13:17:10 +03:00
<label class="fw6">Offer type</label>
2022-08-23 19:07:12 +03:00
<div class="gh-offer-type-container {{ if this .isDiscountSectionDisabled "disabled" }} ">
2022-08-17 19:23:32 +03:00
<button class="gh-radio {{ if this .isDiscountOffer "active" }} " type="button" {{ on "click" ( fn this .changeType "discount" ) }} disabled= {{ this .isDiscountSectionDisabled }} >
2022-08-17 13:55:24 +03:00
<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>
2022-08-17 14:08:45 +03:00
</button>
2022-08-17 19:23:32 +03:00
<button class="gh-radio {{ if this .isTrialOffer "active" }} "
2022-08-10 13:17:10 +03:00
type="button" {{ on "click" ( fn this .changeType "trial" ) }} disabled= {{ this .isDiscountSectionDisabled }} >
2022-08-17 13:55:24 +03:00
<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>
2022-08-17 14:08:45 +03:00
</button>
2022-08-10 13:17:10 +03:00
</div>
2022-08-10 10:49:53 +03:00
</div>
2022-08-11 18:06:06 +03:00
</GhFormGroup>
2022-08-10 10:49:53 +03:00
{{ / if }}
2022-08-10 13:17:10 +03:00
{{ # if this .isTrialOffer }}
2022-08-17 13:55:24 +03:00
<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"
2022-08-19 00:15:11 +03:00
@title=" {{ this .offer .tier .name }} - {{ if ( eq this .offer .cadence "month" ) "Monthly" "Yearly" }} "
2022-08-10 13:17:10 +03:00
@disabled= {{ this .isDiscountSectionDisabled }}
2022-08-17 13:55:24 +03:00
@update= {{ this .updateCadence }}
2022-08-10 13:17:10 +03:00
/>
2022-08-17 13:55:24 +03:00
{{ svg-jar "arrow-down-small" }}
2022-08-10 10:49:53 +03:00
</span>
2022-08-17 13:55:24 +03:00
<GhErrorMessage @errors= {{ this .errors }} @property="product-cadence" />
2022-08-10 10:49:53 +03:00
</GhFormGroup>
2022-08-17 13:55:24 +03:00
<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">
<GhTextInput
@name="trial-duration"
@type="number"
@placeholder=""
@disabled= {{ this .isDiscountSectionDisabled }}
@value= {{ readonly this .offer .amount }}
{{ on "input" this .setTrialDuration }}
@id="trial-duration"
@class="gh-input"
/>
2021-10-22 00:12:07 +03:00
</div>
<span class="error">
<GhErrorMessage @errors= {{ this .offer .errors }} @property="amount" />
2021-10-08 13:48:41 +03:00
</span>
</GhFormGroup>
2022-08-17 13:55:24 +03:00
</div>
</div>
2022-08-19 10:58:29 +03:00
<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>
2022-08-17 13:55:24 +03:00
{{ 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"
2022-08-19 00:15:11 +03:00
@title=" {{ this .offer .tier .name }} - {{ if ( eq this .offer .cadence "month" ) "Monthly" "Yearly" }} "
2022-08-17 13:55:24 +03:00
@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">
{{ # if ( eq this .offer .type 'fixed' ) }}
<GhTextInput
@name="amount"
@type="number"
@placeholder=""
@disabled= {{ this .isDiscountSectionDisabled }}
@value= {{ readonly ( gh-price-amount this .offer .amount ) }}
@input= {{ this .setDiscountAmount }}
@id="amount"
@class="gh-input"
/>
{{ else }}
<GhTextInput
@name="amount"
@type="number"
@placeholder=""
@disabled= {{ this .isDiscountSectionDisabled }}
@value= {{ readonly this .offer .amount }}
@input= {{ this .setDiscountAmount }}
@id="amount"
@class="gh-input"
/>
{{ / if }}
</div>
<span class="error">
<GhErrorMessage @errors= {{ this .offer .errors }} @property="amount" />
2021-10-22 00:12:07 +03:00
</span>
</GhFormGroup>
2022-08-17 13:55:24 +03:00
<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>
2021-10-22 00:12:07 +03:00
</div>
2021-10-04 16:00:41 +03:00
</div>
</div>
2021-10-05 15:34:19 +03:00
<div class="gh-offer-duration">
<GhFormGroup @errors= {{ this .errors }} @property="duration">
<label for="product-cadence" class="fw6">Duration</label>
<span class="gh-select">
2021-10-06 17:29:15 +03:00
<OneWaySelect
@value= {{ this .offer .duration }}
2021-10-05 15:34:19 +03:00
@options= {{ this .durations }}
@optionValuePath="duration"
2021-10-07 23:13:59 +03:00
@disabled= {{ this .isDiscountSectionDisabled }}
2021-10-05 15:34:19 +03:00
@optionLabelPath="label"
@optionTargetPath="duration"
2021-10-06 17:29:15 +03:00
@update = {{ this .updateDuration }}
2021-10-05 15:34:19 +03:00
/>
{{ svg-jar "arrow-down-small" }}
</span>
2021-10-19 10:35:18 +03:00
<span class="error">
<GhErrorMessage @errors= {{ this .errors }} @property="duration" />
</span>
2021-10-05 15:34:19 +03:00
</GhFormGroup>
2021-10-07 23:13:59 +03:00
{{ # if ( eq this .offer .duration "repeating" ) }}
2021-10-22 17:33:25 +03:00
<GhFormGroup @errors= {{ this .offer .errors }} @property="durationInMonths">
2021-10-05 16:03:39 +03:00
<label for="duration-months" class="fw6">Number of months</label>
2021-10-22 17:33:25 +03:00
<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>
2021-10-19 10:35:18 +03:00
<span class="error">
<GhErrorMessage @errors= {{ this .offer .errors }} @property="durationInMonths" />
</span>
2021-10-05 15:34:19 +03:00
</GhFormGroup>
{{ / if }}
</div>
2022-08-10 13:17:10 +03:00
{{ / if }}
2021-10-04 16:00:41 +03:00
</div>
<h4 class="gh-main-section-header small bn">Portal settings</h4>
<div class="gh-main-section-content grey">
2022-08-17 13:55:24 +03:00
<div class="form-col2 gh-offer-title-and-code">
2021-10-19 10:35:18 +03:00
<GhFormGroup @errors= {{ this .offer .errors }} @property="displayTitle" @hasValidated= {{ this .offer .hasValidated }} >
2021-10-04 16:00:41 +03:00
<label for="display-title" class="fw6">Display title</label>
<GhTextInput
@name="display-title"
2021-10-19 11:09:16 +03:00
@value= {{ readonly this .offer .displayTitle }}
2021-10-06 17:29:15 +03:00
@input= {{ this .setPortalTitle }}
2021-10-04 16:00:41 +03:00
@placeholder="Black Friday Special"
@id="display-title"
@class="gh-input" />
2021-10-19 10:35:18 +03:00
<span class="error">
<GhErrorMessage @errors= {{ this .offer .errors }} @property="displayTitle" />
</span>
2021-10-04 16:00:41 +03:00
</GhFormGroup>
2021-10-19 10:35:18 +03:00
<GhFormGroup @errors= {{ this .offer .errors }} @property="code" @hasValidated= {{ this .offer .hasValidated }} >
2021-10-04 16:00:41 +03:00
<label for="code" class="fw6">Offer code</label>
<GhTextInput
@name="code"
@placeholder="black-friday"
2021-10-19 11:09:16 +03:00
@value= {{ readonly this .offer .code }}
2021-10-06 17:29:15 +03:00
@input= {{ this .setOfferCode }}
2021-10-04 16:00:41 +03:00
@id="code"
@class="gh-input" />
2021-10-19 10:35:18 +03:00
<span class="error">
<GhErrorMessage @errors= {{ this .offer .errors }} @property="code" />
</span>
2021-10-04 16:00:41 +03:00
</GhFormGroup>
</div>
2021-10-19 16:57:33 +03:00
<GhFormGroup @errors= {{ this .offer .errors }} @property="displayDescription">
2021-10-21 23:49:13 +03:00
<label for="description" class="fw6">Display description</label>
2021-10-19 16:57:33 +03:00
<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" class="no-margin">
2021-10-05 16:03:39 +03:00
<label for="url" class="fw6">URL</label>
<div class="gh-input-group">
<GhTextInput
@name="url"
2021-10-19 11:09:16 +03:00
@value= {{ readonly this .offerUrl }}
2021-10-05 16:03:39 +03:00
@id="url"
@disabled="disabled"
2021-10-19 16:57:33 +03:00
@placeholder= {{ this .defaultSiteUrl }}
2021-10-05 16:03:39 +03:00
@class="gh-input" />
<GhTaskButton
2021-11-10 15:16:58 +03:00
@type="button"
2021-10-05 16:03:39 +03:00
@buttonText="Copy link"
@task= {{ this .copyOfferUrl }}
@successText="Link copied"
@class="gh-btn gh-btn-icon" />
</div>
<GhErrorMessage @errors= {{ this .errors }} @property="url" />
</GhFormGroup>
2021-10-04 16:00:41 +03:00
</div>
</div>
</div>
</form>
2021-10-06 17:29:15 +03:00
2021-10-04 16:00:41 +03:00
<div class="gh-offer-portal-preview">
<div>
<h4 class="gh-main-section-header small bn">Preview</h4>
2021-10-18 12:01:29 +03:00
<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>
2021-10-04 16:00:41 +03:00
</div>
</div>
</div>
2021-10-13 18:46:43 +03:00
<div class="gh-main-section">
2021-10-22 12:44:44 +03:00
<div class="gh-main-section-block gh-offer-archive-container">
2021-10-13 18:46:43 +03:00
{{ # if ( eq this .offer .status "active" ) }}
2022-02-02 19:09:43 +03:00
{{ # unless this .offer .isNew }}
2021-10-15 13:49:42 +03:00
<button
type="button"
2021-10-21 14:56:30 +03:00
class="gh-btn gh-btn-black gh-btn-icon"
2021-10-15 13:49:42 +03:00
{{ on "click" this .openConfirmArchiveModal }}
>
<span>Archive offer</span>
</button>
2021-10-22 12:44:44 +03:00
<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>
2022-02-02 19:09:43 +03:00
{{ / unless }}
2021-10-13 18:46:43 +03:00
{{ else }}
<button
type="button"
2021-10-13 18:53:21 +03:00
class="gh-btn gh-btn-black gh-btn-icon"
2021-10-13 18:46:43 +03:00
{{ on "click" this .openConfirmUnarchiveModal }}
>
2021-10-13 22:23:19 +03:00
<span>Reactivate offer</span>
2021-10-13 18:46:43 +03:00
</button>
{{ / if }}
2021-10-04 16:00:41 +03:00
</div>
2021-10-13 18:46:43 +03:00
</div>
2021-10-04 14:01:12 +03:00
</section>
2022-09-09 17:20:07 +03:00
</section>