From 9f6450b2fcaedbd3f6f411270aea610b9a8c8afd Mon Sep 17 00:00:00 2001
From: Rish <zrishabhgarg@gmail.com>
Date: Wed, 10 Jun 2020 22:23:48 +0530
Subject: [PATCH] Allowed multiple custom trigger buttons with start page

closes https://github.com/TryGhost/members.js/issues/45

- Allows multiple trigger buttons on the page with data attribute `data-members-trigger-button`
- Allows passing page value to custom trigger button to show the popup on specified page, like signup
- Removes event handlers on unmount
---
 .../portal/src/components/ParentContainer.js  | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/ghost/portal/src/components/ParentContainer.js b/ghost/portal/src/components/ParentContainer.js
index b15f56af01..82d119eb7d 100644
--- a/ghost/portal/src/components/ParentContainer.js
+++ b/ghost/portal/src/components/ParentContainer.js
@@ -21,21 +21,31 @@ export default class ParentContainer extends React.Component {
         };
     }
 
+    componentDidMount() {
+        this.fetchData();
+    }
+
     componentDidUpdate(prevProps, prevState) {
         if (prevState.showPopup !== this.state.showPopup) {
             this.handleCustomTriggerClassUpdate();
         }
     }
 
+    componentWillUnmount() {
+        this.customTriggerButtons.forEach((customTriggerButton) => {
+            customTriggerButton.addEventListener('click', this.clickHandler);
+        });
+    }
+
     handleCustomTriggerClassUpdate() {
         const popupOpenClass = 'gh-members-popup-open';
         const popupCloseClass = 'gh-members-popup-close';
-        if (this.customTriggerButton) {
+        this.customTriggerButtons.forEach((customButton) => {
             const elAddClass = this.state.showPopup ? popupOpenClass : popupCloseClass;
             const elRemoveClass = this.state.showPopup ? popupCloseClass : popupOpenClass;
-            this.customTriggerButton.classList.add(elAddClass);
-            this.customTriggerButton.classList.remove(elRemoveClass);
-        }
+            customButton.classList.add(elAddClass);
+            customButton.classList.remove(elRemoveClass);
+        });
     }
 
     getStripeUrlParam() {
@@ -43,10 +53,6 @@ export default class ParentContainer extends React.Component {
         return url.searchParams.get('stripe');
     }
 
-    componentDidMount() {
-        this.fetchData();
-    }
-
     getDefaultPage({member = this.state.member, stripeParam} = {}) {
         // Loads default page and popup state for local UI testing
         if (process.env.NODE_ENV === 'development') {
@@ -96,18 +102,21 @@ export default class ParentContainer extends React.Component {
     }
 
     setupCustomTriggerButton() {
+        // Handler for custom buttons
+        this.clickHandler = (event) => {
+            const target = event.currentTarget;
+            const page = target && target.dataset.membersTriggerButton;
+
+            event.preventDefault();
+            this.onAction('openPopup', {page});
+        };
         const customTriggerSelector = '[data-members-trigger-button]';
         const popupCloseClass = 'gh-members-popup-close';
-        this.customTriggerButton = document.querySelector(customTriggerSelector);
-
-        if (this.customTriggerButton) {
-            const clickHandler = (event) => {
-                event.preventDefault();
-                this.onAction('togglePopup');
-            };
-            this.customTriggerButton.classList.add(popupCloseClass);
-            this.customTriggerButton.addEventListener('click', clickHandler);
-        }
+        this.customTriggerButtons = document.querySelectorAll(customTriggerSelector) || [];
+        this.customTriggerButtons.forEach((customTriggerButton) => {
+            customTriggerButton.classList.add(popupCloseClass);
+            customTriggerButton.addEventListener('click', this.clickHandler);
+        });
     }
 
     getActionData(action) {
@@ -133,6 +142,11 @@ export default class ParentContainer extends React.Component {
                 this.setState({
                     showPopup: !this.state.showPopup
                 });
+            } else if (action === 'openPopup') {
+                this.setState({
+                    showPopup: true,
+                    page: data.page
+                });
             } else if (action === 'back') {
                 if (this.state.lastPage) {
                     this.setState({
@@ -226,7 +240,7 @@ export default class ParentContainer extends React.Component {
     }
 
     renderTriggerButton() {
-        if (!this.customTriggerButton) {
+        if (!this.customTriggerButtons || this.customTriggerButtons.length === 0) {
             return (
                 <TriggerButton
                     isPopupOpen={this.state.showPopup}