Wired FirstPromoter integration to AdminX (#17740)

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

- Wired up the FirstPromoter api to adminx
---

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

This pull request refactors the `FirstPromoterModal` component to use
hooks and helper functions, and adds a new end-to-end test file to
verify its functionality. The purpose of these changes is to improve the
code quality and the user experience of the FirstPromoter integration
feature.

apps/admin-x-settings/src/components/settings/advanced/integrations/FirstPromoterModal.tsx

@@ -4,20 +4,58 @@ import Modal from '../../../../admin-x-ds/global/modal/Modal';
 import NiceModal from '@ebay/nice-modal-react';
 import TextField from '../../../../admin-x-ds/global/form/TextField';
 import Toggle from '../../../../admin-x-ds/global/form/Toggle';
+import useRouting from '../../../../hooks/useRouting';
 import {ReactComponent as Icon} from '../../../../assets/icons/firstpromoter.svg';
-import {useState} from 'react';
+import {Setting, getSettingValues, useEditSettings} from '../../../../api/settings';
+import {useEffect, useState} from 'react';
+import {useGlobalData} from '../../../providers/GlobalDataProvider';
 
 const FirstpromoterModal = NiceModal.create(() => {
+    const {updateRoute} = useRouting();
     const modal = NiceModal.useModal();
+    
+    const {settings} = useGlobalData();
+    const {mutateAsync: editSettings} = useEditSettings();
+
+    const [accountId, setAccountId] = useState('');
     const [enabled, setEnabled] = useState(false);
 
+    const [firstPromoterEnabled] = getSettingValues<boolean>(settings, ['firstpromoter']);
+    const [firstPromoterId] = getSettingValues<string>(settings, ['firstpromoter_id']);
+
+    useEffect(() => {
+        setEnabled(firstPromoterEnabled || false);
+        setAccountId(firstPromoterId || '');
+    }, [firstPromoterEnabled, firstPromoterId]);
+
+    const handleSave = async () => {
+        const updates: Setting[] = [
+            {
+                key: 'firstpromoter',
+                value: enabled
+            },
+            {
+                key: 'firstpromoter_id',
+                value: accountId
+            }
+        ];
+
+        await editSettings(updates);
+    };
+
     return (
         <Modal
+            afterClose={() => {
+                updateRoute('integrations');
+            }}
             cancelLabel=''
             okColor='black'
             okLabel='Save'
+            testId='firstpromoter-modal'
             title=''
-            onOk={() => {
+            onOk={async () => {
+                await handleSave();
+                updateRoute('integrations');
                 modal.remove();
             }}
         >
@@ -29,6 +67,7 @@ const FirstpromoterModal = NiceModal.create(() => {
             <div className='mt-7'>
                 <Form marginBottom={false} title='FirstPromoter configuration' grouped>
                     <Toggle
+                        checked={enabled}
                         direction='rtl'
                         hint={<>Enable <a className='text-green' href="https://firstpromoter.com/?fpr=ghost&fp_sid=admin" rel="noopener noreferrer" target="_blank">FirstPromoter</a> for tracking referrals</>}
                         label='Enable FirstPromoter'
@@ -43,6 +82,10 @@ const FirstpromoterModal = NiceModal.create(() => {
                             </>}
                             placeholder='XXXXXXXX'
                             title='FirstPromoter account ID'
+                            value={accountId}
+                            onChange={(e) => {
+                                setAccountId(e.target.value);
+                            }}
                         />
                     )}
                 </Form>
@@ -51,4 +94,4 @@ const FirstpromoterModal = NiceModal.create(() => {
     );
 });
 
-export default FirstpromoterModal;
+export default FirstpromoterModal;

apps/admin-x-settings/test/e2e/advanced/integrations/firstPromoter.test.ts

@@ -0,0 +1,35 @@
+import {expect, test} from '@playwright/test';
+import {globalDataRequests, mockApi, updatedSettingsResponse} from '../../../utils/e2e';
+
+test.describe('First Promoter integration', async () => {
+    test('Supports toggling and filling in First Promoter integration', async ({page}) => {
+        const {lastApiRequests} = await mockApi({page, requests: {
+            ...globalDataRequests,
+            editSettings: {method: 'PUT', path: '/settings/', response: updatedSettingsResponse([
+                {key: 'firstpromoter', value: true},
+                {key: 'firstpromoter_id', value: '123456789'}
+            ])}
+        }});
+
+        await page.goto('/');
+        const section = page.getByTestId('integrations');
+        const fpElement = section.getByText('FirstPromoter').last();
+        await fpElement.hover();
+        await page.getByRole('button', {name: 'Configure'}).click();
+        const fpModal = page.getByTestId('firstpromoter-modal');
+        
+        const fpToggle = fpModal.getByRole('switch');
+        await fpToggle.click();
+        const input = fpModal.getByRole('textbox');
+        await input.fill('123456789');
+
+        await fpModal.getByRole('button', {name: 'Save'}).click();
+
+        expect(lastApiRequests.editSettings?.body).toEqual({
+            settings: [
+                {key: 'firstpromoter', value: true},
+                {key: 'firstpromoter_id', value: '123456789'}
+            ]
+        });
+    });
+});