Improve support for conditional Square payments by Crabcyborg · Pull Request #2594 · Strategy11/formidable-forms

Crabcyborg · 2025-11-19T21:06:16Z

Related issue https://github.com/Strategy11/formidable-pro/issues/6100

This is mostly copied from where I added the same support for Stripe Link (https://github.com/Strategy11/formidable-stripe/pull/332).

When the Payment field is conditionally hidden (or the section it is in is conditionally hidden), the submit button should not be disabled when Stripe Link is incomplete.
When the payment field is made visible, the submit button will be disabled if Stripe link is incomplete.

Summary by CodeRabbit

Bug Fixes
- Improved Square payment form behavior when the Square card field is conditionally hidden.
- Prevented submit from being incorrectly blocked when the card field is unavailable due to form conditions.
- Updated submit enablement automatically as the Square card field becomes shown or hidden.

coderabbitai · 2026-04-27T18:20:45Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 0ef3cde3-5e68-4985-9e8e-7ed0a7edaaaf

📥 Commits

Reviewing files that changed from the base of the PR and between eb724db and 13351f6.

📒 Files selected for processing (1)

square/js/frontend.js

📝 Walkthrough

Walkthrough

Square card initialization and submission handling now account for conditionally hidden fields and sections. The frontend adds visibility checks, conditional submit-state logic, and mutation observers that resize the card and retoggle submission as visibility changes.

Changes

Square conditional visibility

Layer / File(s)	Summary
Visibility detection helpers `square/js/frontend.js`	Helpers locate the Square field, detect hidden field or section states, determine conditional submit availability, and parse the form ID.
Submission gating updates `square/js/frontend.js`	Validity handling and `squareInit()` now avoid disabling or intercepting submission when the Square card is conditionally hidden.
Visibility mutation handling `square/js/frontend.js`	Visibility waiting and mutation observers retoggle submit availability, reset running state when hidden, and recalculate Square sizing when visible.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Form
  participant SquareCard
  participant FieldContainer
  participant MutationObserver
  participant SubmitButton

  Form->>SquareCard: initialize payment field
  SquareCard->>SubmitButton: set submission state from visibility
  FieldContainer->>MutationObserver: emit style mutation
  MutationObserver->>Form: re-evaluate conditional visibility
  Form->>SubmitButton: enable or disable submission
  Form->>SquareCard: recalculate size when visible

Possibly related PRs

Strategy11/formidable-forms#3110: Updates the same Square card validity and submission handling in square/js/frontend.js.

Suggested reviewers: garretlaxton

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 75.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: improved Square payment handling when the field is conditionally hidden or shown.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch improve_support_for_conditional_square

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

deepsource-io · 2026-04-27T18:22:25Z

DeepSource Code Review

We reviewed changes in 057c563...13351f6 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade	Security Reliability Complexity Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
PHP		Jul 20, 2026 8:23p.m.	Review ↗
JavaScript		Jul 20, 2026 8:23p.m.	Review ↗

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

deepsource-io · 2026-04-27T18:23:23Z

+	 * @returns {bool}
+	 */
+	function submitButtonIsConditionallyDisabled( formId ) {
+		return submitButtonIsConditionallyNotAvailable( formId ) && 'disable' === __FRMRULES[ 'submit_' + formId ].hideDisable;


Unexpected string concatenation

In ES2015 (ES6), we can use template literals instead of string concatenation.

deepsource-io · 2026-04-27T18:23:23Z

+	 * @returns bool
+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		var hideFields = document.getElementById( 'frm_hide_fields_' + formId );


Unexpected var, use let or const instead

It is recommended to use let or const over var.
This will help prevent re-declaration of variables that are in the global scope when using var.

deepsource-io · 2026-04-27T18:23:23Z

+	 * @returns bool
+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		var hideFields = document.getElementById( 'frm_hide_fields_' + formId );


Unexpected string concatenation

In ES2015 (ES6), we can use template literals instead of string concatenation.

deepsource-io · 2026-04-27T18:23:23Z

+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		var hideFields = document.getElementById( 'frm_hide_fields_' + formId );
+		return hideFields && -1 !== hideFields.value.indexOf( '["frm_form_' + formId + '_container .frm_final_submit"]' );


Unexpected string concatenation

In ES2015 (ES6), we can use template literals instead of string concatenation.

deepsource-io · 2026-04-27T18:29:35Z

+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		const hideFields = document.getElementById( `frm_hide_fields_${ formId }` );
+		return hideFields && hideFields.value.includes( `["frm_form_${ formId }_container .frm_final_submit"]` );


Prefer using an optional chain expression instead, as it's more concise and easier to read

The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

deepsource-io · 2026-07-20T18:35:52Z

+	 */
+	function submitButtonIsConditionallyNotAvailable( formId ) {
+		const hideFields = document.getElementById( `frm_hide_fields_${ formId }` );
+		return hideFields && hideFields.value.includes( `["frm_form_${ formId }_container .frm_final_submit"]` );


Prefer using an optional chain expression instead, as it's more concise and easier to read

The optional chaining operator can be used to perform null checks before accessing a property, or calling a function.

coderabbitai

Actionable comments posted: 3

🧹 Nitpick comments (1)

square/js/frontend.js (1)
440-443: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win

Filter observed attributes for better performance.

Currently, the observer is triggered by all attribute changes (e.g., class, id) and then manually filtered in handleMutation. Supplying attributeFilter: [ 'style' ] prevents the browser from emitting unnecessary mutation events, providing a performance optimization.
⚡ Proposed optimization
 		observer.observe(
 			element,
-			{ attributes: true }
+			{ attributes: true, attributeFilter: [ 'style' ] }
 		);
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@square/js/frontend.js` around lines 440 - 443, Update the MutationObserver
configuration in the observer.observe call to include attributeFilter containing
only “style”, while preserving attribute observation and the existing
handleMutation processing.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@square/js/frontend.js`:
- Line 414: Remove the redundant `'none' === mutation.target.display` condition
from the shouldEnable assignment in the mutation handling logic. Preserve the
existing squareCardElementIsComplete and squareIsConditionallyDisabled(form)
checks unchanged.
- Line 424: Update the mutation handling in listenForFieldMutations to guard the
cardGlobal.recalculateSize() call when cardGlobal is undefined during
initialization. Only recalculate the size once cardGlobal has been assigned,
while preserving the existing behavior after initializeCard completes.
- Around line 456-458: Update submitButtonIsConditionallyDisabled to use
optional chaining when accessing __FRMRULES[ `submit_${ formId }` ].hideDisable,
so missing global or form-specific rules safely yield an undefined property
result without throwing.

---

Nitpick comments:
In `@square/js/frontend.js`:
- Around line 440-443: Update the MutationObserver configuration in the
observer.observe call to include attributeFilter containing only “style”, while
preserving attribute observation and the existing handleMutation processing.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 57968a5b-1493-4983-a3aa-53aa39a1c6d9

📥 Commits

Reviewing files that changed from the base of the PR and between 057c563 and eb724db.

📒 Files selected for processing (1)

square/js/frontend.js

coderabbitai · 2026-07-20T18:38:32Z

+	function submitButtonIsConditionallyDisabled( formId ) {
+		return submitButtonIsConditionallyNotAvailable( formId ) && 'disable' === __FRMRULES[ `submit_${ formId }` ].hideDisable;
+	}


🩺 Stability & Availability | 🟠 Major | ⚡ Quick win

Prevent TypeError if form rules are undefined.

If a form is evaluated but __FRMRULES or the specific submit_${formId} rules object is not defined, accessing .hideDisable will throw a TypeError and crash the script. Use optional chaining to safely check for this property.

🛡️ Proposed fix

function submitButtonIsConditionallyDisabled( formId ) { - return submitButtonIsConditionallyNotAvailable( formId ) && 'disable' === __FRMRULES[ `submit_${ formId }` ].hideDisable; + return submitButtonIsConditionallyNotAvailable( formId ) && 'disable' === window.__FRMRULES?.[ `submit_${ formId }` ]?.hideDisable; }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@square/js/frontend.js` around lines 456 - 458, Update submitButtonIsConditionallyDisabled to use optional chaining when accessing __FRMRULES[ `submit_${ formId }` ].hideDisable, so missing global or form-specific rules safely yield an undefined property result without throwing.

Crabcyborg added 3 commits November 19, 2025 17:05

Improve support for conditional square

8df9923

Update since versions, remove each function (not necessary)

abd1b99

Call recalculate size after conditionally showing the payment field

ffe463f

Crabcyborg changed the title ~~Improve support for conditional square~~ Improve support for conditional Square payments Nov 19, 2025

Crabcyborg added the run analysis label Nov 19, 2025

Crabcyborg added this to the 6.27 milestone Dec 8, 2025

Crabcyborg modified the milestones: 6.27, 6.28 Jan 5, 2026

Crabcyborg modified the milestones: 6.28, 6.29 Feb 12, 2026

Crabcyborg modified the milestones: 6.29, 6.30 Mar 9, 2026

Crabcyborg modified the milestones: 6.30 (Pricing Fields), 6.31 (PayPal Commerce) Apr 15, 2026

Merge branch 'master' into improve_support_for_conditional_square

292d64a

deepsource-io Bot reviewed Apr 27, 2026

View reviewed changes

Run eslint fixer

880260d

deepsource-io Bot reviewed Apr 27, 2026

View reviewed changes

Simplify

47f7574

Crabcyborg added the run tests label Apr 27, 2026

Fix more eslint issues

f94f0ef

Crabcyborg modified the milestones: 6.31 (Form Action Refresh, PayPal Commerce), 6.32 May 26, 2026

Crabcyborg modified the milestones: 6.32, 6.33 Jun 16, 2026

Crabcyborg modified the milestones: 6.33, 6.34 Jul 14, 2026

Merge branch 'master' into improve_support_for_conditional_square

5808b8c

Fix condition

eb724db

Crabcyborg marked this pull request as ready for review July 20, 2026 18:33

deepsource-io Bot reviewed Jul 20, 2026

View reviewed changes

coderabbitai Bot reviewed Jul 20, 2026

View reviewed changes

Crabcyborg added 2 commits July 20, 2026 15:59

Fix layout issue

39e6e04

Fix bugs

d611ed3

Crabcyborg requested a review from garretlaxton July 20, 2026 19:09

Fix height issues

13351f6

Uh oh!

Conversation

Crabcyborg commented Nov 19, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

deepsource-io Bot commented Apr 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

DeepSource Code Review

PR Report Card

Code Review Summary

Uh oh!

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Unexpected string concatenation

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Unexpected var, use let or const instead

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Unexpected string concatenation

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Unexpected string concatenation

Uh oh!

deepsource-io Bot Apr 27, 2026

Choose a reason for hiding this comment

Prefer using an optional chain expression instead, as it's more concise and easier to read

Uh oh!

deepsource-io Bot Jul 20, 2026

Choose a reason for hiding this comment

Prefer using an optional chain expression instead, as it's more concise and easier to read

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Crabcyborg commented Nov 19, 2025 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Apr 27, 2026 •

edited

Loading

deepsource-io Bot commented Apr 27, 2026 •

edited

Loading