A4A Dev Sites: Update launch confirmation modal copy. (#94376)

* Update launch confirmation modal copy. * Share the same agency billing message. Some structure cleanup.
Automattic · Sep 12, 2024 · f1dc646 · f1dc646
1 parent f67e141
commit f1dc646
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 69 deletions.
diff --git a/client/my-sites/site-settings/site-visibility/launch-confirmation-modal.tsx b/client/my-sites/site-settings/site-visibility/launch-confirmation-modal.tsx
@@ -12,40 +12,36 @@ const ActionButtons = styled.div( {
 type LaunchConfirmationModalProps = {
 	onConfirmation: () => void;
 	closeModal: () => void;
-	billingAgencyMessage: string;
+	message: string;
 };
 
 export function LaunchConfirmationModal( {
 	closeModal,
-	billingAgencyMessage,
+	message,
 	onConfirmation,
 }: LaunchConfirmationModalProps ) {
-	// Not wrapped in translation to avoid request unconfirmed copy
-	const modalTitle = 'You’re about to update your production site';
+	const modalTitle = translate( "You're about to launch this website" );
 
 	return (
-		<>
-			<Modal title={ modalTitle } onRequestClose={ closeModal }>
-				{ billingAgencyMessage && (
-					<p>
-						{ billingAgencyMessage }
-						<br />
-						Are you sure you want to proceed?
-					</p>
-				) }
-				<ActionButtons>
-					<Button
-						onClick={ () => {
-							closeModal();
-						} }
-					>
-						{ translate( 'Cancel' ) }
-					</Button>
-					<Button primary onClick={ onConfirmation }>
-						{ translate( 'Yes, launch site' ) }
-					</Button>
-				</ActionButtons>
-			</Modal>
-		</>
+		<Modal
+			className="site-settings__launch-confirmation-modal"
+			title={ modalTitle }
+			onRequestClose={ closeModal }
+		>
+			{ message && <p>{ message }</p> }
+			<p>{ translate( 'Ready to launch?' ) }</p>
+			<ActionButtons>
+				<Button
+					onClick={ () => {
+						closeModal();
+					} }
+				>
+					{ translate( 'Cancel' ) }
+				</Button>
+				<Button primary onClick={ onConfirmation }>
+					{ translate( 'Launch site' ) }
+				</Button>
+			</ActionButtons>
+		</Modal>
 	);
 }
diff --git a/client/my-sites/site-settings/site-visibility/launch-site.jsx b/client/my-sites/site-settings/site-visibility/launch-site.jsx
@@ -120,22 +120,40 @@ const LaunchSite = () => {
 		window.location.href = `https://agencies.automattic.com/marketplace/checkout?referral_blog_id=${ siteId }`;
 	};
 
-	// Not wrapped in translation to avoid request unconfirmed copy
-	const billingAgencyMessage =
-		agencyLoading || agencyError ? (
-			'Once launched, your agency {agench-name} will be billed for this website in the next billing cycle.'
-		) : (
-			<>
-				Once launched, <strong>{ agencyName }</strong> will be billed for this website in the next
-				billing cycle.
-			</>
-		);
+	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="https://agencieshelp.automattic.com/knowledge-base/the-marketplace/"
+									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',
+					}
+			  );
 
 	return (
 		<>
 			{ isLaunchConfirmationModalOpen && (
 				<LaunchConfirmationModal
-					billingAgencyMessage={ billingAgencyMessage }
+					message={ agencyBillingMessage }
 					closeModal={ closeLaunchConfirmationModal }
 					onConfirmation={ () => {
 						dispatchSiteLaunch();
@@ -157,37 +175,7 @@ const LaunchSite = () => {
 										"Your site hasn't been launched yet. It's private; only you can see it until it is launched."
 								  ) }
 						</p>
-						{ isDevelopmentSite && (
-							<i>
-								{ 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="https://agencieshelp.automattic.com/knowledge-base/the-marketplace/"
-															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',
-											}
-									  ) }
-							</i>
-						) }
+						{ isDevelopmentSite && <i>{ agencyBillingMessage }</i> }
 					</div>
 					<div className={ launchSiteClasses }>{ btnComponent }</div>
 					{ isDevelopmentSite && (

diff --git a/client/my-sites/site-settings/site-visibility/styles.scss b/client/my-sites/site-settings/site-visibility/styles.scss
@@ -13,3 +13,7 @@
 	margin-left: 20px;
 	white-space: nowrap;
 }
+
+.site-settings__launch-confirmation-modal {
+	max-width: 60%;
+}