fix: vm small bug fixes

monkvision · Nov 24, 2023 · 9db0bd0 · 9db0bd0
1 parent b49dd04
commit 9db0bd0
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 16 deletions.
diff --git a/eas.json b/eas.json
@@ -34,11 +34,11 @@
       "distribution": "internal",
       "env": {
         "ENV": "staging",
-        "IRA_DOMAIN": "ira-staging.dev.monk.ai",
-        "API_DOMAIN": "api.staging.monk.ai/v1",
+        "IRA_DOMAIN": "ira.preview.monk.ai",
+        "API_DOMAIN": "api.preview.monk.ai/v1",
         "AUTH_AUDIENCE": "https://api.monk.ai/v1/",
-        "AUTH_CLIENT_ID": "DAeZWqeeOfgItYBcQzFeFwSrlvmUdN7L",
-        "AUTH_DOMAIN": "idp.staging.monk.ai",
+        "AUTH_CLIENT_ID": "soZ7P2c6b9I5jarQoRrhh87x9TpOSaGn",
+        "AUTH_DOMAIN": "idp.preview.monk.ai",
         "SENTRY_DSN": "https://56d057cf1dd65909c21f471cf7decab3@o4505669501648896.ingest.sentry.io/4505673908355072",
         "PDF_REPORT_CUSTOMER": "monk_QSBtYXJ0aW5pLiBTaGFrZW4sIG5vdCBzdGlycmVkLgo=",
         "PDF_REPORT_CLIENT_NAME": "Monk"

diff --git a/packages/inspection-report/src/components/DamageReport/UpdateDamageModal.js b/packages/inspection-report/src/components/DamageReport/UpdateDamageModal.js
@@ -17,6 +17,7 @@ import { useTranslation } from 'react-i18next';
 import { CommonPropTypes, DamageMode } from '../../resources';
 
 import DamageManipulator from './DamageManipulator';
+import { useDamageVisibility } from '../../hooks';
 
 const styles = StyleSheet.create({
   container: {
@@ -115,7 +116,7 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
   const { width, height } = useWindowDimensions();
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
   const [gestureState, setGestureState] = useState({});
-  const [seeDamages, setSeeDamages] = useState(false);
+  const { visibleDamages, updateVisibility } = useDamageVisibility();
   const pan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
   const [fullScreenPhoto, setFullScreenPhoto] = useState(null);
 
@@ -131,7 +132,7 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
   ).current;
 
   const handleClosePreview = useCallback(() => setFullScreenPhoto(null), []);
-  const handleVisibilityOfDamages = useCallback(() => setSeeDamages(!seeDamages), [seeDamages]);
+  const handleVisibilityOfDamages = useCallback(() => updateVisibility(!visibleDamages), [visibleDamages]);
 
   useEffect(() => {
     if (
@@ -190,7 +191,7 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
               source={{
                 width: '100%',
                 height: '100%',
-                uri: seeDamages ? fullScreenPhoto?.rendered_outputs?.url : fullScreenPhoto?.url,
+                uri: visibleDamages ? fullScreenPhoto?.rendered_outputs?.url : fullScreenPhoto?.url,
               }}
               style={{ resizeMode: 'contain' }}
             />
@@ -212,8 +213,8 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
             </Pressable>
             <Text style={styles.header}>{t(`damageReport.parts.${part}`)}</Text>
             <Pressable style={styles.damageIconWrapper} onPress={handleVisibilityOfDamages}>
-              <MaterialIcons name={seeDamages ? "visibility-off" : "visibility"} size={20} color="#fff" />
-              <Text style={styles.damageLabel}>{seeDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
+              <MaterialIcons name={visibleDamages ? "visibility-off" : "visibility"} size={20} color="#fff" />
+              <Text style={styles.damageLabel}>{visibleDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
             </Pressable>
           </View>
           <View
@@ -228,7 +229,7 @@ function UpdateDamageModal({ part, damageMode, damage, onConfirm, onDismiss, ima
                     source={{
                       width: '100%',
                       height: '100%',
-                      uri: seeDamages ? image?.rendered_outputs?.url : image?.url,
+                      uri: visibleDamages ? image?.rendered_outputs?.url : image?.url,
                     }}
                     style={{ resizeMode: 'cover' }}
                   />

diff --git a/packages/inspection-report/src/components/Gallery/index.js b/packages/inspection-report/src/components/Gallery/index.js
@@ -16,7 +16,7 @@ import { MaterialIcons } from '@expo/vector-icons';
 import { useTranslation } from 'react-i18next';
 
 import Thumbnail from './Thumbnail';
-import { useDesktopMode } from './../../hooks';
+import { useDesktopMode, useDamageVisibility } from './../../hooks';
 
 const styles = StyleSheet.create({
   container: {
@@ -91,13 +91,13 @@ function Gallery({ pictures }) {
   const isDesktopMode = useDesktopMode();
   const [focusedPhoto, setFocusedPhoto] = useState(null);
   const [isZoomed, setIsZoomed] = useState(false);
-  const [seeDamages, setSeeDamages] = useState(false);
   const { width, height } = useWindowDimensions();
   const [gestureState, setGestureState] = useState({});
   const scale = useRef(new Animated.Value(1)).current;
   const transform = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
+  const { visibleDamages, updateVisibility } = useDamageVisibility();
 
-  const handleVisibilityOfDamages = useCallback(() => setSeeDamages(!seeDamages), [seeDamages]);
+  const handleVisibilityOfDamages = useCallback(() => updateVisibility(!visibleDamages), [visibleDamages]);
   const handleOnImageClick = useCallback((focusedImage) => {
     if (focusedImage.url) {
       setFocusedPhoto(focusedImage);
@@ -254,14 +254,14 @@ function Gallery({ pictures }) {
           {
             !isDesktopMode && (
               <Pressable style={styles.damageIconWrapper} onPress={handleVisibilityOfDamages}>
-                <MaterialIcons name={seeDamages ? "visibility-off" : "visibility"} size={20} color="#fff" />
-                <Text style={styles.damageLabel}>{seeDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
+                <MaterialIcons name={visibleDamages ? "visibility-off" : "visibility"} size={20} color="#fff" />
+                <Text style={styles.damageLabel}>{visibleDamages ? t(`damageReport.hideDamages`) : t(`damageReport.showDamages`)}</Text>
               </Pressable>
             )
           }
 
           <Animated.Image
-            source={{ uri: seeDamages ? focusedPhoto?.rendered_outputs?.url : focusedPhoto?.url }}
+            source={{ uri: visibleDamages ? focusedPhoto?.rendered_outputs?.url : focusedPhoto?.url }}
             style={{
               flex: 1,
               cursor: !isDesktopMode ? 'auto' : isZoomed ? 'zoom-out' : 'zoom-in',

diff --git a/packages/inspection-report/src/hooks/index.js b/packages/inspection-report/src/hooks/index.js
@@ -1,4 +1,5 @@
 // eslint-disable-next-line import/prefer-default-export
+export { default as useDamageVisibility } from './useDamageVisibility';
 export { default as useDesktopMode } from './useDesktopMode';
 export { default as useOrientation, ORIENTATION_MODE } from './useOrientation';
 export * from './useCurrency';
diff --git a/packages/inspection-report/src/hooks/useDamageVisibility.js b/packages/inspection-report/src/hooks/useDamageVisibility.js
@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+
+export default function useDamageVisibility() {
+  const [visibleDamages, setVisibleDamages] = useState(true);
+
+  const updateVisibility = useCallback((visible) => {
+    setVisibleDamages(visible);
+  }, []);
+
+  return {
+    visibleDamages,
+    updateVisibility,
+  };
+}