From fbbaaf1ae4bf232887a6e828d84c23b312660e27 Mon Sep 17 00:00:00 2001 From: "aman.singh" Date: Thu, 14 Mar 2024 09:33:27 +0530 Subject: [PATCH] TP-22332 | update | Aman Singh --- .vscode/settings.json | 6 + android/app/google-services.json | 2 +- src/assets/icons/CSAIcon.tsx | 35 +++ src/assets/icons/CompletedCaseIcon.tsx | 38 +++ src/assets/icons/CrossIcon.tsx | 37 +++ src/assets/icons/FilterIconOutline.tsx | 40 +++ src/assets/icons/RequestIcon.tsx | 40 +++ src/assets/icons/SendIcon.tsx | 39 +++ src/common/BlockerScreen.tsx | 20 +- src/components/utlis/apiHelper.ts | 8 +- src/constants/config.js | 12 +- src/reducer/allCasesSlice.ts | 6 + src/screens/Profile/Navigation/constants.ts | 60 +++++ src/screens/Profile/ProfileButton.tsx | 74 ++++++ src/screens/Profile/ProfileStack.tsx | 63 +++++ src/screens/Profile/index.tsx | 105 +++----- src/screens/allCases/CompletedCase.tsx | 25 +- src/screens/allCases/index.tsx | 34 ++- src/screens/auth/AuthRouter.tsx | 4 +- src/screens/auth/ProtectedRouter.tsx | 2 +- src/screens/caseDetails/CaseDetailHeader.tsx | 56 +++- src/screens/caseDetails/CaseDetailStack.tsx | 15 ++ src/screens/cosmosSupport/CSAFilters.tsx | 123 +++++++++ src/screens/cosmosSupport/CustomerCard.tsx | 114 ++++++++ src/screens/cosmosSupport/ListItem.tsx | 96 +++++++ src/screens/cosmosSupport/ListItemLoading.tsx | 26 ++ src/screens/cosmosSupport/RelativeTime.tsx | 109 ++++++++ .../cosmosSupport/RenderCommentsTimeline.tsx | 121 +++++++++ src/screens/cosmosSupport/RequestDetail.tsx | 115 ++++++++ src/screens/cosmosSupport/RequestSupport.tsx | 148 +++++++++++ src/screens/cosmosSupport/TagComponent.tsx | 41 +++ src/screens/cosmosSupport/TaskForMe.tsx | 80 ++++++ src/screens/cosmosSupport/TeleSupport.tsx | 15 ++ .../cosmosSupport/TextFieldWithInput.tsx | 51 ++++ .../cosmosSupport/ViewRequestHistory.tsx | 170 ++++++++++++ src/screens/cosmosSupport/constant/index.ts | 4 + src/screens/cosmosSupport/index.ts | 20 ++ yarn.lock | 250 +++++++++++++++++- 38 files changed, 2083 insertions(+), 121 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/assets/icons/CSAIcon.tsx create mode 100644 src/assets/icons/CompletedCaseIcon.tsx create mode 100644 src/assets/icons/CrossIcon.tsx create mode 100644 src/assets/icons/FilterIconOutline.tsx create mode 100644 src/assets/icons/RequestIcon.tsx create mode 100644 src/assets/icons/SendIcon.tsx create mode 100644 src/screens/Profile/Navigation/constants.ts create mode 100644 src/screens/Profile/ProfileButton.tsx create mode 100644 src/screens/Profile/ProfileStack.tsx create mode 100644 src/screens/cosmosSupport/CSAFilters.tsx create mode 100644 src/screens/cosmosSupport/CustomerCard.tsx create mode 100644 src/screens/cosmosSupport/ListItem.tsx create mode 100644 src/screens/cosmosSupport/ListItemLoading.tsx create mode 100644 src/screens/cosmosSupport/RelativeTime.tsx create mode 100644 src/screens/cosmosSupport/RenderCommentsTimeline.tsx create mode 100644 src/screens/cosmosSupport/RequestDetail.tsx create mode 100644 src/screens/cosmosSupport/RequestSupport.tsx create mode 100644 src/screens/cosmosSupport/TagComponent.tsx create mode 100644 src/screens/cosmosSupport/TaskForMe.tsx create mode 100644 src/screens/cosmosSupport/TeleSupport.tsx create mode 100644 src/screens/cosmosSupport/TextFieldWithInput.tsx create mode 100644 src/screens/cosmosSupport/ViewRequestHistory.tsx create mode 100644 src/screens/cosmosSupport/constant/index.ts create mode 100644 src/screens/cosmosSupport/index.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..ba350c4b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "cSpell.words": [ + "Pressable", + "utlis" + ] +} \ No newline at end of file diff --git a/android/app/google-services.json b/android/app/google-services.json index 58cf705f..1df006c6 100644 --- a/android/app/google-services.json +++ b/android/app/google-services.json @@ -37,4 +37,4 @@ } ], "configuration_version": "1" -} \ No newline at end of file +} diff --git a/src/assets/icons/CSAIcon.tsx b/src/assets/icons/CSAIcon.tsx new file mode 100644 index 00000000..eced3cb2 --- /dev/null +++ b/src/assets/icons/CSAIcon.tsx @@ -0,0 +1,35 @@ +import { IconProps } from "@rn-ui-lib/icons/types" +import * as React from "react" +import Svg, { Mask, Path, G } from "react-native-svg" + +const CSAIcon:React.FC = (props) => { + const {fillColor="#3591FE", size=16, style} = props; + return ( + + + + + + + + + ) +} + +export default CSAIcon; \ No newline at end of file diff --git a/src/assets/icons/CompletedCaseIcon.tsx b/src/assets/icons/CompletedCaseIcon.tsx new file mode 100644 index 00000000..5817d530 --- /dev/null +++ b/src/assets/icons/CompletedCaseIcon.tsx @@ -0,0 +1,38 @@ +import { StyleSheet, Text, View } from 'react-native' +import React from 'react' +import Svg, { Mask, Path, G } from "react-native-svg" +import { IconProps } from '@rn-ui-lib/icons/types' + +const CompletedCaseIcon: React.FC = (props) => { + const { fillColor = "#969696", size = 16, style } = props; + return ( + + + + + + + + + ) +} + + + +export default CompletedCaseIcon \ No newline at end of file diff --git a/src/assets/icons/CrossIcon.tsx b/src/assets/icons/CrossIcon.tsx new file mode 100644 index 00000000..5417afad --- /dev/null +++ b/src/assets/icons/CrossIcon.tsx @@ -0,0 +1,37 @@ +import { IconProps } from "@rn-ui-lib/icons/types"; +import React, { FC } from "react"; +import Svg, { G, Mask, Path } from "react-native-svg"; + + + +const CrossIcon: FC = (props) => { + const { size =16, style, fillColor="#969696" } = props; + return ( + + + + + + + + + ); +}; + +export default CrossIcon; diff --git a/src/assets/icons/FilterIconOutline.tsx b/src/assets/icons/FilterIconOutline.tsx new file mode 100644 index 00000000..e9df3a5f --- /dev/null +++ b/src/assets/icons/FilterIconOutline.tsx @@ -0,0 +1,40 @@ +import * as React from "react" +import { StyleProp, ViewStyle } from "react-native" +import Svg, { Mask, Path, G } from "react-native-svg" + +interface IFilterIconOutline { + style?: StyleProp; + fillColor?: string; +} + +const FilterIconOutline: React.FC = (props) => { + const { style, fillColor="#969696" } = props; + return ( + + + + + + + + + ) +} + +export default FilterIconOutline \ No newline at end of file diff --git a/src/assets/icons/RequestIcon.tsx b/src/assets/icons/RequestIcon.tsx new file mode 100644 index 00000000..61098278 --- /dev/null +++ b/src/assets/icons/RequestIcon.tsx @@ -0,0 +1,40 @@ +import { IconProps } from "@rn-ui-lib/icons/types" +import * as React from "react" +import Svg, { Rect, Mask, Path, G } from "react-native-svg" + + + + +const RequestIcon:React.FC =(props) => { + const {fillColor = "#29A1A3", size=24, style} = props; + return ( + + + + + + + + + + ) +} + +export default RequestIcon \ No newline at end of file diff --git a/src/assets/icons/SendIcon.tsx b/src/assets/icons/SendIcon.tsx new file mode 100644 index 00000000..228976f0 --- /dev/null +++ b/src/assets/icons/SendIcon.tsx @@ -0,0 +1,39 @@ +import Svg, { Path, Mask, G } from "react-native-svg" +import React from 'react' +import { IconProps } from '@rn-ui-lib/icons/types'; + +const SendIcon: React.FC = (props) => { + const { fillColor = "#D9D9D9", size = 40, style } = props; + return ( + + + + + + + + + + ) +} + + + + +export default SendIcon; diff --git a/src/common/BlockerScreen.tsx b/src/common/BlockerScreen.tsx index 67bdc2f8..d88117d0 100644 --- a/src/common/BlockerScreen.tsx +++ b/src/common/BlockerScreen.tsx @@ -166,16 +166,16 @@ const BlockerScreen = (props: IBlockerScreen) => { ); } - if (!isTimeSynced) { - const { heading, instructions } = BLOCKER_SCREEN_DATA.TIME_UNSYNC; - return ( - - ); - } + // if (!isTimeSynced) { + // const { heading, instructions } = BLOCKER_SCREEN_DATA.TIME_UNSYNC; + // return ( + // + // ); + // } if (!isDeviceLocationEnabled) { const { heading, instructions } = BLOCKER_SCREEN_DATA.DEVICE_LOCATION_OFF; diff --git a/src/components/utlis/apiHelper.ts b/src/components/utlis/apiHelper.ts index 06ab2286..32db65d5 100644 --- a/src/components/utlis/apiHelper.ts +++ b/src/components/utlis/apiHelper.ts @@ -263,10 +263,10 @@ axiosInstance.interceptors.response.use( }); } - if ([API_STATUS_CODE.UNAUTHORIZED, API_STATUS_CODE.FORBIDDEN].includes(response.status)) { - // Reset user info - dispatch(handleLogout()); - } + // if ([API_STATUS_CODE.UNAUTHORIZED, API_STATUS_CODE.FORBIDDEN].includes(response.status)) { + // // Reset user info + // dispatch(handleLogout()); + // } return Promise.reject(error); } diff --git a/src/constants/config.js b/src/constants/config.js index 8ef9052b..6fa05aeb 100644 --- a/src/constants/config.js +++ b/src/constants/config.js @@ -1,14 +1,14 @@ import { MILLISECONDS_IN_A_MINUTE, MINUTES_IN_AN_HOUR } from '../../RN-UI-LIB/src/utlis/common'; -export const BASE_AV_APP_URL = 'https://longhorn.navi.com/field-app'; +export const BASE_AV_APP_URL = 'https://qa-longhorn-portal.np.navi-tech.in/field-app'; export const SENTRY_DSN = - 'https://5daa4832fade44b389b265de9b26c2fd@longhorn.navi.com/glitchtip-events/172'; -export const JANUS_SERVICE_URL = 'https://longhorn.navi.com/api/events/json'; -export const ENV = 'prod'; + 'https://acef93c884c1424cacc4ec899562e203@qa-longhorn-portal.np.navi-tech.in/glitchtip-events/173'; +export const JANUS_SERVICE_URL = 'https://qa-longhorn-portal.np.navi-tech.in/api/events/json'; +export const ENV = 'qa'; export const IS_SSO_ENABLED = true; export const APM_APP_NAME = 'cosmos-app'; -export const APM_BASE_URL = 'https://longhorn.navi.com/apm-events'; +export const APM_BASE_URL = 'https://qa-longhorn-portal.np.navi-tech.in/apm-events'; export const IS_DATA_SYNC_REQUIRED = true; export const DATA_SYNC_TIME_INTERVAL = 2 * MINUTES_IN_AN_HOUR * MILLISECONDS_IN_A_MINUTE; // 2hr export const GOOGLE_SSO_CLIENT_ID = - '136591056725-ev8db4hrlud2m23n0o03or3cmmp3a3cq.apps.googleusercontent.com'; + '60755663443-40k0fbrbbqv4ci4hrjlbrphab5fj387b.apps.googleusercontent.com'; diff --git a/src/reducer/allCasesSlice.ts b/src/reducer/allCasesSlice.ts index 129588fc..2e951a2a 100644 --- a/src/reducer/allCasesSlice.ts +++ b/src/reducer/allCasesSlice.ts @@ -61,6 +61,7 @@ interface IAllCasesSlice { geolocations?: IGeolocation[]; selectedCaseId: string; filteredListToast: FilteredListToast; + shouldHideTabBar: boolean; } const initialState: IAllCasesSlice = { @@ -89,6 +90,7 @@ const initialState: IAllCasesSlice = { showToast: false, caseType: '', }, + shouldHideTabBar: false, }; const getCaseListComponents = (casesList: ICaseItem[], caseDetails: Record) => { @@ -588,6 +590,9 @@ const allCasesSlice = createSlice({ setFilteredListToast: (state, action) => { state.filteredListToast = action.payload; }, + setShouldHideTabBar: (state, action) => { + state.shouldHideTabBar = action.payload; + } }, }); @@ -611,6 +616,7 @@ export const { setCasesImageUri, setSelectedCaseId, setFilteredListToast, + setShouldHideTabBar } = allCasesSlice.actions; export default allCasesSlice.reducer; diff --git a/src/screens/Profile/Navigation/constants.ts b/src/screens/Profile/Navigation/constants.ts new file mode 100644 index 00000000..69e5530d --- /dev/null +++ b/src/screens/Profile/Navigation/constants.ts @@ -0,0 +1,60 @@ +import { logout } from "@actions/authActions"; +import CSAIcon from "@assets/icons/CSAIcon"; +import CompletedCaseIcon from "@assets/icons/CompletedCaseIcon"; +import { CLICKSTREAM_EVENT_NAMES } from "@common/Constants"; +import { navigateToScreen } from "@components/utlis/navigationUtlis"; +import { MY_CASE_ITEM } from "@reducers/userSlice"; +import LogoutIcon from "@rn-ui-lib/icons/LogoutIcon"; +import { CaseDetailStackEnum } from "@screens/caseDetails/CaseDetailStack"; +import { addClickstreamEvent } from "@services/clickstreamEventService"; +import store from "@store"; +import { Alert } from "react-native"; +import { ProfileScreenStackEnum } from "../ProfileStack"; + + +const {isTeamLead, selectedAgent} = store.getState().user; + +export const NavigationLinks = [ + { + name: "Completed cases", + icon: CompletedCaseIcon, + isVisible: !isTeamLead || selectedAgent?.referenceId === MY_CASE_ITEM.referenceId, + onPress: () => navigateToScreen("completedCases") + }, + { + name: "Tele support", + icon: CSAIcon, + isVisible: true, + onPress: () => navigateToScreen(ProfileScreenStackEnum.TELE_SUPPORT, { + from: "profile" + }), + isNew: true + }, + { + name: "Logout", + icon: LogoutIcon, + isVisible: true, + onPress: () => { + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_PROFILE_PAGE_LOGOUT_BUTTON_CLICKED); + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_PROFILE_PAGE_LOGOUT_CONFIRMATION_OPEN); + Alert.alert('Confirm', 'Are you sure you want to logout? ', [ + { + text: 'Cancel', + style: 'cancel', + onPress: () => { + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_PROFILE_PAGE_LOGOUT_CONFIRMATION_CLOSED); + }, + }, + { + text: 'Logout', + onPress: () => { + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.AV_PROFILE_PAGE_LOGOUT_CONFIRMATION_CLICKED); + store.dispatch(logout()); + }, + style: 'destructive', + }, + ]); + } + + } +]; \ No newline at end of file diff --git a/src/screens/Profile/ProfileButton.tsx b/src/screens/Profile/ProfileButton.tsx new file mode 100644 index 00000000..41cfe71f --- /dev/null +++ b/src/screens/Profile/ProfileButton.tsx @@ -0,0 +1,74 @@ +import { COLORS } from '@rn-ui-lib/colors'; +import Chevron from '@rn-ui-lib/icons/Chevron'; +import { IconProps } from '@rn-ui-lib/icons/types'; +import { GenericStyles } from '@rn-ui-lib/styles'; +import React, { useState } from 'react'; +import { StyleSheet, Text, TouchableHighlight, View } from 'react-native'; + +interface ProfileButtonProps { + onPress: () => void; + name: string; + Icon: React.FC; + tag: string; + NewComponent?: React.FC; +}; + + +const ProfileButton: React.FC = (props) => { + const { onPress, name, Icon, NewComponent } = props; + + const [isPressed, setIsPressed] = useState(false); + const handleOnPress = () => { + setIsPressed(true); + }; + const handleOnPressOut = () => { + setIsPressed(false); + }; + return ( + + + + + {name} + + + {NewComponent ? : null} + + + + + ) +} + + + +const styles = StyleSheet.create({ + borderBottom: { + borderBottomColor: COLORS.BORDER.GREY, + borderBottomWidth: 1 + } +}) + + + +export default ProfileButton; \ No newline at end of file diff --git a/src/screens/Profile/ProfileStack.tsx b/src/screens/Profile/ProfileStack.tsx new file mode 100644 index 00000000..b6383541 --- /dev/null +++ b/src/screens/Profile/ProfileStack.tsx @@ -0,0 +1,63 @@ +import { getScreenFocusListenerObj } from '@components/utlis/commonFunctions'; +import { createNativeStackNavigator } from '@react-navigation/native-stack'; +import CompletedCase from '@screens/allCases/CompletedCase'; +import { DEFAULT_SCREEN_OPTIONS } from '@screens/auth/ProtectedRouter'; +import { RequestDetail, ViewRequestHistory } from '@screens/cosmosSupport'; +import React from 'react'; +import { StyleSheet } from 'react-native'; +import Profile from '.'; + + +const Stack = createNativeStackNavigator(); + + +export enum ProfileScreenStackEnum { + PROFILE = 'profile', + COMPLETED_CASES = 'completedCases', + TELE_SUPPORT = 'teleSupport', + PROFILE_TICKET_DETAIL = 'profileTicketDetail', + +} + + +const ProfileStack = () => { + + return ( + + + + + + + + + ) +} + +const styles = StyleSheet.create({}) + +export default ProfileStack \ No newline at end of file diff --git a/src/screens/Profile/index.tsx b/src/screens/Profile/index.tsx index f4546b2b..3ad16a3a 100644 --- a/src/screens/Profile/index.tsx +++ b/src/screens/Profile/index.tsx @@ -39,6 +39,8 @@ import FloatingBannerCta from '@common/FloatingBannerCta'; import AttendanceIcon from '@assets/icons/AttendanceIcon'; import GoogleFormModal from '@screens/allCases/GoogleFormModal'; import { PageRouteEnum } from '@screens/auth/ProtectedRouter'; +import ProfileButton from './ProfileButton'; +import { NavigationLinks } from './Navigation/constants'; const Profile: React.FC = () => { const [buttonPressedCount, setButtonPressedCount] = useState(0); @@ -126,12 +128,12 @@ const Profile: React.FC = () => { const helpButtonClickHandler = () => Linking.openURL(supportLink); - + const hideUploadImageBtn = approvalStatus === ImageApprovalStatus.PENDING || approvalStatus === ImageApprovalStatus.APPROVED; - + const showCompletedCases = !isTeamLead || selectedAgent?.referenceId === MY_CASE_ITEM.referenceId; @@ -155,16 +157,16 @@ const Profile: React.FC = () => { addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_ID_CARD_CLICKED); navigateToScreen(PageRouteEnum.AGENT_ID_CARD); }} - style={styles.bottomActionable} + style={styles.bottomActionable} > - - - View ID card - - - - + + + View ID card + + + + ) : null } @@ -185,70 +187,33 @@ const Profile: React.FC = () => { ) } /> - - {showCompletedCases ? ( - - {hideUploadImageBtn ? null : } - - - - - Completed cases ({numberOfCompletedCases}) - - {numberOfCompletedCases - ? completeCasesList.slice(0, 2).map((caseItem) => { - const caseDetailItem = caseDetails[caseItem.caseReferenceId] as CaseDetail; - return ( - - ); - }) - : null} - {numberOfCompletedCases > 2 ? ( -