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/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;
@@ -62,6 +71,14 @@
 		@include font(13, 20, 400);
 		color: $color-blueberry;
 	}
+
+	&__icon {
+		border: 1px dashed #949494;
+		background: #fff;
+		border-radius: 50%;
+		width: 24px;
+		height: 24px;
+	}
 }
 
 .ppcp-r-feature-item {

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>
 			);

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

@@ -11,10 +11,9 @@ import { TITLE_BADGE_POSITIVE } from '../../ReusableComponents/TitleBadge';
 import { useMerchantInfo } from '../../../data/common/hooks';
 import { STORE_NAME } from '../../../data/common';
 import Features from './TabSettingsElements/Blocks/Features';
+import { todosData } from '../../../data/settings/tab-overview-todos-data';
 
 const TabOverview = () => {
-	const [ todos, setTodos ] = useState( [] );
-	const [ todosData, setTodosData ] = useState( todosDataDefault );
 	const [ isRefreshing, setIsRefreshing ] = useState( false );
 
 	const { merchantFeatures } = useMerchantInfo();
@@ -67,12 +66,7 @@ const TabOverview = () => {
 						'woocommerce-paypal-payments'
 					) }
 				>
-					<TodoSettingsBlock
-						todos={ todos }
-						setTodos={ setTodos }
-						todosData={ todosData }
-						setTodosData={ setTodosData }
-					/>
+					<TodoSettingsBlock todosData={ todosData } />
 				</SettingsCard>
 			) }
 
@@ -210,40 +204,4 @@ const TabOverview = () => {
 	);
 };
 
-// TODO: This list should be refactored into a separate module, maybe utils/thingsToDoNext.js
-const todosDataDefault = [
-	{
-		value: 'paypal_later_messaging',
-		description: __(
-			'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',
-			'woocommerce-paypal-payments'
-		),
-	},
-];
-
 export default TabOverview;

modules/ppcp-settings/resources/js/data/settings/tab-overview-todos-data.js

@@ -0,0 +1,170 @@
+import { __ } from '@wordpress/i18n';
+import { selectTab, TAB_IDS } from '../../utils/tabSelector';
+
+export const todosData = [
+	{
+		id: 'enable_fastlane',
+		title: __( 'Enable Fastlane', 'woocommerce-paypal-payments' ),
+		description: __(
+			'Accelerate your guest checkout with Fastlane by PayPal.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.PAYMENT_METHODS, 'ppcp-card-payments-card' );
+		},
+	},
+	{
+		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;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.PAYMENT_METHODS, 'ppcp-card-payments-card' );
+		},
+	},
+	{
+		id: 'enable_pay_later_messaging',
+		title: __(
+			'Enable Pay Later messaging',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Show Pay Later messaging to boost conversion rate and increase cart size.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.OVERVIEW, 'pay_later_messaging' );
+		},
+	},
+	{
+		id: 'configure_paypal_subscription',
+		title: __(
+			'Configure a PayPal Subscription',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Connect a subscriptions-type product from WooCommerce with PayPal.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			console.log(
+				'Take merchant to product list, filtered with subscription-type products'
+			);
+		},
+	},
+	{
+		id: 'register_domain_apple_pay',
+		title: __(
+			'Register Domain for Apple Pay',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'To enable Apple Pay, you must register your domain with PayPal.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.OVERVIEW, 'apple_pay' );
+		},
+	},
+	{
+		id: 'add_digital_wallets_to_account',
+		title: __(
+			'Add digital wallets to your account',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Add the ability to accept Apple Pay & Google Pay to your PayPal account.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			console.log(
+				'Take merchant to PayPal to enable Apple Pay & Google Pay'
+			);
+		},
+	},
+	{
+		id: 'add_apple_pay_to_account',
+		title: __(
+			'Add Apple Pay to your account',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Add the ability to accept Apple Pay to your PayPal account.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			console.log( 'Take merchant to PayPal to enable Apple Pay' );
+		},
+	},
+	{
+		id: 'add_google_pay_to_account',
+		title: __(
+			'Add Google Pay to your account',
+			'woocommerce-paypal-payments'
+		),
+		description: __(
+			'Add the ability to accept Google Pay to your PayPal account.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			console.log( 'Take merchant to PayPal to enable Google Pay' );
+		},
+	},
+	{
+		id: 'enable_apple_pay',
+		title: __( 'Enable Apple Pay', 'woocommerce-paypal-payments' ),
+		description: __(
+			'Allow your buyers to check out via Apple Pay.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.OVERVIEW, 'apple_pay' );
+		},
+	},
+	{
+		id: 'enable_google_pay',
+		title: __( 'Enable Google Pay', 'woocommerce-paypal-payments' ),
+		description: __(
+			'Allow your buyers to check out via Google Pay.',
+			'woocommerce-paypal-payments'
+		),
+		isCompleted: () => {
+			return false;
+		},
+		onClick: () => {
+			selectTab( TAB_IDS.OVERVIEW, 'google_pay' );
+		},
+	},
+];