♻️ Extract price description to custom component

This commit is contained in:
Philipp Stracker 2024-12-12 17:02:48 +01:00
parent e59ae23c43
commit 561f71f0b5
No known key found for this signature in database
3 changed files with 31 additions and 20 deletions

View file

@ -0,0 +1,27 @@
import { __, sprintf } from '@wordpress/i18n';
import { countryPriceInfo } from '../../utils/countryPriceInfo';
const PricingDescription = ( { country } ) => {
if ( ! countryPriceInfo[ country ] ) {
return null;
}
const label = 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 (
<p
className="ppcp-r-optional-payment-methods__description"
dangerouslySetInnerHTML={ { __html: label } }
/>
);
};
export default PricingDescription;

View file

@ -1,9 +1,8 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { countryPriceInfo } from '../../../utils/countryPriceInfo'; import PricingDescription from '../PricingDescription';
import AcdcFlow from './AcdcFlow'; import AcdcFlow from './AcdcFlow';
import BcdcFlow from './BcdcFlow'; import BcdcFlow from './BcdcFlow';
import { pricesBasedDescription } from './pricesBasedDescription';
const WelcomeDocs = ( { const WelcomeDocs = ( {
useAcdc, useAcdc,
@ -34,14 +33,7 @@ const WelcomeDocs = ( {
storeCurrency={ storeCurrency } storeCurrency={ storeCurrency }
/> />
) } ) }
{ storeCountry in countryPriceInfo && ( <PricingDescription country={ storeCountry } />
<p
className="ppcp-r-optional-payment-methods__description"
dangerouslySetInnerHTML={ {
__html: pricesBasedDescription,
} }
></p>
) }
</div> </div>
); );
}; };

View file

@ -5,8 +5,7 @@ import SelectBoxWrapper from '../../ReusableComponents/SelectBoxWrapper';
import SelectBox from '../../ReusableComponents/SelectBox'; import SelectBox from '../../ReusableComponents/SelectBox';
import { CommonHooks, OnboardingHooks } from '../../../data'; import { CommonHooks, OnboardingHooks } from '../../../data';
import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods'; import OptionalPaymentMethods from '../../ReusableComponents/OptionalPaymentMethods/OptionalPaymentMethods';
import { pricesBasedDescription } from '../../ReusableComponents/WelcomeDocs/pricesBasedDescription'; import PricingDescription from '../../ReusableComponents/PricingDescription';
import { countryPriceInfo } from '../../../utils/countryPriceInfo';
const OPM_RADIO_GROUP_NAME = 'optional-payment-methods'; const OPM_RADIO_GROUP_NAME = 'optional-payment-methods';
@ -60,14 +59,7 @@ const StepPaymentMethods = ( {} ) => {
type="radio" type="radio"
></SelectBox> ></SelectBox>
</SelectBoxWrapper> </SelectBoxWrapper>
{ storeCountry in countryPriceInfo && ( <PricingDescription country={ storeCountry } />
<p
className="ppcp-r-optional-payment-methods__description"
dangerouslySetInnerHTML={ {
__html: pricesBasedDescription,
} }
></p>
) }
</div> </div>
</div> </div>
); );