Merge pull request #3044 from woocommerce/PCP-4136-replace-invalid-an…

…d-missing-urls

Replace invalid and missing URLs (4136)

modules/ppcp-settings/resources/css/components/reusable-components/_badge-box.scss

@@ -1,21 +1,14 @@
 .ppcp-r-badge-box {
 	margin: 0 0 8px 0;
 
-	&__title {
+	.ppcp-r-badge-box__title {
 		@include font(14, 20, 700);
 		display: block;
 		margin: 0 0 8px 0;
 
 		.ppcp-r-badge-box__title-text {
+			@include font(16, 28, 700);
 			color: #000;
-
-			&--big {
-				@include font(16, 28, 700);
-			}
-
-			&--small {
-				vertical-align: text-bottom;
-			}
 		}
 
 		.ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge {
@@ -27,25 +20,32 @@
 				height: 24px;
 			}
 		}
+	}
 
-		&--has-image-badge .ppcp-r-title-badge--info {
-			display: block;
-			margin: 6px 0 0 0;
-			width: fit-content;
-		}
+	.ppcp-r-badge-box__title--has-image-badge .ppcp-r-title-badge--info {
+		display: block;
+		margin: 6px 0 0 0;
+		width: fit-content;
+	}
+
+	.components-button.is-tertiary {
+		padding: 0;
+		margin: 0 0 0 4px;
+		height: 1em;
+	}
+
+	@media screen and (max-width: 480px) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+		flex-direction: column;
 
-		@media screen and (max-width: 480px) {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			gap: 8px;
-			flex-direction: column;
+		.ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge {
+			margin: 0;
 
-			.ppcp-r-badge-box__title-text:not(:empty) + .ppcp-r-badge-box__title-image-badge {
+			img:first-of-type {
 				margin: 0;
-				img:first-of-type {
-					margin: 0;
-				}
 			}
 		}
 	}

modules/ppcp-settings/resources/css/components/screens/onboarding/_step-payment-methods.scss

@@ -6,33 +6,31 @@
 	}
 }
 
-.ppcp-r-optional-payment-methods {
-	&__wrapper {
-		.ppcp-r-badge-box {
-			margin: 0 0 24px 0;
-			&:last-child {
-				margin: 0;
-			}
-		}
+.ppcp-r-optional-payment-methods__wrapper {
+	.ppcp-r-badge-box {
+		margin: 0 0 24px 0;
 
-		.ppcp-r-badge-box__description {
-			margin: 12px 0 0 0;
-			@include font(14, 20, 400);
+		&:last-child {
+			margin: 0;
 		}
 	}
 
-	&__description {
-		margin: 32px 0 0 0;
-		text-align: center;
-		@include font(14, 22, 400);
-		font-style: italic;
-
-		a {
-			color: $color-gray-700;
-		}
+	.ppcp-r-badge-box__description {
+		margin: 12px 0 0 0;
 	}
+}
 
-	&__separator {
-		margin: 0 0 24px 0;
+.ppcp-r-optional-payment-methods__description {
+	@include font(14, 22, 400);
+	margin: 32px 0 0 0;
+	text-align: center;
+	font-style: italic;
+
+	a {
+		color: $color-gray-700;
 	}
 }
+
+.ppcp-r-optional-payment-methods__separator {
+	margin: 0 0 24px 0;
+}

modules/ppcp-settings/resources/js/Components/ReusableComponents/BadgeBox.js

@@ -1,3 +1,4 @@
+import { LearnMore } from './Elements';
 import { PPIcon } from './Icons';
 
 const ImageBadge = ( { images } ) => {
@@ -20,30 +21,37 @@ const ImageBadge = ( { images } ) => {
 	);
 };
 
-// If `children` is not empty, it's output and wrapped in spaces.
+// If `children` is not empty, the `children` prop is output and wrapped in spaces.
 const BadgeContent = ( { children } ) => {
 	if ( ! children ) {
 		return null;
 	}
 	return <> { children } </>;
 };
 
+const BadgeDescription = ( { description, learnMoreLink } ) => {
+	if ( ! description && ! learnMoreLink ) {
+		return null;
+	}
+
+	return (
+		<div className="ppcp-r-badge-box__description">
+			<p className="ppcp-r-badge-box__description">
+				{ description }
+				<LearnMore url={ learnMoreLink } />
+			</p>
+		</div>
+	);
+};
+
 const BadgeBox = ( {
 	title,
 	textBadge,
 	imageBadge = [],
-	titleType = BADGE_BOX_TITLE_BIG,
 	description = '',
+	learnMoreLink = '',
 } ) => {
-	let titleSize = BADGE_BOX_TITLE_SMALL;
-	if ( BADGE_BOX_TITLE_BIG === titleType ) {
-		titleSize = BADGE_BOX_TITLE_BIG;
-	}
-
-	const titleTextClassName =
-		'ppcp-r-badge-box__title-text ' +
-		`ppcp-r-badge-box__title-text--${ titleSize }`;
-
+	const titleTextClassName = 'ppcp-r-badge-box__title-text';
 	const titleBaseClassName = 'ppcp-r-badge-box__title';
 	const titleClassName = imageBadge.length
 		? `${ titleBaseClassName } ppcp-r-badge-box__title--has-image-badge`
@@ -57,20 +65,13 @@ const BadgeBox = ( {
 				<ImageBadge images={ imageBadge } />
 				<BadgeContent>{ textBadge }</BadgeContent>
 			</span>
-			<div className="ppcp-r-badge-box__description">
-				{ description && (
-					<p
-						className="ppcp-r-badge-box__description"
-						dangerouslySetInnerHTML={ {
-							__html: description,
-						} }
-					></p>
-				) }
-			</div>
+
+			<BadgeDescription
+				description={ description }
+				learnMoreLink={ learnMoreLink }
+			/>
 		</div>
 	);
 };
 
-export const BADGE_BOX_TITLE_BIG = 'big';
-export const BADGE_BOX_TITLE_SMALL = 'small';
 export default BadgeBox;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/LearnMore.js

@@ -0,0 +1,16 @@
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+
+const LearnMore = ( { url } ) => {
+	if ( ! url || '#' === url ) {
+		return null;
+	}
+
+	return (
+		<Button href={ url } variant="tertiary" target="_blank">
+			{ __( 'Learn more', 'woocommerce-paypal-payments' ) }
+		</Button>
+	);
+};
+
+export default LearnMore;

modules/ppcp-settings/resources/js/Components/ReusableComponents/Elements/index.js

@@ -7,7 +7,8 @@ export { default as Content } from './Content';
 export { default as ContentWrapper } from './ContentWrapper';
 export { default as Description } from './Description';
 export { default as Header } from './Header';
+export { default as LearnMore } from './LearnMore';
+export { default as Separator } from './Separator';
 export { default as Title } from './Title';
 export { default as TitleExtra } from './TitleExtra';
 export { default as TitleWrapper } from './TitleWrapper';
-export { default as Separator } from './Separator';