Update/unowned section to list (#41312)

* Add redbubble and notice when paid plan is missing plugin(s). * Add activate-multiple-plugins endpoint & logic. * Delay last-backup-failed red-bubble until 30 min after purchase. Also fix $not_shown_products. * Refactor how we derive shown_products & not_shown_products. * Cleanup & add GlobalNotice after successfull activation/installation. * Remove single product endpoints from mj REST_Products. * Update unowned section to list * changelog * Remove filter : * Add text domain for dataviews * Remove print statement * Add missing text domain package" * Update lockfile * Fix package versions * Fix bug where hook was being used in a loop * Memoize fields to avoid CTA 'jumping' * Add filter for dataview list (#41483) * Add filter for dataview list * Add changelog * Update filter styling * Change how category label is capitlized * Styling tweaks * Update lockfile --------- Co-authored-by: Bryan Elliott <[email protected]>
Automattic · Feb 7, 2025 · 263930e · 263930e
1 parent 1ca4244
commit 263930e
Show file tree

Hide file tree

Showing 48 changed files with 837 additions and 27 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/packages/my-jetpack/_inc/components/action-button/index.tsx b/projects/packages/my-jetpack/_inc/components/action-button/index.tsx
@@ -138,7 +138,7 @@ const ActionButton: FC< ActionButtonProps > = ( {
 		installStandalonePlugin();
 	}, [ slug, installStandalonePlugin, recordEvent, tracksIdentifier ] );
 
-	const getStatusAction = useCallback( (): SecondaryButtonProps => {
+	const statusAction: SecondaryButtonProps = useMemo( () => {
 		switch ( status ) {
 			case PRODUCT_STATUSES.ABSENT: {
 				const buttonText = __( 'Learn more', 'jetpack-my-jetpack' );
@@ -322,9 +322,8 @@ const ActionButton: FC< ActionButtonProps > = ( {
 	] );
 
 	const allActions = useMemo(
-		() =>
-			hasAdditionalActions ? [ ...additionalActions, getStatusAction() ] : [ getStatusAction() ],
-		[ additionalActions, getStatusAction, hasAdditionalActions ]
+		() => ( hasAdditionalActions ? [ ...additionalActions, statusAction ] : [ statusAction ] ),
+		[ additionalActions, statusAction, hasAdditionalActions ]
 	);
 
 	const recordDropdownStateChange = useCallback( () => {
@@ -374,7 +373,7 @@ const ActionButton: FC< ActionButtonProps > = ( {
 	const dropdown = hasAdditionalActions && (
 		<div ref={ dropdownRef } className={ styles[ 'action-button-dropdown' ] }>
 			<ul className={ styles[ 'dropdown-menu' ] }>
-				{ [ ...additionalActions, getStatusAction() ].map( ( { label, isExternalLink }, index ) => {
+				{ [ ...additionalActions, statusAction ].map( ( { label, isExternalLink }, index ) => {
 					const onDropdownMenuItemClick = () => {
 						setCurrentAction( allActions[ index ] );
 						setIsDropdownOpen( false );

diff --git a/projects/packages/my-jetpack/_inc/components/product-card/index.tsx b/projects/packages/my-jetpack/_inc/components/product-card/index.tsx
@@ -19,7 +19,7 @@ import type { FC, MouseEventHandler, ReactNode, MouseEvent } from 'react';
 export type ProductCardProps = {
 	children?: ReactNode;
 	name: string;
-	Description: FC;
+	Description: FC | string;
 	admin: boolean;
 	recommendation?: boolean;
 	isDataLoading?: boolean;

diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/all.ts b/projects/packages/my-jetpack/_inc/components/product-cards-section/all.ts
@@ -36,6 +36,7 @@ export const JetpackModuleToProductCard: {
 	extras: null,
 	scan: null,
 	creator: null,
+	'brute-force': null,
 	// Features:
 	newsletter: NewsletterCard,
 	'related-posts': RelatedPostsCard,

diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/index.tsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/index.tsx
@@ -1,9 +1,10 @@
 import { Container, Col, Text, AdminSectionHero } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { PRODUCT_SLUGS } from '../../data/constants';
 import useProductsByOwnership from '../../data/products/use-products-by-ownership';
 import { getMyJetpackWindowInitialState } from '../../data/utils/get-my-jetpack-window-state';
+import ProductsTableView from '../products-table-view';
 import StatsSection from '../stats-section';
 import AiCard from './ai-card';
 import AntiSpamCard from './anti-spam-card';
@@ -27,19 +28,7 @@ type DisplayItemType = Record<
 	// 'jetpack-ai' is the official slug for the AI module, so we also exclude 'ai'.
 	// The backend still supports the 'ai' slug, so it is part of the JetpackModule type.
 	// Related-posts, newsletter, and site-accelerator are features, not products.
-	Exclude<
-		JetpackModule,
-		| 'extras'
-		| 'scan'
-		| 'security'
-		| 'ai'
-		| 'creator'
-		| 'growth'
-		| 'complete'
-		| 'site-accelerator'
-		| 'newsletter'
-		| 'related-posts'
-	>,
+	JetpackModuleWithCard,
 	FC< { admin: boolean } >
 >;
 
@@ -115,15 +104,27 @@ const ProductCardsSection: FC< ProductCardsSectionProps > = ( { noticeMessage }
 			: __( 'Discover all Jetpack Products', 'jetpack-my-jetpack' );
 	}, [ ownedProducts.length ] );
 
-	const filterProducts = ( products: JetpackModule[] ) => {
-		const productsWithNoCard = [ 'scan', 'security', 'growth', 'extras', 'complete' ];
+	const filterProducts = useCallback( ( products: JetpackModule[] ) => {
+		const productsWithNoCard = [
+			'extras',
+			'scan',
+			'security',
+			'ai',
+			'creator',
+			'growth',
+			'complete',
+			'site-accelerator',
+			'newsletter',
+			'related-posts',
+			'brute-force',
+		];
 		return products.filter( product => {
 			if ( productsWithNoCard.includes( product ) ) {
 				return false;
 			}
 			return true;
 		} );
-	};
+	}, [] );
 
 	const filteredOwnedProducts = filterProducts( ownedProducts );
 	const filteredUnownedProducts = filterProducts( unownedProducts );
@@ -150,8 +151,7 @@ const ProductCardsSection: FC< ProductCardsSectionProps > = ( { noticeMessage }
 						<Col sm={ 4 } md={ 8 } lg={ 12 } className={ styles.cardListTitle }>
 							<Text variant="headline-small">{ unownedSectionTitle }</Text>
 						</Col>
-
-						<DisplayItems slugs={ filteredUnownedProducts } />
+						<ProductsTableView products={ filteredUnownedProducts } />
 					</Col>
 				</Container>
 			) }

diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/constants.ts b/projects/packages/my-jetpack/_inc/components/products-table-view/constants.ts
@@ -0,0 +1,5 @@
+export const PRODUCT_TABLE_TITLE = 'title';
+export const PRODUCT_TABLE_STATUS = 'status';
+export const PRODUCT_TABLE_CATEGORY = 'category';
+export const PRODUCT_TABLE_DESCRIPTION = 'description';
+export const PRODUCT_TABLE_ICON = 'icon';
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/anti-spam.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/anti-spam.tsx
@@ -0,0 +1,37 @@
+const AntiSpamIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<g clipPath="url(#clip0_4668_7926)">
+			<path
+				d="M34.214 21.6924L40.7619 38.9784C41.3267 40.4574 42.1943 40.9935 43.6778 41.1189C43.732 41.1213 43.7851 41.1349 43.8339 41.1588C43.8827 41.1828 43.926 41.2164 43.9613 41.2578C43.9966 41.2992 44.023 41.3474 44.039 41.3995C44.055 41.4516 44.0602 41.5063 44.0543 41.5605C44.0565 41.6164 44.0476 41.6722 44.0282 41.7247C44.0087 41.7771 43.9791 41.8252 43.9411 41.866C43.903 41.9069 43.8572 41.9398 43.8064 41.9628C43.7556 41.9858 43.7008 41.9985 43.6451 42.0001H36.473C36.415 42.0015 36.3574 41.9911 36.3035 41.9695C36.2496 41.948 36.2007 41.9157 36.1596 41.8746C36.1185 41.8335 36.0861 41.7845 36.0643 41.7305C36.0426 41.6765 36.032 41.6187 36.0331 41.5605C36.0288 41.504 36.0363 41.4473 36.055 41.3938C36.0736 41.3403 36.1031 41.2913 36.1415 41.2499C36.18 41.2084 36.2265 41.1753 36.2783 41.1528C36.33 41.1302 36.3859 41.1187 36.4423 41.1189C37.1626 41.1189 37.979 40.9299 37.979 40.0486C37.9727 39.6811 37.8977 39.3181 37.758 38.9784L36.1865 34.7899C36.1231 34.6009 36.0924 34.5372 35.9042 34.5372H29.9189C28.9777 34.5372 27.8175 34.5372 27.2834 35.7348L25.851 38.9784C25.7054 39.2727 25.6198 39.5933 25.5994 39.9213C25.5994 41.0552 27.0747 41.1189 27.8502 41.1189C27.9066 41.1187 27.9625 41.1302 28.0142 41.1528C28.066 41.1753 28.1126 41.2084 28.151 41.2499C28.1894 41.2913 28.2189 41.3403 28.2376 41.3938C28.2562 41.4473 28.2637 41.504 28.2595 41.5605C28.2606 41.6188 28.2499 41.6767 28.228 41.7307C28.2061 41.7847 28.1735 41.8337 28.1322 41.8747C28.0908 41.9156 28.0416 41.9477 27.9875 41.9689C27.9334 41.9901 27.8755 42 27.8175 41.998H21.4537C21.3958 41.9995 21.3382 41.989 21.2845 41.9674C21.2307 41.9459 21.1819 41.9135 21.1409 41.8724C21.1 41.8313 21.0678 41.7823 21.0463 41.7283C21.0248 41.6744 21.0144 41.6166 21.0158 41.5584C21.0116 41.502 21.019 41.4452 21.0377 41.3917C21.0563 41.3383 21.0858 41.2893 21.1242 41.2478C21.1627 41.2063 21.2092 41.1733 21.261 41.1507C21.3128 41.1282 21.3686 41.1166 21.425 41.1168C22.9618 41.0223 23.4713 40.2951 24.0585 38.9763L31.6173 22.3518C31.9631 21.6266 32.7161 20.998 33.4057 20.998C33.9009 21.0001 34.0585 21.2836 34.214 21.6924ZM28.4845 32.9637C28.4466 33.0197 28.4247 33.0851 28.4211 33.1527C28.4211 33.2164 28.4845 33.2472 28.6094 33.2472H34.8197C35.2576 33.2472 35.4458 33.1527 35.4458 32.8692C35.4452 32.727 35.4131 32.5866 35.3517 32.4584L33.6267 27.7974C33.2175 26.7272 32.6241 25.3118 32.4358 24.1451C32.4358 24.0834 32.4031 24.0506 32.3724 24.0506C32.3417 24.0506 32.311 24.0834 32.311 24.1451C32.0755 24.9473 31.7708 25.7274 31.4004 26.4766L28.4845 32.9637Z"
+				fill="#0CED57"
+			/>
+			<path
+				d="M34.214 21.6924L40.7619 38.9784C41.3267 40.4574 42.1943 40.9935 43.6778 41.1189C43.732 41.1213 43.7851 41.1349 43.8339 41.1589C43.8827 41.1828 43.926 41.2164 43.9613 41.2578C43.9966 41.2992 44.023 41.3474 44.039 41.3995C44.055 41.4516 44.0602 41.5063 44.0543 41.5605C44.0565 41.6164 44.0476 41.6722 44.0282 41.7247C44.0087 41.7771 43.9791 41.8252 43.9411 41.866C43.903 41.9069 43.8572 41.9398 43.8064 41.9628C43.7556 41.9858 43.7008 41.9985 43.6451 42.0001H36.473C36.415 42.0015 36.3574 41.9911 36.3035 41.9695C36.2496 41.948 36.2007 41.9157 36.1596 41.8746C36.1185 41.8335 36.0861 41.7845 36.0643 41.7305C36.0426 41.6766 36.032 41.6187 36.0331 41.5605C36.0288 41.504 36.0363 41.4473 36.055 41.3938C36.0736 41.3403 36.1031 41.2913 36.1415 41.2499C36.18 41.2084 36.2265 41.1753 36.2783 41.1528C36.33 41.1302 36.3859 41.1187 36.4423 41.1189C37.1626 41.1189 37.979 40.9299 37.979 40.0486C37.9727 39.6811 37.8977 39.3181 37.758 38.9784L36.1865 34.7899C36.1231 34.6009 36.0924 34.5372 35.9042 34.5372H29.9189C28.9777 34.5372 27.8175 34.5372 27.2834 35.7348L25.851 38.9784C25.7054 39.2727 25.6198 39.5933 25.5994 39.9213C25.5994 41.0552 27.0747 41.1189 27.8502 41.1189C27.9066 41.1187 27.9625 41.1302 28.0142 41.1528C28.066 41.1753 28.1126 41.2084 28.151 41.2499C28.1894 41.2913 28.2189 41.3403 28.2376 41.3938C28.2562 41.4473 28.2637 41.504 28.2595 41.5605C28.2606 41.6188 28.2499 41.6767 28.228 41.7307C28.2061 41.7847 28.1735 41.8337 28.1322 41.8747C28.0908 41.9156 28.0416 41.9477 27.9875 41.9689C27.9334 41.9901 27.8755 42 27.8175 41.998H21.4537C21.3958 41.9995 21.3382 41.989 21.2845 41.9675C21.2307 41.9459 21.1819 41.9135 21.1409 41.8724C21.1 41.8313 21.0678 41.7823 21.0463 41.7283C21.0248 41.6744 21.0144 41.6166 21.0158 41.5584C21.0116 41.502 21.019 41.4452 21.0377 41.3918C21.0563 41.3383 21.0858 41.2893 21.1242 41.2478C21.1627 41.2063 21.2092 41.1733 21.261 41.1507C21.3128 41.1282 21.3686 41.1166 21.425 41.1168C22.9618 41.0223 23.4713 40.2951 24.0585 38.9763L31.6173 22.3518C31.9631 21.6266 32.7161 20.998 33.4057 20.998C33.9009 21.0001 34.0585 21.2836 34.214 21.6924ZM28.4845 32.9637C28.4466 33.0197 28.4247 33.0851 28.4211 33.1527C28.4211 33.2164 28.4845 33.2472 28.6094 33.2472H34.8197C35.2576 33.2472 35.4458 33.1527 35.4458 32.8692C35.4452 32.727 35.4131 32.5866 35.3517 32.4584L33.6267 27.7974C33.2175 26.7272 32.6241 25.3118 32.4358 24.1451C32.4358 24.0834 32.4031 24.0506 32.3724 24.0506C32.3417 24.0506 32.311 24.0834 32.311 24.1451C32.0755 24.9473 31.7708 25.7274 31.4004 26.4766L28.4845 32.9637Z"
+				fill="#0CED57"
+			/>
+			<path
+				d="M46.0082 32.2219C46.0082 33.0312 45.5519 33.4893 44.7272 33.4893C43.9026 33.4893 43.5752 33.0682 43.5752 32.4252C43.5752 31.6159 44.052 31.1578 44.8561 31.1578C45.6603 31.1578 46.0082 31.5974 46.0082 32.2219Z"
+				fill="#0CED57"
+			/>
+			<path
+				d="M21.4351 32.2487C21.4351 33.056 20.9768 33.5162 20.1542 33.5162C19.3316 33.5162 18.998 33.093 18.998 32.4501C18.998 31.6428 19.4748 31.1826 20.279 31.1826C21.0832 31.1826 21.4351 31.6243 21.4351 32.2487Z"
+				fill="#0CED57"
+			/>
+		</g>
+		<defs>
+			<clipPath id="clip0_4668_7926">
+				<rect width="27" height="21" fill="white" transform="translate(19 21)" />
+			</clipPath>
+		</defs>
+	</svg>
+);
+
+export default AntiSpamIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/backup.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/backup.tsx
@@ -0,0 +1,20 @@
+const BackupIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M26.5118 27.9597C26.4453 27.957 26.3784 27.9556 26.3113 27.9556C23.5621 27.9556 21.3335 30.2539 21.3335 33.0889C21.3335 35.924 23.5621 38.2223 26.3113 38.2223L26.3409 38.2221H38.376L38.3996 38.2223C40.756 38.2223 42.6663 36.2523 42.6663 33.8223C42.6663 31.6421 41.1288 29.8323 39.111 29.4831L39.1112 29.4223C39.1112 26.1823 36.2459 23.5557 32.7112 23.5557C29.7275 23.5557 27.2207 25.4273 26.5118 27.9597C26.5118 27.9597 26.5118 27.9597 26.5118 27.9597ZM37.0923 31.1635L37.1111 29.4609L37.1112 29.4223C37.1112 27.4471 35.3087 25.5557 32.7112 25.5557C30.5416 25.5557 28.8833 26.9074 28.4377 28.4989L28.0111 30.0227L26.4301 29.958C26.3908 29.9564 26.3512 29.9556 26.3113 29.9556C24.7243 29.9556 23.3335 31.3 23.3335 33.0889C23.3335 34.876 24.7213 36.2194 26.3063 36.2223L26.3349 36.2221H38.3874L38.3996 36.2223C39.5939 36.2223 40.6663 35.2061 40.6663 33.8223C40.6663 32.5872 39.8018 31.6324 38.7699 31.4539L37.0923 31.1635Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default BackupIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/boost.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/boost.tsx
@@ -0,0 +1,20 @@
+const BoostIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M37.3154 32L31.2603 25.3393L32.7401 23.994L40.0183 32L32.7401 40.006L31.2603 38.6606L37.3154 32ZM29.3154 32L23.2603 25.3393L24.7401 23.994L32.0183 32L24.7401 40.006L23.2603 38.6606L29.3154 32Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default BoostIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/crm.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/crm.tsx
@@ -0,0 +1,34 @@
+const CrmIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M36.6667 30.6667C38.5076 30.6667 40 29.1743 40 27.3333C40 25.4924 38.5076 24 36.6667 24C34.8257 24 33.3333 25.4924 33.3333 27.3333C33.3333 29.1743 34.8257 30.6667 36.6667 30.6667ZM36.6667 28.6667C37.403 28.6667 38 28.0697 38 27.3333C38 26.597 37.403 26 36.6667 26C35.9303 26 35.3333 26.597 35.3333 27.3333C35.3333 28.0697 35.9303 28.6667 36.6667 28.6667Z"
+			fill="#0CED57"
+		/>
+		<path
+			d="M33.6667 38.6667V36C33.6667 33.975 32.025 32.3333 30 32.3333H24.6667C22.6416 32.3333 21 33.975 21 36V38.6667H23V36C23 35.0795 23.7462 34.3333 24.6667 34.3333H30C30.9205 34.3333 31.6667 35.0795 31.6667 36V38.6667H33.6667Z"
+			fill="#0CED57"
+		/>
+		<path
+			d="M43 36V38.6667H41V36C41 35.0795 40.2538 34.3333 39.3333 34.3333H36V32.3333H39.3333C41.3584 32.3333 43 33.975 43 36Z"
+			fill="#0CED57"
+		/>
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M30.6667 27.3333C30.6667 29.1743 29.1743 30.6667 27.3333 30.6667C25.4924 30.6667 24 29.1743 24 27.3333C24 25.4924 25.4924 24 27.3333 24C29.1743 24 30.6667 25.4924 30.6667 27.3333ZM28.6667 27.3333C28.6667 28.0697 28.0697 28.6667 27.3333 28.6667C26.597 28.6667 26 28.0697 26 27.3333C26 26.597 26.597 26 27.3333 26C28.0697 26 28.6667 26.597 28.6667 27.3333Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default CrmIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/jetpack-ai.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/jetpack-ai.tsx
@@ -0,0 +1,26 @@
+const JetpackAiIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			d="M24.5 20L25.7728 23.2272L29 24.5L25.7728 25.7728L24.5 29L23.2272 25.7728L20 24.5L23.2272 23.2272L24.5 20Z"
+			fill="#0CED57"
+		/>
+		<path
+			d="M38 20L39.6971 24.3029L44 26L39.6971 27.6971L38 32L36.3029 27.6971L32 26L36.3029 24.3029L38 20Z"
+			fill="#0CED57"
+		/>
+		<path
+			d="M30.5 29L32.6213 34.3787L38 36.5L32.6213 38.6213L30.5 44L28.3787 38.6213L23 36.5L28.3787 34.3787L30.5 29Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default JetpackAiIcon;
diff --git a/projects/packages/my-jetpack/_inc/components/products-table-view/icons/protect.tsx b/projects/packages/my-jetpack/_inc/components/products-table-view/icons/protect.tsx
@@ -0,0 +1,20 @@
+const ProtectIcon = () => (
+	<svg
+		className="table-view-icon"
+		width="64"
+		height="64"
+		viewBox="0 0 64 64"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<rect width="64" height="64" rx="8" fill="#003010" />
+		<path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M32 20.2349L41 24.3258V30.4242C41 35.6229 37.6611 40.545 32.9529 42.0978C32.3343 42.3019 31.6657 42.3019 31.0471 42.0978C26.3389 40.545 23 35.6229 23 30.4242V24.3258L32 20.2349ZM25 25.6136V30.4242C25 34.8415 27.8602 38.9408 31.6735 40.1985C31.8853 40.2683 32.1147 40.2683 32.3265 40.1985C36.1398 38.9408 39 34.8415 39 30.4242V25.6136L32 22.4318L25 25.6136Z"
+			fill="#0CED57"
+		/>
+	</svg>
+);
+
+export default ProtectIcon;