From c7f2894bec09481d26b4221ae9f1759773877a2d Mon Sep 17 00:00:00 2001
From: Jan Jakes <jan.jakes@automattic.com>
Date: Wed, 8 Nov 2023 15:50:46 +0100
Subject: [PATCH] Add isBusy state for template card

[MAILPOET-4676]
---
 mailpoet/assets/css/src/mailpoet-templates.scss  |  2 +-
 mailpoet/assets/js/src/common/templates/item.tsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/mailpoet/assets/css/src/mailpoet-templates.scss b/mailpoet/assets/css/src/mailpoet-templates.scss
index 20d72fd4c6..d730e8b482 100644
--- a/mailpoet/assets/css/src/mailpoet-templates.scss
+++ b/mailpoet/assets/css/src/mailpoet-templates.scss
@@ -54,7 +54,7 @@
     position: absolute;
   }
 
-  &:disabled {
+  &:disabled:not(.mailpoet-templates-card-is-busy) {
     filter: grayscale(1);
     opacity: 0.7;
   }
diff --git a/mailpoet/assets/js/src/common/templates/item.tsx b/mailpoet/assets/js/src/common/templates/item.tsx
index 5e3af5e6a6..3a6767b12f 100644
--- a/mailpoet/assets/js/src/common/templates/item.tsx
+++ b/mailpoet/assets/js/src/common/templates/item.tsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { EventHandler, MouseEvent } from 'react';
 import { Card, CardBody, CardHeader } from '@wordpress/components';
 import { Tag } from '@woocommerce/components';
@@ -10,6 +11,7 @@ type Props = {
   badge?: 'essential' | 'coming-soon' | 'premium';
   onClick?: EventHandler<MouseEvent<HTMLButtonElement>>;
   disabled?: boolean;
+  isBusy?: boolean;
 };
 
 export function Item({
@@ -19,14 +21,17 @@ export function Item({
   badge,
   onClick,
   disabled = false,
+  isBusy = false,
 }: Props): JSX.Element {
   return (
     <Card
       as="button"
-      className="mailpoet-templates-card"
+      className={classNames('mailpoet-templates-card', {
+        'mailpoet-templates-card-is-busy': isBusy,
+      })}
       onClick={onClick}
-      disabled={disabled}
-      aria-disabled={disabled}
+      disabled={disabled || isBusy}
+      aria-disabled={disabled || isBusy}
     >
       <CardHeader className="mailpoet-templates-card-header">
         {badge && <ItemBadge type={badge} />}