Ghost/ghost/admin/app/components/gh-portal-links.js
Rishabh 42691c5cc9 Added multiple product option to Portal links
refs https://github.com/TryGhost/Team/issues/825

With multiple products, it's possible to link to any products from themes.

- updates links area in Portal to be able to handle multiple products
- the new product selector for links is behind the alpha flag
2021-06-30 13:18:40 +05:30

92 lines
2.8 KiB
JavaScript

import Component from '@ember/component';
import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
import {computed} from '@ember/object';
import {inject as service} from '@ember/service';
import {task, timeout} from 'ember-concurrency';
export default Component.extend({
config: service(),
store: service(),
settings: service(),
tagName: '',
isLink: true,
prices: null,
copiedPrice: null,
copiedSignupInterval: null,
selectedProduct: null,
products: null,
toggleValue: computed('isLink', function () {
return this.isLink ? 'Data attributes' : 'Links';
}),
sectionHeaderLabel: computed('isLink', function () {
return this.isLink ? 'Link' : 'Data attribute';
}),
selectedProductIdPath: computed('selectedProduct', function () {
const selectedProduct = this.get('selectedProduct');
if (selectedProduct) {
return `/${selectedProduct.name}`;
}
return '';
}),
productOptions: computed('products.[]', function () {
if (this.get('products')) {
return this.get('products').map((product) => {
return {
label: product.name,
name: product.id
};
});
}
return [];
}),
init() {
this._super(...arguments);
this.siteUrl = this.config.get('blogUrl');
},
actions: {
toggleShowLinks() {
this.toggleProperty('isLink');
},
setSelectedProduct(product) {
this.set('selectedProduct', product);
}
},
fetchProducts: task(function* () {
const products = yield this.store.query('product', {include: 'monthly_price,yearly_price'}) || [];
this.set('products', products);
if (products.length > 0) {
this.set('selectedProduct', {
name: products.firstObject.id,
label: products.firstObject.name
});
}
}),
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);
}),
copyProductSignupLink: task(function* (interval) {
this.set('copiedSignupInterval', interval);
let data = '';
if (this.isLink) {
data = `#/portal/signup${this.selectedProductIdPath}/${interval}`;
} else {
data = `data-portal="signup${this.selectedProductIdPath}/${interval}"`;
}
copyTextToClipboard(data);
yield timeout(this.isTesting ? 50 : 3000);
})
});