Update gateway setting toggle logic by Crabcyborg · Pull Request #3095 · Strategy11/formidable-forms

Crabcyborg · 2026-05-08T13:47:01Z

This update should prevent this issue where "Repeat" appears twice.

The problem

Stripe uses "Repeat Interval" / "Repeater Period".
Square uses "Repeat Cadence".
The JS to sync which setting is visible misses this case and ends up displaying both the Stripe and Square settings.

To replicate

Create a payment action. Set it to One Time, Square.
Change to Stripe.
Change to Recurring.

When testing

We'll want to test with the Stripe add-on active, and inactive, is these may work differently.
It's also good to test Authorize.Net active and inactive, as the gateways use checkboxes when Authorize.Net is available. While you shouldn't have both Stripe and Square selected (it won't really work), both settings should appear if both gateways are selected.

Before

Screen.Recording.2026-05-08.at.1.07.00.PM.mov

After

Screen.Recording.2026-05-08.at.1.08.24.PM.mov

Summary by CodeRabbit

Refactor
- Improved payment gateway settings visibility so sub-options consistently show or hide based on transaction type (recurring vs. one-time) and selected gateways.
- Ensures layout for gateway sub-option groups remains intact when displayed.
- Fixes cases where repeat-cadence controls could remain hidden after being added, improving UI reliability.

coderabbitai · 2026-05-08T13:47:16Z

📝 Walkthrough

Walkthrough

Extracts repeated sub-option visibility logic into updateGatewaySettingsVisibility(settings) and updates onGatewayToggle, onToggleSub, and syncRepeat to call this helper; ensures grid containers keep display:grid and newly inserted cadence wrappers remove frm_hidden.

Changes

Gateway Settings Visibility Refactor

Layer / File(s)	Summary
Core Visibility Helper `square/js/action.js`	Introduces `updateGatewaySettingsVisibility(settings)` that centralizes `.frm_trans_sub_opts` visibility control by checking active transaction type and gateway, then toggling `frm_hidden` class and `style.display` for each sub-option container. Non-recurring types hide all sub-options.
Event Handler Integration `square/js/action.js`	`onGatewayToggle` calls the helper after syncing repeat/currency. `onToggleSub` calls the helper inside its `setTimeout`. `syncRepeat` removes `frm_hidden` from the newly created repeat-cadence wrapper's closest `.frm_trans_sub_opts`.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A little rabbit hops through code so sly,

One helper gathers toggles under sky.
Grids stay tidy, hidden bits retreat,
Gateways and repeats now dance in beat.
🎩✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.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
Title check	✅ Passed	The title 'Update gateway setting toggle logic' directly corresponds to the main change: refactoring gateway visibility toggle logic to prevent duplicate recurrence settings from displaying across different gateways (Stripe vs Square).
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 update_gateway_setting_toggle_logic

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 and usage tips.}

deepsource-io · 2026-05-08T13:47:41Z

DeepSource Code Review

We reviewed changes in f42ed06...1b61848 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		May 8, 2026 4:17p.m.	Review ↗
JavaScript		May 8, 2026 4:17p.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-05-08T13:48:07Z

 				function( subOpts ) {
-					subOpts.style.display = 'none';
+					// Check if this setting has a show_* class for the active gateway
+					const hasActiveGatewayClass = subOpts.classList.contains( 'show_' + activeGateway );


Unexpected string concatenation

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

coderabbitai

Actionable comments posted: 2

🤖 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/action.js`:
- Around line 25-29: The show-paths in updateGatewaySettingsVisibility (and the
similar blocks around the other two occurrences) remove the frm_hidden class but
do not clear inline style.display, so elements hidden earlier with style.display
= 'none' remain invisible; update the show logic that handles subOpts (and the
two analogous blocks) to set subOpts.style.display = 'grid' when
subOpts.classList.contains('frm_grid_container') and otherwise reset
subOpts.style.display = '' (or an appropriate default like 'block') so
visibility is fully restored after toggles.
- Line 23: The expression using string concatenation in the contains check for
hasActiveGatewayClass should use a template literal to satisfy
eslint(prefer-template); update the call to subOpts.classList.contains(...) in
the hasActiveGatewayClass assignment to use a template literal like
`show_${activeGateway}` instead of `'show_' + activeGateway` so the variable
hasActiveGatewayClass is computed with the template form.

🪄 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: f1031a66-9ff6-424e-8fe7-41934a3e15d0

📥 Commits

Reviewing files that changed from the base of the PR and between f42ed06 and a18ae98.

📒 Files selected for processing (1)

square/js/action.js

coderabbitai · 2026-05-08T13:49:26Z

 				function( subOpts ) {
-					subOpts.style.display = 'none';
+					// Check if this setting has a show_* class for the active gateway
+					const hasActiveGatewayClass = subOpts.classList.contains( 'show_' + activeGateway );


⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

fd -t f "action.js" --path "*/square/*"

Repository: Strategy11/formidable-forms

Length of output: 305

🏁 Script executed:

find . -name "action.js" -type f | grep -i square

Repository: Strategy11/formidable-forms

Length of output: 93

🏁 Script executed:

cat -n ./square/js/action.js | head -30

Repository: Strategy11/formidable-forms

Length of output: 1461

🏁 Script executed:

find . -name ".eslintrc*" -o -name "eslint.config.*" | head -10

Repository: Strategy11/formidable-forms

Length of output: 91

🏁 Script executed:

cat ./eslint.config.mjs

Repository: Strategy11/formidable-forms

Length of output: 14427

🏁 Script executed:

find . -name "*.yml" -o -name "*.yaml" | grep -E "(workflows|\.github)" | head -10

Repository: Strategy11/formidable-forms

Length of output: 402

🏁 Script executed:

cat ./.github/workflows/oxlint.yml

Repository: Strategy11/formidable-forms

Length of output: 792

🏁 Script executed:

cat ./.github/workflows/jscs.yml

Repository: Strategy11/formidable-forms

Length of output: 1054

Convert string concatenation to template literal

Line 23 is failing CI (eslint(prefer-template)) due to 'show_' + activeGateway. Convert to a template literal to resolve the linting violation.

Suggested fix

- const hasActiveGatewayClass = subOpts.classList.contains( 'show_' + activeGateway ); + const hasActiveGatewayClass = subOpts.classList.contains( `show_${ activeGateway }` );

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

const hasActiveGatewayClass = subOpts.classList.contains( 'show_' + activeGateway );

const hasActiveGatewayClass = subOpts.classList.contains( `show_${ activeGateway }` );

🧰 Tools

🪛 GitHub Actions: Oxlint / 0_Run Oxlint.txt

[error] 23-23: oxlint/eslint(prefer-template): Unexpected string concatenation.

🪛 GitHub Actions: Oxlint / Run Oxlint

[error] 23-23: oxlint reported: Unexpected string concatenation. [Error/eslint(prefer-template)]

🤖 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/action.js` at line 23, The expression using string concatenation in the contains check for hasActiveGatewayClass should use a template literal to satisfy eslint(prefer-template); update the call to subOpts.classList.contains(...) in the hasActiveGatewayClass assignment to use a template literal like `show_${activeGateway}` instead of `'show_' + activeGateway` so the variable hasActiveGatewayClass is computed with the template form.

coderabbitai · 2026-05-08T13:49:26Z

+					if ( hasActiveGatewayClass ) {
+						subOpts.classList.remove( 'frm_hidden' );
+						if ( subOpts.classList.contains( 'frm_grid_container' ) ) {
+							subOpts.style.display = 'grid';
+						}


⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Visible sub-options can stay hidden after mode/gateway switches

updateGatewaySettingsVisibility hides elements via inline style.display = 'none' (Line 55-56), but in the show paths it does not reset style.display for non-grid containers. After toggling away and back, those rows can remain hidden even after removing frm_hidden.

💡 Suggested fix

- if ( hasActiveGatewayClass ) { - subOpts.classList.remove( 'frm_hidden' ); - if ( subOpts.classList.contains( 'frm_grid_container' ) ) { - subOpts.style.display = 'grid'; - } + if ( hasActiveGatewayClass ) { + subOpts.classList.remove( 'frm_hidden' ); + subOpts.style.display = subOpts.classList.contains( 'frm_grid_container' ) ? 'grid' : ''; } else { @@ - } else { - // Show if it has no show_* class (shared setting) - subOpts.classList.remove( 'frm_hidden' ); - if ( subOpts.classList.contains( 'frm_grid_container' ) ) { - subOpts.style.display = 'grid'; - } + } else { + // Show if it has no show_* class (shared setting) + subOpts.classList.remove( 'frm_hidden' ); + subOpts.style.display = subOpts.classList.contains( 'frm_grid_container' ) ? 'grid' : ''; } }

Also applies to: 42-45, 55-56

🤖 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/action.js` around lines 25 - 29, The show-paths in updateGatewaySettingsVisibility (and the similar blocks around the other two occurrences) remove the frm_hidden class but do not clear inline style.display, so elements hidden earlier with style.display = 'none' remain invisible; update the show logic that handles subOpts (and the two analogous blocks) to set subOpts.style.display = 'grid' when subOpts.classList.contains('frm_grid_container') and otherwise reset subOpts.style.display = '' (or an appropriate default like 'block') so visibility is fully restored after toggles.

deepsource-io · 2026-05-08T16:20:12Z

+					// Check if this setting has a show_* class for any active gateway
+					const hasActiveGatewayClass = Array.from( subOpts.classList ).some( function( className ) {
+						return activeGateways.some( function( gateway ) {
+							return className === 'show_' + gateway;


Unexpected string concatenation

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

Update gateway setting toggle logic

a18ae98

Crabcyborg added this to the 6.31 (Form Action Refresh, Form Listing Refresh, PayPal Commerce) milestone May 8, 2026

Crabcyborg added run analysis run tests labels May 8, 2026

deepsource-io Bot reviewed May 8, 2026

View reviewed changes

coderabbitai Bot reviewed May 8, 2026

View reviewed changes

Update logic for possibility of multiple selected gateways

1b61848

Crabcyborg requested a review from garretlaxton May 8, 2026 16:17

deepsource-io Bot reviewed May 8, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update gateway setting toggle logic#3095

Update gateway setting toggle logic#3095
Crabcyborg wants to merge 2 commits intomasterfrom
update_gateway_setting_toggle_logic

Crabcyborg commented May 8, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 8, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

deepsource-io Bot commented May 8, 2026 •

edited

Loading

Uh oh!

deepsource-io Bot May 8, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot May 8, 2026

Uh oh!

coderabbitai Bot May 8, 2026

Uh oh!

deepsource-io Bot May 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	const hasActiveGatewayClass = subOpts.classList.contains( 'show_' + activeGateway );
	const hasActiveGatewayClass = subOpts.classList.contains( `show_${ activeGateway }` );

Conversation

Crabcyborg commented May 8, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

deepsource-io Bot commented May 8, 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!

deepsource-io Bot May 8, 2026

Choose a reason for hiding this comment

Unexpected string concatenation

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot May 8, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot May 8, 2026

Choose a reason for hiding this comment

Uh oh!

deepsource-io Bot May 8, 2026

Choose a reason for hiding this comment

Unexpected string concatenation

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Crabcyborg commented May 8, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 8, 2026 •

edited

Loading

deepsource-io Bot commented May 8, 2026 •

edited

Loading