Commit Graph

768 Commits

Author SHA1 Message Date
Seghir Nadir 0dcd359b25
Add validation to select fields and add placeholder option to additional fields API (#49929)
* Add validation and empty value to select components

* address feedback

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* remove console log

* Update plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/additional-checkout-fields.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* Update plugins/woocommerce-blocks/docs/third-party-developers/extensibility/checkout-block/additional-checkout-fields.md

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* remove test

* Fix tests

* also move select to parent

* fix tests

* add empty enum to schema

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
2024-07-26 16:38:44 +00:00
Niels Lange 752273e6ce
[React 18] Use `createRoot().render()` instead of `render()` (#48843)
* Use createRoot().render() instead of render()

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Replace `unmountComponentAtNode()` with `createRoot().unmount()`

* Adjust JS unit tests

* Remove obsolete import

* Remove “ReactDOM.render is no longer supported” check

* Update pnpm-lock.yaml

* Migrate JS unit test to React 18

* Revert "Update pnpm-lock.yaml"

This reverts commit 18bfc967aa.

* Migrate JS unit test to React 18

* Migrate JS unit test to React 18

* Minor refactor

* Unskip previously skipped tests

* Fix JS unit test error related to root.unmount()

* Remove obsolete dependency

* Fix failing blocks e2e test

* Fix failing core e2e tests

* Optimise memoisation to prevent “Maximum update depth exceeded” error.

* Fix Filters JS tests in #48796 (#49973)

* Run cleanup in Rating Filter JS tests

* Run cleanup and wait user interactions in Stock Status Filter JS tests

* Rename constant

* Simplify conditional statement

* Introduce TS type

* Address lint error

* Rename TS type

* Optimise multiple TS types

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Sam Seay <samueljseay@gmail.com>
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
2024-07-26 09:18:48 +02:00
Thomas Roberts df8d5b751e
Revert "[Enhancement]: Add option to show price on the place order button" (#49899)
* Revert "[Enhancement]: Add option to show price on the place order button (#4…"

This reverts commit a71fb4d7a6.

* Add changelog
2024-07-24 18:08:05 +02:00
Sam Seay 137a2e8aa6
Checkout: Add placeholder option to country and state select, add error validation (#49616)
* WIP

* Add empty option for state as well

* Add client-side validation to country select inputs

* Add validation messages for state.

* Clean up redundant destructuring.

* Fix up the validation logic, fix bug where empty select was shown in some cases.

* Remove unused import

* Use import aliases instead of large relative paths

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix a typo

Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>

* use SelectOption type

* Also handle when address changes, because we shouldnt validate state when there is an address change

* adjust validation to handle any address change, not just country. translate field validations and use lowercase

* add a lowercase label for the country select as well

* Fix an issue where scroll to would not scroll to invalid select

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
2024-07-24 17:59:15 +02:00
Thomas Roberts afe245fdce
Make the address 2 line visible when a value is autofilled (#49730) 2024-07-23 16:44:20 +01:00
Thomas Roberts ad7a49df4c
Prevent error on Cart Shipping Calculator when using Additional Checkout Fields API (#49685) 2024-07-23 16:38:54 +01:00
Mike Jolley e8d899b6f3
Block Checkout: Fix default shipping selection on toggle pickup (#49718)
* Default selection is blank so it can be selected on mount

* Prevent notice displaying until rate selections are complete

* changelog
2024-07-23 16:25:35 +01:00
Niels Lange 0c9e33bb7c
Adjust input field height and input label text size (#49636)
* Field height and label text size adjustments

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Kepe initial height of child element

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-22 12:53:59 +02:00
Niels Lange 2baa82b750
Spacing adjustments for coupon code in the Cart and Checkout blocks (#49603)
* Spacing adjustments for coupon code

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-19 12:47:17 +02:00
Alba Rincón e865e1e4f2
Product rating - Inherit the color of the star when no ratings (#49678)
* Inherit the color of the star

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-19 09:23:24 +02:00
Gabriel Manussakis ece00533e4
[Accessibility] Convert edit address link to a button (#49471)
* Update edit address button style

* Add input prop to the ValidatedTextInputHandle type

* Add optional isEditing prop to the AddressFormProps

* Convert edit address link to button

* Focus first input after opening the address form

* Pass along the editing prop to children components in the shipping address block

* Add changelog file

* Clear timeout used to delay the focus on the first input

* Adjust checkout toggler buttons for dark themes

* Get first address field by id
2024-07-17 16:54:41 +02:00
Niels Lange d3574290b7
Fix regression of #48180 (#49580)
* Fix regression of #48180

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix one more bug in the dropdown styling (#49585)

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Sam Seay <samueljseay@gmail.com>
2024-07-16 21:46:39 +02:00
Thomas Roberts a71fb4d7a6
[Enhancement]: Add option to show price on the place order button (#49252) 2024-07-16 10:59:09 +01:00
Sam Seay 9fa32b4f2b
Migrate StateInput, CountryInput and custom fields to native `<select>` (#48180) 2024-07-12 21:17:54 +00:00
Niels Lange 79786c5443
Revert #46362 (#49404)
* Revert #46262

* Remove pnpm-lock.yaml

* Revert "Remove pnpm-lock.yaml"

This reverts commit df4b87940d.

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Revert pnpm-lock.yaml

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-11 19:00:49 +02:00
Roy Ho 780f27256f
Remove IE11 specific styles (#49027)
* Remove IE11 specific styles

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Remove unused mixin

* Remove additional IE/edge styles

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-07-04 05:28:26 -07:00
Mike Jolley c2783847c4
Fix: stack coupon fields on smaller screens (#48623)
* Wrap button and input using flexbox

* Use basis instead of size

* changelog
2024-06-25 16:19:49 +01:00
Mike Jolley a80e3e8a56
Accessibility: Prevent shipping losing focus when making selections during checkout (#48370)
* Prevent duplicate update

* Style aria disabled radio input

* Disable keyboard navigation when options are being sent to server.

* Abort multiple requests to update shipping rates

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Update changelog

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-06-21 10:23:19 +01:00
Niels Lange 93214eeb2b
[Enhancement]: Block-based checkout input fields style updates (#46362)
* Adjust border and box-shadow color for textual inputs

* WIP: Style checkboxes

* Vertically center checkmark

* Adjust focus outline width

* Adjust selected checkbox background in light mode

* Adjust background color of selected radio button

* Add chevron icon to dropdown fields

* Add changelog

* Fix CSS lint issues

* Adjust outline width

* Revert checkbox styles

* Adjust input field height and label size

* Revert box-shadow styles

* Add spacing between coupon title and coupon code

* Simplify onFocus and onBlur

* Fix outline width when focusing combobox

* Ensure chevron points down after selecting value

* Adjust outline color of focused delivery option

* POC: Use currentColor for focus states
2024-06-03 18:46:08 +07:00
Patricia Hillebrandt 5dd7713346
[Performance]: Replace `classnames` usage with `clsx` (#47760)
* Replace classnames with clsx within woocommerce-blocks.

* Undo unnecessary change to getClassnames const.

* Replace classnames with clsx within woocommerce-admin.

* Add changelog.

* Update the pnpm lock file

* Address lint.

* Address lint errors for the block-library.
2024-05-31 05:49:36 +02:00
Niels Lange dec873926d
Partially revert #45767 (#47867)
* Partially revert #45767

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Add test for description on checkout order summary block

* Add another test back in for order summary description

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
2024-05-28 18:25:34 +07:00
Seghir Nadir 34f8c65f53
only make order summary sticky when it's not longer than view (#47680)
* only sticky summary when it's not longer than view

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* fix tests

* correctly check for height

* switch how to get top

* remove from editor

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-22 22:09:50 +00:00
Seghir Nadir 6c136e4e1a
normalize IDs for form fields in Checkout (#47650)
* normalize IDs for form fields and fix types

* update docs as well

* update rest of docs

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* fix linting for document

* also align classnames

* revert to correct classname

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-22 22:54:03 +02:00
Niels Lange 5168a21920
Block-based checkout - Update address fields display logic (#47160)
* Add “Address line 2” toggle

* Allow apartment field to be required

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Rename “Apartment, suite, etc.” to “Address line 2”

* Remove unused dependency

* Add key to fragment

* Simplify keys

* Address failing e2e tests

* Change “Optional (Recommended)” to “Optional”

* Toggle address line 2 visibility in editor

* Add e2e tests

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Update e2e tests

* Update e2e tests

* Ensure the address 2 field stays open when the seller empties it

* Optimise hasAddress2FieldValue

* Move address 2 filed related functionality into separate component

* Rmove + sign from address 2 field links

* WIP: Introduce AddressField component

* Update AddressFields component

* Refactor AddressFields and Address2Field components

* Fix CSS lint error

* Fix JS lint error

* Fix failing e2e tests

* Fix typo in e2e tests

* Improve e2e selector

* Fix core e2e tests

* Use address line 2 label for the link text

* Lazy initialise the “isFieldVisible” state

* Remove obsolete code

* Add inline comments for clarity

* Fix JS lint error

* Improve e2e tests

* Revert "Remove obsolete code"

This reverts commit 027d6adc89.

* Adjust visibility toggle

* Delete obsolete changelog file

* Add inline comment

* Fix TS error

* Remove obsolete parts

* Solve TS warning

* Remove obsolete “fieldsRef”

* Remove obsolete “setHasFieldBeenModified”

* Address various TS warnings

* Fix link styling issue on mobile

* Fix JS lint error

* Refactor and simplify address components

* Optimise Address2Field component

* Improve inline docs

* Move ‘+’ from CSS to i18n

* Rename rest of values and pass correct onChange

* force component to remount

* remove unsed useEffect

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
2024-05-21 15:48:24 +07:00
Thomas Roberts d7ca80d6c8
Make shipping total in Cart/Checkout block order summaries show FREE if shipping price is 0 (#47553)
* Make shipping total show FREE if price is 0

* Make free text uppercase in order summary

* Add test to check free/paid shipping displays as free or shows price

* Add changelog

* Update E2E test to make sure shipping is selected correctly

* Update shipping cost e2e tests

* Further fixes to e2e tests
2024-05-20 18:42:54 +02:00
Seghir Nadir edb930e04b
Fix a11y issues in Cart/Checkout (#47470)
* return focus on drawer

* adjust notice button color

* adjust cart/checkout input label color

* return focus for shipping form button

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-16 18:32:22 +02:00
Seghir Nadir 9b1e9344e0
Turn Cart change address link to button (#47460)
* Turn Change address link to button

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* fix lint

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-16 16:51:03 +02:00
Sam Seay 3ef7a01840
Update blocks JS tests to React 18 (#47383) 2024-05-15 21:33:36 +12:00
Seghir Nadir b5850bbfc1
Select a shipping rate after they load (#47120)
* select a shipping rate if there are no shipping rates on mount

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* move code and explain it

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 15:29:04 +00:00
Seghir Nadir b256336176
reset state and postcode if it's not valid for the current country (#47369)
* reset state if it's not valid for the current country

* reset postcode as well

* Add changefile(s) from automation for the following project(s): woocommerce

* update logic so its in Checkout block instead of store api

* fix linting

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-05-13 16:46:08 +02:00
ianlv 6ff0463f24
chore: remove repetitive words (#47158)
* chore: remove repetitive words

Signed-off-by: ianlv <sunlvyun@outlook.com>

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

---------

Signed-off-by: ianlv <sunlvyun@outlook.com>
Co-authored-by: github-actions <github-actions@github.com>
2024-05-06 03:43:39 +00:00
Sam Seay 3a5721c0d8
Replace @wordpress/components Button, Radio, RadioGroup with Ariakit Button (#45974) 2024-05-03 15:28:39 +12:00
Alex Florisca 7dc8dd63ba
Update Order Summary Design (#45767)
* Add border around order summary on cart & checkout

* Group subtotal, discount, fees, taxes and shiping block

* Move the coupon form in order summary

* Move the coupon form in order summary

* Manage state externally in Panel component and refactor Coupon form to use the Panel component

* Remove descriptions from order summary items

* increase font weight of order summary title

* Tidy up design for desktop and add separator back in for blocks on checkout order summary

* Remove border around order summary on mobile

* Revert "Move the coupon form in order summary"

This reverts commit 4a8044cdcf.

* Change heading styles for cart

* Change font weight to 500 of order summary heading on checkout block

* Remove padding and border between order summary totals items

* Refactor css for cart & checkout totals to work in the editor

* Adjust cart totals heading in the editor

* Last adjustment to checkout totals style to work in editor

* Add changelog

* Change the cursor to pointer for the panel component

* remove unused short and full description from OrderSummaryItem

* Fix failing e2e tests

* Fix lint issues

* Vertically align order summary title in the editor

* Fix e2e tests

* Fix linting issues

* Fix unit tests

* Remove changes from woocommerce.php

* Fix checkout block test

* fix eslint errors in checkout block test

---------

Co-authored-by: Niels Lange <info@nielslange.de>
2024-04-25 12:03:31 +07:00
Thomas Roberts 9e0fab4ebc
Reset shipping rate font size to match other elements (#46345) 2024-04-17 13:54:43 -07:00
Thomas Roberts ab60527d6b
Update `PackageRates` component to show single rates as a radio button (#46284)
* Show a single shipping option as radio button

* Add changelog

* Update unused dependency
2024-04-16 13:39:55 +01:00
Thomas Roberts 255a45911c
Update shipping and payment radio controls to use borders on selected items (#46150) 2024-04-10 02:54:05 -07:00
Sam Seay f9c4b284ce
Remove the base tabs component from blocks. It is no longer used. (#46219) 2024-04-06 15:03:07 +13:00
Niels Lange fa49848cf9
Fix broken CSS classes and update JS unit snapshots (#45732)
* Fix broken CSS classes and update JS unit snapshots

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-20 17:42:05 +07:00
Erik Golinelli 49b92070cc
Removes the star icon font (#31670)
* removes the star font
The WooCommerce font can hold many other icons there isn't the reason to load a font for a single icon

* updates custom templates stylesheets

* adds woff2 font format to themes customized stylesheets

* fix the star font size diff

* removes WooCommerce.eot and SVG file that are no longer needed and updates the template style in order to import from font.scss

* Optimized font import
Unifies the import of fonts by extending it to the twenty-twenty-three theme

* Add changefile(s) from automation for the following project(s): woocommerce

* Add changefile(s) from automation for the following project(s): woocommerce

* Svg font minification (WooCommerce.svg)

* Add changefile(s) from automation for the following project(s): woocommerce

* "star" font phasing out
The font family 'star' was replaced in all files. However, it continues to remain physically in the repo but not in the style files

* Removes the `.eot` font file since nowdays it's completely useless

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-20 11:28:27 +01:00
Niels Lange 6b07ca44f5
Add totalValue filter (#45170)
* Add totalValue filter

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Remove nowrap to prevent text overflow

* Start docs for ‘totalValue’ filter

* Fix *.md lint issues

* Ignore .md lint errors for now

* Update code example and add screenshots

* Fix failing JS unit tests

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-13 00:42:24 +07:00
Seghir Nadir 9f7a6779f6
Fix styling for select in Site Editor (#45252)
* Fix styling for select in Site Editor

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-03-05 14:49:33 +01:00
Tarun Vijwani 4e6476a996
Adjust spacing in/between elements on the Cart and Checkout block pages (#44160)
* Add spacing in Checkout block page

* Add spacing in Order summary block

* Update responsive styles for order summary panel

* Update styles for cart and cart line items table

* Update styles for order summary and cross-sells products

* Remove unnecessary CSS styles from cart line items table and cart block

* Remove unused CSS class from cart line items table

* Fix linting errors

* Add changelog

* Fix changelog lint

* Update quantity selector style

* Increase the line-height of the set description and remove margin top from email field

* Add margin-top to order summary image and express payment margin adjustment

* Update styles for cart and checkout components

* Fix linting error

* Fix margin units in cart-cross-sells-products

* Replace em with px

* Add margin-top to payment method container

* Update styles for Cart block for mobile screen

* Update padding in cart style.scss
2024-02-17 01:50:11 +04:00
Mike Jolley b94c14e745
[Experiment] Fix additional address field validation notices (#44615) 2024-02-14 10:02:30 -08:00
Mike Jolley 35630bb52b
Update combobox validation message to be more generic (#44229)
* Update combobox validation message

* Changelog
2024-02-06 11:51:09 +00:00
Thomas Roberts 77d2dd9453
Make combobox suggestions have same border as main input (#44183)
Co-authored-by: github-actions <github-actions@github.com>
2024-02-01 02:57:57 -08:00
Tarun Vijwani 0c79d1b6a7
Display shipping calculator link in the Cart block when fallback shipping options available (#43803)
* Hide the shipping rates in editor to match front-end

- If there are no shipping rates, hide the shipping rates in editor to match front-end.

* Add get_shipping_zones method to CartCheckoutUtils

* Display change address like for fallback shipping zone

- If cart has multiple and default shipping zones without shopper address, display the change address link

* Update shipping address label

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Fix linting errors

* Update plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/shipping/shipping-address.tsx

Co-authored-by: Niels Lange <info@nielslange.de>

* Display shipping calculator for locations outside all other zones

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Update typescript for activeShippingZones

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
2024-01-24 20:40:53 +04:00
Tarun Vijwani 139150134f
Add store notices to the Cart and Checkout block templates (#43753)
* Fix session notices in Cart and Checkout block pages

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Update plugins/woocommerce-blocks/assets/js/base/components/notice-banner/style.scss

Co-authored-by: Niels Lange <info@nielslange.de>

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Niels Lange <info@nielslange.de>
2024-01-22 21:25:42 +04:00
Thomas Roberts bf61e57ce4
Ensure "email" field id does not include the section ID (#43734)
Co-authored-by: github-actions <github-actions@github.com>
2024-01-18 04:33:50 -08:00
Mike Jolley 1dee94362f
[Experimental] Surface additional checkout fields on Order Confirmation page (#43449)
* Get default attributes on front end

* Remove console log

* Show notice about 0 registered fields in editor

* Do not show block in editor if no fields are registered

* Wrapper block

* Styling/spacing

* Update webpack config

* Register heading pattern

* Wrapper block type definition

* get_fields_for_location return fields in array format

* Use wrapper in default content

* Separate fields from the hook block

* Hide when no custom fields exist

* Address and contact fields

* Shared form fields in settings

* remove info block from wrapper

* Revert render_content to original

* rename block

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Update styling

* Create shared get_order_additional_fields_with_values to format values

* Update block names and descriptions

* Show address placeholders

* Add changefile(s) from automation for the following project(s): woocommerce-blocks, woocommerce

* Unused import

---------

Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: github-actions <github-actions@github.com>
2024-01-16 13:17:28 +00:00
Thomas Roberts 23db3eff69
[Experimental] Handle adding attributes during fields registration (#43379)
Co-authored-by: github-actions <github-actions@github.com>
2024-01-15 14:59:36 -08:00