@wix/headless-forms 0.0.17 → 0.0.18

package/cjs/dist/react/Form.js

@@ -41,6 +41,7 @@ const form_public_1 = require("@wix/form-public");
 const Form_js_1 = require("./core/Form.js");
 const FieldContext_js_1 = require("./context/FieldContext.js");
 const FieldLayoutContext_js_1 = require("./context/FieldLayoutContext.js");
+const utils_1 = require("../services/utils");
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
@@ -523,21 +524,30 @@ exports.Submitted = react_1.default.forwardRef((props, ref) => {
  * ```
  */
 exports.Fields = react_1.default.forwardRef((props, ref) => {
-    const [formValues, setFormValues] = (0, react_1.useState)({});
     const [formErrors, setFormErrors] = (0, react_1.useState)([]);
-    const handleFormChange = (0, react_1.useCallback)((values) => {
-        setFormValues(values);
-    }, []);
     const handleFormValidate = (0, react_1.useCallback)((errors) => {
         setFormErrors(errors);
     }, []);
-    return ((0, jsx_runtime_1.jsx)(Form_js_1.Fields, { children: ({ form, submitForm }) => {
+    return ((0, jsx_runtime_1.jsx)(Form_js_1.Fields, { children: ({ form, formValues, submitForm, handleForm }) => {
             if (!form)
                 return null;
-            return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(form_public_1.FormProvider, { currency: 'USD', locale: 'en', children: (0, jsx_runtime_1.jsx)(FieldsWithForm, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues), rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
+            return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(form_public_1.FormProvider, { currency: 'USD', locale: 'en', children: (0, jsx_runtime_1.jsx)(FieldsWithForm, { form: form, values: formValues, onChange: handleForm, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: submitForm, rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
         } }));
 });
 const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate, fields: fieldMap, rowGapClassname, columnGapClassname, }) => {
+    const coreUploadFile = async ({ file, formId, }) => {
+        const uploadUrl = await (0, utils_1.getUploadUrl)(formId, file);
+        if (uploadUrl === undefined) {
+            return { isPrivate: false };
+        }
+        const url = await (0, utils_1.uploadFile)(file, uploadUrl);
+        return {
+            id: '123123',
+            isPrivate: false,
+            displayName: file.name,
+            url,
+        };
+    };
     const formData = (0, form_public_1.useForm)({
         form,
         values,
@@ -545,6 +555,7 @@ const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate
         onChange,
         onValidate,
         submitForm,
+        uploadFile: coreUploadFile,
         fieldMap,
     });
     if (!formData)

package/cjs/dist/react/core/Form.d.ts

@@ -225,8 +225,10 @@ export declare function Submitted(props: FormSubmittedProps): import("react").Re
 export interface FieldsRenderProps {
     /** The form data, or null if not loaded */
     form: forms.Form | null;
+    formValues: FormValues;
     /** Function to submit the form with values */
-    submitForm: (formValues: FormValues) => Promise<void>;
+    submitForm: () => Promise<void>;
+    handleForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Props for Fields headless component

package/cjs/dist/react/core/Form.js

@@ -230,11 +230,14 @@ function Submitted(props) {
  * ```
  */
 function Fields(props) {
-    const { formSignal, submitForm } = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const { formSignal, submitForm, handleForm, formValuesSignal } = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
     const form = formSignal.get();
+    const formValues = formValuesSignal.get();
     return props.children({
         form,
+        formValues,
         submitForm,
+        handleForm,
     });
 }
 /**

package/cjs/dist/react/index.d.ts

@@ -1,3 +1,3 @@
 export * as Form from './Form.js';
 export * from './types.js';
-export { PhoneField } from '@wix/form-public';
+export { PhoneField, FileUpload } from '@wix/form-public';

package/cjs/dist/react/index.js

@@ -36,8 +36,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhoneField = exports.Form = void 0;
+exports.FileUpload = exports.PhoneField = exports.Form = void 0;
 exports.Form = __importStar(require("./Form.js"));
 __exportStar(require("./types.js"), exports);
 var form_public_1 = require("@wix/form-public");
 Object.defineProperty(exports, "PhoneField", { enumerable: true, get: function () { return form_public_1.PhoneField; } });
+Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return form_public_1.FileUpload; } });

package/cjs/dist/react/types.d.ts

@@ -1,3 +1,14 @@
 import { type CheckboxGroupProps, type CheckboxProps, type PhoneInputProps, type DateInputProps, type DatePickerProps, type DateTimeInputProps, type DropdownProps, type FileUploadProps, type MultilineAddressProps, type NumberInputProps, type RadioGroupProps, type RatingInputProps, type RichTextProps, type SignatureProps, type SubmitButtonProps, type TagsProps, type TextAreaProps, type TextInputProps, type TimeInputProps, type ProductListProps, type FixedPaymentProps, type PaymentInputProps, type DonationProps, type AppointmentProps, type ImageChoiceProps } from '@wix/form-public';
 export type { CheckboxGroupProps, CheckboxProps, PhoneInputProps, DateInputProps, DatePickerProps, DateTimeInputProps, DropdownProps, FileUploadProps, MultilineAddressProps, NumberInputProps, RadioGroupProps, RatingInputProps, RichTextProps, SignatureProps, SubmitButtonProps, TagsProps, TextAreaProps, TextInputProps, TimeInputProps, ProductListProps, FixedPaymentProps, PaymentInputProps, DonationProps, AppointmentProps, ImageChoiceProps, };
 export type FormValues = Record<string, any>;
+export interface UploadFileParams {
+    file: File;
+    formId: string;
+    uploadTarget: string;
+}
+export interface FileDescriptor {
+    id?: string;
+    displayName?: string;
+    url?: string;
+    isPrivate: boolean;
+}

package/cjs/dist/services/form-service.d.ts

@@ -32,8 +32,12 @@ export interface FormServiceAPI {
     errorSignal: ReadOnlySignal<string | null>;
     /** Reactive signal containing submission response state */
     submitResponseSignal: ReadOnlySignal<SubmitResponse>;
+    /** Reactive signal that contains all actual formValues */
+    formValuesSignal: ReadOnlySignal<FormValues>;
     /** Function to submit form with current values */
-    submitForm: (formValues: FormValues) => Promise<void>;
+    submitForm: () => Promise<void>;
+    /** Function to handle changed form with new values */
+    handleForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Service definition for the Form service.

package/cjs/dist/services/form-service.js

@@ -47,6 +47,7 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
     });
     const hasSchema = 'form' in config;
     const formSignal = signalsService.signal(hasSchema ? config.form : null);
+    const formValuesSignal = signalsService.signal({});
     if (!hasSchema) {
         loadForm(config.formId, config.namespace, config.additionalMetadata);
     }
@@ -88,7 +89,7 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
      * Submits the form with the provided values.
      * Uses custom handler if provided in config, otherwise uses default submission.
      */
-    async function submitForm(formValues) {
+    async function submitForm() {
         const form = formSignal.get();
         if (!form) {
             console.error('Cannot submit: form not loaded');
@@ -98,8 +99,8 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
         const formId = form._id ? form._id : form.id;
         submitResponseSignal.set({ type: 'loading' });
         try {
-            const handler = config.onSubmit || defaultSubmitHandler;
-            const response = await handler(formId, formValues);
+            const handler = await defaultSubmitHandler;
+            const response = await handler(formId, formValuesSignal.get());
             submitResponseSignal.set(response);
         }
         catch (error) {
@@ -110,12 +111,17 @@ exports.FormService = services_definitions_1.implementService.withConfig()(expor
             });
         }
     }
+    async function handleForm(formValues) {
+        formValuesSignal.set(formValues);
+    }
     return {
-        formSignal: formSignal,
-        isLoadingSignal: isLoadingSignal,
-        errorSignal: errorSignal,
-        submitResponseSignal: submitResponseSignal,
-        submitForm: submitForm,
+        formSignal,
+        isLoadingSignal,
+        errorSignal,
+        submitResponseSignal,
+        formValuesSignal,
+        submitForm,
+        handleForm,
     };
 });
 function buildFormFetchQueryParams({ id, namespace, additionalMetadata, }) {

package/cjs/dist/services/utils/file-upload-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getUploadUrl: (formId: string, file: File) => Promise<string | undefined>;
+export declare const uploadFile: (file: File, uploadUrl: string) => Promise<string | undefined>;

package/cjs/dist/services/utils/file-upload-utils.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadFile = exports.getUploadUrl = void 0;
+const forms_1 = require("@wix/forms");
+const essentials_1 = require("@wix/essentials");
+const getUploadUrl = async (formId, file) => {
+    try {
+        const { uploadUrl } = await forms_1.submissions.getMediaUploadUrl(formId, file.name, file.type);
+        return uploadUrl;
+    }
+    catch {
+        console.error('Cannot get uploadUrl for file upload!');
+        return;
+    }
+};
+exports.getUploadUrl = getUploadUrl;
+const uploadFile = async (file, uploadUrl) => {
+    const headers = {
+        'Content-Type': 'application/octet-stream',
+    };
+    const { withErrorHandler } = essentials_1.errorHandler;
+    try {
+        const response = await withErrorHandler(() => essentials_1.httpClient.fetchWithAuth(uploadUrl, {
+            method: 'PUT',
+            body: file,
+            headers,
+        }), {});
+        const data = await response.json();
+        if (!data) {
+            return;
+        }
+        return data.file.url;
+    }
+    catch (e) {
+        const resolvedError = essentials_1.errorHandler.getResolvedError(e);
+        throw resolvedError;
+    }
+};
+exports.uploadFile = uploadFile;

package/cjs/dist/services/utils/index.d.ts

@@ -0,0 +1 @@
+export { getUploadUrl, uploadFile } from './file-upload-utils';

package/cjs/dist/services/utils/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uploadFile = exports.getUploadUrl = void 0;
+var file_upload_utils_1 = require("./file-upload-utils");
+Object.defineProperty(exports, "getUploadUrl", { enumerable: true, get: function () { return file_upload_utils_1.getUploadUrl; } });
+Object.defineProperty(exports, "uploadFile", { enumerable: true, get: function () { return file_upload_utils_1.uploadFile; } });

package/dist/react/Form.js

@@ -5,6 +5,7 @@ import { useForm, FormProvider, } from '@wix/form-public';
 import { Root as CoreRoot, Loading as CoreLoading, LoadingError as CoreLoadingError, Error as CoreError, Submitted as CoreSubmitted, Fields as CoreFields, Field as CoreField, } from './core/Form.js';
 import { FieldContext, useFieldContext, } from './context/FieldContext.js';
 import { FieldLayoutProvider, useFieldLayout, } from './context/FieldLayoutContext.js';
+import { getUploadUrl, uploadFile } from '../services/utils';
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
@@ -487,21 +488,30 @@ export const Submitted = React.forwardRef((props, ref) => {
  * ```
  */
 export const Fields = React.forwardRef((props, ref) => {
-    const [formValues, setFormValues] = useState({});
     const [formErrors, setFormErrors] = useState([]);
-    const handleFormChange = useCallback((values) => {
-        setFormValues(values);
-    }, []);
     const handleFormValidate = useCallback((errors) => {
         setFormErrors(errors);
     }, []);
-    return (_jsx(CoreFields, { children: ({ form, submitForm }) => {
+    return (_jsx(CoreFields, { children: ({ form, formValues, submitForm, handleForm }) => {
             if (!form)
                 return null;
-            return (_jsx("div", { ref: ref, children: _jsx(FormProvider, { currency: 'USD', locale: 'en', children: _jsx(FieldsWithForm, { form: form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: () => submitForm(formValues), rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
+            return (_jsx("div", { ref: ref, children: _jsx(FormProvider, { currency: 'USD', locale: 'en', children: _jsx(FieldsWithForm, { form: form, values: formValues, onChange: handleForm, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap, submitForm: submitForm, rowGapClassname: props.rowGapClassname, columnGapClassname: props.columnGapClassname }) }) }));
         } }));
 });
 const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate, fields: fieldMap, rowGapClassname, columnGapClassname, }) => {
+    const coreUploadFile = async ({ file, formId, }) => {
+        const uploadUrl = await getUploadUrl(formId, file);
+        if (uploadUrl === undefined) {
+            return { isPrivate: false };
+        }
+        const url = await uploadFile(file, uploadUrl);
+        return {
+            id: '123123',
+            isPrivate: false,
+            displayName: file.name,
+            url,
+        };
+    };
     const formData = useForm({
         form,
         values,
@@ -509,6 +519,7 @@ const FieldsWithForm = ({ form, submitForm, values, onChange, errors, onValidate
         onChange,
         onValidate,
         submitForm,
+        uploadFile: coreUploadFile,
         fieldMap,
     });
     if (!formData)

package/dist/react/core/Form.d.ts

@@ -225,8 +225,10 @@ export declare function Submitted(props: FormSubmittedProps): import("react").Re
 export interface FieldsRenderProps {
     /** The form data, or null if not loaded */
     form: forms.Form | null;
+    formValues: FormValues;
     /** Function to submit the form with values */
-    submitForm: (formValues: FormValues) => Promise<void>;
+    submitForm: () => Promise<void>;
+    handleForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Props for Fields headless component

package/dist/react/core/Form.js

@@ -221,11 +221,14 @@ export function Submitted(props) {
  * ```
  */
 export function Fields(props) {
-    const { formSignal, submitForm } = useService(FormServiceDefinition);
+    const { formSignal, submitForm, handleForm, formValuesSignal } = useService(FormServiceDefinition);
     const form = formSignal.get();
+    const formValues = formValuesSignal.get();
     return props.children({
         form,
+        formValues,
         submitForm,
+        handleForm,
     });
 }
 /**

package/dist/react/index.d.ts

@@ -1,3 +1,3 @@
 export * as Form from './Form.js';
 export * from './types.js';
-export { PhoneField } from '@wix/form-public';
+export { PhoneField, FileUpload } from '@wix/form-public';

package/dist/react/index.js

@@ -1,3 +1,3 @@
 export * as Form from './Form.js';
 export * from './types.js';
-export { PhoneField } from '@wix/form-public';
+export { PhoneField, FileUpload } from '@wix/form-public';

package/dist/react/types.d.ts

@@ -1,3 +1,14 @@
 import { type CheckboxGroupProps, type CheckboxProps, type PhoneInputProps, type DateInputProps, type DatePickerProps, type DateTimeInputProps, type DropdownProps, type FileUploadProps, type MultilineAddressProps, type NumberInputProps, type RadioGroupProps, type RatingInputProps, type RichTextProps, type SignatureProps, type SubmitButtonProps, type TagsProps, type TextAreaProps, type TextInputProps, type TimeInputProps, type ProductListProps, type FixedPaymentProps, type PaymentInputProps, type DonationProps, type AppointmentProps, type ImageChoiceProps } from '@wix/form-public';
 export type { CheckboxGroupProps, CheckboxProps, PhoneInputProps, DateInputProps, DatePickerProps, DateTimeInputProps, DropdownProps, FileUploadProps, MultilineAddressProps, NumberInputProps, RadioGroupProps, RatingInputProps, RichTextProps, SignatureProps, SubmitButtonProps, TagsProps, TextAreaProps, TextInputProps, TimeInputProps, ProductListProps, FixedPaymentProps, PaymentInputProps, DonationProps, AppointmentProps, ImageChoiceProps, };
 export type FormValues = Record<string, any>;
+export interface UploadFileParams {
+    file: File;
+    formId: string;
+    uploadTarget: string;
+}
+export interface FileDescriptor {
+    id?: string;
+    displayName?: string;
+    url?: string;
+    isPrivate: boolean;
+}

package/dist/services/form-service.d.ts

@@ -32,8 +32,12 @@ export interface FormServiceAPI {
     errorSignal: ReadOnlySignal<string | null>;
     /** Reactive signal containing submission response state */
     submitResponseSignal: ReadOnlySignal<SubmitResponse>;
+    /** Reactive signal that contains all actual formValues */
+    formValuesSignal: ReadOnlySignal<FormValues>;
     /** Function to submit form with current values */
-    submitForm: (formValues: FormValues) => Promise<void>;
+    submitForm: () => Promise<void>;
+    /** Function to handle changed form with new values */
+    handleForm: (formValues: FormValues) => Promise<void>;
 }
 /**
  * Service definition for the Form service.

package/dist/services/form-service.js

@@ -43,6 +43,7 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
     });
     const hasSchema = 'form' in config;
     const formSignal = signalsService.signal(hasSchema ? config.form : null);
+    const formValuesSignal = signalsService.signal({});
     if (!hasSchema) {
         loadForm(config.formId, config.namespace, config.additionalMetadata);
     }
@@ -84,7 +85,7 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
      * Submits the form with the provided values.
      * Uses custom handler if provided in config, otherwise uses default submission.
      */
-    async function submitForm(formValues) {
+    async function submitForm() {
         const form = formSignal.get();
         if (!form) {
             console.error('Cannot submit: form not loaded');
@@ -94,8 +95,8 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
         const formId = form._id ? form._id : form.id;
         submitResponseSignal.set({ type: 'loading' });
         try {
-            const handler = config.onSubmit || defaultSubmitHandler;
-            const response = await handler(formId, formValues);
+            const handler = await defaultSubmitHandler;
+            const response = await handler(formId, formValuesSignal.get());
             submitResponseSignal.set(response);
         }
         catch (error) {
@@ -106,12 +107,17 @@ export const FormService = implementService.withConfig()(FormServiceDefinition,
             });
         }
     }
+    async function handleForm(formValues) {
+        formValuesSignal.set(formValues);
+    }
     return {
-        formSignal: formSignal,
-        isLoadingSignal: isLoadingSignal,
-        errorSignal: errorSignal,
-        submitResponseSignal: submitResponseSignal,
-        submitForm: submitForm,
+        formSignal,
+        isLoadingSignal,
+        errorSignal,
+        submitResponseSignal,
+        formValuesSignal,
+        submitForm,
+        handleForm,
     };
 });
 function buildFormFetchQueryParams({ id, namespace, additionalMetadata, }) {

package/dist/services/utils/file-upload-utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getUploadUrl: (formId: string, file: File) => Promise<string | undefined>;
+export declare const uploadFile: (file: File, uploadUrl: string) => Promise<string | undefined>;

package/dist/services/utils/file-upload-utils.js

@@ -0,0 +1,34 @@
+import { submissions } from '@wix/forms';
+import { httpClient, errorHandler } from '@wix/essentials';
+export const getUploadUrl = async (formId, file) => {
+    try {
+        const { uploadUrl } = await submissions.getMediaUploadUrl(formId, file.name, file.type);
+        return uploadUrl;
+    }
+    catch {
+        console.error('Cannot get uploadUrl for file upload!');
+        return;
+    }
+};
+export const uploadFile = async (file, uploadUrl) => {
+    const headers = {
+        'Content-Type': 'application/octet-stream',
+    };
+    const { withErrorHandler } = errorHandler;
+    try {
+        const response = await withErrorHandler(() => httpClient.fetchWithAuth(uploadUrl, {
+            method: 'PUT',
+            body: file,
+            headers,
+        }), {});
+        const data = await response.json();
+        if (!data) {
+            return;
+        }
+        return data.file.url;
+    }
+    catch (e) {
+        const resolvedError = errorHandler.getResolvedError(e);
+        throw resolvedError;
+    }
+};

package/dist/services/utils/index.d.ts

@@ -0,0 +1 @@
+export { getUploadUrl, uploadFile } from './file-upload-utils';

package/dist/services/utils/index.js

@@ -0,0 +1 @@
+export { getUploadUrl, uploadFile } from './file-upload-utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-forms",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -42,7 +42,7 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
-    "@wix/form-public": "^0.64.0",
+    "@wix/form-public": "^0.68.0",
     "@wix/forms": "^1.0.331",
     "@wix/headless-utils": "0.0.7",
     "@wix/services-definitions": "^0.1.4",
@@ -59,5 +59,5 @@
       "groupId": "com.wixpress.headless-components"
     }
   },
-  "falconPackageHash": "32d2f15a3874199a26e6700b141253e4f332c4fb8dafbc4bcbc1fcbf"
+  "falconPackageHash": "f3edf9d5732afbeb7ae504e3914dcd5e290272761dec8d784dc0e8f8"
 }