refactor: updated additional components to TSX (#10832)

Author: frosso

changelog/refactor-additional-components-to-ts

@@ -0,0 +1,5 @@
+Significance: patch
+Type: dev
+Comment: chore: updated additional components to TSX
+
+

client/components/clickable-cell/test/__snapshots__/index.js.snap renamed to client/components/clickable-cell/__tests__/__snapshots__/index.js.snap

@@ -8,7 +8,7 @@ import { render } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import ClickableCell from '../';
+import ClickableCell from '..';
 
 describe( 'Clickable cell', () => {
 	test( 'renders a clickable cell when a link is provided', () => {

client/components/clickable-cell/test/index.js renamed to client/components/clickable-cell/__tests__/index.js

@@ -3,14 +3,25 @@
 /**
  * External dependencies
  */
+import { Link } from '@woocommerce/components';
+import React, { ReactNode, ComponentProps } from 'react';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { Link } from '@woocommerce/components';
 
-const ClickableCell = ( { href, children, ...linkProps } ) =>
+interface ClickableCellProps
+	extends Omit< ComponentProps< typeof Link >, 'href' > {
+	href?: string;
+	children: ReactNode;
+}
+
+const ClickableCell = ( {
+	href,
+	children,
+	...linkProps
+}: ClickableCellProps ) =>
 	href ? (
 		<Link
 			href={ href }
@@ -21,7 +32,7 @@ const ClickableCell = ( { href, children, ...linkProps } ) =>
 			{ children }
 		</Link>
 	) : (
-		children
+		<>{ children }</>
 	);
 
 export default ClickableCell;

client/components/clickable-cell/index.js renamed to client/components/clickable-cell/index.tsx

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Notice } from '@wordpress/components';
 

client/components/jetpack-idc-notice/index.js renamed to client/components/jetpack-idc-notice/index.tsx

@@ -1,20 +1,29 @@
 /** @format **/
 
+/**
+ * External dependencies
+ */
+import React, { Fragment, ReactNode } from 'react';
+
 /**
  * Internal dependencies
  */
-import { Fragment } from 'react';
 import './style.scss';
 import p24BankList from '../../payment-details/payment-method/p24/bank-list';
 import { HoverTooltip } from '../tooltip';
 import { getTransactionPaymentMethodTitle } from 'wcpay/transactions/utils/getTransactionPaymentMethodTitle';
 
+interface Payment {
+	type: string;
+	[ key: string ]: any;
+}
+
 /**
  *
- * @param {Object} payment Payment charge object
- * @return {ReactNode} Fragment containing formatted summary detail
+ * @param payment Payment charge object
+ * @return Fragment containing formatted summary detail
  */
-const formatDetails = ( payment ) => {
+const formatDetails = ( payment: Payment ): ReactNode => {
 	const paymentMethod = payment[ payment.type ];
 	/**
 	 * FLAG: PAYMENT_METHODS_LIST
@@ -23,7 +32,7 @@ const formatDetails = ( payment ) => {
 	 * add it here. If not, you don't need to list it here.
 	 *
 	 * If you're removing a payment method, you'll probably want to leave this section
-	 * section alone because we still need to display the details of existing transactions.
+	 * alone because we still need to display the details of existing transactions.
 	 */
 	switch ( payment.type ) {
 		case 'card':
@@ -58,8 +67,11 @@ const formatDetails = ( payment ) => {
 	}
 };
 
-const PaymentMethodDetails = ( props ) => {
-	const { payment } = props;
+interface PaymentMethodDetailsProps {
+	payment: Payment;
+}
+
+const PaymentMethodDetails = ( { payment }: PaymentMethodDetailsProps ) => {
 	const paymentMethod = payment ? payment[ payment.type ] : null;
 
 	if ( ! paymentMethod && ( ! payment || payment.type !== 'link' ) ) {