Add copies for incoming Staging Site Syncing for WooCommerce project. (…

…#94005)
Automattic · Aug 29, 2024 · 8553b2a · 8553b2a
1 parent ffa0ca1
commit 8553b2a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/client/my-sites/hosting/staging-site-card/card-content/new-staging-site-card-content.tsx b/client/my-sites/hosting/staging-site-card/card-content/new-staging-site-card-content.tsx
@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import { Button } from '@automattic/components';
 import { useHasEnTranslation } from '@automattic/i18n-utils';
 import { useTranslate } from 'i18n-calypso';
@@ -19,6 +20,7 @@ export const NewStagingSiteCardContent = ( {
 	{
 		const translate = useTranslate();
 		const hasEnTranslation = useHasEnTranslation();
+		const stagingSiteSyncWoo = config.isEnabled( 'staging-site-sync-woo' );
 
 		return (
 			<>
@@ -47,6 +49,23 @@ export const NewStagingSiteCardContent = ( {
 								}
 						  ) }
 				</HostingCardDescription>
+				{ stagingSiteSyncWoo && (
+					<div>
+						<p>{ translate( 'WooCommerce Site' ) }</p>
+						<p>
+							{ translate(
+								'Syncing staging database to production overwrites posts, pages, products and orders. {{a}}Learn more{{/a}}.',
+								{
+									components: {
+										a: (
+											<InlineSupportLink supportContext="hosting-staging-site" showIcon={ false } />
+										),
+									},
+								}
+							) }
+						</p>
+					</div>
+				) }
 				<Button primary disabled={ isButtonDisabled } onClick={ onAddClick }>
 					<span>{ translate( 'Add staging site' ) }</span>
 				</Button>

diff --git a/client/my-sites/hosting/staging-site-card/card-content/staging-sync-card.tsx b/client/my-sites/hosting/staging-site-card/card-content/staging-sync-card.tsx
@@ -1,3 +1,4 @@
+import config from '@automattic/calypso-config';
 import { FormLabel } from '@automattic/components';
 import styled from '@emotion/styled';
 import { translate, useTranslate } from 'i18n-calypso';
@@ -206,6 +207,9 @@ const StagingToProductionSync = ( {
 		],
 		[ translate ]
 	);
+
+	const stagingSiteSyncWoo = config.isEnabled( 'staging-site-sync-woo' );
+
 	return (
 		<>
 			{ showSyncPanel && (
@@ -239,6 +243,16 @@ const StagingToProductionSync = ( {
 									return <li key={ item.name }>{ item.label }</li>;
 								} ) }
 							</ConfirmationModalList>
+							{ stagingSiteSyncWoo && (
+								<div>
+									<p>{ translate( 'Warning' ) }</p>
+									<p>
+										{ 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.'
+										) }
+									</p>
+								</div>
+							) }
 							<ConfirmationModalInputTitle>
 								{ translate( "Enter your site's name {{span}}%(siteSlug)s{{/span}} to confirm.", {
 									args: {

diff --git a/client/my-sites/hosting/staging-site-card/sync-options-panel.tsx b/client/my-sites/hosting/staging-site-card/sync-options-panel.tsx
@@ -1,7 +1,9 @@
+import config from '@automattic/calypso-config';
 import styled from '@emotion/styled';
 import { ToggleControl } from '@wordpress/components';
 import { translate } from 'i18n-calypso';
 import { useState, useEffect, useMemo } from 'react';
+import InlineSupportLink from 'calypso/components/inline-support-link';
 
 const DangerousItemsContainer = styled.div( {
 	marginTop: '16px',
@@ -138,6 +140,8 @@ export default function SyncOptionsPanel( {
 		onChange( selectedItems );
 	}, [ optionItemsMap, onChange ] );
 
+	const stagingSiteSyncWoo = config.isEnabled( 'staging-site-sync-woo' );
+
 	return (
 		<>
 			{ nonDangerousItems.map( ( item ) => {
@@ -185,6 +189,23 @@ export default function SyncOptionsPanel( {
 						</div>
 					);
 				} ) }
+				{ stagingSiteSyncWoo && (
+					<div>
+						<p>
+							{ translate(
+								'This site has WooCommerce installed. All orders in the production database will be overwritten. {{a}}Learn more{{/a}}.',
+								{
+									components: {
+										a: (
+											<InlineSupportLink supportContext="hosting-staging-site" showIcon={ false } />
+										),
+									},
+								}
+							) }
+						</p>
+						<p>{ translate( 'Confirm I want to proceed with database synchronization ' ) }</p>
+					</div>
+				) }
 			</DangerousItemsContainer>
 		</>
 	);