From 3fa823ee02f10b30a321c469a5d3c6be7ce1417c Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Thu, 21 Nov 2024 17:41:49 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Make=20Separator=20compone?=
 =?UTF-8?q?nt=20more=20generic?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_separator.scss       | 13 ++++++-
 .../screens/onboarding/_step-welcome.scss     |  8 ----
 .../ReusableComponents/Separator.js           | 38 +++++++++++--------
 .../Components/AdvancedOptionsForm.js         |  2 +-
 4 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss
index 84e3a1f19..8d64755fd 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_separator.scss
@@ -2,13 +2,22 @@
 	display: flex;
 	align-items: center;
 
+	&__space,
 	&__line {
-		height: 1px;
-		background-color: $color-gray-600;
+		margin: 0;
 		display: block;
 		width: 100%;
 	}
 
+	&__line {
+		background-color: $color-gray-600;
+		height: 1px;
+	}
+
+	&__space {
+		margin-bottom: 48px;
+	}
+
 	&__text {
 		color: $color-gray;
 		@include font(12, 24, 500, 0.8px);
diff --git a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss
index fec5f3483..f8fb42050 100644
--- a/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss
+++ b/modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss
@@ -20,14 +20,6 @@
 		margin: 0 0 16px 0;
 	}
 
-	.ppcp-r-page-welcome-mode-separator {
-		margin: 0 0 48px 0;
-
-		.ppcp-r-separator__line {
-			background-color: $color-gray-300;
-		}
-	}
-
 	.components-base-control__field {
 		margin: 0 0 24px 0;
 	}
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Separator.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Separator.js
index 8c6507b99..673e58bc8 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Separator.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Separator.js
@@ -1,24 +1,32 @@
-const Separator = ( props ) => {
-	let separatorClass = 'ppcp-r-separator';
+const Separator = ( { className = '', text = '', withLine = true } ) => {
+	const separatorClass = [ 'ppcp-r-separator' ];
+	const innerClass = withLine
+		? 'ppcp-r-separator__line'
+		: 'ppcp-r-separator__space';
 
-	if ( props?.className ) {
-		separatorClass += ' ' + props.className;
+	if ( className ) {
+		separatorClass.push( className );
 	}
 
-	if ( props.text ) {
-		return (
-			<div className={ separatorClass }>
-				<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span>
+	const getClass = ( type ) => `${ innerClass } ${ innerClass }--${ type }`;
 
-				<span className="ppcp-r-separator__text">{ props.text }</span>
-				<span className="ppcp-r-separator__line ppcp-r-separator__line--after"></span>
-			</div>
-		);
-	}
+	const renderSeparator = () => {
+		if ( text ) {
+			return (
+				<>
+					<span className={ getClass( 'before' ) }></span>
+					<span className="ppcp-r-separator__text">{ text }</span>
+					<span className={ getClass( 'after' ) }></span>
+				</>
+			);
+		}
+
+		return <span className={ getClass( 'full' ) }></span>;
+	};
 
 	return (
-		<div className={ separatorClass }>
-			<span className="ppcp-r-separator__line ppcp-r-separator__line--before"></span>
+		<div className={ separatorClass.join( ' ' ) }>
+			{ renderSeparator() }
 		</div>
 	);
 };
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
index db3775e59..acc78af72 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Components/AdvancedOptionsForm.js
@@ -122,7 +122,7 @@ const AdvancedOptionsForm = ( { setCompleted } ) => {
 					{ __( 'Connect Account', 'woocommerce-paypal-payments' ) }
 				</Button>
 			</SettingsToggleBlock>
-			<Separator className="ppcp-r-page-welcome-mode-separator" />
+			<Separator withLine={ false } />
 			<SettingsToggleBlock
 				label={
 					__( 'Manually Connect', 'woocommerce-paypal-payments' ) +