Updated member detail screen for custom products

- added "Add subscription" button to product list - copy updates
TryGhost · May 6, 2021 · 8bc50c1 · 8bc50c1
1 parent b37bd65
commit 8bc50c1
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 25 deletions.
diff --git a/app/components/gh-member-settings-form-cp.hbs b/app/components/gh-member-settings-form-cp.hbs
@@ -102,15 +102,15 @@
                 </div>
             </div>
 
-            <h4 class="gh-main-section-header small bn">Products</h4>
+            <h4 class="gh-main-section-header small bn">Subscriptions</h4>
 
             {{#unless this.products}}
             <div class="gh-main-section-content bordered">
                 <div class="gh-cp-memberproduct-noproduct">
-                    <div class="mb2">This member doesn't have any products.</div>
+                    <div class="mb2">This member doesn't have any subscriptions.</div>
                     {{#unless this.member.isNew}}
                     <button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action (toggle "showMemberProductModal" this)}}>
-                        <span>{{svg-jar "add"}} Add product</span>
+                        <span>{{svg-jar "add"}} Add subscription</span>
                     </button>
                     {{/unless}}
                 </div>
@@ -177,6 +177,12 @@
                             </span>
                         </div>
                         {{/each}}
+
+                        <div class="gh-memberproduct-list-footer">
+                        <button type="button" class="gh-btn gh-btn-text green gh-btn-icon gh-btn-addproduct" {{action (toggle "showMemberProductModal" this)}}>
+                            <span>{{svg-jar "add"}} Add subscription</span>
+                        </button>
+                        </div>
                     </div>
                 </div>
             {{/each}}

diff --git a/app/components/modal-member-product.hbs b/app/components/modal-member-product.hbs
@@ -1,13 +1,9 @@
-{{!-- <header class="modal-header" data-test-modal="webhook-form">
-    <h1 data-test-text="title">Add product</h1>
-</header> --}}
 <button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
     {{svg-jar "close"}}
 </button>
 
 <form>
 <div class="modal-body">
-
     <div class="gh-main-section-block">
         <div class="gh-main-section-content gh-member-product-memberdetails">
             <GhMemberAvatar
@@ -26,15 +22,7 @@
         <div class="gh-main-section-content grey gh-member-product-form-block">
             <GhFormGroup>
                 <label for="product" class="fw6">Product</label>
-                <span class="gh-select">
-                    <OneWaySelect
-                        @options={{this.products}}
-                        @optionValuePath="id"
-                        @optionLabelPath="name"
-                        @update={{this.setProduct}}
-                    />
-                    {{svg-jar "arrow-down-small"}}
-                </span>
+                <h3 class="gh-memberproduct-name">{{this.product.name}}</h3>
             </GhFormGroup>
             <GhFormGroup>
                 <label for="price" class="fw6">Price</label>
@@ -47,9 +35,7 @@
                     />
                     {{svg-jar "arrow-down-small"}}
                 </span>
-                {{#if this.cannotAddPrice}}
-                <p>Please select a price with zero value. You can add non-zero prices on <a href="https://dashboard.stripe.com" target="_blank">Stripe Dashboard</a>.</p>
-                {{/if}}
+                <p>You can only use zero value prices when adding a product manually. Use <a href="https://dashboard.stripe.com" target="_blank">Stripe Dashboard</a> to add product with non-zero prices.</p>
             </GhFormGroup>
         </div>
     </div>
@@ -64,9 +50,9 @@
         {{action (optional this.noop) on="mouseDown"}}
         data-test-button="cancel-webhook"
     >
-        <span>Cancel</span>
+        <span>{{if this.prices.length "Cancel" "OK"}}</span>
     </button>
-    <GhTaskButton @buttonText="Add product to member"
+    <GhTaskButton @buttonText="Add subscription"
         @successText={{this.successText}}
         @task={{this.addPriceTask}}
         @disabled={{this.cannotAddPrice}}

diff --git a/app/components/modal-product-price.hbs b/app/components/modal-product-price.hbs
@@ -81,7 +81,7 @@
     >
         <span>Cancel</span>
     </button>
-    <GhTaskButton @buttonText="Save price"
+    <GhTaskButton @buttonText="Save"
         @successText={{this.successText}}
         @task={{this.savePrice}}
         @class="gh-btn gh-btn-black gh-btn-icon"

diff --git a/app/styles/layouts/members.css b/app/styles/layouts/members.css
@@ -1572,7 +1572,8 @@ p.gh-members-import-errordetail:first-of-type {
 .gh-memberproduct-name {
     display: flex;
     justify-content: space-between;
-    font-size: 1.5rem;
+    font-size: 1.65rem !important;
+    font-weight: 600;
     margin-bottom: 4px !important;
 }
 
@@ -1614,8 +1615,11 @@ p.gh-members-import-errordetail:first-of-type {
     opacity: 0.5;
 }
 
-.gh-memberproduct-add-product .gh-list-data {
-    padding: 12px 0;
+.gh-memberproduct-list-footer {
+    margin-top: 12px;
+    margin-bottom: -8px;
+    padding-top: 12px;
+    border-top: 1px solid var(--whitegrey);
 }
 
 .gh-btn-addproduct svg path {
@@ -1681,4 +1685,8 @@ p.gh-members-import-errordetail:first-of-type {
 
 .gh-memberproduct-subscription .action-menu > .gh-btn svg {
     margin: 0;
+}
+
+.gh-member-product-form-block .form-group:last-of-type {
+    margin: 0;
 }