AdminX Tiers welcome page (#18243)

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

- the Tier detail modal is missing the "Welcome page" field which is a
regression

---------

Co-authored-by: Jono Mingard <reason.koan@gmail.com>

apps/admin-x-settings/src/admin-x-ds/global/form/URLTextField.tsx

@@ -99,8 +99,9 @@ const formatUrl = (value: string, baseUrl?: string) => {
  */
 const URLTextField: React.FC<Omit<TextFieldProps, 'onChange'> & {
     baseUrl?: string;
+    transformPathWithoutSlash?: boolean;
     onChange: (value: string) => void;
-}> = ({baseUrl, value, onChange, ...props}) => {
+}> = ({baseUrl, value, transformPathWithoutSlash, onChange, ...props}) => {
     const [displayedUrl, setDisplayedUrl] = useState('');
 
     useEffect(() => {
@@ -108,10 +109,20 @@ const URLTextField: React.FC<Omit<TextFieldProps, 'onChange'> & {
     }, [value, baseUrl]);
 
     const updateUrl = () => {
-        const {save, display} = formatUrl(displayedUrl, baseUrl);
+        let urls = formatUrl(displayedUrl, baseUrl);
 
-        setDisplayedUrl(display);
-        onChange(save);
+        // If the user entered something like "bla", try to parse it as a relative URL
+        // If parsing as "/bla" results in a valid URL, use that instead
+        if (transformPathWithoutSlash && !urls.display.includes('//')) {
+            const candidate = formatUrl('/' + displayedUrl, baseUrl);
+
+            if (candidate.display.includes('//')) {
+                urls = candidate;
+            }
+        }
+
+        setDisplayedUrl(urls.display);
+        onChange(urls.save);
     };
 
     const handleFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {

apps/admin-x-settings/src/components/settings/membership/tiers/TierDetailModal.tsx

@@ -12,6 +12,7 @@ import SortableList from '../../../../admin-x-ds/global/SortableList';
 import TextField from '../../../../admin-x-ds/global/form/TextField';
 import TierDetailPreview from './TierDetailPreview';
 import Toggle from '../../../../admin-x-ds/global/form/Toggle';
+import URLTextField from '../../../../admin-x-ds/global/form/URLTextField';
 import handleError from '../../../../utils/handleError';
 import useForm from '../../../../hooks/useForm';
 import useRouting from '../../../../hooks/useRouting';
@@ -271,7 +272,15 @@ const TierDetailModalContent: React.FC<{tier?: Tier}> = ({tier}) => {
                                 />
                             </div>
                         </div>
-                        <TextField hint='Redirect to this URL after signup for premium membership' placeholder={siteData?.url} title='Welcome page' />
+                        <URLTextField
+                            baseUrl={siteData?.url}
+                            hint='Redirect to this URL after signup for premium membership'
+                            placeholder={siteData?.url}
+                            title='Welcome page'
+                            value={formState.welcome_page_url || ''}
+                            transformPathWithoutSlash
+                            onChange={value => updateForm(state => ({...state, welcome_page_url: value || null}))}
+                        />
                     </>)}
                 </Form>