mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
✨ Added "Email call to action" card for an email-only CTA targeting free or paid members (#2080)
refs https://github.com/TryGhost/Team/issues/993 The new editor card allows you to add styled content along with an optional button that will only be visible to free or paid members when the post is emailed. Useful for encouraging free members to sign up to a paid account for example. - removed labs flag and conditionals to make the feature is available by default - cleaned up CSS that re-used the `.email-card` class or was referencing `labs`
This commit is contained in:
Kevin Ansfield
GitHub
parent
9a74c59630
commit
922c304e3b
7 changed files with 39 additions and 64 deletions
|
|
@ -10,14 +10,10 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="gh-post-preview-email-footer">
|
||||
{{#if (feature "emailCardSegments")}}
|
||||
<div class="gh-btn-group mr3">
|
||||
<button type="button" class="gh-btn {{if (eq this.memberSegment "status:free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:free")}}><span>Free member</span></button>
|
||||
<button type="button" class="gh-btn {{if (eq this.memberSegment "status:-free") "gh-btn-group-selected"}}" {{on "click" (fn this.changeMemberSegment "status:-free")}}><span>Paid member</span></button>
|
||||
</div>
|
||||
{{else}}
|
||||
<span class="mr3 nowrap fw6 f8 darkgrey">Send a test newsletter</span>
|
||||
{{/if}}
|
||||
|
||||
<div class="gh-post-preview-email-input {{if this.sendPreviewEmailError "error"}}">
|
||||
<Input
|
||||
|
|
@ -35,7 +31,7 @@
|
|||
|
||||
<GhTaskButton
|
||||
@task={{this.sendPreviewEmailTask}}
|
||||
@buttonText={{if (feature "emailCardSegments") "Send test email" "Send"}}
|
||||
@buttonText="Send test email"
|
||||
@successText="Sent"
|
||||
@runningText="Sending..."
|
||||
@class="gh-btn gh-btn-green gh-btn-icon gh-post-preview-email-trigger"
|
||||
|
|
|
|||
|
|
@ -123,11 +123,10 @@ export default class ModalPostPreviewEmailComponent extends Component {
|
|||
subject = post.email.subject;
|
||||
// model is a post, fetch email preview
|
||||
} else {
|
||||
let url = this.ghostPaths.url.api('/email_preview/posts', post.id);
|
||||
if (this.feature.emailCardSegments) {
|
||||
url = `${url}?memberSegment=${encodeURIComponent(this.memberSegment)}`;
|
||||
}
|
||||
let response = await this.ajax.request(url);
|
||||
let url = new URL(this.ghostPaths.url.api('/email_preview/posts', post.id), window.location.href);
|
||||
url.searchParams.set('memberSegment', this.memberSegment);
|
||||
|
||||
let response = await this.ajax.request(url.href);
|
||||
let [emailPreview] = response.email_previews;
|
||||
html = emailPreview.html;
|
||||
subject = emailPreview.subject;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,6 @@ export default Service.extend({
|
|||
matchHelper: feature('matchHelper'),
|
||||
multipleProducts: feature('multipleProducts', {developer: true}),
|
||||
membersFiltering: feature('membersFiltering', {developer: true}),
|
||||
emailCardSegments: feature('emailCardSegments', {developer: true}),
|
||||
oauthLogin: feature('oauthLogin', {developer: true}),
|
||||
emailOnlyPosts: feature('emailOnlyPosts', {developer: true}),
|
||||
dashboardTwo: feature('dashboardTwo', {developer: true}),
|
||||
|
|
|
|||
|
|
@ -970,20 +970,43 @@ figure {
|
|||
/* Email-CTA card
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
.kg-email-card .border-top {
|
||||
.kg-email-cta-card .border-top {
|
||||
margin: -1.6rem 0 5rem;
|
||||
}
|
||||
|
||||
.kg-email-card .border-top.edit-mode {
|
||||
.kg-email-cta-card .border-top.edit-mode {
|
||||
margin: 2.4rem 0 5rem;
|
||||
}
|
||||
|
||||
.kg-email-card .border-bottom {
|
||||
.kg-email-cta-card .border-bottom {
|
||||
margin: 5rem 0 1.6rem;
|
||||
}
|
||||
|
||||
.kg-email-card.no-border {
|
||||
border-left: none;
|
||||
.kg-email-cta-card .kg-card-help {
|
||||
margin: 0 -13px 16px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.kg-email-cta-card .kg-card-help p {
|
||||
color: var(--midgrey);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.kg-email-cta-card .kg-card-help .ember-power-select-trigger:not(.gh-setting-dropdown):not(.ember-power-select-multiple-trigger) svg {
|
||||
width: 8px;
|
||||
height: 6px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.kg-email-cta-card .kg-card-help .ember-basic-dropdown-content {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
.kg-email-cta-card .kg-card-help .ember-power-select-inline {
|
||||
padding: 0 2px;
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.email-cta-toolbar {
|
||||
|
|
@ -1071,33 +1094,6 @@ figure {
|
|||
font-weight: 400;
|
||||
}
|
||||
|
||||
.kg-card-help-labs {
|
||||
margin: 0 -13px 16px;
|
||||
padding: 8px 12px;
|
||||
border-bottom: 1px solid var(--whitegrey);
|
||||
background: var(--whitegrey-l2);
|
||||
}
|
||||
|
||||
.kg-card-help-labs p {
|
||||
color: var(--midgrey);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.kg-card-help-labs .ember-power-select-trigger:not(.gh-setting-dropdown):not(.ember-power-select-multiple-trigger) svg {
|
||||
width: 8px;
|
||||
height: 6px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.kg-card-help-labs .ember-basic-dropdown-content {
|
||||
width: 200px !important;
|
||||
}
|
||||
|
||||
.ember-power-select-inline-labs {
|
||||
padding: 0 2px;
|
||||
color: var(--darkgrey);
|
||||
}
|
||||
|
||||
.gh-member-segment-select-dropdown {
|
||||
width: unset !important;
|
||||
min-width: min-content !important;
|
||||
|
|
@ -1106,12 +1102,12 @@ figure {
|
|||
border-radius: 3px !important;
|
||||
}
|
||||
|
||||
.gh-btn-accent {
|
||||
.email-cta-card .gh-btn-accent {
|
||||
height: 38px;
|
||||
margin-top: 2.4rem;
|
||||
}
|
||||
|
||||
.gh-btn-accent span {
|
||||
.email-cta-card .gh-btn-accent span {
|
||||
height: 38px;
|
||||
font-size: 1.5rem;
|
||||
line-height: 38px;
|
||||
|
|
|
|||
|
|
@ -257,19 +257,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
<h4 class="gh-expandable-title">Email-only CTA card</h4>
|
||||
<p class="gh-expandable-description">
|
||||
Add card for a CTA that is selectively shown in emails to free/paid members
|
||||
</p>
|
||||
</div>
|
||||
<div class="for-switch">
|
||||
<GhFeatureFlag @flag="emailCardSegments" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gh-expandable-block">
|
||||
<div class="gh-expandable-header">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<KoenigCard
|
||||
@icon={{"koenig/card-indicator-email"}}
|
||||
@class={{concat (kg-style "container-card") " kg-email-card mih10 miw-100 relative"}}
|
||||
@class={{concat (kg-style "container-card") " kg-email-card kg-email-cta-card mih10 miw-100 relative"}}
|
||||
@style={{@cardStyle}}
|
||||
@headerOffset={{@headerOffset}}
|
||||
@toolbar={{this.toolbar}}
|
||||
|
|
@ -21,8 +21,7 @@
|
|||
as |card|
|
||||
>
|
||||
{{#if @isEditing}}
|
||||
|
||||
<div class="kg-card-help kg-card-help-labs">
|
||||
<div class="kg-card-help">
|
||||
<p>
|
||||
<span>
|
||||
Only visible to
|
||||
|
|
@ -32,7 +31,7 @@
|
|||
@onChange={{this.setSegment}}
|
||||
@searchEnabled={{false}}
|
||||
@triggerComponent="gh-power-select/trigger"
|
||||
@triggerClass="ember-power-select-inline ember-power-select-inline-labs"
|
||||
@triggerClass="ember-power-select-inline"
|
||||
@dropdownClass="gh-member-segment-select-dropdown"
|
||||
as |segment|
|
||||
>
|
||||
|
|
|
|||
|
|
@ -129,8 +129,7 @@ export const CARD_MENU = [
|
|||
desc: 'Target free or paid members with a CTA',
|
||||
matches: ['email', 'cta'],
|
||||
type: 'card',
|
||||
replaceArg: 'email-cta',
|
||||
feature: 'emailCardSegments'
|
||||
replaceArg: 'email-cta'
|
||||
},
|
||||
{
|
||||
label: 'Public preview',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue