NTP-7917 | PR comments resolved

babel.config.js

@@ -30,7 +30,7 @@ module.exports = {
       },
     ],
     'jest-hoist',
-    'react-native-reanimated/plugin'
+    'react-native-reanimated/plugin',
   ],
   env: {
     production: {

src/components/Tour/components/AnimatedRenderMask.tsx

@@ -57,6 +57,7 @@ const AnimatedRenderMask: React.FC<IAnimatedRenderMask> = ({ maskRect }) => {
     ],
   }));
 
+  // TODO: Can use for ripple animation in future
   // const animatedRectProps = useAnimatedProps(() => {
   //   const animatedExpansion = interpolate(rippleAnimation.value, [0, 1], [0, 10]);
   //   return {
@@ -94,6 +95,7 @@ const AnimatedRenderMask: React.FC<IAnimatedRenderMask> = ({ maskRect }) => {
             opacity={0.8}
           />
         </G>
+        {/* Can use this for ripple animation in future */}
         {/* <AnimatedRect
           x={highlightAreaX}
           y={highlightAreaY}

src/components/Tour/components/CopilotModal.tsx

@@ -136,6 +136,8 @@ export const CopilotModal = forwardRef<CopilotModalHandle, CopilotOptions>(funct
     return null;
   }
 
+  const showMask = containerVisible && maskRect;
+
   return (
     <ModalWrapperForAlfredV2
       animationType="none"
@@ -143,8 +145,8 @@ export const CopilotModal = forwardRef<CopilotModalHandle, CopilotOptions>(funct
       style={{ backgroundColor: 'transparent' }}
     >
       <View style={styles.container}>
-        {containerVisible && maskRect ? <AnimatedRenderMask maskRect={maskRect} /> : null}
-        {containerVisible && maskRect ? (
+        {showMask ? <AnimatedRenderMask maskRect={maskRect} /> : null}
+        {showMask ? (
           <View style={[styles.tooltip, tooltipStyles, tooltipStyle]}>
             <TooltipComponent labels={labels} maskRect={maskRect} />
           </View>

src/components/Tour/components/Tooltip.tsx

@@ -70,7 +70,7 @@ export const Tooltip: React.FC<ITooltip> = ({ labels }) => {
         <View style={[GenericStyles.row, GenericStyles.mh12]}>
           <Button
             onPress={handleStop}
-            title={isLastStep ? labels?.finish || 'Got it' : labels?.skip || 'Skip'}
+            title={isLastStep ? labels?.finish : labels?.skip}
             style={GenericStyles.mr10}
             buttonStyle={styles.nextBtn}
             pressableWidthChange={false}

src/components/Tour/contexts/CopilotProvider.tsx

@@ -125,8 +125,6 @@ export const CopilotProvider = ({
     [getFirstStep, moveModalToStep, scrollView, setCurrentStep, setVisibility, steps]
   );
 
-  console.log("currentStep", currentStep);
-
   const stop = useCallback(async () => {
     await setVisibility(false);
   }, [setVisibility]);

src/components/Tour/hooks/useStateWithAwait.ts

@@ -1,3 +1,4 @@
+import { noop } from "@rn-ui-lib/utils/common";
 import { useEffect, useRef, useState } from "react";
 
 /**
@@ -6,7 +7,7 @@ import { useEffect, useRef, useState } from "react";
 export const useStateWithAwait = <T = any>(
   initialState: T
 ): [T, (newValue: T) => Promise<void>] => {
-  const endPending = useRef(() => {});
+  const endPending = useRef(noop);
   const newDesiredValue = useRef(initialState);
 
   const [state, setState] = useState(initialState);

src/components/Tour/hooks/useStepsMap.ts

@@ -1,28 +1,26 @@
-import { useCallback, useMemo, useReducer, useState } from "react";
-import { type Step, type StepsMap } from "../types";
+import { useCallback, useMemo, useReducer, useState } from 'react';
+import { type Step, type StepsMap } from '../types';
 
 type Action =
   | {
-      type: "register";
+      type: 'register';
       step: Step;
     }
   | {
-      type: "unregister";
+      type: 'unregister';
       stepName: string;
     };
 
 export const useStepsMap = () => {
-  const [currentStep, setCurrentStepState] = useState<Step | undefined>(
-    undefined
-  );
+  const [currentStep, setCurrentStepState] = useState<Step | undefined>(undefined);
   const [steps, dispatch] = useReducer((state: StepsMap, action: Action) => {
     switch (action.type) {
-      case "register":
+      case 'register':
         return {
           ...state,
           [action.step.name]: action.step,
         };
-      case "unregister": {
+      case 'unregister': {
         const { [action.stepName]: _, ...rest } = state;
         return rest;
       }
@@ -36,15 +34,9 @@ export const useStepsMap = () => {
     [steps]
   );
 
-  console.log("orderedSteps", orderedSteps);
-
   const stepIndex = useCallback(
     (step = currentStep) =>
-      step
-        ? orderedSteps.findIndex(
-            (stepCandidate) => stepCandidate.order === step.order
-          )
-        : -1,
+      step ? orderedSteps.findIndex((stepCandidate) => stepCandidate.order === step.order) : -1,
     [currentStep, orderedSteps]
   );
 
@@ -55,13 +47,6 @@ export const useStepsMap = () => {
 
   const totalStepsNumber = useMemo(() => orderedSteps.length, [orderedSteps]);
 
-  const getFirstStep = useCallback(() => orderedSteps[0], [orderedSteps]);
-
-  const getLastStep = useCallback(
-    () => orderedSteps[orderedSteps.length - 1],
-    [orderedSteps]
-  );
-
   const getPrevStep = useCallback(
     (step = currentStep) => step && orderedSteps[stepIndex(step) - 1],
     [currentStep, stepIndex, orderedSteps]
@@ -72,31 +57,24 @@ export const useStepsMap = () => {
     [currentStep, stepIndex, orderedSteps]
   );
 
-  const getNthStep = useCallback(
-    (n: number) => orderedSteps[n - 1],
-    [orderedSteps]
-  );
+  const getNthStep = useCallback((n: number) => orderedSteps[n - 1], [orderedSteps]);
 
-  const isFirstStep = useMemo(
-    () => currentStep === getFirstStep(),
-    [currentStep, getFirstStep]
-  );
+  const getFirstStep = useCallback(() => getNthStep(1), [orderedSteps]);
 
-  const isLastStep = useMemo(
-    () => currentStep === getLastStep(),
-    [currentStep, getLastStep]
-  );
+  const getLastStep = useCallback(() => getNthStep(orderedSteps.length), [orderedSteps]);
+
+  const isFirstStep = useMemo(() => currentStep === getFirstStep(), [currentStep, getFirstStep]);
+
+  const isLastStep = useMemo(() => currentStep === getLastStep(), [currentStep, getLastStep]);
 
   const registerStep = useCallback((step: Step) => {
-    dispatch({ type: "register", step });
+    dispatch({ type: 'register', step });
   }, []);
 
   const unregisterStep = useCallback((stepName: string) => {
-    dispatch({ type: "unregister", stepName });
+    dispatch({ type: 'unregister', stepName });
   }, []);
 
-  console.log("steps", steps);
-
   return {
     currentStepNumber,
     totalStepsNumber,

src/components/Tour/types.ts

@@ -90,7 +90,7 @@ export interface CopilotContextType {
 
 export interface ITooltip {
   maskRect: LayoutRectangle;
-  labels?: Labels;
+  labels: Labels;
 }
 
 export interface IAnimatedRenderMask {

src/components/screens/allCases/allCasesFilters/FiltersContainer.tsx

@@ -108,8 +108,9 @@ const FiltersContainer: React.FC<FilterContainerProps> = (props) => {
 
   const handleOnClose = () => {
     addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_FILTERS_CLOSE_CLICKED);
-    copilot.start();
-    //closeFilterModal();
+    // TODO: For Yash Mantri to refer how to start the coach marks
+    // copilot.start();
+    closeFilterModal();
   };
 
   const handleOptionFilterChange = (value: string) => {
@@ -188,6 +189,7 @@ const FiltersContainer: React.FC<FilterContainerProps> = (props) => {
                         }}
                       >
                         {filters[filterGroupKey].filters[filterKey].displayText === 'Feedback' ? (
+                          // TODO: For Yash Mantri to refer how to start the coach marks
                           <CopilotStep
                             order={1}
                             name="Bucket"