mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 09:03:12 +03:00
eddeb07a52
closes https://github.com/TryGhost/Team/issues/1159 - validates offer fields before save client-side
266 lines
15 KiB
Handlebars
266 lines
15 KiB
Handlebars
<section class="gh-canvas circle-bg" {{did-insert this.setup}}>
|
||
<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 (eq this.offer.status "archived")}}
|
||
<span class="gh-badge gh-badge-title">Archived</span>
|
||
{{/if}}
|
||
{{/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.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 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"
|
||
@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">
|
||
<GhFormGroup @errors={{this.offer.errors}} @property="amount" @hasValidated={{this.offer.hasValidated}}>
|
||
<label for="amount" class="fw6">Amount off</label>
|
||
<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" />
|
||
</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 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"
|
||
@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" @class="duration-months">
|
||
<label for="duration-months" class="fw6">Number of months</label>
|
||
<GhTextInput
|
||
@name="duration-months"
|
||
@value={{this.offer.durationInMonths}}
|
||
@input={{this.setDurationInMonths}}
|
||
@disabled={{this.isDiscountSectionDisabled}}
|
||
@id="duration-months"
|
||
@class="gh-input" />
|
||
<span class="error">
|
||
<GhErrorMessage @errors={{this.offer.errors}} @property="durationInMonths" />
|
||
</span>
|
||
</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.offer.errors}} @property="displayTitle" @hasValidated={{this.offer.hasValidated}}>
|
||
<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" />
|
||
<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={{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.errors}} @property="url" @class="gh-offer-url">
|
||
<label for="url" class="fw6">URL</label>
|
||
<div class="gh-input-group">
|
||
<GhTextInput
|
||
@name="url"
|
||
@value={{this.offerUrl}}
|
||
@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.offer.errors}} @property="displayDescription" class="no-margin">
|
||
<label for="description" class="fw6">Description</label>
|
||
<GhTextarea
|
||
@id="description"
|
||
@name="description"
|
||
@placeholder="Take advantage of this limited-time offer."
|
||
@value={{this.offer.displayDescription}}
|
||
@input={{this.setPortalDescription}}
|
||
@stopEnterKeyDownPropagation="true"
|
||
/>
|
||
<span class="error">
|
||
<GhErrorMessage @errors={{this.offer.errors}} @property="displayDescription" />
|
||
</span>
|
||
</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">
|
||
{{#if (eq this.offer.status "active")}}
|
||
{{#if (not this.offer.isNew)}}
|
||
<button
|
||
type="button"
|
||
class="gh-btn gh-btn-red gh-btn-icon"
|
||
{{on "click" this.openConfirmArchiveModal}}
|
||
>
|
||
<span>Archive offer</span>
|
||
</button>
|
||
{{/if}}
|
||
{{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>
|
||
|
||
{{#if this.showUnsavedChangesModal}}
|
||
<GhFullscreenModal
|
||
@modal="leave-settings"
|
||
@confirm={{this.leaveScreen}}
|
||
@close={{this.toggleUnsavedChangesModal}}
|
||
@modifier="action wide" />
|
||
{{/if}}
|