diff --git a/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss index 201feec318a..28de8f908df 100644 --- a/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss +++ b/plugins/woocommerce-blocks/assets/js/base/components/drawer/style.scss @@ -42,7 +42,7 @@ $drawer-width-mobile: 100vw; right: 0; top: 0; transition: opacity $drawer-animation-duration; - z-index: 999; + z-index: 9999; opacity: 1; } diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/get-icons-from-payment-methods.ts b/plugins/woocommerce-blocks/assets/js/base/utils/get-icons-from-payment-methods.ts new file mode 100644 index 00000000000..a9c70495263 --- /dev/null +++ b/plugins/woocommerce-blocks/assets/js/base/utils/get-icons-from-payment-methods.ts @@ -0,0 +1,26 @@ +/** + * External dependencies + */ +import type { + PaymentMethods, + PaymentMethodIcons as PaymentMethodIconsType, +} from '@woocommerce/type-defs/payments'; + +/** + * Get the provider icons from payment methods data. + * + * @todo Refactor the Cart blocks to use getIconsFromPaymentMethods utility instead of the local copy. + * + * @param {PaymentMethods} paymentMethods Payment Method data + * @return {PaymentMethodIconsType} Payment Method icons data. + */ +export const getIconsFromPaymentMethods = ( + paymentMethods: PaymentMethods +): PaymentMethodIconsType => { + return Object.values( paymentMethods ).reduce( ( acc, paymentMethod ) => { + if ( paymentMethod.icons !== null ) { + acc = acc.concat( paymentMethod.icons ); + } + return acc; + }, [] as PaymentMethodIconsType ); +}; diff --git a/plugins/woocommerce-blocks/assets/js/base/utils/index.js b/plugins/woocommerce-blocks/assets/js/base/utils/index.js index 4090cadc9c5..1e611655a44 100644 --- a/plugins/woocommerce-blocks/assets/js/base/utils/index.js +++ b/plugins/woocommerce-blocks/assets/js/base/utils/index.js @@ -7,3 +7,4 @@ export * from './get-valid-block-attributes'; export * from './product-data'; export * from './derive-selected-shipping-rates'; export * from './from-entries-polyfill'; +export * from './get-icons-from-payment-methods'; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/block.tsx index 9b3f8effa02..70ae468b242 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/block.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/block.tsx @@ -4,14 +4,25 @@ import classNames from 'classnames'; import { __, _n, sprintf } from '@wordpress/i18n'; import { useState, useEffect, useRef } from '@wordpress/element'; -import { translateJQueryEventToNative } from '@woocommerce/base-utils'; -import { useStoreCart } from '@woocommerce/base-context/hooks'; +import { + translateJQueryEventToNative, + getIconsFromPaymentMethods, +} from '@woocommerce/base-utils'; +import { + useStoreCart, + usePaymentMethods, +} from '@woocommerce/base-context/hooks'; import Drawer from '@woocommerce/base-components/drawer'; import { formatPrice, getCurrencyFromPriceResponse, } from '@woocommerce/price-format'; import { getSetting } from '@woocommerce/settings'; +import { TotalsItem } from '@woocommerce/blocks-checkout'; +import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons'; +import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings'; +import Button from '@woocommerce/base-components/button'; +import { PaymentMethodDataProvider } from '@woocommerce/base-context'; /** * Internal dependencies @@ -23,6 +34,15 @@ interface MiniCartBlockProps { isInitiallyOpen?: boolean; } +const PaymentMethodIconsElement = (): JSX.Element => { + const { paymentMethods } = usePaymentMethods(); + return ( + + ); +}; + const MiniCartBlock = ( { isInitiallyOpen = false, }: MiniCartBlockProps ): JSX.Element => { @@ -80,7 +100,7 @@ const MiniCartBlock = ( { const subTotal = getSetting( 'displayCartPricesIncludingTax', false ) ? parseInt( cartTotals.total_items, 10 ) + parseInt( cartTotals.total_items_tax, 10 ) - : cartTotals.total_items; + : parseInt( cartTotals.total_items, 10 ); const ariaLabel = sprintf( /* translators: %1$d is the number of products in the cart. %2$s is the cart total */ @@ -104,10 +124,52 @@ const MiniCartBlock = ( { { __( 'Cart is empty', 'woo-gutenberg-products-block' ) } ) : ( - + <> +
+ +
+
+ +
+ + +
+ + + +
+ ); return ( diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss index 393ca3e1f11..9dde2ef7279 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss +++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart/style.scss @@ -5,4 +5,77 @@ // Reset font size so it doesn't depend on drawer's ancestors. .wc-block-mini-cart__drawer { font-size: 1rem; + + .components-modal__content { + display: flex; + flex-direction: column; + height: 100%; + } + + .components-modal__header { + margin: $gap 0; + } + + .wc-block-mini-cart__items { + flex-grow: 1; + margin-right: -$gap; + overflow-y: auto; + padding-right: $gap; + + .wc-block-cart-items__row:last-child::after { + content: none; + } + } +} + +.wc-block-mini-cart__footer { + border-top: 1px solid $gray-300; + margin-bottom: -$gap-largest; + margin-left: -$gap; + margin-right: -$gap; + padding: $gap-large; + +} + +.wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal { + font-weight: 600; + margin-bottom: $gap; + + .wc-block-components-totals-item__description { + display: none; + font-size: 0.75em; + font-weight: 400; + + @media only screen and (min-width: 480px) { + display: unset; + } + } +} + +.wc-block-mini-cart__footer-actions { + display: flex; + gap: $gap; + + .wc-block-mini-cart__footer-cart.wc-block-components-button { + background-color: transparent; + border: 1px solid $gray-900; + color: $gray-900; + display: none; + flex-grow: 1; + font-weight: 600; + + @media only screen and (min-width: 480px) { + display: inline-flex; + } + } + + .wc-block-mini-cart__footer-checkout { + border: 1px solid $gray-900; + flex-grow: 1; + font-weight: 600; + } +} + +.wc-block-mini-cart__footer .wc-block-components-payment-method-icons { + margin-top: $gap; } diff --git a/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php b/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php index 4150aa2cd77..939b1254a6a 100644 --- a/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php +++ b/plugins/woocommerce-blocks/src/BlockTypes/MiniCart.php @@ -5,6 +5,7 @@ use Automattic\WooCommerce\Blocks\Package; use Automattic\WooCommerce\Blocks\Assets; use Automattic\WooCommerce\Blocks\Assets\AssetDataRegistry; use Automattic\WooCommerce\Blocks\StoreApi\Utilities\CartController; +use Automattic\WooCommerce\Blocks\Payments\PaymentMethodRegistry; /** * Mini Cart class. @@ -96,6 +97,14 @@ class MiniCart extends AbstractBlock { } } + $payment_method_registry = Package::container()->get( PaymentMethodRegistry::class ); + $payment_methods = $payment_method_registry->get_all_active_payment_method_script_dependencies(); + + foreach ( $payment_methods as $payment_method ) { + $payment_method_script = $this->get_script_from_handle( $payment_method ); + $this->append_script_and_deps_src( $payment_method_script ); + } + $this->scripts_to_lazy_load['wc-block-mini-cart-component-frontend'] = array( 'src' => $script_data['src'], 'version' => $script_data['version'], @@ -165,6 +174,9 @@ class MiniCart extends AbstractBlock { } } } + if ( ! $script->src ) { + return; + } $this->scripts_to_lazy_load[ $script->handle ] = array( 'src' => $script->src, 'version' => $script->ver,