add support for superscript style on price values

Author: nerrad

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

@@ -36,5 +36,9 @@
 			"type": "number",
 			"default": 0
 		}
-	}
+	},
+	"styles": [
+		{ "name": "default", "label": "Default", "isDefault": true },
+		{ "name": "price-super", "label": "Superscript", "isDefault": false }
+	]
   }

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

@@ -49,6 +49,7 @@ const Block = ( {
 			priceStyle={ style }
 			priceClassName={ priceClassName }
 			currency={ currency }
+			withSuperScript={ true }
 			price={
 				isDescendentOfSingleProductTemplate ? pricePreview : rawPrice
 			}

assets/js/base/components/formatted-monetary-amount/index.tsx

@@ -18,16 +18,37 @@ import './style.scss';
 interface FormattedMonetaryAmountProps
 	extends Omit< NumberFormatProps, 'onValueChange' > {
 	className?: string;
-	displayType?: NumberFormatProps[ 'displayType' ];
 	allowNegative?: boolean;
 	isAllowed?: ( formattedValue: NumberFormatValues ) => boolean;
 	value: number | string; // Value of money amount.
 	currency: Currency | Record< string, never >; // Currency configuration object.
 	onValueChange?: ( unit: number ) => void; // Function to call when value changes.
 	style?: React.CSSProperties | undefined;
-	renderText?: ( value: string ) => JSX.Element;
+	renderText?: ( value: string ) => ReactElement | string;
+	withSuperScript?: boolean;
 }
 
+const applySuperscript =
+	( currency: FormattedMonetaryAmountProps[ 'currency' ] ) =>
+	( formattedValue: string ): ReactElement | string => {
+		if ( ! currency.decimalSeparator ) {
+			return formattedValue;
+		}
+		const pattern = new RegExp(
+			`^(.*)([${ currency.decimalSeparator }])(([^${ currency.decimalSeparator }]*))$`
+		);
+		const matches = formattedValue.match( pattern );
+		if ( ! matches ) {
+			return formattedValue;
+		}
+		return (
+			<>
+				<>{ matches[ 1 ] }</>
+				<sup>{ matches[ 3 ] }</sup>
+			</>
+		);
+	};
+
 /**
  * Formats currency data into the expected format for NumberFormat.
  */
@@ -44,12 +65,7 @@ const currencyToNumberFormat = (
 	};
 };
 
-type CustomFormattedMonetaryAmountProps = Omit<
-	FormattedMonetaryAmountProps,
-	'currency'
-> & {
-	currency: Currency | Record< string, never >;
-};
+const defaultRenderText = ( formattedAmount: string ) => formattedAmount;
 
 /**
  * FormattedMonetaryAmount component.
@@ -62,8 +78,10 @@ const FormattedMonetaryAmount = ( {
 	currency,
 	onValueChange,
 	displayType = 'text',
+	withSuperScript = false,
+	renderText,
 	...props
-}: CustomFormattedMonetaryAmountProps ): ReactElement | null => {
+}: FormattedMonetaryAmountProps ): JSX.Element | null => {
 	const value =
 		typeof rawValue === 'string' ? parseInt( rawValue, 10 ) : rawValue;
 
@@ -100,13 +118,20 @@ const FormattedMonetaryAmount = ( {
 		  }
 		: () => void 0;
 
+	if ( ! renderText ) {
+		renderText = withSuperScript
+			? applySuperscript( currency )
+			: defaultRenderText;
+	}
+
 	return (
 		<NumberFormat
 			className={ classes }
 			displayType={ displayType }
 			{ ...numberFormatProps }
 			value={ priceValue }
 			onValueChange={ onValueChangeWrapper }
+			renderText={ renderText }
 		/>
 	);
 };

assets/js/base/components/product-price/index.tsx

@@ -17,7 +17,7 @@ interface PriceRangeProps {
 	/**
 	 * Currency configuration object
 	 */
-	currency: Currency | Record< string, never > | undefined;
+	currency: Currency | Record< string, never >;
 	/**
 	 * The maximum price for the range
 	 */
@@ -38,6 +38,11 @@ interface PriceRangeProps {
 	 * **Note:** this excludes the dash in between the elements
 	 */
 	priceStyle?: React.CSSProperties | undefined;
+	/**
+	 * If true, the decimal separator will be excluded and the amount after it
+	 * will be wrapped in a superscript element.
+	 */
+	withSuperScript: boolean | undefined;
 }
 
 const PriceRange = ( {
@@ -46,6 +51,7 @@ const PriceRange = ( {
 	minPrice,
 	priceClassName,
 	priceStyle = {},
+	withSuperScript = false,
 }: PriceRangeProps ) => {
 	return (
 		<>
@@ -69,6 +75,7 @@ const PriceRange = ( {
 					currency={ currency }
 					value={ minPrice }
 					style={ priceStyle }
+					withSuperScript={ withSuperScript }
 				/>
 				&nbsp;&mdash;&nbsp;
 				<FormattedMonetaryAmount
@@ -79,6 +86,7 @@ const PriceRange = ( {
 					currency={ currency }
 					value={ maxPrice }
 					style={ priceStyle }
+					withSuperScript={ withSuperScript }
 				/>
 			</span>
 		</>
@@ -89,7 +97,7 @@ interface SalePriceProps {
 	/**
 	 * Currency configuration object
 	 */
-	currency: Currency | Record< string, never > | undefined;
+	currency: Currency | Record< string, never >;
 	/**
 	 * CSS class to be applied to the regular price container
 	 *
@@ -121,7 +129,7 @@ interface SalePriceProps {
 	/**
 	 * The new price during the sale
 	 */
-	price: number | string | undefined;
+	price: number | string;
 }
 
 const SalePrice = ( {
@@ -248,6 +256,11 @@ export interface ProductPriceProps {
 				'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'
 		  >
 		| undefined;
+	/**
+	 * If true, the decimal separator will be excluded and the amount after it
+	 * will be wrapped in a superscript element.
+	 */
+	withSuperScript: boolean | undefined;
 }
 
 const ProductPrice = ( {
@@ -264,6 +277,7 @@ const ProductPrice = ( {
 	regularPriceClassName,
 	regularPriceStyle,
 	style,
+	withSuperScript = false,
 }: ProductPriceProps ): JSX.Element => {
 	const wrapperClassName = classNames(
 		className,
@@ -310,6 +324,7 @@ const ProductPrice = ( {
 				minPrice={ minPrice }
 				priceClassName={ priceClassName }
 				priceStyle={ priceStyle }
+				withSuperScript={ withSuperScript }
 			/>
 		);
 	} else if ( price ) {
@@ -322,6 +337,7 @@ const ProductPrice = ( {
 				currency={ currency }
 				value={ price }
 				style={ priceStyle }
+				withSuperScript={ withSuperScript }
 			/>
 		);
 	}