mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-23 02:41:50 +03:00
7b443d4b63
no issue
The `config` service has been a source of confusion when writing with modern Ember patterns because it's use of the deprecated `ProxyMixin` forced all property access/setting to go via `.get()` and `.set()` whereas the rest of the system has mostly (there are a few other uses of ProxyObjects remaining) eliminated the use of the non-native get/set methods.
- removed use of `ProxyMixin` in the `config` service by grabbing the API response after fetching and using `Object.defineProperty()` to add native getters/setters that pass through to a tracked object holding the API response data. Ember's autotracking automatically works across the native getters/setters so we can then use the service as if it was any other native object
- updated all code to use `config.{attrName}` directly for getting/setting instead of `.get()` and `.set()`
- removed unnecessary async around `config.availableTimezones` which wasn't making any async calls
110 lines
2.9 KiB
JavaScript
110 lines
2.9 KiB
JavaScript
import Component from '@ember/component';
|
|
import classic from 'ember-classic-decorator';
|
|
import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
|
|
import {action, computed} from '@ember/object';
|
|
import {inject as service} from '@ember/service';
|
|
import {tagName} from '@ember-decorators/component';
|
|
import {task, timeout} from 'ember-concurrency';
|
|
|
|
@classic
|
|
@tagName('')
|
|
export default class GhPortalLinks extends Component {
|
|
@service config;
|
|
@service store;
|
|
@service settings;
|
|
|
|
isLink = true;
|
|
prices = null;
|
|
copiedPrice = null;
|
|
copiedSignupInterval = null;
|
|
selectedTier = null;
|
|
tiers = null;
|
|
|
|
@computed('isLink')
|
|
get toggleValue() {
|
|
return this.isLink ? 'Data attributes' : 'Links';
|
|
}
|
|
|
|
@computed('isLink')
|
|
get sectionHeaderLabel() {
|
|
return this.isLink ? 'Link' : 'Data attribute';
|
|
}
|
|
|
|
@computed('selectedTier')
|
|
get selectedTierIdPath() {
|
|
const selectedTier = this.selectedTier;
|
|
if (selectedTier) {
|
|
return `/${selectedTier.name}`;
|
|
}
|
|
return '';
|
|
}
|
|
|
|
@computed('tiers.[]')
|
|
get tierOptions() {
|
|
if (this.tiers) {
|
|
return this.tiers.map((tier) => {
|
|
return {
|
|
label: tier.name,
|
|
name: tier.id
|
|
};
|
|
});
|
|
}
|
|
return [];
|
|
}
|
|
|
|
init() {
|
|
super.init(...arguments);
|
|
this.siteUrl = this.config.blogUrl;
|
|
}
|
|
|
|
@action
|
|
toggleShowLinks() {
|
|
this.toggleProperty('isLink');
|
|
}
|
|
|
|
@action
|
|
setSelectedTier(tier) {
|
|
this.set('selectedTier', tier);
|
|
}
|
|
|
|
@task(function* () {
|
|
const tiers = yield this.store.query('tier', {filter: 'type:paid+active:true', include: 'monthly_price,yearly_price'}) || [];
|
|
this.set('tiers', tiers);
|
|
if (tiers.length > 0) {
|
|
this.set('selectedTier', {
|
|
name: tiers.firstObject.id,
|
|
label: tiers.firstObject.name
|
|
});
|
|
}
|
|
})
|
|
fetchTiers;
|
|
|
|
@task(function* (id) {
|
|
this.set('copiedPrice', id);
|
|
let data = '';
|
|
if (this.isLink) {
|
|
data = id ? `#/portal/${id}` : `#/portal/`;
|
|
data = this.siteUrl + `/` + data;
|
|
} else {
|
|
data = id ? `data-portal="${id}"` : `data-portal`;
|
|
}
|
|
copyTextToClipboard(data);
|
|
yield timeout(this.isTesting ? 50 : 3000);
|
|
})
|
|
copyStaticLink;
|
|
|
|
@task(function* (interval) {
|
|
this.set('copiedSignupInterval', interval);
|
|
let data = '';
|
|
if (this.isLink) {
|
|
data = `#/portal/signup${this.selectedTierIdPath}/${interval}`;
|
|
data = this.siteUrl + `/` + data;
|
|
} else {
|
|
data = `data-portal="signup${this.selectedTierIdPath}/${interval}"`;
|
|
}
|
|
copyTextToClipboard(data);
|
|
yield timeout(this.isTesting ? 50 : 3000);
|
|
})
|
|
copyTierSignupLink;
|
|
}
|