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 product pricing block #37211

Merged
merged 13 commits into from Mar 17, 2023
Merged

Add product pricing block #37211

merged 13 commits into from Mar 17, 2023

Conversation

louwie17
Copy link
Contributor

@louwie17 louwie17 commented Mar 14, 2023 •
edited

All Submissions:

Changes proposed in this Pull Request:

This creates a pricing block field that could be used for both the list price and the sale price.

Closes #37098

Screenshot 2023-03-15 at 2 00 49 PM

How to test the changes in this Pull Request:

  1. Build this branch and enable the product blocks feature flag: block-editor-feature-enabled
  2. Go to Products > Add new and check if the pricing and sales field show up
  3. Now create a product using the classic editor and add a price and sale price, load this product in the new product block form, the price and sale price should be displayed correctly.
  4. Go to WooCommerce > Settings and change the currency
  5. Reload the product block editor and make sure the icons in the price field match the new currency.

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 created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?
  • Have you included testing instructions?

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.

@github-actions github-actions bot added focus: react admin [team:Ghidorah] plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Mar 14, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 14, 2023 •
edited

Test Results Summary

Commit SHA: 5481c9a

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202610m 51s
E2E Tests1910010020115m 3s
To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

@louwie17 louwie17 force-pushed the add/37098_add_product_list_price_block branch 2 times, most recently from 44be8be to cec4187 Compare March 16, 2023 08:50
@louwie17 louwie17 marked this pull request as ready for review March 16, 2023 08:51
louwie17
louwie17 commented Mar 16, 2023
View reviewed changes
packages/js/product-editor/src/components/editor/init-blocks.ts

export const initBlocks = () => {
registerCoreBlocks();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Needed this to get the column blocks, although it does look like some of the blocks are already being registered somewhere, although I can't figure out where.
Screenshot 2023-03-16 at 9 56 43 AM

@codecov
Copy link

codecov bot commented Mar 16, 2023 •
edited

Codecov Report

Merging #37211 (8bee742) into trunk (0cf5677) will decrease coverage by 0.0%.
The diff coverage is 20.9%.

❗ Current head 8bee742 differs from pull request most recent head 5481c9a. Consider uploading reports for the commit 5481c9a to get more accurate results

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             trunk   #37211     +/-   ##
==========================================
- Coverage     46.7%    46.7%   -0.0%     
- Complexity   17191    17192      +1     
==========================================
  Files          429      429             
  Lines        64845    64881     +36     
==========================================
+ Hits         30275    30282      +7     
- Misses       34570    34599     +29
Impacted Files Coverage Δ
plugins/woocommerce/includes/class-wc-ajax.php 4.3% <0.0%> (-<0.1%) ⬇️
...ugins/woocommerce/includes/class-wc-post-types.php 2.6% <0.0%> (-0.2%) ⬇️
...ocommerce/includes/abstracts/abstract-wc-order.php 86.6% <50.0%> (-0.1%) ⬇️
...gins/woocommerce/includes/wc-product-functions.php 44.7% <100.0%> (+1.0%) ⬆️

mdperez86
mdperez86 reviewed Mar 16, 2023
View reviewed changes
Copy link
Contributor

@mdperez86 mdperez86 left a comment

Choose a reason for hiding this comment

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

Nice work here @louwie17. I left some small comments here.

packages/js/product-editor/src/components/pricing-block/edit.tsx Outdated
</BaseControl>
{ taxSettingsElement && (
<span className="woocommerce-product-form__secondary-text">
{ taxSettingsElement }
Copy link
Contributor

Choose a reason for hiding this comment

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

Why you are not using the help prop of the BaseControl component for this case?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point! Fixed here: dfe22e5

packages/js/product-editor/src/components/pricing-block/edit.tsx
const context = useContext( CurrencyContext );
const { getCurrencyConfig, formatAmount } = context;
const currencyConfig = getCurrencyConfig();
const inputProps = useCurrencyInputProps( {
Copy link
Contributor

Choose a reason for hiding this comment

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

What do you suggest if we need to extends (not overrides) the onFocus or onKeyUp events coming from useCurrencyInputProps?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Provided it as optional options: 5481c9a

plugins/woocommerce-admin/client/products/product-block-page.scss
@@ -0,0 +1,53 @@
.woocommerce-product-block-editor {
Copy link
Contributor

Choose a reason for hiding this comment

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

I need this file for my summary block implementation.

@louwie17 louwie17 force-pushed the add/37098_add_product_list_price_block branch from 8bee742 to 5481c9a Compare March 17, 2023 10:46
@louwie17 louwie17 requested a review from mdperez86 March 17, 2023 11:43
@louwie17
Copy link
Contributor Author

@mdperez86 this should be good for a re-review when you have time :)

mdperez86
mdperez86 approved these changes Mar 17, 2023
View reviewed changes
Copy link
Contributor

@mdperez86 mdperez86 left a comment

Choose a reason for hiding this comment

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

LGTM! Nice work here @louwie17. I will merge this because we need your changes for the resting blocks.

@mdperez86 mdperez86 merged commit 345ad58 into trunk Mar 17, 2023
19 checks passed
@mdperez86 mdperez86 deleted the add/37098_add_product_list_price_block branch March 17, 2023 17:03
@github-actions github-actions bot added this to the 7.6.0 milestone Mar 17, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mdperez86 mdperez86 mdperez86 approved these changes

@joshuatf joshuatf Awaiting requested review from joshuatf

@joelclimbsthings joelclimbsthings Awaiting requested review from joelclimbsthings

Assignees
No one assigned
Labels
plugin: woocommerce Issues related to the WooCommerce Core plugin.
Projects
None yet
Milestone
7.6.0
Development

Successfully merging this pull request may close these issues.

Create a list price field block
2 participants
@louwie17 @mdperez86