Commit Graph

784 Commits

Author SHA1 Message Date
Seghir Nadir 1ef1aaa1f0
Hadren styles for interactive elements in Checkout block (#51375)
* reset styles for panel button

* reset styles for address card edit and address line 2

* Update shipping selector buttons

* fix line height

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

* remove extra styles no longer needed

* update styles to balance chevron and change to span

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
2024-09-16 13:03:20 +00:00
Seghir Nadir 348455fb02
Add focus styles for select in Checkout block (#51332)
* Add focus styles for select

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-09-13 11:13:40 +01:00
Mike Jolley b0401ef25d
[Experimental] Delayed Account Creation Block (#50934)
* Add block to templates

* Register block type with php

* Create block type class

* Update webpack

* Move password strength meter component

* Add button styles when disabled

* Move password strength component

* Block WIP

* CSRF token handling

* Put new block behind feature flag

* Add experimental flag docs

* Update icon + description

* Changelog

* Lint errors

* Style controls

* Adjust icon markup

* subsctring match

* More specific import

* Fix test fail caused by layout shift

* Wording changes from Figma

* Check if logged in, not just if the current email is registered

* Use opacity for disabled button text

* Sync order data with customer after account creation

* Add id/fragment to form
2024-09-12 11:18:13 +01:00
Seghir Nadir 96497814e4
Revert update to createRoot in Checkout block. (#51289)
* Revert "[React 18] Use `createRoot().render()` instead of `render()` (#48843)"

This reverts commit 752273e6ce.

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

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-09-11 13:44:09 +00:00
Thomas Roberts 72112bd5d4
Update shipping calculator wording and Cart/Checkout order summary title (#51072)
* Update isAddressComplete to allow only specific fields to be checked

* Update tests for isAddressComplete

* Update wording on "enter address" prompt in Cart sidebar

* Update Shipping to Delivery in cart & checkout shipping total

* Only check the city, state, country, & postcode fields in shipping calc

* Update wording in the "Ships to" section of cart/checkout sidebar

* Update shipping calculator button to say delivery

* Update tests to use new strings

* Remove test that was falsely passing anyway

This test checked for presence of a string that wasn't in the codebase. It also doesn't seem like a valid test. Why would we want to remove the button just because default rates are available?

* Add changelog

* Left align text in shipping calculator button

It floats weirdly in the middle with the new text changes

* Update text in tests

* Update wording in unit tests

* Update shipping calculator text in test

* Update shipping text in test

* Update use of shipping in tests

* Skip test with no translation available

* Lint fixes

---------

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2024-09-09 15:19:57 +02:00
Sam Seay 115d4f16c9
Remove the wc combobox component, it is no longer used (#50975) 2024-09-03 09:20:46 +00:00
Gabriel Manussakis d773bb483a
[Accessibility] Focus coupon input if it has an error (#48738)
* Focus cupon input if it has errors

* Add changelog file

* Add styles to coupon field with error on cart page

* Make coupon errors accessible on the cart page

* Add styles to coupon field with error on checkout page

* Rename coupon variables on cart

* Focus coupon field with error before updating live region on cart page

* Focus coupon field with error before updating live region on checkout page

* Remove incorrect early return

* Update coupon error notice test

* Improve coupon error message semantics

* Fix coupon errors for block based themes

* Update tests to not look for coupon errors on the notice block

* Rename coupon-error-message to coupon-error-notice

* Fix notice if coupon doesn't exist on tests

* FIx invalid coupon notice on classic theme test

* Update test for coupon inline notice

* Fix code formatting

Co-authored-by: Darin Kotter <darin.kotter@gmail.com>

* Fix code formatting

Co-authored-by: Darin Kotter <darin.kotter@gmail.com>

* Fix code formatting

Co-authored-by: Darin Kotter <darin.kotter@gmail.com>

* Fix code formatting

Co-authored-by: Darin Kotter <darin.kotter@gmail.com>

* Don't clear coupon input if code doesn't exist

* Create coupon error notice mixin

* Update coupon error notice styles

* Coupon error notice T19 compatibility

* Coupon error notice T17 compatibility

* Coupon error notice TT1 compatibility

* Coupon error notice TT compatibility

* Coupon error notice TT2 compatibility

* Coupon error notice TT3 compatibility

* Add spaces around paramenters

Co-authored-by: Darin Kotter <darin.kotter@gmail.com>

* Add spaces around paramenters

Co-authored-by: Darin Kotter <darin.kotter@gmail.com>

* Replace $red SCSS variable with a CSS one

* Keep input with the invalid coupon code after notice appears

* Fix typo in comment

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Fix typo in comment

Co-authored-by: Mike Jolley <mike.jolley@me.com>

* Break notice message into two lines

* Break if statement into two lines

---------

Co-authored-by: Darin Kotter <darin.kotter@gmail.com>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
2024-08-23 19:22:28 +01:00
Caleb Mazalevskis b4fd419f74
Fix typos. (#50047) 2024-08-23 18:26:09 +01:00
Seghir Nadir e66ccf698c
Run Checkout block coupon filter on empty array (#50876)
* Run Checkout block coupon filter on empty array

* fix conditional

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

* remove useless eslint skip

---------

Co-authored-by: github-actions <github-actions@github.com>
2024-08-23 15:34:57 +00:00
Karol Manijak 2f68f9265b
Fix most of lint warnings (#50869)
* Fix number of lint warnings

* Add changelog

* Improve mocking value

* Fix exports

* Fix mock

* Bring back the empty array hook dependency
2024-08-23 14:30:14 +02:00
Gabriel Manussakis c9aa65a22f
[Accessibility] Fix focus order on checkout block page (#49649)
* Render total blocks before fields on checkout

* Reverse checkout total blocks position on desktop

* Add changelog file

* Add conditional styles to reverse checkout blocks order

---------

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2024-08-20 15:42:38 +02:00
Fernando Marichal ce98e51430
[Filter Products by Price]: Update view when changing the min/max value (#50651)
* Use handlePriceChange method

* Fix E2E test

* Add changelog

* Remove onBlur

* Add select when clicked

* Fix comment

* Add functionality to experimental block

* Fix E2E test
2024-08-20 10:20:09 -03:00
Gabriel Manussakis d7783511ff
[WIP][Accessibility] Fix inline documentation typos in woocommerce-blocks (#50737)
* Fix inline documentation typos in woocommerce-blocks

* Add changelog file

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

* Remove original changelog

---------

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
2024-08-19 13:57:38 +01:00
Albert Juhé Lluveras 9f69c63a9e
Product Price block: prevent price amounts from breaking into multiple lines (#50660)
* Product Price block: prevent price amounts from breaking into multiple lines

* Add changelog file
2024-08-14 15:17:03 +02:00
Tarun Vijwani 5e5378e444
Remove Active Shipping Zones check for displaying shipping calculator on Cart Page (#49214)
* Remove active shipping zones check for displaying shipping calculator

- Remove active shipping zones check for displaying shipping calculator on Cart Page

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

---------

Co-authored-by: Tarun Vijwani <tarun.vijwani@automattic.com>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2024-08-06 10:41:26 +01:00
Simon Porter f61a9bf37a
Allow rendering the quantity in cart when the quantity is not editable (#49450) 2024-07-29 16:12:15 +01:00
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