diff --git a/modules/ppcp-onboarding/assets/css/onboarding.css b/modules/ppcp-onboarding/assets/css/onboarding.css index d72a61c7b..cf130bce7 100644 --- a/modules/ppcp-onboarding/assets/css/onboarding.css +++ b/modules/ppcp-onboarding/assets/css/onboarding.css @@ -61,15 +61,23 @@ ul.ppcp-onboarding-options-sublist { opacity: 0.6; } -.ppcp-onboarding-header { +#field-ppcp_onboarading_header > td, #field-ppcp_onboarading_options > td { + padding: 0; +} + +.ppcp-onboarding-header, .ppcp-onboarding-cards-options { display: flex; - width: 1100px; + width: 1200px; } .ppcp-onboarding-header-left, .ppcp-onboarding-header-right { flex: 50%; } +.ppcp-onboarding-header-right { + text-align: right; +} + .ppcp-onboarding-header h2 { margin-top: 0; } @@ -89,3 +97,29 @@ ul.ppcp-onboarding-options-sublist { .ppcp-onboarding-header-paypal-logos img { height: 32px; } + +.ppcp-onboarding-cards-options table { + margin-left: 35px; + margin-right: 15px; +} + +.ppcp-onboarding-cards-options table td { + padding-top: 2px; +} + +.ppcp-onboarding-cards-options table tr:not(:last-child) td { + padding-bottom: 0; +} + +.ppcp-onboarding-cards-options table tr td:first-child { + width: 350px; +} + +.ppcp-onboarding-cards-screen { + flex: 1; + align-self: center; +} + +.ppcp-onboarding-cards-screen img { + width: 100%; +} diff --git a/modules/ppcp-onboarding/assets/images/cards-screen-acdc.png b/modules/ppcp-onboarding/assets/images/cards-screen-acdc.png new file mode 100644 index 000000000..028012bb1 Binary files /dev/null and b/modules/ppcp-onboarding/assets/images/cards-screen-acdc.png differ diff --git a/modules/ppcp-onboarding/assets/images/cards-screen-basic.png b/modules/ppcp-onboarding/assets/images/cards-screen-basic.png new file mode 100644 index 000000000..106902102 Binary files /dev/null and b/modules/ppcp-onboarding/assets/images/cards-screen-basic.png differ diff --git a/modules/ppcp-onboarding/assets/js/onboarding.js b/modules/ppcp-onboarding/assets/js/onboarding.js index 4db2ad4ec..8f9d23692 100644 --- a/modules/ppcp-onboarding/assets/js/onboarding.js +++ b/modules/ppcp-onboarding/assets/js/onboarding.js @@ -144,6 +144,15 @@ function ppcp_onboarding_productionCallback(...args) { document.querySelectorAll(ppcpButtonSelectors.join()).forEach( element => element.style.display = !isExpress ? '' : 'none' ); + + const screemImg = document.querySelector('#ppcp-onboarding-cards-screen-img'); + if (screemImg) { + const currentRb = Array.from(document.querySelectorAll('#ppcp-onboarding-dcc-options input[type="radio"]')) + .filter(rb => rb.checked)[0] ?? null; + + const imgUrl = currentRb.getAttribute('data-screen-url'); + screemImg.src = imgUrl; + } }; const updateManualInputControls = (shown, isSandbox, isAnyEnvOnboarded) => { diff --git a/modules/ppcp-onboarding/services.php b/modules/ppcp-onboarding/services.php index 81e25ad31..fa3615851 100644 --- a/modules/ppcp-onboarding/services.php +++ b/modules/ppcp-onboarding/services.php @@ -214,7 +214,9 @@ return array( ); }, 'onboarding.render-options' => static function ( ContainerInterface $container ) : OnboardingOptionsRenderer { - return new OnboardingOptionsRenderer(); + return new OnboardingOptionsRenderer( + $container->get( 'onboarding.url' ) + ); }, 'onboarding.rest' => static function( $container ) : OnboardingRESTController { return new OnboardingRESTController( $container ); diff --git a/modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php b/modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php index d4ce12192..0c17be5d5 100644 --- a/modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php +++ b/modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php @@ -13,6 +13,22 @@ namespace WooCommerce\PayPalCommerce\Onboarding\Render; * Class OnboardingRenderer */ class OnboardingOptionsRenderer { + /** + * The module url. + * + * @var string + */ + private $module_url; + + /** + * OnboardingOptionsRenderer constructor. + * + * @param string $module_url The module url (for assets). + */ + public function __construct( string $module_url ) { + $this->module_url = $module_url; + } + /** * Renders the onboarding options. * @@ -23,7 +39,7 @@ class OnboardingOptionsRenderer {