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

Add the superscript element

Browse source
This commit is contained in:
Narek Zakarian 2024-11-05 19:21:01 +04:00
parent 749ce8b3f2
commit 0caf433965
No known key found for this signature in database
GPG key ID: 07AFD7E7A9C164A7
3 changed files with 41 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -86,6 +86,7 @@
}
.ppcp-r-welcome-docs {
margin: 0 0 48px 0;
&__title {
text-align: center;
@ -93,10 +94,21 @@
margin: 0 0 32px 0;
}
&__description {
text-align: center;
@include font(14, 22, 400);
font-style: italic;
a {
color: $color-gray-700;
}
}
&__wrapper {
display: flex;
justify-content: center;
padding: 8px;
margin: 0 0 48px 0;
}
&__col {

7
modules/ppcp-settings/resources/js/Components/ReusableComponents/TitleBadge.js
View file

@ -1,6 +1,11 @@
const TitleBadge = ( { text, type } ) => {
const className = 'ppcp-r-title-badge ' + `ppcp-r-title-badge--${ type }`;
return <span className={ className }>{ text }</span>;
return <span
className={ className }
dangerouslySetInnerHTML={{
__html: text,
}}
></span>;
};
export const TITLE_BADGE_POSITIVE = 'positive';

31
modules/ppcp-settings/resources/js/Components/Screens/Onboarding/StepWelcome.js
View file

@ -79,6 +79,15 @@ const WelcomeFeatures = () => {
);
};
const WelcomeDocs = () => {
const pricesBasedDescription = sprintf(
// translators: %s: Link to PayPal REST application guide
__(
'<sup>1</sup>Prices based on domestic transactions as of October 25th, 2024. <a target="_blank" href="%s">Click here</a> for full pricing details.',
'woocommerce-paypal-payments'
),
'https://woocommerce.com/document/woocommerce-paypal-payments/#manual-credential-input '
)
return (
<div className="ppcp-r-welcome-docs">
<h2 className="ppcp-r-welcome-docs__title">{__(`Want to know more about PayPal Payments?`, 'woocommerce-paypal-payments')}</h2>
@ -86,14 +95,16 @@ const WelcomeDocs = () => {
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={__('PayPal Checkout', 'woocommerce-paypal-payments')}
titleType = {BADGE_BOX_TITLE_BIG}
textBadge={__('from 3.49% + $0.49 USD1', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={__(
'Our all-in-one checkout solution lets you offer PayPal, Venmo, Pay Later options, and more to help maximise conversion',
'woocommerce-paypal-payments'
)}
/>
<BadgeBox title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')} titleType = {BADGE_BOX_TITLE_BIG}/>
<BadgeBox
title={__('Included in PayPal Checkout', 'woocommerce-paypal-payments')}
titleType={BADGE_BOX_TITLE_BIG}/>
<BadgeBox
title={__('Pay with PayPal', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-paypal.svg']}
@ -149,13 +160,13 @@ const WelcomeDocs = () => {
<div className="ppcp-r-welcome-docs__col">
<BadgeBox
title={__('Optional payment methods', 'woocommerce-paypal-payments')}
titleType = {BADGE_BOX_TITLE_BIG}
titleType={BADGE_BOX_TITLE_BIG}
description={__('with additional application', 'woocommerce-paypal-payments')}
/>
<BadgeBox
title={__('Custom Card Fields', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-visa.svg', 'icon-button-mastercard.svg', 'icon-button-amex.svg', 'icon-button-discover.svg']}
textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')}
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(
@ -169,7 +180,7 @@ const WelcomeDocs = () => {
<BadgeBox
title={__('Digital Wallets', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-apple-pay.svg', 'icon-button-google-pay.svg']}
textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')}
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(
@ -183,7 +194,7 @@ const WelcomeDocs = () => {
<BadgeBox
title={__('Alternative Payment Methods', 'woocommerce-paypal-payments')}
imageBadge={['icon-button-sepa.svg', 'icon-button-ideal.svg', 'icon-button-blik.svg', 'icon-button-bancontact.svg']}
textBadge={__('from 3.49% + $0.49 USD1', 'woocommerce-paypal-payments')}
textBadge={__('from 3.49% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(
@ -197,7 +208,7 @@ const WelcomeDocs = () => {
<BadgeBox
title={__('', 'woocommerce-paypal-payments')}
imageBadge={['icon-payment-method-fastlane-small.svg']}
textBadge={__('from 2.59% + $0.49 USD1', 'woocommerce-paypal-payments')}
textBadge={__('from 2.59% + $0.49 USD<sup>1</sup>', 'woocommerce-paypal-payments')}
description={sprintf(
// translators: %s: Link to PayPal REST application guide
__(
@ -209,6 +220,10 @@ const WelcomeDocs = () => {
/>
</div>
</div>
<p
className="ppcp-r-welcome-docs__description"
dangerouslySetInnerHTML={ { __html: pricesBasedDescription, } }
></p>
</div>
);
};