From aa35d99de4c47d7e3cba672bc3cce94c380148f7 Mon Sep 17 00:00:00 2001 From: Rishabh Garg Date: Thu, 17 Jun 2021 13:09:43 +0530 Subject: [PATCH] Add UI for complimentary products with multiple products feature (#2008) * Added v1 comped subscription handling * Cleanup * Added cancellation for existing subscriptions * Added loader for fetching products * Refined complimentary popup * Added default product selection * Updated add complimentary for multiple products * Updated products add comped button Co-authored-by: Peter Zimon --- .../components/gh-member-settings-form-cp.hbs | 39 ++++++-- .../components/gh-member-settings-form-cp.js | 5 + .../app/components/modal-member-product.hbs | 95 ++++++++----------- .../app/components/modal-member-product.js | 93 +++++++++--------- ghost/admin/app/styles/components/modals.css | 1 + ghost/admin/app/styles/layouts/members.css | 4 + ghost/admin/app/styles/patterns/forms.css | 21 +++- ghost/admin/public/assets/icons/check.svg | 1 + 8 files changed, 144 insertions(+), 115 deletions(-) create mode 100644 ghost/admin/public/assets/icons/check.svg diff --git a/ghost/admin/app/components/gh-member-settings-form-cp.hbs b/ghost/admin/app/components/gh-member-settings-form-cp.hbs index 592371a9cc..dd12711738 100644 --- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs +++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs @@ -197,20 +197,39 @@ {{/each}} - {{#if this.isAddComplimentaryAllowed}} -
- {{#if this.isCreatingComplimentary}} - - {{else}} - - {{/if}} -
+ {{#if (not (feature "multipleProducts"))}} + {{#if this.isAddComplimentaryAllowed}} +
+ {{#if this.isCreatingComplimentary}} + + {{else}} + + {{/if}} +
+ {{/if}} {{/if}} {{/each}} + {{#if (feature "multipleProducts")}} + {{#if (and this.products this.isAddComplimentaryAllowed)}} +
+ {{#if this.isCreatingComplimentary}} + + {{else}} + + {{/if}} +
+ {{/if}} + {{/if}}
diff --git a/ghost/admin/app/components/gh-member-settings-form-cp.js b/ghost/admin/app/components/gh-member-settings-form-cp.js index 95e9eade46..48ee7c8dc9 100644 --- a/ghost/admin/app/components/gh-member-settings-form-cp.js +++ b/ghost/admin/app/components/gh-member-settings-form-cp.js @@ -15,6 +15,8 @@ export default class extends Component { ajax @service store + @service + feature constructor(...args) { super(...args); @@ -33,6 +35,9 @@ export default class extends Component { if (!this.membersUtils.isStripeEnabled) { return false; } + if (this.feature.get('multipleProducts')) { + return true; + } let subscriptions = this.member.get('subscriptions') || []; const hasZeroPriceSub = subscriptions.filter((sub) => { return ['active', 'trialing', 'unpaid', 'past_due'].includes(sub.status); diff --git a/ghost/admin/app/components/modal-member-product.hbs b/ghost/admin/app/components/modal-member-product.hbs index 7f0c4c8b3d..40bfffaf4e 100644 --- a/ghost/admin/app/components/modal-member-product.hbs +++ b/ghost/admin/app/components/modal-member-product.hbs @@ -1,72 +1,59 @@ -
+

Add subscription

-{{svg-jar "close"}} +{{svg-jar + "close"}}
-
-

Select a product for {{or this.member.name this.member.email}}'s complimentary subscription.

-
-
-
-
-
-

Bronze

-

Only the hottest marketing news

-
-
+
+

Select a product for {{or + this.member.name this.member.email}}'s complimentary + subscription.

+ {{#if this.activeSubscriptions.length}} +

+ Adding a complimentary subscription cancels all existing subscriptions of this member. +

+ {{/if}} + {{#if this.loadingProducts}} +
+
-
-
-
-
-
-
-

Silver

-

Extra weekly newsletter

+ {{else}} +
+ {{#each this.products as |product|}} +
+
+
+
+

{{product.name}}

+

{{product.description}}

+
+ {{svg-jar "check" class="check"}} +
+
+
-
+ {{/each}}
-
-
-
-
-
-
-

Gold

-

All-in-one supporter pack!

-
-
-
-
-
+ {{/if}}
-
- - {{!-- --}} + data-test-button="save-comp-product" />
\ No newline at end of file diff --git a/ghost/admin/app/components/modal-member-product.js b/ghost/admin/app/components/modal-member-product.js index 79cf16c3d2..75e533f50a 100644 --- a/ghost/admin/app/components/modal-member-product.js +++ b/ghost/admin/app/components/modal-member-product.js @@ -1,6 +1,5 @@ import ModalComponent from 'ghost-admin/components/modal-base'; import {action} from '@ember/object'; -import {getNonDecimal, getSymbol} from 'ghost-admin/utils/currency'; import {inject as service} from '@ember/service'; import {task} from 'ember-concurrency-decorators'; import {tracked} from '@glimmer/tracking'; @@ -24,15 +23,26 @@ export default class ModalMemberProduct extends ModalComponent { @tracked products = [] - constructor(...args) { - super(...args); - this.fetchProducts(); + @tracked + selectedProduct = null; + + @tracked + loadingProducts = false; + + @task({drop: true}) + *fetchProducts() { + this.products = yield this.store.query('product', {include: 'monthly_price,yearly_price'}); + this.loadingProducts = false; + if (this.products.length > 0) { + this.selectedProduct = this.products.firstObject.id; + } } - async fetchProducts() { - this.products = await this.store.query('product', {include: 'stripe_prices'}); - this.product = this.products.firstObject; - this.price = this.prices ? this.prices[0] : null; + get activeSubscriptions() { + const subscriptions = this.member.get('subscriptions') || []; + return subscriptions.filter((sub) => { + return ['active', 'trialing', 'unpaid', 'past_due'].includes(sub.status); + }); } get member() { @@ -43,45 +53,15 @@ export default class ModalMemberProduct extends ModalComponent { return !this.price || this.price.amount !== 0; } - get prices() { - if (!this.products || !this.products.length) { - return []; - } - if (this.product) { - let subscriptions = this.member.get('subscriptions') || []; - let activeCurrency; - if (subscriptions.length > 0) { - activeCurrency = subscriptions[0].price?.currency; - } - - const product = this.products.find((_product) => { - return _product.id === this.product.id; - }); - return product.stripePrices.sort((a, b) => { - return a.amount - b.amount; - }).filter((price) => { - return price.active; - }).filter((price) => { - if (activeCurrency) { - return price.currency?.toLowerCase() === activeCurrency.toLowerCase(); - } - return true; - }).sort((a, b) => { - return a.currency.localeCompare(b.currency, undefined, {ignorePunctuation: true}); - }).map((price) => { - return { - ...price, - label: `${price.nickname} (${getSymbol(price.currency)}${getNonDecimal(price.amount)}/${price.interval})` - }; - }); - } else { - return []; - } + @action + setup() { + this.loadingProducts = true; + this.fetchProducts.perform(); } @action - setProduct(product) { - this.product = product; + setProduct(productId) { + this.selectedProduct = productId; } @action @@ -92,12 +72,27 @@ export default class ModalMemberProduct extends ModalComponent { @task({ drop: true }) - *addPriceTask() { - let url = this.ghostPaths.url.api('members', this.member.get('id'), 'subscriptions'); - - let response = yield this.ajax.post(url, { + *addProduct() { + let url = this.ghostPaths.url.api(`members/${this.member.get('id')}`); + // Cancel existing active subscriptions for member + for (let i = 0; i < this.activeSubscriptions.length; i++) { + const subscription = this.activeSubscriptions[i]; + const cancelUrl = this.ghostPaths.url.api(`members/${this.member.get('id')}/subscriptions/${subscription.id}`); + yield this.ajax.put(cancelUrl, { + data: { + status: 'canceled' + } + }); + } + let response = yield this.ajax.put(url, { data: { - stripe_price_id: this.price.stripe_price_id + members: [{ + id: this.member.get('id'), + email: this.member.get('email'), + products: [{ + id: this.selectedProduct + }] + }] } }); diff --git a/ghost/admin/app/styles/components/modals.css b/ghost/admin/app/styles/components/modals.css index 373b73396c..0646d52e69 100644 --- a/ghost/admin/app/styles/components/modals.css +++ b/ghost/admin/app/styles/components/modals.css @@ -199,6 +199,7 @@ .modal-body p { font-size: 1.4rem; + line-height: 1.5em; } .modal-footer { diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css index 85fde32b65..4bee0b64ad 100644 --- a/ghost/admin/app/styles/layouts/members.css +++ b/ghost/admin/app/styles/layouts/members.css @@ -1787,3 +1787,7 @@ p.gh-members-import-errordetail:first-of-type { .gh-member-product-form-block .form-group:last-of-type { margin: 0; } + +.gh-member-addcomp-warning { + margin-top: -16px; +} \ No newline at end of file diff --git a/ghost/admin/app/styles/patterns/forms.css b/ghost/admin/app/styles/patterns/forms.css index a5d95dc520..d58725b75d 100644 --- a/ghost/admin/app/styles/patterns/forms.css +++ b/ghost/admin/app/styles/patterns/forms.css @@ -795,6 +795,7 @@ textarea { padding: 12px 12px 12px 14px; display: flex; align-items: center; + justify-content: space-between; } .form-rich-radio .gh-radio-label .description h4 { @@ -806,13 +807,29 @@ textarea { } .form-rich-radio .gh-radio-label .description p { - font-size: 1.25rem !important; + font-size: 1.3rem !important; font-weight: 400; line-height: 1.45em; - margin: 2px 0 0; + margin: 0; padding: 0; } +.form-rich-radio .check { + color: var(--darkgrey); + width: 14px; + height: 14px; + margin-right: 4px; + overflow: visible; +} + +.form-rich-radio .check path { + stroke-width: 2px; +} + +.form-rich-radio .gh-radio:not(.active) .check { + display: none; +} + /* FFF: Fucking Firefox Fixes /* ---------------------------------------------------------- */ diff --git a/ghost/admin/public/assets/icons/check.svg b/ghost/admin/public/assets/icons/check.svg new file mode 100644 index 0000000000..e8a8455b33 --- /dev/null +++ b/ghost/admin/public/assets/icons/check.svg @@ -0,0 +1 @@ +check-1 \ No newline at end of file