Fix fields for pix payout (#5428)

Co-authored-by: Creeperkatze <178587183+Creeperkatze@users.noreply.github.com>

Author: creeperkatze

apps/frontend/src/components/ui/dashboard/withdraw-stages/MuralpayDetailsStage.vue

@@ -100,7 +100,7 @@
 			/>
 		</div>
 
-		<div v-for="field in selectedRail?.fields" :key="field.name" class="flex flex-col gap-2.5">
+		<div v-for="field in visibleFields" :key="field.name" class="flex flex-col gap-2.5">
 			<label>
 				<span class="text-md font-semibold text-contrast">
 					{{ formatMessage(field.label) }}
@@ -398,6 +398,26 @@ const isBusinessEntity = computed(() => {
 	return providerDataValue.kycData?.type === 'business'
 })
 
+const visibleFields = computed(() => {
+	const rail = selectedRail.value
+	if (!rail) return []
+
+	return rail.fields.filter((field) => {
+		if (!field.dependsOn) return true
+
+		const { field: dependsOnField, value: dependsOnValue } = field.dependsOn
+		const currentValue = formData.value[dependsOnField]
+
+		if (!currentValue) return false
+
+		if (Array.isArray(dependsOnValue)) {
+			return dependsOnValue.includes(currentValue)
+		} else {
+			return currentValue === dependsOnValue
+		}
+	})
+})
+
 const allRequiredFieldsFilled = computed(() => {
 	const rail = selectedRail.value
 	if (!rail) return false
@@ -407,7 +427,7 @@ const allRequiredFieldsFilled = computed(() => {
 
 	if (rail.requiresBankName && !formData.value.bankName) return false
 
-	const requiredFields = rail.fields.filter((f) => f.required)
+	const requiredFields = visibleFields.value.filter((f) => f.required)
 	const allRequiredPresent = requiredFields.every((f) => {
 		const value = formData.value[f.name]
 		return value !== undefined && value !== null && value !== ''

apps/frontend/src/utils/muralpay-rails.ts

@@ -13,6 +13,10 @@ export interface FieldConfig {
 	pattern?: string
 	validate?: (value: string) => string | null
 	autocomplete?: string
+	dependsOn?: {
+		field: string
+		value?: string | string[]
+	}
 }
 
 export interface RailConfig {
@@ -330,6 +334,10 @@ export const MURALPAY_RAILS: Record<string, RailConfig> = {
 					defaultMessage: 'Enter PIX email',
 				}),
 				autocomplete: 'email',
+				dependsOn: {
+					field: 'pixAccountType',
+					value: 'EMAIL',
+				},
 			},
 			{
 				name: 'pixPhone',
@@ -341,6 +349,10 @@ export const MURALPAY_RAILS: Record<string, RailConfig> = {
 					defaultMessage: '+55...',
 				}),
 				autocomplete: 'tel',
+				dependsOn: {
+					field: 'pixAccountType',
+					value: 'PHONE',
+				},
 			},
 			{
 				name: 'branchCode',
@@ -352,6 +364,10 @@ export const MURALPAY_RAILS: Record<string, RailConfig> = {
 					defaultMessage: 'Enter branch code',
 				}),
 				autocomplete: 'off',
+				dependsOn: {
+					field: 'pixAccountType',
+					value: 'BANK_ACCOUNT',
+				},
 			},
 			{
 				name: 'documentNumber',
@@ -367,6 +383,10 @@ export const MURALPAY_RAILS: Record<string, RailConfig> = {
 					defaultMessage: 'Brazilian tax identification number',
 				}),
 				autocomplete: 'off',
+				dependsOn: {
+					field: 'pixAccountType',
+					value: 'DOCUMENT',
+				},
 			},
 		],
 	},