AlertModal

import SwiftUI
import EandTokens

// V1.2 alert-modal is a success screen, not a dialog. Full-screen on surface/base/default
// (or a bottom sheet over the Scrim): close (top-end, glass) → visual → centred title
// block padded 32/16/48 → footer padded 20.
struct AlertModal<Visual: View, Footer: View>: View {
  let title: String; let description: String
  var onClose: () -> Void
  @ViewBuilder var visual: Visual
  @ViewBuilder var footer: Footer
  var body: some View {
    VStack(spacing: 0) {
      HStack { Spacer(); CloseLink(glass: true, action: onClose) }   // 40pt section-link
        .padding([.top, .horizontal], EandSpacing.xl)
      visual.padding([.top, .horizontal], EandSpacing.xs)
      VStack(spacing: EandSpacing.xs) {
        Text(title)                    // typography/heading/lg variables: 28 / 120%, bold
          .font(.system(size: EandTypography.headingXl.size, weight: .bold))
        Text(description).font(.system(size: EandTypography.bodyLg.size))
      }
      .multilineTextAlignment(.center)
      .foregroundColor(EandColor.textDefaultDefault)
      .padding(.top, EandSpacing.spacing3xl).padding(.horizontal, EandSpacing.lg)
      .padding(.bottom, EandSpacing.spacing5xl)
      Spacer(minLength: 0)
      footer.padding(EandSpacing.xl)
    }
    .background(EandColor.surfaceBaseDefault.ignoresSafeArea())
  }
}

When to use

• Use at the end of a flow, when the outcome deserves its own screen: an order placed, a plan changed, a payment completed. Use bottom-sheet when the user should keep sight of the page behind.
• Don't use to ask for confirmation before an action: in V1.2 this is an outcome screen, not a confirmation dialog. For an outcome inside a section or sheet, use PageTitle. For a brief confirmation, use Snackbar.

Anatomy

• Integration — full-screen (default) fills the viewport on surface/base/default and scrolls. bottom-sheet places the same content on a sheet with 24px top corners, over a Scrim.
• Visual — visual, the hero illustration, framed with a 4px inset.
• Title block — title in bold 28px and description in body/lg, both centred.
• Footer — footer, usually one or two block Buttons.
• Close — onClose shows a glass close button at the top end. On the bottom sheet, a scrim click also calls it.

<AlertModal
  integration="bottom-sheet"
  visual={<img src={banner} alt="" />}
  title="You're all set"
  description="Your new plan starts today."
  footer={<Button block onClick={done}>Done</Button>}
  onClose={done}
/>

Props

Design

Figma source: alert-modal — etisalat Consumer App DSL V1.2

• Title block (alert-title): padding 32/16/48 (spacing/3xl, spacing/lg, spacing/5xl), gap 4 (spacing/xs). The title binds the typography/heading/lg variables: bold 28px, 120%, tight tracking.
• Footer padding 20 (spacing/xl). The close button sits 20px from the top and end, on section-link/glass/default with a 20px blur.
• The bottom sheet's top corners are 24px (border-radius/8).
• Figma's status-banner illustrations are not shipped with the library; supply your own artwork through visual.