From 741a00fe051e6fb2f627ece8736dba0ee918794d Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 9 Oct 2023 11:52:56 +0700
Subject: [PATCH] Fixed confirmation modals on Integrations - Admin X (#18534)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs
https://www.notion.so/ghost/AdminX-feedback-27fc7f549bbf4a53bfa2e7b6e5643963?p=39e45d28cd2643888b82d5e9cc0901a3&pm=s

- The logic was correct, but the string value from the API passed in
null when
  empty instead of an empty string.
- this takes a potential null into account to be able to make the
  condition comparison more reliable.

---

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

Fixed some issues with the state management and input handling of the
`AmpModal` and `FirstPromoterModal` components in the admin settings
app. These changes prevent errors and warnings when the integrations are
null, disabled, or unconfigured.
---
 .../settings/advanced/integrations/AmpModal.tsx           | 8 ++++----
 .../settings/advanced/integrations/FirstPromoterModal.tsx | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/AmpModal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/AmpModal.tsx
index 0a025131e5..ebab03c9e3 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/AmpModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/AmpModal.tsx
@@ -18,13 +18,13 @@ const AmpModal = NiceModal.create(() => {
     const [ampId] = getSettingValues<string>(settings, ['amp_gtag_id']);
     const modal = NiceModal.useModal();
     const [enabled, setEnabled] = useState(false);
-    const [trackingId, setTrackingId] = useState('');
+    const [trackingId, setTrackingId] = useState<string | null>('');
     const {mutateAsync: editSettings} = useEditSettings();
     const handleError = useHandleError();
 
     useEffect(() => {
         setEnabled(ampEnabled || false);
-        setTrackingId(ampId || '');
+        setTrackingId(ampId || null);
     }, [ampEnabled, ampId]);
 
     const handleSave = async () => {
@@ -44,7 +44,7 @@ const AmpModal = NiceModal.create(() => {
             afterClose={() => {
                 updateRoute('integrations');
             }}
-            dirty={enabled !== ampEnabled || trackingId !== ampId}
+            dirty={!(enabled === ampEnabled) || !(trackingId === ampId)}
             okColor='black'
             okLabel='Save & close'
             testId='amp-modal'
@@ -76,7 +76,7 @@ const AmpModal = NiceModal.create(() => {
                             hint='Tracks AMP traffic in Google Analytics'
                             placeholder='UA-XXXXXXX-X'
                             title='Google Analytics Tracking ID'
-                            value={trackingId}
+                            value={trackingId || ''}
                             onChange={(e) => {
                                 setTrackingId(e.target.value);
                             }}
diff --git a/apps/admin-x-settings/src/components/settings/advanced/integrations/FirstPromoterModal.tsx b/apps/admin-x-settings/src/components/settings/advanced/integrations/FirstPromoterModal.tsx
index f9a2bdae3c..9702648f41 100644
--- a/apps/admin-x-settings/src/components/settings/advanced/integrations/FirstPromoterModal.tsx
+++ b/apps/admin-x-settings/src/components/settings/advanced/integrations/FirstPromoterModal.tsx
@@ -19,7 +19,7 @@ const FirstpromoterModal = NiceModal.create(() => {
     const {mutateAsync: editSettings} = useEditSettings();
     const handleError = useHandleError();
 
-    const [accountId, setAccountId] = useState('');
+    const [accountId, setAccountId] = useState<string | null>('');
     const [enabled, setEnabled] = useState(false);
 
     const [firstPromoterEnabled] = getSettingValues<boolean>(settings, ['firstpromoter']);
@@ -27,7 +27,7 @@ const FirstpromoterModal = NiceModal.create(() => {
 
     useEffect(() => {
         setEnabled(firstPromoterEnabled || false);
-        setAccountId(firstPromoterId || '');
+        setAccountId(firstPromoterId || null);
     }, [firstPromoterEnabled, firstPromoterId]);
 
     const handleSave = async () => {
@@ -88,7 +88,7 @@ const FirstpromoterModal = NiceModal.create(() => {
                             </>}
                             placeholder='XXXXXXXX'
                             title='FirstPromoter account ID'
-                            value={accountId}
+                            value={accountId || ''}
                             onChange={(e) => {
                                 setAccountId(e.target.value);
                             }}