Site settings: prevent console price formatting warnings (#99046)

* Site settings: refactor agencyBillingMessage to prevent price formatting warnings * Move undefined check inside createAgencyBillingMessage function * Add price/currency check, refactor from ternary to early return
Automattic · Jan 31, 2025 · f81446e · f81446e
1 parent bb78f64
commit f81446e
Showing 1 changed file with 47 additions and 33 deletions.
diff --git a/client/sites/settings/site/visibility/index.jsx b/client/sites/settings/site/visibility/index.jsx
@@ -33,6 +33,51 @@ import { LaunchConfirmationModal } from './launch-confirmation-modal';
 import { LaunchSiteTrialUpsellNotice } from './launch-site-trial-notice';
 import './styles.scss';
 
+const createAgencyBillingMessage = ( agency, agencyLoading = false, agencyError = false ) => {
+	if ( ! agency ) {
+		return undefined;
+	}
+
+	const agencyPriceInfoIsDefined =
+		Number.isFinite( agency.prices?.actual_price ) && typeof agency.prices?.currency === 'string';
+
+	if ( agencyLoading || agencyError || ! agencyPriceInfoIsDefined ) {
+		return translate( "After launch, we'll bill your agency in the next billing cycle." );
+	}
+
+	const agencyName = agency.name;
+	const existingWPCOMLicenseCount = agency.existing_wpcom_license_count || 0;
+	const price = formatCurrency( agency.prices.actual_price, agency.prices.currency );
+
+	return translate(
+		"After launch, we'll bill {{strong}}%(agencyName)s{{/strong}} in the next billing cycle. With %(licenseCount)s production hosting license, you will be charged %(price)s / license / month. {{a}}Learn more.{{/a}}",
+		"After launch, we'll bill {{strong}}%(agencyName)s{{/strong}} in the next billing cycle. With %(licenseCount)s production hosting licenses, you will be charged %(price)s / license / month. {{a}}Learn more.{{/a}}",
+		{
+			count: existingWPCOMLicenseCount + 1,
+			args: {
+				agencyName,
+				licenseCount: existingWPCOMLicenseCount + 1,
+				price,
+			},
+			components: {
+				strong: <strong />,
+				a: (
+					<a
+						className="site-settings__general-settings-launch-site-agency-learn-more"
+						href={ localizeUrl(
+							'https://agencieshelp.automattic.com/knowledge-base/free-development-licenses-for-wordpress-com-hosting/'
+						) }
+						target="_blank"
+						rel="noopener noreferrer"
+					/>
+				),
+			},
+			comment:
+				'agencyName: name of the agency that will be billed for the site; licenseCount: number of licenses the agency will be billed for; price: price per license',
+		}
+	);
+};
+
 const LaunchSite = () => {
 	const [ isLaunchConfirmationModalOpen, setLaunchConfirmationModalOpen ] = useState( false );
 	const openLaunchConfirmationModal = () => setLaunchConfirmationModalOpen( true );
@@ -73,9 +118,7 @@ const LaunchSite = () => {
 		error: agencyError,
 		isLoading: agencyLoading,
 	} = useFetchAgencyFromBlog( site?.ID, { enabled: !! site?.ID && isDevelopmentSite } );
-	const agencyName = agency?.name;
-	const existingWPCOMLicenseCount = agency?.existing_wpcom_license_count || 0;
-	const price = formatCurrency( agency?.prices?.actual_price, agency?.prices?.currency );
+
 	const siteReferralActive = agency?.referral_status === 'active';
 	const shouldShowReferToClientButton =
 		isDevelopmentSite && ! siteReferralActive && ! agencyLoading;
@@ -130,36 +173,7 @@ const LaunchSite = () => {
 		window.location.href = `https://agencies.automattic.com/marketplace/checkout?referral_blog_id=${ siteId }`;
 	};
 
-	const agencyBillingMessage =
-		agencyLoading || agencyError
-			? translate( "After launch, we'll bill your agency in the next billing cycle." )
-			: translate(
-					"After launch, we'll bill {{strong}}%(agencyName)s{{/strong}} in the next billing cycle. With %(licenseCount)s production hosting license, you will be charged %(price)s / license / month. {{a}}Learn more.{{/a}}",
-					"After launch, we'll bill {{strong}}%(agencyName)s{{/strong}} in the next billing cycle. With %(licenseCount)s production hosting licenses, you will be charged %(price)s / license / month. {{a}}Learn more.{{/a}}",
-					{
-						count: existingWPCOMLicenseCount + 1,
-						args: {
-							agencyName: agencyName,
-							licenseCount: existingWPCOMLicenseCount + 1,
-							price,
-						},
-						components: {
-							strong: <strong />,
-							a: (
-								<a
-									className="site-settings__general-settings-launch-site-agency-learn-more"
-									href={ localizeUrl(
-										'https://agencieshelp.automattic.com/knowledge-base/free-development-licenses-for-wordpress-com-hosting/'
-									) }
-									target="_blank"
-									rel="noopener noreferrer"
-								/>
-							),
-						},
-						comment:
-							'agencyName: name of the agency that will be billed for the site; licenseCount: number of licenses the agency will be billed for; price: price per license',
-					}
-			  );
+	const agencyBillingMessage = createAgencyBillingMessage( agency, agencyLoading, agencyError );
 
 	const renderConfirmationModal = () => {
 		return (