@oxyhq/services 5.13.29 → 5.13.31

package/lib/commonjs/ui/screens/AccountSettingsScreen.js

@@ -30,7 +30,8 @@ const AccountSettingsScreen = ({
   theme,
   goBack,
   navigate,
-  initialField
+  initialField,
+  initialSection
 }) => {
   const {
     user: userFromContext,
@@ -54,6 +55,20 @@ const AccountSettingsScreen = ({
   const avatarSectionRef = (0, _react.useRef)(null);
   const [avatarSectionY, setAvatarSectionY] = (0, _react.useState)(null);
 
+  // Section refs for navigation
+  const profilePictureSectionRef = (0, _react.useRef)(null);
+  const basicInfoSectionRef = (0, _react.useRef)(null);
+  const aboutSectionRef = (0, _react.useRef)(null);
+  const quickActionsSectionRef = (0, _react.useRef)(null);
+  const securitySectionRef = (0, _react.useRef)(null);
+
+  // Section Y positions for scrolling
+  const [profilePictureSectionY, setProfilePictureSectionY] = (0, _react.useState)(null);
+  const [basicInfoSectionY, setBasicInfoSectionY] = (0, _react.useState)(null);
+  const [aboutSectionY, setAboutSectionY] = (0, _react.useState)(null);
+  const [quickActionsSectionY, setQuickActionsSectionY] = (0, _react.useState)(null);
+  const [securitySectionY, setSecuritySectionY] = (0, _react.useState)(null);
+
   // Two-Factor (TOTP) state
   const [totpSetupUrl, setTotpSetupUrl] = (0, _react.useState)(null);
   const [totpCode, setTotpCode] = (0, _react.useState)('');
@@ -224,19 +239,67 @@ const AccountSettingsScreen = ({
   // Use a ref to track if we've already set the initial field to avoid loops
   const hasSetInitialFieldRef = (0, _react.useRef)(false);
   const previousInitialFieldRef = (0, _react.useRef)(undefined);
+  const initialFieldTimeoutRef = (0, _react.useRef)(null);
+
+  // Delay constant for scroll completion
+  const SCROLL_DELAY_MS = 600;
+
+  // Helper to get current value for a field
+  const getFieldCurrentValue = (0, _react.useCallback)(field => {
+    switch (field) {
+      case 'displayName':
+        return displayName;
+      case 'username':
+        return username;
+      case 'email':
+        return email;
+      case 'bio':
+        return bio;
+      case 'location':
+      case 'links':
+      case 'twoFactor':
+        return '';
+      default:
+        return '';
+    }
+  }, [displayName, username, email, bio]);
+
+  // Handle initialSection prop to scroll to specific section
+  const hasScrolledToSectionRef = (0, _react.useRef)(false);
+  const previousInitialSectionRef = (0, _react.useRef)(undefined);
+  const SCROLL_OFFSET = 100; // Offset to show section near top of viewport
+
+  // Map section names to their Y positions
+  const sectionYPositions = (0, _react.useMemo)(() => ({
+    profilePicture: profilePictureSectionY,
+    basicInfo: basicInfoSectionY,
+    about: aboutSectionY,
+    quickActions: quickActionsSectionY,
+    security: securitySectionY
+  }), [profilePictureSectionY, basicInfoSectionY, aboutSectionY, quickActionsSectionY, securitySectionY]);
   (0, _react.useEffect)(() => {
-    // If initialField changed, reset the flag
-    if (previousInitialFieldRef.current !== initialField) {
-      hasSetInitialFieldRef.current = false;
-      previousInitialFieldRef.current = initialField;
+    // If initialSection changed, reset the flag
+    if (previousInitialSectionRef.current !== initialSection) {
+      hasScrolledToSectionRef.current = false;
+      previousInitialSectionRef.current = initialSection;
     }
 
-    // Set the editing field if initialField is provided and we haven't set it yet
-    if (initialField && !hasSetInitialFieldRef.current) {
-      setEditingField(initialField);
-      hasSetInitialFieldRef.current = true;
+    // Scroll to the specified section if initialSection is provided and we haven't scrolled yet
+    if (initialSection && !hasScrolledToSectionRef.current) {
+      const sectionY = sectionYPositions[initialSection];
+      if (sectionY !== null && sectionY !== undefined && scrollViewRef.current) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            scrollViewRef.current?.scrollTo({
+              y: Math.max(0, sectionY - SCROLL_OFFSET),
+              animated: true
+            });
+            hasScrolledToSectionRef.current = true;
+          });
+        });
+      }
     }
-  }, [initialField]);
+  }, [initialSection, sectionYPositions]);
   const handleSave = async () => {
     if (!user) return;
     try {
@@ -381,7 +444,7 @@ const AccountSettingsScreen = ({
       }
     });
   }, [showBottomSheet, oxyServices, avatarFileId, updateUser, user]);
-  const startEditing = (type, currentValue) => {
+  const startEditing = (0, _react.useCallback)((type, currentValue) => {
     switch (type) {
       case 'displayName':
         setTempDisplayName(displayName);
@@ -410,7 +473,49 @@ const AccountSettingsScreen = ({
         break;
     }
     setEditingField(type);
-  };
+  }, [displayName, lastName]);
+
+  // Handle initialField prop - must be after startEditing and openAvatarPicker are declared
+  (0, _react.useEffect)(() => {
+    // Clear any pending timeout
+    if (initialFieldTimeoutRef.current) {
+      clearTimeout(initialFieldTimeoutRef.current);
+      initialFieldTimeoutRef.current = null;
+    }
+
+    // If initialField changed, reset the flag
+    if (previousInitialFieldRef.current !== initialField) {
+      hasSetInitialFieldRef.current = false;
+      previousInitialFieldRef.current = initialField;
+    }
+
+    // Set the editing field if initialField is provided and we haven't set it yet
+    if (initialField && !hasSetInitialFieldRef.current) {
+      // Special handling for avatar - open avatar picker directly
+      if (initialField === 'avatar') {
+        // Wait for section to be scrolled, then open picker
+        initialFieldTimeoutRef.current = setTimeout(() => {
+          openAvatarPicker();
+          hasSetInitialFieldRef.current = true;
+        }, SCROLL_DELAY_MS);
+      } else {
+        // For other fields, get current value and start editing after scroll
+        const currentValue = getFieldCurrentValue(initialField);
+
+        // Wait for section to be scrolled, then start editing
+        initialFieldTimeoutRef.current = setTimeout(() => {
+          startEditing(initialField, currentValue);
+          hasSetInitialFieldRef.current = true;
+        }, SCROLL_DELAY_MS);
+      }
+    }
+    return () => {
+      if (initialFieldTimeoutRef.current) {
+        clearTimeout(initialFieldTimeoutRef.current);
+        initialFieldTimeoutRef.current = null;
+      }
+    };
+  }, [initialField, getFieldCurrentValue, startEditing, openAvatarPicker]);
   const saveField = type => {
     animateSaveButton(0.95); // Scale down slightly for animation
 
@@ -1409,13 +1514,17 @@ const AccountSettingsScreen = ({
             })]
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          ref: avatarSectionRef,
+          ref: ref => {
+            avatarSectionRef.current = ref;
+            profilePictureSectionRef.current = ref;
+          },
           style: styles.section,
           onLayout: event => {
             const {
               y
             } = event.nativeEvent.layout;
             setAvatarSectionY(y);
+            setProfilePictureSectionY(y);
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
@@ -1482,7 +1591,14 @@ const AccountSettingsScreen = ({
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ref: basicInfoSectionRef,
           style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setBasicInfoSectionY(y);
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
               color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
@@ -1517,7 +1633,14 @@ const AccountSettingsScreen = ({
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ref: aboutSectionRef,
           style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setAboutSectionY(y);
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
               color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
@@ -1612,7 +1735,14 @@ const AccountSettingsScreen = ({
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ref: quickActionsSectionRef,
           style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setQuickActionsSectionY(y);
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
               color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'
@@ -1649,7 +1779,14 @@ const AccountSettingsScreen = ({
             })
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          ref: securitySectionRef,
           style: styles.section,
+          onLayout: event => {
+            const {
+              y
+            } = event.nativeEvent.layout;
+            setSecuritySectionY(y);
+          },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: [styles.sectionTitle, {
               color: themeStyles.isDarkTheme ? '#8E8E93' : '#8E8E93'