Add Slot/Fill to discounts area in cart sidebar (#4248)

* Move text-input to checkout package

* Pass validation props directly to ValidatedTextInput

* Import label relatively instead of from package

* Pass validation functions to ValidatedTextInput

This is so it doesn't need to get them from useValidationContext.

* Add InputProps to ValidatedTextInput

This will be used to control additional props on the input element of TextInput

* Spread inputProps onto <input> element of TextInput

* Export TextInput from @woocommerce/blocks-checkout

* Add @woocommerce/blocks-checkout package to tsconfig

* Allow styling to be applied to number inputs and when value is 0

* Make style order consistent

* Remove inputProps to rely on rest in TextInput

* Add specific prop for the inputErrorComponent

* Only disallow active state if value is 0 AND type is number

* Change all uses of ValidatedTextInput to also pass inputErrorComponent

* Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent"

This reverts commit ec734b9.

* Revert "Remove inputProps to rely on rest in TextInput"

This reverts commit 1fc64cc.

* Revert "Revert "Change all uses of ValidatedTextInput to also pass inputErrorComponent""

This reverts commit 110e360.

* Revert "Revert "Remove inputProps to rely on rest in TextInput""

This reverts commit aeb0352.

* Don't pass errorMessage to ValidatedTextInput

* Add DiscountsMetaSlot

* Add ExperimentalDiscountsMeta.Slot to Cart sidebar

* Add extra styles for Button and Panel components

* Export ExperimentalDiscountsMeta from checkout package

* Add updateCartFromApi util to @woocommerce/blocks-checkout

* Add comment to updateCartFromApi

* Change updateCartFromApi to TypeScript

* Revert "Move `TextInput` to checkout package and allow it to be used for input type=number (#4238)"

This reverts commit 15c1779.

* Stop passing contexts through the discounts slot fill

* Allow ValidatedTextInput to be used for type=number

* Remove contexts from Discounts slot fill

* Update snapshots

* Stop `errorMessage` being spread onto input fields in checkout

* Add paths to tsconfig

* Remove contexts from Discounts slot

* Accept step min and max on ValidatedTextInput

* Remove "no-margin" option on buttons

* Remove spinners from input type number

* Remove `no-top-border` style from panel

* Prevent text in buttons from breaking in the middle of words

* Add checkout package to tsconfig file list

* Stop passing components through DiscountsMetaSlot

Author: opr

assets/js/base/components/text-input/style.scss

@@ -40,6 +40,7 @@
 	input[type="tel"],
 	input[type="url"],
 	input[type="text"],
+	input[type="number"],
 	input[type="email"] {
 		@include font-size(regular);
 		background-color: #fff;
@@ -72,9 +73,20 @@
 		}
 	}
 
+	input[type="number"] {
+		-moz-appearance: textfield;
+
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			appearance: none;
+			margin: 0;
+		}
+	}
+
 	&.is-active input[type="tel"],
 	&.is-active input[type="url"],
 	&.is-active input[type="text"],
+	&.is-active input[type="number"],
 	&.is-active input[type="email"] {
 		padding: em($gap-large) 0 em($gap-smallest) $gap;
 	}

assets/js/base/components/text-input/text-input.tsx

@@ -11,6 +11,13 @@ import { Label } from '@woocommerce/blocks-checkout';
  */
 import './style.scss';
 
+interface TextInputPropsWithNumberType {
+	type: 'number';
+	step?: number;
+	min?: number;
+	max?: number;
+}
+
 interface TextInputProps
 	extends Omit<
 		InputHTMLAttributes< HTMLInputElement >,
@@ -28,7 +35,10 @@ interface TextInputProps
 	onBlur?: ( newValue: string ) => void;
 }
 
-const TextInput = forwardRef< HTMLInputElement, TextInputProps >(
+const TextInput = forwardRef<
+	HTMLInputElement,
+	TextInputProps & ( Record< string, never > | TextInputPropsWithNumberType )
+>(
 	(
 		{
 			className,
@@ -44,6 +54,9 @@ const TextInput = forwardRef< HTMLInputElement, TextInputProps >(
 			autoComplete = 'off',
 			value = '',
 			onChange,
+			min,
+			max,
+			step,
 			required = false,
 			onBlur = () => {
 				/* Do nothing */
@@ -54,6 +67,28 @@ const TextInput = forwardRef< HTMLInputElement, TextInputProps >(
 	) => {
 		const [ isActive, setIsActive ] = useState( false );
 
+		const numberAttributesFromProps: {
+			[ prop: string ]: string | number | undefined;
+		} =
+			type === 'number'
+				? {
+						step,
+						min,
+						max,
+				  }
+				: {};
+
+		const numberProps: {
+			[ prop: string ]: string | number | undefined;
+		} = {};
+
+		Object.keys( numberAttributesFromProps ).forEach( ( key ) => {
+			if ( typeof numberAttributesFromProps[ key ] === 'undefined' ) {
+				return;
+			}
+			numberProps[ key ] = numberAttributesFromProps[ key ];
+		} );
+
 		return (
 			<div
 				className={ classnames(
@@ -87,6 +122,7 @@ const TextInput = forwardRef< HTMLInputElement, TextInputProps >(
 							: ariaDescribedBy
 					}
 					required={ required }
+					{ ...numberProps }
 				/>
 				<Label
 					label={ label }

assets/js/base/components/text-input/validated-text-input.tsx

@@ -9,6 +9,7 @@ import {
 	useValidationContext,
 } from '@woocommerce/base-context';
 import { withInstanceId } from '@woocommerce/base-hocs/with-instance-id';
+import { isString } from '@woocommerce/types';
 
 /**
  * Internal dependencies
@@ -36,6 +37,7 @@ type ValidatedTextInputProps = (
 	validateOnMount?: boolean;
 	focusOnMount?: boolean;
 	showError?: boolean;
+	errorMessage?: string;
 	onChange: ( newValue: string ) => void;
 };
 
@@ -49,6 +51,7 @@ const ValidatedTextInput = ( {
 	focusOnMount = false,
 	onChange,
 	showError = true,
+	errorMessage: passedErrorMessage = '',
 	...rest
 }: ValidatedTextInputProps ) => {
 	const [ isPristine, setIsPristine ] = useState( true );
@@ -123,6 +126,9 @@ const ValidatedTextInput = ( {
 		message?: string;
 		hidden?: boolean;
 	};
+	if ( isString( passedErrorMessage ) && passedErrorMessage !== '' ) {
+		errorMessage.message = passedErrorMessage;
+	}
 	const hasError = errorMessage.message && ! errorMessage.hidden;
 	const describedBy =
 		showError && hasError && getValidationErrorId( errorIdString )

assets/js/base/components/tsconfig.json

@@ -1,6 +1,6 @@
 {
 	"extends": "../../../../tsconfig.base.json",
 	"compilerOptions": {},
-	"include": [ ".", "../../../../packages/prices", "../context/hooks", "../../type-defs" ],
+	"include": [ ".", "../../../../packages/prices",  "../../../../packages/checkout", "../context", "../../type-defs", "../hocs" ],
 	"exclude": [ "**/test/**" ]
 }

assets/js/blocks/cart-checkout/cart/full-cart/index.tsx

@@ -13,8 +13,8 @@ import {
 	TotalsFees,
 	TotalsTaxes,
 	ExperimentalOrderMeta,
+	ExperimentalDiscountsMeta,
 } from '@woocommerce/blocks-checkout';
-
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	useStoreCartCoupons,
@@ -40,7 +40,6 @@ import CheckoutButton from '../checkout-button';
 import CartLineItemsTitle from './cart-line-items-title';
 import CartLineItemsTable from './cart-line-items-table';
 import { CartExpressPayment } from '../../payment-methods';
-
 import './style.scss';
 
 interface CartAttributes {
@@ -114,6 +113,11 @@ const Cart = ( { attributes }: CartProps ) => {
 		cart,
 	};
 
+	const discountsSlotFillProps = {
+		extensions,
+		cart,
+	};
+
 	return (
 		<>
 			<CartLineItemsTitle itemCount={ cartItemsCount } />
@@ -152,6 +156,10 @@ const Cart = ( { attributes }: CartProps ) => {
 							isLoading={ isApplyingCoupon }
 						/>
 					) }
+					<ExperimentalDiscountsMeta.Slot
+						{ ...discountsSlotFillProps }
+					/>
+
 					{ cartNeedsShipping && (
 						<TotalsShipping
 							showCalculator={ isShippingCalculatorEnabled }

assets/js/blocks/cart-checkout/cart/test/__snapshots__/block.js.snap

@@ -455,6 +455,9 @@ exports[`Testing cart Contains a Taxes section if Core options are set to show i
           </div>
         </div>
       </div>
+      <div
+        class="wc-block-components-discounts-meta"
+      />
       <div
         class="wc-block-components-totals-shipping"
       >
@@ -1146,6 +1149,9 @@ exports[`Testing cart Shows individual tax lines if the store is set to do so 1`
           </div>
         </div>
       </div>
+      <div
+        class="wc-block-components-discounts-meta"
+      />
       <div
         class="wc-block-components-totals-shipping"
       >
@@ -1842,6 +1848,9 @@ exports[`Testing cart Shows rate percentages after tax lines if the block is set
           </div>
         </div>
       </div>
+      <div
+        class="wc-block-components-discounts-meta"
+      />
       <div
         class="wc-block-components-totals-shipping"
       >

packages/checkout/discounts-meta/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { createSlotFill } from '../slot';
+
+const slotName = '__experimentalDiscountsMeta';
+
+const {
+	Fill: ExperimentalDiscountsMeta,
+	Slot: DiscountsMetaSlot,
+} = createSlotFill( slotName );
+
+const Slot = ( { className, extensions, cart } ) => {
+	return (
+		<DiscountsMetaSlot
+			className={ classnames(
+				className,
+				'wc-block-components-discounts-meta'
+			) }
+			fillProps={ { extensions, cart } }
+		/>
+	);
+};
+
+ExperimentalDiscountsMeta.Slot = Slot;
+
+export default ExperimentalDiscountsMeta;

packages/checkout/index.js

@@ -3,6 +3,7 @@ export * from './utils';
 export * from './slot';
 export * from './registry';
 export { default as ExperimentalOrderMeta } from './order-meta';
+export { default as ExperimentalDiscountsMeta } from './discounts-meta';
 export { default as ExperimentalOrderShippingPackages } from './order-shipping-packages';
 export { default as Panel } from './panel';
 export { SlotFillProvider } from 'wordpress-components';

packages/checkout/panel/style.scss

@@ -18,6 +18,7 @@
 	position: relative;
 	text-align: left;
 	width: 100%;
+	word-break: break-word;
 
 	&,
 	&:hover,

packages/checkout/utils/index.js

@@ -1 +1,2 @@
 export * from './validation';
+export { updateCartFromApi } from './update-cart-from-api';