From 9e17701632502f01fa7e3d9f0124650273fd2252 Mon Sep 17 00:00:00 2001
From: Sushmitha Sekar <sushmithasekar28@gmail.com>
Date: Wed, 11 Dec 2024 17:46:27 +0100
Subject: [PATCH] Add image inside quick reply button

---
 .../ActionButtons/ActionButton.module.css     | 21 +++++++++++++++++++
 src/common/ActionButtons/ActionButton.tsx     | 19 +++++++++++++++++
 test/demo.tsx                                 |  4 ++--
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/common/ActionButtons/ActionButton.module.css b/src/common/ActionButtons/ActionButton.module.css
index 2cf795b..21c3332 100644
--- a/src/common/ActionButtons/ActionButton.module.css
+++ b/src/common/ActionButtons/ActionButton.module.css
@@ -12,6 +12,8 @@ a.button {
 	color: var(--cc-primary-contrast-color);
 	border: none;
 	outline: none;
+	overflow: hidden;
+	position: relative;
 }
 
 a.button:global(.phone-number-or-url-anchor) {
@@ -49,3 +51,22 @@ a.button.disabled:focus {
 	cursor: default;
 	pointer-events: none;
 }
+
+.buttonLabelWithImage {
+	margin-left: 40px;
+}
+
+.buttonImage {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.buttonImageContainer {
+	display: flex;
+	position: absolute;
+	left: 0;
+	width: 40px;
+	height: 100%;
+	border-right: 2px solid var(--cc-primary-contrast-color);
+}
diff --git a/src/common/ActionButtons/ActionButton.tsx b/src/common/ActionButtons/ActionButton.tsx
index 7410ade..d71c273 100644
--- a/src/common/ActionButtons/ActionButton.tsx
+++ b/src/common/ActionButtons/ActionButton.tsx
@@ -49,6 +49,15 @@ const ActionButton: FC<ActionButtonProps> = props => {
 			? (button as any).contentType
 			: null;
 
+	const buttonImage =
+		"image_url" in button ? button.image_url : "imageUrl" in button ? button.imageUrl : null;
+	const butonImageAltText =
+		"image_alt_text" in button
+			? button.image_alt_text
+			: "imageAltText" in button
+			? button.imageAltText
+			: "";
+
 	if (!buttonType) return null;
 
 	const buttonLabel = getWebchatButtonLabel(button) || "";
@@ -151,10 +160,20 @@ const ActionButton: FC<ActionButtonProps> = props => {
 			aria-label={getAriaLabel()}
 			aria-disabled={disabled}
 		>
+			{!!buttonImage && (
+				<div className={classes.buttonImageContainer}>
+					<img
+						src={buttonImage as string}
+						alt={butonImageAltText as string}
+						className={classes.buttonImage}
+					/>
+				</div>
+			)}
 			<Typography
 				variant={size === "large" ? "title1-semibold" : "cta-semibold"}
 				component="span"
 				dangerouslySetInnerHTML={{ __html }}
+				className={!!buttonImage && classes.buttonLabelWithImage}
 			/>
 			{renderIcon()}
 		</Component>
diff --git a/test/demo.tsx b/test/demo.tsx
index 0962bf2..b8e12df 100644
--- a/test/demo.tsx
+++ b/test/demo.tsx
@@ -261,8 +261,8 @@ const screens: TScreen[] = [
 										},
 										{
 											content_type: "user_phone_number",
-											image_url: "",
-											image_alt_text: "",
+											image_url: "https://placewaifu.com/image/300/50",
+											image_alt_text: "Sample anime character",
 											payload: "0111222333",
 											title: "Call us",
 										},