Clean up todo component properties

modules/ppcp-settings/resources/css/components/screens/_settings.scss

@@ -18,6 +18,15 @@
 	gap: 18px;
 	width: 100%;
 
+	&:hover {
+		cursor: pointer;
+		.ppcp-r-todo-item__inner {
+			.ppcp-r-todo-item__description {
+				color: $color-text-text;
+			}
+		}
+	}
+
 	&:not(:last-child) {
 		border-bottom: 1px solid $color-gray-400;
 		padding-bottom: 16px;
@@ -67,8 +76,8 @@
 		border: 1px dashed #949494;
 		background: #fff;
 		border-radius: 50%;
-		width: 32px;
-		height: 32px;
+		width: 24px;
+		height: 24px;
 	}
 }
 

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

@@ -1,10 +1,4 @@
-const TodoSettingsBlock = ( {
-	todos,
-	setTodos,
-	todosData,
-	setTodosData,
-	className = '',
-} ) => {
+const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 	if ( todosData.length === 0 ) {
 		return null;
 	}
@@ -14,16 +8,7 @@ const TodoSettingsBlock = ( {
 			className={ `ppcp-r-settings-block__todo ppcp-r-todo-items ${ className }` }
 		>
 			{ todosData.map( ( todo ) => (
-				<TodoItem
-					name="todo_items"
-					key={ todo.value }
-					value={ todo.value }
-					currentValue={ todos }
-					changeCallback={ setTodos }
-					description={ todo.description }
-					changeTodos={ setTodosData }
-					todosData={ todosData }
-				/>
+				<TodoItem key={ todo.id } title={ todo.title } />
 			) ) }
 		</div>
 	);
@@ -35,7 +20,7 @@ const TodoItem = ( props ) => {
 			<div className="ppcp-r-todo-item__inner">
 				<div className="ppcp-r-todo-item__icon"></div>
 				<div className="ppcp-r-todo-item__description">
-					{ props.description }
+					{ props.title }
 				</div>
 			</div>
 		</div>

modules/ppcp-settings/resources/js/Components/Screens/Overview/TabOverview.js

@@ -12,8 +12,7 @@ import { useMerchantInfo } from '../../../data/common/hooks';
 import { STORE_NAME } from '../../../data/common';
 
 const TabOverview = () => {
-	const [ todos, setTodos ] = useState( [] );
-	const [ todosData, setTodosData ] = useState( todosDataDefault );
+	const [ todosData ] = useState( todosDataDefault );
 	const [ isRefreshing, setIsRefreshing ] = useState( false );
 
 	const { merchant } = useMerchantInfo();
@@ -59,12 +58,7 @@ const TabOverview = () => {
 						'woocommerce-paypal-payments'
 					) }
 				>
-					<TodoSettingsBlock
-						todos={ todos }
-						setTodos={ setTodos }
-						todosData={ todosData }
-						setTodosData={ setTodosData }
-					/>
+					<TodoSettingsBlock todosData={ todosData } />
 				</SettingsCard>
 			) }
 
@@ -183,39 +177,45 @@ const TabOverview = () => {
 	);
 };
 
-// TODO: This list should be refactored into a separate module, maybe utils/thingsToDoNext.js
 const todosDataDefault = [
 	{
-		value: 'paypal_later_messaging',
+		id: 'enable_fastlane',
+		title: __( 'Enable Fastlane', 'woocommerce-paypal-payments' ),
 		description: __(
+			'Accelerate your guest checkout with Fastlane by PayPal.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+	},
+	{
+		id: 'enable_credit_debit_cards',
+		title: __(
+			'Enable Credit and Debit Cards on your checkout',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Credit and Debit Cards is now available for Blocks checkout pages.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+	},
+	{
+		id: 'enable_pay_later_messaging',
+		title: __(
 			'Enable Pay Later messaging',
 			'woocommerce-paypal-payments'
 		),
-	},
-	{
-		value: 'capture_authorized_payments',
 		description: __(
-			'Capture authorized payments',
-			'woocommerce-paypal-payments'
-		),
-	},
-	{
-		value: 'enable_google_pay',
-		description: __( 'Enable Google Pay', 'woocommerce-paypal-payments' ),
-	},
-	{
-		value: 'paypal_shortcut',
-		description: __(
-			'Add PayPal shortcut to the Cart page',
-			'woocommerce-paypal-payments'
-		),
-	},
-	{
-		value: 'advanced_cards',
-		description: __(
-			'Add Advanced Cards to Blocks Checkout',
+			'Show Pay Later messaging to boost conversion rate and increase cart size.',
 			'woocommerce-paypal-payments'
 		),
+		isCompleted: () => {
+			return false;
+		},
 	},
 ];