NTP-7916 | filter coach marks

src/components/Tour/components/AnimatedRenderMask.tsx

@@ -10,7 +10,6 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { SCREEN_WIDTH } from '@rn-ui-lib/styles';
-import { useCopilot } from '../contexts/CopilotProvider';
 import { IAnimatedRenderMask } from '../types';
 
 const HIGHLIGHT_PADDING = 2;
@@ -58,18 +57,18 @@ 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 {
-  //     // x: highlightAreaX - animatedExpansion,
-  //     // y: highlightAreaY - animatedExpansion,
-  //     // width: highlightAreaWidth + animatedExpansion * 2,
-  //     // height: highlightAreaHeight + animatedExpansion * 2,
-  //     // rx: highlightAreaRadius + animatedExpansion,
-  //     strokeWidth: animatedExpansion,
-  //     // strokeOpacity: interpolate(rippleAnimation.value, [0, 1], [0.7, 0.2]),
-  //   };
-  // });
+  const animatedRectProps = useAnimatedProps(() => {
+    const animatedExpansion = interpolate(rippleAnimation.value, [0, 1], [0, 10]);
+    return {
+      // x: highlightAreaX - animatedExpansion,
+      // y: highlightAreaY - animatedExpansion,
+      // width: highlightAreaWidth + animatedExpansion * 2,
+      // height: highlightAreaHeight + animatedExpansion * 2,
+      // rx: highlightAreaRadius + animatedExpansion,
+      strokeWidth: animatedExpansion,
+      // strokeOpacity: interpolate(rippleAnimation.value, [0, 1], [0.7, 0.2]),
+    };
+  });
 
   return (
     <View>
@@ -96,7 +95,7 @@ const AnimatedRenderMask: React.FC<IAnimatedRenderMask> = ({ maskRect }) => {
           />
         </G>
         {/* Can use this for ripple animation in future */}
-        {/* <AnimatedRect
+        <AnimatedRect
           x={highlightAreaX}
           y={highlightAreaY}
           width={highlightAreaWidth}
@@ -104,9 +103,9 @@ const AnimatedRenderMask: React.FC<IAnimatedRenderMask> = ({ maskRect }) => {
           rx={highlightAreaRadius}
           fill="transparent"
           stroke={'white'}
-          opacity={0.2}
+          opacity={0.4}
           animatedProps={animatedRectProps}
-        /> */}
+        />
       </Svg>
     </View>
   );

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

@@ -60,7 +60,7 @@ const FilterOptions: React.FC<IFilterOptionsProps> = ({
                 onValueChange={handleFilterSelection}
               >
                 {options?.map((option) => (
-                  <RadioButton value={option.label} id={option.value} unselectable />
+                  <RadioButton key={option.value} value={option.label} id={option.value} unselectable />
                 ))}
               </RadioGroup>
             </View>

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

@@ -109,7 +109,8 @@ const FiltersContainer: React.FC<FilterContainerProps> = (props) => {
   const handleOnClose = () => {
     addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_FILTERS_CLOSE_CLICKED);
     // TODO: For Yash Mantri to refer how to start the coach marks
-    // copilot.start();
+    copilot.start();
+    return;
     closeFilterModal();
   };
 

src/screens/allCases/CasesList.tsx

@@ -67,6 +67,7 @@ import { setAllCasesViewSearchQuery, setVisitPlanSearchQuery } from '@reducers/a
 import { setDashboardSearchQuery } from '@reducers/agentPerformanceSlice';
 import { setSortTabSelected } from '@reducers/nearbyCasesSlice';
 import { clearBottomSheet } from '@components/utlis/DeviceUtils';
+import { CopilotProvider } from '@components/Tour/contexts/CopilotProvider';
 
 export const getItem = (item: ICaseItem[], index: number) => item[index];
 export const ESTIMATED_ITEM_SIZE = 250; // Average height of List item
@@ -132,7 +133,8 @@ const CasesList: React.FC<ICasesList> = ({
   );
   const selectedTab = useAppSelector((state) => state?.nearbyCasesSlice?.sortTabSelected);
   const isNearestCaseTabSelected = selectedTab === TABS_KEYS.NEAREST_CASE;
-  const isNearestCaseView = isNearestCaseTabSelected && (getCurrentScreen()?.name === BOTTOM_TAB_ROUTES.Cases);
+  const isNearestCaseView =
+    isNearestCaseTabSelected && getCurrentScreen()?.name === BOTTOM_TAB_ROUTES.Cases;
   const isPullToRefreshBannerVisible = isNearestCaseView && isPullToRefreshNearbyCasesVisible;
   const dispatch = useAppDispatch();
 
@@ -223,7 +225,7 @@ const CasesList: React.FC<ICasesList> = ({
               'addressString',
               'customerInfo.primaryPhoneNumber',
               'primaryPhoneNumber',
-              'loanAccountNumber'
+              'loanAccountNumber',
             ],
           }).map((filteredListItem: { obj: CaseDetail }) => {
             const { caseReferenceId, id, pinRank } = filteredListItem.obj;
@@ -254,7 +256,7 @@ const CasesList: React.FC<ICasesList> = ({
     searchQuery,
     isLockedVisitPlanStatus,
     selectedTab,
-    nearbyCases
+    nearbyCases,
   ]);
 
   useEffect(() => {
@@ -461,15 +463,17 @@ const CasesList: React.FC<ICasesList> = ({
         }}
         visible={showFilterModal}
       >
-        <FiltersContainer
-          closeFilterModal={() => {
-            setShowFilterModal((prev) => !prev);
-            firePageLoadEvent();
-            clearBottomSheet();
-          }}
-          isVisitPlan={isVisitPlan}
-          isAgentDashboard={isAgentDashboard}
-        />
+        <CopilotProvider>
+          <FiltersContainer
+            closeFilterModal={() => {
+              setShowFilterModal((prev) => !prev);
+              firePageLoadEvent();
+              clearBottomSheet();
+            }}
+            isVisitPlan={isVisitPlan}
+            isAgentDashboard={isAgentDashboard}
+          />
+        </CopilotProvider>
       </ModalWrapperForAlfredV2>
       <BottomSheetWrapper
         HeaderNode={() => (