From 810341d084f9e47e9605563fc81327bee9986a0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= Date: Thu, 12 Dec 2019 20:46:56 +0100 Subject: [PATCH] Add Cart block checkout button (https://github.com/woocommerce/woocommerce-blocks/pull/1366) --- .../assets/js/base/components/button/index.js | 29 +++ .../js/base/components/button/style.scss | 19 ++ .../checkout-button/american-express-logo.js | 29 +++ .../cart/full-cart/checkout-button/index.js | 37 +++ .../checkout-button/payment-logos.js | 228 ++++++++++++++++++ .../cart/full-cart/checkout-button/style.scss | 7 + .../cart-checkout/cart/full-cart/index.js | 22 +- .../cart-checkout/cart/full-cart/style.scss | 22 ++ .../js/blocks/cart-checkout/cart/index.js | 7 +- .../assets/js/settings/blocks/constants.js | 1 + plugins/woocommerce-blocks/src/Assets.php | 1 + 11 files changed, 393 insertions(+), 9 deletions(-) create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/button/index.js create mode 100644 plugins/woocommerce-blocks/assets/js/base/components/button/style.scss create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/american-express-logo.js create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/index.js create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/payment-logos.js create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/style.scss create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss diff --git a/plugins/woocommerce-blocks/assets/js/base/components/button/index.js b/plugins/woocommerce-blocks/assets/js/base/components/button/index.js new file mode 100644 index 00000000000..00c177608f3 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/components/button/index.js @@ -0,0 +1,29 @@ +/** + * External dependencies + */ +import { Button as WPButton } from '@wordpress/components'; +import PropTypes from 'prop-types'; +import classNames from 'classnames'; + +/** + * Internal dependencies + */ +import './style.scss'; + +/** + * Component that visually renders a button but semantically might be ` +
+ + + +
+ + ); +}; + +export default CheckoutButton; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/payment-logos.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/payment-logos.js new file mode 100644 index 00000000000..849f7b456de --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/payment-logos.js @@ -0,0 +1,228 @@ +/** + * This file is a copy from: + * https://github.com/Automattic/wp-calypso/blob/master/packages/composite-checkout/src/components/payment-logos.js + * and will be replaced by the upstream version when `@automattic/composite-checkout` is published in NPM. + * If you want to make a change here, make sure you upstream the change to `wp-calypso` as well. + */ + +/** + * External dependencies + */ +import React from 'react'; +import PropTypes from 'prop-types'; + +export function VisaLogo( { className } ) { + return ( + + ); +} + +VisaLogo.propTypes = { + className: PropTypes.string, +}; + +export function MastercardLogo( { className } ) { + return ( + + ); +} + +MastercardLogo.propTypes = { + className: PropTypes.string, +}; + +export function AmexLogo( { className } ) { + return ( + + ); +} + +AmexLogo.propTypes = { + className: PropTypes.string, +}; + +export function JcbLogo( { className } ) { + return ( + + ); +} + +JcbLogo.propTypes = { + className: PropTypes.string, +}; + +export function DinersLogo( { className } ) { + return ( + + ); +} + +DinersLogo.propTypes = { + className: PropTypes.string, +}; + +export function UnionpayLogo( { className } ) { + return ( + + ); +} + +UnionpayLogo.propTypes = { + className: PropTypes.string, +}; + +export function DiscoverLogo( { className } ) { + return ( + + ); +} + +DiscoverLogo.propTypes = { + className: PropTypes.string, +}; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/style.scss new file mode 100644 index 00000000000..ec1fcf9aab8 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/checkout-button/style.scss @@ -0,0 +1,7 @@ +.wc-block-cart__payment-methods { + align-items: center; + display: flex; + justify-content: space-around; + margin: $gap auto; + max-width: 150px; +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js index d0cb3a7852a..ef82830e31e 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/index.js @@ -1,18 +1,24 @@ /** - * External dependencies + * Internal dependencies */ -import { Placeholder } from '@wordpress/components'; +import CheckoutButton from './checkout-button'; +import './style.scss'; /** - * Component to handle edit mode for the Cart block when user has something in cart aka "full". + * Component that renders the Cart block when user has something in cart aka "full". */ const Cart = () => { return ( - - - Cart block full state coming soon… - - +
+
+ + Cart block full state coming soon… + +
+
+ +
+
); }; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss new file mode 100644 index 00000000000..f2dfdf6b12f --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/full-cart/style.scss @@ -0,0 +1,22 @@ +.wc-block-cart__sidebar { + border: 1px solid $core-grey-light-600; + border-width: 1px 0; +} + +@include breakpoint( ">782px" ) { + .wc-block-cart { + display: flex; + } + + .wc-block-cart__main { + flex-grow: 4; + } + + .wc-block-cart__sidebar { + border: 0; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.14); + flex-grow: 1; + padding: $gap $gap-large $gap-largest; + } +} diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js index 2697337ea23..8b3bd1ff29c 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/cart/index.js @@ -3,6 +3,7 @@ */ import { __ } from '@wordpress/i18n'; import { InnerBlocks } from '@wordpress/block-editor'; +import { Disabled } from '@wordpress/components'; import { registerBlockType } from '@wordpress/blocks'; /** @@ -37,7 +38,11 @@ registerBlockType( 'woocommerce/cart', { * @param {Object} props Props to pass to block. */ edit( props ) { - return ; + return ( + + + + ); }, /** diff --git a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js index 06309fcd658..44fb569bbda 100644 --- a/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js +++ b/plugins/woocommerce-blocks/assets/js/settings/blocks/constants.js @@ -21,6 +21,7 @@ export const HAS_PRODUCTS = getSetting( 'hasProducts', true ); export const HAS_TAGS = getSetting( 'hasTags', true ); export const HOME_URL = getSetting( 'homeUrl', '' ); export const SHOP_URL = getSetting( 'shopUrl', '' ); +export const CHECKOUT_URL = getSetting( 'checkoutUrl', '' ); export const PRODUCT_COUNT = getSetting( 'productCount', 0 ); export const ATTRIBUTES = getSetting( 'attributes', [] ); export const WC_BLOCKS_ASSET_URL = getSetting( 'wcBlocksAssetUrl', '' ); diff --git a/plugins/woocommerce-blocks/src/Assets.php b/plugins/woocommerce-blocks/src/Assets.php index 31ff76bf4ff..3ed9fe098fd 100644 --- a/plugins/woocommerce-blocks/src/Assets.php +++ b/plugins/woocommerce-blocks/src/Assets.php @@ -117,6 +117,7 @@ class Assets { 'hasTags' => $tag_count > 0, 'homeUrl' => esc_url( home_url( '/' ) ), 'shopUrl' => get_permalink( wc_get_page_id( 'shop' ) ), + 'checkoutUrl' => get_permalink( wc_get_page_id( 'checkout' ) ), 'showAvatars' => '1' === get_option( 'show_avatars' ), 'enableReviewRating' => 'yes' === get_option( 'woocommerce_enable_review_rating' ), 'productCount' => array_sum( (array) $product_counts ),