From 6986c4f424e61e43b03f36a47a2fd725236c9fe9 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Mon, 19 Apr 2021 14:45:14 +0200
Subject: [PATCH] Added mock product assignment modal

Created modal for adding products to members with mock data
---
 .../components/gh-member-product-prices.hbs   |  9 +++
 .../components/gh-member-product-prices.js    | 13 +++++
 .../components/gh-member-product-products.hbs |  9 +++
 .../components/gh-member-product-products.js  | 13 +++++
 .../components/gh-member-settings-form-cp.hbs | 20 ++++---
 .../components/gh-member-settings-form-cp.js  |  6 +-
 .../gh-products-price-billingperiod.js        |  9 +--
 .../app/components/modal-member-product.hbs   | 55 +++++++++++++++++++
 .../app/components/modal-member-product.js    |  6 ++
 ghost/admin/app/styles/layouts/members.css    | 34 ++++++++----
 ghost/admin/app/styles/patterns/buttons.css   |  4 ++
 11 files changed, 148 insertions(+), 30 deletions(-)
 create mode 100644 ghost/admin/app/components/gh-member-product-prices.hbs
 create mode 100644 ghost/admin/app/components/gh-member-product-prices.js
 create mode 100644 ghost/admin/app/components/gh-member-product-products.hbs
 create mode 100644 ghost/admin/app/components/gh-member-product-products.js
 create mode 100644 ghost/admin/app/components/modal-member-product.hbs
 create mode 100644 ghost/admin/app/components/modal-member-product.js

diff --git a/ghost/admin/app/components/gh-member-product-prices.hbs b/ghost/admin/app/components/gh-member-product-prices.hbs
new file mode 100644
index 0000000000..5c87f51a80
--- /dev/null
+++ b/ghost/admin/app/components/gh-member-product-prices.hbs
@@ -0,0 +1,9 @@
+<span class="gh-select">
+    <OneWaySelect 
+        @options={{this.availablePrices}}
+        @optionValuePath="price"
+        @optionLabelPath="label"
+        @optionTargetPath="price"
+    />
+    {{svg-jar "arrow-down-small"}}
+</span>
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-member-product-prices.js b/ghost/admin/app/components/gh-member-product-prices.js
new file mode 100644
index 0000000000..09b7d62fcb
--- /dev/null
+++ b/ghost/admin/app/components/gh-member-product-prices.js
@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+
+const PRICES = [
+    {label: '$4/month', id: '1'},
+    {label: '$40/year', id: '2'}
+];
+
+export default Component.extend({
+    init() {
+        this._super(...arguments);
+        this.availablePrices = PRICES;
+    }
+});
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-member-product-products.hbs b/ghost/admin/app/components/gh-member-product-products.hbs
new file mode 100644
index 0000000000..2afb4aa400
--- /dev/null
+++ b/ghost/admin/app/components/gh-member-product-products.hbs
@@ -0,0 +1,9 @@
+<span class="gh-select">
+    <OneWaySelect 
+        @options={{this.availableProducts}}
+        @optionValuePath="product"
+        @optionLabelPath="label"
+        @optionTargetPath="product"
+    />
+    {{svg-jar "arrow-down-small"}}
+</span>
\ No newline at end of file
diff --git a/ghost/admin/app/components/gh-member-product-products.js b/ghost/admin/app/components/gh-member-product-products.js
new file mode 100644
index 0000000000..ceefda43e2
--- /dev/null
+++ b/ghost/admin/app/components/gh-member-product-products.js
@@ -0,0 +1,13 @@
+import Component from '@ember/component';
+
+const PRODUCTS = [
+    {label: 'Basic', id: '1'},
+    {label: 'Advanced', id: '2'}
+];
+
+export default Component.extend({
+    init() {
+        this._super(...arguments);
+        this.availableProducts = PRODUCTS;
+    }
+});
\ No newline at end of file
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 db232bee7d..02cb7a869c 100644
--- a/ghost/admin/app/components/gh-member-settings-form-cp.hbs
+++ b/ghost/admin/app/components/gh-member-settings-form-cp.hbs
@@ -222,17 +222,12 @@
                     </li>
                     <tr class="gh-list-row gh-memberproduct-add-product">
                         <td colspan="2" class="gh-list-data">
-                            <LinkTo @route="members" data-test-link="add-webhook">
-                                {{svg-jar "add"}}
-                                <span>Add product</span>
-                            </LinkTo>
+                            <button type="button" class="gh-btn gh-btn-text green gh-btn-icon" {{action (toggle "showMemberProductModal" this)}}>
+                                <span>{{svg-jar "add"}} Add product</span>
+                            </button>
                         </td>
                     </tr>
                 </ol>
-
-                {{!-- <button type="button" class="gh-btn gh-btn-green" {{action (toggle "showPriceModal" this)}}>
-                    <span>New price</span>
-                </button> --}}
             </div>
         </div>
         <div class="gh-main-section-block">
@@ -259,4 +254,11 @@
         </div>
     </section>
 
-</div>
\ No newline at end of file
+</div>
+
+{{#if this.showMemberProductModal}}
+    <GhFullscreenModal @modal="member-product"
+        @model={{this.member}}
+        @close={{this.closeMemberProductModal}}
+        @modifier="action wide member-product" />
+{{/if}}
\ No newline at end of file
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 15e58c3c71..5698651d14 100644
--- a/ghost/admin/app/components/gh-member-settings-form-cp.js
+++ b/ghost/admin/app/components/gh-member-settings-form-cp.js
@@ -103,5 +103,9 @@ export default Component.extend({
 
         this.store.pushPayload('member', response);
         return response;
-    }).drop()
+    }).drop(),
+
+    closeMemberProductModal: action(function () {
+        this.set('showMemberProductModal', false);
+    })
 });
diff --git a/ghost/admin/app/components/gh-products-price-billingperiod.js b/ghost/admin/app/components/gh-products-price-billingperiod.js
index c5a340b3d8..96dc899efb 100644
--- a/ghost/admin/app/components/gh-products-price-billingperiod.js
+++ b/ghost/admin/app/components/gh-products-price-billingperiod.js
@@ -1,15 +1,8 @@
 import Component from '@ember/component';
 
 const PERIODS = [
-    {label: 'Daily', period: 'daily'},
-    {label: 'Weekly', period: 'members'},
     {label: 'Monthly', period: 'monthly'},
-    {label: 'Every 3 months', period: '3-months'},
-    {label: 'Every 6 months', period: '6-months'},
-    {label: 'Yearly', period: 'yearly'},
-    {label: 'Custom', period: 'custom'},
-    {label: 'One time', period: 'one-time'},
-    {label: 'Unbilled', period: 'unbilled'}
+    {label: 'Yearly', period: 'yearly'}
 ];
 
 export default Component.extend({
diff --git a/ghost/admin/app/components/modal-member-product.hbs b/ghost/admin/app/components/modal-member-product.hbs
new file mode 100644
index 0000000000..b29ae7353c
--- /dev/null
+++ b/ghost/admin/app/components/modal-member-product.hbs
@@ -0,0 +1,55 @@
+{{!-- <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
+                @member={{this.member}}
+                @sizeClass={{if this.member.name 'f-subheadline fw4 lh-zero tracked-1' 'f-headline fw4 lh-zero tracked-1'}}
+                @containerClass="w20 h20 mr4 gh-member-detail-avatar"
+            />
+            <h3>{{or this.member.name this.member.email}}</h3>
+            {{#if (and this.member.name this.member.email)}}
+                <p>
+                    {{this.member.email}}
+                </p>
+            {{/if}}
+        </div>
+
+        <div class="gh-main-section-content grey gh-member-product-form-block">
+            <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="product">
+                <label for="product" class="fw6">Product</label>
+                <GhMemberProductProducts @triggerId="product-input" />
+            </GhFormGroup>
+            <GhFormGroup @errors={{this.price.errors}} @hasValidated={{this.price.hasValidated}} @property="price">
+                <label for="price" class="fw6">Price</label>
+                <GhMemberProductPrices @triggerId="price-input" />
+            </GhFormGroup>
+        </div>
+    </div>
+</div>
+</form>
+
+<div class="modal-footer">
+    <button
+        class="gh-btn"
+        {{action "closeModal"}}
+        {{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
+        {{action (optional this.noop) on="mouseDown"}}
+        data-test-button="cancel-webhook"
+    >
+        <span>Cancel</span>
+    </button>
+    <GhTaskButton @buttonText="Add product to member"
+        @successText={{this.successText}}
+        {{!-- @task={{this.saveWebhook}} --}}
+        @class="gh-btn gh-btn-black gh-btn-icon"
+        data-test-button="save-webhook" />
+</div>
\ 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
new file mode 100644
index 0000000000..f3be7ef125
--- /dev/null
+++ b/ghost/admin/app/components/modal-member-product.js
@@ -0,0 +1,6 @@
+import ModalComponent from 'ghost-admin/components/modal-base';
+import {alias} from '@ember/object/computed';
+
+export default ModalComponent.extend({
+    member: alias('model')
+});
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 10ac409b6c..24fdf282d8 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1648,17 +1648,27 @@ p.gh-members-import-errordetail:first-of-type {
     padding: 12px 0;
 }
 
-.gh-memberproduct-add-product .gh-list-data a {
-    display: flex;
-    align-items: center;
-}
-
-.gh-memberproduct-add-product .gh-list-data a svg {
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-}
-
-.gh-memberproduct-add-product .gh-list-data a svg path {
+.gh-memberproduct-add-product .gh-btn svg path {
     fill: var(--green);
+}
+
+.gh-member-product-memberdetails {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 12px 0 24px;
+}
+
+.gh-member-product-memberdetails .gh-member-gravatar {
+    margin: 0;
+}
+
+.gh-member-product-memberdetails h3 {
+    margin: 12px 0 0;
+    font-size: 1.9rem;
+    line-height: 1;
+}
+
+.gh-member-product-memberdetails p {
+    margin: 0;
 }
\ No newline at end of file
diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css
index 9495905a95..554ce84311 100644
--- a/ghost/admin/app/styles/patterns/buttons.css
+++ b/ghost/admin/app/styles/patterns/buttons.css
@@ -331,6 +331,10 @@ svg.gh-btn-icon-right {
     color: color-mod(var(--yellow) l(-10%));
 }
 
+.gh-btn-text.green span {
+    color: var(--green);
+}
+
 .gh-btn-textfield-group span {
     height: 36px;
     line-height: 36px;