Fix(content-restriction): show field options in URM Form Field condition rules and center add/remove icons [UR-4514] (#1345)

Author: MILAN88888

assets/css/urcr-shared.scss

@@ -309,11 +309,28 @@ $border-color_6: #475bb2;
 						}
 
 						.button {
+							display: inline-flex !important;
+							align-items: center;
+							justify-content: center;
 							width: 28px !important;
 							min-width: 28px !important;
 							min-height: 26px !important;
 							background: #eeeeee !important;
 
+							.dashicons {
+								display: flex !important;
+								align-items: center;
+								justify-content: center;
+								width: 20px !important;
+								height: 20px !important;
+								line-height: 20px !important;
+
+								&::before {
+									font-size: 18px !important;
+									line-height: 20px !important;
+								}
+							}
+
 							&.urcr-remove-field-button {
 								margin-left: 0;
 

modules/content-restriction/admin/class-urcr-admin-assets.php

@@ -137,7 +137,11 @@ public static function get_localized_data() {
 				if( !empty($data['field_key']) && "membership" === $data['field_key'] ) {
 					continue;
 				}
-				$form_fields[ $field_name ] = $data['label'];
+				$form_fields[ $field_name ] = array(
+					'label'   => isset( $data['label'] ) ? $data['label'] : $field_name,
+					'type'    => isset( $data['type'] ) ? $data['type'] : '',
+					'options' => isset( $data['options'] ) ? $data['options'] : array(),
+				);
 			}
 			$ur_forms[ $form_id ] = $form_fields;
 		}

src/content-restriction/components/inputs/ConditionValueInput.js

@@ -184,7 +184,8 @@ const ConditionValueInput = ({ type, field, value, operator, onChange, uniqueId,
 				// Add form fields from ur_form_data
 				Object.entries(urFormData).forEach(([formId, formFields]) => {
 					if (formFields && typeof formFields === 'object') {
-						Object.entries(formFields).forEach(([fieldName, fieldLabel]) => {
+						Object.entries(formFields).forEach(([fieldName, fieldData]) => {
+							const fieldLabel = fieldData && typeof fieldData === "object" ? fieldData.label : fieldData;
 							formOptions.push({
 								value: `${formId}:${fieldName}`,
 								label: `${urForms[formId] || formId} - ${fieldLabel || fieldName}`,

src/content-restriction/components/inputs/FormFieldValueInput.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { __ } from "@wordpress/i18n";
+
+/**
+ * Value widget for a single "URM Form Field" condition row.
+ *
+ * When the selected form field carries a fixed set of choices (select / radio /
+ * checkbox / country, etc.), render a dropdown of those options. Otherwise fall
+ * back to a free-text input. The value is always a single scalar string so it
+ * matches the server-side `===` comparison in functions-urcr-core.php.
+ *
+ * @param {Object}   props.fieldMeta Field meta from ur_form_data, e.g. { label, type, options }.
+ * @param {string}   props.value     Current stored value.
+ * @param {Function} props.onChange  Called with the new scalar value.
+ * @param {boolean}  props.disabled  Whether the control is disabled.
+ * @param {Object}   props.style     Inline style forwarded to the control (width, etc.).
+ */
+const FormFieldValueInput = ({ fieldMeta, value, onChange, disabled = false, style = {} }) => {
+	const options =
+		fieldMeta && fieldMeta.options && typeof fieldMeta.options === "object"
+			? fieldMeta.options
+			: {};
+	const optionEntries = Object.entries(options);
+
+	if (optionEntries.length > 0) {
+		return (
+			<select
+				className="components-select-control__input urcr-condition-value-input urcr-condition-value-select"
+				value={value || ""}
+				onChange={(e) => onChange(e.target.value)}
+				disabled={disabled}
+				style={style}
+			>
+				<option value="">{__("Select value", "user-registration")}</option>
+				{optionEntries.map(([optValue, optLabel]) => (
+					<option key={optValue} value={optValue}>
+						{optLabel || optValue}
+					</option>
+				))}
+			</select>
+		);
+	}
+
+	return (
+		<input
+			type="text"
+			className="components-text-control__input urcr-condition-value-input urcr-condition-value-text"
+			value={value || ""}
+			onChange={(e) => onChange(e.target.value)}
+			placeholder={__("Enter value", "user-registration")}
+			disabled={disabled}
+			style={style}
+		/>
+	);
+};
+
+export default FormFieldValueInput;

src/content-restriction/components/rules/URFormFieldCondition.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import { __ } from "@wordpress/i18n";
 import { getURCRData } from "../../utils/localized-data";
+import FormFieldValueInput from "../inputs/FormFieldValueInput";
 
 const URFormFieldCondition = ({
 	condition,
@@ -94,9 +95,9 @@ const URFormFieldCondition = ({
 			return [];
 		}
 		const fields = urFormData[formId];
-		return Object.entries(fields).map(([fieldName, fieldLabel]) => ({
+		return Object.entries(fields).map(([fieldName, fieldData]) => ({
 			value: fieldName,
-			label: fieldLabel || fieldName
+			label: (fieldData && typeof fieldData === "object" ? fieldData.label : fieldData) || fieldName
 		}));
 	};
 
@@ -199,14 +200,12 @@ const URFormFieldCondition = ({
 
 							{(field.operator !== "empty" && field.operator !== "not empty") && (
 								<div className="urcr-form-field-value ur-flex-1" style={{ minWidth: 0 }}>
-									<input
-										type="text"
-										className="components-text-control__input urcr-condition-value-input urcr-condition-value-text"
-										value={field.value || ""}
-										onChange={(e) => handleFieldUpdate(index, { value: e.target.value })}
-										placeholder={__("Enter value", "user-registration")}
+									<FormFieldValueInput
+										fieldMeta={urFormData[formId] ? urFormData[formId][field.field_name] : null}
+										value={field.value}
+										onChange={(newValue) => handleFieldUpdate(index, { value: newValue })}
 										disabled={disabled}
-										style={{ width: "150px" }}
+										style={{ width: "100%" }}
 									/>
 								</div>
 							)}