TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Added product selector modal for complimentary sub

Browse Source 
Developer experiment for multiple products.
- Added modal to choose a product for complimentary subscriptions.
This commit is contained in:
Peter Zimon 2021-06-03 18:02:32 +02:00
parent e5056af95e
commit bf700c5d98
3 changed files with 117 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ghost/admin/app/components/gh-member-settings-form-cp.hbs
View File

@ -116,9 +116,17 @@
{{#if this.isCreatingComplimentary}}
<GhLoadingSpinner />
{{else}}
<button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action "addCompedSubscription"}}>
<span>{{svg-jar "add"}} Add complimentary subscription</span>
</button>
{{#if (enable-developer-experiments)}}
{{!-- {{if has multiple products!}} --}}
<button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action (toggle "showMemberProductModal" this)}}>
<span>{{svg-jar "add"}} Add complimentary subscription</span>
</button>
{{!-- {{/if}} --}}
{{else}}
<button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action "addCompedSubscription"}}>
<span>{{svg-jar "add"}} Add complimentary subscription</span>
</button>
{{/if}}
{{/if}}
{{/if}}
{{/unless}}

85
ghost/admin/app/components/modal-member-product.hbs
View File

@ -1,38 +1,44 @@
<button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
{{svg-jar "close"}}
</button>
<header class="modal-header" data-test-modal="delete-user">
<h1>Add subscription</h1>
</header>
<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
<form>
<div class="modal-body">
<div class="gh-main-section-block">
<div class="gh-main-section-content gh-member-product-memberdetails">
<GhMemberAvatar
@member={{this.member}}
@sizeClass={{if this.member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}}
@containerClass="w20 h20 mr4 gh-member-detail-avatar"
/>
<h3>{{or this.member.name this.member.email}}</h3>
{{#if (and this.member.name this.member.email)}}
<p>
{{this.member.email}}
</p>
{{/if}}
<p class="gh-member-addcomp-subhed">Select a product for <strong>{{or this.member.name this.member.email}}</strong>'s complimentary subscription.</p>
<div class="form-rich-radio">
<div class="gh-radio active">
<div class="gh-radio-content">
<div class="gh-radio-label">
<div class="description">
<h4>Bronze</h4>
<p>Only the hottest marketing news</p>
</div>
</div>
</div>
<div class="gh-radio-button"></div>
</div>
<div class="gh-main-section-content grey gh-member-product-form-block">
<GhFormGroup>
<label for="price" class="fw6">Add subscription</label>
<span class="gh-select">
<OneWaySelect
@options={{this.prices}}
@optionValuePath="id"
@optionLabelPath="label"
@update={{this.setPrice}}
/>
{{svg-jar "arrow-down-small"}}
</span>
<p>You can only use zero value prices when adding a product manually. Use <a href="https://dashboard.stripe.com" target="_blank">Stripe Dashboard</a> to add product with non-zero prices.</p>
</GhFormGroup>
<div class="gh-radio">
<div class="gh-radio-content">
<div class="gh-radio-label">
<div class="description">
<h4>Silver</h4>
<p>Extra weekly newsletter</p>
</div>
</div>
</div>
<div class="gh-radio-button"></div>
</div>
<div class="gh-radio">
<div class="gh-radio-content">
<div class="gh-radio-label">
<div class="description">
<h4>Gold</h4>
<p>All-in-one supporter pack!</p>
</div>
</div>
</div>
<div class="gh-radio-button"></div>
</div>
</div>
</div>
@ -46,12 +52,21 @@
{{action (optional this.noop) on="mouseDown"}}
data-test-button="cancel-webhook"
>
<span>{{if this.prices.length "Cancel" "OK"}}</span>
<span>Cancel</span>
</button>
<GhTaskButton @buttonText="Add subscription"
<button
class="gh-btn gh-btn-green"
{{action "closeModal"}}
{{!-- disable mouseDown so it does not trigger focus-out validations --}}
{{action (optional this.noop) on="mouseDown"}}
>
<span>Add subscription</span>
</button>
{{!-- <GhTaskButton @buttonText="Add subscription"
@successText={{this.successText}}
@task={{this.addPriceTask}}
@disabled={{this.cannotAddPrice}}
@class="gh-btn gh-btn-black gh-btn-icon gh-btn-add-memberproduct"
data-test-button="save-webhook" />
@class="gh-btn gh-btn-green gh-btn-icon gh-btn-add-memberproduct"
data-test-button="save-webhook" /> --}}
</div>

56
ghost/admin/app/styles/patterns/forms.css
View File

@ -757,6 +757,62 @@ textarea {
}
/* Email newsletter design settings
/* -------------------------------------------------------- */
.form-rich-radio .gh-radio {
display: flex;
align-items: center;
justify-content: space-between;
margin: -1px 0 0;
padding: 0;
}
.form-rich-radio .gh-radio-content {
border: 1px solid var(--whitegrey);
margin: 0 -32px 0 0;
}
.form-rich-radio .gh-radio:first-of-type .gh-radio-content {
border-radius: 3px 3px 0 0;
}
.form-rich-radio .gh-radio:last-of-type .gh-radio-content {
border-radius: 0 0 3px 3px;
}
.form-rich-radio .active .gh-radio-content {
border: 1px solid transparent;
box-shadow: 0px 0px 0px 2px var(--green);
z-index: 9999;
}
.form-rich-radio .gh-radio-button {
margin-right: 12px;
opacity: 0;
}
.form-rich-radio .gh-radio-label {
padding: 12px 12px 12px 14px;
display: flex;
align-items: center;
}
.form-rich-radio .gh-radio-label .description h4 {
font-size: 1.4rem;
margin: 0;
padding: 0;
line-height: 1.4em;
}
.form-rich-radio .gh-radio-label .description p {
font-size: 1.25rem !important;
font-weight: 400;
line-height: 1.45em;
margin: 2px 0 0;
padding: 0;
}
/* FFF: Fucking Firefox Fixes
/* ---------------------------------------------------------- */