Skip to content
This repository was archived by the owner on Feb 23, 2024. It is now read-only.

Commit 285218b

Browse files
nielslangeimanish003github-actions[bot]
authored
Convert product-elements/price to TypeScript (#7683)
* Convert product-element/price to TypeScript * Apply feedback from #7095 to this PR * Export block due to Cross-Sells dependency * Update assets/js/atomic/blocks/product-elements/price/edit.tsx Co-authored-by: Manish Menaria <[email protected]> * bot: update checkstyle.xml * Apply review feedback * Outsource supports section * bot: update checkstyle.xml * Resolve merge conflicts * bot: update checkstyle.xml * Solve TS error in cart-cross-sells-product.tsx * bot: update checkstyle.xml * Solve TS error regarding min_amount and max_amount * bot: update checkstyle.xml * Empty-Commit * Fix TS problems in product-elements/price/block.tsx * bot: update checkstyle.xml * Solve TS errors * bot: update checkstyle.xml * Solve TS errors * bot: update checkstyle.xml * Solve TS errors * bot: update checkstyle.xml * bot: update checkstyle.xml * Resolve merge conflicts * Convert product-element/price to TypeScript * Apply feedback from #7095 to this PR * Export block due to Cross-Sells dependency * Apply review feedback * Update assets/js/atomic/blocks/product-elements/price/edit.tsx Co-authored-by: Manish Menaria <[email protected]> * bot: update checkstyle.xml * bot: update checkstyle.xml * Solve TS error in cart-cross-sells-product.tsx * bot: update checkstyle.xml * bot: update checkstyle.xml * Solve TS error regarding min_amount and max_amount * Empty-Commit * bot: update checkstyle.xml * Fix TS problems in product-elements/price/block.tsx * bot: update checkstyle.xml * bot: update checkstyle.xml * Solve TS errors * Solve TS errors * bot: update checkstyle.xml * Solve TS errors * bot: update checkstyle.xml * bot: update checkstyle.xml * bot: update checkstyle.xml * Empty checkstyle.xml * bot: update checkstyle.xml * Solve TS errors * bot: update checkstyle.xml * Solve TS errors * bot: update checkstyle.xml * Use BlockAttributes from @wordpress/blocks * Fix TS error * Fix TS errors * Fix TS error Co-authored-by: Manish Menaria <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 956b604 commit 285218b

File tree

17 files changed

+280
-202
lines changed

17 files changed

+280
-202
lines changed

‎assets/js/atomic/blocks/product-elements/price/attributes.js renamed to ‎assets/js/atomic/blocks/product-elements/price/attributes.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
/**
22
* External dependencies
33
*/
4+
import { BlockAttributes } from '@wordpress/blocks';
45

5-
export const blockAttributes = {
6+
export const blockAttributes: BlockAttributes = {
67
productId: {
78
type: 'number',
89
default: 0,

‎assets/js/atomic/blocks/product-elements/price/block.js renamed to ‎assets/js/atomic/blocks/product-elements/price/block.tsx

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/**
22
* External dependencies
33
*/
4-
import PropTypes from 'prop-types';
54
import classnames from 'classnames';
65
import ProductPrice from '@woocommerce/base-components/product-price';
76
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
@@ -11,22 +10,32 @@ import {
1110
} from '@woocommerce/shared-context';
1211
import { useColorProps, useTypographyProps } from '@woocommerce/base-hooks';
1312
import { withProductDataContext } from '@woocommerce/shared-hocs';
13+
import type { HTMLAttributes } from 'react';
14+
import { CurrencyCode } from '@woocommerce/type-defs/currency';
1415

1516
/**
1617
* Internal dependencies
1718
*/
19+
import type { BlockAttributes } from './types';
1820
import './style.scss';
1921

20-
/**
21-
* Product Price Block Component.
22-
*
23-
* @param {Object} props Incoming props.
24-
* @param {string} [props.className] CSS Class name for the component.
25-
* @param {string} [props.textAlign] Text alignment.
26-
* context will be used if this is not provided.
27-
* @return {*} The component.
28-
*/
29-
export const Block = ( props ) => {
22+
type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
23+
24+
interface PriceProps {
25+
currency_code: CurrencyCode;
26+
currency_symbol: string;
27+
currency_minor_unit: number;
28+
currency_decimal_separator: string;
29+
currency_thousand_separator: string;
30+
currency_prefix: string;
31+
currency_suffix: string;
32+
price: string;
33+
regular_price: string;
34+
sale_price: string;
35+
price_range: null | { min_amount: string; max_amount: string };
36+
}
37+
38+
export const Block = ( props: Props ): JSX.Element | null => {
3039
const { className, textAlign } = props;
3140
const { parentClassName } = useInnerBlockLayoutContext();
3241
const { product } = useProductDataContext();
@@ -54,7 +63,7 @@ export const Block = ( props ) => {
5463
);
5564
}
5665

57-
const prices = product.prices;
66+
const prices: PriceProps = product.prices;
5867
const currency = getCurrencyFromPriceResponse( prices );
5968
const isOnSale = prices.price !== prices.regular_price;
6069
const priceClassName = classnames( {
@@ -84,10 +93,4 @@ export const Block = ( props ) => {
8493
);
8594
};
8695

87-
Block.propTypes = {
88-
className: PropTypes.string,
89-
product: PropTypes.object,
90-
textAlign: PropTypes.oneOf( [ 'left', 'right', 'center' ] ),
91-
};
92-
9396
export default withProductDataContext( Block );

‎assets/js/atomic/blocks/product-elements/price/constants.js renamed to ‎assets/js/atomic/blocks/product-elements/price/constants.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44
import { __ } from '@wordpress/i18n';
55
import { currencyDollar, Icon } from '@wordpress/icons';
66

7-
export const BLOCK_TITLE = __(
7+
export const BLOCK_TITLE: string = __(
88
'Product Price',
99
'woo-gutenberg-products-block'
1010
);
11-
export const BLOCK_ICON = (
11+
export const BLOCK_ICON: JSX.Element = (
1212
<Icon
1313
icon={ currencyDollar }
1414
className="wc-block-editor-components-block-icon"
1515
/>
1616
);
17-
export const BLOCK_DESCRIPTION = __(
17+
export const BLOCK_DESCRIPTION: string = __(
1818
'Display the price of a product.',
1919
'woo-gutenberg-products-block'
2020
);

‎assets/js/atomic/blocks/product-elements/price/edit.js

Lines changed: 0 additions & 58 deletions
This file was deleted.

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import {
5+
AlignmentToolbar,
6+
BlockControls,
7+
useBlockProps,
8+
} from '@wordpress/block-editor';
9+
import { useEffect } from 'react';
10+
import type { BlockAlignment } from '@wordpress/blocks';
11+
12+
/**
13+
* Internal dependencies
14+
*/
15+
import Block from './block';
16+
import withProductSelector from '../shared/with-product-selector';
17+
import { BLOCK_TITLE as label, BLOCK_ICON as icon } from './constants';
18+
19+
type UnsupportedAligments = 'wide' | 'full';
20+
type AllowedAlignments = Exclude< BlockAlignment, UnsupportedAligments >;
21+
22+
interface BlockAttributes {
23+
textAlign?: AllowedAlignments;
24+
}
25+
26+
interface Attributes {
27+
textAlign: 'left' | 'center' | 'right';
28+
}
29+
30+
interface Context {
31+
queryId: number;
32+
}
33+
34+
interface Props {
35+
attributes: Attributes;
36+
setAttributes: (
37+
attributes: Partial< BlockAttributes > & Record< string, unknown >
38+
) => void;
39+
context: Context;
40+
}
41+
42+
const PriceEdit = ( {
43+
attributes,
44+
setAttributes,
45+
context,
46+
}: Props ): JSX.Element => {
47+
const blockProps = useBlockProps();
48+
const blockAttrs = {
49+
...attributes,
50+
...context,
51+
};
52+
const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
53+
54+
useEffect(
55+
() => setAttributes( { isDescendentOfQueryLoop } ),
56+
[ setAttributes, isDescendentOfQueryLoop ]
57+
);
58+
59+
return (
60+
<>
61+
<BlockControls>
62+
{ isDescendentOfQueryLoop && (
63+
<AlignmentToolbar
64+
value={ attributes.textAlign }
65+
onChange={ ( textAlign: AllowedAlignments ) => {
66+
setAttributes( { textAlign } );
67+
} }
68+
/>
69+
) }
70+
</BlockControls>
71+
<div { ...blockProps }>
72+
<Block { ...blockAttrs } />
73+
</div>
74+
</>
75+
);
76+
};
77+
78+
export default withProductSelector( { icon, label } )( PriceEdit );

‎assets/js/atomic/blocks/product-elements/price/index.js renamed to ‎assets/js/atomic/blocks/product-elements/price/index.ts

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
/**
22
* External dependencies
33
*/
4-
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
54
import { registerBlockType } from '@wordpress/blocks';
5+
import type { BlockConfiguration } from '@wordpress/blocks';
66

77
/**
88
* Internal dependencies
99
*/
1010
import sharedConfig from '../shared/config';
1111
import edit from './edit';
1212
import attributes from './attributes';
13+
import { supports } from './supports';
1314
import {
1415
BLOCK_TITLE as title,
1516
BLOCK_ICON as icon,
1617
BLOCK_DESCRIPTION as description,
1718
} from './constants';
1819

19-
const blockConfig = {
20+
type CustomBlockConfiguration = BlockConfiguration & {
21+
ancestor: string[];
22+
};
23+
24+
const blockConfig: CustomBlockConfiguration = {
2025
...sharedConfig,
2126
apiVersion: 2,
2227
title,
@@ -29,25 +34,8 @@ const blockConfig = {
2934
usesContext: [ 'query', 'queryId', 'postId' ],
3035
icon: { src: icon },
3136
attributes,
37+
supports,
3238
edit,
33-
supports: {
34-
...sharedConfig.supports,
35-
...( isFeaturePluginBuild() && {
36-
color: {
37-
text: true,
38-
background: true,
39-
link: false,
40-
__experimentalSkipSerialization: true,
41-
},
42-
typography: {
43-
fontSize: true,
44-
__experimentalFontWeight: true,
45-
__experimentalFontStyle: true,
46-
__experimentalSkipSerialization: true,
47-
},
48-
__experimentalSelector: '.wc-block-components-product-price',
49-
} ),
50-
},
5139
};
5240

5341
registerBlockType( 'woocommerce/product-price', blockConfig );

‎assets/js/atomic/blocks/product-elements/price/supports.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { isFeaturePluginBuild } from '@woocommerce/block-settings';
5+
6+
/**
7+
* Internal dependencies
8+
*/
9+
import sharedConfig from '../shared/config';
10+
11+
export const supports = {
12+
...sharedConfig.supports,
13+
...( isFeaturePluginBuild() && {
14+
color: {
15+
text: true,
16+
background: false,
17+
link: false,
18+
__experimentalSkipSerialization: true,
19+
},
20+
typography: {
21+
fontSize: true,
22+
__experimentalFontWeight: true,
23+
__experimentalFontStyle: true,
24+
__experimentalSkipSerialization: true,
25+
},
26+
__experimentalSelector: '.wc-block-components-product-price',
27+
} ),
28+
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface BlockAttributes {
2+
productId?: number;
3+
className?: string;
4+
textAlign?: 'left' | 'center' | 'right';
5+
isDescendentOfQueryLoop?: boolean;
6+
}

‎assets/js/atomic/blocks/product-elements/sale-badge/index.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ import {
1717
} from './constants';
1818
import { supports } from './support';
1919

20-
const blockConfig: BlockConfiguration = {
20+
type CustomBlockConfiguration = BlockConfiguration & {
21+
ancestor: string[];
22+
};
23+
24+
const blockConfig: CustomBlockConfiguration = {
2125
...sharedConfig,
2226
title,
2327
description,

‎assets/js/atomic/blocks/product-elements/sale-badge/types.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export interface BlockAttributes {
2-
productId: number;
3-
align: 'left' | 'center' | 'right';
2+
productId?: number;
3+
align?: 'left' | 'center' | 'right';
44
isDescendentOfQueryLoop: boolean;
55
}

‎assets/js/atomic/blocks/product-elements/sku/index.ts

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,12 @@ import {
1616
BLOCK_DESCRIPTION as description,
1717
} from './constants';
1818

19-
const blockConfig: BlockConfiguration = {
19+
type CustomBlockConfiguration = BlockConfiguration & {
20+
ancestor: string[];
21+
};
22+
23+
const blockConfig: CustomBlockConfiguration = {
24+
...sharedConfig,
2025
apiVersion: 2,
2126
title,
2227
description,
@@ -31,7 +36,4 @@ const blockConfig: BlockConfiguration = {
3136
edit,
3237
};
3338

34-
registerBlockType( 'woocommerce/product-sku', {
35-
...sharedConfig,
36-
...blockConfig,
37-
} );
39+
registerBlockType( 'woocommerce/product-sku', { ...blockConfig } );

‎assets/js/atomic/blocks/product-elements/stock-indicator/index.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ import {
1818
BLOCK_DESCRIPTION as description,
1919
} from './constants';
2020

21-
const blockConfig: BlockConfiguration = {
21+
type CustomBlockConfiguration = BlockConfiguration & {
22+
ancestor: string[];
23+
};
24+
25+
const blockConfig: CustomBlockConfiguration = {
2226
...sharedConfig,
2327
apiVersion: 2,
2428
title,

0 commit comments

Comments
 (0)