diff --git a/App.tsx b/App.tsx index b33706e4..302a68ce 100644 --- a/App.tsx +++ b/App.tsx @@ -120,11 +120,13 @@ function App() { modalRef.current?.show(); break; case codePush.SyncStatus.INSTALLING_UPDATE: + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_INSTALLING_CODEPUSH, {}) break; case codePush.SyncStatus.UP_TO_DATE: modalRef.current?.hide(); break; default: + addClickstreamEvent(CLICKSTREAM_EVENT_NAMES.FA_CODEPUSH_DEFAULT_STATUS, {}) modalRef.current?.hide(); break; } diff --git a/CodePushModal.tsx b/CodePushModal.tsx index 4f1ff25d..810dc3fa 100644 --- a/CodePushModal.tsx +++ b/CodePushModal.tsx @@ -7,6 +7,8 @@ import ModalWrapperForAlfredV2 from '@common/ModalWrapperForAlfredV2'; import LottieView from 'lottie-react-native'; import Text from '@rn-ui-lib/components/Text'; import NaviLogoWithTextIcon from '@rn-ui-lib/icons/NaviLogoWithTextIcon'; +import {GenericStyles} from "@rn-ui-lib/styles"; +import lottieJson from './loader.json'; export interface CodePushLoadingModalRef { show: () => void; @@ -14,6 +16,7 @@ export interface CodePushLoadingModalRef { updateProgress: (progress: DownloadProgress) => void; } + const CodePushLoadingModal = forwardRef((_, ref) => { const [visible, setVisible] = useState(false); const [progress, setProgress] = useState(); @@ -33,10 +36,10 @@ const CodePushLoadingModal = forwardRef((_, ref) => { - + @@ -52,7 +55,7 @@ const CodePushLoadingModal = forwardRef((_, ref) => { ) : null} - + @@ -61,6 +64,20 @@ const CodePushLoadingModal = forwardRef((_, ref) => { }); const styles = StyleSheet.create({ + LottieContainerStyles: { + alignItems: 'center', + marginBottom: 24 + }, + LottieStyles: { + height: 140, + width: 140 + }, + header: { + color: COLORS.TEXT.BLACK_24, + fontSize: 14, + paddingBottom: 6, + paddingTop: 24, + }, modalContainer: { flex: 1, padding: 20, @@ -69,23 +86,18 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', }, - header: { - fontSize: 14, - color: COLORS.TEXT.BLACK_24, - paddingTop: 24, - paddingBottom: 6, + progressBar: { + height: 2, + marginTop: 10, + width: '100%', }, progressText: { color: COLORS.TEXT.BLACK_24, fontSize: 14, fontWeight: '700', marginTop: 6, - }, - progressBar: { - width: '100%', - height: 2, - marginTop: 10, - }, + } }); +CodePushLoadingModal.displayName = 'codepush-loading-modal'; export default CodePushLoadingModal; diff --git a/ProgressBar.tsx b/ProgressBar.tsx index ef1078e7..45ff89cd 100644 --- a/ProgressBar.tsx +++ b/ProgressBar.tsx @@ -2,14 +2,20 @@ import { COLORS } from '@rn-ui-lib/colors'; import React, { useState, useEffect } from 'react'; import { View, Text, Animated, StyleSheet } from 'react-native'; -const ProgressBar = ({ progress, height = 10, color = '#18bf5f' }) => { + +type ProgressBarProps = { + progress: number; + height?: number; + color?: string; +} + +const ProgressBar = ({ progress, height = 10, color = '#18bf5f' }: ProgressBarProps ) => { const [animatedWidth] = useState(new Animated.Value(0)); console.log({ progress }); useEffect(() => { Animated.timing(animatedWidth, { toValue: progress * 100, - duration: 500, useNativeDriver: false, }).start(); }, [progress]); diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml index 914f910b..5196a3d8 100644 --- a/android/app/src/main/res/values/strings.xml +++ b/android/app/src/main/res/values/strings.xml @@ -2,7 +2,7 @@ Cosmos DO_NOT_ASK_JAVASCRIPT ALWAYS_SEND - pastekeyhere + llmg8BO8mnvrryZvfq175t6xyOdVFPn_EbDOr Bottom Sheet Overlay Something Went Wrong Crash Occurred diff --git a/src/common/Constants.ts b/src/common/Constants.ts index d2fd3918..7d987474 100644 --- a/src/common/Constants.ts +++ b/src/common/Constants.ts @@ -1293,6 +1293,14 @@ export const CLICKSTREAM_EVENT_NAMES = { name: 'FA_CALLING_FEEDBACK_NUDGE_CLOSED', description: 'Feedback nudge closed' }, + FA_INSTALLING_CODEPUSH: { + name : 'FA_INSTALLING_CODEPUSH', + description: 'Codepush installation started' + }, + FA_CODEPUSH_DEFAULT_STATUS: { + name : 'FA_CODEPUSH_DEFAULT_STATUS', + description: 'Codepush default fallback case' + } } as const;