Add purchase task to experimental task lists #33178

joshuatf · 2022-05-24T15:40:06Z

All Submissions:

Have you followed the WooCommerce Contributing guideline?
Does your code follow the WordPress' coding standards?
Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

Adds the missing purchase task to the 2 experimental task lists.

Closes #33125 .

How to test the changes in this Pull Request:

Proceed through OBW, and select the paid theme "Blooms" on the final step.
Be sure to opt into Marketing^
When brought to the Homescreen, notice that the "Add Blooms to my store" task appears.
Install WCAdmin Test Helper plugin, and use it to enable woocommerce_tasklist_setup_experiment_1_*
Refresh the Homescreen.
Note that the purchase task exists
Enable the woocommerce_tasklist_setup_experiment_2_* experiment
Refresh the homescreen.
Note the purchase task exists

Other information:

Have you added an explanation of what your changes do and why you'd like us to include them?
Have you written new tests for your changes, as applicable?
Have you successfully run tests with your changes locally?
Have you created a changelog file for each project being changed, ie pnpm nx changelog <project>?

FOR PR REVIEWER ONLY:

I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

botwoo · 2022-05-24T16:09:58Z

📊 Test reports for this pull request have been published and are accessible through the following links:

REST API Test Report
E2E Test Report (TBC)

Latest commit referenced in the reports: Fix theme title in purchase task 02d9f91
This comment will automatically be updated with the latest referenced commit when you push new changes to this pull request.

Visit the WooCommerce Test Reports homepage to view all published reports. See the FAQs page if you're having problems accessing them.

louwie17

Overall tested well, but left some comments in relation to styling and copy that should match the design of the task list. I think the copy change mentioned at the end here, would be the biggest item, we could do without the header (or do that as part of a separate PR).

For experiment 1 we have headers for each task, but don't have a header for this one, I think we would want to create one.

vs
the header of ways to get paid:

@jarekmorawski might have some suggestions?

Also we want to update the titles to match the copy of the new task list.
For example for both experiments, the completed copy says:
'Add paid extensions to my store' but all the others are in past tense, maybe we should change it to 'You added paid extensions to your store'?
See an example of the logic here: https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/Products.php#L43-L49

jarekmorawski · 2022-05-26T12:20:46Z

'Add paid extensions to my store' but all the others are in past tense, maybe we should change it to 'You added paid extensions to your store'?

Absolutely! I added the updated designs here: G9vi4e286yjdzyIdg8hBb1-fi-1761%3A159201

Here's how the copy would go:

Task title

Add %1$s and %2$s (incomplete)
You added %1$s and %2$s (complete)

Description

Continue to checkout to to add amazing new features to your store.

For the experiment 1 (single task list), the button should say Continue. Let me know if this helps!

joshuatf · 2022-05-30T18:30:44Z

Thanks for all the input and help on this, @jarekmorawski!

@louwie17 I've updated based on the discussion in p1653660464272079-slack. Also updated the width/height of illustrations in 4044869 which needs a sanity check, but I think will confine proportions well.

louwie17

Thanks for the updates Josh, the header looks great, I did notice a minor issue with the CSS changes.
I also left some comments in relation to the action button and the completed copy.

Also sorry if some of these comments show up twice, Github is being annoying....

louwie17 · 2022-06-01T19:02:11Z

plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/Purchase.php

+		$additional_count = count( $products['remaining'] ) - 1;
+
+		if ( $this->get_parent_option( 'use_completed_title' ) && $this->is_complete() ) {
+			return count( $products['remaining'] ) === 1


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:

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

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

louwie17 · 2022-06-01T19:05:37Z

plugins/woocommerce/src/Admin/Features/OnboardingTasks/Tasks/Purchase.php

+						$additional_count,
+						'woocommerce'
+					),
+					$products['remaining'][0],


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

louwie17 · 2022-06-01T19:08:00Z

plugins/woocommerce-admin/client/two-column-tasks/headers/purchase.js

+				<Button
+					isSecondary={ task.isComplete }
+					isPrimary={ ! task.isComplete }
+					onClick={ goToTask }


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:

👍 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.

louwie17 · 2022-06-01T19:12:21Z

plugins/woocommerce-admin/client/two-column-tasks/headers/purchase.js

+				<Button
+					isSecondary={ task.isComplete }
+					isPrimary={ ! task.isComplete }
+					onClick={ goToTask }


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

louwie17 · 2022-06-01T19:16:16Z

plugins/woocommerce-admin/client/two-column-tasks/style.scss

+		img {
+			max-height: 150px;
+			width: auto;
+		}


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?

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

Looks good on my end now to :)

louwie17 · 2022-06-01T19:18:23Z

@joshuatf you also have one PHP test failing: https://github.com/woocommerce/woocommerce/runs/6659717571?check_suite_focus=true

joshuatf · 2022-06-03T12:38:25Z

Hey @louwie17, updated that old test and added another for better coverage around titles. Could you give this another look?

louwie17

Thanks for the updated changes @joshuatf , nice work on this, this tested well and changes look great 👍 💯

github-actions · 2022-06-06T11:58:49Z

Hi @joshuatf, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

Add the release: add testing instructions label

Add purchase task to experimental task lists

d6efa29

joshuatf requested a review from a team May 24, 2022 15:40

joshuatf self-assigned this May 24, 2022

github-actions bot added focus: react admin plugin: woocommerce Issues related to the WooCommerce Core plugin. labels May 24, 2022

Add changelog entry

702e137

louwie17 requested changes May 25, 2022

View reviewed changes

joshuatf added 3 commits May 27, 2022 10:41

Add purchase header

76301fe

Update logic around purchase products list strings

485c5a0

Add purchase illustration

4044869

louwie17 requested changes Jun 1, 2022

View reviewed changes

Fix up task title tests

3536856

joshuatf added 2 commits June 3, 2022 10:24

Handle PR feedback

eb449ed

Fix theme title in purchase task

02d9f91

louwie17 approved these changes Jun 3, 2022

View reviewed changes

joshuatf merged commit 12625ae into trunk Jun 6, 2022

joshuatf deleted the add/33125 branch June 6, 2022 11:58

github-actions bot added this to the 6.7.0 milestone Jun 6, 2022

mattsherman mentioned this pull request Jun 13, 2022

[GlobalStep] "Store Management" fails to display after selecting "Paid theme" while OBW flow. #33405

Closed

5 tasks

github-actions bot mentioned this pull request Jul 13, 2022

Test WooCommerce 6.7 UVLabs/location-picker-at-checkout-for-woocommerce#44

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add purchase task to experimental task lists #33178

Add purchase task to experimental task lists #33178

joshuatf commented May 24, 2022

botwoo commented May 24, 2022 •

edited

louwie17 left a comment

jarekmorawski commented May 26, 2022

joshuatf commented May 30, 2022

louwie17 left a comment

louwie17 Jun 1, 2022

louwie17 Jun 1, 2022

joshuatf Jun 3, 2022

louwie17 Jun 1, 2022

louwie17 Jun 1, 2022

joshuatf Jun 3, 2022

louwie17 Jun 1, 2022

louwie17 Jun 1, 2022

joshuatf Jun 3, 2022

louwie17 Jun 3, 2022

louwie17 commented Jun 1, 2022

joshuatf commented Jun 3, 2022

louwie17 left a comment

github-actions bot commented Jun 6, 2022

Add purchase task to experimental task lists #33178

Add purchase task to experimental task lists #33178

Conversation

joshuatf commented May 24, 2022

All Submissions:

Changes proposed in this Pull Request:

How to test the changes in this Pull Request:

Other information:

FOR PR REVIEWER ONLY:

botwoo commented May 24, 2022 • edited

louwie17 left a comment

Choose a reason for hiding this comment

jarekmorawski commented May 26, 2022

joshuatf commented May 30, 2022

louwie17 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

louwie17 commented Jun 1, 2022

joshuatf commented Jun 3, 2022

louwie17 left a comment

Choose a reason for hiding this comment

github-actions bot commented Jun 6, 2022

botwoo commented May 24, 2022 •

edited