From 47294ca5308dff015df7e4d9104784d0372413ce Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Tue, 21 Jan 2025 18:57:36 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Organize=20some=20reusable?=
 =?UTF-8?q?=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ReusableComponents/Elements/Action.js     |  5 ++
 .../ReusableComponents/Elements/Content.js    | 16 ++++
 .../Elements/ContentWrapper.js                |  5 ++
 .../Elements/Description.js                   | 26 ++++++
 .../ReusableComponents/Elements/Header.js     | 12 +++
 .../Elements/SupplementaryLabel.js            |  7 ++
 .../ReusableComponents/Elements/Title.js      | 21 +++++
 .../Elements/TitleWrapper.js                  |  5 ++
 .../ReusableComponents/Elements/index.js      |  8 ++
 .../{SettingsBlocks => }/SettingsBlock.js     |  0
 .../SettingsBlocks/AccordionSettingsBlock.js  | 10 +--
 .../SettingsBlocks/ButtonSettingsBlock.js     |  5 +-
 .../SettingsBlocks/FeatureSettingsBlock.js    |  7 +-
 .../SettingsBlocks/InputSettingsBlock.js      |  9 +--
 .../SettingsBlocks/PaymentMethodItemBlock.js  |  5 +-
 .../SettingsBlocks/PaymentMethodsBlock.js     |  2 +-
 .../SettingsBlocks/RadioSettingsBlock.js      |  4 +-
 .../SettingsBlocks/SelectSettingsBlock.js     |  5 +-
 .../SettingsBlocks/SettingsBlockElements.js   | 81 -------------------
 .../SettingsBlocks/ToggleSettingsBlock.js     |  4 +-
 .../SettingsBlocks/index.js                   | 12 ---
 .../ReusableComponents/SettingsCard.js        |  2 +-
 .../Blocks/Troubleshooting/HooksTableBlock.js |  7 +-
 .../Troubleshooting/ResubscribeBlock.js       |  7 +-
 .../Blocks/Troubleshooting/SimulationBlock.js |  3 +-
 .../Blocks/Troubleshooting/Troubleshooting.js |  7 +-
 .../Components/Settings/Blocks/OrderIntent.js |  6 +-
 .../Settings/Blocks/SavePaymentMethods.js     |  6 +-
 .../Components/Settings/ExpertSettings.js     |  2 +-
 .../Styling/Layout/StylingSection.js          |  4 +-
 30 files changed, 152 insertions(+), 141 deletions(-)
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Action.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Content.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/ContentWrapper.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Description.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Header.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/SupplementaryLabel.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Title.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleWrapper.js
 create mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/index.js
 rename modules/ppcp-settings/resources/js/Components/ReusableComponents/{SettingsBlocks => }/SettingsBlock.js (100%)
 delete mode 100644 modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js

diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Action.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Action.js
new file mode 100644
index 000000000..3e5075503
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Action.js
@@ -0,0 +1,5 @@
+const Action = ( { children } ) => (
+	<div className="ppcp-r-settings-block__action">{ children }</div>
+);
+
+export default Action;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Content.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Content.js
new file mode 100644
index 000000000..3f829a587
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Content.js
@@ -0,0 +1,16 @@
+import classNames from 'classnames';
+
+const Content = ( { children, className = '', id = '' } ) => {
+	const elementClasses = classNames(
+		'ppcp-r-settings-card__content',
+		className
+	);
+
+	return (
+		<div id={ id } className={ elementClasses }>
+			{ children }
+		</div>
+	);
+};
+
+export default Content;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/ContentWrapper.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/ContentWrapper.js
new file mode 100644
index 000000000..b35a5f9b1
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/ContentWrapper.js
@@ -0,0 +1,5 @@
+const ContentWrapper = ( { children } ) => (
+	<div className="ppcp-r-settings-card__content-wrapper">{ children }</div>
+);
+
+export default ContentWrapper;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Description.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Description.js
new file mode 100644
index 000000000..1d638015d
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Description.js
@@ -0,0 +1,26 @@
+import classNames from 'classnames';
+
+const Description = ( { children, asHtml = false, className = '' } ) => {
+	// Don't output anything if description is empty.
+	if ( ! children ) {
+		return null;
+	}
+
+	const elementClasses = classNames(
+		'ppcp-r-settings-block__description',
+		className
+	);
+
+	if ( ! asHtml ) {
+		return <span className={ elementClasses }>{ children }</span>;
+	}
+
+	return (
+		<span
+			className={ elementClasses }
+			dangerouslySetInnerHTML={ { __html: children } }
+		/>
+	);
+};
+
+export default Description;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Header.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Header.js
new file mode 100644
index 000000000..f767b603e
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Header.js
@@ -0,0 +1,12 @@
+import classNames from 'classnames';
+
+const Header = ( { children, className = '' } ) => {
+	const elementClasses = classNames(
+		'ppcp-r-settings-block__header',
+		className
+	);
+
+	return <div className={ elementClasses }>{ children }</div>;
+};
+
+export default Header;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/SupplementaryLabel.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/SupplementaryLabel.js
new file mode 100644
index 000000000..8d513a275
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/SupplementaryLabel.js
@@ -0,0 +1,7 @@
+const SupplementaryLabel = ( { children } ) => (
+	<span className="ppcp-r-settings-block__supplementary-title-label">
+		{ children }
+	</span>
+);
+
+export default SupplementaryLabel;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Title.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Title.js
new file mode 100644
index 000000000..3885d5af4
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/Title.js
@@ -0,0 +1,21 @@
+import classNames from 'classnames';
+
+const Title = ( {
+	children,
+	altStyle = false,
+	big = false,
+	className = '',
+} ) => {
+	const elementClasses = classNames(
+		'ppcp-r-settings-block__title',
+		className,
+		{
+			'style-alt': altStyle,
+			'style-big': big,
+		}
+	);
+
+	return <span className={ elementClasses }>{ children }</span>;
+};
+
+export default Title;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleWrapper.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleWrapper.js
new file mode 100644
index 000000000..d3f55186e
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/TitleWrapper.js
@@ -0,0 +1,5 @@
+const TitleWrapper = ( { children } ) => (
+	<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
+);
+
+export default TitleWrapper;
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/index.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/index.js
new file mode 100644
index 000000000..13c677050
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/index.js
@@ -0,0 +1,8 @@
+export { default as Action } from './Action';
+export { default as Content } from './Content';
+export { default as ContentWrapper } from './ContentWrapper';
+export { default as Description } from './Description';
+export { default as Header } from './Header';
+export { default as SupplementaryLabel } from './SupplementaryLabel';
+export { default as Title } from './Title';
+export { default as TitleWrapper } from './TitleWrapper';
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js
similarity index 100%
rename from modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlock.js
rename to modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlock.js
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
index cf7f2cee4..630afc267 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js
@@ -1,12 +1,6 @@
 import Accordion from '../AccordionSection';
-import SettingsBlock from './SettingsBlock';
-import {
-	Header,
-	Title,
-	Action,
-	Description,
-	TitleWrapper,
-} from './SettingsBlockElements';
+import SettingsBlock from '../SettingsBlock';
+import { Header, Title, Action, Description, TitleWrapper } from '../Elements';
 
 const SettingsAccordion = ( { title, description, children, ...props } ) => (
 	<SettingsBlock { ...props } className="ppcp-r-settings-block__accordion">
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
index eabdde934..42bc832ed 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
@@ -1,6 +1,7 @@
 import { Button } from '@wordpress/components';
-import SettingsBlock from './SettingsBlock';
-import { Action, Description, Header, Title } from './SettingsBlockElements';
+
+import SettingsBlock from '../SettingsBlock';
+import { Action, Description, Header, Title } from '../Elements';
 
 const ButtonSettingsBlock = ( { title, description, ...props } ) => (
 	<SettingsBlock { ...props } className="ppcp-r-settings-block__button">
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
index 3f747bda7..8144e30c1 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/FeatureSettingsBlock.js
@@ -1,6 +1,7 @@
 import { Button } from '@wordpress/components';
-import SettingsBlock from './SettingsBlock';
-import { Header, Title, Action, Description } from './SettingsBlockElements';
+
+import { Header, Title, Action, Description } from '../Elements';
+import SettingsBlock from '../SettingsBlock';
 import TitleBadge from '../TitleBadge';
 
 const FeatureSettingsBlock = ( { title, description, ...props } ) => {
@@ -24,7 +25,7 @@ const FeatureSettingsBlock = ( { title, description, ...props } ) => {
 			<Button
 				className={ button.class ? button.class : '' }
 				key={ button.text }
-                isBusy={ props.actionProps?.isBusy }
+				isBusy={ props.actionProps?.isBusy }
 				variant={ button.type }
 				onClick={ button.onClick }
 			>
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
index f43069973..dbea5589c 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
@@ -1,12 +1,7 @@
 import { TextControl } from '@wordpress/components';
 
-import SettingsBlock from './SettingsBlock';
-import {
-	Title,
-	Action,
-	Description,
-	SupplementaryLabel,
-} from './SettingsBlockElements';
+import SettingsBlock from '../SettingsBlock';
+import { Title, Action, Description, SupplementaryLabel } from '../Elements';
 
 const InputSettingsBlock = ( {
 	title,
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
index cf26431a3..315366c55 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodItemBlock.js
@@ -1,7 +1,10 @@
 import { ToggleControl } from '@wordpress/components';
-import SettingsBlock from './SettingsBlock';
+
+import SettingsBlock from '../SettingsBlock';
 import PaymentMethodIcon from '../PaymentMethodIcon';
 import data from '../../../utils/data';
+
+// TODO: A reusable component should not depend external data. Change this to a prop.
 import { hasSettings } from '../../Screens/Overview/TabSettingsElements/Blocks/PaymentMethods';
 
 const PaymentMethodItemBlock = ( {
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
index 1e1e9ee30..1b36d25e9 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/PaymentMethodsBlock.js
@@ -1,4 +1,4 @@
-import SettingsBlock from './SettingsBlock';
+import SettingsBlock from '../SettingsBlock';
 import PaymentMethodItemBlock from './PaymentMethodItemBlock';
 import { usePaymentMethods } from '../../../data/payment/hooks';
 
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js
index 44270d874..c1562dfff 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js
@@ -1,5 +1,5 @@
-import SettingsBlock from './SettingsBlock';
-import { Header, Title, Description } from './SettingsBlockElements';
+import SettingsBlock from '../SettingsBlock';
+import { Header, Title, Description } from '../Elements';
 import { PayPalRdbWithContent } from '../Fields';
 
 const RadioSettingsBlock = ( {
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
index 5436d0921..e67cc6f76 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SelectSettingsBlock.js
@@ -1,7 +1,8 @@
 import Select, { components } from 'react-select';
+
 import data from '../../../utils/data';
-import SettingsBlock from './SettingsBlock';
-import { Title, Action, Description } from './SettingsBlockElements';
+import SettingsBlock from '../SettingsBlock';
+import { Title, Action, Description } from '../Elements';
 
 const DEFAULT_ELEMENT_ORDER = [ 'title', 'action', 'description' ];
 
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js
deleted file mode 100644
index 46048e071..000000000
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import classNames from 'classnames';
-
-// Block Elements
-export const Title = ( {
-	children,
-	altStyle = false,
-	big = false,
-	className = '',
-} ) => {
-	const elementClasses = classNames(
-		'ppcp-r-settings-block__title',
-		className,
-		{
-			'style-alt': altStyle,
-			'style-big': big,
-		}
-	);
-
-	return <span className={ elementClasses }>{ children }</span>;
-};
-
-export const TitleWrapper = ( { children } ) => (
-	<span className="ppcp-r-settings-block__title-wrapper">{ children }</span>
-);
-
-export const SupplementaryLabel = ( { children } ) => (
-	<span className="ppcp-r-settings-block__supplementary-title-label">
-		{ children }
-	</span>
-);
-
-export const Description = ( { children, asHtml = false, className = '' } ) => {
-	// Don't output anything if description is empty.
-	if ( ! children ) {
-		return null;
-	}
-
-	const elementClasses = classNames(
-		'ppcp-r-settings-block__description',
-		className
-	);
-
-	if ( ! asHtml ) {
-		return <span className={ elementClasses }>{ children }</span>;
-	}
-
-	return (
-		<span
-			className={ elementClasses }
-			dangerouslySetInnerHTML={ { __html: children } }
-		/>
-	);
-};
-
-export const Action = ( { children } ) => (
-	<div className="ppcp-r-settings-block__action">{ children }</div>
-);
-
-export const Header = ( { children, className = '' } ) => (
-	<div className={ `ppcp-r-settings-block__header ${ className }`.trim() }>
-		{ children }
-	</div>
-);
-
-// Card Elements
-export const Content = ( { children, className = '', id = '' } ) => {
-	const elementClasses = classNames(
-		'ppcp-r-settings-card__content',
-		className
-	);
-
-	return (
-		<div id={ id } className={ elementClasses }>
-			{ children }
-		</div>
-	);
-};
-
-export const ContentWrapper = ( { children } ) => (
-	<div className="ppcp-r-settings-card__content-wrapper">{ children }</div>
-);
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js
index b66536b00..644cbf9b8 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js
@@ -1,6 +1,6 @@
 import { ToggleControl } from '@wordpress/components';
-import SettingsBlock from './SettingsBlock';
-import { Header, Title, Action, Description } from './SettingsBlockElements';
+import SettingsBlock from '../SettingsBlock';
+import { Header, Title, Action, Description } from '../Elements';
 
 const ToggleSettingsBlock = ( { title, description, ...props } ) => (
 	<SettingsBlock { ...props } className="ppcp-r-settings-block__toggle">
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
index 80a5db448..cb06265c4 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/index.js
@@ -1,4 +1,3 @@
-export { default as SettingsBlock } from './SettingsBlock';
 export { default as ButtonSettingsBlock } from './ButtonSettingsBlock';
 export { default as InputSettingsBlock } from './InputSettingsBlock';
 export { default as SelectSettingsBlock } from './SelectSettingsBlock';
@@ -7,14 +6,3 @@ export { default as ToggleSettingsBlock } from './ToggleSettingsBlock';
 export { default as RadioSettingsBlock } from './RadioSettingsBlock';
 export { default as PaymentMethodsBlock } from './PaymentMethodsBlock';
 export { default as PaymentMethodItemBlock } from './PaymentMethodItemBlock';
-
-export {
-	Title,
-	TitleWrapper,
-	SupplementaryLabel,
-	Description,
-	Action,
-	Content,
-	ContentWrapper,
-	Header,
-} from './SettingsBlockElements';
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
index f209daec1..265655a21 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsCard.js
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 
-import { Content, ContentWrapper } from './SettingsBlocks';
+import { Content, ContentWrapper } from './Elements';
 
 const SettingsCard = ( {
 	id,
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js
index 5a057023c..5e1b335f3 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/HooksTableBlock.js
@@ -1,9 +1,8 @@
 import { __ } from '@wordpress/i18n';
+
 import { CommonHooks } from '../../../../../../data';
-import {
-	SettingsBlock,
-	Title,
-} from '../../../../../ReusableComponents/SettingsBlocks';
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
+import { Title } from '../../../../../ReusableComponents/Elements';
 
 const HooksTableBlock = () => {
 	const { webhooks } = CommonHooks.useWebhooks();
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js
index c309681bc..84493edac 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/ResubscribeBlock.js
@@ -1,9 +1,10 @@
-import { useState } from '@wordpress/element';
-import { STORE_NAME } from '../../../../../../data/common';
-import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { store as noticesStore } from '@wordpress/notices';
+
+import { STORE_NAME } from '../../../../../../data/common';
+import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
 import {
 	NOTIFICATION_ERROR,
 	NOTIFICATION_SUCCESS,
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js
index 075113ddf..dcc237459 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/SimulationBlock.js
@@ -1,8 +1,9 @@
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
 import { useDispatch } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+
+import { ButtonSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
 import { CommonHooks } from '../../../../../../data';
 import {
 	NOTIFICATION_ERROR,
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js
index 4dc0d1fc6..749a4525e 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting.js
@@ -1,12 +1,15 @@
 import { __ } from '@wordpress/i18n';
+
 import {
-	AccordionSettingsBlock,
 	Description,
 	Header,
 	Title,
+} from '../../../../../ReusableComponents/Elements';
+import {
+	AccordionSettingsBlock,
 	ToggleSettingsBlock,
 } from '../../../../../ReusableComponents/SettingsBlocks';
-import SettingsBlock from '../../../../../ReusableComponents/SettingsBlocks/SettingsBlock';
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
 
 import SimulationBlock from './SimulationBlock';
 import ResubscribeBlock from './ResubscribeBlock';
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js
index dcb518682..51d52e823 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/OrderIntent.js
@@ -1,11 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import {
 	Header,
-	SettingsBlock,
 	Title,
 	Description,
-	ToggleSettingsBlock,
-} from '../../../../../ReusableComponents/SettingsBlocks';
+} from '../../../../../ReusableComponents/Elements';
+import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
 import { SettingsHooks } from '../../../../../../data';
 
 const OrderIntent = () => {
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SavePaymentMethods.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SavePaymentMethods.js
index dbb46ae43..8d0329de4 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SavePaymentMethods.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/SavePaymentMethods.js
@@ -1,11 +1,11 @@
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	Header,
-	SettingsBlock,
-	ToggleSettingsBlock,
 	Title,
 	Description,
-} from '../../../../../ReusableComponents/SettingsBlocks';
+} from '../../../../../ReusableComponents/Elements';
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
+import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
 import { SettingsHooks } from '../../../../../../data';
 
 const SavePaymentMethods = () => {
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js
index e28132beb..a762f7eff 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ExpertSettings.js
@@ -3,7 +3,7 @@ import SettingsCard from '../../../../ReusableComponents/SettingsCard';
 import {
 	Content,
 	ContentWrapper,
-} from '../../../../ReusableComponents/SettingsBlocks';
+} from '../../../../ReusableComponents/Elements';
 import ConnectionDetails from '../../../Overview/TabSettingsElements/Blocks/ConnectionDetails';
 import Troubleshooting from '../../../Overview/TabSettingsElements/Blocks/Troubleshooting/Troubleshooting';
 import PaypalSettings from '../../../Overview/TabSettingsElements/Blocks/PaypalSettings';
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js
index b9fefc52e..7bb04895b 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Styling/Layout/StylingSection.js
@@ -1,10 +1,10 @@
-import SettingsBlock from '../../../../../ReusableComponents/SettingsBlocks/SettingsBlock';
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
 import {
 	Description,
 	Header,
 	Title,
 	Content,
-} from '../../../../../ReusableComponents/SettingsBlocks';
+} from '../../../../../ReusableComponents/Elements';
 
 const StylingSection = ( {
 	title,