[DT-2394] fix: prevent old onboarding from flashing when complete (#1478

)
prismicio · Nov 6, 2024 · 771fb07 · 771fb07
1 parent 76a0b2a
commit 771fb07
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 27 deletions.
diff --git a/.../slice-machine/src/features/onboarding/SliceMachineOnboardingGuide/OnboardingProvider.tsx b/.../slice-machine/src/features/onboarding/SliceMachineOnboardingGuide/OnboardingProvider.tsx
@@ -46,12 +46,7 @@ export const OnboardingProvider = ({
   onComplete,
 }: OnboardingProviderProps) => {
   const steps = onboardingSteps;
-
-  const [stepStatus, setStepStatus] = usePersistedState(
-    "onboardingSteps",
-    getInitialState(steps),
-    { schema: onboardingStepStatusesSchema },
-  );
+  const [stepStatus, setStepStatus] = useStepStatus();
 
   const toggleStepComplete = (step: OnboardingStep) => {
     const newCompleteState = !isStepComplete(step);
@@ -101,6 +96,24 @@ export const OnboardingProvider = ({
   );
 };
 
+function useStepStatus() {
+  return usePersistedState(
+    "onboardingSteps",
+    getInitialState(onboardingSteps),
+    { schema: onboardingStepStatusesSchema },
+  );
+}
+
+export function useIsOnboardingCompleted() {
+  const [stepStatus] = useStepStatus();
+
+  const completedStepCount = onboardingSteps.filter(
+    (step) => Boolean(stepStatus[step.id]) || Boolean(step.defaultCompleted),
+  ).length;
+
+  return completedStepCount === onboardingSteps.length;
+}
+
 export const useOnboardingContext = () => {
   const context = useContext(OnboardingContext);
 

diff --git a/...chine/src/features/onboarding/SliceMachineOnboardingGuide/SliceMachineOnboardingGuide.tsx b/...chine/src/features/onboarding/SliceMachineOnboardingGuide/SliceMachineOnboardingGuide.tsx
@@ -6,23 +6,28 @@ import {
   Text,
   useMediaQuery,
 } from "@prismicio/editor-ui";
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 import styles from "./OnboardingGuide.module.css";
 import { OnboardingProgressStepper } from "./OnboardingProgressStepper";
-import { OnboardingProvider, useOnboardingContext } from "./OnboardingProvider";
+import {
+  OnboardingProvider,
+  useIsOnboardingCompleted,
+  useOnboardingContext,
+} from "./OnboardingProvider";
 import { OnboardingTutorial } from "./OnboardingTutorial/OnboardingTutorial";
 
 export function SliceMachineOnboardingGuide() {
-  const [isVisible, setVisible] = useState(true);
+  const isComplete = useIsOnboardingCompleted();
+  const [isVisible, setVisible] = useState(!isComplete);
   const confetti = useConfetti({ onAnimationEnd: () => setVisible(false) });
 
   if (!isVisible) return null;
 
   return (
     <OnboardingProvider onComplete={confetti.throwConfetti}>
       <div ref={confetti.confettiContainerRef} className={styles.container}>
-        <OnboardingGuideCard setVisible={setVisible} />
+        <OnboardingGuideCard />
         <div
           ref={confetti.confettiCannonRef}
           className={styles.confettiCannon}
@@ -32,25 +37,11 @@ export function SliceMachineOnboardingGuide() {
   );
 }
 
-type OnboardingGuideCardProps = {
-  setVisible: (isVisible: boolean) => void;
-};
-
-function OnboardingGuideCard(props: OnboardingGuideCardProps) {
-  const { setVisible } = props;
+function OnboardingGuideCard() {
   const { steps, completedStepCount, isComplete } = useOnboardingContext();
-  const isVisible = useMediaQuery({ min: "medium" });
+  const isMediumScreen = useMediaQuery({ min: "medium" });
 
-  const isMountedRef = useRef(false);
-  useEffect(() => {
-    // quick fix to prevent having the onboarding invisible but interactive when complete
-    if (!isMountedRef.current) {
-      isMountedRef.current = true;
-      setVisible(false);
-    }
-  }, [isVisible, setVisible]);
-
-  if (!isVisible) return null;
+  if (!isMediumScreen) return null;
 
   return (
     <div