feat: add mapped name to form field & webhook improvements

Codeinwp · Jun 29, 2023 · 48a2bab · 48a2bab
1 parent 32a0e9f
commit 48a2bab
Show file tree

Hide file tree

Showing 10 changed files with 372 additions and 248 deletions.
diff --git a/inc/render/class-form-multiple-choice.php b/inc/render/class-form-multiple-choice.php
@@ -32,11 +32,12 @@ public function render( $attributes ) {
 		$options_array          = explode( "\n", $options );
 		$is_required            = isset( $attributes['isRequired'] ) ? boolval( $attributes['isRequired'] ) : false;
 		$has_multiple_selection = isset( $attributes['multipleSelection'] ) ? boolval( $attributes['multipleSelection'] ) : false;
+		$mapped_name            = isset( $attributes['mappedName'] ) ? $attributes['mappedName'] : $id;
 
 		$output = '<div class="' . $class_names . '" id="' . $id . '">';
 
 		if ( 'select' === $field_type ) {
-			$output .= $this->render_select_field( $label, $options_array, $id, $has_multiple_selection, $is_required );
+			$output .= $this->render_select_field( $label, $options_array, $id, $mapped_name, $has_multiple_selection, $is_required );
 		} else {
 			$output .= '<label class="otter-form-input-label" >' . $label . $this->render_required_sign( $is_required ) . '</label>';
 
@@ -50,7 +51,7 @@ public function render( $attributes ) {
 				$field_value = implode( '_', explode( ' ', sanitize_title( $field_label ) ) );
 				$field_id    = 'field-' . $field_value;
 
-				$output .= $this->render_field( $field_type, $field_label, $field_value, $id, $field_id, $is_required );
+				$output .= $this->render_field( $field_type, $field_label, $field_value, $mapped_name, $field_id, $is_required );
 			}
 
 			$output .= '</div>';
@@ -90,13 +91,14 @@ public function render_field( $type, $label, $value, $name, $id, $is_required =
 	 * @param string $label The label of the field.
 	 * @param array  $options_array The options of the field.
 	 * @param string $id The id of the field.
+	 * @param string $name The name of the field.
 	 * @param bool   $is_multiple The multiple status of the field.
 	 * @param bool   $is_required The required status of the field.
 	 * @return string
 	 */
-	public function render_select_field( $label, $options_array, $id, $is_multiple, $is_required ) {
+	public function render_select_field( $label, $options_array, $id, $name, $is_multiple, $is_required ) {
 		$output  = '<label class="otter-form-input-label" for="' . $id . '" >' . $label . $this->render_required_sign( $is_required ) . '</label>';
-		$output .= '<select id="' . $id . '" ' . ( $is_multiple ? ' multiple ' : '' ) . ( $is_required ? ' required ' : '' ) . '>';
+		$output .= '<select id="' . $id . '" ' . ( $is_multiple ? ' multiple ' : '' ) . ( $is_required ? ' required ' : '' ) . ' name="' . $name . '">';
 
 		foreach ( $options_array as $field_label ) {
 
@@ -114,7 +116,7 @@ public function render_select_field( $label, $options_array, $id, $is_multiple,
 
 	/**
 	 * Render the required sign.
-	 * 
+	 *
 	 * @param bool $is_required The required status of the field.
 	 * @return string
 	 */

diff --git a/plugins/otter-pro/inc/plugins/class-form-pro-features.php b/plugins/otter-pro/inc/plugins/class-form-pro-features.php
@@ -397,13 +397,55 @@ public function trigger_webhook( $form_data ) {
 				}
 
 				$payload = array();
-				$inputs  = $form_data->get_form_inputs();
+
+				$inputs         = $form_data->get_form_inputs();
+				$uploaded_files = $form_data->get_uploaded_files_path();
+				$media_files    = $form_data->get_files_loaded_to_media_library();
 
 				foreach ( $inputs as $input ) {
 					if ( isset( $input['id'] ) && isset( $input['value'] ) ) {
-						$input['id'] = str_replace( 'wp-block-themeisle-blocks-form-', '', $input['id'] );
+						$key   = str_replace( 'wp-block-themeisle-blocks-form-', '', $input['id'] );
+						$value = $input['value'];
+
+						if ( ! empty( $input['metadata']['mappedName'] ) ) {
+							$key = $input['metadata']['mappedName'];
+						}
+
+						$is_file_field = ! empty( $input['type'] ) && 'file' === $input['type'];
+
+						if ( $is_file_field && ! empty( $input['metadata']['data'] ) ) {
+							$file_data_key = $input['metadata']['data'];
+
+							if ( ! empty( $uploaded_files[ $file_data_key ] ) ) {
+								$value = $uploaded_files[ $file_data_key ]['file_path'];
 
-						$payload[ $input['id'] ] = $input['value'];
+								/**
+								 * If the file was uploaded to the media library, we use the URL instead of the path.
+								 */
+								if ( ! empty( $uploaded_files[ $file_data_key ]['file_url'] ) ) {
+									$value = $uploaded_files[ $file_data_key ]['file_url'];
+								}
+							}
+						}
+
+
+						if ( array_key_exists( $key, $payload ) ) {
+							if ( is_array( $payload[ $key ] ) ) {
+								$payload[ $key ][] = $value;
+							} else {
+								/**
+								 * Overwrite the value if it's not an array.
+								 */
+								$payload[ $key ] = $value;
+							}
+						} elseif ( $is_file_field ) {
+							/**
+							 * If the field is a file field, we need to make sure the value is an array.
+							 */
+							$payload[ $key ] = array( $value );
+						} else {
+							$payload[ $key ] = $value;
+						}
 					}
 				}
 

diff --git a/plugins/otter-pro/inc/render/class-form-file-block.php b/plugins/otter-pro/inc/render/class-form-file-block.php
@@ -37,12 +37,13 @@ public function render( $attributes ) {
 		$has_multiple_files = isset( $attributes['multipleFiles'] ) && boolval( $attributes['multipleFiles'] ) && ( ! isset( $attributes['maxFilesNumber'] ) || intval( $attributes['maxFilesNumber'] ) > 1 );
 		$allowed_files      = isset( $attributes['allowedFileTypes'] ) ? implode( ',', $attributes['allowedFileTypes'] ) : '';
 
-		$output = '<div class="' . $class_names . '" id="' . $id . '">';
+		$output      = '<div class="' . $class_names . '" id="' . $id . '">';
+		$mapped_name = isset( $attributes['mappedName'] ) ? $attributes['mappedName'] : 'field-' . $id;
 
-		$output .= '<label class="otter-form-input-label" for="field-' . $id . '" >' . $label . $this->render_required_sign( $is_required ) . '</label>';
+		$output .= '<label class="otter-form-input-label" for="' . $mapped_name . '" >' . $label . $this->render_required_sign( $is_required ) . '</label>';
 
-		$output .= '<input type="file" class="otter-form-input" name="field-'
-		. $id . '" '
+		$output .= '<input type="file" class="otter-form-input" name="'
+		. $mapped_name . '" '
 		. ( $is_required ? 'required ' : '' ) . ' '
 		. ( $has_multiple_files ? 'multiple ' : '' )
 		. ( isset( $attributes['allowedFileTypes'] ) ? ( ' accept="' . $allowed_files ) . '"' : '' )

diff --git a/src/blocks/blocks/form/file/inspector.js b/src/blocks/blocks/form/file/inspector.js
@@ -24,7 +24,7 @@ import { Fragment, useContext } from '@wordpress/element';
 import { fieldTypesOptions, HideFieldLabelToggle, switchFormFieldTo } from '../common';
 import { FormContext } from '../edit';
 import { setUtm } from '../../../helpers/helper-functions';
-import { Notice } from '../../../components';
+import { HTMLAnchorControl, Notice } from '../../../components';
 
 const ProPreview = ({ attributes }) => {
 
@@ -68,6 +68,14 @@ const ProPreview = ({ attributes }) => {
 					onChange={ () => {} }
 				/>
 
+				<TextControl
+					label={ __( 'Mapped Name', 'otter-blocks' ) }
+					help={ __( 'Allow easy identification of the field with features like: webhooks', 'otter-blocks' ) }
+					value={ attributes.mappedName }
+					onChange={ () => {} }
+					placeholder={ __( 'photos', 'otter-blocks' ) }
+				/>
+
 				<ToggleControl
 					label={ __( 'Allow multiple file uploads', 'otter-blocks' ) }
 					checked={ attributes.multipleFiles }
@@ -118,45 +126,52 @@ const Inspector = ({
 	} = useContext( FormContext );
 
 	return (
-		<InspectorControls>
-			<PanelBody
-				title={ __( 'Field Settings', 'otter-blocks' ) }
-			>
-				<Button
-					isSecondary
-					variant="secondary"
-					onClick={ () => selectForm?.() }
+		<Fragment>
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Field Settings', 'otter-blocks' ) }
 				>
-					{ __( 'Back to the Form', 'otter-blocks' ) }
-				</Button>
-
-				<SelectControl
-					label={ __( 'Field Type', 'otter-blocks' ) }
-					value={ attributes.type }
-					options={ fieldTypesOptions() }
-					onChange={ type => {
-						if ( 'file' !== type ) {
-							switchFormFieldTo( type, clientId, attributes );
+					<Button
+						isSecondary
+						variant="secondary"
+						onClick={ () => selectForm?.() }
+					>
+						{ __( 'Back to the Form', 'otter-blocks' ) }
+					</Button>
+
+					<SelectControl
+						label={ __( 'Field Type', 'otter-blocks' ) }
+						value={ attributes.type }
+						options={ fieldTypesOptions() }
+						onChange={ type => {
+							if ( 'file' !== type ) {
+								switchFormFieldTo( type, clientId, attributes );
+							}
+						}}
+					/>
+
+					<ProPreview attributes={ attributes } />
+
+				</PanelBody>
+
+				<PanelColorSettings
+					title={ __( 'Color', 'otter-blocks' ) }
+					initialOpen={ false }
+					colorSettings={ [
+						{
+							value: attributes.labelColor,
+							onChange: () => {},
+							label: __( 'Label Color', 'otter-blocks' )
 						}
-					}}
+					] }
 				/>
-
-				<ProPreview attributes={ attributes } />
-
-			</PanelBody>
-
-			<PanelColorSettings
-				title={ __( 'Color', 'otter-blocks' ) }
-				initialOpen={ false }
-				colorSettings={ [
-					{
-						value: attributes.labelColor,
-						onChange: () => {},
-						label: __( 'Label Color', 'otter-blocks' )
-					}
-				] }
+			</InspectorControls>
+			<HTMLAnchorControl
+				value={ attributes.id }
+				onChange={ value => setAttributes({ id: value }) }
 			/>
-		</InspectorControls>
+		</Fragment>
+
 	);
 };