Commit Graph

417 Commits

Author SHA1 Message Date
Albert Juhé Lluveras a9bcdb7d08 Create DebouncedValidatedTextInput component (https://github.com/woocommerce/woocommerce-blocks/pull/3108)
* Fix wrong Form component name

* Split CheckoutForm into smaller components for each step

* Centralize call to useCheckoutAddress

* Create DebouncedValidatedTextInput component

* Rename some variables
2020-09-07 19:03:04 +02:00
Albert Juhé Lluveras 1e75a866d8 Split Checkout form component into smaller files (II) (https://github.com/woocommerce/woocommerce-blocks/pull/3106)
* Fix wrong Form component name

* Split CheckoutForm into smaller components for each step

* Centralize call to useCheckoutAddress
2020-09-07 17:43:05 +02:00
Rua Haszard 5c7447f434 Rename js/components to js/editor-components (https://github.com/woocommerce/woocommerce-blocks/pull/3069)
* mass-rename js/components => js/editor-components & update webpack

* mass-change import '@woocommerce/editor-components' +
+ jsprettier quotes fix

* more mass-rename @woocommerce/editor-components

* fix up references to js/editor-components in various places:
- docs/readmes
- jest config
- typescritp config

* fix story path to match new folder/alias 'editor-components'

* fix jest tests: use new alias for editor-components

* include renamed `editor-components` in editor stylesheet cache group
2020-09-02 10:21:46 +02:00
Seghir Nadir 4c371e064c Use wp_login_url instead of hardcoding login path (https://github.com/woocommerce/woocommerce-blocks/pull/3090)
* use wp_login_url instead of hardcoding login path

* generating changeset for pull request

* generating changeset for pull request

Co-authored-by: github-actions <github-actions@github.com>
2020-09-01 10:56:11 +01:00
Albert Juhé Lluveras 80400e50da Split Checkout block component into smaller files (https://github.com/woocommerce/woocommerce-blocks/pull/3062)
* Rename CheckoutForm to Form

* Create CheckoutForm component

* Simplify directory structure

* Add docs about class name changes

* Add PropTypes to CheckoutForm

* Update skeleton class name

* Extract LoginPrompt

* Move loginToCheckoutUrl to a constant

* Move replaced class name docs to 3.4.0 specific file
2020-08-31 12:17:42 +02:00
Albert Juhé Lluveras a6178359bb Display Checkout block with a notice when adding a product sold individually that was already in the cart (https://github.com/woocommerce/woocommerce-blocks/pull/2854)
* Rename component to match directory

* Typo

* Checkout API: return cart errors as 'notice' property instead of throwing

* Checkout block: display server errors as notices

* Strip tags content

* Use same strings as in Core

* Add support for several notices

* Rename variables and allow all kind of notices

* Strip HTML tags and content in frontend

* Fix Checkout block in editor

* Add stripTagsAndContents tests

* Print notices before running blocks logic
2020-08-21 09:34:29 +02:00
Albert Juhé Lluveras 8bb217cec6 Show express payment methods in the Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/3004)
* Shown express payment methods in Cart block

* Fixes

* Create usePositionRelativeToViewport hook

* Typo

* Style fixes

* Remove footer push div

* Styling fixes

* Improve code clarity

* Split ExpressCheckoutFormControl into two components

* Rename visibilityObserver to referenceElement

* Replace 'useEffect' with 'useLayoutEffect'

* Add tests for usePositionRelativeToViewport

* Self-closing div

* Add explanatory comment

* Create a shim for IntersectionObserver

* Update express payment components class names

* Add todo comment to remove IntersectionObserver shim when we drop IE11 support
2020-08-20 16:14:12 +02:00
Seghir Nadir 85ed96b58e Add dark colors support to Cart & Checkout controls (https://github.com/woocommerce/woocommerce-blocks/pull/2981)
* add dark styles setting

* add attributes to blocks

* add colors to input and select

* cover rest of items

* tweak select contrast

* fix ie11 issue

* fix focus

* include checkbox styles

* fix extra spacing after phone number

* add styling to quantity selector

* remove extra rule

* remove editor styles for radio control

* use border-color

* rename variables and classes and wording

* adjust colors

* provide tighter control over colors

* remove redudant outline rule

* add more variables

* add support for order note

* use variables for textarea

* move dark mode panel to last
2020-08-14 12:08:16 +01:00
Seghir Nadir 1fddb9451d Use real previews for the Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2992)
* Use real previews for the cart and checkout

* remove extra files and css
2020-08-13 14:24:51 +01:00
Seghir Nadir 145db3ff5d fix issue with no margins on phone input (https://github.com/woocommerce/woocommerce-blocks/pull/2989)
* fix issue with overlapping margins

* move styles out of select

* remove extra spacing

* remove extra spacing from cart

* move styles to state input and remove extra position.
2020-08-11 10:00:53 +01:00
Rua Haszard b8137587c3 Link cart/checkout merchant (editor) feedback prompt to special GitHub issue type (https://github.com/woocommerce/woocommerce-blocks/pull/2976)
* issue template for cart & checkout feedback

* fix example desktop OS (not iOS!)

* delete `withFeedbackPrompt` - not used

* link cart/checkout editor feedback to GitHub issue:
- add new CartCheckoutFeedbackPrompt with specialised text & url
- use in cart/checkout blocks
- tweaked wording of feedback prompt text

* use speech bubble icon to represent feedbackiness

* simplify cart/checkout feedback prompts

* add default labels to all issue templates

* use markdown heading syntax for headings (was basic bold previously)

* tweak wording (remove hint of frustration) and use new "feedback" label
2020-08-10 08:18:36 +12:00
Albert Juhé Lluveras dfec03202d Fix JS-rendered blocks inside Empty Cart (https://github.com/woocommerce/woocommerce-blocks/pull/2904)
* Fix JS-rendered blocks inside Empty Cart

* Add deprecation rules

* Performance improvements

* Typo

* Remove 'is-loading' class requirement

* Undo changes moved to woocommerce/woocommerce-blocks#2952

* Improve some comments

* Improve code

* IE 11 fix

* Minor fixes

* Assign default value in arguments destructuring

* Refacot renderFrontend code to make it easier to understand

* Revert "Assign default value in arguments destructuring"

This reverts commit 04ae943c675b94e599a1d1700075a79ef8be5004.
2020-08-07 13:33:32 -04:00
Albert Juhé Lluveras fcf8f5c51f Show Checkout block in editor also when guest checkout is not allowed (https://github.com/woocommerce/woocommerce-blocks/pull/2958) 2020-08-05 10:35:38 +02:00
Albert Juhé Lluveras 311d8ddf12 Add 'Order notes' to Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/2877)
* Add Checkout Order notes (UI)

* Add Checkout Order notes (context)

* Add missing useEffect dependencies

* Remove duplicate toggle in editor

* Minor fixes

* Check whether orderNotes have changed before creating a new state object

* Rename showCounter to showStepNumber

* Rename 'onChange' with 'onTextChange'

* Add comment and tests to FormStep component

* Rename 'with-counter' to 'with-step-number'

* Fix wrong prop

* Make it so order notes are persisted when toggling the checkbox

* Update type-defs

* Set showStepNumber default value to true
2020-07-31 17:17:01 +02:00
Darren Ethier 59ca5ad19c Release: 3.0.0 (https://github.com/woocommerce/woocommerce-blocks/pull/2887)
* add changelog to readme.txt

* Add testing docs for release

* add some new commands to help with release testing phase

* Add testing notes for 3.0.0

* fix testing note typo

* updae notest to reference the new package-plugin:deploy script for use as part of the release process

* Add note about creating manual tag for the release.

* automate creation of dev tag for release.

* remove release branch from travis branches because we now do pull requests for releases

* remove duplicate back order badge for cart (https://github.com/woocommerce/woocommerce-blocks/pull/2890)

* update zip link in testing notes

* only update stable version in readme.txt if not a pre-release

* Add handling for conditional github release creation based on WP deploy question

* add distignore fir wp deploy builds

* Cart & Checkout: fix '0' visible when product stock was 0 and it allowed backorders (https://github.com/woocommerce/woocommerce-blocks/pull/2891)

* Create wordpress-deploy.yml

* fix cod not accounting for global rate values (https://github.com/woocommerce/woocommerce-blocks/pull/2894)

* ensure we’re only running checks for `wc_reserved_stock` table when necessary (https://github.com/woocommerce/woocommerce-blocks/pull/2895)

* update readme.txt changelog

* remove unnecesary variable definitions

* update github deploy script

* Bumping version strings to new version.

* add missing step for checking out code from tag

* fix exclusion for docker-compose.yml

* fix zip name (it differs from repository name)

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-07-22 12:36:55 -04:00
Albert Juhé Lluveras a69a50856a Cart & Checkout: fix '0' visible when product stock was 0 and it allowed backorders (https://github.com/woocommerce/woocommerce-blocks/pull/2891) 2020-07-21 17:41:14 +02:00
Albert Juhé Lluveras 8bfb95c808 Deregister core cart/checkout scripts and styles when rendering the blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2842)
* Deregister core cart/checkout scripts and styles when rendering the blocks

* Fix regression: redirect to full cart when adding a product from empty cart

* Make it so it scrolls to the top

* Update assets/js/base/utils/legacy-events.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* Add check for jQuery availability

* Listen to removed from cart event too

* Remove unnecessary useEffect dependency

* Remove jQuery event subscriptions on component unmount

* Fix tests

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-07-14 15:46:44 -04:00
Albert Juhé Lluveras d894fed1df Cart block: show products on backorder (https://github.com/woocommerce/woocommerce-blocks/pull/2833)
* Show backorder notice in the Cart block

* Don't render variation <div> if empty

* Create ProductBackorderNotification component

* Add product backorder notification to the checkout block

* Fix classname and comment

* Rename notification->badge and don't show low stock badge if backorder is shown

* Use ternary to dispaly backorder/low stock badge
2020-07-14 17:25:53 +02:00
Albert Juhé Lluveras 2fadea064e Document Cart & Checkout button styles (https://github.com/woocommerce/woocommerce-blocks/pull/2814)
* Reduce specificity of some button styles

* Submit container: make it possible for themes to change the shadow color without the need to rewrite shadow values

* Use background-color instead of background property in docs

* Add docs to style the button and the submit container

* Remove border from button

* Add back state styles to button component

* Docs improvements

* Undo unncessary changes in button component styles

* Add spaces
2020-07-07 11:59:51 +02:00
Seghir Nadir 81570d733c Tweak some logic in our cart Integration test. (https://github.com/woocommerce/woocommerce-blocks/pull/2778)
* Fix Cart test async logic

* tweak test

* refactor test to not call response twice

* add comment for why we're calling fetch twice

* fix duplicate calls

* reset empty test to normal value

* switch to mockResponse

* convert comment to todo block

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-07-02 15:10:19 -04:00
Mike Jolley d25d233f27 Replace usage of `cart-checkout/button` with `@woocommerce/base-components/button` (https://github.com/woocommerce/woocommerce-blocks/pull/2781)
* Change to base component

* Remove todo
2020-06-25 16:50:48 +01:00
Albert Juhé Lluveras 3fae904643 Use WooCommerce thumbnail images in Blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2755)
* Remove legacy files

* Use thumbnail product image for Cart, Checkout and Reviews blocks

* Add option to toggle between full size and cropped image to the Atomic Product image block
2020-06-23 13:25:28 +01:00
Albert Juhé Lluveras b74b85dc03 Remove text color from Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2745)
* Remove text color from Cart and Checkout blocks

* Fix Cart price column misalignement. woocommerce/woocommerce-blocks#2744
2020-06-23 11:13:53 +01:00
Albert Juhé Lluveras dfa6fca924 Cart & Checkout: show shipping method prices with taxes depending on settings (https://github.com/woocommerce/woocommerce-blocks/pull/2748) 2020-06-22 10:47:35 +02:00
Albert Juhé Lluveras 610e082f9c Update base/components classnames (https://github.com/woocommerce/woocommerce-blocks/pull/2711)
* Update base/components classnames

* Fix class name conflict

* Fix some class names mismatch

* Fix review loading placeholder styles

* Fix docs format

* Update old class name

* Fix price slider regression

* Fix load more button component missing legacy class

* Fix wrong loading mask styles classname

* Remove 'checkout' from 'wc-block-components-checkout-payment-methods__save-card-info' classname

* Make it explicit legacy classes will be removed in the next major version

* Make product variation data styles belong to product metadata

* Improve docs sentence
2020-06-17 11:53:42 +02:00
Albert Juhé Lluveras f46bc68f6e Fix Cart and Checkout sidebar styling issues (https://github.com/woocommerce/woocommerce-blocks/pull/2694)
* Order summary: Add spacing between product name and price name

* Remove border from shipping options in the side bar

* Add a hasBorder prop to Panel

* Checkout Order summary: remove margin product description

* Fix padding when there are multiple packages and remove old code

* Simplify selector

* Add margin botton to no shipping options notice

* Make sure Checkout titles are aligned when there are no express payment methods

* Update step heading margins according to new designs
2020-06-12 14:07:02 +02:00
Darren Ethier 41ca430ffe Add initial cart flow tests (https://github.com/woocommerce/woocommerce-blocks/pull/2678)
* more setup configuration for rtl

* move default state for cart out of reducer

This also creates a file for default store states, it should make it easier to execute tests in various environments.

* Make sure there’s a default object for cart line item row

* set defaults for cartData

* add fetchMock as a global in eslint config

* add initial cart flow tests

This is just to get the ball rolling, the cart block needs more tests

* fix missing @wordpress/jest-console configs (because I overwrote the original configuration)

* update test because of change in branch

* switch import order

* add globals.d.ts file to declare globals we use.

This is a quick solution to prevent typescript linting warning about `fetchMock`. At some point we could also create a proper interface for it or import the types (if they exist) for the `jest-mock` package.

The new `globals.d.ts` file is excluded from published builds.
2020-06-10 14:21:34 -04:00
Albert Juhé Lluveras f68f11c6ca Update Checkout step progress indicator design (https://github.com/woocommerce/woocommerce-blocks/pull/2649) 2020-06-08 13:13:34 +02:00
Albert Juhé Lluveras 40426cbf93 Fix styling issues introduced in woocommerce/woocommerce-blocks#2597 and woocommerce/woocommerce-blocks#2619 (https://github.com/woocommerce/woocommerce-blocks/pull/2652)
* Move order summary styles to component style.scss

* Fix wrong class name in Order summary

* Move express payment methods a little bit higher

* Fix shipping options panel misaligned in the Cart sidebar

* Add right padding to panel button so text doesn't overlap the arrow

* Fix wrong class name in Order summary (II)
2020-06-08 11:28:58 +02:00
Seghir Nadir 0ac76337d4 Expand Feature flags (https://github.com/woocommerce/woocommerce-blocks/pull/2591)
* Revert "Move blocks to stable flag (https://github.com/woocommerce/woocommerce-blocks/pull/2261)"

This reverts commit a005649ab8.

* migrate to number based gating

* add todo to watch feature flag

* remove flags from build

* change flag in travis

* load flag in right order

* expose flag to js

* simplify flag definition

* more feature flags

* wrap flag in check

* add helper functions

* add helpers in PHP

* fix typo in flag

* move php code to src/domain/package

* tweak if condition

* return flag to travis

* fix broken block name
2020-06-05 20:13:51 +01:00
Albert Juhé Lluveras eaeedd31e0 Update item count badge styles (https://github.com/woocommerce/woocommerce-blocks/pull/2619)
* Update item count badge styles

* Make sure item count badge doesn't break in multiple lines

* Make item count badge have white background

* Add docs

* Move order summary CSS properties outside of the sidebar class to reduce specificity

* Move Order summary to its own component
2020-06-05 17:03:48 +02:00
Albert Juhé Lluveras 1b51a8e050 Unify Cart headers (https://github.com/woocommerce/woocommerce-blocks/pull/2615)
* Unify Cart headers

* Change Cart title to 'Your cart (x items)'
2020-06-05 16:30:49 +02:00
Mike Jolley da58a8b44f Add Inner Block Rendering and Atomic Block Styles (https://github.com/woocommerce/woocommerce-blocks/pull/2607)
* Register Atomic Blocks and save some block content

* renderInnerBlocks utility

* Frontend Rendering

* Clean up atomic block classnames

* Move shared styles

* Create a hoc for attribute mapping

* Rename some unpluralised class names

* Remove prefixes from atomic component class names

* Updated styles

* Update styles from master

* Revert product list styles

* 2020 fixes

* Separate renderFrontend from renderInnerBlocks

* Lazy loading of components

* Tweak loading classes

* FIx all products loading state

* Revert lazy implementation - creates too many unneccessary files due to webpack config

* Cleanup

* Remove wcBlocksBuildUrl

* Move call to register_atomic_blocks

* Remove duplicate key

* reuse render frontend

* Corectly handle frontend attribute mapping to keep editor working

* Style updates

* Update side effects

* Remove width style from rating to fix alignment

* Move ssr grid styles to main stylesheet

* Put back prefixed classnames

* 2020 styling fixes

* Create frontend files instead of doing it all in block map

* Update assets/js/atomic/utils/get-block-map.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update assets/js/atomic/utils/render-parent-block.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Fix last child alignment regardless of block type

* More specificity fixes

* 2020 button alignment

* static fix to prevent offsets

* fix placeholder image in firefox

* Issues reported in feedback

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-06-05 13:18:16 +01:00
Albert Juhé Lluveras 77b68795d8 Update Cart & Checkout heading styles (https://github.com/woocommerce/woocommerce-blocks/pull/2597)
* Honor heading styles in Cart and Checkout blocks

* Replace Panel with DisclosureWidget and remove Card

* Remove panel-style from main entry

* Rename DisclosureWidget props

* Simplify TitleTag assign

* Add aria-expanded attribute

* Rename DisclosureWidget to Panel

* Make Panel button clickable area smaller

* Fix specificity issues with Twenty Twenty

* Reset italics in reset-typography mixin

* Make C&C titles font size large

* Add padding to shipping options when in the sidebar
2020-06-05 12:00:19 +02:00
Albert Juhé Lluveras d1685bda7b Use named font sizes instead of values in px (https://github.com/woocommerce/woocommerce-blocks/pull/2533)
* Use named font sizes instead of values in px

* Convert rem mixin to em

* Remove unnecessary line-height

* 'Design' -> 'layout'

* Add comment to magic line-heihgt number

* Update a couple of class names to use BEM

* Use consistent name for SCSS variables

* Fix order summary line heights

* Update docs/contributors/coding-guidelines.md

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

Co-authored-by: Mike Jolley <mike.jolley@me.com>
2020-05-29 12:16:33 +02:00
Mike Jolley b062a67faf Accept object parameters in renderFrontend util (https://github.com/woocommerce/woocommerce-blocks/pull/2567) 2020-05-27 11:11:30 +01:00
Albert Juhé Lluveras 79359e7056 Fix Cart style discrepancies (editor-frontend) (https://github.com/woocommerce/woocommerce-blocks/pull/2486)
* Fix different heading size of Cart block between frontend and editor

* Increase Cart submit button specificity so styles are applied in the editor

* Ensure buttons don't inherit borders

* Simplify styles

* Create Title component

* Rename 'level' prop to 'headingLevel'
2020-05-25 18:45:38 +02:00
Darren Ethier ce1e334c56 Fix broken dynamic address fields dependent on locale for selected country. (https://github.com/woocommerce/woocommerce-blocks/pull/2547)
* add missing dependency

* Don’t include all defaultAddressFields in address field config
2020-05-25 07:00:26 -04:00
Darren Ethier 5668f58f2c Include `onSubmit` handler for CheckoutForm component. (https://github.com/woocommerce/woocommerce-blocks/pull/2532)
* include `onSubmit` handler for CheckoutForm component and implement

* remove redundant preventDefault
2020-05-22 10:51:38 -04:00
Albert Juhé Lluveras 8f2003df4b Remove some unique font-size (https://github.com/woocommerce/woocommerce-blocks/pull/2498)
* Remove font-sizes which are already inherited

* Remove font sizes from buttons with no text

* Make summary item quantity font-size 12px
2020-05-19 08:06:35 -04:00
Albert Juhé Lluveras 11981947c5 Add CSS resets for better theme compatibility (https://github.com/woocommerce/woocommerce-blocks/pull/2478) 2020-05-14 11:07:21 +02:00
Mike Jolley 24035a1508 Update Stripe Method to display generic icon and text in label, with cards below (https://github.com/woocommerce/woocommerce-blocks/pull/2466)
* Support card alignment as a prop

* Add generic card icon to stripe

* Add icons to stripe content

* Update styles

* Label element with icon whitelist

* Update assets/js/base/components/payment-methods/payment-methods.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* Remove activePaymentMethod

* Remove spread operator

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-05-13 16:48:03 +01:00
Rua Haszard f822e8dbb5 Ensure order summary is displayed :) - (https://github.com/woocommerce/woocommerce-blocks/pull/2470)
correct logic for early bail while container width thing is setting up
2020-05-13 09:54:44 +12:00
Albert Juhé Lluveras 53c64600a3 Remove Shipping totals editor.scss file (https://github.com/woocommerce/woocommerce-blocks/pull/2465) 2020-05-12 15:56:09 +02:00
Mike Jolley 1d154364cb Introduce ContainerQueryContextProvider - hide order summary on mobile (https://github.com/woocommerce/woocommerce-blocks/pull/2432)
* Add ContainerQueryContextProvider

* Implement ContainerQueryContextProvider

* Rename based on feedback

* Update assets/js/type-defs/contexts.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

* Update assets/js/type-defs/contexts.js

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>

Co-authored-by: Albert Juhé Lluveras <contact@albertjuhe.com>
2020-05-11 17:07:22 +01:00
Seghir Nadir 39199778f8 fix broken cart styles in Editor (https://github.com/woocommerce/woocommerce-blocks/pull/2448)
* fix broken cart styles in Editor

* remove rule.
2020-05-11 13:12:47 +01:00
Albert Juhé Lluveras 76878eff0d Fix wrong frontend error button class names (https://github.com/woocommerce/woocommerce-blocks/pull/2431) 2020-05-08 09:02:18 +02:00
Albert Juhé Lluveras e970e4e86f SCSS mixins cleanup (https://github.com/woocommerce/woocommerce-blocks/pull/2405)
* Cleanup some old mixins

* Make font-size() mixin use parameters with units

* Remove hover-state mixin

* Cleanup mixins file
2020-05-07 10:48:38 +02:00
Mike Jolley 74a4e55075 Remove API summaries in favour of client side code (https://github.com/woocommerce/woocommerce-blocks/pull/2387)
* Remove summary from API

* Add wordCountType to assets

* Update packages

* Remove summary from test data

* Featured product uses short desc

* Pass description instead of summary

* Use new Summary Component

* Component and tests

* Increased versititilty of methods

* Update assets/js/base/components/cart-checkout/product-summary/index.js

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>

* Extra tests for html tags

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-05-06 11:30:15 +01:00
Mike Jolley 87e8b26e6f Store billing address to local state and persist globally to prevent loss of data (https://github.com/woocommerce/woocommerce-blocks/pull/2374)
* Remove unused shippingAsBilling prop from billing data context

* Move functions out of component and add docblocks

* Local address state

* Refactor into new custom hook

* Remove TODO and code fixed in core

* useShallowEqual to prevent updates on all field changes

* Fix stale validation errors

* cleanup

* Should be setting local state not global state for email and phone

* Combine useEffects and pass correct deps

* Update assets/js/base/hooks/checkout/use-checkout-address.js

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>

* Prettier

* Move validation update check into updateValidationError

* Fix state updaters

* Fix context definition for setShippingAddress

* Fix validation updates

* errorId dep

* Reapply changes to checkout block

* Update equality checks

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2020-05-06 11:21:30 +01:00
Rua Haszard 44346274d2 clarify various checkout block editor sidebar wording (https://github.com/woocommerce/woocommerce-blocks/pull/2401)
* tweak various checkout block editor sidebar wording

* fix accidental sentence-casing of Return to cart label
2020-05-06 09:25:41 +12:00
Rua Haszard 440ee2e3b1 move checkout submit & related elements into "main" element (https://github.com/woocommerce/woocommerce-blocks/pull/2400) 2020-05-05 14:19:47 +01:00
Albert Juhé Lluveras 30c281c524 Use container queries to load Cart and Checkout responsive styles (https://github.com/woocommerce/woocommerce-blocks/pull/2370)
* Use container queries to load Cart and Checkout responsive styles

* Update package-lock.json

* Make form-step react to container queries instead of media queries

* Make sidebar layout inner padding relative to the full-width

* Make container queries breakpoints smaller
2020-05-05 10:10:02 +02:00
Rua Haszard b7d4b48b57 remove radius from Checkout submit, consistent with theme buttons (https://github.com/woocommerce/woocommerce-blocks/pull/2390) 2020-05-05 08:13:13 +12:00
Rua Haszard da8fa3b870 Don't show checkout block for logged out users unless store is configured to allow guest checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2375)
* expose guest checkout related options to blocks

* don't show checkout if user is not logged in and guest checkout is disabled

* checkout block doesn't yet support signup:
- if logged out / guest, don't show checkout
- even if store allows sign up at checkout

* only show login prompt if user is not logged in

* link to login page (as needed) if checkout requires login

* rejig hide login link when necessary:
- use customerId from checkout context
- revert currentUserLoggedIn setting - not needed

* add redirect param to checkout login links (so checkout can continue)
2020-05-04 15:40:09 -04:00
Albert Juhé Lluveras b5497147d5 Fix long product names regression (https://github.com/woocommerce/woocommerce-blocks/pull/2391) 2020-05-04 17:15:32 +02:00
Mike Jolley a3ca37bade Change when innerblocks are rendered (https://github.com/woocommerce/woocommerce-blocks/pull/2366) 2020-05-01 10:33:55 +01:00
Mike Jolley 5a39df880f Fix summary styles and margins/padding woocommerce/woocommerce-blocks#2340 (https://github.com/woocommerce/woocommerce-blocks/pull/2368) 2020-05-01 10:31:09 +01:00
Rua Haszard be968c9103 only show checkout login prompt if store allows it (https://github.com/woocommerce/woocommerce-blocks/pull/2364) 2020-04-30 13:54:43 +01:00
Albert Juhé Lluveras 9e7623567e Make all font sizes accessible + add docs about font-size() mixin (https://github.com/woocommerce/woocommerce-blocks/pull/2291)
* Switch all font-sizes to use the mixin

* Add notice in coding-guidelines to use accessible font sizes

* Fix label alignment in forms with big font-sizes

* Fix Stripe input boxes font-size not being responsive

* Fix select overflowing in small font sizes

* Add rem function from woocommerce/woocommerce-blocks#2320

* Make the font-size() mixin set relative line-height values

* Convert several magic numbers to use the new mixins

* Update docs

* Update input/select paddings to use the rem mixin

* Add lineHeight comment

* Interpolate rem() mixin inside calc

* Make input padding use only relative units
2020-04-30 12:18:12 +02:00
Mike Jolley 6df5903e0f Checkout Block Order Summary Styles (https://github.com/woocommerce/woocommerce-blocks/pull/2355)
* Update checkout styles

* remove item prices from summary
2020-04-30 10:51:08 +01:00
Albert Juhé Lluveras fce0e2d71c Fix Cart block interaction in the editor (mobile) (https://github.com/woocommerce/woocommerce-blocks/pull/2354)
* Prevent SnackbarList from loading in the editor

* Fix snackbar styles leaking into the editor

* Prevent 'Proceed to Checkout' button being fixed to the bottom in the editor
2020-04-29 17:45:29 +02:00
Rua Haszard 7abe9dffb3 align cart main heading and totals sidebar heading: (https://github.com/woocommerce/woocommerce-blocks/pull/2346)
- set appropriate padding for main cart container
- card padding is currently provided by Gutenberg component (?)
- overriding padding on totals card to match main container
2020-04-29 13:35:42 +01:00
Mike Jolley 95809b30bb Update payment method config to include icons (https://github.com/woocommerce/woocommerce-blocks/pull/2267)
* Remove strong and cleanup existing configs

* Fix TS validation for blocks-registry

* Allow label to be string

* Split up button and icons for cart

* Make icons and payment methods available on cart page

* Fix payment method enqueuing

* Icon normalization and Stripe implementation

* PayPal Icon

* adjust spacing

* Fix string handling

* Remove paypal icon config

* Check for an object before creating icon

* Add payment icons to Stripe label

* Update common-icons.js

* Update Cart.php

* Update jest.config.json
2020-04-29 11:57:58 +01:00
Rua Haszard 1b596b94dc Quantity badge white separator + center tweak (https://github.com/woocommerce/woocommerce-blocks/pull/2347)
* add extra white border to quantity badge

* nudge checkout quantity badge so it's roughly centered with image corner
2020-04-29 10:22:12 +01:00
Seghir Nadir 476ae5dcd5 remove order note (https://github.com/woocommerce/woocommerce-blocks/pull/2318) 2020-04-28 11:07:05 +01:00
Mike Jolley e85b6fe9a9 Inject block attributes rather than save them (https://github.com/woocommerce/woocommerce-blocks/pull/2273)
* Inject attributes rather than saving them

* Update snaps
2020-04-27 12:06:58 -04:00
Albert Juhé Lluveras 72c7b38022 Add screen reader text to remove item icon (https://github.com/woocommerce/woocommerce-blocks/pull/2285) 2020-04-24 15:11:14 +02:00
Albert Juhé Lluveras 96e8ccf1a4 Cart & Checkout: Update styles to better match designs (https://github.com/woocommerce/woocommerce-blocks/pull/2283)
* Add ending dot to sentence

* Open links to products from Cart and Checkut blocks in new tabs

* Makes sure product names are broken if they overflow the container

* Use native find instead of lodash method

* Update styles to better match designs

* Revert "Open links to products from Cart and Checkut blocks in new tabs"

This reverts commit 9b64aa5f2e81bf0cf09d5640a3cfe1cc1085c046.

* Fix product name overflowing remove menu on mobile

* Remove @todo comments from form step CSS

* Make letter-spacinguse em instead of px

* IE11: Correctly align text in quantity selector

* Fix long product names overflowing in Checkout block on IE11
2020-04-24 13:23:25 +01:00
Seghir Nadir 7863a99de7 Abstract Page selector and fix some issues in sidebar. (https://github.com/woocommerce/woocommerce-blocks/pull/2270)
* abstract pageSelector to its own component and fix titles

* fix unwrapped context

* move control styles outside editor-wrapper

* restore condition to previous state

* move condition outisde

* rename condition

* keep pageSelect visible till next refresh

* remove comment
2020-04-22 17:44:12 +01:00
Mike Jolley d0d0cfc565 Checkout: Rename address2 attribute (https://github.com/woocommerce/woocommerce-blocks/pull/2264)
* Rename address2 attribute

* Update snap
2020-04-21 11:51:11 +01:00
Seghir Nadir a005649ab8 Move blocks to stable flag (https://github.com/woocommerce/woocommerce-blocks/pull/2261)
* remove feature flag

* catch blocks.ini error
2020-04-20 15:55:59 +01:00
Mike Jolley 248c552baf Add quantity limit at product level (https://github.com/woocommerce/woocommerce-blocks/pull/2256)
* Add quantity limit at product level

* Stock checks only needed when backorders are disabled

* Use remaining stock, not stock qty in messages etc

* Prevent duplicate validation from core
2020-04-20 14:10:39 +01:00
Albert Juhé Lluveras 1b2e8dd435 Do not scroll to top when payment methods have an error (https://github.com/woocommerce/woocommerce-blocks/pull/2247)
* Do not scroll to top when payment methods emit an error

* Simplify code and add check for hasValidationErrors
2020-04-20 11:11:32 +01:00
Mike Jolley 5b142b58ed Coupon and Cart Item Validation Fixes (https://github.com/woocommerce/woocommerce-blocks/pull/2245)
* Move validation calls to checkout API class

* Validate before payment

* Support additional error data

* Add coupon validation before payment, and hide hashes from user

* Implement validation and recalculation

* Abstract notice handler and implement legacy filters

* Handle generic cart item errors

* strip tags from coupon error messages woocommerce/woocommerce-blocks#2212

* Ensure item errors are surfaced when coupons are removed

* Fix wrong value passed to hook

* fix broken checkout when no payment method is there

* try fixing unit test errors

* if preview data has a receiveCart function use it, otherwise default to an anononymous function

* fix tests

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-04-17 21:18:54 +01:00
Mike Jolley 990949b302 Improve "sold individually" validation (https://github.com/woocommerce/woocommerce-blocks/pull/2234)
* API - Block qty > 1 for sold individually products

* Add item validation for sold individually to block checkout

* Fix validation check

* Add client side limit if sold individually

* Prevent never ending loading on failed add to cart

* Change cart button for sold individually errors
2020-04-17 10:24:44 +01:00
Mike Jolley 21f75b61b0 Show feedback on buttons/checkout when processing (https://github.com/woocommerce/woocommerce-blocks/pull/2186)
* Allow buttons to show loading spinners

* Show spinner on cart checkout button press

* Disable fieldsets when processing

* Check icon when finished

* Style tweak to fix height

* Update events

* feedback

* Move button back
2020-04-15 17:09:15 +01:00
Darren Ethier 0501328902 Fix global validation error reporting and cheque payment method regressions (https://github.com/woocommerce/woocommerce-blocks/pull/2232)
* fix broken validation error handling after submit

* Add handling for when there are no observers for payment processing or all observers just return true.

* cheque no longer needs to hook into event emitter

* account for no data on complete status handling in reducer

* add handling for either no observers or all observers returning true for onAfterProcessingWithSuccess emitter
2020-04-15 11:43:03 -04:00
Rua Haszard ace2d2bd81 show preview "saved payment methods" in editor (https://github.com/woocommerce/woocommerce-blocks/pull/2151)
* factor out editor preview data for saved payment methods to previews

* add missing imports lost in rebase

* use editorcontext to provide preview data to payment method context

* remove unused `activePaymentMethod` prop in CheckoutProvider and PaymentMethodDataProvider

* don't set the preview saved card as the default

* fix js error with cart in editor - fix EditorContext, pass previewData:
- editor context preview prop has changed;
  - update cart to pass { previewCart } in previewData prop
- correctly destructure cart from previewData in useStoreCart hook
- correct typedefs
  - EditorProvider props.previewData - now just Object
  - similar for EditorDataContext
- correct default for activePaymentMethod state - empty string as before

* preselect 'use a new payment method' in checkout block editor preview

* update unit tests for changes to editor context
2020-04-15 12:05:01 +12:00
Darren Ethier 5850966894 Refactor checkout status and event emitters to support stripe intents and more complex payment methods. (https://github.com/woocommerce/woocommerce-blocks/pull/2189)
* initial mapping out of stripe payment intents

* rename checkout processing statuses to be clearer

* Add new status and refactor checkout complete behaviour.

* Make sure payment result data is included in checkout processing response

* add payment intent handling

Still testing

* make sure promise is returned

* include site url with endpoint

* modify setComplete status to optionally receive redirectUrl for changing in state at the same time as setting status

* fix typo in property retrieval

* add error handling for after checkout processing event

* add notices area for payment methods

* implement error handling for stripe intents

* hook into stripe error processing and include error in payment response

* clear notices so they don’t show in block and merge payment details

* add notice handling to payment context

* modify error processing in checkout processor

* handle errors with fallback in checkout state context

* hook into after processing for stripe cc error handling

* set checkout to idle status if before processing emitters result in error

* Add emit response type-defs and normalize expectations for observer responses

* improve doc block

* switch checkoutIsComplete check to checkoutAfterProcessing for payment complete status change

* remove unneeded event emitters and consolidate some logic

* fix idle status set logic
2020-04-14 12:52:23 -04:00
Albert Juhé Lluveras 923eef90ee Fix build styles incosistencies (https://github.com/woocommerce/woocommerce-blocks/pull/2208)
* Prevent select label/value breaking in two lines

* Make sure frontend and base styles are loaded in the same order

* Use link-button mixin for address button

* Refactor shipping rates control CSS to decrease specificity and overwrites

* Refactor sidebar panel CSS to decrease specificity and overwrites

* Fix link-button vertical-align
2020-04-14 13:43:10 +02:00
Albert Juhé Lluveras c035a578a8 Fix currency format in On Sale badge (https://github.com/woocommerce/woocommerce-blocks/pull/2185)
* Fix currency format in On Sale badge

* Add back translators comment

* Use self-closing tag
2020-04-09 18:53:22 +02:00
Albert Juhé Lluveras 0663ac7f6f Prevent auto-scroll to invalid fields (https://github.com/woocommerce/woocommerce-blocks/pull/2184) 2020-04-09 18:42:53 +02:00
Albert Juhé Lluveras 93764f9f89 Check if cart needs payment before showing payment methods (https://github.com/woocommerce/woocommerce-blocks/pull/2177)
* Check if cart needs payment before showing payment methods

* Fix tests
2020-04-09 16:01:11 +02:00
Albert Juhé Lluveras fed597e5c8 Fix prices overflowing in some widths in the Order summary panel (https://github.com/woocommerce/woocommerce-blocks/pull/2178) 2020-04-09 13:50:00 +01:00
Darren Ethier bfdfa2f603 Move calculating state outside of checkout state (https://github.com/woocommerce/woocommerce-blocks/pull/2163)
* remove calculating as a checkout status (making it separate)

* include checkout is calculating for determining whether to flip payment status to process

* only change payment method state for status changes if needed

* fix reducer for shipping state

* include checkoutIsCalculating for determining whether to show validation errors in checkout block

* change where currentStatus is defined

* fix bug with saved payment method option
2020-04-08 11:46:34 -04:00
Albert Juhé Lluveras 10851a4e00 Handle errors in processOrder (https://github.com/woocommerce/woocommerce-blocks/pull/2156)
* Handle errors in processOrder

* Move scroll to top handler higher so error notices are visible

* Improve error messaging
2020-04-08 17:29:48 +02:00
Mike Jolley 55d0067426 Update previews and editor styles for cart and checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/2160)
* Update cart block editor styles to more closely match frontend

* Checkout editor styles

* Add image assets for previews and correct totals

* Add new previews

* Cart Preview

* Checkout preview

* Remove optional chaining
2020-04-08 16:03:39 +01:00
Albert Juhé Lluveras db4f7820c6 Use new util functions in ShippingRatesControl (https://github.com/woocommerce/woocommerce-blocks/pull/2153)
* Use new util functions in ShippingRatesControl

* Import from base-utils
2020-04-08 11:19:05 +01:00
Mike Jolley 0000cac384 Don't show "select" labels for shipping or payment method steps if there is only one option (https://github.com/woocommerce/woocommerce-blocks/pull/2133)
* Only show descriptions if shipping/payment methods > 1

* Hide descriptions if no description text is set

* Fix object length

* methods->options

* Counting helpers for shipping rates and packages

* Use new helpers
2020-04-08 10:00:31 +02:00
Seghir Nadir 736d437316 Get preview data from Editor Context / (https://github.com/woocommerce/woocommerce-blocks/pull/2134)
* move preview to editor data and alias it no nothing in frontend builds

* seperate context and provider

* pass previewData as a prop to provider

* address comments
2020-04-07 16:41:22 +01:00
Albert Juhé Lluveras 5bcdc8f84a CheckboxControl: stop using Gutenberg's CheckboxControl (https://github.com/woocommerce/woocommerce-blocks/pull/2137)
* CheckboxControl: stop using Gutenberg's CheckboxControl

* Simplify styles and make them work fine in the editor
2020-04-07 16:37:03 +01:00
Seghir Nadir 5160d9d794 Disable continue to checkout if Item quantity is being updated and immediately remove items. (https://github.com/woocommerce/woocommerce-blocks/pull/2106)
* disable continue to checkout if item is being removed

* rename isPending and selectors/actions to isPendingDelete

* switch itemPendingDelete params order

* change to watching quantity changes not removal

* yield RECEIVE_REMOVED_ITEM

* update types and add return to select

* update tests

* switch params back

* only delete item after response from server

* update tests

* handle errors and unrelated unmounts

* disable row if is loading
2020-04-07 12:03:22 +01:00
Rua Haszard 3f0dcf00bc Revert "Record a tracks event when merchant toggles cart shipping calculator: (https://github.com/woocommerce/woocommerce-blocks/pull/1975)" (https://github.com/woocommerce/woocommerce-blocks/pull/2136)
This reverts commit 7921c3e5ba.
2020-04-07 12:11:14 +02:00
Albert Juhé Lluveras 8c7d4805a4 Show validation errors again (https://github.com/woocommerce/woocommerce-blocks/pull/2124)
* Make validation errors appear

* Make validation errors appear all at once

* Simplify diff

* Expose shippingErrorStatus from shipping context

* Memoize currentErrorStatus

* Pass currentErrorStatus to observers

* Add missing type-def property

* Fix typo in constant name

* Refactor emitEvent so false responses don't return true

* Make onCheckoutProcessing observers return errorMessage and validationErrors properties
2020-04-06 16:36:19 -04:00
Seghir Nadir 0ca78dd654 Remove Keep me updated (https://github.com/woocommerce/woocommerce-blocks/pull/2057)
* remove checkbox of keep me updated

* remove double margin on useSameForBilling
2020-04-06 16:57:38 +01:00
Mike Jolley cc3ed31feb Disable checkout form in the editor (https://github.com/woocommerce/woocommerce-blocks/pull/2128)
* Move no-shipping-placeholder to block - allow pointer events

* Allow payments placeholder to have pointer events

* Enable pointer events for children

* Wrap checkout with disabled
2020-04-06 16:35:09 +01:00
Mike Jolley 3ac335e1f9 Storefront compatibility for sticky proceed to checkout button on mobile (https://github.com/woocommerce/woocommerce-blocks/pull/1999)
* Storefront compatibility

* Remove storefront actions
2020-04-06 07:50:33 -04:00
Darren Ethier 4f990fd475 switch from event subscription to status watch (https://github.com/woocommerce/woocommerce-blocks/pull/2119) 2020-04-04 13:36:46 -04:00
Albert Juhé Lluveras 72801baf97 Switch 'Try reloading the page' from links to buttons (https://github.com/woocommerce/woocommerce-blocks/pull/2105)
* Switch 'Reload page' from links to buttons

* Rename class to wp-block-link-button

* Remove no longer needed CSS property
2020-04-03 15:22:56 +02:00
Albert Juhé Lluveras 8a78371703 Checkout: fix skeleton and responsive styles (https://github.com/woocommerce/woocommerce-blocks/pull/2109) 2020-04-03 14:17:09 +01:00
Seghir Nadir c361a158c4 Respect needs_shipping in Cart and Checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2101)
* replace SHIPPING_ENABLED with needsShipping

* rename needsShipping variable

* only show shipping in checkout sidebar if we need shipping
2020-04-02 18:10:36 +01:00
Seghir Nadir cede3a0acf disable proceed to checkout if rates are loading or being selected (https://github.com/woocommerce/woocommerce-blocks/pull/1978)
* disable proceed to checkout if isCalculating is true

* add checkout provider

* remove unnecessary duplicate checkout count increment/decrement.

* remove redudant checkoutProvider

* remove already handled todo

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-04-02 18:05:08 +01:00
Mike Jolley 8468869319 Cart item validation and notices in cart/checkout (https://github.com/woocommerce/woocommerce-blocks/pull/2079)
* Add error handling to cart API

* Handle new error codes in checkout

* Display errors in cart

* Fix failing test

* Move error codes to constants
2020-04-02 15:04:43 +01:00
Albert Juhé Lluveras 73d1432b02 Hook up checkout validation with context (https://github.com/woocommerce/woocommerce-blocks/pull/2033)
* Hook up checkout validation with context

* Make sure hasValidationErrors is up to date in onCheckoutProcessing

* Move validation check inside CheckoutProcessor's processCheckout

* Make sure all checkout form fields have a unique ID

* Don't clear checkout context errors in shipping context

* Move CheckoutProcessor to the top so scrollToTop works

* Do not disable Place Order Button if there are errors

* Split checkValidation and processCheckout in Checkout Provider

* Refactor event emitter to use Maps

* Save payment method errors to validation context

* Show an notice when a payment method has an error

* Make sure JS errors during payment are displayed

* Remove error notice when payment method doesn't return an error anymore

* Make sure payment methods know if shipping and billing addresses are the same

* Make sure checkout is only processed if payment methods didn't fail

* Make sure state input also has an id

* Clear input and select errors on unmount

* Pass id to CountryInput and StateInput

* Fix function name

* Add missing default context values

* Move onCheckoutCompleteError effect to CheckoutBlock

* Remove conditional from shipping setHasError
2020-04-02 11:27:54 +02:00
Darren Ethier 2d53b2ace1 Refactor checkout context provider to be more flexible and implement CartProvider (https://github.com/woocommerce/woocommerce-blocks/pull/2083)
* Rename and move existing checkout provider to checkout-state provider.

This allows us to re-use the interface exposed on this provider for cart and checkout blocks.

* refactor checkout provider to implement the new checkout state provider.

* Add Cart provider and export

* fix type-defs

* fix editor context provider and ensure all `isEditor` checks come from this provider

* fix type definition

* implement cart provider
2020-04-01 05:27:53 -04:00
Mike Jolley 61a5b7b132 Add checkout error state (https://github.com/woocommerce/woocommerce-blocks/pull/2069)
* Add checkout error state

* Update message wording and icon
2020-03-31 11:47:48 +01:00
Mike Jolley 2bca9840c6 Checkout processing and order creation APIs (https://github.com/woocommerce/woocommerce-blocks/pull/2044)
* CheckoutProcessing work

add missing memoization and implement useRef strategically

This prevents effects from firing unnecessarily.

Tweak assets registration

Order hydration and checkout/ endpoint updates

Fix error handling

Error handling

* Missing isset in stripe

* Fedeback

* rename draft order ID action

* Todos
2020-03-30 15:32:23 +01:00
Albert Juhé Lluveras 5e78c47e4d Move some base components to subfolders (https://github.com/woocommerce/woocommerce-blocks/pull/2034) 2020-03-30 15:04:27 +02:00
Albert Juhé Lluveras e6f6dc9915 Cart and Checkout accessibility fixes (https://github.com/woocommerce/woocommerce-blocks/pull/2041)
* Make Product Price component accessible

* Render checkout form step number before the content instead of after

* Announce changes in the Shipping Rates Control results

* Render product name before product price in the Checkout sidebar

* Verify error element id exists before using it in describedBy

* Avoid reading 'Choose a shipping method' if no shipping methods are available

* Hide product image from screen readers if there is no alt text and make link not focusable

* Move Checkout block buttons below the sidebar

* Simplify selector

* Remove ternary to make code easier to understand

* Fix rebase issue

* Fix step number not visible for payment methods
2020-03-30 14:43:42 +02:00
Darren Ethier fb3cae67e6 Implement Stripe CC and Stripe ApplePay payment methods (https://github.com/woocommerce/woocommerce-blocks/pull/1983)
* Server side changes for payment method integrations

Including adding a stripe class temporarily

* update needed npm packages (and add some types)

* updates to contexts

* remove stepContent from payment config for payment methods

* update payment method interface and typedefs

Exposing a components property to pass along components that payment methods can use (so we keep styles consistent for them)

* add apple pay and stripe cc integration and remove paypal

* remove save payment checkbox from checkout block

It is handled by payment methods.

* Include an id prop for tabs

* fix activePaymentMethod pass through on rendered payment method element

also adds an id for the rendered tab

* add styles for payment method fields

If payment methods use these classes for their fields then the styles will get applied. It _could_ allow for consistent styling, we may have to provide design documentation for this?

These are styles in cases where payment methods have to use elements provided by the gateway (eg. Stripe elements). In future iterations we could look at providing components to payment methods to use (if they aren’t restricted by the gateway).

* fix rebase conflict

* do a test payment request for applePay to determine if the current browser supports it

* don’t console.error for stripe loading.

* Fix placeholder errors in the editor

* improve styling and add missing validation for inline card element

* update pacakge-lock

* rename payment-methods-demo folder to payment-methods-extension

* expose checkbox control on payment method interface

* export payment-methods-extension to it’s own asset build

This allows us to more accurately demonstrate how payment extensions would hook in to the blocks.

* don’t enqueue a style that doesn’t exist

* add full stop to comments and remove obsolete comment blcok

* fix spacing

* switch `activeContent` to `content` for payment method registration config
2020-03-30 08:07:49 -04:00
Darren Ethier 1648e651b4 Fix build issues for production builds (https://github.com/woocommerce/woocommerce-blocks/pull/2042)
* add payment-methods-demo config to sideEffects and install @wordpress/icons and @wordpress/primitives to be used directly.

* configure dependency extraction to ignore imports we want to use directly

* fix style issues for production builds

It looks like when a style is imported on the entrypoint of a component (or in a file with just exports), it get’s treeshaken from the final build _regardless of exception rules_.

* fix style imports from wordpress components

* fix loading skeleton showing on production builds

* fix block skeleton showing on production builds for cart

* import side effectful code

* add treatment for `@wordpress/warning` too

* fix typo

* exclude `settings/block` from sideEffects

* rollback `wordpress-components` update and keep sideEffects fixes

* remove unnecessary handle handling

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2020-03-27 16:56:48 -04:00
Mike Jolley 6d0ee74157 Add billing data context (https://github.com/woocommerce/woocommerce-blocks/pull/2027)
* Checkout class tidyup

* CheckoutProcessor placeholder

* ShippingMethodDataX to ShippingDataX

* Remove billing from checkout provider

* Remove billing data hook

* Remove billing from payment methods state

* Update typedefs

* Billing context

* Fix billing and shipping context persistence bugs

* Remove address form change

* Move phone back; another PR can deal with this

* Remove unused state
2020-03-26 13:31:09 +00:00
Rua Haszard 7921c3e5ba Record a tracks event when merchant toggles cart shipping calculator: (https://github.com/woocommerce/woocommerce-blocks/pull/1975)
* record a tracks event when merchant toggles cart shipping calculator:
- add tracks utility func for blocks
  - adds standard event name prefix
  - supplies post id & type params (an example)
- hook this up to UI when user toggles shipping calc
- pass enabled as boolean prop

* fix typo - call isTracksAvailable() !

* remove unnecessary temporary boolean

* update event name based on best practice guidelines

* remove isTracksAvailable preflight check:
- if site opts out, recordEvent is an empty function
- add in standard fallback boilerplate to ensure function exists
Note: currently no mechanism to detect if tracks is available on front end.
2020-03-26 10:12:34 +13:00
Seghir Nadir 4d1b99491d fix weird print in editor (https://github.com/woocommerce/woocommerce-blocks/pull/2024) 2020-03-25 16:39:39 +00:00
Seghir Nadir 2ba75fdc25 Refactor useBillingData to useCheckoutContext and hooking it up to form (https://github.com/woocommerce/woocommerce-blocks/pull/2002)
* Add line pricing for cart items in the API (https://github.com/woocommerce/woocommerce-blocks/pull/1979)

* Add line pricing for cart items

* Update checkout linePrice

* Fix tests

* Update schema - add dinero

* Implement dinero in cart totals

* Update preview and remove line totals

* Update package lock

* Update checkout review

* Fix preview and default data shapes

* return first and last name in shipping address

* remove shippingAsBilling option from editor settings

* remove billing data from store

* move to context

* hook billing to hook and sync with shipping

* add email to billingData

* hydrate billing data

* some refactors

* move hydrated billing data to reducer initial state and fix stale dependencies

* fix stale useCallback

* better checks in php types

* get isEditor from context

* update typedefs

* skip state update if nothing changed

* fix rebase

* update snapshots

* rebase package

* wrap setEmail in useCallback

* remove ValidationContextProvider

* fix docs

Co-authored-by: Mike Jolley <mike.jolley@me.com>
2020-03-23 21:13:41 +01:00
Albert Juhé Lluveras 2593fcf7da Add Checkout form validation (https://github.com/woocommerce/woocommerce-blocks/pull/1993)
* Add Checkout form validation

* Add back validation when filling the address without having set a country

* Split TextInput and Select so they can be used with or without validation

* Cleanup

* Only display the missing country error if city, state or postcode are entered

* Fix CSS specificity conflict

* Remove unnecessary semicolon

* Rename areThereValidationErrors to hasValidationErrors
2020-03-23 12:22:00 +01:00
Mike Jolley 8abad3ad04 Add no payment methods placeholder (https://github.com/woocommerce/woocommerce-blocks/pull/1998)
* Update tabs and payment methods component classnames to meet standards

* Tidied up logic and added NoPaymentMethods placeholder

* Consistent "NO" placeholders

* frontend notices

* comments

* Update assets/js/base/components/payment-methods/no-payment-methods/style.scss

Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>

* Address feedback

* Moar bundle size

* Another notice

* Tweak text

Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
2020-03-20 12:48:11 -04:00
Mike Jolley 8ca9fc9b6f Update empty states (https://github.com/woocommerce/woocommerce-blocks/pull/1996)
* Add empty state template

* Checkout empty state

* Update other icons

* Blank alt
2020-03-19 15:50:36 +00:00
Mike Jolley cba3b9712f Add checkout skeleton whilst loading (https://github.com/woocommerce/woocommerce-blocks/pull/1995)
* Add checkout skeleton as loading state and remove placeholder text from save method

* Hide skeleton when not loading

* add loading class

* Update snap
2020-03-19 10:39:04 +00:00
Mike Jolley dadebfebbc Add line pricing for cart items in the API (https://github.com/woocommerce/woocommerce-blocks/pull/1979)
* Add line pricing for cart items

* Update checkout linePrice

* Fix tests

* Update schema - add dinero

* Implement dinero in cart totals

* Update preview and remove line totals

* Update package lock

* Update checkout review

* Fix preview and default data shapes
2020-03-17 15:34:33 +00:00
Mike Jolley 84b4a24bfa Use correct count from useStoreCart/API (https://github.com/woocommerce/woocommerce-blocks/pull/1980)
* Use correct count from useStoreCart/API

* Correct preview data counts

* Missing var from rebase
2020-03-17 12:11:30 +00:00
Darren Ethier ad4c981793 Add validation context provider and implement validation for shipping country and coupons. (https://github.com/woocommerce/woocommerce-blocks/pull/1972)
* add errormessage handling to countryinput (along with storybook)

* add types for react

* Add validation context and implement

* implement validation context for country field validation

* tweak ValidationInputError so that it can receive property name for getting error from

* improve storybook webpack config to pull from tsconfig.json

* update storybook story to cover changes with context

* Wrap Checkout Provider with Validation Context Provider

* add screen-reader-text style to storybook

* add styles for input error validation to text input

* improve styling for ValidationInputError component

* add validation error handling to TotalsCouponCode component

And story

* make sure errors are cleared on successful receive/remove item

* dispatch loading cancellation on catching errors

This is needed because loading would be cancelled before the error is thrown so any error handling after the thrown error will not be able to rely on loading.

* implement validation setting for coupon errors

* add error color to labels on inputs too

* fix borders back and force border color

* remove extra structure and improve validation error with alignment for coupon code

* add aria-describedby for text inputs

* add back in validation context provider to fix rebase issue

* rework validation so it works for both checkout and cart

* Some styling tweaks

* more style fixes

* remove unnecessary method

* make sure new function is included in context defaults

* package.lock update? seems harmless so rolling with it.
2020-03-17 12:45:33 +01:00
Mike Jolley bd6c7f657c Configure link for the proceed to checkout button (https://github.com/woocommerce/woocommerce-blocks/pull/1981)
* Add link for proceed to checkout button

* Fixes to indenting/types

* Update snaps

* Update notice
2020-03-17 10:30:52 +00:00
Mike Jolley 01602f90bf Implement "return to cart" and "place order" buttons on checkout (https://github.com/woocommerce/woocommerce-blocks/pull/1926)
* Add back icon

* Add cart URL constant

* Add button components

* Implement button components into checkout

* Update checkout styles to match mockup incl updates to margins and padding

* Add options to control return to cart link

* Use checkout context

* Update snapshot

* Update context

* href

* Color/arrow styling

* Implement select instead of open URL field

* Add notice and updated settings control

* Show notice conditonally

* Store permalinks to avoid extra API requests, and get pages via API

* Update snapshots

* Fix double layout conflict

* Switch back to ID and add permalink via block setting

* snaps

* Fix snapshot; add default shape for pages

* Feedback

* Better undefined handling

* Update assets/js/blocks/cart-checkout/checkout/block.js

Co-Authored-By: Darren Ethier <darren@roughsmootheng.in>

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-03-16 16:38:24 +00:00
Albert Juhé Lluveras 361d924c11 Fix layout issues after merges (https://github.com/woocommerce/woocommerce-blocks/pull/1968)
* Fix address form layout broken because select was occupying too much space

* Fix shipping rates appearing in the Checkout sidebar

* Center button text
2020-03-16 14:13:04 +01:00
Darren Ethier 437f80d38b Implement error handling for shipping rates and selected shipping rates. (https://github.com/woocommerce/woocommerce-blocks/pull/1956)
* add a hook for throwing errors in a hook callback.

* implement new useThrowError hook

* throw errors when selected shipping rate results in a rest error

* add error handling for various shipping rate error response types

* fix borked merge conflict resolution

* remove throwing error and use correct property for coupons

* add missing default address in use-store-cart

* add missing notices provider
2020-03-13 16:05:45 -04:00
Darren Ethier 80f692404f Refactor Cart to include shippingAddress (https://github.com/woocommerce/woocommerce-blocks/pull/1960)
* Include shipping and billing address data in cart schema

* update cart hook (and data api) with new properties from endpoint

* add use-shipping-address hook and implement in use-shipping-rates

* update usages of useShippingRates through code

* update tests for use-shipping-rates

* update use-payment-method-interface and typedef to remove country field

This is provided reliably via the shippingAddress now.

* restore pluck comparison to effect.

Also added some clarification docs for why `iniitalAddress` is not included in the effect dependencies.

* remove billingAddress from cart schema

* clear city and postcode when changing country

* Update REST Api schemas aftere rebase

- CustomerSchema no longer exists
- Added ShippingAddressSchema implemented by Cart and Order schemas
- fix broken js because of bad merge conflict resolution.

* remove duplicate keys
2020-03-13 15:04:03 -04:00
Albert Juhé Lluveras 5d1d8f0394 Add Order Summary card to Checkout sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1959)
* Add missing props to sidebar-layout components

* Move specific CSS class to checkout block

* Add comment on top of @wordpress/components styles in webpack entry

* Make it so our styles load after vendor styles

* Remove unnecessary @todo comment

* Add Order Summary card to Checkout sidebar

* Improve responsive layout

* Increase cart.js bundlewatch size

* Remove wrong comment

* Remove unnecessary usage of useStoreCartItemQuantity

* Refactor layout so the product description can occupy more width

* Move paddings to the button so focus styles look better
2020-03-13 16:49:33 +01:00
Albert Juhé Lluveras bef5514044 Fix IE11 issues with the Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/1941)
* Refactor useShippingRates so it doesn't use Object.fromEntries

* Refactor Checkout form CSS so it doesn't use grid autopositioning

* Fix Payment Methods title occupying too much space in IE11

* Fix payment methods tab icons not centered in IE11
2020-03-13 15:41:04 +01:00
Mike Jolley 128ac6d63d Refactor cart shipping settings and shipping calculator (https://github.com/woocommerce/woocommerce-blocks/pull/1943)
* Move cart attributes to attributes file

* Stop feedback prompt jumping around; consolodate strings

* Update option labels and descriptions

* Match checkout save function

* hasShippingRate helper

* Refactor full cart/frontend views for shipping calc

* Add hasShippingAddress to useShippingRates hook

* Initial shipping calculator in totals row implementation

* Create cart context

* Update preview data to match API response

* Use context provider for cart

* Provide default cart item for placeholder with correct shape

* Remove outdated shape validation from cartlineitemrow

* Use preview data in editor context

* Tidy up components

* Tests/lint

* Update assets/js/base/components/totals/totals-shipping-item/has-shipping-rate.js

Co-Authored-By: Seghir Nadir <nadir.seghir@gmail.com>

* No need to camel case previewdata

* Use isValidElement

* Implement EditorContext

* Use select if no post is given

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2020-03-13 13:41:59 +00:00
Albert Juhé Lluveras 1c81066bc4 CSS editor fixes for Cart and Checkout blocks (https://github.com/woocommerce/woocommerce-blocks/pull/1949)
* Set min-height to 0 for Country & State hidden inputs

* Fix button styles broken in the Cart block in editor

* Avoid having editor.scss specific stylesheets for button and totals

* Move Button inside cart-checkout subfolder
2020-03-13 12:02:08 +00:00
Albert Juhé Lluveras 2147e8a22a Add checkout sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1921) 2020-03-12 10:41:35 +01:00
Albert Juhé Lluveras 87b87cee8a Hydrate Checkout block with API data (https://github.com/woocommerce/woocommerce-blocks/pull/1937) 2020-03-12 10:24:50 +01:00
Darren Ethier 09248192c2 Fix invalid coupon thrown error and form not connected console warning. (https://github.com/woocommerce/woocommerce-blocks/pull/1952)
* remove throwing errors if there’s an error in state.

These type of errors should be surfaced to user as needed via an error notice, not as a blocking error boundary. Error boundary should only be for non-recoverable errors.

* prevent default behaviour for applyCoupon button
2020-03-11 16:23:14 -04:00
Rua Haszard 14a593a4bb Make checkout button sticky footer on mobile (https://github.com/woocommerce/woocommerce-blocks/pull/1917)
* sticky footer checkout submit button on mobile

* fix storefront footer icons overlaying sticky checkout CTA footer:
- bump z-index of sticky CTA container
- storefront icons have weird z-index due to css opacity

* hide storefront footer on woo cart page only

* remove storefront specific bug fix for sticky cart footer:
- will log this issue separately
2020-03-11 11:27:52 +13:00
Darren Ethier 3e355f8ac2 Update payment registration config to include `edit` components (https://github.com/woocommerce/woocommerce-blocks/pull/1928)
* add isEditor to checkotu context and implement in provider usage

* modify configuration expectations for payment method registration api

* update registration of payment methods in demo

* implement new configuration in payment method components

* fix argument order and update jsdocs
2020-03-10 12:35:30 -04:00
Albert Juhé Lluveras d0cb38d37d Handle cart api errors (https://github.com/woocommerce/woocommerce-blocks/pull/1907) 2020-03-10 16:49:26 +01:00
Darren Ethier 4b4dff1297 Fix PropTypes warning for CartLineItem component (https://github.com/woocommerce/woocommerce-blocks/pull/1927)
* fix proptypes declaration.

This ensures that when `lowStockRemaining` is included it’s either null or a number.

* Ensure backorders_allowed value is boolean.

* add missing properties to cart preview
2020-03-10 11:14:05 -04:00
Darren Ethier 2aa2093dfb Add contexts for checkout (https://github.com/woocommerce/woocommerce-blocks/pull/1915)
- restructures `@woocommerce/base-context` imports so it pulls from `index.js` in the `base/context` folder. That way tree-shaking will be used if possible. This also helps with organizing the folder structure a bit better for the new contexts.
- Fixes all the various imports through the code due to the above change.
- Adds `CheckoutContextProvider`, `useCheckoutContext` and related files.
- Adds `PaymentMethodDataProvider`, `usePaymentMethodDataContext` and related files.
- Adds `ShippingMethodDataProvider`, `useShippingMethodDataContext` and related files.
- Adds typedefs used for the various context interfaces.
2020-03-10 09:39:21 -04:00
Darren Ethier 0cacf5e0da Disallow selecting quantity of stock past what's available. (https://github.com/woocommerce/woocommerce-blocks/pull/1905)
- `useStoreCartItemQuantity` now receives the cartItem instead of the `cartItemKey` as an argument. I didn't notice in previous reviews how it's used in the context where we already have a cartItem so implementing this reduces complexity and makes the hook more precise for it's purpose.
- Add `backorders_allowed` to the CartItem schema for the API. This allows for client to have correct logic for maximum quantity when this value is true.
- Implement the above in the `CartLineItemRow` so that quantity picker is limited by the amount of stock remaining if that is available (`lowStockRemaining`) and the `backorders_allowed` is false.
- maximum quantity is currently hardcoded to a (filtered) value of `99` when other conditions don't apply (see related issue in woocommerce/woocommerce-blocks#1913)
2020-03-10 07:43:57 -04:00
Seghir Nadir 952638a3ed Link shipping form fields to shipping rates to load them. (https://github.com/woocommerce/woocommerce-blocks/pull/1890)
* add plukedAddress util function in order to use it for shallowEqual

* refactor useShipping so it accepts and returns the address

* refactor fields

* fix test and return shippingRates to hook

* remove unneeded shippingAddress from ShippingRatesControl

* move keys logic to hook

* refactor tests again

* increase cart size
2020-03-10 11:55:19 +01:00
Albert Juhé Lluveras f14fc54faf Refactor 'Hide shipping costs' Cart attribute logic (https://github.com/woocommerce/woocommerce-blocks/pull/1909)
* Use kebab-case for Cart block attributes

* Simplify Cart edit function

* Refactor showShippingCosts logic

* Update snapshots
2020-03-10 10:09:34 +01:00
Rua Haszard 12f942948e mobile layout fixes for cart totals (https://github.com/woocommerce/woocommerce-blocks/pull/1898)
* tidy cart totals layout on mobile:
- totals column is full width
- reset container (card) borders and padding

* increase specificity of mobile cart styles to ensure skeleton hides after load

* use "not loading" && "not skeleton" approach for more readable mobile style selector
2020-03-10 10:16:03 +13:00
Mike Jolley 168ce52935 Include address fields in the AddressForm component (https://github.com/woocommerce/woocommerce-blocks/pull/1892)
* Move default address fields to blocks; normalise address i18n

* Use optionalLabel and other props from addressFields

* Fix apartment field display

* Country address fields

* Fix default field order

* Update for countries with no states

* Add type defs
2020-03-09 14:23:16 +00:00
Darren Ethier 89ab1579b0 Followup for useStoreCartItem work (change hook name and improve typedefs) (https://github.com/woocommerce/woocommerce-blocks/pull/1900)
* add typedefs for CartItem

* remove cartItem from StoreCartItem typedef

* Implement new typedef and fix defaults as well as returned object.

Now that `cartItem` is only used internally, the default set on the state only has to be the properties required internally in the hook.

* add typedefs for shared settings and implement typedef comments.

* change hook name
2020-03-09 08:24:56 -04:00
Albert Juhé Lluveras b7da7ad198 Make Shipping packages collapsible in Cart page (https://github.com/woocommerce/woocommerce-blocks/pull/1867)
* Make Shipping packages collapsible in Cart page

* Fix Cart block radio controls not looking properly in the editor

* Simplify CSS
2020-03-09 12:28:26 +01:00
Rua Haszard 76f5ed5030 improve responsiveness when setting cart item quantities (https://github.com/woocommerce/woocommerce-blocks/pull/1864)
* rework the quantity change generator action so the UI updates quick:
- work in progress - still need to figure out how to debounce API call
- add new action for updating quantity for an item
- don't set cart item as pending while quantity is updating
  - this leaves QuantitySelector enabled so user can click more/less
- use receiveCartItemQuantity to update quantity in UI before sending request

* debounce line item quantity first cut:
- use local state for quantity, so ui allows multiple clicks up/down
- debounce store updates (and server/API call)

* correct comment on cart item quantity reducer

* remove recieveCartItemQuantity - no longer needed

* remove delegation for deleted RECEIVE_CART_ITEM_QUANTITY

* only update quantity in component sideffect if it has changed:
- reduces unnecessary renders

* factor out debounced quantity update into cartItem hook (hat tip @senadir)

* use quantity from store, instead of passing in to hook +
+ fix latent bug in useStoreCartItem - the cartItem value is now object:
  - was previously single-item array
  - (note no client code is using this at present)

* tidy/refactor cart item hook - separate dispatch from select

* remove dud reset of item pending flag (came back in rebase)

* add quantity to StoreCartItem hook return value typedef

* fix js error when adding cart block in editor – cartItem not found

* fix typedef

* fix logic for debouncing

* don’t update quantity on server unnecessarily

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-03-09 15:09:47 +13:00
Albert Juhé Lluveras 427a229591 Split Full Cart sidebar totals into several components (https://github.com/woocommerce/woocommerce-blocks/pull/1885) 2020-03-06 12:27:54 +00:00
Mike Jolley 1942491822 Checkout Block: Add Legal links (https://github.com/woocommerce/woocommerce-blocks/pull/1881)
* Create policy component

* Create page constants

* Add toggle options

* Update assets/js/base/components/checkout/policies/style.scss

Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>

* Update assets/css/editor.scss

Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>

* Feedback

* update snapshot

Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
2020-03-06 12:20:17 +00:00
Mike Jolley 0a722b1708 Cart and checkout error boundaries (https://github.com/woocommerce/woocommerce-blocks/pull/1853)
* Add error boundries

Revert block error move

webpack config

fix path

* type in config

* change text allowed type

* Pass error boundary props to renderfrontend

* Editor error boundaries

* Add errorMessagePrefix

* merge rules

* Remove <disabled>

* Update reload page link
2020-03-06 11:43:40 +00:00
Albert Juhé Lluveras 20da4900c2 Add styling to checkboxes (https://github.com/woocommerce/woocommerce-blocks/pull/1880)
* Add styling to checkboxes

* Add resets for some themes

* Simplify props
2020-03-06 11:26:03 +01:00
Seghir Nadir 2c8388f0a8 Update and select shipping rates dynamically (https://github.com/woocommerce/woocommerce-blocks/pull/1794)
* add select shipping endpoint to router

* add select shipping method

* add selected rates to cart

* better select rates

* move schema function to seperate function

* move validation to Cart Controller

* fix wrong session key

* Update shipping/cart endpoints (https://github.com/woocommerce/woocommerce-blocks/pull/1833)

* Items should not have keys in API response

* Include package ID in response (this is just a basic index)

* /cart/select-shipping-rate/package_id

* Add package_id to package array

* Update responses and add shipping-rates to main cart endpoint

* update-shipping endpoint

* Add querying selected shipping rate to the store (https://github.com/woocommerce/woocommerce-blocks/pull/1829)

* add selecting shipping to store

* directly call useSelectShippingRate

* refactor cart keys transformation to reducer

* remove selecting first result and accept selecting

* move update shipping to new endpoint

* pass selected rates down

* select shipping right directly and fix editor issues

* fix some broken prop types

* key -> package id

* Update and fix cart/shipping-rate tests

* fix case for when rates are set

* Update useShippingRates test

* add args to rest endpoint

* move selecting shipping rate logic to hook

* fix some naming issues

* update propTypes

* update action call

* fully watch cart state

* address review issues

* fix prop type issues

* fix issue with rates not loading in checkout

* remove extra package for shipping

* move ShippingCalculatorOptions to outside

Co-authored-by: Mike Jolley <mike.jolley@me.com>
Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
2020-03-05 20:54:05 +01:00
Mike Jolley 52feba4f85 Add skeleton markup to the cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1866)
* Add skeleton markup

* Add shipping title to skeleton and match styling/spacing

* Combine skeleton and loading styles
2020-03-05 14:15:28 +00:00
Mike Jolley dd54ce1136 Checkout form options to control field visibility (https://github.com/woocommerce/woocommerce-blocks/pull/1868)
* Fix background overlap of feedback box

* TS notices

* Add company name toggle

* Implement new attributes and toggles in editor

* Handle field config in address component

* Remove other hoc rule from tsconfig

* map -> forEach

* Remove return from forEach

* Export and extend field config

* Fix optional text for all field types

* unit text

* Update snapshot
2020-03-05 13:06:47 +00:00
Mike Jolley 401f50a607 Tidy cart items mobile layout (https://github.com/woocommerce/woocommerce-blocks/pull/1875)
* add a smaller min-width for cart column on smaller screens

* ensure full price is inline on mobile (when visible)

* ensure line item totals are bottom aligned even if quantity cell is huge

* revert price vertical alignment - in design they are aligned with quantity digit
2020-03-05 13:05:42 +00:00
Mike Jolley c4c31bd926 make product name display block to push stock badge on to its own line (https://github.com/woocommerce/woocommerce-blocks/pull/1874) 2020-03-05 12:56:57 +00:00
Albert Juhé Lluveras 2544ffd7d1 Option to 'use shipping address for billing': add attribute and make it work in the frontend (https://github.com/woocommerce/woocommerce-blocks/pull/1857)
* Create useShippingAsBilling attribute

* Fix missing prop

* Refactor FormStep so stepNumber is generated by CSS instead of being passed as a prop

* Add billing address form

* Add text before controls

* Remove old @todo comment
2020-03-04 15:13:38 +00:00
Mike Jolley ea19fad14e Add useStoreCartApiHydration HOC (https://github.com/woocommerce/woocommerce-blocks/pull/1845)
* Add useStoreCartApiHydration hoc

* comment

* indenting

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2020-03-04 12:40:03 +00:00
Albert Juhé Lluveras 81c09d180b Create AddressForm component and change its fields dynamically based on country (https://github.com/woocommerce/woocommerce-blocks/pull/1847) 2020-03-03 11:46:53 +01:00
Mike Jolley d3a9dc3d6b Create Context Provider for Notices w/ Notices API (https://github.com/woocommerce/woocommerce-blocks/pull/1843)
* Working on store provider

* Working on store provider

* Reducer implementation

* Implement core/notices

* Add notices to store coupon hook with context

* Improve store notice text and styling

* Improve JS side API for notices

* Wrap functions with context additon

* Update test to []

* Implement props feedback and useInstanceId

* Update assets/js/base/context/store-notices-context.js

Co-Authored-By: Darren Ethier <darren@roughsmootheng.in>

* Update assets/js/base/context/store-notices-context.js

Co-Authored-By: Darren Ethier <darren@roughsmootheng.in>

* remove instance id

Co-authored-by: Darren Ethier <darren@roughsmootheng.in>
2020-03-03 10:26:02 +00:00
Mike Jolley 5fcf9b0fca Correctly handle store tax options in cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1846)
* Correctly show prices with incl or excl taxes

* Move taxes below shipping

* TaxAmount case
2020-03-03 10:12:18 +00:00
Rua Haszard 201cb4ff50 Support updating quantity of cart items & sold_individually product option (https://github.com/woocommerce/woocommerce-blocks/pull/1824)
* first cut - removing an item from cart:
- add actions to cart store for removing an item and keeping track of
pending removal API call
- add reducer logic for storing pending state on an item, and removing
an item
- expose removeCartItem on new useStoreCartItems hook
- hook it up to remove link / trashcan icon in row item

* disable cart quantity picker/remove link while API request in progress:
- expose cart item pending status from store using selector
- use selector to disable quantity related components in line item row

* add typedef for cart items store object provided by hook

* allow user to change quantity of cart items (first cut):
- add action for replacing a cart item in the store
- add generator action for changing quantity
- expose change quantity action on useStoreCartItems hook
- hook up to quantity UI in cart block
(work in progress)

* post-rebase fixes & fix broken typedef:
- rework cart item change quantity callback - now supplies item key like
remove callback
- fix hook StoreCartItem return value typedef - single item with
specified key, was array of all items
- add quantity JSDoc for changeCartItemQuantity action
- remove changeQuantity callback from UI (currently infinite looping)

* fix bug in recieveCartItem reducer - check keys for equality:
- was key === object

* fix invalid url in POST cart/items/quantity request

* hook up cart line item quantity to API:
- remove internal state/ref for QuantitySelector, is now a controlled
component
- call changeQuantity action from QuantitySelector change callback

* QuantitySelector no longer needs a ref to wrangle number input value

* hoist quantity state out of QuantitySelector into story (fix storybook)

* add product sold_individually option to cart item API response

* limit sold_individually items to 1 per cart/order:
- support optional max value in QuantitySelector
- set maximum dependent on sold_individually API field

* prevent user from requesting zero x cart item (API 500 errors):
- add minimum limit to QuantitySelector
- default limit to 1
+ fix bug with limiting to maximum value in number input change handler

* remove useStoreCartItems, zombie hook coming back from rebase 🧟‍♂️

* address various review feedback:
- inline undefined check, don't use lodash
- quantityInputOnKeyDown callback hook depends on canIncrease/canDecrease
- also removed undefined check for minimum, as minimum has default 0

* use safer typeof check for presence of maximum prop
2020-03-03 14:08:19 +13:00
Rua Haszard 69ea94378b support removing cart items (https://github.com/woocommerce/woocommerce-blocks/pull/1813)
* first cut - removing an item from cart:
- add actions to cart store for removing an item and keeping track of
pending removal API call
- add reducer logic for storing pending state on an item, and removing
an item
- expose removeCartItem on new useStoreCartItems hook
- hook it up to remove link / trashcan icon in row item

* disable cart quantity picker/remove link while API request in progress:
- expose cart item pending status from store using selector
- use selector to disable quantity related components in line item row

* fix jsdoc - getCartItem returns undefined if not found

* add typedef for cart items store object provided by hook

* fix rebase error - key prop went awol

* orient useStoreCartItem hook to single cart item:
- simplify interface for client component
  - isPending bool (was callback)
  - removeItem callback no need to specify item key
+ reinstate disabled prop on remove link when updating (lost in rebase)

* move cart item pending state out of cartItems, preserve API state shape:
- pending is now stored as array of keys
- fix isItemQuantityPending selector (now much simpler)

* ensure react knows that our useSelect depends on cartItemKey
2020-02-28 15:05:10 +13:00
Albert Juhé Lluveras 185149f2bd Persist previous shipping rates while loading and show its package name (https://github.com/woocommerce/woocommerce-blocks/pull/1806)
* Persist previous shipping rates while loading

* Refactor ShippingRatesControl LoadingMask

* Show package name

* Simplify CSS to avoid using the adjacent selector

* Add comment to explain why 'selected' is hardcoded in the editor

* Rename package 'index' to 'key'
2020-02-27 19:28:36 +01:00
Mike Jolley 6ac5b8288f Add chip component for coupons in the cart (https://github.com/woocommerce/woocommerce-blocks/pull/1807)
* Chip componet and styling

* Tests

* Move coupon code for API requests to body - fixes issues with coupon codes containing special characters

* Implement chip component in cart page

* Revert "Move coupon code for API requests to body - fixes issues with coupon codes containing special characters"

This reverts commit ac5a72f55d51d939bb989f3936e28cf993af19a6.

* Update comment

* prevent overflow

* Add screen reader text for coupon name

* Adjust icon alignment and padding/hit box

* update string
2020-02-26 17:09:18 +00:00
Albert Juhé Lluveras 7603b1391f Checkout block: don't show message of missing shipping options if they are already set (https://github.com/woocommerce/woocommerce-blocks/pull/1804)
* Checkout block: don't show message of missing shipping options if they are already set

* Use 'wc_get_shipping_method_count' to check if shipping methods are created

* Fix frontend error

* Check  exists before calling a method on it

* Fix Configure Shipping Options button mispositioned in last Gutenberg release
2020-02-26 15:50:53 +00:00
Mike Jolley eee2d342ae Add loading placeholder for cart block (inital load) (https://github.com/woocommerce/woocommerce-blocks/pull/1819)
* Tidied up source code for line item row and fixed image placeholder support

* Return null if not rendering

* Add is loading state and className to cart block

* Hide title if there are no items

* Add placeholder rows when there are not items and cart is loading

* Pass though isLoading to cart

* Set defaults for cart item rows

* Style the placeholder elements

* Move placeholderRows

* Remove getPriceNumber

* Move decodeEntities

* Split up utils
2020-02-26 15:49:07 +00:00
Rua Haszard 0f57b6fdef show discount badge in line items in cart (https://github.com/woocommerce/woocommerce-blocks/pull/1784)
* calculate regular price for line item and return in API `line_subtotal`

* restore `line_subtotal` api field to previous behaviour

* correctly handle discounts on cart line items:
- return product `prices` in cart items endpoint
- calculate full price and discount on client using product
regular_price * quantity in cart

* add product prices to preview cart API data

* show product sale price discount in "save" badge:
- previously we were displaying any effective discount, e.g. from coupons which apply to whole cart
- now this badge will only display discount due to product on sale - much simpler

* rename sale badge class (discount => sale)

* clarify docs for line_subtotal - includes sale prices, not coupons

* clarify line_total docs

* add prices to schema (fix unit test)

* fix schema unit test - return `prices` as object, consistent with `totals`

* Further line total rewording

Co-authored-by: Mike Jolley <mike.jolley@me.com>
2020-02-25 12:17:13 +00:00
Mike Jolley 6d7fdf50e0 Allow coupons to be applied and removed from the cart (https://github.com/woocommerce/woocommerce-blocks/pull/1790)
* useStoreCartCoupons hook

* Apply coupon w/ basic error handling for the fetch

* Basic store specifically for cart data

* Working on error states

* Show error on coupon fail

* removeCoupon action

* Added extra endpoints for more efficient cart queries

* Apply/remove coupons working

* Track applying/removing state

* StoreCartCoupon typedef

* Use coupon code on index

* Remove custom controls definition

* Adjust storecartcoupons mapper and remove ref

* Move cartData defaults and remove ref

* Call API directly, avoid schema lookup

* Improved selectors

* StoreCart typedef

* Split up cart state data and add more typedefs

* Add API tests for apply/remove coupon

* Jest tests

* Move default cart data to constant

* Comment indentation
2020-02-25 11:36:53 +00:00
Albert Juhé Lluveras d803f6cc64 Add product name and quantity to cart shipping rates endpoint (https://github.com/woocommerce/woocommerce-blocks/pull/1783)
* Add product name and quantity to cart shipping rates endpoint

* Make text accessible

* Add styling

* Create Packages component

* Add preview shipping rates to editor

* Add onChange default value

* Order props

* Use CSS instead of JS to render commas between package elements

* Change quantity type to number instead of integer
2020-02-25 10:32:59 +01:00
Albert Juhé Lluveras 4a5ad79823 Add style to radio control (https://github.com/woocommerce/woocommerce-blocks/pull/1789) 2020-02-24 13:30:09 +00:00
Darren Ethier f8d6735baf Create typedefs and add basic typescript configuration (https://github.com/woocommerce/woocommerce-blocks/pull/1796)
* install typescript and add typedef support

* add typedefs for Cart things

* improve typescript config

- adds more base config
- add our aliases

* fix error caught by typescript!

* Tweak typescript configuration

* Add missing `@woocommerce/settings` alias to ts config

* Add alias for type-defs
2020-02-24 07:52:24 -05:00
Mike Jolley 454bb07eda Add permalink to line items (https://github.com/woocommerce/woocommerce-blocks/pull/1791) 2020-02-24 12:39:43 +00:00
Seghir Nadir 2058c64bac redo work after rebase (https://github.com/woocommerce/woocommerce-blocks/pull/1777) 2020-02-21 17:40:25 +01:00
Mike Jolley 806cd76987 Display selected shipping location in cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1767)
* county->state clarity

* Show formatted address
2020-02-19 17:14:41 +00:00
Seghir Nadir 90a7579461 Add Shipping settings to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1561)
* add cart settings

* address typos

* update how settings should work

* get settings from woo and pass them to frontend

* reapply condition

* fix issue with attributes not presisting

* abstract shipping control

* rename constants

* update props in frontend

* fix bug with attributes not presisting

* conditionally display prices

* use country to decide to show prices

* disable shipping if shipping is not enabled

* enable coupons by default
2020-02-19 17:33:10 +01:00
Mike Jolley 2a25cfd0ed Implement browser autocomplete for checkout address fields (https://github.com/woocommerce/woocommerce-blocks/pull/1755)
* Add autocomplete support for textinput

* Add autocomplete fields to forms

* Prefix default ids

* Hack for autocomplete on custom select components

* Restore labels and avoid reset of state

* State field autocomplete

* Fix calculator autocomplete

* Simplify existance of hidden field

* move label on autofill preview in chrome

* Put back state clearance

Co-authored-by: Seghir Nadir <nadir.seghir@gmail.com>
2020-02-19 15:10:26 +00:00
Rua Haszard c13bd7e641 hook up cart items to API data in front end (https://github.com/woocommerce/woocommerce-blocks/pull/1741)
* hook up cart items to API data in front end (first cut)

* correctly decode entities in product attributes in cart:
+ support unnamed attributes

* correctly render markup in cart line item descriptions:
- description api field is html, so use dangerouslySetInnerHTML

* fix PropTypes - cartItems, not items

* hook up cart totals area to API data +
+ move editor preview totals data to resource-previews (to match API)

* tweak/tidy todo comments for cart front end

* use shorter summary field for cart line item blurb

* render empty cart inner blocks on front end when shopper cart is empty

* ensure empty cart doesn't show while cart contents is loading

* decode entities in attribute names when rendering cart items

Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>

* factor out cart data to a custom hook + exit earlier while loading

* wrap preview/sample cart variation data for translation

* use RawHTML component for rendering cart line item summary +
+ linter whitespace tweak

Co-authored-by: Albert Juhé Lluveras <aljullu@gmail.com>
2020-02-19 12:06:37 +13:00
Albert Juhé Lluveras 29a763d7de Shipping rates: decode entities (https://github.com/woocommerce/woocommerce-blocks/pull/1762) 2020-02-18 11:50:08 +01:00
Albert Juhé Lluveras 6736a9d94a Add ShippingCalculator component (https://github.com/woocommerce/woocommerce-blocks/pull/1559)
* Create ShippingCalculatorAddress block

* Make 'change address' button to open/close the address form

* Create ShippingCalculator component

* Use CountryInput and CountyInput instead of TextInputs

* Fix city value not being set

* Fix shipping rate not appearing when there was only one option

* Unify postalCode and postCode to postcode

* Rename 'county' to 'state'

* Add reset styles for popular themes

* Increase cart-frontend.js max size
2020-02-17 12:12:15 +01:00
Albert Juhé Lluveras 69f49760a8 Create CountyInput component (https://github.com/woocommerce/woocommerce-blocks/pull/1727)
* Split CountryInput and Select

* Create County Input

* Show text input when there are no county options

* Reset county value when changing country

* Fix keyboard navigation

* Hide checkmark

* Add reset styles for several popular themes

* Add country prop to ShippingCountyInput
2020-02-14 13:30:33 +01:00
Albert Juhé Lluveras a30615e2cb Hook up shipping methods to API (https://github.com/woocommerce/woocommerce-blocks/pull/1468)
* Create ShippingMethodsControl component

* Hook up shipping methods to API

* Add support for several packages

* Add tests to useShippingRates

* Fix shipping_rates property name

* Only show the products list if there are several packages

* Use <FormattedMonetaryAmount> to display shipping rate prices

* Make 'country' optional in CartShippingRates

* Make CartShippingRate API return currency info

* Minor improvements

* Fix shipping fields hidden in editor

* Fix missing currency in Checkout shipping rates selector

* Add links to issues in @todo comments

* Improve ShippingRatesControl useEffect

* Remove unnecessary tab

* Remove unnecessary id in RadioControl

* API: Add error when country is invalid

* Debounce shipping rates API requests

* 'Country key' -> 'Country code'

* Don't display radio input when there is only one option

* Add message when there are no results

* Minor enhacements

* Remove unnecessary Fragment

* Simplify RadioControlOption export

* Refactor 'renderOptions' and split it into several components

* Prevent Card sidebar from taking too much width

* Move country request check outside of the loop

* Fix failing test
2020-02-14 04:43:13 +01:00
Albert Juhé Lluveras 722599004a Change 'country' to 'country / region' label (https://github.com/woocommerce/woocommerce-blocks/pull/1721) 2020-02-11 18:33:41 +01:00
Seghir Nadir 8e3ac17585 Introduce feature flags (https://github.com/woocommerce/woocommerce-blocks/pull/1631)
* introduce feature flags

* move config to webpack-helper

* add flag to deploy command

* remove package default

* add cross-env

* add gating to frontendConfig and coreConfig

* exclude entries from being built on stable mode

* add feature gating to PHP

* add flag to start command

* add flags to travis

* add endpoints

* add better defaults for php

* move code to Bootstrap.php

* no need to spread single object

* ignore blocks.ini

* type check feature flag

* remove blocks.ini

* sanitize flag

* remove flag from npm start

* format condition

* keep spaces for package-lock.json

* check for env before going to block ini

* add env vars to travis

* whitelist env var
2020-01-31 21:04:37 +01:00
Seghir Nadir bfb2f33bfd add new icons and remove old ones (https://github.com/woocommerce/woocommerce-blocks/pull/1644)
* add new icons and remove old ones

* add docs

* add notes and remove gridicons

* update to folderStarred

* typos

* reorder imports

* update prop name to srcElement

* validate element

* fix bad import

* lowecase folderStarred

* add propTypes
2020-01-31 19:20:33 +01:00
Albert Juhé Lluveras 069b42dc39 Make 'Add order notes?' string localizable (https://github.com/woocommerce/woocommerce-blocks/pull/1629) 2020-01-22 21:35:29 +01:00
Mike Jolley 69a509f184 Improved cart styling for desktop and mobile (https://github.com/woocommerce/woocommerce-blocks/pull/1587)
* Style mobile qty selector

* Add dedicated column for image and remove duplicate elements

* Tweak column headers

* Refactor cart styles to use CSS grid, and use nesting for organisation

* adjust column widths

* Remove unused div

* Fix wrapping and flexbox styles

* Add decodeEntities to alt attribute

* Use % basis

* Tweak min widths
2020-01-20 16:43:22 +00:00
Albert Juhé Lluveras cad3e72769 Create CountryInput component (https://github.com/woocommerce/woocommerce-blocks/pull/1585)
* Create initial CountryInput component

* Create ShippingCountryInput

* Create BillingCountryInput

* Make backgrounds white

* Correctly align options

* Add CSS resets for 20xy themes

* Fix wrong defaults in countries constants

* Make CountryInput respect 'prefers-reduced-motion'

* Reverse prefers-reduced-motion check

* Set max-width to CountryInput dropdown

* Use decodeEntities to print country names

* Avoid unnecessary JSON enconding and later parsing

* Make sure country name is also encoded when selected

* Fix countries default value
2020-01-17 17:58:08 +01:00
Rua Haszard eaa6b42d89 UI for removing cart items (not including hooking up to API) (https://github.com/woocommerce/woocommerce-blocks/pull/1579)
* correct typography styles for remove link (based on design)

* add trashcan icon from material icons, for removing cart items on mobile

* add & style trash icon for remove cart item on mobile

* a11y - use darker grey for trashcan icon button to improve contrast

* rename IconDelete -> IconTrash

* remove unnecessary div

* use <button> for remove action buttons + add link-button scss mixin

* fix editor styles for cart line items - total column should be right-aligned

* fix various visual issues with cart line items table in editor:
- rows should align hard left and right (first/last child no padding)
- totals should be align-bottom on small screen
- correct vertical padding on column headings
- re-add row border separator lines
2020-01-17 13:46:56 +00:00
Seghir Nadir 4a8c57fbe1 Focus on Full Cart mode after inserting (https://github.com/woocommerce/woocommerce-blocks/pull/1582)
* focus on the cart main block
2020-01-17 13:23:33 +01:00
Mike Jolley 0e752e9e0d Introduce view switcher component for the cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1576)
* View switcher on cart block

* Dedicated component and styling

* Views and selected should be required

* Rename to ViewSwitcher

* Implement views via render prop

* Remove defaults for required props
2020-01-16 14:50:48 +00:00
Albert Juhé Lluveras 3f0368e63b Checkout: Fix city input field showing country value (II) (https://github.com/woocommerce/woocommerce-blocks/pull/1580) 2020-01-16 12:31:00 +01:00
Mike Jolley 86b8b7779c Add Quantity selector component for cart line items (https://github.com/woocommerce/woocommerce-blocks/pull/1558)
* Implement quantity selector component

* Improve default appearance

* Remove underline

* Add aria speak

* Improved keycode handling

* Add focus styles to buttons and inputs

* Increase constrast
2020-01-15 11:32:54 +00:00
Rua Haszard 5c85ee23cf follow up fixes on cart low stock warning badge (https://github.com/woocommerce/woocommerce-blocks/pull/1564)
* rename low stock prop inside lineitem to avoid unnecessary renders

* remove unnecessary span in low stock warning badge
2020-01-15 12:54:32 +13:00
Rua Haszard 86dca691e5 show discount on cart line items & price styling (https://github.com/woocommerce/woocommerce-blocks/pull/1548)
* show discount on cart line items (no styling)

* style line item discount badge + use correct colors for prices

* show full price inline on mobile

* move all responsive tweaks for cart prices to explicit breakpoints

* add nowrap to FormattedMoneyAmount so prices don't ever wrap

* fix misaligned full price on mobile when prices are large (edge case):
- if price strings are long, the full price stacks above line total
- previous right-margin on full price showed prices misaligned

* allow client code to add class(es) to FormattedMonetaryAmount

* add nowrap so discount badge doesn't wrap

* remove unnecessary span from discount badge +
+ more explicit `display` style for different price column elements
2020-01-15 09:52:42 +13:00
Rua Haszard b9bfef0ba4 show low stock warning badge on cart line items (incl fake test data) (https://github.com/woocommerce/woocommerce-blocks/pull/1557) 2020-01-15 09:50:32 +13:00
Albert Juhé Lluveras 1dfcb18a90 Make TextInput id optional (https://github.com/woocommerce/woocommerce-blocks/pull/1560) 2020-01-14 20:10:50 +01:00
Rua Haszard f23dee503f show product details in cart line items: attributes (variations), product short description (https://github.com/woocommerce/woocommerce-blocks/pull/1549)
* show product variation attributes in cart line item + styling:
+ adjust font sizes & colors to match design

* show product description in cart line items…
- this commit also adds descriptions to test cart-items data
- note API does not currently return description/excerpt

* add a class to product attributes to allow custom styling
2020-01-14 12:07:52 +13:00
Albert Juhé Lluveras bd2b8cb279 Add Cart totals to Cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1411)
* Add Cart totals to Cart block

* Accessibility improvements

* Load vendors styles separately

* Use same shipping placeholders for cart and checkout

* Refactor how we import @wordpress/components styles so only panel styles are imported

* Remove style-loader from vendors styles build process

* Add htmlFor attribute to TotalsCouponCodeInput

* Update totalItems shape to match API

* Fix wrong total items shape using numbers instead of strings

* Rename wc-blocks classes to wc-block

* Remove unnecessary parseInt()

* Add radix to parseInt()

* Rename totalRows to totalRowsConfig

* Move placeholder content out of the component

* Use Card component for cart's sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1423)

* Use Card component for cart's sidebar

* Split RadioControl component

* No need to use Label in RadioControlOption

* Remove no longer valid @todo comment

* Use 'checked' prop instead of 'selected' in RadioControlOption

* Rename wc-blocks classes to wc-block

* Rename wc-blocks classes to wc-block (II)

* Make sure radio control ids are unique using withComponentId

* Load PanelBody and PanelRow from last version of @wordpress/components

* Create vendors-frontend.js file

* Load wordpress-component instead of @wordpress/components from <Button> component

* Only load 'withRestApiHydration' HOC

* Make vendors-frontend a dependency of cart-frontend script

* Revert "Only load 'withRestApiHydration' HOC"

This reverts commit 9f9b9759a98047b26e7d8f04189ffe78c1d5bb06.

* Fix fieldset background
2020-01-10 15:37:27 +01:00
Albert Juhé Lluveras 016b6b97ec Rename wc-blocks to wc-block classname prefix (https://github.com/woocommerce/woocommerce-blocks/pull/1541) 2020-01-10 10:42:53 +01:00
Rua Haszard 0763655d42 Cart block: line-items front end initial work (https://github.com/woocommerce/woocommerce-blocks/pull/1333)
* render block on front end, add `Shopping cart` heading (baby steps)

* fake data for editing full cart + show line count in header

* add note about core/html using `is-active` class for toggle state

* reinstate work-in-progress full cart component (lost in rebase)

* reinstate full cart from master

* component for full cart title & item count + margin tweaks:
- add margin between main cart & sidebar
- add margin after cart block

* add cart items sample data + factor sample product image to module

* use sample cart data for item count

* basic table of cart line items (no styling)

* prettification

* show images for cart line items + initial table styling

* cart quantity selector component (work in progress)

* use state for cart product quantity, allow incr/decr from UI (WIP)

* replace WIP custom quantity control with number edit (temporary)

* correctly format cart line item total price

* align cart item columns with headings + indent image on desktop

* tweak css for cart line item padding on mobile so it's more explicit

* show cart line item full price if discounted

* add placeholder for cart remove item link

* switch cart table to flex layout (was table)…
This will allow us to move things around for mobile/responsive layout.

* only show cart items table header on desktop

* more cart items styling - row borders, appropriate padding +
+ move image width to variable
+ fix class name plurality for row (item not items)

* use standard $gap instead of 1em for padding/margins

* responsive (mobile) layout for cart line items:
- shift line $ total to bottom right
- stack quantity selector in product info column

* remove extraneous cart table padding on mobile

* comment about unused styles for quantity selector component

* add follow up issue for todo

* remove inappropriate href

* render srcset & sizes for cart line item product image

* remove todo comment

* switch back to table markup for cart items (in progress):
- table is more semantic, associates headers with columns

* cart line items column widths - product column is larger (60%)

* reinstate table row borders

* bottom-align line item price on mobile

* cart contents heading should be H2 + prettify

* remove unused QuantitySelector code/styles, rename main class in line with BEM

* defaults for QuantitySelector props

* variable/property name tidies - match conventions/API

* fix bug: line total price is only bottom-align on small screen

* move QuantitySelector to root of components, intended to be generally useful

* use lineItem directly for cart, specify shape in PropTypes

* rename cart components to align with "line item" rather than "product"

* rejig class names to better align with new component names & BEM style

* show cart item image correct size:
- use single column for product image and info, with flex container
- specify image width (rem instead of px)

* fix safari issue - cart product images displaying vertically stretched

* shift product name left margin from image, to account for no-image case

* experiment: bump bundlewatch size limit for cart temporarily:
- our fake data inline image is heavy
- when we switch to real API we will no longer need it

* fix issue introduced when moving margin from image to details div:
- product details needs margin on left (not right)

* fix react props issues:
- explicitly destructure image props for srcSet (vs srcset)
- use API key field for line item key instead of id, fix duplicate test id
- CartLineItemsTable takes an array of lineItems (incorrect PropTypes)

* remove redundant divs + use conventional `null` (when no full price)

* override editor styles to ensure cart product image is correct size

* move cart items editor style override to editor.css

* add an explicit readable heading for cart heading to match visual layout
2020-01-10 11:50:14 +13:00
Darren Ethier 8627b81c16 Add payment method api and components to checkout steps (https://github.com/woocommerce/woocommerce-blocks/pull/1349)
This adds a payment methods api to the checkout block that allows for extension to register payment methods with the block.
2020-01-06 17:28:09 -05:00
Albert Juhé Lluveras e082a14e3b Rename checkout classes from 'wc-blocks-xyz' to 'wc-block-xyz' (https://github.com/woocommerce/woocommerce-blocks/pull/1449)
* Rename checkout classes from 'wc-blocks-checkout' to 'wc-block-checkout'

* Rename form components classes from 'wc-blocks-checkout' to 'wc-block-checkout'

* Rename 'wc-components' class names to 'wc-block'
2020-01-03 15:23:49 +01:00
Albert Juhé Lluveras 892a56364c Fix empty cart inner blocks disabled (https://github.com/woocommerce/woocommerce-blocks/pull/1447) 2020-01-03 15:22:50 +01:00
Albert Juhé Lluveras 0a78174d25 Checkout: Fix city input field showing country value (https://github.com/woocommerce/woocommerce-blocks/pull/1467) 2020-01-02 17:36:56 +01:00
Seghir Nadir aaddf13494 Add type to checkout input fields (https://github.com/woocommerce/woocommerce-blocks/pull/1401)
* add input type

* fix css issues with types and better change default position
2019-12-19 13:59:34 +01:00
Seghir Nadir d58712ee2b Add Checkout Form components (https://github.com/woocommerce/woocommerce-blocks/pull/1351)
* initial commit at fields

* add radio control

* change input to be uncotrolled

* tweak styles

* populate block with boilerplate

* update aria in radio

* remove comment

* fix typo

* add missing colors

* put reminder to put Disabled back

* wrap text in i18n __

* reorder styles

* rename wc-components to wc-blocks

* use value instead of index for keys

* add no shipping placeholder

* change isEditor default to false

* fix problem with responsive
2019-12-16 23:13:41 +01:00
Albert Juhé Lluveras 77bb23bf32 Add Feedback Prompt in Cart & Checkout blocks sidebar (https://github.com/woocommerce/woocommerce-blocks/pull/1356)
* Add Feedback Prompt in Cart & Checkout blocks sidebar

* Add border

* Move getInspectorControls out of the component function

* Move feedback prompt to a HOC

* Add @todo comment to feedback link

* Use filter for withFeedbackPrompt

* Export withFeedbackPrompt from hocs index.js

* Typo

* Try moving the feedback texts to context

* Revert "Try moving the feedback texts to context"

This reverts commit 21f889b021ceea6fef722efab9663799829bc769.

* Revert "Use filter for withFeedbackPrompt"

This reverts commit 96bba029d61a383eafa2c0a1c08f7988e319b50d.

* Set feedback text in the HOC function

* Use arrow-function to simplify code

* Refactor
2019-12-16 15:59:16 +01:00
Darren Ethier 25c32dff45 make sure we only allow one cart/checkout block per page/post (https://github.com/woocommerce/woocommerce-blocks/pull/1384) 2019-12-16 08:27:17 -05:00
Albert Juhé Lluveras 810341d084 Add Cart block checkout button (https://github.com/woocommerce/woocommerce-blocks/pull/1366) 2019-12-12 20:46:56 +01:00
Mike Jolley 5a1bbbefb9 Update NPM dependencies and script dependency handling (https://github.com/woocommerce/woocommerce-blocks/pull/1337)
* Update NPM packages

* Switch JSON dependencies to new PHP files

* include->require

* include->require

* Remove from package and run audit fix

* Update wp-prettier

* Use version from asset file

* Fix eslint issues and test failures

* Update OriginalComponent docblocks

* Props are objects, not arrays

* Array to Object

* fix tests throwing unhandled rejection errors in node.

These tests were all testing Promise.rejects but then not properly catching the reject in the assertions.

* exclude rule for no short array syntax allowed

This is a WordPress core standard that we choose to ignore because it’s silly in our context to follow that rule (and we’re being consistent with WooCommerce Admin).
2019-12-10 12:17:46 -05:00
Albert Juhé Lluveras bf260b0838 Add Empty Cart View with inner blocks (https://github.com/woocommerce/woocommerce-blocks/pull/1350)
* Add Empty Cart View with inner blocks

* Add logic so empty cart is always saved and only displayed when cart is empty

* Make cart hidden until the correct display is loaded

* Add missing propTypes

* Remove is-loading class

* Import InnerBlocks from @wordpress/block-editor

* Add explanation for always rendering EmptyCart in the editor
2019-12-10 16:41:57 +01:00
Seghir Nadir 58d4d73b51 Introduce Checkout Form skeleton and Checkout Form Step Component (https://github.com/woocommerce/woocommerce-blocks/pull/1329)
* introduce form steps

* add last step

* add prop types

* fix css color variable naming

* add label for a11y

* use :last-child

* white space

* use direct args in classnames

* typo

* rename ids for steps

* fix line height to match title

Co-Authored-By: Albert Juhé Lluveras <aljullu@gmail.com>

* heading-content

* rename css var

* move vars to file

* move components within file

* move imports

* rename prop name to kebabCase

* update prop name

* make components responsive with storefront

* fix some compatiblity problems with 2020

* battle in the CSS ground

* move import to correct place

* turn stepHeadingContent to render prop

* styling
2019-12-06 14:18:55 +01:00
Rua Haszard 6afd947631 allow merchant to toggle cart empty/full modes in block editor (https://github.com/woocommerce/woocommerce-blocks/pull/1327)
* allow merchant to toggle cart empty/full modes in block editor

* use text `Button` for empty/full toolbar buttons

* fix highlighting of current cart state (empty/full) in editor:
- use new custom TextToolbarButton for empty/full mode buttons

* use color variables from css/abstracts/_colors

* Update assets/js/components/text-toolbar-button/index.js

Co-Authored-By: Seghir Nadir <nadir.seghir@gmail.com>

* fix className now props is separated out
2019-12-06 10:08:48 +13:00
Seghir Nadir ee1cdf7e0d Skeleton Checkout block (https://github.com/woocommerce/woocommerce-blocks/pull/1308)
* add checkout block

* prevent block from loading in wrong page

* remove block limitation

* exclude file from build

* rename todo

* remove fragment

* move files

* refactor example file
2019-12-03 15:12:46 +01:00
Rua Haszard 8e2b94fd69 Skeleton shopping cart block (https://github.com/woocommerce/woocommerce-blocks/pull/1306)
* basic empty cart block

* use a real placeholder for placeholder editor content

* remove unnecessary Fragment

* updates to config and frontend script

* enqueue frontend script

* add example config to block registration

* change name typo
2019-12-03 08:57:56 -05:00