From a0e04c12a2d08e9b602e6b34fe81968c8d810d3a Mon Sep 17 00:00:00 2001 From: Aman Chaturvedi Date: Thu, 12 Dec 2024 18:09:39 +0530 Subject: [PATCH] NTP-7916 | filter coach marks --- .../Tour/components/AnimatedRenderMask.tsx | 31 ++++++------- .../allCasesFilters/FilterOptions.tsx | 2 +- .../allCasesFilters/FiltersContainer.tsx | 3 +- src/screens/allCases/CasesList.tsx | 28 ++++++----- yarn.lock | 46 +++++++++---------- 5 files changed, 57 insertions(+), 53 deletions(-) diff --git a/src/components/Tour/components/AnimatedRenderMask.tsx b/src/components/Tour/components/AnimatedRenderMask.tsx index b6e1a9ec..07cd2825 100644 --- a/src/components/Tour/components/AnimatedRenderMask.tsx +++ b/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 = ({ 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 ( @@ -96,7 +95,7 @@ const AnimatedRenderMask: React.FC = ({ maskRect }) => { /> {/* Can use this for ripple animation in future */} - {/* = ({ maskRect }) => { rx={highlightAreaRadius} fill="transparent" stroke={'white'} - opacity={0.2} + opacity={0.4} animatedProps={animatedRectProps} - /> */} + /> ); diff --git a/src/components/screens/allCases/allCasesFilters/FilterOptions.tsx b/src/components/screens/allCases/allCasesFilters/FilterOptions.tsx index 788c1b47..b69f60ee 100644 --- a/src/components/screens/allCases/allCasesFilters/FilterOptions.tsx +++ b/src/components/screens/allCases/allCasesFilters/FilterOptions.tsx @@ -60,7 +60,7 @@ const FilterOptions: React.FC = ({ onValueChange={handleFilterSelection} > {options?.map((option) => ( - + ))} diff --git a/src/components/screens/allCases/allCasesFilters/FiltersContainer.tsx b/src/components/screens/allCases/allCasesFilters/FiltersContainer.tsx index 22f87185..190d6b4d 100644 --- a/src/components/screens/allCases/allCasesFilters/FiltersContainer.tsx +++ b/src/components/screens/allCases/allCasesFilters/FiltersContainer.tsx @@ -109,7 +109,8 @@ const FiltersContainer: React.FC = (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(); }; diff --git a/src/screens/allCases/CasesList.tsx b/src/screens/allCases/CasesList.tsx index f0b0b189..53bb4d73 100644 --- a/src/screens/allCases/CasesList.tsx +++ b/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 = ({ ); 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 = ({ 'addressString', 'customerInfo.primaryPhoneNumber', 'primaryPhoneNumber', - 'loanAccountNumber' + 'loanAccountNumber', ], }).map((filteredListItem: { obj: CaseDetail }) => { const { caseReferenceId, id, pinRank } = filteredListItem.obj; @@ -254,7 +256,7 @@ const CasesList: React.FC = ({ searchQuery, isLockedVisitPlanStatus, selectedTab, - nearbyCases + nearbyCases, ]); useEffect(() => { @@ -461,15 +463,17 @@ const CasesList: React.FC = ({ }} visible={showFilterModal} > - { - setShowFilterModal((prev) => !prev); - firePageLoadEvent(); - clearBottomSheet(); - }} - isVisitPlan={isVisitPlan} - isAgentDashboard={isAgentDashboard} - /> + + { + setShowFilterModal((prev) => !prev); + firePageLoadEvent(); + clearBottomSheet(); + }} + isVisitPlan={isVisitPlan} + isAgentDashboard={isAgentDashboard} + /> + ( diff --git a/yarn.lock b/yarn.lock index 4888d8a4..d3cde16c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -330,7 +330,7 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.20.2.tgz#d1b9000752b18d0877cff85a5c376ce5c3121629" integrity sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ== -"@babel/helper-plugin-utils@^7.25.9": +"@babel/helper-plugin-utils@^7.24.7", "@babel/helper-plugin-utils@^7.25.9": version "7.25.9" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.25.9.tgz#9cbdd63a9443a2c92a725cca7ebca12cc8dd9f46" integrity sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw== @@ -557,7 +557,7 @@ "@babel/helper-plugin-utils" "^7.18.9" "@babel/plugin-syntax-export-default-from" "^7.18.6" -"@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8", "@babel/plugin-proposal-nullish-coalescing-operator@^7.18.6": +"@babel/plugin-proposal-nullish-coalescing-operator@7.18.6", "@babel/plugin-proposal-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz#fdd940a99a740e577d6c753ab6fbb43fdb9467e1" integrity sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA== @@ -742,6 +742,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.25.9" +"@babel/plugin-transform-arrow-functions@7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.7.tgz#4f6886c11e423bd69f3ce51dbf42424a5f275514" + integrity sha512-Dt9LQs6iEY++gXUwY03DNFat5C2NbO48jj+j/bSAz6b3HgPs39qcPiYt77fDObIcFwj3/C2ICX9YMwGflUoSHQ== + dependencies: + "@babel/helper-plugin-utils" "^7.24.7" + "@babel/plugin-transform-arrow-functions@^7.0.0": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz#19063fcf8771ec7b31d742339dac62433d0611fe" @@ -749,13 +756,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-transform-arrow-functions@^7.24.7": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz#7821d4410bee5daaadbb4cdd9a6649704e176845" - integrity sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg== - dependencies: - "@babel/helper-plugin-utils" "^7.25.9" - "@babel/plugin-transform-async-to-generator@^7.0.0": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz#ccda3d1ab9d5ced5265fdb13f1882d5476c71615" @@ -953,6 +953,13 @@ babel-plugin-polyfill-regenerator "^0.4.1" semver "^6.3.0" +"@babel/plugin-transform-shorthand-properties@7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.7.tgz#85448c6b996e122fa9e289746140aaa99da64e73" + integrity sha512-KsDsevZMDsigzbA09+vacnLpmPH4aWjcZjXdyFKGzpplxhbeB4wYtury3vglQkg6KM/xEPKt73eCjPPf1PgXBA== + dependencies: + "@babel/helper-plugin-utils" "^7.24.7" + "@babel/plugin-transform-shorthand-properties@^7.0.0": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.18.6.tgz#6d6df7983d67b195289be24909e3f12a8f664dc9" @@ -960,13 +967,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" -"@babel/plugin-transform-shorthand-properties@^7.24.7": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz#bb785e6091f99f826a95f9894fc16fde61c163f2" - integrity sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng== - dependencies: - "@babel/helper-plugin-utils" "^7.25.9" - "@babel/plugin-transform-spread@^7.0.0": version "7.19.0" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz#dd60b4620c2fec806d60cfaae364ec2188d593b6" @@ -982,6 +982,13 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.6" +"@babel/plugin-transform-template-literals@7.24.7": + version "7.24.7" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.7.tgz#a05debb4a9072ae8f985bcf77f3f215434c8f8c8" + integrity sha512-AfDTQmClklHCOLxtGoP7HkeMw56k1/bTQjwsfhL6pppo/M4TOBSq+jjBUBLmV/4oeFg4GWMavIl44ZeCtmmZTw== + dependencies: + "@babel/helper-plugin-utils" "^7.24.7" + "@babel/plugin-transform-template-literals@^7.0.0": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.18.9.tgz#04ec6f10acdaa81846689d63fae117dd9c243a5e" @@ -989,13 +996,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.18.9" -"@babel/plugin-transform-template-literals@^7.24.7": - version "7.25.9" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.25.9.tgz#6dbd4a24e8fad024df76d1fac6a03cf413f60fe1" - integrity sha512-o97AE4syN71M/lxrCtQByzphAdlYluKPDBzDVzMmfCobUjjhAryZV0AIpRPrxN0eAkxXO6ZLEScmt+PNhj2OTw== - dependencies: - "@babel/helper-plugin-utils" "^7.25.9" - "@babel/plugin-transform-typescript@^7.18.6", "@babel/plugin-transform-typescript@^7.5.0": version "7.20.2" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.2.tgz#91515527b376fc122ba83b13d70b01af8fe98f3f"