diff --git a/apps/svelte-gravity-forms/src/lib/components/root.svelte b/apps/svelte-gravity-forms/src/lib/components/root.svelte index accb3a9..93b0291 100644 --- a/apps/svelte-gravity-forms/src/lib/components/root.svelte +++ b/apps/svelte-gravity-forms/src/lib/components/root.svelte @@ -13,7 +13,7 @@ const { methods: { onSubmitForm }, - states: { formSchema, formFields, formObject, isSubmitted, defaultConfirmation }, + states: { formSchema, formFields, formObject, isSubmitted, comfirmationText }, refs: { formRef } } = setCtx({ formId: formId, @@ -33,6 +33,7 @@ async onUpdate({ form }) { if (form.valid) { if (!form.data) return; + await onSubmitForm(form.data); } } @@ -63,7 +64,7 @@ > {#if $isSubmitted}
- {@html $defaultConfirmation.message} + {@html $comfirmationText}
{:else} {#if $formFields} diff --git a/apps/svelte-gravity-forms/src/lib/internal/gf.ts b/apps/svelte-gravity-forms/src/lib/internal/gf.ts index ecc3f6e..40671ca 100644 --- a/apps/svelte-gravity-forms/src/lib/internal/gf.ts +++ b/apps/svelte-gravity-forms/src/lib/internal/gf.ts @@ -3,12 +3,7 @@ import { get, writable } from 'svelte/store'; import { z, type AnyZodObject } from 'zod'; import { effect, omit, removeUndefined, toWritableStores } from '$lib/internal/helpers/index.js'; -import type { - GFButtonProps, - GFComfirmationProps, - GFFieldsProps, - GFFormObjectProps -} from './types.js'; +import type { GFButtonProps, GFFieldsProps, GFFormObjectProps } from './types.js'; import type { HTMLAttributes } from 'svelte/elements'; import { getClientFormObject, sendSubmission } from './helpers/gf-rest.js'; @@ -54,7 +49,7 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) { const formSchema = writable(); const formRequiredIndicator = writable(undefined); const formSubmtiButton = writable(undefined); - const defaultConfirmation = writable(undefined); + const comfirmationText = writable(undefined); const isSubmitted = writable(false); const consumerKeyStore = writable(withDefaults.consumerKey); @@ -63,13 +58,17 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) { // Fetch form object from Gravity Forms API async function onSubmitForm(req: { [x: string]: unknown }) { try { - const submit = await sendSubmission(req, backendUrl, formId); + const resp = await sendSubmission(req, backendUrl, formId); - if (!submit.is_valid) { - throw new Error(submit.message); + if (!resp.is_valid) { + throw new Error(JSON.stringify(resp.validation_messages)); } - isSubmitted.set(true); + if (resp.confirmation_type === 'message' && resp.confirmation_message) { + comfirmationText.set(resp.confirmation_message); + } + + isSubmitted.set(resp.is_valid); } catch (err) { // eslint-disable-next-line no-console console.error(err); @@ -201,28 +200,6 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) { } }); - /** - * set default confirmation on mount if exists in form object data - */ - effect([formObject], ([$formObject]) => { - if ($formObject) { - if (!$formObject.confirmations) { - return; - } - - // find default confirmation by isDefault key - const defaultConfirmationObject = Object.values($formObject.confirmations).find( - (confirmation) => confirmation.isDefault - ); - - if (!defaultConfirmationObject) { - return; - } - - defaultConfirmation.set(defaultConfirmationObject); - } - }); - // Set form schema effect([formFields], ([$formFields]) => { if (!$formFields) { @@ -299,7 +276,7 @@ export function createSvelteGravityFroms(props: CreateGravityFromsProps) { formRequiredIndicator, formSubmtiButton, isSubmitted, - defaultConfirmation, + comfirmationText, formId, backendUrl }, diff --git a/apps/svelte-gravity-forms/src/lib/internal/helpers/gf-rest.ts b/apps/svelte-gravity-forms/src/lib/internal/helpers/gf-rest.ts index 4f19cd5..5ca7c2c 100644 --- a/apps/svelte-gravity-forms/src/lib/internal/helpers/gf-rest.ts +++ b/apps/svelte-gravity-forms/src/lib/internal/helpers/gf-rest.ts @@ -1,5 +1,5 @@ import { get, type Writable } from 'svelte/store'; -import type { GFFormObjectProps } from '../types.js'; +import type { GFFormObjectProps, GFSubmissionResponse } from '../types.js'; import OAuth from 'oauth-1.0a'; import CryptoJS from 'crypto-js'; @@ -14,9 +14,10 @@ export async function sendSubmission( headers: { Accept: 'application/json', 'Content-Type': 'application/json;charset=UTF-8' - } + }, + body: JSON.stringify(req) }); - const data = await res.json(); + const data = (await res.json()) as GFSubmissionResponse; return data; } diff --git a/apps/svelte-gravity-forms/src/lib/internal/types.ts b/apps/svelte-gravity-forms/src/lib/internal/types.ts index 07562f8..3c37b4d 100644 --- a/apps/svelte-gravity-forms/src/lib/internal/types.ts +++ b/apps/svelte-gravity-forms/src/lib/internal/types.ts @@ -96,3 +96,71 @@ export type GFFormObjectProps = { nextFieldId?: number; descriptionPlacement?: string; }; + +type FieldValuesProps = { + [key: string]: unknown; +}; + +export type GFSubmissionRequestPrps = { + /** + * An object of dynamic population parameter keys with their corresponding values used to populate the fields. + * Useful for evaluating conditional logic rules to determine which fields should be validated and saved. + */ + field_values: FieldValuesProps; + /** + * Default is 0. For multi-page forms; indicates which page would be loaded next if the current page passes validation + */ + target_page?: number; + + /** + * Default is 1. For multi-page forms; indicates which page was active when the values were submitted for validation. + */ + source_page?: number; +}; + +export type GFSubmissionResponse = { + /** + * The form validation result. + */ + is_valid?: boolean; + + /** + * Only present when is_valid is false. An array of validation messages for the fields that failed validation. + */ + validation_messages?: FieldValuesProps[] | object; + + /** + * For multi-page forms. The page that should be displayed. + */ + page_number?: number; + + /** + * For multi-page forms. The page that was submitted. + */ + source_page_number?: number; + + /** + * Only present when is_valid is true. The resume or confirmation message. + */ + confirmation_message?: string; + + /** + * Only present when is_valid is true. The type of confirmation being used for the current submission. message or redirect + */ + confirmation_type?: string; + + /** + * Only present when is_valid is true and the confirmation_type is redirect. The URL the submission should redirect to. + */ + confirmation_redirect?: string; + + /** + * Only present when is_valid is true and the user authenticating the request has permission to view or edit entries. The ID of the entry created by the submission. + */ + entry_id?: number; + + /** + * Only present if the value of the gform_save input in the request body was true. The token that can be used to repopulate the embedded form with the saved values. + */ + resume_token?: string; +};