✨ IVR: Implement admin IVR emulator

REUSE.toml

@@ -106,3 +106,9 @@ path = "packages/admin-portal/public/sql-wasm.wasm"
 precedence = "aggregate"
 SPDX-FileCopyrightText = ["", "2025 Sequent Tech <legal@sequentech.io>"]
 SPDX-License-Identifier = "MIT"
+
+[[annotations]]
+path = "packages/admin-portal/src/services/generated/ivr_emulator_wasm.d.ts"
+precedence = "aggregate"
+SPDX-FileCopyrightText = ["", "2026 Sequent Tech Inc <legal@sequentech.io>"]
+SPDX-License-Identifier = "AGPL-3.0-only"

packages/admin-portal/.prettierignore

@@ -47,4 +47,5 @@ src/gql/
 .github
 public/tinymce/
 public/intl-tel-input/
-public/sql-wasm.js
+public/sql-wasm.js
+src/services/generated/ivr_emulator_wasm.d.ts

packages/admin-portal/public/global-settings.json

@@ -4,6 +4,7 @@
     "ONLINE_VOTING_CLIENT_ID": "admin-portal",
     "KEYCLOAK_URL": "http://localhost:8090/",
     "HASURA_URL": "http://localhost:8080/v1/graphql",
+    "IVR_EMULATOR_BASE_URL": "/wasm/ivr_emulator_wasm",
     "APP_VERSION": "dev",
     "APP_HASH": "dev",
     "DEFAULT_EMAIL_SUBJECT": {"en": "Participate in {{election_event.name}}"},

packages/admin-portal/src/providers/IvrEmulatorContextProvider.tsx

@@ -0,0 +1,54 @@
+// SPDX-FileCopyrightText: 2026 Sequent Tech Inc <legal@sequentech.io>
+//
+// SPDX-License-Identifier: AGPL-3.0-only
+import React, {createContext, useContext, useEffect, useState} from "react"
+import {IvrEmulatorApi, IvrEmulatorError, loadIvrEmulator} from "@/services/IvrEmulator"
+import {SettingsContext} from "@/providers/SettingsContextProvider"
+
+export enum IvrApiStatus {
+    UNAVAILABLE = "unavailable",
+    LOADING = "loading",
+    READY = "ready",
+    ERROR = "error",
+}
+
+export interface IvrEmulatorContextType {
+    status: IvrApiStatus
+    api?: IvrEmulatorApi
+}
+
+export const IvrEmulatorContext = createContext<IvrEmulatorContextType | undefined>(undefined)
+export const IvrEmulatorContextProvider: React.FC<{children: React.ReactNode}> = ({children}) => {
+    const [status, setStatus] = useState<IvrApiStatus>(IvrApiStatus.LOADING)
+    const [api, setApi] = useState<IvrEmulatorApi | undefined>(undefined)
+    const {globalSettings} = useContext(SettingsContext)
+    const url = globalSettings.IVR_EMULATOR_BASE_URL
+        ? globalSettings.IVR_EMULATOR_BASE_URL
+        : "/wasm/ivr_emulator_wasm"
+
+    useEffect(() => {
+        loadIvrEmulator(url)
+            ?.then((resolvedApi) => {
+                setStatus(IvrApiStatus.READY)
+                setApi(resolvedApi)
+            })
+            .catch((e) => {
+                if (e instanceof IvrEmulatorError && e.operation === "fetch") {
+                    setStatus(IvrApiStatus.UNAVAILABLE)
+                } else {
+                    setStatus(IvrApiStatus.ERROR)
+                }
+            })
+    }, [])
+    const value = {status, api}
+
+    return <IvrEmulatorContext.Provider value={value}>{children}</IvrEmulatorContext.Provider>
+}
+
+export const useIvrEmulator = (): IvrEmulatorContextType => {
+    const emulator = useContext(IvrEmulatorContext)
+    if (!emulator) {
+        throw new Error("useIvrEmulator can't be used outside IvrEmulatorContext")
+    }
+    return emulator
+}

packages/admin-portal/src/providers/SettingsContextProvider.tsx

@@ -22,6 +22,7 @@ export interface GlobalSettings {
     PUBLIC_BUCKET_URL: string
     VOTING_PORTAL_URL: string
     RESULTS_PORTAL_URL: string
+    IVR_EMULATOR_BASE_URL: string
     ACTIVATE_MIRU_EXPORT: boolean
     CUSTOM_URLS_DOMAIN_NAME: string
 }
@@ -87,6 +88,7 @@ const defaultSettingsValues: SettingsContextValues = {
         PUBLIC_BUCKET_URL: "http://127.0.0.1:9002/public/",
         VOTING_PORTAL_URL: "http://localhost:3000",
         RESULTS_PORTAL_URL: "http://localhost:3004",
+        IVR_EMULATOR_BASE_URL: "/wasm/ivr_emulator_wasm",
         ACTIVATE_MIRU_EXPORT: false,
         CUSTOM_URLS_DOMAIN_NAME: "google.com",
     },

packages/admin-portal/src/resources/ElectionEvent/EditElectionEventIvr.tsx

@@ -9,7 +9,9 @@ import {IPermissions} from "@/types/keycloak"
 import {PhoneBlacklist} from "./PhoneBlacklist"
 import {IvrConfig} from "./IvrConfig"
 import {IvrPrompts} from "./IvrPrompts"
+import {IvrEmulator} from "./IvrEmulator"
 import {Box} from "@mui/material"
+import {IvrEmulatorContextProvider} from "@/providers/IvrEmulatorContextProvider"
 
 const ConfigTab: React.FC = () => (
     <Suspense fallback={<div>Loading...</div>}>
@@ -29,6 +31,14 @@ const PromptsTab: React.FC = () => (
     </Suspense>
 )
 
+const EmulatorTab: React.FC = () => (
+    <Suspense fallback={<div>Loading...</div>}>
+        <IvrEmulatorContextProvider>
+            <IvrEmulator />
+        </IvrEmulatorContextProvider>
+    </Suspense>
+)
+
 export const EditElectionEventIvr: React.FC = () => {
     const {t} = useTranslation()
     const authContext = useContext(AuthContext)
@@ -52,6 +62,11 @@ export const EditElectionEventIvr: React.FC = () => {
         })
     }
 
+    tabs.push({
+        label: "Emulator",
+        component: EmulatorTab,
+    })
+
     return (
         <Box sx={{margin: "-1.5rem 0 0 0"}}>
             <Tabs elements={tabs} />