Add temporary saving for form submissions #1769

Soare-Robert-Daniel · 2023-07-14T14:50:20Z

Closes #1766 .

This will serve as infrastructure for #1778

Summary

Now we can temporarily save a Form submission. When temporary save means:

validation
file upload
database save

ℹ️ A form request that needs to be saved temporarily is marked by a special HTTP header called O-Form-Save-Mode which values must be temporary.

ℹ️ Temporary saving is done via a special flag. It is opt-in, which means when someone implements a filter for Form need to consider this case via is_temporary_data function of $form_data.

The state of this temporary save is shown as draft in Form Submissions.

Another API route has been implemented, whose job is to confirm the submission. When confirmed, the form data will be pulled from the database and sent to the processing.

ℹ️ When sent to re-reprocessing, a flag to mark this behavior is set via is_duplicated function of $form_data. This is also an opt-in.

For Stripe addon, we want the following workflow:

User completes the form and submits it.
The data is saved, and a database entry is created.
A filter gets the database entry id and use it to create a Stripe session by appending it to the success URL.
The stripe session URL is returned.
The form gets the response and redirects the client to the Stripe page for payment.
After checkout, Stripe redirects the user to the special success URL.
After the page is loaded, the script autodetects the params in URL and call the API endpoint that confirm the submission.

Screenshots

Loading state when confirming the submission.

Test instructions

⚠️ You must have WP_DEBUG set to true and Otter Pro activated.

This test will be done via Console since it is a work of an infrastructure for a future feature.

Create a form and preview it.
Open Browser Console and write activateTempSave(), then press Enter. With this, the form will save the data as temporary.
When you submit the form, a new page will open. It will be the same page but with a different URL. Add the end of the URL you will something like ?record_id=123. Also, you will see a confirmation message like Success.

With temporary saving, the final confirmation will be done on the page with the enhanced URL, which means you reached the last step.

Checklist before the final review

Included E2E or unit tests for the changes in this PR.
Visual elements are not affected by independent changes.
It is at least compatible with the minimum WordPress version.
It loads additional script in frontend only if it is required.
Does not impact the Core Web Vitals.
In case of deprecation, old blocks are safely migrated.
It is usable in Widgets and FSE.
Copy/Paste is working if the attributes are modified.
PR is following the best practices

pirate-bot · 2023-07-17T17:30:01Z

Bundle Size Diff

Package	Old Size	New Size	Diff
Animations	272.72 KB	272.72 KB	0 B (0.00%)
Blocks	1.45 MB	1.45 MB	956 B (0.06%)
CSS	87.22 KB	87.22 KB	0 B (0.00%)
Dashboard	124.43 KB	124.43 KB	0 B (0.00%)
Export Import	85.11 KB	85.11 KB	0 B (0.00%)
Pro	328.78 KB	328.78 KB	0 B (0.00%)

pirate-bot · 2023-07-17T17:30:31Z

Plugin build for 4227cac is ready 🛎️!

Download Otter – Page Builder Blocks & Extensions for Gutenberg - Production ~ Development
Download Otter Pro - Production ~ Development
Download Blocks Animation - Production ~ Development
Download Blocks CSS - Production ~ Development
Download Blocks Export Import - Production ~ Development

pirate-bot · 2023-07-17T17:34:58Z

E2E Summary

Typing

Test	Average Time (ms)	Standard Deviation (ms)	Median Time (ms)	Quantile for soft limit (%)	Quantile for hard limit (%)
Typing	57.1	23.87	50.3	89.47 (60ms)	94.74 (80ms)

Values above 60ms

"4 - 156.98, 12 - 62.45"

HardeepAsrani · 2023-07-18T11:40:29Z

inc/class-registration.php

+		/**
+		 * In this function we add a script that will activate the temporary save mode.
+		 * This will be for the Pro users. This will be removed in the future and moved to the Pro plugin.
+		 */


Instead of doing this, can't we just do it based on if Stripe block exists in the form content area?

We can. This is a placeholder for testing.

HardeepAsrani · 2023-07-18T11:47:32Z

inc/server/class-form-server.php

+		register_rest_route(
+			$namespace,
+			'/form/confirm',
+			array(
+				array(
+					'methods'             => WP_REST_Server::READABLE,
+					'callback'            => array( $this, 'confirm_form' ),
+					'permission_callback' => function ( $request ) {
+						return __return_true();
+					},
+					'args'                => array(
+						'record_id' => array(
+							'validate_callback' => function( $param, $request, $key ) {
+								return is_numeric( $param );
+							},
+						),
+					),
+				),
+			)
+		);


If this is to confirm the submission, why is it a GET request with an open permission callback?

For fast testing. I was thinking of adding a license check; what do you think?

@Soare-Robert-Daniel I'm not sure it's a good idea to send the license from frontend for validation, we expose the license that way to visitors. Maybe we can create a nonce for that particular form submission and send it with Stripe request, along side checkout ID, and validate it with that?

By license verification, I meant at the server level. To be a PRO-only feature. I will add a dynamic nonce generation.

Soare-Robert-Daniel · 2023-07-27T13:51:29Z

inc/server/class-form-server.php

+					'permission_callback' => function ( $request ) {
+						$session = $request->get_param( 'session' );
+
+						if ( apply_filters( 'otter_form_session_confirmation', $session ) ) {


With this step, we can verify the session id. The session can be a Stripe ID or something custom.

Soare-Robert-Daniel · 2023-07-27T13:52:25Z

inc/server/class-form-server.php

+	 */
+	public function verify_confirmation_session( $session ) {
+		// TODO: Add verification for Stripe session when adding the stripe field.
+		return 'test_123' === $session; // Test ONLY.


Here will add the Stripe verification process when we check if the given session is still valid.

Soare-Robert-Daniel · 2023-07-27T13:54:01Z

plugins/otter-pro/inc/plugins/class-form-emails-storing.php

+			$form_data->metadata['frontend_external_confirmation_url'] = add_query_arg(
+				array(
+					'record_id' => $form_data->metadata['record_id'], // TODO: Test ONLY. This will will be extracted from Stripe payment intent metadata.
+					'session'   => 'test_123',


At this step, we will create the session and save the record_id in its metadata.

feat: add temporary saving for form submissions

ab61085

Soare-Robert-Daniel added the pr-checklist-skip Allow this Pull Request to skip checklist. label Jul 14, 2023

Soare-Robert-Daniel self-assigned this Jul 14, 2023

Soare-Robert-Daniel linked an issue Jul 14, 2023 that may be closed by this pull request

Allow temporary saving of email from Form block #1766

Closed

Soare-Robert-Daniel added 3 commits July 17, 2023 15:18

feat: form submission confirmation workflow

8764575

chore: confirmation workflow in frontend

3ef2c59

Merge branch 'next' into feat/temp-form-save

0d0e374

Soare-Robert-Daniel marked this pull request as ready for review July 17, 2023 17:26

chore: add temp save under debug flag

c6e6d0e

pirate-bot added the pr-checklist-complete The Pull Request checklist is complete. (automatic label) label Jul 18, 2023

chore: confirm only the draft submissions

64fdbb4

Soare-Robert-Daniel requested a review from HardeepAsrani July 18, 2023 08:36

HardeepAsrani reviewed Jul 18, 2023

View reviewed changes

chore: add session id workflow

f1eeac2

Soare-Robert-Daniel commented Jul 27, 2023

View reviewed changes

Merge branch 'next' into feat/temp-form-save

4227cac

Soare-Robert-Daniel mentioned this pull request Aug 2, 2023

Add Stripe Form Field & Temporary Submission Saving #1798

Merged

9 tasks

Soare-Robert-Daniel closed this Aug 7, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add temporary saving for form submissions #1769

Add temporary saving for form submissions #1769

Soare-Robert-Daniel commented Jul 14, 2023 •

edited

Loading

pirate-bot commented Jul 17, 2023 •

edited

Loading

pirate-bot commented Jul 17, 2023 •

edited

Loading

pirate-bot commented Jul 17, 2023 •

edited

Loading

HardeepAsrani Jul 18, 2023

Soare-Robert-Daniel Jul 18, 2023

HardeepAsrani Jul 18, 2023

Soare-Robert-Daniel Jul 18, 2023

HardeepAsrani Jul 18, 2023

Soare-Robert-Daniel Jul 27, 2023

Soare-Robert-Daniel Jul 27, 2023

Soare-Robert-Daniel Jul 27, 2023

Soare-Robert-Daniel Jul 27, 2023

Add temporary saving for form submissions #1769

Add temporary saving for form submissions #1769

Conversation

Soare-Robert-Daniel commented Jul 14, 2023 • edited Loading

Summary

Screenshots

Loading state when confirming the submission.

Test instructions

Checklist before the final review

pirate-bot commented Jul 17, 2023 • edited Loading

Bundle Size Diff

pirate-bot commented Jul 17, 2023 • edited Loading

pirate-bot commented Jul 17, 2023 • edited Loading

E2E Summary

Typing

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Soare-Robert-Daniel commented Jul 14, 2023 •

edited

Loading

pirate-bot commented Jul 17, 2023 •

edited

Loading

pirate-bot commented Jul 17, 2023 •

edited

Loading

pirate-bot commented Jul 17, 2023 •

edited

Loading