Remove database confirmation checkbox when syncing Woo staging sites.

Automattic · Sep 30, 2024 · 39b2438 · 39b2438
1 parent b462b78
commit 39b2438
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 61 deletions.
diff --git a/client/hosting/staging-site/components/staging-site-card/card-content/staging-sync-card.tsx b/client/hosting/staging-site/components/staging-site-card/card-content/staging-sync-card.tsx
@@ -1,6 +1,7 @@
 import { FormLabel } from '@automattic/components';
+import { englishLocales } from '@automattic/i18n-utils';
 import styled from '@emotion/styled';
-import { translate, useTranslate } from 'i18n-calypso';
+import i18n, { translate, useTranslate } from 'i18n-calypso';
 import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import FormRadio from 'calypso/components/forms/form-radio';
@@ -58,7 +59,7 @@ const ConfirmationModalInputContainer = styled.div( {
 	marginBottom: '26px',
 } );
 
-const ConfirmationModalInputSiteSlug = styled.span( {
+const ConfirmationModalRedSpan = styled.span( {
 	color: '#D63638',
 } );
 
@@ -161,16 +162,12 @@ const StagingToProductionSync = ( {
 	showSyncPanel,
 	isSqlsOptionDisabled,
 	isSiteWooStore,
-	databaseSyncConfirmed,
-	setdatabaseSyncConfirmed,
 	isSqlSyncOptionChecked,
 }: {
 	disabled: boolean;
 	siteSlug: string;
 	isSyncInProgress: boolean;
 	onSelectItems: ( items: CheckboxOptionItem[] ) => void;
-	databaseSyncConfirmed: boolean;
-	setdatabaseSyncConfirmed: ( value: boolean ) => void;
 	selectedItems: CheckboxOptionItem[];
 	isSyncButtonDisabled: boolean;
 	onConfirm: () => void;
@@ -236,7 +233,22 @@ const StagingToProductionSync = ( {
 		],
 		[ translate ]
 	);
-
+	const syncWarningTranslation =
+		englishLocales.includes( i18n.getLocaleSlug() || 'en' ) ||
+		i18n.hasTranslation(
+			'{{span}}This site has WooCommerce installed.{{/span}} We do not recommend syncing or pushing data from a staging site to live production news sites or sites that use eCommerce plugins, such as WooCommerce, without proper planning and testing. Keep in mind that data on the destination site could have newer transactions, such as customers and orders, and would be lost when overwritten by the staging site’s data.'
+		)
+			? translate(
+					'{{span}}This site has WooCommerce installed.{{/span}} We do not recommend syncing or pushing data from a staging site to live production news sites or sites that use eCommerce plugins, such as WooCommerce, without proper planning and testing. Keep in mind that data on the destination site could have newer transactions, such as customers and orders, and would be lost when overwritten by the staging site’s data.',
+					{
+						components: {
+							span: <ConfirmationModalRedSpan />,
+						},
+					}
+			  )
+			: translate(
+					'We do not recommend syncing or pushing data from a staging site to live production news sites or sites that use eCommerce plugins, such as WooCommerce, without proper planning and testing. Keep in mind that data on the destination site could have newer transactions, such as customers and orders, and would be lost when overwritten by the staging site’s data.'
+			  );
 	return (
 		<>
 			{ showSyncPanel && (
@@ -248,10 +260,6 @@ const StagingToProductionSync = ( {
 						disabled={ disabled }
 						onChange={ onSelectItems }
 						isSqlsOptionDisabled={ isSqlsOptionDisabled }
-						databaseSyncConfirmed={ databaseSyncConfirmed }
-						setdatabaseSyncConfirmed={ setdatabaseSyncConfirmed }
-						isSiteWooStore={ !! isSiteWooStore }
-						isSqlSyncOptionChecked={ !! isSqlSyncOptionChecked }
 					></SyncOptionsPanel>
 				</>
 			) }
@@ -276,11 +284,7 @@ const StagingToProductionSync = ( {
 							{ isSiteWooStore && isSqlSyncOptionChecked && (
 								<SyncWarningContainer>
 									<SyncWarningTitle>{ translate( 'Warning:' ) }</SyncWarningTitle>
-									<SyncWarningContent>
-										{ translate(
-											'We do not recommend syncing or pushing data from a staging site to live production news sites or sites that use eCommerce plugins, such as WooCommerce, without proper planning and testing. Keep in mind that data on the destination site could have newer transactions, such as customers and orders, and would be lost when overwritten by the staging site’s data.'
-										) }
-									</SyncWarningContent>
+									<SyncWarningContent>{ syncWarningTranslation }</SyncWarningContent>
 								</SyncWarningContainer>
 							) }
 							<ConfirmationModalInputTitle>
@@ -289,7 +293,7 @@ const StagingToProductionSync = ( {
 										siteSlug: siteSlug as string,
 									},
 									components: {
-										span: <ConfirmationModalInputSiteSlug />,
+										span: <ConfirmationModalRedSpan />,
 									},
 								} ) }
 							</ConfirmationModalInputTitle>
@@ -475,7 +479,6 @@ export const SiteSyncCard = ( {
 		[] as CheckboxOptionItem[]
 	);
 	const [ selectedOption, setSelectedOption ] = useState< string | null >( null );
-	const [ databaseSyncConfirmed, setdatabaseSyncConfirmed ] = useState< boolean >( false );
 	const siteSlug = useSelector(
 		type === 'staging' ? ( state ) => getSiteSlug( state, productionSiteId ) : getSelectedSiteSlug
 	);
@@ -523,20 +526,10 @@ export const SiteSyncCard = ( {
 
 	const isSqlSyncOptionChecked = selectedItems.some( ( item ) => item.name === 'sqls' );
 
-	useEffect( () => {
-		if ( ! isSqlSyncOptionChecked && databaseSyncConfirmed ) {
-			setdatabaseSyncConfirmed( false );
-		}
-	}, [ isSqlSyncOptionChecked, databaseSyncConfirmed, setdatabaseSyncConfirmed ] );
-
-	const disallowWooCommerceSync =
-		isSiteWooStore && isSqlSyncOptionChecked && ! databaseSyncConfirmed;
-
 	const isSyncButtonDisabled =
 		disabled ||
 		( selectedItems.length === 0 && selectedOption === actionForType ) ||
-		selectedOption === null ||
-		disallowWooCommerceSync;
+		selectedOption === null;
 
 	let siteToSync: 'production' | 'staging' | null = null;
 	if ( targetSite ) {
@@ -618,8 +611,6 @@ export const SiteSyncCard = ( {
 					onConfirm={ selectedOption === 'push' ? onPushInternal : onPullInternal }
 					isSqlsOptionDisabled={ false }
 					isSiteWooStore={ isSiteWooStore }
-					databaseSyncConfirmed={ databaseSyncConfirmed }
-					setdatabaseSyncConfirmed={ setdatabaseSyncConfirmed }
 					isSqlSyncOptionChecked={ isSqlSyncOptionChecked }
 				/>
 			) }

diff --git a/client/hosting/staging-site/components/staging-site-card/sync-options-panel.tsx b/client/hosting/staging-site/components/staging-site-card/sync-options-panel.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { ToggleControl, CheckboxControl } from '@wordpress/components';
+import { ToggleControl } from '@wordpress/components';
 import { translate } from 'i18n-calypso';
 import { useState, useEffect, useMemo } from 'react';
 
@@ -21,11 +21,6 @@ const DangerousItemsTitle = styled.p( {
 	color: '#D63638',
 } );
 
-const WooCommerceOverwriteWarning = styled.p( {
-	color: '#D63638',
-	marginTop: '1.5em',
-} );
-
 const ToggleControlWithHelpMargin = styled( ToggleControl )( {
 	'.components-base-control__help': {
 		marginLeft: '44px',
@@ -69,20 +64,12 @@ export default function SyncOptionsPanel( {
 	disabled,
 	onChange,
 	isSqlsOptionDisabled,
-	isSiteWooStore,
-	databaseSyncConfirmed,
-	setdatabaseSyncConfirmed,
-	isSqlSyncOptionChecked,
 }: {
 	items: CheckboxOptionItem[];
 	reset: boolean;
 	disabled: boolean;
 	onChange: ( items: CheckboxOptionItem[] ) => void;
 	isSqlsOptionDisabled: boolean;
-	isSiteWooStore: boolean;
-	databaseSyncConfirmed: boolean;
-	isSqlSyncOptionChecked: boolean;
-	setdatabaseSyncConfirmed: ( value: boolean ) => void;
 } ) {
 	const initialItemsMap = useMemo(
 		() =>
@@ -198,22 +185,6 @@ export default function SyncOptionsPanel( {
 						</div>
 					);
 				} ) }
-				{ isSiteWooStore && (
-					<div>
-						<WooCommerceOverwriteWarning>
-							{ translate(
-								'This site has WooCommerce installed. All orders in the production database will be overwritten.'
-							) }
-						</WooCommerceOverwriteWarning>
-						<CheckboxControl
-							key="checkbox"
-							label={ translate( 'Confirm I want to proceed with database synchronization ' ) }
-							checked={ databaseSyncConfirmed }
-							disabled={ ! isSqlSyncOptionChecked }
-							onChange={ setdatabaseSyncConfirmed }
-						/>
-					</div>
-				) }
 			</DangerousItemsContainer>
 		</>
 	);