Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add purchase task to experimental task lists #33178

Merged
merged 8 commits into from Jun 6, 2022
Merged

Add purchase task to experimental task lists #33178

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d6efa29
Add purchase task to experimental task lists
joshuatf May 24, 2022
702e137
Add changelog entry
joshuatf May 24, 2022
76301fe
Add purchase header
joshuatf May 27, 2022
485c5a0
Update logic around purchase products list strings
joshuatf May 30, 2022
4044869
Add purchase illustration
joshuatf May 30, 2022
3536856
Fix up task title tests
joshuatf Jun 3, 2022
eb449ed
Handle PR feedback
joshuatf Jun 3, 2022
02d9f91
Fix theme title in purchase task
joshuatf Jun 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
47 changes: 47 additions & 0 deletions plugins/woocommerce-admin/client/two-column-tasks/headers/purchase.js
View file
Open in desktop
@@ -0,0 +1,47 @@
/**
* External dependencies
*/
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import TimerImage from './timer.svg';
import { WC_ASSET_URL } from '../../utils/admin-settings';

const PurchaseHeader = ( { task, goToTask } ) => {
return (
<div className="woocommerce-task-header__contents-container">
<img
alt={ __( 'Purchase illustration', 'woocommerce' ) }
src={
WC_ASSET_URL + 'images/task_list/purchase-illustration.png'
}
className="svg-background"
/>
<div className="woocommerce-task-header__contents">
<h1>{ task.title }</h1>
<p>
{ __(
'Good choice! You chose to add amazing new features to your store. Continue to checkout to complete your purchase.',
'woocommerce'
) }
</p>
<Button
isSecondary={ task.isComplete }
isPrimary={ ! task.isComplete }
onClick={ goToTask }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should actually do something different, as it navigates to the purchase task screen which doesn't exist.
It should show a popup like this instead:
Screen Shot 2022-06-01 at 4 07 39 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 I think ultimately if we keep this variant of the task list we should strive to dry up these headers and actions a bit. There is a lot of duplication between components and even backend data being replicated on the frontend that is going to cause headaches down the road.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the custom purchase task item we have here: https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-admin/client/tasks/fills/purchase.js

I know for other headers like WooCommerce Payments we copied that custom logic to the header also instead of using goToTask -> https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce-admin/client/two-column-tasks/headers/woocommerce-payments.js#L86

>
{ __( 'Continue', 'woocommerce' ) }
</Button>
<p className="woocommerce-task-header__timer">
<img src={ TimerImage } alt="Timer" />{ ' ' }
<span>{ task.time }</span>
</p>
</div>
</div>
);
};

export default PurchaseHeader;
6 changes: 5 additions & 1 deletion plugins/woocommerce-admin/client/two-column-tasks/style.scss
View file
Open in desktop
Expand Up @@ -151,7 +151,6 @@

.svg-background {
right: 6%;
width: 25%;
}
}

Expand Down Expand Up @@ -241,6 +240,11 @@
flex: 1;
overflow: hidden;
width: 100%;

img {
max-height: 150px;
width: auto;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if this works well for all the tasks in the two column layout, I screwed around with that for a while to, maybe we still want to add a max-width?
Screen Shot 2022-06-01 at 4 15 23 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add max width and max height. Seems to be working well on my end, can you double check on yours?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good on my end now to :)

}

.svg-background {
Expand Down
2 changes: 2 additions & 0 deletions plugins/woocommerce-admin/client/two-column-tasks/task-headers.ts
View file
Open in desktop
Expand Up @@ -6,6 +6,7 @@ import MarketingHeader from './headers/marketing';
import AppearanceHeader from './headers/appearance';
import ShippingHeader from './headers/shipping';
import ProductsHeader from './headers/products';
import PurchaseHeader from './headers/purchase';
import PaymentsHeader from './headers/payments';
import WoocommercePaymentsHeader from './headers/woocommerce-payments';

Expand All @@ -16,6 +17,7 @@ const taskHeaders: Record< string, React.ElementType > = {
appearance: AppearanceHeader,
payments: PaymentsHeader,
products: ProductsHeader,
purchase: PurchaseHeader,
'woocommerce-payments': WoocommercePaymentsHeader,
};

Expand Down
Binary file added plugins/woocommerce/assets/images/task_list/purchase-illustration.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions plugins/woocommerce/changelog/add-33125
View file
Open in desktop
@@ -0,0 +1,4 @@
Significance: minor
Type: add

Add purchase task to experimental task lists #33178
10 changes: 6 additions & 4 deletions plugins/woocommerce/src/Admin/Features/OnboardingTasks/TaskLists.php
View file
Open in desktop
Expand Up @@ -133,6 +133,7 @@ public static function init_default_lists() {
'title' => __( 'Get ready to start selling', 'woocommerce' ),
'tasks' => array(
'StoreDetails',
'Purchase',
'Products',
'WooCommercePayments',
'Payments',
Expand All @@ -158,6 +159,7 @@ public static function init_default_lists() {
'tasks' => array(
'StoreCreation',
'StoreDetails',
'Purchase',
'Products',
'WooCommercePayments',
'Payments',
Expand All @@ -182,7 +184,7 @@ public static function init_default_lists() {
'/assets/images/task_list/basics-section-illustration.png',
WC_ADMIN_PLUGIN_FILE
),
'task_names' => array( 'StoreCreation', 'StoreDetails', 'Products', 'Payments', 'WooCommercePayments' ),
'task_names' => array( 'StoreCreation', 'StoreDetails', 'Purchase', 'Products', 'Payments', 'WooCommercePayments' ),
),
array(
'id' => 'sales',
Expand Down Expand Up @@ -467,13 +469,13 @@ function ( $all, $curr ) {
*
* @return number
*/
public static function setup_tasks_remaining () {
public static function setup_tasks_remaining() {

$active_list = self::is_experiment_treatment( 'woocommerce_tasklist_setup_experiment_1' ) ? 'setup_experiment_1' : ( self::is_experiment_treatment( 'woocommerce_tasklist_setup_experiment_2' ) ? 'setup_experiment_2' : 'setup' );

$setup_list = self::get_list( $active_list );

if( ! $setup_list || $setup_list->is_hidden() || $setup_list->is_complete() ) {
if ( ! $setup_list || $setup_list->is_hidden() || $setup_list->is_complete() ) {
return;
}

Expand All @@ -497,7 +499,7 @@ public static function menu_task_count() {

$tasks_count = self::setup_tasks_remaining();

if( ! $tasks_count ) {
if ( ! $tasks_count ) {
return;
}

Expand Down
42 changes: 37 additions & 5 deletions plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/Purchase.php
View file
Open in desktop
Expand Up @@ -54,20 +54,52 @@ public function get_id() {
* @return string
*/
public function get_title() {
$products = $this->get_paid_products_and_themes();
$products = $this->get_paid_products_and_themes();
$first_product = count( $products['remaining'] ) >= 1 ? $products['remaining'][0] : false;
$additional_count = count( $products['remaining'] ) - 1;

if ( $this->get_parent_option( 'use_completed_title' ) && $this->is_complete() ) {
return count( $products['remaining'] ) === 1
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be purchaseable right? As the remaining array will always be empty if this task is completed.
As currently I am getting this weird title:
Screen Shot 2022-06-01 at 3 43 14 PM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same probably goes for $addtional_count and line 79.
For additional_count probably need a $completed_additional_count.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ya, good point. This doesn't work well as you complete purchases. Updated.

? sprintf(
/* translators: %1$s: a purchased product name */
__(
'You added %1$s',
'woocommerce'
),
$first_product
)
: sprintf(
/* translators: %1$s: a purchased product name, %2$d the number of other products purchased */
_n(
'You added %1$s and %2$d other product',
'You added %1$s and %2$d other products',
$additional_count,
'woocommerce'
),
$products['remaining'][0],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also in the $products['purchaseable'] the items are array's of plugins, so this will probably be $products['purchaseable'][0]['label']

$additional_count
);
}

return count( $products['remaining'] ) === 1
? sprintf(
/* translators: %1$s: list of product names comma separated, %2%s the last product name */
/* translators: %1$s: a purchaseable product name */
__(
'Add %s to my store',
'woocommerce'
),
$products['remaining'][0]
)
: __(
'Add paid extensions to my store',
'woocommerce'
: sprintf(
/* translators: %1$s: a purchaseable product name, %2$d the number of other products to purchase */
_n(
'Add %1$s and %2$d more product to my store',
'Add %1$s and %2$d more products to my store',
$additional_count,
'woocommerce'
),
$products['remaining'][0],
$additional_count
);
}

Expand Down