feat(TestRun): add success page animation

components/test-run-page/index.php

@@ -20,7 +20,7 @@
 				<?php vrts()->icon( 'arrow-down' ); ?>
 			</div>
 		<?php else : ?>
-			<?php vrts()->component( 'test-run-empty' ); ?>
+			<?php vrts()->component( 'test-run-success' ); ?>
 		<?php endif; ?>
 	</div>
 </vrts-test-run-page>

components/test-run-success/_style.scss

@@ -0,0 +1,37 @@
+.vrts-test-run-success {
+	display: block;
+	padding: 50px 20px;
+	border-top: 0;
+
+	&__inner {
+		margin-bottom: 1.5rem;
+		max-width: 600px;
+		margin-inline: auto;
+	}
+
+	&__lottie-player {
+		position: relative;
+		pointer-events: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		aspect-ratio: 10 / 8;
+		margin-top: calc(100% / (10 / 8) * 0.3 * -1);
+
+		svg {
+			position: absolute;
+			inset: 0;
+		}
+	}
+
+	&__content {
+		text-align: center;
+		margin-top: calc(100% / (10 / 8) * 0.3 * -1);
+
+		p {
+			font-size: 16px;
+			font-weight: 600;
+			margin: 0;
+		}
+	}
+}

components/test-run-success/index.php

@@ -0,0 +1,9 @@
+<vrts-test-run-success class="vrts-test-run-success postbox">
+	<div class="vrts-test-run-success__inner">
+		<div class="vrts-test-run-success__lottie-player" vrts-lottie-player></div>
+		<div class="vrts-test-run-success__content">
+			<p><?php esc_html_e( 'Smooth sailing – no changes found!', 'visual-regression-tests' ); ?></p>
+			<p><?php esc_html_e( "You're good to go.", 'visual-regression-tests' ); ?></p>
+		</div>
+	</div>
+</vrts-test-run-success>

components/test-run-success/script.js

@@ -0,0 +1,32 @@
+import lottie from 'lottie-web/build/player/lottie_light';
+
+class VrtsTestRunSuccess extends window.HTMLElement {
+	constructor() {
+		super();
+		this.resolveElements();
+	}
+
+	resolveElements() {
+		this.$lottiePlayer = this.querySelector( '[vrts-lottie-player]' );
+	}
+
+	connectedCallback() {
+		this.lottieAnimation = lottie.loadAnimation( {
+			path: `${ window.vrts_admin_vars.pluginUrl }/assets/animations/success-check.json`,
+			container: this.$lottiePlayer,
+			renderer: 'svg',
+			loop: false,
+			autoplay: true,
+		} );
+	}
+
+	disconnectedCallback() {
+		this.lottieAnimation.destroy();
+	}
+
+	loaAnimation() {
+		this.$lottiePlayer.play();
+	}
+}
+
+window.customElements.define( 'vrts-test-run-success', VrtsTestRunSuccess );

includes/features/class-enqueue-scripts.php

@@ -52,6 +52,7 @@ public function enqueue_scripts() {
 				[
 					'rest_url' => esc_url_raw( rest_url( 'vrts/v1' ) ),
 					'rest_nonce' => wp_create_nonce( 'wp_rest' ),
+					'pluginUrl' => vrts()->get_plugin_url(),
 					'currentUserId' => get_current_user_id(),
 					'onboarding' => apply_filters( 'vrts_onboarding', null ),
 				]

package.json

@@ -42,7 +42,8 @@
 		"a11y-dialog": "^8.1.1",
 		"dompurify": "^3.1.7",
 		"driver.js": "^1.3.1",
-		"iframe-resizer": "4.3"
+		"iframe-resizer": "4.3",
+		"lottie-web": "^5.12.2"
 	},
 	"devDependencies": {
 		"@wordpress/scripts": "^30.2.0",