From 31ff544e7a3d414775871989da7510bf79b8c4fb Mon Sep 17 00:00:00 2001
From: Rishabh Garg <rish@ghost.org>
Date: Fri, 7 Jul 2023 14:47:17 +0530
Subject: [PATCH] Added account page in Portal preview in adminX (#17236)

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

- adds switch to showing account page in portal preview
---
 .../membership/portal/PortalFrame.tsx         | 19 +++++++++++++------
 .../membership/portal/PortalPreview.tsx       |  8 ++++++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
index cb966bd10d..136a4e4506 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/PortalFrame.tsx
@@ -6,12 +6,14 @@ import {getSettingValue} from '../../../../utils/helpers';
 type PortalFrameProps = {
     settings: Setting[];
     tiers: Tier[];
+    selectedTab: string;
 }
 
-function getPortalPreviewUrl({settings, tiers, siteData}: {
+function getPortalPreviewUrl({settings, tiers, siteData, selectedTab}: {
     settings: Setting[],
     tiers: Tier[],
-    siteData: SiteData
+    siteData: SiteData,
+    selectedTab: string
 }) {
     let portalTiers = tiers.filter((t) => {
         return t.visibility === 'public' && t.type === 'paid';
@@ -35,13 +37,17 @@ function getPortalPreviewUrl({settings, tiers, siteData}: {
     const portalButtonStyle = getSettingValue(settings, 'portal_button_style') as string;
     const signupCheckboxRequired = getSettingValue(settings, 'portal_signup_checkbox_required') as boolean;
     const portalSignupTermsHtml = getSettingValue(settings, 'portal_signup_terms_html') as string || '';
+    let page = 'signup';
+    if (selectedTab === 'account') {
+        page = 'accountHome';
+    }
 
     settingsParam.append('button', `${portalButton}`);
     settingsParam.append('name', `${portalName}`);
     settingsParam.append('isFree', `${isFreeChecked}`);
     settingsParam.append('isMonthly', `${isMonthlyChecked}`);
     settingsParam.append('isYearly', `${isYearlyChecked}`);
-    settingsParam.append('page', 'signup');
+    settingsParam.append('page', page);
     settingsParam.append('buttonIcon', encodeURIComponent(buttonIcon));
     settingsParam.append('signupButtonText', encodeURIComponent(signupButtonText));
     settingsParam.append('membersSignupAccess', 'true');
@@ -60,12 +66,12 @@ function getPortalPreviewUrl({settings, tiers, siteData}: {
         settingsParam.append('buttonStyle', encodeURIComponent(portalButtonStyle));
     }
 
-    settingsParam.append('disableBackground', 'true');
+    settingsParam.append('disableBackground', 'false');
 
     return `${baseUrl}${portalBase}?${settingsParam.toString()}`;
 }
 
-const PortalFrame: React.FC<PortalFrameProps> = ({settings, tiers}) => {
+const PortalFrame: React.FC<PortalFrameProps> = ({settings, tiers, selectedTab}) => {
     const {
         siteData
     } = useSettingGroup();
@@ -77,7 +83,8 @@ const PortalFrame: React.FC<PortalFrameProps> = ({settings, tiers}) => {
     let href = getPortalPreviewUrl({
         settings,
         tiers,
-        siteData
+        siteData,
+        selectedTab
     });
 
     return (
diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/PortalPreview.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/PortalPreview.tsx
index e1b643b1d3..c0dc9f6787 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/PortalPreview.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/PortalPreview.tsx
@@ -17,7 +17,11 @@ const PortalPreview: React.FC<PortalPreviewProps> = ({
 
     switch (selectedTab) {
     case 'account':
-        tabContents = <>Account preview</>;
+        tabContents = (
+            <>
+                <PortalFrame selectedTab={selectedTab} settings={localSettings} tiers={localTiers} />
+            </>
+        );
         break;
     case 'links':
         tabContents = <>Links</>;
@@ -25,7 +29,7 @@ const PortalPreview: React.FC<PortalPreviewProps> = ({
     default:
         tabContents = (
             <>
-                <PortalFrame settings={localSettings} tiers={localTiers} />
+                <PortalFrame selectedTab={selectedTab} settings={localSettings} tiers={localTiers} />
             </>
         );
         break;