initial

wp-content/plugins/visual-regression-tests/editor/components/metabox-notifications/index.js

@@ -0,0 +1,156 @@
+import { __, sprintf } from '@wordpress/i18n';
+import { select } from '@wordpress/data';
+import DOMPurify from 'dompurify';
+
+const NotificationNewTestAdded = ( {} ) => {
+	return (
+		<>
+			<div className="vrts-metabox-notice vrts-metabox-notice-is-success">
+				<p>
+					<strong>
+						{ __(
+							'You have added a new test',
+							'visual-regression-tests'
+						) }
+					</strong>
+				</p>
+				<p
+					dangerouslySetInnerHTML={ {
+						__html: DOMPurify.sanitize(
+							sprintf(
+								/* translators: %s name of the page */
+								__(
+									'The Visual Regression Test for the page %s has been added!',
+									'visual-regression-tests'
+								),
+								'<strong>' +
+									select(
+										'core/editor'
+									).getEditedPostAttribute( 'title' ) +
+									'</strong>'
+							)
+						),
+					} }
+				></p>
+			</div>
+		</>
+	);
+};
+
+const NotificationUnlockMoreTests = ( {
+	upgradeUrl = '',
+	remainingTests = 0,
+	totalTests = 0,
+} ) => {
+	return (
+		<>
+			<div className="vrts-metabox-notice vrts-metabox-notice-is-info">
+				<p>
+					<strong>
+						{ __( 'Unlock more tests', 'visual-regression-tests' ) }
+					</strong>
+				</p>
+				<p
+					dangerouslySetInnerHTML={ {
+						__html: DOMPurify.sanitize(
+							sprintf(
+								'%1$s %2$s',
+								sprintf(
+									/* translators: %1$s, %2$s: number of tests. */
+									__(
+										'Good work! You have added %1$s of %2$s available tests.',
+										'visual-regression-tests'
+									),
+									totalTests - remainingTests,
+									totalTests
+								),
+								sprintf(
+									/* translators: %1$s, %2$s: link wrapper. */
+									__(
+										'Upgrade %1$shere%2$s to add more tests to your website!',
+										'visual-regression-tests'
+									),
+									`<a href="${ upgradeUrl }" target="_blank">`,
+									'</a>'
+								)
+							)
+						),
+					} }
+				></p>
+			</div>
+		</>
+	);
+};
+
+const NotificationUpgradeRequired = ( { upgradeUrl = '' } ) => {
+	return (
+		<>
+			<div className="vrts-metabox-notice vrts-metabox-notice-is-error">
+				<p>
+					<strong>
+						{ __(
+							'Ready for an Upgrade?',
+							'visual-regression-tests'
+						) }
+					</strong>
+				</p>
+				<p
+					dangerouslySetInnerHTML={ {
+						__html: DOMPurify.sanitize(
+							sprintf(
+								'%1$s <a href="%2$s" target="_blank" title="%3$s">%3$s</a>',
+								__(
+									'Looks like you need a bigger plan to add more tests.',
+									'visual-regression-tests'
+								),
+								upgradeUrl,
+								__( 'Upgrade here!', 'visual-regression-tests' )
+							)
+						),
+					} }
+				></p>
+			</div>
+		</>
+	);
+};
+
+const NotificationConnectionFailed = ( { pluginUrl = '' } ) => {
+	return (
+		<>
+			<div className="vrts-metabox-notice vrts-metabox-notice-is-error">
+				<p>
+					<strong>
+						{ __( 'Connection failed', 'visual-regression-tests' ) }
+					</strong>
+				</p>
+				<p>
+					{ __(
+						'Something went wrong while trying to connect to the external service.',
+						'visual-regression-tests'
+					) }
+				</p>
+				<p
+					dangerouslySetInnerHTML={ {
+						__html: DOMPurify.sanitize(
+							sprintf(
+								'<a href="%1$s" title="%2$s">%2$s</a>',
+								pluginUrl,
+								__(
+									'Go to plugin page',
+									'visual-regression-tests'
+								)
+							)
+						),
+					} }
+				></p>
+			</div>
+		</>
+	);
+};
+
+export {
+	NotificationNewTestAdded,
+	NotificationUnlockMoreTests,
+	NotificationUpgradeRequired,
+	NotificationConnectionFailed,
+};