♻️ Organize some reusable components

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;

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;

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;

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;

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;

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;

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;

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;

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';

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/AccordionSettingsBlock.js

@@ -1,12 +1,6 @@
 import Accordion from '../AccordionSection';
-import SettingsBlock from './SettingsBlock';
+import SettingsBlock from '../SettingsBlock';
-import {
+import { Header, Title, Action, Description, TitleWrapper } from '../Elements';
-	Header,
-	Title,
-	Action,
-	Description,
-	TitleWrapper,
-} from './SettingsBlockElements';
 
 const SettingsAccordion = ( { title, description, children, ...props } ) => (
 	<SettingsBlock { ...props } className="ppcp-r-settings-block__accordion">

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">

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 }
 			>

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js

@@ -1,12 +1,7 @@
 import { TextControl } from '@wordpress/components';
 
-import SettingsBlock from './SettingsBlock';
+import SettingsBlock from '../SettingsBlock';
-import {
+import { Title, Action, Description, SupplementaryLabel } from '../Elements';
-	Title,
-	Action,
-	Description,
-	SupplementaryLabel,
-} from './SettingsBlockElements';
 
 const InputSettingsBlock = ( {
 	title,

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 = ( {

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';
 

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/RadioSettingsBlock.js

@@ -1,5 +1,5 @@
-import SettingsBlock from './SettingsBlock';
+import SettingsBlock from '../SettingsBlock';
-import { Header, Title, Description } from './SettingsBlockElements';
+import { Header, Title, Description } from '../Elements';
 import { PayPalRdbWithContent } from '../Fields';
 
 const RadioSettingsBlock = ( {

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 SettingsBlock from '../SettingsBlock';
-import { Title, Action, Description } from './SettingsBlockElements';
+import { Title, Action, Description } from '../Elements';
 
 const DEFAULT_ELEMENT_ORDER = [ 'title', 'action', 'description' ];
 

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/SettingsBlockElements.js

@@ -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>
-);

modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ToggleSettingsBlock.js

@@ -1,6 +1,6 @@
 import { ToggleControl } from '@wordpress/components';
-import SettingsBlock from './SettingsBlock';
+import SettingsBlock from '../SettingsBlock';
-import { Header, Title, Action, Description } from './SettingsBlockElements';
+import { Header, Title, Action, Description } from '../Elements';
 
 const ToggleSettingsBlock = ( { title, description, ...props } ) => (
 	<SettingsBlock { ...props } className="ppcp-r-settings-block__toggle">

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';

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,

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 {
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
-	SettingsBlock,
+import { Title } from '../../../../../ReusableComponents/Elements';
-	Title,
-} from '../../../../../ReusableComponents/SettingsBlocks';
 
 const HooksTableBlock = () => {
 	const { webhooks } = CommonHooks.useWebhooks();

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,

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,

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';

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/Elements';
-} from '../../../../../ReusableComponents/SettingsBlocks';
+import { ToggleSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
+import SettingsBlock from '../../../../../ReusableComponents/SettingsBlock';
 import { SettingsHooks } from '../../../../../../data';
 
 const OrderIntent = () => {

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 = () => {

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';

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,