feat: clone a connector across profiles within a merchant

[kanikabansal08]

Type of Change

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

Description

Adds a Clone connector action on the connector preview page that copies a connector's configuration from one business profile into another profile of the same merchant, via POST /user/connectors/clone.

• New #CLONE_CONNECTOR user route mapping to user/connectors/clone.
• New connector_clone_allow_list feature flag (array of connector names) that controls which connectors expose the action.
• The action is shown only when all hold: the connector is on the allowlist, the user is an org/merchant admin, and the session is not embedded.
• Clone modal:
  • Source connector (read-only) → destination profile picker (excludes the source profile).
  • Required new connector label so the clone is uniquely identifiable in the destination profile.
  • "Included in the clone" (credentials, webhook, payment methods, label) and "not copied" (wallet, FRM, external auth) guidance, mirroring backend behaviour.
  • Built with Form + FormRenderer.FieldRenderer/SubmitButton — required-field validation and submit-disabling are native.
• Drive-by fix: Modal no longer renders an empty description block (and its padding) when no description is provided.

Screen.Recording.2026-06-09.at.4.48.47.PM.mov

Motivation and Context

Merchants with multiple profiles currently have to re-create a connector by hand in each profile. This lets them clone an existing connector's setup into another profile in a couple of clicks, while making clear which settings carry over and which need re-configuration.

How did you test it?

• npm run re:build (full clean build passes).
• Manual UI testing on the connector preview: allowlist/role/embedded gating, destination picker, required label + disabled submit, success/error toasts, and modal open/close.

Where to test it?

• INTEG
• SANDBOX
• PROD

Requires the backend connector_clone_config to be enabled; otherwise the route is unmounted and returns 404.

Backend Dependency

• Yes
• No

Backend PR URL: depends on POST /user/connectors/clone (ProfileConnectorWrite, org/merchant admin only).

Feature Flag

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

Feature flag name(s): connector_clone_allow_list

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  

[XyneSpaces]

Automated Review Summary

PR: feat: clone a connector across profiles within a merchant
Reviewer: XyneSpaces Automation

Findings

Found 3 issues requiring changes:

1. Critical: Error handling silently swallows all errors in the onSubmit catch block
2. Warning: Mixpanel event lacks required metadata
3. Warning: Typography module classes not used correctly for text styling

Please address the inline comments below.

[XyneSpaces]

🚨 Silent error swallowing violates error handling rules. The catch block on lines 75-76 discards all errors without user notification or logging.

Fix: Replace the empty catch block with proper error handling:

catch {
| Exn.Error(exn) => {
    showToast(~message="Failed to clone connector. Please try again.", ~toastType=ToastError)
    logger.error(~message="Connector clone failed", ~data=exn)
  }
}

[XyneSpaces]

⚠️ Mixpanel event lacks required metadata. Line 54 sends only the event name without context that would help analyze clone usage.

Fix: Enrich the event with relevant identifiers:

mixpanelEvent(
  ~eventName=`processor_clone_${connectorInfo.connector_name}`,
  ~props=Dict.make()
    ->Dict.set("connector_name", connectorInfo.connector_name->JSON.Encode.string)
    ->Dict.set("source_profile_id", connectorInfo.profile_id->JSON.Encode.string)
    ->JSON.Encode.object
)

[XyneSpaces]

💡 Typography module classes should be used for text styling. Lines 69, 80, 86 use {body.sm.semibold} inline instead of applying Typography module classes to the elements.

Fix: Use the Typography module pattern consistently:

// Instead of inline interpolation:
p className={`${body.sm.semibold} text-nd_gray-400`}

// Open Typography at module top and use:
p className={`${Typography.body.sm.semibold} text-nd_gray-400`}

See existing patterns in sibling files for reference.