react-native-rectangle-doc-scanner 3.115.0 → 3.118.0

package/dist/FullDocScanner.js

@@ -125,19 +125,13 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const [rotationDegrees, setRotationDegrees] = (0, react_1.useState)(0);
     const [capturedPhotos, setCapturedPhotos] = (0, react_1.useState)([]);
     const [currentPhotoIndex, setCurrentPhotoIndex] = (0, react_1.useState)(0);
-    const [previewPhotoIndex, setPreviewPhotoIndex] = (0, react_1.useState)(0);
     const resolvedGridColor = gridColor ?? overlayColor;
     const docScannerRef = (0, react_1.useRef)(null);
     const captureModeRef = (0, react_1.useRef)(null);
     const captureInProgressRef = (0, react_1.useRef)(false);
     const rectangleCaptureTimeoutRef = (0, react_1.useRef)(null);
     const rectangleHintTimeoutRef = (0, react_1.useRef)(null);
-    const currentPhotoIndexRef = (0, react_1.useRef)(currentPhotoIndex);
     const isBusinessMode = type === 'business';
-    const maxPhotos = isBusinessMode ? 2 : 1;
-    (0, react_1.useEffect)(() => {
-        currentPhotoIndexRef.current = currentPhotoIndex;
-    }, [currentPhotoIndex]);
     const mergedStrings = (0, react_1.useMemo)(() => ({
         captureHint: strings?.captureHint,
         manualHint: strings?.manualHint,
@@ -190,7 +184,6 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 hasBase64: !!croppedImage.data,
             });
             setProcessing(false);
-            setPreviewPhotoIndex(currentPhotoIndexRef.current);
             // Show confirmation screen
             setCroppedImageData({
                 path: croppedImage.path,
@@ -237,8 +230,6 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             console.warn('[FullDocScanner] Missing capture mode for capture result, ignoring');
             return;
         }
-        const previewIndex = currentPhotoIndexRef.current;
-        setPreviewPhotoIndex(previewIndex);
         const normalizedDoc = normalizeCapturedDocument(document);
         if (captureMode === 'no-grid') {
             console.log('[FullDocScanner] No grid at capture button press: opening cropper for manual selection');
@@ -400,21 +391,25 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             rotationDegrees: rotationNormalized,
         };
         const updatedPhotos = [...capturedPhotos, currentPhoto];
-        console.log('[FullDocScanner] Photos captured:', updatedPhotos.length, 'of', maxPhotos);
-        // Business 모드이고 아직 첫 번째 사진만 찍은 경우
-        if (isBusinessMode && updatedPhotos.length === 1) {
-            // 두 번째 사진 촬영 여부를 물어봄 (UI에서 버튼으로 표시)
-            setCapturedPhotos(updatedPhotos);
-            setCurrentPhotoIndex(1);
-            // 확인 화면을 유지하고 "뒷면 촬영" 버튼을 표시
-            return;
-        }
-        // 모든 사진 촬영 완료 - 결과 반환
-        console.log('[FullDocScanner] All photos captured, returning results');
+        console.log('[FullDocScanner] Photos captured:', updatedPhotos.length);
+        // 결과 반환
+        console.log('[FullDocScanner] Returning results');
         onResult(updatedPhotos);
-    }, [croppedImageData, rotationDegrees, capturedPhotos, isBusinessMode, maxPhotos, onResult]);
+    }, [croppedImageData, rotationDegrees, capturedPhotos, onResult]);
     const handleCaptureSecondPhoto = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Capturing second photo');
+        if (!croppedImageData) {
+            return;
+        }
+        // 현재 사진(앞면)을 먼저 저장
+        const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
+        const currentPhoto = {
+            path: croppedImageData.path,
+            base64: croppedImageData.base64,
+            rotationDegrees: rotationNormalized,
+        };
+        setCapturedPhotos([currentPhoto]);
+        setCurrentPhotoIndex(1);
         // 확인 화면을 닫고 카메라로 돌아감
         setCroppedImageData(null);
         setRotationDegrees(0);
@@ -434,27 +429,19 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         if (docScannerRef.current?.reset) {
             docScannerRef.current.reset();
         }
-    }, []);
-    const handleSkipSecondPhoto = (0, react_1.useCallback)(() => {
-        console.log('[FullDocScanner] Skipping second photo');
-        // 첫 번째 사진만 반환
-        onResult(capturedPhotos);
-    }, [capturedPhotos, onResult]);
+    }, [croppedImageData, rotationDegrees]);
     const handleRetake = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
-        if (isBusinessMode) {
-            if (currentPhotoIndex === 1 && previewPhotoIndex === 0 && capturedPhotos.length === 1) {
-                console.log('[FullDocScanner] Retake detected on front preview after confirmation - reverting to front capture');
-                setCapturedPhotos([]);
-                setCurrentPhotoIndex(0);
-                setPreviewPhotoIndex(0);
-            }
-            else if (previewPhotoIndex === 1 && capturedPhotos.length === 2) {
-                console.log('[FullDocScanner] Retake detected on back preview after final confirmation - removing back photo');
-                setCapturedPhotos(capturedPhotos.slice(0, 1));
-                setCurrentPhotoIndex(1);
-                setPreviewPhotoIndex(1);
-            }
+        // Business 모드에서 두 번째 사진을 다시 찍는 경우, 첫 번째 사진 유지
+        if (isBusinessMode && capturedPhotos.length === 1) {
+            console.log('[FullDocScanner] Retake detected on back photo - keeping front photo');
+            setCurrentPhotoIndex(1);
+        }
+        else {
+            // 첫 번째 사진 또는 일반 모드: 모든 상태 초기화
+            console.log('[FullDocScanner] Retake detected - resetting all photos');
+            setCapturedPhotos([]);
+            setCurrentPhotoIndex(0);
         }
         setCroppedImageData(null);
         setRotationDegrees(0);
@@ -475,7 +462,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         if (docScannerRef.current?.reset) {
             docScannerRef.current.reset();
         }
-    }, [capturedPhotos, currentPhotoIndex, isBusinessMode, previewPhotoIndex]);
+    }, [capturedPhotos.length, isBusinessMode]);
     const handleRectangleDetect = (0, react_1.useCallback)((event) => {
         const stableCounter = event.stableCounter ?? 0;
         const rectangleCoordinates = event.rectangleOnScreen ?? event.rectangleCoordinates;
@@ -529,7 +516,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         // check_DP: Show confirmation screen
         react_1.default.createElement(react_native_1.View, { style: styles.confirmationContainer },
             isBusinessMode && (react_1.default.createElement(react_native_1.View, { style: styles.photoHeader },
-                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, previewPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
+                react_1.default.createElement(react_native_1.Text, { style: styles.photoHeaderText }, currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second))),
             isImageRotationSupported() ? (react_1.default.createElement(react_native_1.View, { style: styles.rotateButtonsCenter },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(-90), accessibilityLabel: "\uC67C\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BA"),
@@ -537,27 +524,17 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.rotateButtonTop, onPress: () => handleRotateImage(90), accessibilityLabel: "\uC624\uB978\uCABD\uC73C\uB85C 90\uB3C4 \uD68C\uC804", accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateIconText }, "\u21BB"),
                     react_1.default.createElement(react_native_1.Text, { style: styles.rotateButtonLabel }, "\uC6B0\uB85C 90\u00B0")))) : null,
+            isBusinessMode && capturedPhotos.length === 0 && (react_1.default.createElement(react_native_1.TouchableOpacity, { style: styles.captureBackButton, onPress: handleCaptureSecondPhoto, accessibilityLabel: mergedStrings.secondBtn, accessibilityRole: "button" },
+                react_1.default.createElement(react_native_1.Text, { style: styles.captureBackButtonText }, mergedStrings.secondBtn))),
             react_1.default.createElement(react_native_1.Image, { source: { uri: croppedImageData.path }, style: [
                     styles.previewImage,
                     { transform: [{ rotate: `${rotationDegrees}deg` }] }
                 ], resizeMode: "contain" }),
-            isBusinessMode &&
-                capturedPhotos.length === 1 &&
-                currentPhotoIndex === 1 &&
-                previewPhotoIndex === 0 &&
-                mergedStrings.secondPrompt ? (react_1.default.createElement(react_native_1.Text, { style: styles.confirmationPromptText }, mergedStrings.secondPrompt)) : null,
             react_1.default.createElement(react_native_1.View, { style: styles.confirmationButtons },
                 react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.retakeButton], onPress: handleRetake, accessibilityLabel: mergedStrings.retake, accessibilityRole: "button" },
                     react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.retake)),
-                isBusinessMode &&
-                    capturedPhotos.length === 1 &&
-                    currentPhotoIndex === 1 &&
-                    previewPhotoIndex === 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.confirmButtonPrimary], onPress: handleCaptureSecondPhoto, accessibilityLabel: mergedStrings.secondBtn, accessibilityRole: "button" },
-                        react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.secondBtn)),
-                    react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.skipButton], onPress: handleSkipSecondPhoto, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button" },
-                        react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.confirm)))) : (react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.confirmButtonPrimary], onPress: handleConfirm, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button" },
-                    react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.confirm)))))) : (react_1.default.createElement(react_native_1.View, { style: styles.flex },
+                react_1.default.createElement(react_native_1.TouchableOpacity, { style: [styles.confirmButton, styles.confirmButtonPrimary], onPress: handleConfirm, accessibilityLabel: mergedStrings.confirm, accessibilityRole: "button" },
+                    react_1.default.createElement(react_native_1.Text, { style: styles.confirmButtonText }, mergedStrings.confirm))))) : (react_1.default.createElement(react_native_1.View, { style: styles.flex },
             react_1.default.createElement(DocScanner_1.DocScanner, { ref: docScannerRef, autoCapture: false, overlayColor: overlayColor, showGrid: showGrid, gridColor: resolvedGridColor, gridLineWidth: gridLineWidth, minStableFrames: minStableFrames ?? 6, detectionConfig: detectionConfig, onCapture: handleCapture, onRectangleDetect: handleRectangleDetect, showManualCaptureButton: false, enableTorch: flashEnabled },
                 react_1.default.createElement(react_native_1.View, { style: styles.overlayTop, pointerEvents: "box-none" },
                     react_1.default.createElement(react_native_1.TouchableOpacity, { style: [
@@ -820,4 +797,24 @@ const styles = react_native_1.StyleSheet.create({
         paddingVertical: 6,
         borderRadius: 16,
     },
+    captureBackButton: {
+        position: 'absolute',
+        bottom: 140,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+        zIndex: 15,
+    },
+    captureBackButtonText: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+        // backgroundColor: 'rgba(255,100,50,0.9)',
+        paddingHorizontal: 32,
+        paddingVertical: 14,
+        borderRadius: 24,
+        borderWidth: 2,
+        borderColor: '#fff',
+        overflow: 'hidden',
+    },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.115.0",
+  "version": "3.118.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",

package/src/FullDocScanner.tsx

@@ -183,21 +183,14 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   const [rotationDegrees, setRotationDegrees] = useState(0);
   const [capturedPhotos, setCapturedPhotos] = useState<FullDocScannerResult[]>([]);
   const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
-  const [previewPhotoIndex, setPreviewPhotoIndex] = useState(0);
   const resolvedGridColor = gridColor ?? overlayColor;
   const docScannerRef = useRef<DocScannerHandle | null>(null);
   const captureModeRef = useRef<'grid' | 'no-grid' | null>(null);
   const captureInProgressRef = useRef(false);
   const rectangleCaptureTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const rectangleHintTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const currentPhotoIndexRef = useRef(currentPhotoIndex);
 
   const isBusinessMode = type === 'business';
-  const maxPhotos = isBusinessMode ? 2 : 1;
-
-  useEffect(() => {
-    currentPhotoIndexRef.current = currentPhotoIndex;
-  }, [currentPhotoIndex]);
 
   const mergedStrings = useMemo(
     () => ({
@@ -269,8 +262,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
         setProcessing(false);
 
-        setPreviewPhotoIndex(currentPhotoIndexRef.current);
-
         // Show confirmation screen
         setCroppedImageData({
           path: croppedImage.path,
@@ -333,9 +324,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
         return;
       }
 
-      const previewIndex = currentPhotoIndexRef.current;
-      setPreviewPhotoIndex(previewIndex);
-
       const normalizedDoc = normalizeCapturedDocument(document);
 
       if (captureMode === 'no-grid') {
@@ -540,24 +528,31 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     };
 
     const updatedPhotos = [...capturedPhotos, currentPhoto];
-    console.log('[FullDocScanner] Photos captured:', updatedPhotos.length, 'of', maxPhotos);
-
-    // Business 모드이고 아직 첫 번째 사진만 찍은 경우
-    if (isBusinessMode && updatedPhotos.length === 1) {
-      // 두 번째 사진 촬영 여부를 물어봄 (UI에서 버튼으로 표시)
-      setCapturedPhotos(updatedPhotos);
-      setCurrentPhotoIndex(1);
-      // 확인 화면을 유지하고 "뒷면 촬영" 버튼을 표시
-      return;
-    }
+    console.log('[FullDocScanner] Photos captured:', updatedPhotos.length);
 
-    // 모든 사진 촬영 완료 - 결과 반환
-    console.log('[FullDocScanner] All photos captured, returning results');
+    // 결과 반환
+    console.log('[FullDocScanner] Returning results');
     onResult(updatedPhotos);
-  }, [croppedImageData, rotationDegrees, capturedPhotos, isBusinessMode, maxPhotos, onResult]);
+  }, [croppedImageData, rotationDegrees, capturedPhotos, onResult]);
 
   const handleCaptureSecondPhoto = useCallback(() => {
     console.log('[FullDocScanner] Capturing second photo');
+
+    if (!croppedImageData) {
+      return;
+    }
+
+    // 현재 사진(앞면)을 먼저 저장
+    const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
+    const currentPhoto: FullDocScannerResult = {
+      path: croppedImageData.path,
+      base64: croppedImageData.base64,
+      rotationDegrees: rotationNormalized,
+    };
+
+    setCapturedPhotos([currentPhoto]);
+    setCurrentPhotoIndex(1);
+
     // 확인 화면을 닫고 카메라로 돌아감
     setCroppedImageData(null);
     setRotationDegrees(0);
@@ -577,29 +572,21 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     if (docScannerRef.current?.reset) {
       docScannerRef.current.reset();
     }
-  }, []);
+  }, [croppedImageData, rotationDegrees]);
 
-  const handleSkipSecondPhoto = useCallback(() => {
-    console.log('[FullDocScanner] Skipping second photo');
-    // 첫 번째 사진만 반환
-    onResult(capturedPhotos);
-  }, [capturedPhotos, onResult]);
 
   const handleRetake = useCallback(() => {
     console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
 
-    if (isBusinessMode) {
-      if (currentPhotoIndex === 1 && previewPhotoIndex === 0 && capturedPhotos.length === 1) {
-        console.log('[FullDocScanner] Retake detected on front preview after confirmation - reverting to front capture');
-        setCapturedPhotos([]);
-        setCurrentPhotoIndex(0);
-        setPreviewPhotoIndex(0);
-      } else if (previewPhotoIndex === 1 && capturedPhotos.length === 2) {
-        console.log('[FullDocScanner] Retake detected on back preview after final confirmation - removing back photo');
-        setCapturedPhotos(capturedPhotos.slice(0, 1));
-        setCurrentPhotoIndex(1);
-        setPreviewPhotoIndex(1);
-      }
+    // Business 모드에서 두 번째 사진을 다시 찍는 경우, 첫 번째 사진 유지
+    if (isBusinessMode && capturedPhotos.length === 1) {
+      console.log('[FullDocScanner] Retake detected on back photo - keeping front photo');
+      setCurrentPhotoIndex(1);
+    } else {
+      // 첫 번째 사진 또는 일반 모드: 모든 상태 초기화
+      console.log('[FullDocScanner] Retake detected - resetting all photos');
+      setCapturedPhotos([]);
+      setCurrentPhotoIndex(0);
     }
 
     setCroppedImageData(null);
@@ -621,7 +608,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     if (docScannerRef.current?.reset) {
       docScannerRef.current.reset();
     }
-  }, [capturedPhotos, currentPhotoIndex, isBusinessMode, previewPhotoIndex]);
+  }, [capturedPhotos.length, isBusinessMode]);
 
   const handleRectangleDetect = useCallback((event: RectangleDetectEvent) => {
     const stableCounter = event.stableCounter ?? 0;
@@ -689,7 +676,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
           {isBusinessMode && (
             <View style={styles.photoHeader}>
               <Text style={styles.photoHeaderText}>
-                {previewPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
+                {currentPhotoIndex === 0 ? mergedStrings.first : mergedStrings.second}
               </Text>
             </View>
           )}
@@ -717,6 +704,19 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
               </TouchableOpacity>
             </View>
           ) : null}
+
+          {/* 뒷면 촬영 버튼 - 상단에 표시 (Business 모드이고 첫 번째 사진일 때만) */}
+          {isBusinessMode && capturedPhotos.length === 0 && (
+            <TouchableOpacity
+              style={styles.captureBackButton}
+              onPress={handleCaptureSecondPhoto}
+              accessibilityLabel={mergedStrings.secondBtn}
+              accessibilityRole="button"
+            >
+              <Text style={styles.captureBackButtonText}>{mergedStrings.secondBtn}</Text>
+            </TouchableOpacity>
+          )}
+
           <Image
             source={{ uri: croppedImageData.path }}
             style={[
@@ -725,13 +725,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
             ]}
             resizeMode="contain"
           />
-          {isBusinessMode &&
-            capturedPhotos.length === 1 &&
-            currentPhotoIndex === 1 &&
-            previewPhotoIndex === 0 &&
-            mergedStrings.secondPrompt ? (
-            <Text style={styles.confirmationPromptText}>{mergedStrings.secondPrompt}</Text>
-          ) : null}
           <View style={styles.confirmationButtons}>
             <TouchableOpacity
               style={[styles.confirmButton, styles.retakeButton]}
@@ -742,39 +735,14 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
               <Text style={styles.confirmButtonText}>{mergedStrings.retake}</Text>
             </TouchableOpacity>
 
-            {/* Business 모드이고 첫 번째 사진을 찍은 후: 뒷면 촬영 버튼 또는 확인 버튼 */}
-            {isBusinessMode &&
-              capturedPhotos.length === 1 &&
-              currentPhotoIndex === 1 &&
-              previewPhotoIndex === 0 ? (
-              <>
-                <TouchableOpacity
-                  style={[styles.confirmButton, styles.confirmButtonPrimary]}
-                  onPress={handleCaptureSecondPhoto}
-                  accessibilityLabel={mergedStrings.secondBtn}
-                  accessibilityRole="button"
-                >
-                  <Text style={styles.confirmButtonText}>{mergedStrings.secondBtn}</Text>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={[styles.confirmButton, styles.skipButton]}
-                  onPress={handleSkipSecondPhoto}
-                  accessibilityLabel={mergedStrings.confirm}
-                  accessibilityRole="button"
-                >
-                  <Text style={styles.confirmButtonText}>{mergedStrings.confirm}</Text>
-                </TouchableOpacity>
-              </>
-            ) : (
-              <TouchableOpacity
-                style={[styles.confirmButton, styles.confirmButtonPrimary]}
-                onPress={handleConfirm}
-                accessibilityLabel={mergedStrings.confirm}
-                accessibilityRole="button"
-              >
-                <Text style={styles.confirmButtonText}>{mergedStrings.confirm}</Text>
-              </TouchableOpacity>
-            )}
+            <TouchableOpacity
+              style={[styles.confirmButton, styles.confirmButtonPrimary]}
+              onPress={handleConfirm}
+              accessibilityLabel={mergedStrings.confirm}
+              accessibilityRole="button"
+            >
+              <Text style={styles.confirmButtonText}>{mergedStrings.confirm}</Text>
+            </TouchableOpacity>
           </View>
         </View>
       ) : (
@@ -1117,4 +1085,24 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     borderRadius: 16,
   },
+  captureBackButton: {
+    position: 'absolute',
+    bottom: 140,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 15,
+  },
+  captureBackButtonText: {
+    color: '#fff',
+    fontSize: 16,
+    fontWeight: '600',
+    // backgroundColor: 'rgba(255,100,50,0.9)',
+    paddingHorizontal: 32,
+    paddingVertical: 14,
+    borderRadius: 24,
+    borderWidth: 2,
+    borderColor: '#fff',
+    overflow: 'hidden',
+  },
 });