From 6c207f5e72f3129f3c8bf4d659a4739ad2e92217 Mon Sep 17 00:00:00 2001
From: Fabien 'egg' O'Carroll <fabien@allou.is>
Date: Fri, 10 Sep 2021 19:03:42 +0200
Subject: [PATCH] Showed created at dates for complimentary subscriptions
 (#2089)

refs https://github.com/TryGhost/Team/issues/873

When we updated the UI to handle the default subscriptions for
Complimentary subscriptions, we didn't update it to use any of the data.

This updates the UI to share as much as possible for the display of
subscriptions information, and only diverges for the menus which have
different actions based on complimentary or not.

This should ensure that we keep the UI in sync for both types of Member.

* Hid Complimentary subscription CTA for members with one.
---
 .../components/gh-member-settings-form-cp.hbs | 72 +++++++------------
 .../components/gh-member-settings-form-cp.js  | 15 ++--
 2 files changed, 33 insertions(+), 54 deletions(-)

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 118bffcd07..2abc293d39 100644
--- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs
@@ -165,23 +165,34 @@
                         </h3>
 
                         {{#each product.subscriptions as |sub|}}
-                            {{#if sub.isComplimentary}}
-                                <div class="gh-memberproduct-subscription">
+                            <div class="gh-memberproduct-subscription">
+                                <div>
                                     <div>
-                                        <div>
-                                            <span class="gh-cp-memberproduct-pricelabel">Complimentary</span>
+                                        <span class="gh-cp-memberproduct-pricelabel">{{sub.price.nickname}}</span>
+                                        &ndash;
+                                        {{#if sub.cancel_at_period_end}}
+                                            <span class="gh-cp-memberproduct-renewal">Has access until {{sub.validUntil}}</span>
+                                            <span class="gh-badge archived">Cancelled</span>
+                                        {{else}}
+                                            <span class="gh-cp-memberproduct-renewal">Renews {{sub.validUntil}}</span>
                                             <span class="gh-badge active">Active</span>
-                                        </div>
-                                        <div class="gh-memberproduct-created">Created on</div>
+                                        {{/if}}
                                     </div>
-                                    <div class="flex items-center">
-                                        <div class="gh-product-card-price">
-                                            <div class="flex items-start">
-                                                <span class="currency-symbol">$</span>
-                                                <span class="amount">0</span>
-                                            </div>
-                                            <div class="period">yearly</div>
+                                    {{#if sub.cancellationReason}}
+                                        <div class="gh-memberproduct-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
+                                    {{/if}}
+                                    <div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
+                                </div>
+
+                                <div class="flex items-center">
+                                    <div class="gh-product-card-price">
+                                        <div class="flex items-start">
+                                            <span class="currency-symbol">{{sub.price.currencySymbol}}</span>
+                                            <span class="amount">{{sub.price.nonDecimalAmount}}</span>
                                         </div>
+                                        <div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
+                                    </div>
+                                    {{#if sub.isComplimentary}}
                                         <span class="action-menu">
                                             <GhDropdownButton @dropdownName="subscription-menu-complimentary" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action icon-only" @title="Actions">
                                                 <span>
@@ -197,37 +208,8 @@
                                                 </li>
                                             </GhDropdown>
                                         </span>
-                                    </div>
-                                </div>
-                            {{else}}
-                                <div class="gh-memberproduct-subscription">
-                                    <div>
-                                        <div>
-                                            <span class="gh-cp-memberproduct-pricelabel">{{sub.price.nickname}}</span>
-                                            &ndash;
-                                            {{#if sub.cancel_at_period_end}}
-                                                <span class="gh-cp-memberproduct-renewal">Has access until {{sub.validUntil}}</span>
-                                                <span class="gh-badge archived">Cancelled</span>
-                                            {{else}}
-                                                <span class="gh-cp-memberproduct-renewal">Renews {{sub.validUntil}}</span>
-                                                <span class="gh-badge active">Active</span>
-                                            {{/if}}
-                                        </div>
-                                        {{#if sub.cancellationReason}}
-                                            <div class="gh-memberproduct-cancelreason"><span class="fw6">Cancellation reason:</span> {{sub.cancellationReason}}</div>
-                                        {{/if}}
-                                        <div class="gh-memberproduct-created">Created on {{sub.startDate}}</div>
-                                    </div>
-
-                                    <div class="flex items-center">
-                                        <div class="gh-product-card-price">
-                                            <div class="flex items-start">
-                                                <span class="currency-symbol">{{sub.price.currencySymbol}}</span>
-                                                <span class="amount">{{sub.price.nonDecimalAmount}}</span>
-                                            </div>
-                                            <div class="period">{{if (eq sub.price.interval "year") "yearly" "monthly"}}</div>
-                                        </div>
 
+                                    {{else}}
                                         <span class="action-menu">
                                             <GhDropdownButton @dropdownName="subscription-menu-{{sub.id}}" @classNames="gh-btn gh-btn-outline gh-btn-icon gh-btn-subscription-action icon-only" @title="Actions">
                                                 <span>
@@ -260,9 +242,9 @@
                                                 </li>
                                             </GhDropdown>
                                         </span>
-                                    </div>
+                                    {{/if}}
                                 </div>
-                            {{/if}}
+                            </div>
                         {{/each}}
 
                         {{#if (and (feature "multipleProducts") (eq product.subscriptions.length 0))}}
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 96689c37a4..f9a41167f9 100644
--- a/ghost/admin/app/components/gh-member-settings-form-cp.js
+++ b/ghost/admin/app/components/gh-member-settings-form-cp.js
@@ -35,16 +35,13 @@ export default class extends Component {
         if (!this.membersUtils.isStripeEnabled) {
             return false;
         }
-        if (this.feature.get('multipleProducts')) {
-            return true;
+
+        let products = this.member.get('products');
+        if (products && products.length > 0) {
+            return false;
         }
-        let subscriptions = this.member.get('subscriptions') || [];
-        const hasZeroPriceSub = subscriptions.filter((sub) => {
-            return ['active', 'trialing', 'unpaid', 'past_due'].includes(sub.status);
-        }).find((sub) => {
-            return !sub?.price?.amount;
-        });
-        return !hasZeroPriceSub;
+
+        return true;
     }
 
     get products() {