Merge pull request #3093 from woocommerce/PCP-4206-things-to-do-sort-todos-by-priority-and-limit-to-5

Settings UI: Sort todos and limit to 5 (4206)

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

@@ -63,10 +63,10 @@ const TodoSettingsBlock = ( {
 		}
 	};
 
-	// Filter out dismissed todos for display
+	// Filter out dismissed todos for display and limit to 5.
-	const visibleTodos = todosData.filter(
+	const visibleTodos = todosData
-		( todo ) => ! dismissedTodos.includes( todo.id )
+		.filter( ( todo ) => ! dismissedTodos.includes( todo.id ) )
-	);
+		.slice( 0, 5 );
 
 	return (
 		<div

modules/ppcp-settings/src/Data/Definition/TodosDefinition.php

@@ -67,6 +67,7 @@ class TodosDefinition {
 					'section'   => 'ppcp-axo-gateway',
 					'highlight' => 'ppcp-axo-gateway',
 				),
+				'priority'    => 1,
 			),
 			'enable_credit_debit_cards'            => array(
 				'title'       => __( 'Enable Credit and Debit Cards on your checkout', 'woocommerce-paypal-payments' ),
@@ -78,6 +79,7 @@ class TodosDefinition {
 					'section'   => 'ppcp-card-button-gateway',
 					'highlight' => 'ppcp-card-button-gateway',
 				),
+				'priority'    => 2,
 			),
 			'enable_pay_later_messaging'           => array(
 				'title'       => __( 'Enable Pay Later messaging', 'woocommerce-paypal-payments' ),
@@ -87,6 +89,7 @@ class TodosDefinition {
 					'type' => 'tab',
 					'tab'  => 'pay_later_messaging',
 				),
+				'priority'    => 3,
 			),
 			'add_pay_later_messaging_product_page' => array(
 				'title'       => __( 'Add Pay Later messaging to the Product page', 'woocommerce-paypal-payments' ),
@@ -96,6 +99,7 @@ class TodosDefinition {
 					'type' => 'tab',
 					'tab'  => 'pay_later_messaging',
 				),
+				'priority'    => 4,
 			),
 			'add_pay_later_messaging_cart'         => array(
 				'title'       => __( 'Add Pay Later messaging to the Cart page', 'woocommerce-paypal-payments' ),
@@ -105,6 +109,7 @@ class TodosDefinition {
 					'type' => 'tab',
 					'tab'  => 'pay_later_messaging',
 				),
+				'priority'    => 4,
 			),
 			'add_pay_later_messaging_checkout'     => array(
 				'title'       => __( 'Add Pay Later messaging to the Checkout page', 'woocommerce-paypal-payments' ),
@@ -114,6 +119,7 @@ class TodosDefinition {
 					'type' => 'tab',
 					'tab'  => 'pay_later_messaging',
 				),
+				'priority'    => 4,
 			),
 			'configure_paypal_subscription'        => array(
 				'title'       => __( 'Configure a PayPal Subscription', 'woocommerce-paypal-payments' ),
@@ -123,6 +129,7 @@ class TodosDefinition {
 					'type' => 'external',
 					'url'  => admin_url( 'edit.php?post_type=product&product_type=subscription' ),
 				),
+				'priority'    => 5,
 			),
 			'add_paypal_buttons'                   => array(
 				'title'       => __( 'Add PayPal buttons', 'woocommerce-paypal-payments' ),
@@ -132,6 +139,7 @@ class TodosDefinition {
 					'type' => 'tab',
 					'tab'  => 'styling',
 				),
+				'priority'    => 6,
 			),
 			'register_domain_apple_pay'            => array(
 				'title'       => __( 'Register Domain for Apple Pay', 'woocommerce-paypal-payments' ),
@@ -144,6 +152,7 @@ class TodosDefinition {
 						: 'https://www.paypal.com/uccservicing/apm/applepay',
 					'completeOnClick' => true,
 				),
+				'priority'    => 7,
 			),
 			'add_digital_wallets'                  => array(
 				'title'       => __( 'Add digital wallets to your account', 'woocommerce-paypal-payments' ),
@@ -153,6 +162,7 @@ class TodosDefinition {
 					'type' => 'external',
 					'url'  => 'https://www.paypal.com/businessmanage/account/settings',
 				),
+				'priority'    => 8,
 			),
 			'add_apple_pay'                        => array(
 				'title'       => __( 'Add Apple Pay to your account', 'woocommerce-paypal-payments' ),
@@ -162,6 +172,7 @@ class TodosDefinition {
 					'type' => 'external',
 					'url'  => 'https://www.paypal.com/businessmanage/account/settings',
 				),
+				'priority'    => 9,
 			),
 			'add_google_pay'                       => array(
 				'title'       => __( 'Add Google Pay to your account', 'woocommerce-paypal-payments' ),
@@ -171,6 +182,7 @@ class TodosDefinition {
 					'type' => 'external',
 					'url'  => 'https://www.paypal.com/businessmanage/account/settings',
 				),
+				'priority'    => 10,
 			),
 			'enable_apple_pay'                     => array(
 				'title'       => __( 'Enable Apple Pay', 'woocommerce-paypal-payments' ),
@@ -182,6 +194,7 @@ class TodosDefinition {
 					'section'   => 'ppcp-applepay',
 					'highlight' => 'ppcp-applepay',
 				),
+				'priority'    => 11,
 			),
 			'enable_google_pay'                    => array(
 				'title'       => __( 'Enable Google Pay', 'woocommerce-paypal-payments' ),
@@ -193,6 +206,7 @@ class TodosDefinition {
 					'section'   => 'ppcp-googlepay',
 					'highlight' => 'ppcp-googlepay',
 				),
+				'priority'    => 12,
 			),
 		);
 	}

modules/ppcp-settings/src/Endpoint/TodosRestEndpoint.php

@@ -157,7 +157,8 @@ class TodosRestEndpoint extends RestEndpoint {
 			}
 		}
 
-		$filtered_todos = $this->filter_pay_later_todos( $todos );
+		$sorted_todos   = $this->sort_todos_by_priority( $todos );
+		$filtered_todos = $this->filter_pay_later_todos( $sorted_todos );
 
 		return $this->return_success(
 			array(
@@ -288,4 +289,23 @@ class TodosRestEndpoint extends RestEndpoint {
 			? array_merge( $other_todos, array( $priority_pay_later_todo ) )
 			: $other_todos;
 	}
+
+	/**
+	 * Sorts todos by their priority value.
+	 *
+	 * @param array $todos Array of todos to sort.
+	 * @return array Sorted array of todos.
+	 */
+	private function sort_todos_by_priority( array $todos ): array {
+		usort(
+			$todos,
+			function( $a, $b ) {
+				$priority_a = $a['priority'] ?? 999;
+				$priority_b = $b['priority'] ?? 999;
+				return $priority_a <=> $priority_b;
+			}
+		);
+
+		return $todos;
+	}
 }