From eb1ec794914ac1366fd97bb99735f9f9f323f2b6 Mon Sep 17 00:00:00 2001 From: Aman Chaturvedi Date: Mon, 16 Dec 2024 17:16:14 +0530 Subject: [PATCH] NTP-7916 | coach mark cosmetic fixes --- src/action/filterActions.ts | 12 ++++++--- src/common/Constants.ts | 10 +++++++ .../Tour/components/CopilotModal.tsx | 18 +++++++++---- .../Tour/components/CopilotStep.tsx | 27 ++++++++----------- src/components/Tour/components/Tooltip.tsx | 24 +++++++++-------- src/components/Tour/components/style.ts | 1 - .../allCasesFilters/FiltersContainer.tsx | 11 +++++--- .../allCases/allCasesFilters/constants.tsx | 4 +-- 8 files changed, 64 insertions(+), 43 deletions(-) diff --git a/src/action/filterActions.ts b/src/action/filterActions.ts index acfc6bde..9f5e2a47 100644 --- a/src/action/filterActions.ts +++ b/src/action/filterActions.ts @@ -2,7 +2,9 @@ import firestore from '@react-native-firebase/firestore'; import dayjs from 'dayjs'; import utc from 'dayjs/plugin/utc'; import timezone from 'dayjs/plugin/timezone'; -import { TIMESTAMP_IST } from '@rn-ui-lib/utils/dates'; +import { TIMESTAMP_IST, TIMEZONE_ASIA } from '@rn-ui-lib/utils/dates'; +import { addClickstreamEvent } from '@services/clickstreamEventService'; +import { CLICKSTREAM_EVENT_NAMES } from '@common/Constants'; dayjs.extend(utc); dayjs.extend(timezone); @@ -15,7 +17,7 @@ export const showCoachMark = async ( const coachMarkDoc = firestore().collection('coachMarks').doc(agentId); const userSnapshot = await coachMarkDoc.get(); let coachMarkData = userSnapshot.data()?.coachMarkData; - const dayJsTime = dayjs().tz('Asia/Kolkata').format(TIMESTAMP_IST); + const dayJsTime = dayjs().tz(TIMEZONE_ASIA).format(TIMESTAMP_IST); const timestamp = serverTimestamp || dayJsTime; if (!coachMarkData) { @@ -26,10 +28,11 @@ export const showCoachMark = async ( }; callback().then( async () => { + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_FILTER_COACHMARKS_LOADED); await coachMarkDoc.set({ coachMarkData }, { merge: true }); }, (error) => { - console.log('error', error); + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_FILTER_COACHMARKS_FAILED); } ); return; @@ -46,10 +49,11 @@ export const showCoachMark = async ( coachMarkData.lastSeenDate = timestamp; callback().then( async () => { + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_FILTER_COACHMARKS_LOADED); await coachMarkDoc.set({ coachMarkData }, { merge: true }); }, (error) => { - console.log('error', error); + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_FILTER_COACHMARKS_FAILED); } ); } diff --git a/src/common/Constants.ts b/src/common/Constants.ts index b654d7ad..51d9e77a 100644 --- a/src/common/Constants.ts +++ b/src/common/Constants.ts @@ -1385,6 +1385,16 @@ export const CLICKSTREAM_EVENT_NAMES = { name: 'FA_PERSIST_ORIGINAL_IMAGE_FAILURE', description: 'Failed to persist original image' }, + + // Filter coachmarks + FA_FILTER_COACHMARKS_LOADED: { + name: 'FA_FILTER_COACHMARKS_LOADED', + description: 'Filter coachmarks loaded' + }, + FA_FILTER_COACHMARKS_FAILED: { + name: 'FA_FILTER_COACHMARKS_FAILED', + description: 'Filter coachmarks failed' + } } as const; export enum MimeType { diff --git a/src/components/Tour/components/CopilotModal.tsx b/src/components/Tour/components/CopilotModal.tsx index b4c2b243..c176d1a6 100644 --- a/src/components/Tour/components/CopilotModal.tsx +++ b/src/components/Tour/components/CopilotModal.tsx @@ -60,6 +60,7 @@ export const CopilotModal = forwardRef(funct setStylesForNoHighlightArea(rect); return; } + // center of the coachmark element const center = { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2, @@ -70,24 +71,31 @@ export const CopilotModal = forwardRef(funct const relativeToBottom = Math.abs(center.y - SCREEN_HEIGHT); const relativeToRight = Math.abs(center.x - SCREEN_WIDTH); + // position of tooltip const verticalPosition = relativeToBottom > relativeToTop ? 'bottom' : 'top'; const horizontalPosition = relativeToLeft > relativeToRight ? 'left' : 'right'; const tooltip: ViewStyle = {}; if (verticalPosition === 'bottom') { + // if the tooltip is at the bottom, we need to add some margin to the bottom tooltip.top = rect.y + rect.height + margin; } else { + // if the tooltip is at the top, we need to add some margin to the top tooltip.bottom = noHighlightArea ? 40 : SCREEN_HEIGHT - rect.y + margin + margin; } if (horizontalPosition === 'left') { + // if the tooltip is at the left, we need to add some margin to the left tooltip.right = Math.min(SCREEN_WIDTH - (rect.x + rect.width), 24); } else { + // if the tooltip is at the right, we need to add some margin to the right tooltip.left = noHighlightArea ? 50 : Math.min(rect.x, 24); } setTooltipStyles(tooltip); + + // highlight area dimensions and position setMaskRect({ width: rect.width, height: rect.height, @@ -144,14 +152,14 @@ export const CopilotModal = forwardRef(funct transparent style={{ backgroundColor: 'transparent' }} > - - {showMask ? : null} - {showMask ? ( + {showMask ? ( + + - ) : null} - + + ) : null} ); }); diff --git a/src/components/Tour/components/CopilotStep.tsx b/src/components/Tour/components/CopilotStep.tsx index 53ae5f4b..c9e8276a 100644 --- a/src/components/Tour/components/CopilotStep.tsx +++ b/src/components/Tour/components/CopilotStep.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useRef } from 'react'; -import { View, type NativeMethods } from 'react-native'; +import { StyleSheet, View, type NativeMethods } from 'react-native'; import { useCopilot } from '../contexts/CopilotProvider'; import { GenericStyles, SCREEN_HEIGHT, SCREEN_WIDTH } from '@rn-ui-lib/styles'; import { CopilotStepProps } from '../types'; @@ -97,22 +97,17 @@ export const CopilotStep = ({ if (!isNoHighlightAreaStepActive) { return null; } - return ( - - {children} - - ); + return {children}; } return React.cloneElement(children, { ...copilotProps, ref: wrapperRef }); }; + +const styles = StyleSheet.create({ + wrapper: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + position: 'absolute', + backgroundColor: 'rgba(0, 0, 0, 0.5)', + }, +}); diff --git a/src/components/Tour/components/Tooltip.tsx b/src/components/Tour/components/Tooltip.tsx index 02de9d66..41d77c42 100644 --- a/src/components/Tour/components/Tooltip.tsx +++ b/src/components/Tour/components/Tooltip.tsx @@ -24,7 +24,7 @@ export const Tooltip: React.FC = ({ labels }) => { useEffect(() => { if (currentStepNumber) { tooltipOpacity.value = 0; - tooltipOpacity.value = withTiming(1, { duration: 1000 }); + tooltipOpacity.value = withTiming(1, { duration: 700 }); } }, [currentStepNumber]); @@ -50,7 +50,7 @@ export const Tooltip: React.FC = ({ labels }) => { }; return ( - + {currentStep?.text} @@ -59,7 +59,7 @@ export const Tooltip: React.FC = ({ labels }) => { GenericStyles.row, GenericStyles.alignCenter, GenericStyles.mt16, - { alignSelf: 'flex-end' }, + GenericStyles.spaceBetween, ]} > {totalStepsNumber > 1 ? ( @@ -67,14 +67,7 @@ export const Tooltip: React.FC = ({ labels }) => { {currentStepNumber}/{totalStepsNumber} ) : null} - -