@open-mercato/core 0.6.1-develop.3276.1.1fcd145078 → 0.6.1-develop.3287.1.450f4ffb56

package/src/modules/customer_accounts/api/password/reset-request.ts

@@ -2,6 +2,10 @@ import { NextResponse } from 'next/server'
 import { z } from 'zod'
 import type { OpenApiRouteDoc, OpenApiMethodDoc } from '@open-mercato/shared/lib/openapi'
 import { passwordResetRequestSchema } from '@open-mercato/core/modules/customer_accounts/data/validators'
+import {
+  resolveTenantContext,
+  TenantResolutionError,
+} from '@open-mercato/core/modules/customer_accounts/lib/resolveTenantContext'
 import { createRequestContainer } from '@open-mercato/shared/lib/di/container'
 import { CustomerUserService } from '@open-mercato/core/modules/customer_accounts/services/customerUserService'
 import { CustomerTokenService } from '@open-mercato/core/modules/customer_accounts/services/customerTokenService'
@@ -37,9 +41,17 @@ export async function POST(req: Request) {
     return NextResponse.json({ ok: true }) // Always 200 to prevent enumeration
   }
 
-  const { email, tenantId } = parsed.data
-  if (!tenantId) {
-    return NextResponse.json({ ok: true })
+  const { email } = parsed.data
+  let tenantId: string
+  try {
+    const context = await resolveTenantContext(req, parsed.data.tenantId)
+    tenantId = context.tenantId
+  } catch (err) {
+    if (err instanceof TenantResolutionError) {
+      // Always return 200 to avoid leaking whether a tenant exists for this host.
+      return NextResponse.json({ ok: true })
+    }
+    throw err
   }
 
   const container = await createRequestContainer()

package/src/modules/customer_accounts/api/signup.ts

@@ -21,6 +21,11 @@ import {
 import { readNormalizedEmailFromJsonRequest } from '@open-mercato/core/modules/customer_accounts/lib/rateLimitIdentifier'
 import { findOrganizationInTenant } from '@open-mercato/core/modules/customer_accounts/lib/organizationLookup'
 import { getSecurityEmailBaseUrl, mapSecurityEmailUrlError } from '@open-mercato/shared/lib/url'
+import {
+  resolveTenantContext,
+  TenantResolutionError,
+} from '@open-mercato/core/modules/customer_accounts/lib/resolveTenantContext'
+import { urlForCustomerOrg } from '@open-mercato/core/modules/customer_accounts/lib/customerUrl'
 
 export const metadata: { path?: string; requireAuth?: boolean } = { requireAuth: false }
 
@@ -63,9 +68,21 @@ export async function POST(req: Request) {
     return NextResponse.json({ ok: false, error: 'Validation failed', details: parsed.error.flatten().fieldErrors }, { status: 400 })
   }
 
-  const { email, password, displayName, tenantId, organizationId } = parsed.data
-  if (!tenantId || !organizationId) {
-    return NextResponse.json({ ok: false, error: 'tenantId and organizationId are required' }, { status: 400 })
+  const { email, password, displayName } = parsed.data
+  let tenantId: string
+  let organizationId: string | null
+  try {
+    const context = await resolveTenantContext(req, parsed.data.tenantId)
+    tenantId = context.tenantId
+    organizationId = context.organizationId ?? parsed.data.organizationId ?? null
+  } catch (err) {
+    if (err instanceof TenantResolutionError) {
+      return NextResponse.json({ ok: false, error: err.message }, { status: err.status })
+    }
+    throw err
+  }
+  if (!organizationId) {
+    return NextResponse.json({ ok: false, error: 'organizationId is required' }, { status: 400 })
   }
 
   let baseUrl: string
@@ -95,7 +112,14 @@ export async function POST(req: Request) {
   if (existing) {
     await bcryptCompare(password, TIMING_EQUALIZATION_HASH)
     const existingOrg = await findOrganizationInTenant(em, existing.organizationId, tenantId)
-    const loginUrl = resolvePortalLoginUrl(baseUrl, existingOrg?.slug ?? null)
+    // Prefer the org's active custom domain when available; fall back to the
+    // platform login URL preserved by `resolvePortalLoginUrl`.
+    let loginUrl = resolvePortalLoginUrl(baseUrl, existingOrg?.slug ?? null)
+    try {
+      loginUrl = await urlForCustomerOrg(existing.organizationId, '/login', { container })
+    } catch {
+      // Fall back to platform URL on any resolution issue.
+    }
     const subject = translate('customer_accounts.signup.existing.subject', 'You already have a portal account')
     const copy = {
       preview: translate('customer_accounts.signup.existing.preview', 'A sign-up attempt was made for an email that already has a portal account.'),
@@ -141,7 +165,14 @@ export async function POST(req: Request) {
   await em.persist(user).flush()
 
   const verificationToken = await customerTokenService.createEmailVerification(user.id, tenantId)
-  const verifyUrl = resolvePortalVerifyUrl(baseUrl, verificationToken, orgRow.slug)
+  let verifyUrl = resolvePortalVerifyUrl(baseUrl, verificationToken, orgRow.slug)
+  try {
+    verifyUrl = await urlForCustomerOrg(organizationId, `/verify?token=${encodeURIComponent(verificationToken)}`, {
+      container,
+    })
+  } catch {
+    // Fall back to the platform-derived URL on any resolution issue.
+  }
   const subject = translate('customer_accounts.signup.created.subject', 'Verify your portal account')
   const copy = {
     preview: translate('customer_accounts.signup.created.preview', 'Verify your portal account to finish sign-up.'),

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/Actions.tsx

@@ -0,0 +1,70 @@
+"use client"
+
+import * as React from 'react'
+import { ExternalLink, RefreshCw, Replace, Trash2 } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { DomainMappingRow } from './types'
+
+export type ActionsProps = {
+  mapping: DomainMappingRow
+  isReplacement: boolean
+  onCheckNow: () => void
+  onRetryTls: () => void
+  onChangeDomain: () => void
+  onRemove: () => void
+  busy?: boolean
+}
+
+export function DefaultActions({
+  mapping,
+  isReplacement,
+  onCheckNow,
+  onRetryTls,
+  onChangeDomain,
+  onRemove,
+  busy,
+}: ActionsProps) {
+  const t = useT()
+  const showCheckNow = mapping.status === 'pending' || mapping.status === 'dns_failed'
+  const showRetryTls = mapping.status === 'tls_failed' || mapping.status === 'verified'
+  const showTestDomain = mapping.status === 'active'
+  const showChangeDomain = mapping.status === 'active' && !isReplacement
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {showCheckNow ? (
+        <Button type="button" variant="outline" size="sm" onClick={onCheckNow} disabled={busy}>
+          <RefreshCw className="mr-1.5 h-4 w-4" aria-hidden />
+          {t('customer_accounts.domainMapping.verifyNow', 'Check Now')}
+        </Button>
+      ) : null}
+      {showRetryTls ? (
+        <Button type="button" variant="outline" size="sm" onClick={onRetryTls} disabled={busy}>
+          <RefreshCw className="mr-1.5 h-4 w-4" aria-hidden />
+          {t('customer_accounts.domainMapping.tls.retryButton', 'Retry SSL')}
+        </Button>
+      ) : null}
+      {showTestDomain ? (
+        <Button type="button" variant="outline" size="sm" asChild>
+          <a href={`https://${mapping.hostname}`} target="_blank" rel="noopener noreferrer">
+            <ExternalLink className="mr-1.5 h-4 w-4" aria-hidden />
+            {t('customer_accounts.domainMapping.preview', 'Test Domain')}
+          </a>
+        </Button>
+      ) : null}
+      {showChangeDomain ? (
+        <Button type="button" variant="outline" size="sm" onClick={onChangeDomain} disabled={busy}>
+          <Replace className="mr-1.5 h-4 w-4" aria-hidden />
+          {t('customer_accounts.domainMapping.changeDomain', 'Change Domain')}
+        </Button>
+      ) : null}
+      <Button type="button" variant="outline" size="sm" onClick={onRemove} disabled={busy}>
+        <Trash2 className="mr-1.5 h-4 w-4" aria-hidden />
+        {t('customer_accounts.domainMapping.removeDomain', 'Remove Domain')}
+      </Button>
+    </div>
+  )
+}
+
+export default DefaultActions

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/Diagnostics.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from 'react'
+import { AlertTriangle } from 'lucide-react'
+import { Alert, AlertTitle, AlertDescription } from '@open-mercato/ui/primitives/alert'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { DomainMappingRow } from './types'
+
+export type DiagnosticsProps = {
+  mapping: DomainMappingRow
+}
+
+export function DnsDiagnostics({ mapping }: DiagnosticsProps) {
+  const t = useT()
+  if (mapping.status !== 'dns_failed') return null
+  return (
+    <Alert variant="destructive">
+      <AlertTriangle className="h-4 w-4" aria-hidden />
+      <AlertTitle>
+        {t('customer_accounts.domainMapping.dns.diagnostics.title', 'DNS configuration issue')}
+      </AlertTitle>
+      <AlertDescription>
+        <div className="space-y-2">
+          {mapping.dnsFailureReason ? <p>{mapping.dnsFailureReason}</p> : null}
+          {mapping.cnameTarget ? (
+            <dl className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-xs">
+              <dt className="text-muted-foreground">
+                {t('customer_accounts.domainMapping.dns.diagnostics.expected', 'Expected target')}
+              </dt>
+              <dd className="font-mono">{mapping.cnameTarget}</dd>
+            </dl>
+          ) : null}
+        </div>
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+export function TlsDiagnostics({ mapping }: DiagnosticsProps) {
+  const t = useT()
+  if (mapping.status !== 'tls_failed') return null
+  return (
+    <Alert variant="warning">
+      <AlertTriangle className="h-4 w-4" aria-hidden />
+      <AlertTitle>
+        {t('customer_accounts.domainMapping.tls.diagnostics.title', 'SSL certificate issue')}
+      </AlertTitle>
+      <AlertDescription>
+        <div className="space-y-2">
+          {mapping.tlsFailureReason ? <p>{mapping.tlsFailureReason}</p> : null}
+          <p className="text-xs text-muted-foreground">
+            {t('customer_accounts.domainMapping.tls.diagnostics.retryCount', 'Retry attempts: {count}', {
+              count: String(mapping.tlsRetryCount),
+            })}
+          </p>
+          <p className="text-xs text-muted-foreground">
+            {t(
+              'customer_accounts.domainMapping.tls.diagnostics.operatorNote',
+              'We are retrying automatically. If this persists, contact platform support — your DNS is fine, this is on our side.',
+            )}
+          </p>
+        </div>
+      </AlertDescription>
+    </Alert>
+  )
+}

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/DnsConfig.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from 'react'
+import { Copy, Check } from 'lucide-react'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type DnsConfigProps = {
+  hostname: string | null
+  cnameTarget: string | null
+  aRecordTarget: string | null
+}
+
+function CopyButton({ value, label }: { value: string; label: string }) {
+  const t = useT()
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = React.useCallback(async () => {
+    if (typeof navigator === 'undefined' || !navigator.clipboard) return
+    await navigator.clipboard.writeText(value)
+    setCopied(true)
+    window.setTimeout(() => setCopied(false), 1500)
+  }, [value])
+
+  return (
+    <Button type="button" variant="ghost" size="sm" onClick={handleCopy} aria-label={label}>
+      {copied ? <Check className="h-4 w-4" aria-hidden /> : <Copy className="h-4 w-4" aria-hidden />}
+      <span className="ml-1.5 text-xs">
+        {copied
+          ? t('customer_accounts.domainMapping.copyTarget.copied', 'Copied')
+          : t('customer_accounts.domainMapping.copyTarget', 'Copy')}
+      </span>
+    </Button>
+  )
+}
+
+export function DefaultDnsConfig({ hostname, cnameTarget, aRecordTarget }: DnsConfigProps) {
+  const t = useT()
+  const exampleHost = hostname ?? t('customer_accounts.domainMapping.hostname.placeholder', 'e.g., shop.yourdomain.com')
+
+  return (
+    <div className="space-y-4 rounded-lg border bg-muted/20 p-4">
+      <div className="space-y-2">
+        <p className="text-sm font-medium text-foreground">
+          {t('customer_accounts.domainMapping.cnameInstruction', 'Add a CNAME record for {hostname} pointing to {target} in your DNS provider', {
+            hostname: exampleHost,
+            target: cnameTarget ?? '—',
+          })}
+        </p>
+        {cnameTarget ? (
+          <div className="flex items-center gap-2 rounded-md border bg-background px-3 py-2">
+            <code className="flex-1 truncate font-mono text-sm">{cnameTarget}</code>
+            <CopyButton value={cnameTarget} label={t('customer_accounts.domainMapping.copyTarget', 'Copy')} />
+          </div>
+        ) : null}
+      </div>
+      {aRecordTarget ? (
+        <div className="space-y-2">
+          <p className="text-sm text-muted-foreground">
+            {t('customer_accounts.domainMapping.aRecordInstruction', 'For an apex domain, add an A record for {hostname} pointing to {target}', {
+              hostname: exampleHost,
+              target: aRecordTarget,
+            })}
+          </p>
+          <div className="flex items-center gap-2 rounded-md border bg-background px-3 py-2">
+            <code className="flex-1 truncate font-mono text-sm">{aRecordTarget}</code>
+            <CopyButton value={aRecordTarget} label={t('customer_accounts.domainMapping.copyTarget', 'Copy')} />
+          </div>
+        </div>
+      ) : null}
+      <p className="text-xs text-muted-foreground">
+        {t('customer_accounts.domainMapping.propagationNote', 'DNS changes can take up to 48 hours to propagate. The system checks automatically — you\'ll be notified when it\'s ready.')}
+      </p>
+    </div>
+  )
+}
+
+export default DefaultDnsConfig

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/DomainPanel.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import * as React from 'react'
+import { useRegisteredComponent } from '@open-mercato/ui/backend/injection/useRegisteredComponent'
+import { Tag } from '@open-mercato/ui/primitives/tag'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { DefaultStepper, type StepperProps } from './Stepper'
+import { DefaultStatusBadge, type StatusBadgeSectionProps } from './StatusBadgeSection'
+import { DefaultDnsConfig, type DnsConfigProps } from './DnsConfig'
+import { DefaultActions, type ActionsProps } from './Actions'
+import { DnsDiagnostics, TlsDiagnostics } from './Diagnostics'
+import type { DomainMappingRow } from './types'
+
+export type DomainPanelProps = {
+  mapping: DomainMappingRow
+  isReplacement: boolean
+  cnameTarget: string | null
+  aRecordTarget: string | null
+  busy?: boolean
+  onCheckNow: () => void
+  onRetryTls: () => void
+  onChangeDomain: () => void
+  onRemove: () => void
+}
+
+export function DomainPanel(props: DomainPanelProps) {
+  const t = useT()
+  const Stepper = useRegisteredComponent<StepperProps>(
+    'section:customer_accounts.domain-settings:stepper',
+    DefaultStepper,
+  )
+  const StatusBadgeSection = useRegisteredComponent<StatusBadgeSectionProps>(
+    'section:customer_accounts.domain-settings:status',
+    DefaultStatusBadge,
+  )
+  const DnsConfig = useRegisteredComponent<DnsConfigProps>(
+    'section:customer_accounts.domain-settings:dns-config',
+    DefaultDnsConfig,
+  )
+  const Actions = useRegisteredComponent<ActionsProps>(
+    'section:customer_accounts.domain-settings:actions',
+    DefaultActions,
+  )
+
+  const { mapping, isReplacement, cnameTarget, aRecordTarget } = props
+  const showDnsConfig = mapping.status !== 'active'
+
+  return (
+    <section className="space-y-4 rounded-xl border bg-card p-6 shadow-sm">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="space-y-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h3 className="text-lg font-semibold tracking-tight">{mapping.hostname}</h3>
+            {isReplacement ? (
+              <Tag variant="info" dot>
+                {t('customer_accounts.domainMapping.replacement.label', 'Replacement (waiting to activate)')}
+              </Tag>
+            ) : null}
+          </div>
+          <StatusBadgeSection mapping={mapping} />
+        </div>
+      </div>
+
+      <Stepper status={mapping.status} />
+
+      <DnsDiagnostics mapping={mapping} />
+      <TlsDiagnostics mapping={mapping} />
+
+      {showDnsConfig ? (
+        <DnsConfig
+          hostname={mapping.hostname}
+          cnameTarget={mapping.cnameTarget ?? cnameTarget}
+          aRecordTarget={mapping.aRecordTarget ?? aRecordTarget}
+        />
+      ) : null}
+
+      <Actions
+        mapping={mapping}
+        isReplacement={isReplacement}
+        busy={props.busy}
+        onCheckNow={props.onCheckNow}
+        onRetryTls={props.onRetryTls}
+        onChangeDomain={props.onChangeDomain}
+        onRemove={props.onRemove}
+      />
+    </section>
+  )
+}
+
+export default DomainPanel

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/OrgSwitcher.tsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type OrgOption = {
+  id: string
+  label: string
+  depth: number
+}
+
+export type OrgSwitcherProps = {
+  options: OrgOption[]
+  selectedId: string | null
+  onChange: (next: string) => void
+}
+
+export function OrgSwitcher({ options, selectedId, onChange }: OrgSwitcherProps) {
+  const t = useT()
+  if (options.length <= 1) return null
+  return (
+    <label className="flex items-center gap-2 text-sm text-muted-foreground">
+      <span>{t('customer_accounts.domainMapping.orgSwitcher.label', 'Organization')}</span>
+      <select
+        className="h-9 rounded-md border border-input bg-background px-3 text-sm text-foreground shadow-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
+        value={selectedId ?? ''}
+        onChange={(event) => onChange(event.target.value)}
+      >
+        {options.map((opt) => {
+          const indent = opt.depth > 0 ? '  '.repeat(opt.depth) : ''
+          return (
+            <option key={opt.id} value={opt.id}>
+              {indent}
+              {opt.label}
+            </option>
+          )
+        })}
+      </select>
+    </label>
+  )
+}
+
+export default OrgSwitcher

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/RegisterDialog.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@open-mercato/ui/primitives/dialog'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { KbdShortcut } from '@open-mercato/ui/primitives/kbd'
+import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export type RegisterDialogProps = {
+  open: boolean
+  onOpenChange: (next: boolean) => void
+  mode: 'register' | 'change'
+  currentHostname?: string | null
+  onSubmit: (hostname: string) => Promise<void>
+  initialError?: string | null
+}
+
+const HOSTNAME_BASIC = /^[a-z0-9.-]+$/i
+
+export function RegisterDialog({
+  open,
+  onOpenChange,
+  mode,
+  currentHostname,
+  onSubmit,
+  initialError,
+}: RegisterDialogProps) {
+  const t = useT()
+  const [hostname, setHostname] = React.useState('')
+  const [error, setError] = React.useState<string | null>(initialError ?? null)
+  const [submitting, setSubmitting] = React.useState(false)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+
+  React.useEffect(() => {
+    if (!open) {
+      setHostname('')
+      setError(null)
+      setSubmitting(false)
+      return
+    }
+    setError(initialError ?? null)
+    window.setTimeout(() => inputRef.current?.focus(), 0)
+  }, [open, initialError])
+
+  const validate = React.useCallback(
+    (value: string): string | null => {
+      const trimmed = value.trim()
+      if (!trimmed) return t('customer_accounts.domainMapping.errors.required', 'Domain is required')
+      if (trimmed.length > 253) return t('customer_accounts.domainMapping.hostname.validation.invalid', 'Enter a valid domain name (no protocol, path, or port)')
+      if (trimmed.includes('://') || trimmed.includes('/') || trimmed.includes(':')) {
+        return t('customer_accounts.domainMapping.hostname.validation.invalid', 'Enter a valid domain name (no protocol, path, or port)')
+      }
+      if (!HOSTNAME_BASIC.test(trimmed) && !/^xn--/i.test(trimmed)) {
+        return t('customer_accounts.domainMapping.hostname.validation.invalid', 'Enter a valid domain name (no protocol, path, or port)')
+      }
+      return null
+    },
+    [t],
+  )
+
+  const handleSubmit = React.useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault()
+      const validation = validate(hostname)
+      if (validation) {
+        setError(validation)
+        return
+      }
+      setSubmitting(true)
+      setError(null)
+      try {
+        await onSubmit(hostname.trim())
+      } catch (err) {
+        const message = err instanceof Error ? err.message : 'Submission failed'
+        setError(message)
+      } finally {
+        setSubmitting(false)
+      }
+    },
+    [hostname, onSubmit, validate],
+  )
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLFormElement>) => {
+      if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+        event.preventDefault()
+        handleSubmit(event)
+      }
+    },
+    [handleSubmit],
+  )
+
+  const title =
+    mode === 'change'
+      ? t('customer_accounts.domainMapping.dialog.change.title', 'Change custom domain')
+      : t('customer_accounts.domainMapping.dialog.register.title', 'Register custom domain')
+
+  const description =
+    mode === 'change' && currentHostname
+      ? t(
+          'customer_accounts.domainMapping.changeDomain.description',
+          'Your current domain ({hostname}) will stay active until the new domain is fully set up. No downtime for your customers.',
+          { hostname: currentHostname },
+        )
+      : t('customer_accounts.domainMapping.description', 'Map your own domain to the customer portal')
+
+  const submitLabel =
+    mode === 'change'
+      ? t('customer_accounts.domainMapping.dialog.change.submit', 'Start replacement')
+      : t('customer_accounts.domainMapping.dialog.register.submit', 'Register')
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={handleSubmit} onKeyDown={handleKeyDown}>
+          <div className="space-y-2">
+            <Label htmlFor="custom-domain-hostname">
+              {t('customer_accounts.domainMapping.hostname.label', 'Domain')}
+            </Label>
+            <Input
+              id="custom-domain-hostname"
+              ref={inputRef}
+              value={hostname}
+              autoComplete="off"
+              spellCheck={false}
+              placeholder={t('customer_accounts.domainMapping.hostname.placeholder', 'e.g., shop.yourdomain.com')}
+              onChange={(event) => {
+                setHostname(event.target.value)
+                if (error) setError(null)
+              }}
+              aria-invalid={error ? true : undefined}
+              disabled={submitting}
+            />
+            {error ? (
+              <p className="text-sm text-status-error-text" role="alert">
+                {error}
+              </p>
+            ) : null}
+          </div>
+          <DialogFooter className="items-center">
+            <span className="hidden text-xs text-muted-foreground sm:inline-flex sm:items-center sm:gap-1">
+              <KbdShortcut keys={['⌘', 'Enter']} />
+            </span>
+            <Button
+              type="button"
+              variant="ghost"
+              size="default"
+              onClick={() => onOpenChange(false)}
+              disabled={submitting}
+            >
+              {t('customer_accounts.domainMapping.dialog.cancel', 'Cancel')}
+            </Button>
+            <Button type="submit" size="default" disabled={submitting}>
+              {submitting ? <Spinner className="mr-2 h-4 w-4" /> : null}
+              {submitLabel}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export default RegisterDialog