From ca3fe7d9dbb00eaf11f7a9766a3dd329bdc5d4ee Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Fri, 7 Jul 2023 15:23:36 +0200
Subject: [PATCH] Added routing to Portal (#17240)

refs. https://github.com/TryGhost/Product/issues/3545

Routing for Portal settings in AdminX was missing
---
 .../src/components/providers/RoutingProvider.tsx            | 3 +++
 .../components/settings/membership/MembershipSettings.tsx   | 6 +++---
 .../src/components/settings/membership/Portal.tsx           | 6 +++---
 .../src/components/settings/membership/PortalModal.tsx      | 6 ++++++
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx b/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx
index 7d3a1fec23..a98b4f8f7b 100644
--- a/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx
+++ b/apps/admin-x-settings/src/components/providers/RoutingProvider.tsx
@@ -3,6 +3,7 @@ import DesignModal from '../settings/site/DesignModal';
 import InviteUserModal from '../settings/general/InviteUserModal';
 import NavigationModal from '../settings/site/NavigationModal';
 import NiceModal from '@ebay/nice-modal-react';
+import PortalModal from '../settings/membership/PortalModal';
 import React, {createContext, useCallback, useContext, useEffect, useState} from 'react';
 import {SettingsContext} from './SettingsProvider';
 
@@ -49,6 +50,8 @@ function handleNavigation() {
             NiceModal.show(NavigationModal);
         } else if (pathName === 'users/invite') {
             NiceModal.show(InviteUserModal);
+        } else if (pathName === 'portal/edit') {
+            NiceModal.show(PortalModal);
         }
         const element = document.getElementById(pathName);
         if (element) {
diff --git a/apps/admin-x-settings/src/components/settings/membership/MembershipSettings.tsx b/apps/admin-x-settings/src/components/settings/membership/MembershipSettings.tsx
index 23d3e6fe40..f438e87a74 100644
--- a/apps/admin-x-settings/src/components/settings/membership/MembershipSettings.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/MembershipSettings.tsx
@@ -5,9 +5,9 @@ import React from 'react';
 import SettingSection from '../../../admin-x-ds/settings/SettingSection';
 
 const searchKeywords = {
-    portal: ['portal', 'signup', 'sign up', 'sign in', 'login', 'account'],
-    access: ['access', 'subscription', 'post'],
-    analytics: ['analytics', 'tracking', 'privacy']
+    portal: ['portal', 'signup', 'sign up', 'signin', 'sign in', 'login', 'account', 'membership'],
+    access: ['access', 'subscription', 'post', 'membership'],
+    analytics: ['analytics', 'tracking', 'privacy', 'membership']
 };
 
 const MembershipSettings: React.FC = () => {
diff --git a/apps/admin-x-settings/src/components/settings/membership/Portal.tsx b/apps/admin-x-settings/src/components/settings/membership/Portal.tsx
index 4356a4b1d5..d8a7829c40 100644
--- a/apps/admin-x-settings/src/components/settings/membership/Portal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/Portal.tsx
@@ -1,12 +1,12 @@
 import Button from '../../../admin-x-ds/global/Button';
-import NiceModal from '@ebay/nice-modal-react';
-import PortalModal from './PortalModal';
 import React from 'react';
 import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import useRouting from '../../../hooks/useRouting';
 
 const Portal: React.FC<{ keywords: string[] }> = ({keywords}) => {
+    const {updateRoute} = useRouting();
     const openPreviewModal = () => {
-        NiceModal.show(PortalModal);
+        updateRoute('portal/edit');
     };
 
     return (
diff --git a/apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx b/apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx
index 69f4359987..533105042e 100644
--- a/apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/PortalModal.tsx
@@ -7,6 +7,7 @@ import React, {useContext, useState} from 'react';
 import SignupOptions from './portal/SignupOptions';
 import TabView, {Tab} from '../../../admin-x-ds/global/TabView';
 import useForm, {Dirtyable} from '../../../hooks/useForm';
+import useRouting from '../../../hooks/useRouting';
 import {PreviewModalContent} from '../../../admin-x-ds/global/modal/PreviewModal';
 import {Setting, SettingValue, Tier} from '../../../types/api';
 import {SettingsContext} from '../../providers/SettingsProvider';
@@ -61,6 +62,7 @@ const Sidebar: React.FC<{
 
 const PortalModal: React.FC = () => {
     const modal = useModal();
+    const {updateRoute} = useRouting();
 
     const [selectedPreviewTab, setSelectedPreviewTab] = useState('signup');
 
@@ -152,6 +154,9 @@ const PortalModal: React.FC = () => {
     }
 
     return <PreviewModalContent
+        afterClose={() => {
+            updateRoute('portal');
+        }}
         deviceSelector={false}
         dirty={saveState === 'unsaved'}
         okLabel={okLabel}
@@ -165,6 +170,7 @@ const PortalModal: React.FC = () => {
         onOk={async () => {
             if (!Object.values(errors).filter(Boolean).length) {
                 await handleSave();
+                updateRoute('portal');
                 modal.remove();
             }
         }}