woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-05 08:59:14 +08:00
Code Issues Projects Packages Wiki Activity Actions 7

Update onboarding options UI

Browse source
This commit is contained in:
Alex P 2022-02-22 09:04:25 +02:00
parent a6d7bb1069
commit f6446f5ced
6 changed files with 169 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

38
modules/ppcp-onboarding/assets/css/onboarding.css
View file

@ -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%;
}

BIN
modules/ppcp-onboarding/assets/images/cards-screen-acdc.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 83 KiB

BIN
modules/ppcp-onboarding/assets/images/cards-screen-basic.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 89 KiB

9
modules/ppcp-onboarding/assets/js/onboarding.js
View file

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

4
modules/ppcp-onboarding/services.php
View file

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

131
modules/ppcp-onboarding/src/Render/OnboardingOptionsRenderer.php
View file

@ -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 {
<ul class="ppcp-onboarding-options">
<li>
<label><input type="checkbox" disabled checked> ' .
__( 'Accept PayPal, Venmo, Pay Later and local payment methods', 'woocommerce-paypal-payments' ) . '
__( 'Enable PayPal Payments — includes PayPal, Venmo, Pay Later — with fraud protection', 'woocommerce-paypal-payments' ) . '
</label>
</li>
<li>
@ -44,27 +60,122 @@ class OnboardingOptionsRenderer {
$items = array();
if ( $is_shop_supports_dcc ) {
$items[] = '
$dcc_table_rows = array(
$this->render_table_row(
__( 'Credit & Debit Card form fields', 'woocommerce-paypal-payments' ),
__( 'Customizable user experience', 'woocommerce-paypal-payments' )
),
$this->render_table_row(
__( 'Credit & Debit Card pricing', 'woocommerce-paypal-payments' ),
__( '2.59% + $0.49', 'woocommerce-paypal-payments' )
),
$this->render_table_row(
__( 'Seller Protection', 'woocommerce-paypal-payments' ),
__( 'Yes', 'woocommerce-paypal-payments' ),
__( 'On eligible PayPal transactions', 'woocommerce-paypal-payments' )
),
$this->render_table_row(
__( 'Advanced Fraud Protection', 'woocommerce-paypal-payments' ),
__( 'Yes', 'woocommerce-paypal-payments' )
),
$this->render_table_row(
__( 'Chargeback Protection', 'woocommerce-paypal-payments' ),
__( 'Yes', 'woocommerce-paypal-payments' ),
__( 'Extra 0.4% per transaction', 'woocommerce-paypal-payments' )
),
$this->render_table_row(
__( 'Additional Vetting and Underwriting Required', 'woocommerce-paypal-payments' ),
__( 'Yes', 'woocommerce-paypal-payments' )
),
$this->render_table_row(
__( 'Seller Account Type', 'woocommerce-paypal-payments' ),
__( 'Business', 'woocommerce-paypal-payments' )
),
);
$items[] = '
<li>
<label><input type="radio" id="ppcp-onboarding-dcc-acdc" name="ppcp_onboarding_dcc" value="acdc" checked> ' .
__( 'Advanced credit and debit card processing', 'woocommerce-paypal-payments' ) . '*<br/> ' .
__( '(With advanced fraud protection and fully customizable card fields)', 'woocommerce-paypal-payments' ) . '
<span class="ppcp-muted-text">*' . __( 'Additional onboarding steps required', 'woocommerce-paypal-payments' ) . '</span>
<label><input type="radio" id="ppcp-onboarding-dcc-acdc" name="ppcp_onboarding_dcc" value="acdc" checked ' .
'data-screen-url="' . $this->get_screen_url( 'acdc' ) . '"> ' .
__( 'Advanced Card Processing', 'woocommerce-paypal-payments' ) . '
</label>
<table>
' . implode( '', $dcc_table_rows ) . '
</table>
</li>';
}
$items[] = '
$basic_table_rows = array(
$this->render_table_row(
__( 'Credit & Debit Card form fields', 'woocommerce-paypal-payments' ),
__( 'Prebuilt user experience', 'woocommerce-paypal-payments' )
),
$this->render_table_row(
__( 'Credit & Debit Card pricing', 'woocommerce-paypal-payments' ),
__( '3.49% + $0.49', 'woocommerce-paypal-payments' )
),
$this->render_table_row(
__( 'Seller Protection', 'woocommerce-paypal-payments' ),
__( 'Yes', 'woocommerce-paypal-payments' ),
__( 'On eligible PayPal transactions', 'woocommerce-paypal-payments' )
),
$this->render_table_row(
__( 'Seller Account Type', 'woocommerce-paypal-payments' ),
__( 'Business or Personal', 'woocommerce-paypal-payments' )
),
);
$items[] = '
<li ' . ( ! $is_shop_supports_dcc ? 'style="display: none;"' : '' ) . '>
<label><input type="radio" id="ppcp-onboarding-dcc-basic" name="ppcp_onboarding_dcc" value="basic" ' .
( ! $is_shop_supports_dcc ? 'checked' : '' ) .
' data-screen-url="' . $this->get_screen_url( 'basic' ) . '"' .
'> ' .
__( 'Standard credit and debit card processing', 'woocommerce-paypal-payments' ) . '
__( 'Standard Card Processing', 'woocommerce-paypal-payments' ) . '
</label>
<table>
' . implode( $basic_table_rows ) . '
</table>
</li>';
return '<ul id="ppcp-onboarding-dcc-options" class="ppcp-onboarding-options-sublist">' .
return '
<div class="ppcp-onboarding-cards-options">
<ul id="ppcp-onboarding-dcc-options" class="ppcp-onboarding-options-sublist">' .
implode( '', $items ) .
'</ul>';
'
</ul>
<div class="ppcp-onboarding-cards-screen">' .
( $is_shop_supports_dcc ? '<img id="ppcp-onboarding-cards-screen-img" />' : '' ) . '
</div>
</div>';
}
/**
* Returns HTML of a row for the cards options tables.
*
* @param string $header The text in the first cell.
* @param string $value The text in the second cell.
* @param string $note The additional description text, such as about conditions.
* @return string
*/
private function render_table_row( string $header, string $value, string $note = '' ): string {
$value_html = $value;
if ( $note ) {
$value_html .= '<br/><span class="ppcp-muted-text">' . $note . '</span>';
}
return "
<tr>
<td>$header</td>
<td>$value_html</td>
</tr>";
}
/**
* Returns the screen image URL.
*
* @param string $key The image suffix, 'acdc' or 'basic'.
* @return string
*/
private function get_screen_url( string $key ): string {
return untrailingslashit( $this->module_url ) . "/assets/images/cards-screen-$key.png";
}
}