Checkout: Convert a bunch of minor things to TypeScript (#97626)

* Convert a bunch of minor checkout things to TypeScript

* Guard against missing product for JetpackPluginRequiredVersionNotice

* Fix the product and minVersion types in JetpackPluginRequiredVersionNotice

client/my-sites/checkout/src/components/CheckoutMoneyBackGuarantee.jsx → client/my-sites/checkout/src/components/CheckoutMoneyBackGuarantee.tsx

@@ -1,4 +1,5 @@
 import { isChargeback, isCredits } from '@automattic/calypso-products';
+import { ResponseCart } from '@automattic/shopping-cart';
 import styled from '@emotion/styled';
 import { CheckoutSummaryRefundWindows } from './wp-checkout-order-summary';
 
@@ -38,7 +39,7 @@ const CheckoutMoneyBackGuaranteeWrapper = styled.div`
 	}
 `;
 
-export function CheckoutMoneyBackGuarantee( { cart } ) {
+export function CheckoutMoneyBackGuarantee( { cart }: { cart: ResponseCart } ) {
 	// Return early if the cart is only Chargebacks fees
 	if ( cart.products.every( isChargeback || isCredits ) ) {
 		return null;

client/my-sites/checkout/src/components/bundled-domain-notice.jsx → client/my-sites/checkout/src/components/bundled-domain-notice.tsx

@@ -1,5 +1,6 @@
 import { isMonthly, getPlan, getBillingMonthsForTerm } from '@automattic/calypso-products';
 import { localizeUrl } from '@automattic/i18n-utils';
+import { ResponseCart } from '@automattic/shopping-cart';
 import { REGISTER_DOMAIN } from '@automattic/urls';
 import { translate } from 'i18n-calypso';
 import {
@@ -12,34 +13,35 @@ import {
 } from 'calypso/lib/cart-values/cart-items';
 import CheckoutTermsItem from 'calypso/my-sites/checkout/src/components/checkout-terms-item';
 
-/* eslint-disable wpcalypso/jsx-classname-namespace */
-
-function getBillingMonthsForPlan( cart ) {
+function getBillingMonthsForPlan( cart: ResponseCart ) {
 	const plans = cart.products
 		.map( ( { product_slug } ) => getPlan( product_slug ) )
 		.filter( Boolean );
 	const plan = plans?.[ 0 ];
+	if ( ! plan?.term ) {
+		return 0;
+	}
 
 	try {
-		return getBillingMonthsForTerm( plan?.term );
+		return getBillingMonthsForTerm( plan.term );
 	} catch ( e ) {
 		return 0;
 	}
 }
 
-function hasBiennialPlan( cart ) {
+function hasBiennialPlan( cart: ResponseCart ) {
 	return getBillingMonthsForPlan( cart ) === 24;
 }
 
-function hasTriennialPlan( cart ) {
+function hasTriennialPlan( cart: ResponseCart ) {
 	return getBillingMonthsForPlan( cart ) === 36;
 }
 
-function hasMonthlyPlan( cart ) {
+function hasMonthlyPlan( cart: ResponseCart ) {
 	return cart.products.some( ( { product_slug } ) => isMonthly( product_slug ) );
 }
 
-function getCopyForBillingTerm( cart ) {
+function getCopyForBillingTerm( cart: ResponseCart ) {
 	if ( hasBiennialPlan( cart ) ) {
 		return translate(
 			'Purchasing a two-year subscription to a WordPress.com plan gives you two years of access to your plan’s features and one year of a custom domain name.'
@@ -57,10 +59,8 @@ function getCopyForBillingTerm( cart ) {
 
 /**
  * Use showBundledDomainNotice to manage BundleDomainNotice visibility when called.
- * @param {import('@automattic/shopping-cart').ResponseCart} cart
- * @returns boolean
  */
-export const showBundledDomainNotice = ( cart ) => {
+export const showBundledDomainNotice = ( cart: ResponseCart ): boolean => {
 	const isGiftPurchase = cart.is_gift_purchase;
 
 	if ( isGiftPurchase ) {
@@ -86,7 +86,7 @@ export const showBundledDomainNotice = ( cart ) => {
 	return true;
 };
 
-export default function BundledDomainNotice( { cart } ) {
+export default function BundledDomainNotice( { cart }: { cart: ResponseCart } ) {
 	const domainRegistrationLink = (
 		<a href={ localizeUrl( REGISTER_DOMAIN ) } target="_blank" rel="noopener noreferrer" />
 	);

client/my-sites/checkout/src/components/prepurchase-notices/index.tsx

@@ -146,7 +146,12 @@ const PrePurchaseNotices = () => {
 	// but this site does not have the minimum plugin version.
 	const backupSlugInCart = cartItemSlugs.find( isJetpackBackupSlug );
 	const backupProductInCart = backupSlugInCart && getProductFromSlug( backupSlugInCart );
-	if ( ! siteHasBackupMinimumPluginVersion && backupProductInCart ) {
+	if (
+		! siteHasBackupMinimumPluginVersion &&
+		backupProductInCart &&
+		// getProductFromSlug returns a string if it fails, so we want to check for that.
+		typeof backupProductInCart !== 'string'
+	) {
 		return (
 			<JetpackPluginRequiredVersionNotice
 				product={ backupProductInCart }

client/my-sites/checkout/src/components/prepurchase-notices/jetpack-plugin-required-version-notice.jsx → client/my-sites/checkout/src/components/prepurchase-notices/jetpack-plugin-required-version-notice.tsx

@@ -1,13 +1,19 @@
 import { getJetpackProductDisplayName } from '@automattic/calypso-products';
-import { useTranslate } from 'i18n-calypso';
+import { LocalizeProps, useTranslate } from 'i18n-calypso';
 import { useSelector } from 'react-redux';
 import { preventWidows } from 'calypso/lib/formatting';
 import getSiteAdminUrl from 'calypso/state/sites/selectors/get-site-admin-url';
 import getSiteOption from 'calypso/state/sites/selectors/get-site-option';
 import getSelectedSiteId from 'calypso/state/ui/selectors/get-selected-site-id';
 import PrePurchaseNotice from './prepurchase-notice';
+import type { Product } from '@automattic/calypso-products';
 
-const getMessage = ( translate, product, siteVersion, minVersion ) => {
+const getMessage = (
+	translate: LocalizeProps[ 'translate' ],
+	product: Product,
+	siteVersion: number | string | undefined,
+	minVersion: number | string
+) => {
 	const displayName = getJetpackProductDisplayName( product );
 
 	if ( ! siteVersion ) {
@@ -40,14 +46,25 @@ const getMessage = ( translate, product, siteVersion, minVersion ) => {
 	);
 };
 
-const JetpackPluginRequiredVersionNotice = ( { product, minVersion } ) => {
+const JetpackPluginRequiredVersionNotice = ( {
+	product,
+	minVersion,
+}: {
+	product: Product;
+	minVersion: string | number;
+} ) => {
 	const translate = useTranslate();
 	const siteId = useSelector( getSelectedSiteId );
 
-	const siteJetpackVersion = useSelector( ( state ) =>
+	let siteJetpackVersion = useSelector( ( state ) =>
 		getSiteOption( state, siteId, 'jetpack_version' )
 	);
 
+	// Validate that the site option isn't something unexpected for some reason.
+	if ( typeof siteJetpackVersion !== 'string' && typeof siteJetpackVersion !== 'number' ) {
+		siteJetpackVersion = undefined;
+	}
+
 	const pluginUpgradeUrl = useSelector( ( state ) =>
 		getSiteAdminUrl( state, siteId, 'update-core.php#update-plugins-table' )
 	);

client/my-sites/checkout/src/components/prepurchase-notices/prepurchase-notice.jsx → client/my-sites/checkout/src/components/prepurchase-notices/prepurchase-notice.tsx

@@ -1,6 +1,15 @@
+import { ReactNode } from 'react';
 import './style.scss';
 
-const PrePurchaseNotice = ( { message, linkUrl, linkText } ) => (
+const PrePurchaseNotice = ( {
+	message,
+	linkUrl,
+	linkText,
+}: {
+	message: ReactNode;
+	linkUrl: string | null | undefined;
+	linkText: ReactNode | null | undefined;
+} ) => (
 	<div className="prepurchase-notice">
 		<p className="prepurchase-notice__message">{ message }</p>
 		{ linkUrl && linkText && (

client/my-sites/checkout/src/components/titan-terms-of-service.jsx → client/my-sites/checkout/src/components/titan-terms-of-service.tsx

@@ -1,11 +1,16 @@
-import { localize } from 'i18n-calypso';
+import { ResponseCart } from '@automattic/shopping-cart';
+import { LocalizeProps, localize } from 'i18n-calypso';
 import { hasTitanMail } from 'calypso/lib/cart-values/cart-items';
 import { getTitanProductName } from 'calypso/lib/titan';
 import CheckoutTermsItem from 'calypso/my-sites/checkout/src/components/checkout-terms-item';
 
-/* eslint-disable wpcalypso/jsx-classname-namespace */
-
-function TitanTermsOfService( { cart, translate } ) {
+function TitanTermsOfService( {
+	cart,
+	translate,
+}: {
+	cart: ResponseCart;
+	translate: LocalizeProps[ 'translate' ];
+} ) {
 	if ( ! hasTitanMail( cart ) ) {
 		return null;
 	}

client/my-sites/checkout/src/components/upsell.jsx → client/my-sites/checkout/src/components/upsell.tsx

@@ -1,4 +1,4 @@
-export function UpSellCoupon( { onClick } ) {
+export function UpSellCoupon( { onClick }: { onClick: () => void } ) {
 	return (
 		<div>
 			<h4>Exclusive offer</h4>