mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Updated Portal links to show dynamic prices
refs https://github.com/TryGhost/Team/issues/643 Currently, the whole setup for choosing plans is built around hardcoded `monthly` / `yearly` which is also exposed in the Portal links/data attributes. Since we now have custom prices, this updates the UI to show links/attributes for all available custom prices and allowing them to function via their price ids.
This commit is contained in:
Rishabh
parent
af5b053aab
commit
dd75d831c0
2 changed files with 80 additions and 86 deletions
|
|
@ -26,8 +26,8 @@
|
|||
data-portal
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyDefault (if isLink '#/portal' 'data-portal'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copyDefault.isRunning}}
|
||||
<button type="button" {{action (perform this.copyStaticLink '')}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice ""))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
|
|
@ -50,8 +50,8 @@
|
|||
data-portal="signin"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copySignin (if isLink '#/portal/signin' 'data-portal="signin"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copySignin.isRunning}}
|
||||
<button type="button" {{action (perform this.copyStaticLink "signin")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signin"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
|
|
@ -71,8 +71,8 @@
|
|||
data-portal="signup"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copySignup (if isLink '#/portal/signup' 'data-portal="signup"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copySignup.isRunning}}
|
||||
<button type="button" {{action (perform this.copyStaticLink "signup")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
|
|
@ -81,6 +81,29 @@
|
|||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{#each this.filteredPrices as |price|}}
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/{{price.nickname}}</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/{{price.id}}</span>
|
||||
{{else}}
|
||||
data-portal="signup/{{price.id}}"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copySignupLink price)}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copySignupLink.isRunning (eq this.copiedPrice price.id))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Free</td>
|
||||
<td class='page-url'>
|
||||
|
|
@ -92,50 +115,8 @@
|
|||
data-portal="signup/free"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copySignupFree (if isLink '#/portal/signup/free' 'data-portal="signup/free"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copySignupFree.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Monthly</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/monthly</span>
|
||||
{{else}}
|
||||
data-portal="signup/monthly"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copySignupMonthly (if isLink '#/portal/signup/monthly' 'data-portal="signup/monthly"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copySignupMonthly.isRunning}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
{{/if}}
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class='pagename'>Sign up/Yearly</td>
|
||||
<td class='page-url'>
|
||||
<div class="gh-portal-page-url-container">
|
||||
<div class="page-url-label">
|
||||
{{#if isLink}}
|
||||
<span class="page-url-disabled">{{this.siteUrl}}/</span><span>#/portal/signup/yearly</span>
|
||||
{{else}}
|
||||
data-portal="signup/yearly"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copySignupYearly (if isLink '#/portal/signup/yearly' 'data-portal="signup/yearly"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copySignupYearly.isRunning}}
|
||||
<button type="button" {{action (perform this.copyStaticLink "signup/free")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "signup/free"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
|
|
@ -158,8 +139,8 @@
|
|||
data-portal="account"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyAccountHome (if isLink '#/portal/account' 'data-portal="account"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copyAccountHome.isRunning}}
|
||||
<button type="button" {{action (perform this.copyStaticLink "account")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "account"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
|
|
@ -179,8 +160,8 @@
|
|||
data-portal="account/plans"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyAccountPlans (if isLink '#/portal/account/plans' 'data-portal="account/plans"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copyAccountPlans.isRunning}}
|
||||
<button type="button" {{action (perform this.copyStaticLink "account/plans")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "account/plans"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
|
|
@ -200,8 +181,8 @@
|
|||
data-portal="account/profile"
|
||||
{{/if}}
|
||||
</div>
|
||||
<button type="button" {{action (perform this.copyAccountProfile (if isLink '#/portal/account/profile' 'data-portal="account/profile"'))}} class="gh-portal-setting-copy">
|
||||
{{#if this.copyAccountProfile.isRunning}}
|
||||
<button type="button" {{action (perform this.copyStaticLink "account/profile")}} class="gh-portal-setting-copy">
|
||||
{{#if (and this.copyStaticLink.isRunning (eq this.copiedPrice "account/profile"))}}
|
||||
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-darkgrey"}} Copied
|
||||
{{else}}
|
||||
<span data-tooltip="Copy">{{svg-jar "copy" class="w4 v-mid fill-darkgrey"}}</span>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,25 @@ import {task, timeout} from 'ember-concurrency';
|
|||
|
||||
export default Component.extend({
|
||||
config: service(),
|
||||
store: service(),
|
||||
settings: service(),
|
||||
tagName: '',
|
||||
isLink: true,
|
||||
prices: null,
|
||||
copiedPrice: null,
|
||||
|
||||
filteredPrices: computed('prices', 'settings.portalPlans.[]', function () {
|
||||
const portalPlans = this.get('settings.portalPlans');
|
||||
const prices = this.prices || [];
|
||||
return prices.filter((d) => {
|
||||
return d.amount !== 0 && d.type === 'recurring';
|
||||
}).map((price) => {
|
||||
return {
|
||||
...price,
|
||||
checked: !!portalPlans.find(d => d === price.id)
|
||||
};
|
||||
});
|
||||
}),
|
||||
|
||||
toggleValue: computed('isLink', function () {
|
||||
return this.isLink ? 'Data attributes' : 'Links';
|
||||
|
|
@ -20,6 +37,7 @@ export default Component.extend({
|
|||
init() {
|
||||
this._super(...arguments);
|
||||
this.siteUrl = this.config.get('blogUrl');
|
||||
this.getAvailablePrices.perform();
|
||||
},
|
||||
|
||||
actions: {
|
||||
|
|
@ -27,40 +45,35 @@ export default Component.extend({
|
|||
this.toggleProperty('isLink');
|
||||
}
|
||||
},
|
||||
copyDefault: task(function* (data) {
|
||||
copyStaticLink: task(function* (id) {
|
||||
this.set('copiedPrice', id);
|
||||
let data = '';
|
||||
if (this.isLink) {
|
||||
data = id ? `#/portal/${id}` : `#/portal/`;
|
||||
} else {
|
||||
data = id ? `data-portal="${id}"` : `data-portal`;
|
||||
}
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
}),
|
||||
copySignup: task(function* (data) {
|
||||
copySignupLink: task(function* (price) {
|
||||
this.set('copiedPrice', price.id);
|
||||
let data = '';
|
||||
if (this.isLink) {
|
||||
data = `#/portal/${price.id}`;
|
||||
} else {
|
||||
data = `data-portal="${price.id}"`;
|
||||
}
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
}),
|
||||
copySignupMonthly: task(function* (data) {
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
}),
|
||||
copySignupYearly: task(function* (data) {
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
}),
|
||||
copySignupFree: task(function* (data) {
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
}),
|
||||
copySignin: task(function* (data) {
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
}),
|
||||
copyAccountHome: task(function* (data) {
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
}),
|
||||
copyAccountPlans: task(function* (data) {
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
}),
|
||||
copyAccountProfile: task(function* (data) {
|
||||
copyTextToClipboard(data);
|
||||
yield timeout(this.isTesting ? 50 : 3000);
|
||||
})
|
||||
getAvailablePrices: task(function* () {
|
||||
const products = yield this.store.query('product', {include: 'stripe_prices'});
|
||||
const product = products.firstObject;
|
||||
const prices = product.get('stripePrices');
|
||||
const activePrices = prices.filter((d) => {
|
||||
return !!d.active;
|
||||
});
|
||||
this.set('prices', activePrices);
|
||||
}).drop()
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue