✨ Added "Complimentary" plan toggle (#1476)

refs TryGhost/Ghost#11537

- Adds support for "Complimentary" plan toggle only when editing an existing member. The same functionality for adding a new member was left out intentionally for simplicity sake. 

Co-authored-by: Peter Zimon <peter.zimon@gmail.com>

app/models/member.js

@@ -9,5 +9,6 @@ export default Model.extend(ValidationEngine, {
     note: attr('string'),
     createdAtUTC: attr('moment-utc'),
     stripe: attr('member-subscription'),
-    subscribed: attr('boolean', {defaultValue: true})
+    subscribed: attr('boolean', {defaultValue: true}),
+    comped: attr('boolean', {defaultValue: false})
 });

app/styles/layouts/members.css

@@ -162,19 +162,19 @@ p.gh-members-list-email {
     .gh-members-chart-summary {
         flex-direction: row;
     }
-    
+
     .gh-members-chart-summary div {
         flex-basis: 33%;
         border-bottom: none;
         justify-content: flex-start;
     }
-    
+
     .gh-members-chart-summary > div:nth-of-type(1),
     .gh-members-chart-summary > div:nth-of-type(2) {
         border-right: 1px solid var(--whitegrey);
     }
 }
-    
+
 @media (max-width: 900px) {
     .members-list .gh-list-header, .gh-list-hidecell-m {
         display: none;
@@ -306,7 +306,8 @@ textarea.gh-member-details-textarea {
     width: 200px;
 }
 
-.gh-members-subscribed-checkbox {
+.gh-members-subscribed-checkbox,
+.gh-members-comped-checkbox {
     max-width: 100%;
 }
 

app/styles/patterns/forms.css

@@ -68,7 +68,7 @@ input {
 .form-group p {
     margin: 4px 0 0 0;
     color: var(--midgrey);
-    font-size: 1.25rem;
+    font-size: 1.3rem;
     font-weight: 400;
 }
 

app/templates/components/gh-member-settings-form.hbs

@@ -67,6 +67,7 @@
     </div>
 </div>
 
+{{#unless this.member.isNew}}
 <h4 class="midlightgrey f-small fw5 ttu mt12">Stripe info</h4>
 
 {{#if this.isLoading}}
@@ -76,8 +77,8 @@
         </div>
     </div>
 {{else}}
-    {{#if this.subscriptions}}
-        <div class="br4 shadow-1 bg-grouped-table mt2">
+    <div class="br4 shadow-1 bg-grouped-table mt2">
+        {{#if this.subscriptions}}
             {{#if this.hasMultipleSubscriptions}}
                 <div class="pa2 flex flex-column flex-row-ns items-center justify-center f7 fw5 bg-whitegrey-l2 bb b--whitegrey br4 br--top">
                     {{svg-jar "info" class="gh-member-info-icon mr2 fill-darkgrey"}} Member has multiple Stripe subscriptions
@@ -176,10 +177,27 @@
                     </div>
                 </section>
             {{/each}}
+        {{else}}
+            <div class="pa20">
+                <p class="ma0 pa0 tc midgrey">Member doesn't have an active Stripe subscription</p>
+            </div>
+        {{/if}}
+        <div class="pa5 pb0 pt4 flex flex-column justify-between bt b--whitegrey">
+            <GhFormGroup @classNames="gh-members-comped-checkbox">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <h4 class="gh-setting-title">Complimentary premium plan</h4>
+                        <p class="gh-setting-desc">If enabled, member will be placed onto a free of charge premium subscription</p>
+                    </div>
+                    <div class="for-switch">
+                        <label class="switch" for="comped-checkbox">
+                            <Input @checked={{this.member.comped}} @type="checkbox" @id="comped-checkbox" @name="comped" />
+                            <span class="input-toggle-component"></span>
+                        </label>
+                    </div>
+                </div>
+            </GhFormGroup>
         </div>
-    {{else}}
-        <div class="pa20 br4 shadow-1 bg-grouped-table mt2">
-            <p class="ma0 pa0 tc midgrey">Member doesn't have an active Stripe subscription</p>
-        </div>
-    {{/if}}
+    </div>
 {{/if}}
+{{/unless}}