🐛 Settings UI: Fix Feature button links

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js

@@ -1,58 +1,40 @@
 import { Button } from '@wordpress/components';
-
 import { Header, Title, Action, Description } from '../Elements';
 import SettingsBlock from '../SettingsBlock';
 import TitleBadge from '../TitleBadge';
+import { CommonHooks } from '../../../data';
 
+/**
+ * Renders a feature settings block with title, description, and action buttons.
+ *
+ * @param {Object} props             Component properties
+ * @param {string} props.title       The feature title
+ * @param {string} props.description HTML description of the feature
+ * @return {JSX.Element} The rendered component
+ */
 const FeatureSettingsBlock = ( { title, description, ...props } ) => {
-	const printNotes = () => {
-		const notes = props.actionProps?.notes;
-		if ( ! notes || ( Array.isArray( notes ) && notes.length === 0 ) ) {
-			return null;
+	const { actionProps } = props;
+	const { isSandbox } = CommonHooks.useMerchant();
+
+	/**
+	 * Gets the appropriate URL for a button based on environment
+	 * Always prioritizes urls object over url when it exists
+	 *
+	 * @param {Object} buttonData                The button configuration object
+	 * @param {string} [buttonData.url]          Single URL for the button
+	 * @param {Object} [buttonData.urls]         Environment-specific URLs
+	 * @param {string} [buttonData.urls.sandbox] URL for sandbox environment
+	 * @param {string} [buttonData.urls.live]    URL for live environment
+	 * @return {string|undefined} The appropriate URL to use for the button
+	 */
+	const getButtonUrl = ( buttonData ) => {
+		const { url, urls } = buttonData;
+
+		if ( urls ) {
+			return isSandbox ? urls.sandbox : urls.live;
 		}
 
-		return (
-			<span className="ppcp--item-notes">
-				{ notes.map( ( note, index ) => (
-					<span key={ index }>{ note }</span>
-				) ) }
-			</span>
-		);
-	};
-
-	const FeatureButton = ( {
-		className,
-		variant,
-		text,
-		isBusy,
-		url,
-		urls,
-		onClick,
-	} ) => {
-		const buttonProps = {
-			className,
-			isBusy,
-			variant,
-		};
-
-		if ( url || urls ) {
-			buttonProps.href = urls ? urls.live : url;
-			buttonProps.target = '_blank';
-		}
-		if ( ! buttonProps.href ) {
-			buttonProps.onClick = onClick;
-		}
-
-		return <Button { ...buttonProps }>{ text }</Button>;
-	};
-
-	const renderDescription = () => {
-		return (
-			<span
-				className="ppcp-r-feature-item__description ppcp-r-settings-block__feature__description"
-				dangerouslySetInnerHTML={ { __html: description } }
-			/>
-		);
+		return url;
 	};
 
 	return (
@@ -60,38 +42,52 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 			<Header>
 				<Title>
 					{ title }
-					{ props.actionProps?.enabled && (
-						<TitleBadge { ...props.actionProps?.badge } />
+					{ actionProps?.enabled && (
+						<TitleBadge { ...actionProps?.badge } />
 					) }
 				</Title>
 				<Description className="ppcp-r-settings-block__feature__description">
-					{ renderDescription() }
-					{ printNotes() }
+					<span
+						className="ppcp-r-feature-item__description"
+						dangerouslySetInnerHTML={ { __html: description } }
+					/>
+
+					{ actionProps?.notes?.length > 0 && (
+						<span className="ppcp--item-notes">
+							{ actionProps.notes.map( ( note, index ) => (
+								<span key={ index }>{ note }</span>
+							) ) }
+						</span>
+					) }
 				</Description>
 			</Header>
+
 			<Action>
 				<div className="ppcp--action-buttons">
-					{ props.actionProps?.buttons.map(
-						( {
+					{ actionProps?.buttons.map( ( buttonData ) => {
+						const {
 							class: className,
 							type,
 							text,
-							url,
-							urls,
 							onClick,
-						} ) => (
-							<FeatureButton
+						} = buttonData;
+
+						const buttonUrl = getButtonUrl( buttonData );
+
+						return (
+							<Button
 								key={ text }
 								className={ className }
 								variant={ type }
-								text={ text }
-								isBusy={ props.actionProps.isBusy }
-								url={ url }
-								urls={ urls }
-								onClick={ onClick }
-							/>
-						)
-					) }
+								isBusy={ actionProps.isBusy }
+								href={ buttonUrl }
+								target={ buttonUrl ? '_blank' : undefined }
+								onClick={ ! buttonUrl ? onClick : undefined }
+							>
+								{ text }
+							</Button>
+						);
+					} ) }
 				</div>
 			</Action>
 		</SettingsBlock>