Merge pull request #3587 from woocommerce/PCP-5053-display-help-center-section

Display help center section (5053)

Author: Dinamiko

modules/ppcp-settings/resources/css/components/_reusable.scss

@@ -5,6 +5,7 @@
 @import './reusable-components/button';
 @import './reusable-components/elements';
 @import './reusable-components/fields';
+@import './reusable-components/help-section';
 @import './reusable-components/navigation';
 @import './reusable-components/onboarding-header';
 @import './reusable-components/payment-method-icons';

modules/ppcp-settings/resources/css/components/reusable-components/_help-section.scss

@@ -0,0 +1,5 @@
+/* The help section at the bottom of post pages */
+.ppcp-r-tab-overview-help {
+	--block-header-gap: 8px;
+	--card-gap-top: 24px;
+}

modules/ppcp-settings/resources/css/components/reusable-components/_settings-card.scss

@@ -29,7 +29,7 @@ $width_gap: 24px;
 
 	display: var(--card-layout);
 	gap: var(--card-gap);
-	margin: 0 0 var(--card-gap) 0;
+	margin: var(--card-gap-top, 0) 0 var(--card-gap) 0;
 
 	.ppcp-r-settings-card__header {
 		display: var(--card-layout);

modules/ppcp-settings/resources/css/components/screens/_settings.scss

@@ -164,10 +164,6 @@
 	--block-header-gap: 12px;
 }
 
-.ppcp-r-tab-overview-help {
-	--block-header-gap: 8px;
-}
-
 .ppcp-r-settings-block__feature {
 	.ppcp--action-buttons {
 		display: flex;

modules/ppcp-settings/resources/css/components/screens/onboarding/_step-welcome.scss

@@ -28,6 +28,7 @@
 
 	.onboarding-advanced-options {
 		margin-top: 24px;
+		margin-bottom: 48px;
 		max-width: 800px;
 
 		.ppcp--toggler .ppcp--title-wrapper {

modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Overview/Help/Help.js renamed to modules/ppcp-settings/resources/js/Components/ReusableComponents/HelpSection.js

@@ -1,12 +1,9 @@
 import { __ } from '@wordpress/i18n';
-import { FeatureSettingsBlock } from '../../../../../ReusableComponents/SettingsBlocks';
-import {
-	Content,
-	ContentWrapper,
-} from '../../../../../ReusableComponents/Elements';
-import SettingsCard from '../../../../../ReusableComponents/SettingsCard';
+import { FeatureSettingsBlock } from './SettingsBlocks';
+import { Content, ContentWrapper } from './Elements';
+import SettingsCard from './SettingsCard';
 
-const Help = () => {
+const HelpSection = () => {
 	return (
 		<SettingsCard
 			className="ppcp-r-tab-overview-help"
@@ -69,4 +66,4 @@ const Help = () => {
 	);
 };
 
-export default Help;
+export default HelpSection;

modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Steps/StepWelcome.js

@@ -6,6 +6,7 @@ import { Separator } from '../../../ReusableComponents/Elements';
 import Accordion from '../../../ReusableComponents/AccordionSection';
 import { CommonHooks, OnboardingHooks } from '../../../../data';
 import BusyStateWrapper from '../../../ReusableComponents/BusyStateWrapper';
+import HelpSection from '../../../ReusableComponents/HelpSection';
 import OnboardingHeader from '../Components/OnboardingHeader';
 import WelcomeDocs from '../Components/WelcomeDocs';
 import AdvancedOptionsForm from '../Components/AdvancedOptionsForm';
@@ -88,6 +89,7 @@ const StepWelcome = ( { setStep, currentStep } ) => {
 			>
 				<AdvancedOptionsForm />
 			</Accordion>
+			<HelpSection />
 		</div>
 	);
 };

modules/ppcp-settings/resources/js/Components/Screens/Settings/Tabs/TabOverview.js

@@ -1,7 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import Todos from '../Components/Overview/Todos/Todos';
 import Features from '../Components/Overview/Features/Features';
-import Help from '../Components/Overview/Help/Help';
 import { TodosHooks, CommonHooks, FeaturesHooks } from '../../../../data';
 import SpinnerOverlay from '../../../ReusableComponents/SpinnerOverlay';
 import usePaymentGatewaySync from '../../../../hooks/usePaymentGatewaySync';
@@ -37,7 +36,6 @@ const TabOverview = () => {
 		>
 			<Todos />
 			<Features />
-			<Help />
 		</div>
 	);
 };

modules/ppcp-settings/resources/js/Components/Screens/Settings/index.js

@@ -1,4 +1,5 @@
 import Container from '../../ReusableComponents/Container';
+import HelpSection from '../../ReusableComponents/HelpSection';
 import SettingsNavigation from './Components/Navigation';
 import { getSettingsTabs } from './Tabs';
 
@@ -13,7 +14,10 @@ const SettingsScreen = ( { activePanel, setActivePanel } ) => {
 				activePanel={ activePanel }
 				setActivePanel={ setActivePanel }
 			/>
-			<Container page="settings">{ Component }</Container>
+			<Container page="settings">
+				{ Component }
+				<HelpSection />
+			</Container>
 		</>
 	);
 };