+
);
}
diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/container.js b/modules/ppcp-settings/resources/js/components/reusable-components/container.js
new file mode 100644
index 000000000..b52058d79
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/components/reusable-components/container.js
@@ -0,0 +1,5 @@
+const Container = ( props ) => {
+ return { props.children }
;
+};
+
+export default Container;
diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/onboarding-header.js b/modules/ppcp-settings/resources/js/components/reusable-components/onboarding-header.js
new file mode 100644
index 000000000..aa2730053
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/components/reusable-components/onboarding-header.js
@@ -0,0 +1,25 @@
+import data from '../../utils/data';
+
+const OnboardingHeader = ( props ) => {
+ return (
+
+
+
+ { data().getImage( 'logo-paypal.svg' ) }
+
+
+
+ + { props.title } +
+ { props.description && ( ++ { props.description } +
+ ) } +
+
+ );
+};
+
+export default PaymentMethodIcons;
diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/separator.js b/modules/ppcp-settings/resources/js/components/reusable-components/separator.js
new file mode 100644
index 000000000..8c6507b99
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/components/reusable-components/separator.js
@@ -0,0 +1,26 @@
+const Separator = ( props ) => {
+ let separatorClass = 'ppcp-r-separator';
+
+ if ( props?.className ) {
+ separatorClass += ' ' + props.className;
+ }
+
+ if ( props.text ) {
+ return (
+
+
+
+ { props.text }
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default Separator;
diff --git a/modules/ppcp-settings/resources/js/components/reusable-components/settings-toggle-block.js b/modules/ppcp-settings/resources/js/components/reusable-components/settings-toggle-block.js
new file mode 100644
index 000000000..96706e444
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/components/reusable-components/settings-toggle-block.js
@@ -0,0 +1,43 @@
+import { useState } from '@wordpress/element';
+import { ToggleControl } from '@wordpress/components';
+
+const SettingsToggleBlock = ( props ) => {
+ const [ isToggled, setToggled ] = useState( false );
+
+ return (
+
+
+ );
+};
+
+export default SettingsToggleBlock;
diff --git a/modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js b/modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js
new file mode 100644
index 000000000..8bf6ca02d
--- /dev/null
+++ b/modules/ppcp-settings/resources/js/components/screens/onboarding/onboarding.js
@@ -0,0 +1,14 @@
+import Container from '../../reusable-components/container';
+import StepWelcome from './step-welcome.js';
+
+const Onboarding = () => {
+ return (
+
+
+ { props.children && isToggled && (
+
+ { props?.label && (
+
+ { props.label }
+
+ ) }
+ { props?.description && (
+
+ ) }
+
+
+ {
+ setToggled( newValue );
+ } }
+ />
+
+
+ { props.children }
+
+ ) }
+
+
+
+
+ );
+};
+
+const WelcomeFeatures = () => {
+ return (
+
+
+
+
+ );
+};
+
+const WelcomeForm = () => {
+ const advancedUsersDescription = sprintf(
+ // translators: %s: Link to PayPal REST application guide
+ __(
+ 'For advanced users: Connect a custom PayPal REST app for full control over your integration. For more information on creating a PayPal REST application, click here.',
+ 'woocommerce-paypal-payments'
+ ),
+ '#'
+ );
+
+ return (
+ <>
+
+ { __( 'Deposits', 'woocommerce-paypal-payments' ) }
+
+ { __( 'Instant', 'woocommerce-paypal-payments' ) }
+
+
+ { __( 'Payment Capture', 'woocommerce-paypal-payments' ) }
+
+
+ + { __( + 'Authorize only or Capture', + 'woocommerce-paypal-payments' + ) } +
+
+
+ { __(
+ 'Recurring payments',
+ 'woocommerce-paypal-payments'
+ ) }
+
+
+ { __( 'Supported', 'woocommerce-paypal-payments' ) }
+