add discount block

Author: nerrad

assets/js/atomic/blocks/product-elements/price-v2/edit.tsx

@@ -15,7 +15,11 @@ import { useStyleProps } from '@woocommerce/base-hooks';
 /**
  * Internal dependencies
  */
-import { originalPriceName, currentPriceName } from './inner-blocks';
+import {
+	originalPriceName,
+	currentPriceName,
+	priceDiscount,
+} from './inner-blocks';
 import { TEMPLATE } from './template';
 
 interface Attributes {
@@ -134,7 +138,11 @@ const EditBlock = ( {
 		>
 			<div className={ parentClassName }>
 				<InnerBlocks
-					allowedBlocks={ [ originalPriceName, currentPriceName ] }
+					allowedBlocks={ [
+						originalPriceName,
+						currentPriceName,
+						priceDiscount,
+					] }
 					// todo add template for initial price layout
 					template={ TEMPLATE }
 				/>

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/block.json

@@ -0,0 +1,12 @@
+{
+	"name": "woocommerce/discount",
+	"version": "1.0.0",
+	"icon": "info",
+	"title": "Discount",
+	"description": "Display the discounted amount for a product.",
+	"category": "woocommerce",
+	"keywords": [ "WooCommerce" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/block.tsx

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import type { HTMLAttributes } from 'react';
+import classnames from 'classnames';
+import { useStyleProps } from '@woocommerce/base-hooks';
+import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
+import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
+
+/**
+ * Internal dependencies
+ */
+import type { PriceProps } from '../../types';
+
+type Props = PriceProps & HTMLAttributes< HTMLDivElement >;
+
+const calculateDiscountAmount = ( originalPrice, currentPrice ) => {
+	// todo: this assumes currentPrice is lower than originalPrice
+	return parseInt( originalPrice, 10 ) - parseInt( currentPrice, 10 );
+};
+
+const calculateDiscountPercentage = ( originalPrice, currentPrice ) => {
+	const discountAmount = calculateDiscountAmount(
+		originalPrice,
+		currentPrice
+	);
+	return Math.floor(
+		( discountAmount / parseInt( originalPrice, 10 ) ) * 100
+	);
+};
+
+const Block = ( {
+	attributes,
+	context,
+	originalPrice,
+	currentPrice,
+	currency,
+}: Props ): JSX.Element | null => {
+	// todo: need to setup discountType and showDiscount as attributes/context
+	// from the parent block.
+	const {
+		className,
+		discountType = 'percentage',
+		showDiscount = true,
+	} = attributes;
+	const { isDescendentOfSingleProductTemplate = false } = context || {};
+	const { className: stylesClassName, style } = useStyleProps( attributes );
+	const { parentClassName } = useInnerBlockLayoutContext();
+	if ( ! showDiscount ) {
+		return null;
+	}
+	const wrapperClassName = classnames(
+		className,
+		{
+			[ `${ parentClassName }__product-price` ]: parentClassName,
+		},
+		stylesClassName
+	);
+	const priceClassName = classnames( {
+		[ `${ parentClassName }__product-price_discount` ]: parentClassName,
+	} );
+	// todo: lift all the preview pricing up to the parent block (across all the price inner blocks)
+	const oPrice = isDescendentOfSingleProductTemplate ? '3000' : originalPrice;
+	const cPrice = isDescendentOfSingleProductTemplate ? '5000' : currentPrice;
+	const DisplayedDiscount =
+		discountType === 'percentage' ? (
+			<span className={ priceClassName }>
+				{ calculateDiscountPercentage( oPrice, cPrice ) }%
+			</span>
+		) : (
+			<FormattedMonetaryAmount
+				className={ priceClassName }
+				currency={ currency }
+				value={ calculateDiscountAmount( oPrice, cPrice ).toString() }
+			/>
+		);
+
+	return (
+		<span className={ wrapperClassName } style={ style }>
+			{ DisplayedDiscount }
+		</span>
+	);
+};
+
+export default Block;

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/edit.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import type { HTMLAttributes, CSSProperties } from 'react';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+
+/**
+ * Internal dependencies
+ */
+import DiscountBlock from './block';
+
+interface Attributes {
+	style: CSSProperties;
+}
+
+type Props = {
+	attributes: Attributes;
+	context?: { isDescendentOfSingleProductTemplate: boolean };
+} & HTMLAttributes< HTMLDivElement >;
+
+const DiscountEdit = ( { attributes, context }: Props ): JSX.Element => {
+	const blockProps = useBlockProps();
+	const { product } = useProductDataContext();
+	const { isDescendentOfSingleProductTemplate = false } = context || {};
+	const originalPrice = product?.prices?.regular_price;
+	const currentPrice = product?.prices?.price;
+	const showPrice = originalPrice && currentPrice !== originalPrice;
+	const currency = isDescendentOfSingleProductTemplate
+		? getCurrencyFromPriceResponse()
+		: getCurrencyFromPriceResponse( product?.prices );
+	const blockAttrs = {
+		attributes,
+		currency,
+		context,
+		originalPrice,
+		currentPrice,
+	};
+	return (
+		<>
+			{ showPrice && (
+				<div { ...blockProps }>
+					<DiscountBlock { ...blockAttrs } />
+				</div>
+			) }
+		</>
+	);
+};
+
+export default DiscountEdit;

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/discount/index.ts

@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import sharedConfig from '../../../shared/config';
+import metadata from './block.json';
+
+const { ancestor, ...configuration } = sharedConfig;
+
+const blockConfig = {
+	...configuration,
+	...metadata,
+	edit,
+	supports: {
+		...configuration.supports,
+		context: '',
+	},
+};
+
+registerBlockType( metadata.name, blockConfig );
+
+export const BLOCK_NAME = metadata.name;

assets/js/atomic/blocks/product-elements/price-v2/inner-blocks/index.ts

@@ -3,6 +3,8 @@
  */
 import './original-price/index.ts';
 import './current-price/index.ts';
+import './discount/index.ts';
 
 export { BLOCK_NAME as originalPriceName } from './original-price/index';
 export { BLOCK_NAME as currentPriceName } from './current-price/index';
+export { BLOCK_NAME as priceDiscount } from './discount/index';

assets/js/atomic/blocks/product-elements/price-v2/template.ts

@@ -6,4 +6,5 @@ import { InnerBlockTemplate } from '@wordpress/blocks';
 export const TEMPLATE: InnerBlockTemplate[] = [
 	[ 'woocommerce/original-price', {}, [] ],
 	[ 'woocommerce/current-price', {}, [] ],
+	[ 'woocommerce/discount', {}, [] ],
 ];

assets/js/atomic/blocks/product-elements/price-v2/types.ts

@@ -15,6 +15,8 @@ export interface BlockAttributes {
 
 export interface PriceContext {
 	isDescendentOfSingleProductTemplate: boolean;
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	'woocommerce/withSuperScriptStyle'?: boolean;
 }
 
 export interface PriceAttributes {
@@ -26,5 +28,7 @@ export interface PriceProps extends ProductPriceProps {
 	attributes: PriceAttributes;
 	context?: PriceContext;
 	rawPrice?: string;
+	minPrice?: string;
+	maxPrice?: string;
 	priceType: 'original' | 'current';
 }