feat(admin): collapsible gateway credential forms on payment page

Hide channel config cards until enabled; open expanded on enable and allow manual collapse via group header.

assets/admin/src/components/form/AksFormRenderer.vue

@@ -44,13 +44,14 @@
 
     <!-- Form content -->
     <template v-else-if="schema && schema.length">
-      <template v-for="group in filteredSchema" :key="group.key || group.title">
+      <template v-for="group in filteredSchema" :key="groupKey(group)">
         <AksFieldGroup
+          v-if="isGroupVisible(group)"
           :title="group.title"
           :description="group.description"
           :icon="group.icon"
-          :collapsible="group.collapsible"
-          :default-collapsed="group.defaultCollapsed"
+          :collapsible="!!group.collapsible"
+          :default-collapsed="resolveGroupCollapsed(group)"
         >
           <template v-if="group.fields">
             <template v-for="field in group.fields" :key="field.key">
@@ -164,25 +165,55 @@ const emit = defineEmits(['update:formData', 'save', 'reload'])
 
 const searchQuery = ref('')
 
-/** Check if a field should be visible based on its dependsOn rule */
-function isFieldVisible(field) {
-  if (!field.dependsOn) return true
-
-  // dependsOn can be a string (truthy check on that key) or an object { key, value }
-  if (typeof field.dependsOn === 'string') {
-    return !!props.formData[field.dependsOn]
+/** Evaluate dependsOn rule against current form data */
+function matchDependsOn(dependsOn) {
+  if (!dependsOn) return true
+  if (typeof dependsOn === 'string') {
+    return !!props.formData[dependsOn]
   }
-
-  if (typeof field.dependsOn === 'object') {
-    const { key, value, not } = field.dependsOn
+  if (typeof dependsOn === 'object') {
+    const { key, value, not } = dependsOn
     const currentVal = props.formData[key]
     if (not) return currentVal !== value
-    return currentVal === value
+    // Loose equality so true matches 1 / '1' from some option stores.
+    // eslint-disable-next-line eqeqeq
+    return currentVal == value || (!!value === true && !!currentVal)
   }
-
   return true
 }
 
+/** Check if a field should be visible based on its dependsOn rule */
+function isFieldVisible(field) {
+  return matchDependsOn(field.dependsOn)
+}
+
+/** Whole group can be hidden (e.g. optional advanced blocks). */
+function isGroupVisible(group) {
+  return matchDependsOn(group.dependsOn)
+}
+
+/**
+ * Collapse preference for a group.
+ * - expandWhen: form key; when truthy, start expanded (channel just enabled → open form)
+ * - defaultCollapsed: static default
+ */
+function resolveGroupCollapsed(group) {
+  if (group.expandWhen) {
+    const on = !!props.formData?.[group.expandWhen]
+    return !on
+  }
+  return !!group.defaultCollapsed
+}
+
+/** Stable key; remount when expandWhen flips so newly enabled channels open expanded. */
+function groupKey(group) {
+  const base = group.key || group.title || 'group'
+  if (group.expandWhen) {
+    return `${base}:${props.formData?.[group.expandWhen] ? 'on' : 'off'}`
+  }
+  return base
+}
+
 /** Get field value from formData */
 function getFieldValue(key) {
   return props.formData?.[key]