From bc8c9b78e6e7a37047e4ec600fa367ff6dc06b6b Mon Sep 17 00:00:00 2001
From: Jono M <reason.koan@gmail.com>
Date: Mon, 16 Oct 2023 16:06:38 +0100
Subject: [PATCH] Fixed bugs with saving in portal modal (#18649)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

---

<!-- Leave the line below if you'd like GitHub Copilot to generate a
summary from your commit -->
<!--
copilot:summary
-->
### <samp>🤖 Generated by Copilot at 8ad5f58</samp>

This pull request enhances the portal modal component in the admin
settings for membership. It improves how it handles errors, saves
changes, and communicates with the user.
---
 .../settings/membership/portal/PortalModal.tsx   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/membership/portal/PortalModal.tsx b/apps/admin-x-settings/src/components/settings/membership/portal/PortalModal.tsx
index 5e80222798..5dccb08f66 100644
--- a/apps/admin-x-settings/src/components/settings/membership/portal/PortalModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/membership/portal/PortalModal.tsx
@@ -113,9 +113,9 @@ const PortalModal: React.FC = () => {
         if (verifyEmail) {
             checkToken({token: verifyEmail});
         }
-    }, [verifyEmail, verifyToken]);
+    }, [handleError, verifyEmail, verifyToken]);
 
-    const {formState, saveState, handleSave, updateForm} = useForm({
+    const {formState, setFormState, saveState, handleSave, updateForm} = useForm({
         initialState: {
             settings: settings as Dirtyable<Setting>[],
             tiers: tiers as Dirtyable<Tier>[]
@@ -123,8 +123,16 @@ const PortalModal: React.FC = () => {
 
         onSave: async () => {
             await Promise.all(formState.tiers.filter(({dirty}) => dirty).map(tier => editTier(tier)));
+            setFormState(state => ({...state, tiers: formState.tiers.map(tier => ({...tier, dirty: false}))}));
 
-            const {meta, settings: currentSettings} = await editSettings(formState.settings.filter(setting => setting.dirty));
+            const changedSettings = formState.settings.filter(setting => setting.dirty);
+
+            if (!changedSettings.length) {
+                return;
+            }
+
+            const {meta, settings: currentSettings} = await editSettings(changedSettings);
+            setFormState(state => ({...state, settings: formState.settings.map(setting => ({...setting, dirty: false}))}));
 
             if (meta?.sent_email_verification) {
                 const newEmail = formState.settings.find(setting => setting.key === 'members_support_address')?.value;
@@ -221,7 +229,7 @@ const PortalModal: React.FC = () => {
         title='Portal'
         onOk={async () => {
             if (!Object.values(errors).filter(Boolean).length) {
-                await handleSave();
+                await handleSave({force: true});
             }
         }}
         onSelectURL={onSelectURL}