From af28cdae21f0db3dba4e44150630e8d7de6cf0b0 Mon Sep 17 00:00:00 2001
From: joannasikora <jo.sikora21@gmail.com>
Date: Fri, 18 Apr 2025 15:12:34 +0200
Subject: [PATCH 1/2] fix(OnboardingChecklist): fix onbaordingcheklist height

---
 .../OnboardingChecklist.stories.tsx           | 42 +++++++++++++++++++
 .../OnboardingChecklist.tsx                   | 19 ++++++---
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.stories.tsx b/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.stories.tsx
index 1f7ea3898..85a6be615 100644
--- a/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.stories.tsx
+++ b/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.stories.tsx
@@ -166,3 +166,45 @@ export const Default = (): React.ReactElement => {
     />
   );
 };
+
+export const ShortBanner = (): React.ReactElement => {
+  const [activeItem, setActiveItem] = React.useState<string>('1');
+  const [checkedIds, setCheckedIds] = React.useState<string[]>([]);
+  const [isCompleted, setIsCompleted] = React.useState<boolean>(false);
+
+  const handlePrimaryClick = (id: string) => {
+    setCheckedIds((prev) => [...prev, id]);
+    setActiveItem((prev) => (parseInt(prev) + 1).toString());
+
+    if (checkedIds.length === 4) {
+      setIsCompleted(true);
+    }
+  };
+
+  const handleSecondaryClick = (id: string) => setActiveItem(id);
+
+  return (
+    <OnboardingChecklist
+      title="Here’s your getting started guide"
+      greetingText="Hello, Tim!"
+      items={getItems(handlePrimaryClick, handleSecondaryClick)}
+      activeItemId={activeItem}
+      completedItemsIds={checkedIds}
+      onActiveChange={handleSecondaryClick}
+      isCompleted={true}
+      completionMessageData={{
+        title: '',
+        greetingText: 'Hey Tim, nice work!',
+        delay: 3000,
+        placeholder: (
+          <video
+            src="https://cdn.livechat-static.com/api/file/lc/img/default/assets/onboarding-success.mp4"
+            playsInline
+            muted
+            autoPlay
+          />
+        ),
+      }}
+    />
+  );
+};
diff --git a/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.tsx b/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.tsx
index fefcd3cc3..d063f211b 100644
--- a/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.tsx
+++ b/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.tsx
@@ -34,6 +34,7 @@ export const OnboardingChecklist: React.FC<IOnboardingChecklistProps> = ({
   >(undefined);
   const containerRef = React.useRef<HTMLDivElement>(null);
   const COMPLETE_CONTAINER_HEIGHT = completionMessageData.height || 96;
+  const HEIGHT_BUFFER = 50; // Adjust??
 
   const handleButtonClick = () => {
     setIsOpen((prev) => !prev);
@@ -43,7 +44,7 @@ export const OnboardingChecklist: React.FC<IOnboardingChecklistProps> = ({
     const delay = completionMessageData.delay || 1500;
     const container = containerRef.current;
 
-    if (isCompleted && container) {
+    if (isCompleted && container && !isChecklistCompleted) {
       const currentHeight = container.offsetHeight;
       setCurrentContainerHeight(currentHeight);
 
@@ -56,7 +57,16 @@ export const OnboardingChecklist: React.FC<IOnboardingChecklistProps> = ({
         clearTimeout(timeoutId);
       };
     }
-  }, [isCompleted]);
+  }, [isCompleted, isChecklistCompleted]);
+
+  React.useEffect(() => {
+    if (containerRef.current) {
+      const newHeight = isOpen
+        ? containerRef.current.scrollHeight + HEIGHT_BUFFER
+        : COMPLETE_CONTAINER_HEIGHT;
+      setCurrentContainerHeight(newHeight);
+    }
+  }, [isOpen, isChecklistCompleted]);
 
   return (
     <div
@@ -69,10 +79,7 @@ export const OnboardingChecklist: React.FC<IOnboardingChecklistProps> = ({
         className
       )}
       style={{
-        height:
-          !isChecklistCompleted || isOpen
-            ? currentContainerHeight
-            : COMPLETE_CONTAINER_HEIGHT,
+        height: currentContainerHeight,
       }}
     >
       {isOpen && (

From d2e8c0005f9e062c65835d26c4038717b1b8c98f Mon Sep 17 00:00:00 2001
From: joannasikora <jo.sikora21@gmail.com>
Date: Fri, 18 Apr 2025 15:13:01 +0200
Subject: [PATCH 2/2] fix(OnboardingCheklist): lint fix

---
 .../OnboardingChecklist/OnboardingChecklist.stories.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.stories.tsx b/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.stories.tsx
index 85a6be615..ca356f538 100644
--- a/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.stories.tsx
+++ b/packages/react-components/src/components/OnboardingChecklist/OnboardingChecklist.stories.tsx
@@ -170,7 +170,7 @@ export const Default = (): React.ReactElement => {
 export const ShortBanner = (): React.ReactElement => {
   const [activeItem, setActiveItem] = React.useState<string>('1');
   const [checkedIds, setCheckedIds] = React.useState<string[]>([]);
-  const [isCompleted, setIsCompleted] = React.useState<boolean>(false);
+  const [, setIsCompleted] = React.useState<boolean>(false);
 
   const handlePrimaryClick = (id: string) => {
     setCheckedIds((prev) => [...prev, id]);