@pixelated-tech/components 3.14.4 → 3.15.0

package/dist/components/integrations/wordpress.functions.js

@@ -1,7 +1,6 @@
 import PropTypes from "prop-types";
-// const wpSite = "pixelatedviews.wordpress.com";
-// const wpSite = "19824045";
-// const wpSite = "blog.pixelated.tech";
+import { smartFetch } from '../general/smartfetch';
+import { buildUrl } from '../general/urlbuilder';
 const wpApiURL = "https://public-api.wordpress.com/rest/v1/sites/";
 const wpCategoriesPath = "/categories";
 /**
@@ -28,17 +27,16 @@ export async function getWordPressItems(props) {
     while (true) {
         const remaining = requested ? Math.max(requested - posts.length, 0) : 100;
         const number = Math.min(remaining || 100, 100);
-        const wpPostsURL = `${baseURL}${props.site}/posts?number=${number}&page=${page}`;
+        const wpPostsURL = buildUrl({
+            baseUrl: baseURL,
+            pathSegments: [props.site, 'posts'],
+            params: { number, page },
+        });
         try {
-            // const response = await fetch(wpPostsURL);
-            const response = await fetch(wpPostsURL, {
-                // cache the HTTP response and mark it with a tag so it can be
-                // invalidated independently of the page cache.
-                cache: 'force-cache',
-                next: { revalidate: 60 * 60 * 24 * 7, tags: [tag] }, // revalidate once per week
+            const data = await smartFetch(wpPostsURL, {
+                nextCache: { revalidate: 60 * 60 * 24 * 7 }, // revalidate once per week
+                timeout: 30000,
             });
-            // -> "HIT" or "MISS" (or "REVALIDATED" etc.)
-            const data = await response.json();
             const batch = Array.isArray(data.posts) ? data.posts : [];
             if (batch.length === 0) {
                 break; // no more posts
@@ -88,12 +86,13 @@ export async function getWordPressItems(props) {
  */
 export async function getWordPressLastModified(props) {
     const { baseURL = wpApiURL } = props;
-    const url = `${baseURL}${props.site}/posts?number=1&fields=modified`;
+    const url = buildUrl({
+        baseUrl: baseURL,
+        pathSegments: [props.site, 'posts'],
+        params: { number: 1, fields: 'modified' },
+    });
     try {
-        const res = await fetch(url);
-        if (!res.ok)
-            return null;
-        const data = await res.json();
+        const data = await smartFetch(url, {});
         const modified = Array.isArray(data.posts) && data.posts[0]?.modified;
         return modified || null;
     }
@@ -169,8 +168,7 @@ export async function getWordPressCategories(props) {
     const wpCategoriesURL = baseURL + props.site + wpCategoriesPath;
     const categories = [];
     try {
-        const response = await fetch(wpCategoriesURL);
-        const data = await response.json();
+        const data = await smartFetch(wpCategoriesURL, {});
         // Check for total pages on the first page
         const myCategories = data.categories.map((category) => (category.name));
         categories.push(...myCategories);

package/dist/components/integrations/yelp.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import PropTypes from 'prop-types';
+import { smartFetch } from '../general/smartfetch';
 /*
 NOTE : development has stopped for this component
 as Yelp Base API Access costs $229 per month.
@@ -34,15 +35,13 @@ export function YelpReviews(props) {
             const apiKey = 'YOUR_YELP_API_KEY';
             const url = `https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/${props.businessID}/reviews`;
             try {
-                const response = await fetch(url, {
-                    headers: {
-                        Authorization: `Bearer ${apiKey}`,
+                const data = await smartFetch(url, {
+                    requestInit: {
+                        headers: {
+                            Authorization: `Bearer ${apiKey}`,
+                        },
                     },
                 });
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                const data = await response.json();
                 setReviews(data.reviews);
                 setLoading(false);
             }

package/dist/components/shoppingcart/ebay.functions.js

@@ -2,6 +2,8 @@ import PropTypes from "prop-types";
 import { getCloudinaryRemoteFetchURL as getImg } from "../integrations/cloudinary";
 import { CacheManager } from "../general/cache-manager";
 import { getDomain } from "../general/utilities";
+import { smartFetch } from "../general/smartfetch";
+import { buildUrl } from "../general/urlbuilder";
 const debug = false;
 // Initialize eBay Cache (Session storage, 1 hour TTL) — isolated per domain
 const ebayCache = new CacheManager({
@@ -118,21 +120,19 @@ export function getEbayAppToken(props) {
         if (debug)
             console.log("Fetching Token");
         try {
-            const response = await fetch(apiProps.proxyURL + apiProps.baseTokenURL, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                    'Authorization': 'Basic ' + btoa(`${apiProps.appId}:${apiProps.appCertId}`) // Base64 encoded
-                },
-                body: new URLSearchParams({
-                    grant_type: 'client_credentials',
-                    scope: apiProps.tokenScope
-                })
+            const data = await smartFetch(apiProps.proxyURL + apiProps.baseTokenURL, {
+                requestInit: {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                        'Authorization': 'Basic ' + btoa(`${apiProps.appId}:${apiProps.appCertId}`) // Base64 encoded
+                    },
+                    body: new URLSearchParams({
+                        grant_type: 'client_credentials',
+                        scope: apiProps.tokenScope
+                    })
+                }
             });
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
             const accessToken = data.access_token;
             if (debug)
                 console.log("Fetched eBay Access Token:", accessToken);
@@ -172,19 +172,20 @@ export function getEbayBrowseSearch(props) {
         if (debug)
             console.log("Fetching ebay API Browse Search Data");
         try {
-            const response = await fetch(apiProps.proxyURL + encodeURIComponent(fullURL), {
-                method: 'GET',
-                headers: {
-                    'Authorization': 'Bearer ' + token,
-                    'X-EBAY-C-MARKETPLACE-ID': 'EBAY_US',
-                    'X-EBAY-C-ENDUSERCTX': 'affiliateCampaignId=<ePNCampaignId>,affiliateReferenceId=<referenceId>',
-                    'X-EBAY-SOA-SECURITY-APPNAME': 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe',
+            const data = await smartFetch(buildUrl({
+                baseUrl: fullURL,
+                proxyUrl: apiProps.proxyURL,
+            }), {
+                requestInit: {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': 'Bearer ' + token,
+                        'X-EBAY-C-MARKETPLACE-ID': 'EBAY_US',
+                        'X-EBAY-C-ENDUSERCTX': 'affiliateCampaignId=<ePNCampaignId>,affiliateReferenceId=<referenceId>',
+                        'X-EBAY-SOA-SECURITY-APPNAME': 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe',
+                    }
                 }
             });
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
             if (debug)
                 console.log("Fetched eBay API Browse Search Data:", data);
             // Store in Cache
@@ -225,19 +226,20 @@ export function getEbayBrowseItem(props) {
         if (debug)
             console.log("Fetching ebay API Browse Item Data");
         try {
-            const response = await fetch(apiProps.proxyURL + encodeURIComponent(fullURL), {
-                method: 'GET',
-                headers: {
-                    'Authorization': 'Bearer ' + token,
-                    'X-EBAY-C-MARKETPLACE-ID': 'EBAY_US',
-                    'X-EBAY-C-ENDUSERCTX': 'affiliateCampaignId=<ePNCampaignId>,affiliateReferenceId=<referenceId>',
-                    'X-EBAY-SOA-SECURITY-APPNAME': 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe',
+            const data = await smartFetch(buildUrl({
+                baseUrl: fullURL,
+                proxyUrl: apiProps.proxyURL,
+            }), {
+                requestInit: {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': 'Bearer ' + token,
+                        'X-EBAY-C-MARKETPLACE-ID': 'EBAY_US',
+                        'X-EBAY-C-ENDUSERCTX': 'affiliateCampaignId=<ePNCampaignId>,affiliateReferenceId=<referenceId>',
+                        'X-EBAY-SOA-SECURITY-APPNAME': 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe',
+                    }
                 }
             });
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
             if (debug)
                 console.log("Fetched eBay Item Data:", data);
             // Store in Cache
@@ -269,14 +271,30 @@ export function getEbayRateLimits(props) {
         if (debug)
             console.log("Fetching all eBay API Rate Limits");
         try {
+            const rateLimitUrl = buildUrl({
+                baseUrl: apiProps.baseAnalyticsURL,
+                pathSegments: ['rate_limit'],
+                proxyUrl: apiProps.proxyURL,
+            });
+            const userRateLimitUrl = buildUrl({
+                baseUrl: apiProps.baseAnalyticsURL,
+                pathSegments: ['user_rate_limit'],
+                proxyUrl: apiProps.proxyURL,
+            });
             const [rateLimitRes, userRateLimitRes] = await Promise.all([
-                fetch(apiProps.proxyURL + encodeURIComponent(apiProps.baseAnalyticsURL + '/rate_limit'), {
-                    method: 'GET',
-                    headers: { 'Authorization': 'Bearer ' + token }
+                smartFetch(rateLimitUrl, {
+                    responseType: 'ok',
+                    requestInit: {
+                        method: 'GET',
+                        headers: { 'Authorization': 'Bearer ' + token }
+                    }
                 }),
-                fetch(apiProps.proxyURL + encodeURIComponent(apiProps.baseAnalyticsURL + '/user_rate_limit'), {
-                    method: 'GET',
-                    headers: { 'Authorization': 'Bearer ' + token }
+                smartFetch(userRateLimitUrl, {
+                    responseType: 'ok',
+                    requestInit: {
+                        method: 'GET',
+                        headers: { 'Authorization': 'Bearer ' + token }
+                    }
                 })
             ]);
             if (!rateLimitRes.ok || !userRateLimitRes.ok) {
@@ -371,19 +389,17 @@ export function getEbayItemsSearch(props) {
         if (debug)
             console.log("Fetching ebay API Items Search Data");
         try {
-            const response = await fetch(apiProps.proxyURL + encodeURIComponent(fullURL), {
-                method: 'GET',
-                headers: {
-                    'Authorization': 'Bearer ' + token,
-                    'X-EBAY-C-MARKETPLACE-ID': 'EBAY_US',
-                    'X-EBAY-C-ENDUSERCTX': 'affiliateCampaignId=<ePNCampaignId>,affiliateReferenceId=<referenceId>',
-                    'X-EBAY-SOA-SECURITY-APPNAME': 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe',
+            const data = await smartFetch(apiProps.proxyURL + encodeURIComponent(fullURL), {
+                requestInit: {
+                    method: 'GET',
+                    headers: {
+                        'Authorization': 'Bearer ' + token,
+                        'X-EBAY-C-MARKETPLACE-ID': 'EBAY_US',
+                        'X-EBAY-C-ENDUSERCTX': 'affiliateCampaignId=<ePNCampaignId>,affiliateReferenceId=<referenceId>',
+                        'X-EBAY-SOA-SECURITY-APPNAME': 'BrianWha-Pixelate-PRD-1fb4458de-1a8431fe',
+                    }
                 }
             });
-            if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const data = await response.json();
             // Store in Cache
             ebayCache.set(cacheKey, data);
             return data;

package/dist/components/shoppingcart/shoppingcart.components.js

@@ -6,7 +6,7 @@ import { PayPal } from "./paypal";
 import { CalloutHeader } from "../general/callout";
 import { FormEngine } from "../sitebuilder/form/formengine";
 import { FormButton } from '../sitebuilder/form/formcomponents';
-import { emailJSON } from "../sitebuilder/form/formemailer";
+import { emailJSON } from "../sitebuilder/form/formsubmit";
 import '../sitebuilder/form/form.css';
 import { MicroInteractions } from '../general/microinteractions';
 import { Modal, handleModalOpen } from '../general/modal';

package/dist/components/sitebuilder/config/google-fonts.js

@@ -3,6 +3,8 @@
  * Fetches and caches Google Fonts data for use in visual design forms
  */
 import { getFullPixelatedConfig } from '../../config/config';
+import { smartFetch } from '../../general/smartfetch';
+import { buildUrl } from '../../general/urlbuilder';
 // Cache for Google Fonts data
 let fontsCache = null;
 let cacheTimestamp = 0;
@@ -46,11 +48,12 @@ export async function fetchGoogleFonts() {
         return [];
     }
     try {
-        const response = await fetch(`https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`);
-        if (!response.ok) {
-            throw new Error(`Google Fonts API error: ${response.status}`);
-        }
-        const data = await response.json();
+        const url = buildUrl({
+            baseUrl: 'https://www.googleapis.com',
+            pathSegments: ['webfonts', 'v1', 'webfonts'],
+            params: { key: apiKey, sort: 'popularity' }
+        });
+        const data = await smartFetch(url);
         // Cache the results
         fontsCache = data.items;
         cacheTimestamp = Date.now();
@@ -99,7 +102,11 @@ export function generateGoogleFontsUrl(fonts) {
     const fontParam = cleanFonts
         .map(font => font.replace(/\s+/g, '+'))
         .join('|');
-    return `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
+    return buildUrl({
+        baseUrl: 'https://fonts.googleapis.com',
+        pathSegments: ['css2'],
+        params: { family: fontParam, display: 'swap' }
+    });
 }
 /**
  * Generate HTML link tag for Google Fonts

package/dist/components/sitebuilder/form/formbuilder.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import PropTypes from 'prop-types';
 import * as FC from './formcomponents';
-import { mapTypeToComponent, generateTypeField } from './formutils';
+import { mapTypeToComponent, generateTypeField } from './formengineutilities';
 import { FormEngine } from './formengine';
 const debug = false;
 /* =====  FORM BUILDER =====

package/dist/components/sitebuilder/form/formengine.js

@@ -4,6 +4,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { generateKey } from '../../general/utilities';
 import { FormValidationProvider, useFormValidation } from './formvalidator';
+import { FormSubmitWrapper, useFormSubmitContext } from './formsubmit';
 import * as FC from './formcomponents';
 import { CompoundFontSelector } from '../config/CompoundFontSelector';
 import { FontSelector } from '../config/FontSelector';
@@ -19,26 +20,34 @@ Generate all the elements to display a form */
 /**
  * FormEngine — Render a form defined by a JSON `formData` schema. Converts `formData.fields` to React components and manages submission handling and validation.
  *
- * @param {string} [props.name] - Form HTML name attribute.
- * @param {string} [props.id] - Form HTML id attribute.
+ * Can be used in two ways:
+ * 1. JSON-driven (recommended): formData.properties defines form behavior. Wrap in FormSubmitWrapper or use alone (defaults apply)
+ * 2. Code-driven (backwards compatible): Pass name, id, onSubmitHandler as props
+ *
+ * @param {string} [props.name] - Form HTML name attribute. Falls back to formData.properties.name
+ * @param {string} [props.id] - Form HTML id attribute. Falls back to formData.properties.id
  * @param {string} [props.method] - HTTP method for form submission (default: 'post').
  * @param {function} [props.onSubmitHandler] - Optional submit handler invoked with the submit event.
- * @param {object} [props.formData] - JSON schema describing fields (object with `fields` array).
+ * @param {object} [props.formData] - JSON schema describing fields (object with `fields` array and optional `properties` object).
  */
 FormEngine.propTypes = {
-    /** Form name attribute */
+    /** Form name attribute. Falls back to formData.properties.name */
     name: PropTypes.string,
-    /** Form id attribute */
+    /** Form id attribute. Falls back to formData.properties.id */
     id: PropTypes.string,
     /** HTTP method (e.g., 'post') */
     method: PropTypes.string,
-    /** Submit handler called when the form is valid and submitted */
+    /** Submit handler called when the form is valid and submitted. Falls back to FormSubmitWrapper context if available */
     onSubmitHandler: PropTypes.func,
-    /** JSON schema describing form fields */
+    /** JSON schema describing form fields and submission properties */
     formData: PropTypes.object.isRequired
 };
 export function FormEngine(props) {
-    return (_jsx(FormValidationProvider, { children: _jsx(FormEngineInner, { ...props }) }));
+    // Check if form should use internal FormSubmitWrapper
+    const hasJsonProperties = props.formData?.properties;
+    const hasNoSubmitHandler = !props.onSubmitHandler;
+    const shouldUseFormSubmitWrapper = hasJsonProperties && hasNoSubmitHandler;
+    return (_jsx(FormValidationProvider, { children: shouldUseFormSubmitWrapper ? (_jsx(FormSubmitWrapper, { ...props.formData.properties, children: _jsx(FormEngineInner, { ...props }) })) : (_jsx(FormEngineInner, { ...props })) }));
 }
 /**
  * FormEngineInner — Internal implementation of the `FormEngine` that renders the generated fields and handles form submit/validation.
@@ -63,12 +72,28 @@ FormEngineInner.propTypes = {
 };
 function FormEngineInner(props) {
     const { validateAllFields } = useFormValidation();
+    // Try to get handleSubmit from FormSubmitWrapper context
+    let contextSubmitHandler;
+    try {
+        const context = useFormSubmitContext();
+        contextSubmitHandler = context?.handleSubmit;
+    }
+    catch (e) {
+        // Not inside FormSubmitWrapper - use provided handler
+    }
     function generateFormProps(props) {
         // GENERATE PROPS TO RENDER THE FORM CONTAINER, INTERNAL FUNCTION
         if (debug)
             console.log("Generating Form Props");
         // Create a clean copy without non-serializable properties
         const { formData, onSubmitHandler, ...formProps } = props;
+        // Extract name/id from properties with fallback to props
+        if (!formProps.name && formData?.properties?.name) {
+            formProps.name = formData.properties.name;
+        }
+        if (!formProps.id && formData?.properties?.id) {
+            formProps.id = formData.properties.id;
+        }
         // Safety: default to POST to avoid accidental GET navigation (prevents query leakage)
         if (!formProps.method)
             formProps.method = 'post';
@@ -127,8 +152,10 @@ function FormEngineInner(props) {
             // Form has validation errors, don't submit
             return false;
         }
-        if (props.onSubmitHandler)
-            props.onSubmitHandler(event);
+        // Try context handler first (from FormSubmitWrapper), then props handler
+        const handler = contextSubmitHandler || props.onSubmitHandler;
+        if (handler)
+            handler(event);
         return true;
     }
     return (_jsx("form", { ...generateFormProps(props), onSubmit: (event) => { handleSubmit(event); }, suppressHydrationWarning: true, children: generateNewFields(props) }));

package/dist/components/sitebuilder/form/formsubmit.js

@@ -0,0 +1,205 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { ToggleLoading } from '../../general/loading';
+import { handleModalOpen } from '../../general/modal';
+import { Loading } from '../../general/loading';
+import { Modal } from '../../general/modal';
+import { smartFetch } from '../../general/smartfetch';
+export async function emailFormData(e, callback) {
+    const debug = false;
+    // const sendmail_api = "https://nlbqdrixmj.execute-api.us-east-2.amazonaws.com/default/sendmail";
+    const sendmail_api = "https://sendmail.pixelated.tech/default/sendmail";
+    const target = e.target;
+    const myform = document.getElementById(target.id);
+    e.preventDefault?.();
+    const myFormData = {};
+    const formData = new FormData(myform);
+    for (const [key, value] of formData.entries()) {
+        myFormData[key] = value;
+    }
+    const hpField = myform?.elements.namedItem('winnie');
+    const hpFieldVal = hpField?.value.toString();
+    // If either DOM or FormData indicate a filled honeypot, silently drop the submission.
+    if ((hpField && hpFieldVal.trim())) {
+        // Prevent native navigation where possible and mirror success path.
+        try {
+            e?.preventDefault?.();
+        }
+        catch (err) {
+            if (debug)
+                console.debug('preventDefault failed in honeypot guard', err);
+        }
+        if (debug)
+            console.info('honeypot triggered — dropping submit');
+        callback?.(e);
+        return { success: true, response: null };
+    }
+    myFormData.Date = new Date().toLocaleDateString();
+    myFormData.Status = "Submitted";
+    const startTime = new Date().toISOString();
+    if (debug)
+        console.info('[emailFormData] submit-start', { sendmail_api, startTime, myFormData });
+    try {
+        const responseData = await smartFetch(sendmail_api, {
+            requestInit: {
+                method: 'POST',
+                mode: 'cors',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(myFormData),
+            }
+        });
+        const elapsedMs2 = new Date().getTime() - new Date(startTime).getTime();
+        if (debug)
+            console.info('[emailFormData] submit-finish', { sendmail_api, elapsedMs: elapsedMs2, responseData });
+        const parsed = responseData;
+        if (debug)
+            console.debug('emailFormData — submission data:', myFormData, 'response:', parsed);
+        callback?.(e);
+        return { success: true, response: parsed };
+    }
+    catch (err) {
+        console.error('emailFormData error', err);
+        callback?.(e);
+        return { success: false, error: err };
+    }
+}
+export async function emailJSON(jsonData, callback) {
+    // const sendmail_api = "https://nlbqdrixmj.execute-api.us-east-2.amazonaws.com/default/sendmail";
+    const sendmail_api = "https://sendmail.pixelated.tech/default/sendmail";
+    const myJsonData = {};
+    for (const [key, value] of Object.entries(jsonData)) {
+        myJsonData[key] = value;
+    }
+    // MVP honeypot guard: check both the canonical id/key 'winnie' and the
+    // FormHoneypot default name 'website' to cover both DOM- and JSON-based calls.
+    if (myJsonData['winnie'] || myJsonData['website']) {
+        if (callback)
+            callback();
+        return;
+    }
+    myJsonData.Date = new Date().toLocaleDateString();
+    myJsonData.Status = "Submitted";
+    try {
+        await smartFetch(sendmail_api, {
+            requestInit: {
+                method: 'POST',
+                mode: 'cors',
+                headers: {
+                    Accept: 'application/json',
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(myJsonData),
+            }
+        });
+        if (callback)
+            callback();
+    }
+    catch (err) {
+        console.error('emailJSON error', err);
+        if (callback)
+            callback();
+    }
+}
+const DEFAULT_MODAL_CONTENT = (_jsxs("div", { className: "centered", children: [_jsx("br", {}), _jsx("br", {}), "Thank you for your submission!", _jsx("br", {}), "We will get back to you as soon as we can.", _jsx("br", {}), _jsx("br", {}), _jsx("br", {})] }));
+export function useFormSubmit(options = {}) {
+    const { toggleLoading = true, openModal = true, resetForm = true, modalContent = DEFAULT_MODAL_CONTENT, onStart, onSuccess, onError, onFinally, } = options;
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [submitError, setSubmitError] = useState(null);
+    const [submitResponse, setSubmitResponse] = useState(null);
+    const handleSubmit = useCallback(async (event) => {
+        event.preventDefault();
+        const nativeEvent = event.nativeEvent;
+        // Start
+        if (toggleLoading)
+            ToggleLoading({ show: true });
+        onStart?.();
+        setIsSubmitting(true);
+        setSubmitError(null);
+        // Submit
+        const result = await emailFormData(nativeEvent);
+        setSubmitResponse(result.response);
+        // Handle result
+        if (result.success) {
+            // Run defaults first
+            if (openModal) {
+                // Use the Modal context if available, or try handleModalOpen
+                try {
+                    handleModalOpen(nativeEvent);
+                }
+                catch (err) {
+                    // Modal system not available in test/story context
+                    if (typeof window !== 'undefined' && window.__DEV__) {
+                        console.debug('handleModalOpen not available', err);
+                    }
+                }
+            }
+            if (resetForm) {
+                const form = nativeEvent.target;
+                if (form)
+                    form.reset();
+            }
+            // Run custom callback
+            onSuccess?.(nativeEvent, result.response);
+        }
+        else {
+            const error = result.error ?? new Error('Form submission failed');
+            setSubmitError(error);
+            // Run custom callback
+            onError?.(nativeEvent, error);
+        }
+        // Finalize
+        onFinally?.(nativeEvent);
+        if (toggleLoading)
+            ToggleLoading({ show: false });
+        setIsSubmitting(false);
+    }, [toggleLoading, openModal, resetForm, onStart, onSuccess, onError, onFinally]);
+    return {
+        isSubmitting,
+        submitError,
+        submitResponse,
+        handleSubmit,
+        modalContent: modalContent,
+    };
+}
+const FormSubmitContext = createContext(undefined);
+FormSubmitWrapper.propTypes = {
+    /** Enable/disable loading spinner during submission (default: true) */
+    toggleLoading: PropTypes.bool,
+    /** Enable/disable thank you modal after submission (default: true) */
+    openModal: PropTypes.bool,
+    /** Enable/disable form reset after submission (default: true) */
+    resetForm: PropTypes.bool,
+    /** Custom content to display in thank you modal */
+    modalContent: PropTypes.node,
+    /** Callback invoked at start of submission */
+    onStart: PropTypes.func,
+    /** Callback invoked on successful submission */
+    onSuccess: PropTypes.func,
+    /** Callback invoked on submission error */
+    onError: PropTypes.func,
+    /** Callback invoked at end of submission lifecycle */
+    onFinally: PropTypes.func,
+    /** Form components to render within the wrapper */
+    children: PropTypes.node.isRequired,
+};
+export function FormSubmitWrapper(props) {
+    const { children, ...options } = props;
+    const { handleSubmit, isSubmitting, modalContent } = useFormSubmit(options);
+    return (_jsxs(FormSubmitContext.Provider, { value: { handleSubmit, isSubmitting }, children: [_jsx(Loading, {}), _jsx(Modal, { modalContent: modalContent }), children] }));
+}
+/**
+ * Hook to access form submission context within FormSubmitWrapper
+ */
+export function useFormSubmitContext() {
+    const context = useContext(FormSubmitContext);
+    if (!context) {
+        throw new Error('useFormSubmitContext must be used within FormSubmitWrapper');
+    }
+    return context;
+}