Tidy invite delivery choices and align email fields

2026-09-06 22:38:17 +12:00
parent a32928b1c5
commit 212ac560ec
5 changed files with 92 additions and 26 deletions
@@ -1,5 +1,7 @@
 'use client'

+import InviteDeliveryChoice from '../../ui/InviteDeliveryChoice'
+
 import { useRouter } from 'next/navigation'
 import { useEffect, useMemo, useState } from 'react'
 import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'
@@ -1872,29 +1874,7 @@ export default function AdminInviteManagementPage() {
                      </div>
                    </header>
                    <div className="invite-flow-fields">
-                      <div className="invite-delivery-grid">
-                        <button
-                          type="button"
-                          className={inviteDeliveryMethod === 'manual' ? 'is-selected' : ''}
-                          onClick={() => {
-                            setInviteDeliveryMethod('manual')
-                            setInviteForm((current) => ({ ...current, recipient_email: '', message: '' }))
-                          }}
-                        >
-                          <span className="eyebrow">Manual</span>
-                          <strong>Give me a link</strong>
-                          <small>Magent creates the URL. You copy and share it yourself.</small>
-                        </button>
-                        <button
-                          type="button"
-                          className={inviteDeliveryMethod === 'email' ? 'is-selected' : ''}
-                          onClick={() => setInviteDeliveryMethod('email')}
-                        >
-                          <span className="eyebrow">Email</span>
-                          <strong>Send it for me</strong>
-                          <small>Magent emails the invitation and still gives you a copyable URL.</small>
-                        </button>
-                      </div>
+                      <InviteDeliveryChoice value={inviteDeliveryMethod} onChange={(method) => { setInviteDeliveryMethod(method); if (method === 'manual') setInviteForm((current) => ({ ...current, recipient_email: '', message: '' })) }} />

                      {inviteDeliveryMethod === 'manual' && (
                        <div className="invite-delivery-summary">
@@ -1904,7 +1884,7 @@ export default function AdminInviteManagementPage() {
                      )}

                      {inviteDeliveryMethod === 'email' && (
-                        <div className="invite-flow-field-grid">
+                        <div className="invite-flow-field-grid invite-delivery-fields">
                          <label>
                            <span>Recipient email</span>
                            <input