Commit Graph

16 Commits

Author SHA1 Message Date
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
Mike Jolley 13d3e11d40
Checkout: Add password field to create account form (#48985)
* Add site title to account checkbox

* Add customer_password support to Store API

* Hide password nag if defining own password

* Add woocommerce_registration_generate_password option to block assets

* Change login prompt to just "log in"

* Add default styling to password inputs

* Reset line height for checkbox inputs

* Add customer password to store

* Add password field to contact information block

* Handle customer password in checkout processor

* Styling for new elements

* Update tests so they match new create account label

* Update log in link in tests

* Add e2e tests for password field

* Add validation message and fix rendering when account is required

* Changelog

* Add missing api to tests

* Remove console log

* rerender checkout

* Update log in link in test

* Adjust validation so we can change the label in messages with custom callback

* Use queryByText in test

* Make sure password generation is on in tests

* Create password if provided password is empty

* Skip "Place order" button translation test

* Revert "Skip "Place order" button translation test"

This reverts commit 7aed6137e88cdb3577f74f6f0c05258b531ed534.

* Update plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-contact-information-block/block.tsx

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

* Update plugins/woocommerce-blocks/assets/js/data/checkout/reducers.ts

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

* Comment empty condition

* Update CSS classnames

* Return null in CreateAccountUI if nothing to display

* Linting: Return return param

* Document $password param

---------

Co-authored-by: Thomas Roberts <thomas.roberts@automattic.com>
Co-authored-by: Thomas Roberts <5656702+opr@users.noreply.github.com>
2024-07-15 11:43:02 +01:00
Thomas Roberts bb92392d9f
Apply spacing improvements to the Checkout block (#47565) 2024-06-03 11:18:42 -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
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
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
Tarun Vijwani 29b4217f15 Update the border colors in the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/11474)
* Change border color to Gutenberg 100 for Cart and Checkout blocks

* Change form input color to Gutenberg 900 for Cart and Checkout blocks

* Fix additional border colors of Checkout block

* Update borders and form field colors in Cart Block

* Change border color to $universal-border-light

* Change border color for cart line items to $universal-border-light

* Change  form input fields border color to $universal-border-dark

- Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white.

* Fix colors of text area border and form steps

* Change  form input fields border color to $universal-border-dark

- Add $universal-border-dark color variable for woocommerce/woocommerce-blocks#1e1e1e on white.

* Fix form steps

* Update universal dark border rgba value

- Update universal dark border rgba value from rgba(0, 0, 0, 0.882) to rgba(17, 17, 17, .80) to keep it consistent with universal-border colors

* Update $universal-border-light color

* Update the opacity of the borders

* Update the border color to rgba (17, 17, 17, 0.12)

* Roll back $universal-border-light value to the original value: 0.115

* Remove Opacity and pass it as argument in with-translucent-border

- We have with-translucent-border option that accepts border and opacity for pseudo elements.

* Remove additional spaces

* Replace with-translucent-border with normal border

- Since we're are not mixing the opacity to the border color so we don't need to use mixin with-translucent-border.

* Fix applied css and add low contrast Color usage details

-  Fix minor CSS as per the standards.
- Add comments for universal border colors that they're low contrast colors and should be used for decorative elements only

* Fix border gap and double border for multiple shipping packages

* Fix payment method borders and Cart line items borders

- Change border bottom to border-top for cart line items.
- Fix payment method radio control borders.

* Fix local pickup border

- Local pickup was using  with-translucent-borders so it has some opacity, changed it to border-bottom.

* Add border-bottom to cart items

* Remove additional border from Cart items

* Fix radio and checkbox borders as per the design

* Fix shipping method borders and background color as per the design.

* Force align left on the description for the local pickup options.

* Update border color in quantity selector component

* Fix Shipping options radio selection alignment

- Add left padding to wc-block-components-shipping-rates-control__package element.

* Update colors and variables

* Change checkbox and radio button colors

- Change checkbox and radio button colors from  rgba(25, 23, 17, 0.3) to  rgba(25, 23, 17, 0.48).

* Remove bottom property from express payment style
2023-12-07 21:37:48 +04:00
Mike Jolley 7e06584c14 Update settings text and styling (https://github.com/woocommerce/woocommerce-blocks/pull/9440) 2023-05-12 10:11:08 +01:00
Tarun Vijwani e39a27bd74 Add theme-level global styles to Cart and Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/8809)
* Dummy commit to open a PR

* Revert the last change

* Ensure Checkout block supports the theme-level global styles for `Colors » Buttons` (https://github.com/woocommerce/woocommerce-blocks/pull/8844)

* Add GS support for button colors in Checkout block

* Sync button hover effect with GB

* Fix link margin/padding (https://github.com/woocommerce/woocommerce-blocks/pull/8908)

* Replace <AddToCartButton /> with <ProductButton /> (https://github.com/woocommerce/woocommerce-blocks/pull/8914)

* Add GS support for button typography in Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/8918)

* Ensure Checkout block supports the theme-level global styles for Typography » Buttons (https://github.com/woocommerce/woocommerce-blocks/pull/8892)

* Remove classname from cart image to avoid conflicts (https://github.com/woocommerce/woocommerce-blocks/pull/8898)

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

* Use consistent and semantically correct HTML elements in the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/9065)

* Allow button height to adjust

* Ensure to display full width heading background

* Inherit font style and font weight for headings

* Inherit font style and font weight for textarea

* Inherit font family and font weight for buttons

---------

Co-authored-by: Niels Lange <info@nielslange.de>
Co-authored-by: Mike Jolley <mike.jolley@me.com>
2023-04-22 00:11:10 +04:00
Tarun Vijwani 93441e2e52 Add coupon link instead of dropdown in Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/7993)
* Add coupon link instead of dropdown in Cart and Checkout blocks

* Fix state names used for displaying the link and coupon form

* Fix storybook for coupon block

* Fix unit test for coupon block

* Fix css and accessibility

* Fix coupon block position on Checkout

* Update e2e test cases for coupon block (https://github.com/woocommerce/woocommerce-blocks/pull/8022)

* Update e2e test cases for coupon block

* Fix perfomance test for coupon block

* Fix double await typo

* Fix perfomance test for coupon block

* Remove CSS

* Use classnames to add and remove classes

Improved the code to use classnames to add and remove classes. Also, moved the logic to handle click and submit to separate functions.
2023-01-17 13:10:50 +04:00
Niels Lange 7bd48074fb Prevent Express Checkout block from being cut off (https://github.com/woocommerce/woocommerce-blocks/pull/7152)
* Prevent Express Checkout block from being cut off

* Prevent step numbers from being cut off in editor
2022-09-20 17:45:20 +07:00
Thomas Roberts d45ef84219 Add dismissible compatibility notice to sidebar when editing Cart and Checkout (https://github.com/woocommerce/woocommerce-blocks/pull/6869)
* Add default page notice

* show notice all inner blocks

* support flow when page isnt saved

* switch from where we get the current post id

* update lock

* fix types

* Remove old compatibility notices from Cart and Checkout

* Move useCompatibilityNotice to sidebar-compatibility-notice directory

* Remove old CartCheckoutCompatibilityNotice

* Create sidebar compatibility notice hoc

* Add isCartOrCheckoutOrInnerBlock function

* Refactor defaultNotice to use new isCartOrCheckoutOrInnerBlock func

* Remove BlockSettings from checkout edit and export from checkout-shared

* Change so component still renders, it is just hidden with display: none

This is required because when it returns null the component gets skipped from being added to the Slot, then when it does return a component, then it gets rendered at the bottom of the Slot. By ensuring it always renders we can have it at the top all the time.

* Set the priorities of the hoc filters so compat notice renders first

* Make isCartOrCheckoutInnerBlock a hook

* Remove old compatibility notice related tests

* Remove BlockSettings from Cart

* Remove withDefaultNotice hoc

* Include DefaultNotice in compatibility notice

* Remove DefaultNotice from Checkout

* Rename withSidebarCompatibilityNotice to withSidebarNotices

This is because it includes the sidebar compatibility notice and the default notices

* Remove useIsCartOrCheckoutOrInnerBlock hook

* Remove compatibility notice code from tests

* Revert DefaultNotice back to the old one

* Remove unused components

* Remove withBlockSettings HOC and fix TS types

This is an abstraction that is no longer required, we can just include BlockSettings in the Cart and Checkout blocks

* Remove CartCheckoutFeedbackPrompt from BlockSettings

It will be included in sidebar-notices instead

* Fix TS Types in DefaultNotice

* Add BlockSettings to cart and checkout edit

* Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881)

* Show "Feedback prompt" for all inner blocks

* Fix the "feedback" notice position for these blocks

The "checkout fields", "checkout billing address" and
"checkout shipping address" have the addressFields option which
gets rerendered and placed at the bottom of the inspector controls.

* Tidy up the address-fields hoc

* Use correct block name to check for billing or shipping address

* Revert "Editor: Add feedback box to the Cart & Checkout Inner Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/6881)"

This reverts commit 5f3d6cf15ce08d9c303e62ec3e0d0315ead1281f.

* Add hack to get feedback prompt to render last

* Fix TS errors for context and attributes

* Include CartCheckoutFeedbackPrompt in accountcontrols & addresscontrols

* Do not include feedback prompt if on an address block or contact info

* Remove unused hoc for address fields

Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
Co-authored-by: Saad Tarhi <saad.trh@gmail.com>
2022-08-12 15:23:08 +01:00
Mike Jolley eb196226d8 WIP: Add Inner blocks to order summary (https://github.com/woocommerce/woocommerce-blocks/pull/6065)
* Sub/Total/Fee inner blocks

* Row blocks within the inner block

* Update icons

* Resolve stying issues

* Remove old block

* Pin totals row

* Locking logic update

* Heading inner block

* Refactor where inner blocks are defined

* Add todos

* Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas.

* Improve frontend registration of components using new entrypoint

* Experiment- external block context

* Revert "Experiment- external block context"

This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f.

* Duplicate inner blocks to avoid conflicts with context

* Remove todo

* Rename block dir

* Some test fixes

* Fix import

* fix import

* linting

* Remove unused attributes

* Optional classname

* fix coupons import

* fix shipping mocks

* Styling

* Fix selectors in e2e tests

* Add back the wc-block-components-totals-wrapper class that was used for each segment in the totals Order summary

Because, removing them was:
-  a breaking change for the old structure
- was making it harder to target the inner blocks. Before the class was used to target each segment
- it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency

* Reuse the TotalsWrapper component for C& C blocks inner blocks

This component was removed in this PR, but  we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar.

Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
Co-authored-by: Raluca Stan <ralucastn@gmail.com>
2022-04-01 15:45:18 +02:00
Tomasz Tunik f7f1b89dc5 Upgrade @wordpress/scripts and /env packages (https://github.com/woocommerce/woocommerce-blocks/pull/6114)
* upgrade wordpress/scripts to 22.3

* update jest config/setup

* add explicit-exports-references plugin

to handle payment-method-config.tsx spying on external methods
the way code is output now changed and tests like this would not
work anymore as transpilet files were no longer using exports but
local references to methods.

* missing snapshot

* make cart-products E2E test more stable

* surppress eslint error in test file

* fix css stylelint issues

* update eslint-plugin-woocommerce eslint package

* remove temp test:e2e:start script

* re-run

* add stylelint as recommended extension

* remove redundant types (provided by packages now)

* patch update @testing-library/jest-dom
2022-03-28 15:00:20 +02:00
Raluca Stan 051bb64138 Fix wide appender buttons overlap in Cart & Checkout blocks in the Editor (https://github.com/woocommerce/woocommerce-blocks/pull/5801)
* Add the correct appender button for non empty groups

* Revert "Add the correct appender button for non empty groups"

This reverts commit 4b41d7d7f82461813b3464d1b4f931c442bce3be.

* Force position relative for custom InnerBlocks.ButtonBlockAppender  appenders.

Removing InnerBlocks.ButtonBlockAppender  from renderAppender = {InnerBlocks.ButtonBlockAppender } results in the black appender button beeing shown only when the block is selected, and we need the appender to be visible by default.
2022-02-10 11:33:48 +01:00
Thomas Roberts a46f13c6c5 Move Checkout block attributes into metadata (`block.json`) (https://github.com/woocommerce/woocommerce-blocks/pull/5594)
* Add block title to AbstractBlock class

* Add block title to Checkout block

* Include all block.json files in tsconfig

* Add get_block_title method to Checkout.php

* Remove redundant block_title field

* Add block.json and remove static attributes from attributes.ts

* Register block using attributes from block.json

* Add metadata_path to AbstractBlock

* Add function to AssetsApi to get the metadata path from the plugin root

* Register the block using metadata if it's set in the block's class

* Remove get_block_title method

* Only add supports and attributes to the block when not registering with metadata

* Change get_block_metadata to get_block_metadata_path

* Change indentation to tabs in block.json

* Update comment to clarify why attributes and supports are set later

* Check if path to metadata is not empty instead of set and not empty

* Move checkout block out of cart-checkout directory

* Update get_block_metadata_path function to find block.json automatically

* Remove metadata path from AbstractBlock

* Check if there's a metadata file and register blocks with metadata if so

* Move deprecated attributes out of metadata and into attributes.ts

* Re-add deprecated attributes to checkout index

* Move order notes test

* Move test for checkout phone number in edito

* Fix indentation in checkout/block.json

* Move checkout terms tests

* Try forcing storefront theme in e2e tests

* Revert "Try forcing storefront theme in e2e tests"

This reverts commit 5b0fd47a2c39aadb0141a4ed28cbc0e6baa89625.

* Try capturing screenshot on test failures

* Try uploading error in try catch

* Try uploading artefacts on error

* Test uploading artefacts

* Screenshot just before looking for edit post layout

* Revert "Screenshot just before looking for edit post layout"

This reverts commit 61dff027789ce13a0d84e7b6f11e431637c5a450.

* Revert "Test uploading artefacts"

This reverts commit adf5cc55bcdb677f889bf5a62803b4150d98e665.

* Revert "Try uploading artefacts on error"

This reverts commit 7441a832a113a95fef89cc1b8db6dc79271be516.

* Revert "Try uploading error in try catch"

This reverts commit ca412ce505d56286b164f588a201a451f6bceeb6.

* Revert "Try capturing screenshot on test failures"

This reverts commit 0de6e97df19b116091a7bb3b8652713867d2d80f.

Co-authored-by: Alex Florisca <alex.florisca@automattic.com>
2022-01-28 16:37:06 +00:00