Merge pull request #2965 from woocommerce/PCP-3917-things-to-do-next-component-functionality

Things to do next static component functionality (3917)

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

@@ -33,8 +33,10 @@ export const Header = ( { children, className = '' } ) => (
 );
 
 // Card Elements
-export const Content = ( { children } ) => (
-	<div className="ppcp-r-settings-card__content">{ children }</div>
+export const Content = ( { children, id = '' } ) => (
+	<div id={ id } className="ppcp-r-settings-card__content">
+		{ children }
+	</div>
 );
 
 export const ContentWrapper = ( { children } ) => (

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

@@ -1,13 +1,4 @@
-import { PayPalCheckbox, handleCheckboxState } from '../Fields';
-import data from '../../../utils/data';
-
-const TodoSettingsBlock = ( {
-	todos,
-	setTodos,
-	todosData,
-	setTodosData,
-	className = '',
-} ) => {
+const TodoSettingsBlock = ( { todosData, className = '' } ) => {
 	if ( todosData.length === 0 ) {
 		return null;
 	}
@@ -16,54 +7,33 @@ const TodoSettingsBlock = ( {
 		<div
 			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 }
-				/>
-			) ) }
+			{ todosData
+				.slice( 0, 5 )
+				.filter( ( todo ) => {
+					return ! todo.isCompleted();
+				} )
+				.map( ( todo ) => (
+					<TodoItem
+						key={ todo.id }
+						title={ todo.title }
+						onClick={ todo.onClick }
+					/>
+				) ) }
 		</div>
 	);
 };
 
 const TodoItem = ( props ) => {
 	return (
-		<div className="ppcp-r-todo-item">
+		<div className="ppcp-r-todo-item" onClick={ props.onClick }>
 			<div className="ppcp-r-todo-item__inner">
-				<PayPalCheckbox
-					{ ...{
-						...props,
-						handleCheckboxState,
-					} }
-				/>
+				<div className="ppcp-r-todo-item__icon"></div>
 				<div className="ppcp-r-todo-item__description">
-					{ props.description }
+					{ props.title }
 				</div>
 			</div>
-			<div
-				className="ppcp-r-todo-item__close"
-				onClick={ () =>
-					removeTodo(
-						props.value,
-						props.todosData,
-						props.changeTodos
-					)
-				}
-			>
-				{ data().getImage( 'icon-close.svg' ) }
-			</div>
 		</div>
 	);
 };
 
-const removeTodo = ( todoValue, todosData, changeTodos ) => {
-	changeTodos( todosData.filter( ( todo ) => todo.value !== todoValue ) );
-};
-
 export default TodoSettingsBlock;

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js

@@ -18,8 +18,10 @@ const SettingsCard = ( {
 		if ( contentItems ) {
 			return (
 				<ContentWrapper>
-					{ contentItems.map( ( item, index ) => (
-						<Content key={ index }>{ item }</Content>
+					{ contentItems.map( ( item ) => (
+						<Content key={ item.key } id={ item.key }>
+							{ item }
+						</Content>
 					) ) }
 				</ContentWrapper>
 			);