7eaee22a75
refs https://github.com/TryGhost/Team/issues/1856 - adds a custom duration option with date picker to the complimentary plan when "Custom" is selected - this allows customers to choose any date as expiration date --------- Co-authored-by: Michael Barrett <mike@ghost.org>
89 lines
3.7 KiB
Handlebars
89 lines
3.7 KiB
Handlebars
<header class="modal-header" data-test-modal="member-tier" {{did-insert this.setup}}>
|
|
<h1>Add subscription</h1>
|
|
</header>
|
|
<button type="button" class="close" title="Close" {{on "click" this.close}}>
|
|
{{svg-jar "close"}}<span class="hidden">Close</span>
|
|
</button>
|
|
|
|
<form>
|
|
<div class="modal-body">
|
|
<p class="gh-member-addcomp-subhed" data-test-text="select-tier-desc">
|
|
Select a tier for <strong>{{or this.member.name this.member.email}}</strong>'s
|
|
complimentary subscription.
|
|
</p>
|
|
{{#if this.activeSubscriptions.length}}
|
|
<p class="gh-member-addcomp-warning" data-test-text="sub-cancel-warning">
|
|
Adding a complimentary subscription cancels all existing subscriptions of this member.
|
|
</p>
|
|
{{/if}}
|
|
{{#if this.loadingTiers}}
|
|
<div class="flex justify-center flex-auto">
|
|
<div class="gh-loading-spinner"> </div>
|
|
</div>
|
|
{{else}}
|
|
<div class="form-rich-radio">
|
|
{{#each this.tiers as |tier|}}
|
|
<div
|
|
class="gh-radio {{if (eq this.selectedTier tier.id) "active"}}"
|
|
{{on "click" (fn this.setTier tier.id)}}
|
|
data-test-tier-option={{tier.id}}
|
|
>
|
|
<div class="gh-radio-content">
|
|
<div class="gh-radio-label">
|
|
<div class="description" data-test-text="tier-desc">
|
|
<h4>{{tier.name}}</h4>
|
|
<p>{{tier.description}}</p>
|
|
</div>
|
|
{{svg-jar "check" class="check"}}
|
|
</div>
|
|
</div>
|
|
<div class="gh-radio-button"></div>
|
|
</div>
|
|
{{/each}}
|
|
</div>
|
|
<GhFormGroup class="{{if (eq this.expiryAt "custom") "gh-cp-membertier-duration"}}" @errors={{this.errors}} @property="product-cadence">
|
|
<label for="product-cadence" class="fw6 mt5">Duration</label>
|
|
<span class="gh-select">
|
|
<OneWaySelect
|
|
@value={{this.expiryAt}}
|
|
@options={{this.expiryOptions}}
|
|
@optionValuePath="duration"
|
|
@optionLabelPath="label"
|
|
@optionTargetPath="duration"
|
|
@disabled={{false}}
|
|
@update={{this.updateExpiry}}
|
|
/>
|
|
{{svg-jar "arrow-down-small"}}
|
|
</span>
|
|
{{#if (eq this.expiryAt "custom")}}
|
|
<GhDatePicker
|
|
@minDate={{this.minCustomDate}}
|
|
@value={{this.customExpiryDate}}
|
|
@onChange={{this.updateCustomExpiryDate}}
|
|
/>
|
|
{{/if}}
|
|
<GhErrorMessage @errors={{this.errors}} @property="product-cadence" />
|
|
</GhFormGroup>
|
|
{{/if}}
|
|
</div>
|
|
</form>
|
|
|
|
<div class="modal-footer">
|
|
<button
|
|
class="gh-btn"
|
|
type="button"
|
|
{{on "click" this.close}}
|
|
{{!-- disable mouseDown so it does not trigger focus-out validations --}}
|
|
{{on "mousedown" (optional this.noop)}}
|
|
data-test-button="cancel-webhook"
|
|
>
|
|
<span>Cancel</span>
|
|
</button>
|
|
|
|
|
|
<GhTaskButton @buttonText="Add subscription"
|
|
@successText={{"Added"}}
|
|
@task={{this.addTier}}
|
|
@class="gh-btn gh-btn-green gh-btn-icon gh-btn-add-membertier"
|
|
data-test-button="save-comp-tier" />
|
|
</div> |