@flamingo-stack/openframe-frontend-core 0.0.203 → 0.0.204-snapshot.20260523020255

package/src/hooks/use-access-code-integration.ts

@@ -0,0 +1,107 @@
+'use client'
+
+/**
+ * Access Code Integration Hook
+ *
+ * React-side wrapper around the pure `access-code-client` utilities.
+ * Lives in `hooks/` (client bundle) so the `createContext()` call in
+ * `endpoints-runtime-context` doesn't get pulled into the server-safe
+ * `utils/index` bundle.
+ *
+ * The pure standalone functions (`validateAccessCode`,
+ * `consumeAccessCode`, `validateAndConsumeAccessCode`) remain importable
+ * from `@flamingo-stack/openframe-frontend-core/utils` — they take the
+ * endpoints object as an argument. This hook binds those endpoints from
+ * `EndpointsRuntimeContext` so React callers don't have to plumb URLs.
+ */
+
+import React from 'react'
+
+import { useRequiredEndpointsRuntime } from '../contexts/endpoints-runtime-context'
+import {
+  validateAccessCode,
+  consumeAccessCode,
+  validateAndConsumeAccessCode,
+} from '../utils/access-code-client'
+
+/**
+ * Resolves access-code endpoints from `EndpointsRuntimeContext` (throws
+ * if no provider is mounted) and exposes loading-state-aware wrappers
+ * around the standalone helpers in `utils/access-code-client`.
+ *
+ * @returns the following fields. The `validate` / `consume` /
+ *   `validateAndConsume` functions and the returned object identity are
+ *   NOT memoized — they're re-created each render. Wrap with
+ *   `useCallback` / `useMemo` at the call site if downstream effect
+ *   dep arrays depend on stable identities.
+ *   - `validate(email, code)`: validates only.
+ *   - `consume(email, code)`: consumes only.
+ *   - `validateAndConsume(email, code)`: one-step validate-then-consume.
+ *   - `isValidating: boolean`: a validate call is in flight.
+ *   - `isConsuming: boolean`: a consume call is in flight.
+ *   - `isProcessing: boolean`: convenience — `isValidating || isConsuming`.
+ *     Use this for a single "in-flight" indicator on UI affordances that
+ *     should disable during both phases.
+ *
+ * @example
+ * const { validate, consume, isProcessing } = useAccessCodeIntegration();
+ *
+ * const handleRegistration = async (formData) => {
+ *   const validation = await validate(formData.email, formData.accessCode);
+ *   if (!validation.valid) {
+ *     setError(validation.message);
+ *     return;
+ *   }
+ *
+ *   // Process registration...
+ *   const registrationResult = await registerUser(formData);
+ *
+ *   if (registrationResult.success) {
+ *     await consume(formData.email, formData.accessCode);
+ *   }
+ * };
+ */
+export function useAccessCodeIntegration() {
+  const runtime = useRequiredEndpointsRuntime()
+  const endpoints = runtime.accessCode
+  const [isValidating, setIsValidating] = React.useState(false)
+  const [isConsuming, setIsConsuming] = React.useState(false)
+
+  const validate = async (email: string, code: string) => {
+    setIsValidating(true)
+    try {
+      return await validateAccessCode(email, code, endpoints)
+    } finally {
+      setIsValidating(false)
+    }
+  }
+
+  const consume = async (email: string, code: string) => {
+    setIsConsuming(true)
+    try {
+      return await consumeAccessCode(email, code, endpoints)
+    } finally {
+      setIsConsuming(false)
+    }
+  }
+
+  const validateAndConsume = async (email: string, code: string) => {
+    setIsValidating(true)
+    setIsConsuming(true)
+    try {
+      return await validateAndConsumeAccessCode(email, code, endpoints)
+    } finally {
+      setIsValidating(false)
+      setIsConsuming(false)
+    }
+  }
+
+  return {
+    validate,
+    consume,
+    validateAndConsume,
+    isValidating,
+    isConsuming,
+    isProcessing: isValidating || isConsuming,
+  }
+}

package/src/hooks/use-contact-submission.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect } from 'react';
 import { useToast } from "./use-toast";
 import { useRouter } from 'next/navigation';
+import { useRequiredEndpointsRuntime } from '../contexts/endpoints-runtime-context';
 
 interface ContactSubmissionOptions {
   userId?: string;
@@ -44,6 +45,9 @@ export function useContactSubmission(options: ContactSubmissionOptions = {}) {
   const { userId, successRedirectUrl, successToastMessage, onSuccess } = options;
   const { toast } = useToast();
   const router = useRouter();
+  // Endpoint URL injected via context — hub provides hub default, embedded
+  // app provides its proxied path. Throws if no provider is mounted.
+  const { contactUrl } = useRequiredEndpointsRuntime();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
 
@@ -53,7 +57,7 @@ export function useContactSubmission(options: ContactSubmissionOptions = {}) {
     setIsSubmitting(true);
 
     try {
-      const response = await fetch('/api/contact', {
+      const response = await fetch(contactUrl, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ 
@@ -90,7 +94,7 @@ export function useContactSubmission(options: ContactSubmissionOptions = {}) {
     } finally {
       setIsSubmitting(false);
     }
-  }, [isSubmitting, toast, userId, successToastMessage]);
+  }, [isSubmitting, toast, userId, successToastMessage, contactUrl]);
 
   // Handle redirect after success
   useEffect(() => {

package/src/utils/access-code-client.ts

@@ -1,17 +1,32 @@
 /**
- * Access Code Client Utilities
+ * Access Code Client Utilities — pure standalone functions.
  *
- * Simple client-side utilities for integrating access code validation
- * and consumption into registration forms.
+ * Endpoint paths are NOT hardcoded — every function takes an
+ * `endpoints` argument. The React-side wrapper that binds them from
+ * `EndpointsRuntimeContext` lives separately at
+ * `hooks/use-access-code-integration.ts` (`useAccessCodeIntegration`).
+ *
+ * Keep this file **free of React imports** — it lives in the
+ * server-safe `utils/index` tsup bundle. Any module-top-level call
+ * into `createContext()` (which the runtime context file does) would
+ * be pulled into the server bundle and crash SSR with
+ * `createContext is not a function`.
  */
 
-import React from 'react';
 import {
   AccessCodeValidation,
   AccessCodeValidationResponse,
   AccessCodeConsumptionResponse
 } from '../types/access-code-cohorts';
 
+/** Endpoints required by the standalone client utilities. The
+ *  `useAccessCodeIntegration` hook (in `hooks/`) resolves these from
+ *  `EndpointsRuntimeContext.accessCode` automatically. */
+export interface AccessCodeEndpoints {
+  validateUrl: string
+  consumeUrl: string
+}
+
 /**
  * Validate an access code for a given email
  *
@@ -31,10 +46,11 @@ import {
  */
 export async function validateAccessCode(
   email: string,
-  code: string
+  code: string,
+  endpoints: AccessCodeEndpoints,
 ): Promise<AccessCodeValidationResponse> {
   try {
-    const response = await fetch('/api/validate-access-code', {
+    const response = await fetch(endpoints.validateUrl, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -77,10 +93,11 @@ export async function validateAccessCode(
  */
 export async function consumeAccessCode(
   email: string,
-  code: string
+  code: string,
+  endpoints: AccessCodeEndpoints,
 ): Promise<AccessCodeConsumptionResponse> {
   try {
-    const response = await fetch('/api/consume-access-code', {
+    const response = await fetch(endpoints.consumeUrl, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -125,17 +142,18 @@ export async function consumeAccessCode(
  */
 export async function validateAndConsumeAccessCode(
   email: string,
-  code: string
+  code: string,
+  endpoints: AccessCodeEndpoints,
 ): Promise<AccessCodeValidationResponse & { consumed?: boolean }> {
   // First validate
-  const validation = await validateAccessCode(email, code);
+  const validation = await validateAccessCode(email, code, endpoints);
 
   if (!validation.valid) {
     return validation;
   }
 
   // If valid, consume the code
-  const consumption = await consumeAccessCode(email, code);
+  const consumption = await consumeAccessCode(email, code, endpoints);
 
   return {
     ...validation,
@@ -146,67 +164,6 @@ export async function validateAndConsumeAccessCode(
   };
 }
 
-/**
- * Access Code Integration Hook (for React components)
- *
- * @example
- * const { validate, consume, isValidating, isConsuming } = useAccessCodeIntegration();
- *
- * const handleRegistration = async (formData) => {
- *   const validation = await validate(formData.email, formData.accessCode);
- *   if (!validation.valid) {
- *     setError(validation.message);
- *     return;
- *   }
- *
- *   // Process registration...
- *   const registrationResult = await registerUser(formData);
- *
- *   if (registrationResult.success) {
- *     await consume(formData.email, formData.accessCode);
- *   }
- * };
- */
-export function useAccessCodeIntegration() {
-  const [isValidating, setIsValidating] = React.useState(false);
-  const [isConsuming, setIsConsuming] = React.useState(false);
-
-  const validate = async (email: string, code: string) => {
-    setIsValidating(true);
-    try {
-      return await validateAccessCode(email, code);
-    } finally {
-      setIsValidating(false);
-    }
-  };
-
-  const consume = async (email: string, code: string) => {
-    setIsConsuming(true);
-    try {
-      return await consumeAccessCode(email, code);
-    } finally {
-      setIsConsuming(false);
-    }
-  };
-
-  const validateAndConsume = async (email: string, code: string) => {
-    setIsValidating(true);
-    setIsConsuming(true);
-    try {
-      return await validateAndConsumeAccessCode(email, code);
-    } finally {
-      setIsValidating(false);
-      setIsConsuming(false);
-    }
-  };
-
-  return {
-    validate,
-    consume,
-    validateAndConsume,
-    isValidating,
-    isConsuming,
-    isProcessing: isValidating || isConsuming,
-  };
-}
-
+// `useAccessCodeIntegration` (the React-side wrapper) lives in
+// `hooks/use-access-code-integration.ts`. It binds the endpoints from
+// `EndpointsRuntimeContext` so React callers don't have to plumb URLs.