Convert WPContactFormSummary to TS (#64216)

Automattic · May 31, 2022 · 7e55408 · 7e55408
1 parent a48b684
commit 7e55408
Showing 1 changed file with 60 additions and 33 deletions.
diff --git a/...out/components/wp-contact-form-summary.js → ...ut/components/wp-contact-form-summary.tsx b/...out/components/wp-contact-form-summary.js → ...ut/components/wp-contact-form-summary.tsx
@@ -4,13 +4,30 @@ import { useSelect } from '@wordpress/data';
 import { hasOnlyRenewalItems } from 'calypso/lib/cart-values/cart-items';
 import useCartKey from 'calypso/my-sites/checkout/use-cart-key';
 import { SummaryLine, SummaryDetails } from './summary-details';
+import type { ManagedContactDetails } from '@automattic/wpcom-checkout';
+
+const GridRow = styled.div`
+	display: -ms-grid;
+	display: grid;
+	width: 100%;
+	-ms-grid-columns: 48% 4% 48%;
+	grid-template-columns: 48% 48%;
+	grid-column-gap: 4%;
+	justify-items: stretch;
+`;
 
 export default function WPContactFormSummary( {
 	areThereDomainProductsInCart,
 	isGSuiteInCart,
 	isLoggedOutCart,
+}: {
+	areThereDomainProductsInCart: boolean;
+	isGSuiteInCart: boolean;
+	isLoggedOutCart: boolean;
 } ) {
-	const contactInfo = useSelect( ( select ) => select( 'wpcom-checkout' ).getContactInfo() );
+	const contactInfo: ManagedContactDetails = useSelect( ( select ) =>
+		select( 'wpcom-checkout' ).getContactInfo()
+	);
 	const cartKey = useCartKey();
 	const { responseCart: cart } = useShoppingCart( cartKey );
 	const isRenewal = cart && hasOnlyRenewalItems( cart );
@@ -22,8 +39,8 @@ export default function WPContactFormSummary( {
 
 	const fullName = joinNonEmptyValues(
 		' ',
-		contactInfo.firstName.value,
-		contactInfo.lastName.value
+		contactInfo.firstName?.value,
+		contactInfo.lastName?.value
 	);
 
 	return (
@@ -36,8 +53,8 @@ export default function WPContactFormSummary( {
 
 					{ ! isRenewal &&
 						areThereDomainProductsInCart &&
-						contactInfo.organization.value?.length > 0 && (
-							<SummaryLine>{ contactInfo.organization.value } </SummaryLine>
+						( contactInfo.organization?.value?.length ?? 0 ) > 0 && (
+							<SummaryLine>{ contactInfo.organization?.value ?? '' } </SummaryLine>
 						) }
 
 					<EmailSummary
@@ -48,9 +65,11 @@ export default function WPContactFormSummary( {
 						isGSuiteInCart={ isGSuiteInCart }
 					/>
 
-					{ ! isRenewal && areThereDomainProductsInCart && contactInfo.phone.value?.length > 0 && (
-						<SummaryLine>{ contactInfo.phone.value }</SummaryLine>
-					) }
+					{ ! isRenewal &&
+						areThereDomainProductsInCart &&
+						( contactInfo.phone?.value?.length ?? 0 ) > 0 && (
+							<SummaryLine>{ contactInfo.phone?.value ?? '' }</SummaryLine>
+						) }
 				</SummaryDetails>
 
 				<AddressSummary
@@ -63,18 +82,8 @@ export default function WPContactFormSummary( {
 	);
 }
 
-const GridRow = styled.div`
-	display: -ms-grid;
-	display: grid;
-	width: 100%;
-	-ms-grid-columns: 48% 4% 48%;
-	grid-template-columns: 48% 48%;
-	grid-column-gap: 4%;
-	justify-items: stretch;
-`;
-
-function joinNonEmptyValues( joinString, ...values ) {
-	return values.filter( ( value ) => value?.length > 0 ).join( joinString );
+function joinNonEmptyValues( joinString: string, ...values: ( string | undefined )[] ) {
+	return values.filter( ( value ) => ( value?.length ?? 0 ) > 0 ).join( joinString );
 }
 
 // The point of this component is to make sure we show at most one email address in the summary, and that the one we show is editable.
@@ -84,6 +93,12 @@ function EmailSummary( {
 	areThereDomainProductsInCart,
 	isGSuiteInCart,
 	isLoggedOutCart,
+}: {
+	isRenewal: boolean;
+	contactInfo: ManagedContactDetails;
+	areThereDomainProductsInCart: boolean;
+	isGSuiteInCart: boolean;
+	isLoggedOutCart: boolean;
 } ) {
 	if ( isRenewal ) {
 		return null;
@@ -92,28 +107,36 @@ function EmailSummary( {
 		return null;
 	}
 
-	if ( ! contactInfo.alternateEmail.value && ! contactInfo.email.value ) {
+	if ( ! contactInfo.alternateEmail?.value && ! contactInfo.email?.value ) {
 		return null;
 	}
 
 	if ( isGSuiteInCart && ! areThereDomainProductsInCart ) {
-		return contactInfo.alternateEmail.value ? (
-			<SummaryLine>{ contactInfo.alternateEmail.value }</SummaryLine>
+		return contactInfo.alternateEmail?.value ? (
+			<SummaryLine>{ contactInfo.alternateEmail?.value }</SummaryLine>
 		) : null;
 	}
 
-	if ( ! contactInfo.email.value ) {
+	if ( ! contactInfo.email?.value ) {
 		return null;
 	}
 
-	return <SummaryLine>{ contactInfo.email.value }</SummaryLine>;
+	return <SummaryLine>{ contactInfo.email?.value }</SummaryLine>;
 }
 
-function AddressSummary( { contactInfo, areThereDomainProductsInCart, isRenewal } ) {
+function AddressSummary( {
+	contactInfo,
+	areThereDomainProductsInCart,
+	isRenewal,
+}: {
+	contactInfo: ManagedContactDetails;
+	areThereDomainProductsInCart: boolean;
+	isRenewal: boolean;
+} ) {
 	const postalAndCountry = joinNonEmptyValues(
 		', ',
-		contactInfo.postalCode.value,
-		contactInfo.countryCode.value
+		contactInfo.postalCode?.value,
+		contactInfo.countryCode?.value
 	);
 
 	if ( ! areThereDomainProductsInCart || isRenewal ) {
@@ -124,15 +147,19 @@ function AddressSummary( { contactInfo, areThereDomainProductsInCart, isRenewal
 		);
 	}
 
-	const cityAndState = joinNonEmptyValues( ', ', contactInfo.city.value, contactInfo.state.value );
+	const cityAndState = joinNonEmptyValues(
+		', ',
+		contactInfo.city?.value,
+		contactInfo.state?.value
+	);
 	return (
 		<SummaryDetails>
-			{ contactInfo.address1.value?.length > 0 && (
-				<SummaryLine>{ contactInfo.address1.value } </SummaryLine>
+			{ ( contactInfo.address1?.value?.length ?? 0 ) > 0 && (
+				<SummaryLine>{ contactInfo.address1?.value ?? '' } </SummaryLine>
 			) }
 
-			{ contactInfo.address2.value?.length > 0 && (
-				<SummaryLine>{ contactInfo.address2.value } </SummaryLine>
+			{ ( contactInfo.address2?.value?.length ?? 0 ) > 0 && (
+				<SummaryLine>{ contactInfo.address2?.value ?? '' } </SummaryLine>
 			) }
 
 			{ cityAndState && <SummaryLine>{ cityAndState }</SummaryLine> }