fix: preserve wallet settings on accordion expand/collapse

[itsaryanchauhan]

Untitled.2.mov

Type of Change

• Bugfix
• New feature
• Enhancement
• Refactoring
• Dependency updates
• Documentation
• CI/CD

Description

This PR fixes a bug where entering configurations for a wallet (e.g., Google Pay), clicking "Proceed" to collapse/save, and then expanding another wallet accordion (e.g., Apple Pay) would reset/clear the entered credentials for the first wallet.

Changes:

1. Prevented Component Unmounting (V1 and V2 flow):
   • Modified OtherPaymentMethod.res (V2) and PaymentMethod.res (V1) to pass the loop-item-specific value (pmtData.payment_method_subtype / value.payment_method_type) to the pmtName prop of <AdditionalDetailsSidebar> instead of using the shared parent component state (selectedWallet.payment_method_subtype / selectedWallet.payment_method_type).
   • This keeps the correct child component mounted when other accordions expand, preserving React Final Form fields registration and state.
2. Removed Reset on Collapse (V1 and V2 flow):
   • Removed the onItemCollapseClick callback from AccordionAdapter items in both files. Collapsing the accordion programmatically (upon clicking Proceed) or manually should not trigger a reset of form values or disable the payment method (relying instead on the Cancel button to reset, and the Checkbox to disable).
3. Standardized Checkbox Selection (V1 flow):
   • Updated the checkbox click handler in PaymentMethod.res to handleCheckboxClick (removing the BankDebit check) so that wallets can be explicitly checked/unchecked directly. This prevents the previous issue where expanding a new wallet under singleOpen=true would disable the previously open wallet.

Motivation and Context

Fixes #4212.
When configuring multiple wallets (like Google Pay and Apple Pay), the user should be able to configure one, close it, and proceed to the next without having their previously entered configuration details wiped out by shared state changes or collapse callbacks.

How did you test it?

Tested manually on local development server against sandbox:

1. Navigated to updating connector payment methods for Stripe.
2. Configured Google Pay, clicked Proceed.
3. Opened Apple Pay accordion.
4. Confirmed that Google Pay configurations were not cleared and remained correctly in the form state and update API payload.

Where to test it?

• INTEG
• SANDBOX
• PROD

Backend Dependency

• Yes
• No

Backend PR URL: N/A

Feature Flag

• New feature flag added
• Existing feature flag updated
• No feature flag changes

Feature flag name(s): N/A

Checklist

• I ran npm run re:build
• I reviewed submitted code
• I added unit tests for my changes where possible

[semanticdiff-com]

Review changes with  

Changed Files

File	Status
playwright-tests/e2e/4-connectors/payinConnector.spec.ts	0% smaller
src/fragments/ConnectorFragments/ConnectorPaymentMethodv2/Sections/OtherPaymentMethod.res	Unsupported file format
src/screens/Connectors/PaymentProcessor/ConnectorUIUtils/PaymentMethod.res	Unsupported file format

[XyneSpaces]

Review Summary

Classification: Bugfix — Wallet Settings Persistence on Accordion State Change
Risk Level: Medium (state management change affecting V1 and V2 payment method flows)
Files Changed: 2 files (connector payment method configuration UI)

---

Verification Against Control Center Checklist

Tier 1 — High Signal:

✅ Naming Consistency — Function rename from handleBankDebitCheckboxClick to handleCheckboxClick is clearer and matches generalized usage
✅ No feature flag gating needed — This is a bugfix that corrects unintended behavior
✅ Blast radius considered — Changes affect both V1 (PaymentMethod.res) and V2 (OtherPaymentMethod.res) flows consistently

---

Findings

✅ Core fix is sound

The PR addresses the root cause correctly:

• Problem: Using shared selectedWallet state for pmtName caused component remounting when accordion state changed
• Solution: Using loop-local pmtData.payment_method_subtype / value.payment_method_type preserves component identity

✅ Removing collapse callback is correct

The removal of onItemCollapseClick handlers that called resetValues() / removeSelectedWallet() aligns with the intended UX:

• Collapsing = visual toggle only
• Cancel button = explicit reset
• Checkbox = explicit enable/disable

---

Suggestions

💡 Consider backward compatibility edge case

If a wallet was previously configured and the user opens it again, verify that:

1. The form pre-populates with existing values correctly
2. The checkbox state reflects the "already enabled" status

The PR description confirms manual testing covered this scenario.

💡 Test coverage recommendation

Since this fixes a regression-prone area (accordion state + form persistence), consider adding a Playwright/Cypress test that:

1. Opens wallet A, enters config, clicks Proceed
2. Opens wallet B
3. Asserts wallet A's form values persist

---

Positive Notes

• Clean, minimal fix that addresses the exact bug described
• Both V1 and V2 flows updated consistently
• Handler naming improved (handleCheckboxClick vs handleBankDebitCheckboxClick)
• Manual testing documented thoroughly in PR description

---

Verdict: ✅ Approve — Clean bugfix with correct approach. The state management change from shared selectedWallet to loop-local values correctly prevents unwanted component remounting while preserving React Final Form state.

[XyneSpaces]

Review Summary

Classification: Bugfix — Wallet Form State Persistence
Risk Level: Medium (form state management, React Final Form integration)
Files Changed: 2 files (OtherPaymentMethod.res, PaymentMethod.res)

Overview

This PR fixes a legitimate bug where wallet configuration form values were being reset when expanding/collapsing accordions. The fix changes from shared parent state (selectedWallet) to loop-item-specific values (pmtData/value) for the pmtName prop, preventing unwanted component unmounting.

---

Findings

Severity	Count
⚠️ Warning	2
💡 Suggestion	1

---

Inline Findings

File: OtherPaymentMethod.res (Line ~229)

⚠️ Potential state desynchronization in AdditionalDetailsSidebar props

The AdditionalDetailsSidebar receives:

• pmtName={pmtData.payment_method_subtype} (correct — loop-item value)
• method={None} (hardcoded)
• onCloseClickCustomFun={resetValues} (calls form.reset)

However, selectedWallet state is still set in onClick and used in updateDetails. Ensure that when the accordion collapses via closeAccordionFn, the selectedWallet state is properly reset to prevent stale data if the same accordion is reopened.

Fix: Clear selectedWallet in resetValues or derive from pmtName in updateDetails.

---

File: PaymentMethod.res (Line ~588)

⚠️ selectedWallet may be stale when AdditionalDetailsSidebar renders

The AdditionalDetailsSidebar receives:

• pmtName={value.payment_method_type} (correct — loop-item value)
• method={Some(selectedWallet)} (shared state — may be stale)

If user clicks wallet A (sets selectedWallet=A), then rapidly clicks wallet B before the effect runs, the sidebar may render with pmtName=B but method=A.

Fix: Use value directly instead of selectedWallet for the method prop:

method={Some(value)}

---

File: PaymentMethod.res (Line ~600)

💡 Handler renamed consistently — verify no other call sites affected

The rename from handleBankDebitCheckboxClick to handleCheckboxClick is cleaner. Confirm no other files import or reference the old name. The removal of the BankDebit special-case check is appropriate given wallets now use the same explicit checkbox pattern.

---

Verdict

✅ Comment — Clean bugfix with correct approach. Address the potential selectedWallet stale state issue before merge to prevent race conditions during rapid user interactions.

[itsaryanchauhan]

Update: Fixed Playwright test failures

My change keeps the mounted in the DOM when collapsed (which is necessary to prevent resetting the React Final Form state). This caused Playwright's broad .getByText() selectors to break in two ways:

1. Strict mode violations - hidden input labels containing "Apple Pay" and "Google Pay" remained in the DOM, so .click() matched multiple elements. Fixed by using .first() on the accordion header clicks.
2. Wrong nth() indices - Before the bugfix, pmtName={selectedWallet.payment_method_subtype} caused all 5 wallet sidebars (Apple Pay, Google Pay, Samsung Pay, Paze, AmazonPay) to simultaneously render the same content when any one was clicked. So clicking Apple Pay made all 5 sidebars render - "Web Domain" appeared 5x in the DOM, "Payment Gateway" appeared 5x. The original tests were written against this (buggy) behavior, which is why nth(2), nth(1), nth(4) worked. After the fix, each sidebar correctly renders only its own wallet's content - so "Web Domain" and "Payment Gateway" each appear exactly once. Updated all inner selectors to use .first().