@deneb-ui/ui 2.0.50 → 2.0.51

package/dist/EditableContactForm.d.ts

@@ -1,6 +1,9 @@
 import React from 'react';
 export interface EditableContactFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
     endpoint?: string;
+    whatsappUrl?: string;
+    whatsappUrlPath?: string;
+    submitMode?: 'whatsapp' | 'api' | 'both';
     formTitle?: string;
     formTitlePath?: string;
     submitButtonText?: string;
@@ -16,4 +19,4 @@ export interface EditableContactFormProps extends React.FormHTMLAttributes<HTMLF
     successMessage?: string;
     showPhone?: boolean;
 }
-export declare function EditableContactForm({ endpoint, formTitle, formTitlePath, submitButtonText, submitLabelPath, nameLabelPath, namePlaceholderPath, emailLabelPath, emailPlaceholderPath, phoneLabelPath, phonePlaceholderPath, messageLabelPath, messagePlaceholderPath, successMessage, showPhone, className, style, ...props }: EditableContactFormProps): React.JSX.Element;
+export declare function EditableContactForm({ endpoint, whatsappUrl, whatsappUrlPath, submitMode, formTitle, formTitlePath, submitButtonText, submitLabelPath, nameLabelPath, namePlaceholderPath, emailLabelPath, emailPlaceholderPath, phoneLabelPath, phonePlaceholderPath, messageLabelPath, messagePlaceholderPath, successMessage, showPhone, className, style, ...props }: EditableContactFormProps): React.JSX.Element;

package/dist/EditableContactForm.js

@@ -4,7 +4,8 @@ exports.EditableContactForm = EditableContactForm;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const SiteDataProvider_1 = require("./SiteDataProvider");
-function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact', formTitle, formTitlePath, submitButtonText = 'Send Message', submitLabelPath = 'contact.submitLabel', nameLabelPath = 'contact.nameLabel', namePlaceholderPath = 'contact.namePlaceholder', emailLabelPath = 'contact.emailLabel', emailPlaceholderPath = 'contact.emailPlaceholder', phoneLabelPath = 'contact.phoneLabel', phonePlaceholderPath = 'contact.phonePlaceholder', messageLabelPath = 'contact.messageLabel', messagePlaceholderPath = 'contact.messagePlaceholder', successMessage = 'Thank you! Your message has been sent successfully.', showPhone = false, className = '', style, ...props }) {
+const useWhatsAppForm_1 = require("./hooks/useWhatsAppForm");
+function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact', whatsappUrl, whatsappUrlPath = 'contact.formWhatsappUrl', submitMode = 'whatsapp', formTitle, formTitlePath, submitButtonText = 'Send Message', submitLabelPath = 'contact.submitLabel', nameLabelPath = 'contact.nameLabel', namePlaceholderPath = 'contact.namePlaceholder', emailLabelPath = 'contact.emailLabel', emailPlaceholderPath = 'contact.emailPlaceholder', phoneLabelPath = 'contact.phoneLabel', phonePlaceholderPath = 'contact.phonePlaceholder', messageLabelPath = 'contact.messageLabel', messagePlaceholderPath = 'contact.messagePlaceholder', successMessage = 'Thank you! Your message has been sent successfully.', showPhone = false, className = '', style, ...props }) {
     const siteData = (0, SiteDataProvider_1.useSiteData)();
     const [status, setStatus] = (0, react_1.useState)('idle');
     const [errorMessage, setErrorMessage] = (0, react_1.useState)('');
@@ -19,6 +20,18 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
     const resolvedPhonePlaceholder = String(contactContent?.phonePlaceholder || '+1 (555) 000-0000');
     const resolvedMessageLabel = String(contactContent?.messageLabel || 'Message');
     const resolvedMessagePlaceholder = String(contactContent?.messagePlaceholder || 'Tell us how we can help...');
+    const { submitViaWhatsApp, resolvedWhatsappUrl } = (0, useWhatsAppForm_1.useWhatsAppForm)({
+        whatsappUrl,
+        whatsappUrlPath,
+        formName: resolvedFormTitle || 'Contact Form',
+        onSuccess: () => {
+            setStatus('success');
+        },
+        onError: (err) => {
+            setStatus('error');
+            setErrorMessage(err.message || 'Something went wrong. Please try again.');
+        },
+    });
     const handleSubmit = async (e) => {
         e.preventDefault();
         setStatus('submitting');
@@ -32,22 +45,38 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
             phone: showPhone ? formData.get('phone') : undefined,
             message: formData.get('message'),
         };
-        try {
-            const res = await fetch(endpoint, {
+        if (submitMode === 'api') {
+            try {
+                const res = await fetch(endpoint, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload),
+                });
+                if (!res.ok) {
+                    throw new Error(`Submission error: ${res.statusText || 'Unable to send message'}`);
+                }
+                setStatus('success');
+                form.reset();
+            }
+            catch (err) {
+                setStatus('error');
+                setErrorMessage(err.message || 'Something went wrong. Please try again.');
+            }
+            return;
+        }
+        // Default to WhatsApp dispatch (or both if requested)
+        if (submitMode === 'both') {
+            fetch(endpoint, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify(payload),
-            });
-            if (!res.ok) {
-                throw new Error(`Submission error: ${res.statusText || 'Unable to send message'}`);
-            }
+            }).catch(() => { });
+        }
+        const success = submitViaWhatsApp(form);
+        if (success) {
             setStatus('success');
             form.reset();
         }
-        catch (err) {
-            setStatus('error');
-            setErrorMessage(err.message || 'Something went wrong. Please try again.');
-        }
     };
     return ((0, jsx_runtime_1.jsxs)("form", { onSubmit: handleSubmit, "data-fivora-contact-disabled": true, style: {
             display: 'flex',
@@ -132,7 +161,7 @@ function EditableContactForm({ endpoint = 'https://api.fivora.com/site-contact',
                     opacity: status === 'submitting' ? 0.7 : 1,
                     boxShadow: '0 4px 14px 0 rgba(37, 99, 235, 0.35)',
                     transition: 'all 0.2s ease',
-                }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": submitLabelPath, children: status === 'submitting' ? 'Sending Message...' : resolvedSubmitText }) }), status === 'success' && ((0, jsx_runtime_1.jsx)("div", { style: {
+                }, children: (0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": submitLabelPath, children: status === 'submitting' ? 'Sending Message...' : resolvedSubmitText }) }), (0, jsx_runtime_1.jsx)("span", { hidden: true, "aria-hidden": "true", "data-preview-field-path": whatsappUrlPath, children: resolvedWhatsappUrl }), status === 'success' && ((0, jsx_runtime_1.jsx)("div", { style: {
                     padding: '1rem',
                     borderRadius: '10px',
                     backgroundColor: 'rgba(34, 197, 94, 0.1)',

package/dist/hooks/useWhatsAppForm.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export interface UseWhatsAppFormOptions {
+    /** The WhatsApp URL or phone number (e.g. "https://wa.me/1234567890", "+1234567890") */
+    whatsappUrl?: string | null;
+    /** Field path to query in siteData (e.g. "contact.formWhatsappUrl") */
+    whatsappUrlPath?: string;
+    /** Form name for message header (e.g. "Contact Inquiry", "Book Repair") */
+    formName?: string;
+    /** Business name for message header */
+    businessName?: string;
+    /** Custom message formatter callback */
+    formatMessage?: (data: Record<string, any>) => string;
+    /** Callback fired after opening WhatsApp */
+    onSuccess?: (details: {
+        data: Record<string, any>;
+        url: string;
+    }) => void;
+    /** Callback fired if submission encounters an error */
+    onError?: (error: Error) => void;
+}
+export interface UseWhatsAppFormReturn {
+    /** Submit directly from an HTML form element or submit FormEvent */
+    submitViaWhatsApp: (eOrForm: React.FormEvent<HTMLFormElement> | HTMLFormElement, extraData?: Record<string, any>) => boolean;
+    /** Submit explicit key-value data */
+    submitDataViaWhatsApp: (data: Record<string, any>) => boolean;
+    /** Construct full WhatsApp URL without triggering window navigation */
+    buildWhatsAppUrl: (data: Record<string, any>) => string;
+    /** Resolved target phone or URL */
+    resolvedWhatsappUrl: string;
+    /** The most recently generated WhatsApp link */
+    whatsAppLink: string | null;
+    /** Submission state */
+    isSubmitting: boolean;
+}
+/**
+ * Extracts digits from a raw phone number, full wa.me link, or WhatsApp API link.
+ */
+export declare function resolveWhatsAppNumber(target?: string | null): string;
+/**
+ * Extracts form field labels and values from an HTMLFormElement.
+ */
+export declare function extractFormData(form: HTMLFormElement): Record<string, any>;
+export declare function defaultFormatMessage(data: Record<string, any>, options?: {
+    formName?: string;
+    businessName?: string;
+}): string;
+/**
+ * Universal Form-to-WhatsApp Hook.
+ * Supports HTMLFormElement submission, controlled component state data,
+ * automatic siteData URL lookup, and popup-blocker safe redirection.
+ */
+export declare function useWhatsAppForm(options?: UseWhatsAppFormOptions): UseWhatsAppFormReturn;

package/dist/hooks/useWhatsAppForm.js

@@ -0,0 +1,228 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveWhatsAppNumber = resolveWhatsAppNumber;
+exports.extractFormData = extractFormData;
+exports.defaultFormatMessage = defaultFormatMessage;
+exports.useWhatsAppForm = useWhatsAppForm;
+const react_1 = require("react");
+const SiteDataProvider_1 = require("../SiteDataProvider");
+/**
+ * Extracts digits from a raw phone number, full wa.me link, or WhatsApp API link.
+ */
+function resolveWhatsAppNumber(target) {
+    if (!target)
+        return '';
+    const trimmed = String(target).trim();
+    const waMatch = trimmed.match(/wa\.me\/([0-9+]+)/i);
+    if (waMatch && waMatch[1]) {
+        return waMatch[1].replace(/[^0-9]/g, '');
+    }
+    const queryMatch = trimmed.match(/[?&]phone=([0-9+]+)/i);
+    if (queryMatch && queryMatch[1]) {
+        return queryMatch[1].replace(/[^0-9]/g, '');
+    }
+    return trimmed.replace(/[^0-9]/g, '');
+}
+function getValueByPath(obj, path) {
+    if (!obj || !path)
+        return undefined;
+    const parts = path.replace(/\[(\d+)\]/g, '.$1').split('.').filter(Boolean);
+    let curr = obj;
+    for (const part of parts) {
+        if (curr == null)
+            return undefined;
+        curr = curr[part];
+    }
+    return curr;
+}
+function humanizeFieldName(name) {
+    return name
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/[-_]+/g, ' ')
+        .trim()
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+/**
+ * Extracts form field labels and values from an HTMLFormElement.
+ */
+function extractFormData(form) {
+    const result = {};
+    const elements = Array.from(form.elements);
+    for (const el of elements) {
+        if (!(el instanceof HTMLInputElement ||
+            el instanceof HTMLTextAreaElement ||
+            el instanceof HTMLSelectElement)) {
+            continue;
+        }
+        if (!el.name || el.disabled || el.type === 'submit' || el.type === 'reset' || el.type === 'button') {
+            continue;
+        }
+        if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
+            continue;
+        }
+        let fieldLabel = '';
+        if (el.id) {
+            const labelEl = form.querySelector(`label[for="${el.id}"]`);
+            if (labelEl && labelEl.textContent) {
+                fieldLabel = labelEl.textContent.trim();
+            }
+        }
+        if (!fieldLabel) {
+            const parentLabel = el.closest('label');
+            if (parentLabel) {
+                const clone = parentLabel.cloneNode(true);
+                clone.querySelectorAll('input, select, textarea').forEach((n) => n.remove());
+                fieldLabel = clone.textContent?.trim() || '';
+            }
+        }
+        if (!fieldLabel && el.getAttribute('aria-label')) {
+            fieldLabel = el.getAttribute('aria-label') || '';
+        }
+        if (!fieldLabel && 'placeholder' in el && el.placeholder) {
+            fieldLabel = el.placeholder.trim();
+        }
+        if (!fieldLabel) {
+            fieldLabel = humanizeFieldName(el.name);
+        }
+        result[fieldLabel] = el.value;
+    }
+    return result;
+}
+function defaultFormatMessage(data, options = {}) {
+    const lines = [];
+    if (options.formName && options.businessName) {
+        lines.push(`*${options.formName} - ${options.businessName}*`);
+    }
+    else if (options.formName) {
+        lines.push(`*${options.formName}*`);
+    }
+    else if (options.businessName) {
+        lines.push(`*New Message for ${options.businessName}*`);
+    }
+    else {
+        lines.push(`*New Form Submission*`);
+    }
+    lines.push('────────────────────────');
+    for (const [key, val] of Object.entries(data)) {
+        if (val === undefined || val === null || val === '')
+            continue;
+        if (Array.isArray(val)) {
+            lines.push(`*${key}*:`);
+            val.forEach((item, idx) => {
+                if (typeof item === 'object' && item !== null) {
+                    lines.push(`  ${idx + 1}. ${JSON.stringify(item)}`);
+                }
+                else {
+                    lines.push(`  • ${item}`);
+                }
+            });
+        }
+        else if (typeof val === 'object' && val !== null) {
+            lines.push(`*${key}*: ${JSON.stringify(val)}`);
+        }
+        else {
+            lines.push(`*${key}*: ${val}`);
+        }
+    }
+    lines.push('────────────────────────');
+    lines.push('_Sent via website form_');
+    return lines.join('\n');
+}
+/**
+ * Universal Form-to-WhatsApp Hook.
+ * Supports HTMLFormElement submission, controlled component state data,
+ * automatic siteData URL lookup, and popup-blocker safe redirection.
+ */
+function useWhatsAppForm(options = {}) {
+    const siteData = (0, SiteDataProvider_1.useSiteData)();
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const [whatsAppLink, setWhatsAppLink] = (0, react_1.useState)(null);
+    // 1. Resolve WhatsApp URL from options, siteData path, or fallback siteData fields
+    const content = siteData?.content;
+    const business = siteData?.business;
+    let resolvedUrl = options.whatsappUrl;
+    if (!resolvedUrl && options.whatsappUrlPath) {
+        resolvedUrl =
+            getValueByPath(content, options.whatsappUrlPath) ||
+                getValueByPath(siteData, options.whatsappUrlPath);
+    }
+    if (!resolvedUrl) {
+        resolvedUrl =
+            content?.contact?.formWhatsappUrl ||
+                content?.contact?.whatsappUrl ||
+                content?.home?.contact?.formWhatsappUrl ||
+                business?.whatsapp ||
+                siteData?.contact?.whatsapp ||
+                'https://wa.me/1234567890';
+    }
+    const resolvedBusinessName = options.businessName ||
+        business?.name ||
+        content?.common?.business?.name ||
+        siteData?.project?.name ||
+        '';
+    const buildUrl = (0, react_1.useCallback)((data) => {
+        const number = resolveWhatsAppNumber(resolvedUrl);
+        const message = options.formatMessage
+            ? options.formatMessage(data)
+            : defaultFormatMessage(data, {
+                formName: options.formName,
+                businessName: resolvedBusinessName,
+            });
+        if (number) {
+            return `https://wa.me/${number}?text=${encodeURIComponent(message)}`;
+        }
+        if (resolvedUrl && /^https?:\/\//i.test(resolvedUrl)) {
+            const separator = resolvedUrl.includes('?') ? '&' : '?';
+            return `${resolvedUrl}${separator}text=${encodeURIComponent(message)}`;
+        }
+        return `https://wa.me/?text=${encodeURIComponent(message)}`;
+    }, [resolvedUrl, options.formatMessage, options.formName, resolvedBusinessName]);
+    const dispatchUrl = (0, react_1.useCallback)((url, data) => {
+        setIsSubmitting(true);
+        setWhatsAppLink(url);
+        try {
+            if (typeof window !== 'undefined') {
+                const opened = window.open(url, '_blank', 'noopener,noreferrer');
+                if (!opened || opened.closed || typeof opened.closed === 'undefined') {
+                    window.location.href = url;
+                }
+            }
+            options.onSuccess?.({ data, url });
+            return true;
+        }
+        catch (err) {
+            options.onError?.(err);
+            return false;
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    }, [options]);
+    const submitDataViaWhatsApp = (0, react_1.useCallback)((data) => {
+        const url = buildUrl(data);
+        return dispatchUrl(url, data);
+    }, [buildUrl, dispatchUrl]);
+    const submitViaWhatsApp = (0, react_1.useCallback)((eOrForm, extraData) => {
+        let form = null;
+        if ('preventDefault' in eOrForm && typeof eOrForm.preventDefault === 'function') {
+            eOrForm.preventDefault();
+            form = (eOrForm.currentTarget || eOrForm.target);
+        }
+        else if (eOrForm instanceof HTMLElement) {
+            form = eOrForm;
+        }
+        const extracted = form ? extractFormData(form) : {};
+        const merged = extraData ? { ...extracted, ...extraData } : extracted;
+        const url = buildUrl(merged);
+        return dispatchUrl(url, merged);
+    }, [buildUrl, dispatchUrl]);
+    return {
+        submitViaWhatsApp,
+        submitDataViaWhatsApp,
+        buildWhatsAppUrl: buildUrl,
+        resolvedWhatsappUrl: String(resolvedUrl),
+        whatsAppLink,
+        isSubmitting,
+    };
+}

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export { DenebComponentStyles } from './DenebComponentStyles';
 export { FontLoader, DENEB_FONTS_LINK_ID } from './fonts/FontLoader';
 export { useDenebFonts } from './fonts/useDenebFonts';
 export * from './hooks/useComponentStyle';
+export * from './hooks/useWhatsAppForm';
 export { DENEB_FONT_REGISTRY, DENEB_GOOGLE_FONT_COUNT, buildGoogleFontsStylesheetUrl, collectFontIdsFromSiteData, listFontsByCategory, lookupFontDefinition, normalizeFontId, resolveInstallableFont, formatResponsiveFontSize, } from '@deneb-ui/core';
 export { STYLE_PATCH_MESSAGE, DENEB_STYLE_PATCH_MESSAGE, STYLE_TARGET_ATTRIBUTE, STYLE_TYPE_ATTRIBUTE, patchElementStyle, patchStyleByPath, styleToCssVariables, validateStyleTree, collectStyleTargetsFromHtml, } from '@deneb-ui/core';
 export * from './utils';

package/dist/index.js

@@ -65,6 +65,7 @@ Object.defineProperty(exports, "DENEB_FONTS_LINK_ID", { enumerable: true, get: f
 var useDenebFonts_1 = require("./fonts/useDenebFonts");
 Object.defineProperty(exports, "useDenebFonts", { enumerable: true, get: function () { return useDenebFonts_1.useDenebFonts; } });
 __exportStar(require("./hooks/useComponentStyle"), exports);
+__exportStar(require("./hooks/useWhatsAppForm"), exports);
 var core_1 = require("@deneb-ui/core");
 Object.defineProperty(exports, "DENEB_FONT_REGISTRY", { enumerable: true, get: function () { return core_1.DENEB_FONT_REGISTRY; } });
 Object.defineProperty(exports, "DENEB_GOOGLE_FONT_COUNT", { enumerable: true, get: function () { return core_1.DENEB_GOOGLE_FONT_COUNT; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.50",
+  "version": "2.0.51",
   "description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -49,7 +49,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@deneb-ui/core": "^2.0.50"
+    "@deneb-ui/core": "^2.0.51"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",