Merge branch 'trunk' of https://github.com/woocommerce/woocommerce-bl…

…ocks into 9360-product-collection-filters-price-range

.github/workflows/close-stale-issues.yml

@@ -20,5 +20,5 @@ jobs:
                   exempt-pr-labels: 'priority: critical,priority: high,Epic,type: technical debt,category: refactor,type: documentation,plugin incompatibility'
                   stale-issue-message: "This issue has been marked as `stale` because it has not seen any activity within the past 60 days. Our team uses this tool to help surface issues for review. If you are the author of the issue there's no need to comment as it will be looked at."
                   stale-pr-message: "This PR has been marked as `stale` because it has not seen any activity within the past 7 days. Our team uses this tool to help surface pull requests that have slipped through review. \n\n###### If deemed still relevant, the pr can be kept active by ensuring it's up to date with the main branch and removing the stale label."
-                  stale-issue-label: 'stale'
-                  stale-pr-label: 'stale'
+                  stale-issue-label: 'status: stale'
+                  stale-pr-label: 'status: stale'

assets/js/atomic/blocks/component-init.js

@@ -116,3 +116,12 @@ registerBlockComponent( {
 		)
 	),
 } );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-add-to-cart',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "product-add-to-cart" */ './product-elements/add-to-cart/frontend'
+		)
+	),
+} );

assets/js/atomic/blocks/index.js

@@ -13,6 +13,7 @@ import './product-elements/summary';
 import './product-elements/sale-badge';
 import './product-elements/sku';
 import './product-elements/stock-indicator';
+import './product-elements/add-to-cart';
 import './product-elements/add-to-cart-form';
 import './product-elements/product-image-gallery';
 import './product-elements/product-details';

assets/js/atomic/blocks/product-elements/add-to-cart/attributes.ts

@@ -0,0 +1,12 @@
+export const blockAttributes = {
+	showFormElements: {
+		type: 'boolean',
+		default: false,
+	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

assets/js/atomic/blocks/product-elements/add-to-cart/block.tsx

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import {
+	AddToCartFormContextProvider,
+	useAddToCartFormContext,
+} from '@woocommerce/base-context';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import { isEmpty } from '@woocommerce/types';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { AddToCartButton } from './shared';
+import {
+	SimpleProductForm,
+	VariableProductForm,
+	ExternalProductForm,
+	GroupedProductForm,
+} from './product-types';
+
+interface Props {
+	/**
+	 * CSS Class name for the component.
+	 */
+	className?: string;
+	/**
+	 * Whether or not to show form elements.
+	 */
+	showFormElements?: boolean;
+}
+
+/**
+ * Renders the add to cart form using useAddToCartFormContext.
+ */
+const AddToCartForm = () => {
+	const { showFormElements, productType } = useAddToCartFormContext();
+
+	if ( showFormElements ) {
+		if ( productType === 'variable' ) {
+			return <VariableProductForm />;
+		}
+		if ( productType === 'grouped' ) {
+			return <GroupedProductForm />;
+		}
+		if ( productType === 'external' ) {
+			return <ExternalProductForm />;
+		}
+		if ( productType === 'simple' || productType === 'variation' ) {
+			return <SimpleProductForm />;
+		}
+		return null;
+	}
+
+	return <AddToCartButton />;
+};
+
+/**
+ * Product Add to Form Block Component.
+ */
+const Block = ( { className, showFormElements }: Props ) => {
+	const { product } = useProductDataContext();
+	const componentClass = classnames(
+		className,
+		'wc-block-components-product-add-to-cart',
+		{
+			'wc-block-components-product-add-to-cart--placeholder':
+				isEmpty( product ),
+		}
+	);
+
+	return (
+		<AddToCartFormContextProvider
+			product={ product }
+			showFormElements={ showFormElements }
+		>
+			<div className={ componentClass }>
+				<AddToCartForm />
+			</div>
+		</AddToCartFormContextProvider>
+	);
+};
+
+export default withProductDataContext( Block );

assets/js/atomic/blocks/product-elements/add-to-cart/constants.tsx

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cart } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+
+export const BLOCK_TITLE = __( 'Add to Cart', 'woo-gutenberg-products-block' );
+export const BLOCK_ICON = (
+	<Icon icon={ cart } className="wc-block-editor-components-block-icon" />
+);
+export const BLOCK_DESCRIPTION = __(
+	'Displays an add to cart button. Optionally displays other add to cart form elements.',
+	'woo-gutenberg-products-block'
+);

assets/js/atomic/blocks/product-elements/add-to-cart/edit.tsx

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import classnames from 'classnames';
+import {
+	Disabled,
+	PanelBody,
+	ToggleControl,
+	Notice,
+} from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { productSupportsAddToCartForm } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+interface EditProps {
+	attributes: {
+		className: string;
+		showFormElements: boolean;
+	};
+	setAttributes: ( attributes: { showFormElements: boolean } ) => void;
+}
+
+const Edit = ( { attributes, setAttributes }: EditProps ) => {
+	const { product } = useProductDataContext();
+	const { className, showFormElements } = attributes;
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-add-to-cart'
+			) }
+		>
+			<EditProductLink productId={ product.id } />
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
+				>
+					{ productSupportsAddToCartForm( product ) ? (
+						<ToggleControl
+							label={ __(
+								'Display form elements',
+								'woo-gutenberg-products-block'
+							) }
+							help={ __(
+								'Depending on product type, allow customers to select a quantity, variations etc.',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ showFormElements }
+							onChange={ () =>
+								setAttributes( {
+									showFormElements: ! showFormElements,
+								} )
+							}
+						/>
+					) : (
+						<Notice
+							className="wc-block-components-product-add-to-cart-notice"
+							isDismissible={ false }
+							status="info"
+						>
+							{ __(
+								'This product does not support the block based add to cart form. A link to the product page will be shown instead.',
+								'woo-gutenberg-products-block'
+							) }
+						</Notice>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its add to cart form.',
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );

assets/js/atomic/blocks/product-elements/add-to-cart/frontend.ts

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

assets/js/atomic/blocks/product-elements/add-to-cart/index.ts

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './edit';
+import attributes from './attributes';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: { src: icon },
+	edit,
+	attributes,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-add-to-cart', {
+	...sharedConfig,
+	...blockConfig,
+} );

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/external.tsx

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import AddToCartButton from '../shared/add-to-cart-button';
+
+/**
+ * External Product Add To Cart Form
+ */
+const External = () => {
+	return <AddToCartButton />;
+};
+
+export default External;

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped.tsx

@@ -0,0 +1,8 @@
+/**
+ * Grouped Product Add To Cart Form
+ */
+const Grouped = () => (
+	<p>This is a placeholder for the grouped products form element.</p>
+);
+
+export default Grouped;

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/index.ts

@@ -0,0 +1,4 @@
+export { default as SimpleProductForm } from './simple';
+export { default as VariableProductForm } from './variable/index';
+export { default as ExternalProductForm } from './external';
+export { default as GroupedProductForm } from './grouped';

assets/js/atomic/blocks/product-elements/add-to-cart/product-types/simple.tsx

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import { AddToCartButton, QuantityInput, ProductUnavailable } from '../shared';
+
+/**
+ * Simple Product Add To Cart Form
+ */
+const Simple = () => {
+	// @todo Add types for `useAddToCartFormContext`
+	const {
+		product,
+		quantity,
+		minQuantity,
+		maxQuantity,
+		multipleOf,
+		dispatchActions,
+		isDisabled,
+	} = useAddToCartFormContext();
+
+	if ( product.id && ! product.is_purchasable ) {
+		return <ProductUnavailable />;
+	}
+
+	if ( product.id && ! product.is_in_stock ) {
+		return (
+			<ProductUnavailable
+				reason={ __(
+					'This product is currently out of stock and cannot be purchased.',
+					'woo-gutenberg-products-block'
+				) }
+			/>
+		);
+	}
+
+	return (
+		<>
+			<QuantityInput
+				value={ quantity }
+				min={ minQuantity }
+				max={ maxQuantity }
+				step={ multipleOf }
+				disabled={ isDisabled }
+				onChange={ dispatchActions.setQuantity }
+			/>
+			<AddToCartButton />
+		</>
+	);
+};
+
+export default Simple;