From 1feeb801ff29c7ba545e0d67d394370d32127320 Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Wed, 19 Jul 2023 01:24:52 +0200
Subject: [PATCH 01/12] display not found page when attachment is deleted.

---
 src/components/AttachmentCarousel/index.js | 170 ++++++++++++---------
 src/components/AttachmentModal.js          |  15 +-
 2 files changed, 109 insertions(+), 76 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 85f3abcc90aa..30ae6f5bc5e7 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -21,6 +21,9 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import compose from '../../libs/compose';
 import withWindowDimensions from '../withWindowDimensions';
 import reportPropTypes from '../../pages/reportPropTypes';
+import BlockingView from "../BlockingViews/BlockingView"
+import * as Illustrations from "../Icon/Illustrations";
+import variables from '../../styles/variables';
 
 const propTypes = {
     /** source is used to determine the starting index in the array of attachments */
@@ -29,6 +32,9 @@ const propTypes = {
     /** Callback to update the parent modal's state with a source and name from the attachments array */
     onNavigate: PropTypes.func,
 
+    /** Callback to change the download button Visibility */
+    toggleDownloadButtonVisibility: PropTypes.func,
+
     /** Object of report actions for this report */
     reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
 
@@ -42,6 +48,7 @@ const defaultProps = {
     source: '',
     reportActions: {},
     onNavigate: () => {},
+    toggleDownloadButtonVisibility: () => {},
 };
 
 class AttachmentCarousel extends React.Component {
@@ -190,12 +197,14 @@ class AttachmentCarousel extends React.Component {
         }
 
         const page = _.findIndex(attachments, (a) => a.source === this.props.source);
-        if (page === -1) {
-            throw new Error('Attachment not found');
+
+        if(page !== -1) {
+            // Update the parent modal's state with the source and name from the mapped attachments
+            this.props.onNavigate(attachments[page]);
         }
 
-        // Update the parent modal's state with the source and name from the mapped attachments
-        this.props.onNavigate(attachments[page]);
+        // Update the download button visibility in the parent modal
+        this.props.toggleDownloadButtonVisibility(page !== -1);
 
         return {
             page,
@@ -302,82 +311,93 @@ class AttachmentCarousel extends React.Component {
                 onMouseEnter={() => !this.canUseTouchScreen && this.toggleArrowsVisibility(true)}
                 onMouseLeave={() => !this.canUseTouchScreen && this.toggleArrowsVisibility(false)}
             >
-                {this.state.shouldShowArrow && (
+                {this.state.page === -1 ? (
+                    <BlockingView
+                        icon={Illustrations.ToddBehindCloud}
+                        iconWidth={variables.modalTopIconWidth}
+                        iconHeight={variables.modalTopIconHeight}
+                        title={this.props.translate('notFound.notHere')}
+                    />
+                ) : (
                     <>
-                        {!isBackDisabled && (
-                            <Tooltip text={this.props.translate('common.previous')}>
-                                <View style={[styles.attachmentArrow, this.props.isSmallScreenWidth ? styles.l2 : styles.l8]}>
-                                    <Button
-                                        small
-                                        innerStyles={[styles.arrowIcon]}
-                                        icon={Expensicons.BackArrow}
-                                        iconFill={themeColors.text}
-                                        iconStyles={[styles.mr0]}
-                                        onPress={() => {
-                                            this.cycleThroughAttachments(-1);
-                                            this.autoHideArrow();
-                                        }}
-                                        onPressIn={this.cancelAutoHideArrow}
-                                        onPressOut={this.autoHideArrow}
-                                    />
-                                </View>
-                            </Tooltip>
+                        {this.state.shouldShowArrow && (
+                            <>
+                                {!isBackDisabled && (
+                                    <Tooltip text={this.props.translate('common.previous')}>
+                                        <View style={[styles.attachmentArrow, this.props.isSmallScreenWidth ? styles.l2 : styles.l8]}>
+                                            <Button
+                                                small
+                                                innerStyles={[styles.arrowIcon]}
+                                                icon={Expensicons.BackArrow}
+                                                iconFill={themeColors.text}
+                                                iconStyles={[styles.mr0]}
+                                                onPress={() => {
+                                                    this.cycleThroughAttachments(-1);
+                                                    this.autoHideArrow();
+                                                }}
+                                                onPressIn={this.cancelAutoHideArrow}
+                                                onPressOut={this.autoHideArrow}
+                                            />
+                                        </View>
+                                    </Tooltip>
+                                )}
+                                {!isForwardDisabled && (
+                                    <Tooltip text={this.props.translate('common.next')}>
+                                        <View style={[styles.attachmentArrow, this.props.isSmallScreenWidth ? styles.r2 : styles.r8]}>
+                                            <Button
+                                                small
+                                                innerStyles={[styles.arrowIcon]}
+                                                icon={Expensicons.ArrowRight}
+                                                iconFill={themeColors.text}
+                                                iconStyles={[styles.mr0]}
+                                                onPress={() => {
+                                                    this.cycleThroughAttachments(1);
+                                                    this.autoHideArrow();
+                                                }}
+                                                onPressIn={this.cancelAutoHideArrow}
+                                                onPressOut={this.autoHideArrow}
+                                            />
+                                        </View>
+                                    </Tooltip>
+                                )}
+                            </>
                         )}
-                        {!isForwardDisabled && (
-                            <Tooltip text={this.props.translate('common.next')}>
-                                <View style={[styles.attachmentArrow, this.props.isSmallScreenWidth ? styles.r2 : styles.r8]}>
-                                    <Button
-                                        small
-                                        innerStyles={[styles.arrowIcon]}
-                                        icon={Expensicons.ArrowRight}
-                                        iconFill={themeColors.text}
-                                        iconStyles={[styles.mr0]}
-                                        onPress={() => {
-                                            this.cycleThroughAttachments(1);
-                                            this.autoHideArrow();
-                                        }}
-                                        onPressIn={this.cancelAutoHideArrow}
-                                        onPressOut={this.autoHideArrow}
-                                    />
-                                </View>
-                            </Tooltip>
+
+                        {this.state.containerWidth > 0 && (
+                            <FlatList
+                                keyboardShouldPersistTaps="handled"
+                                listKey="AttachmentCarousel"
+                                horizontal
+                                decelerationRate="fast"
+                                showsHorizontalScrollIndicator={false}
+                                bounces={false}
+                                // Scroll only one image at a time no matter how fast the user swipes
+                                disableIntervalMomentum
+                                pagingEnabled
+                                snapToAlignment="start"
+                                snapToInterval={this.state.containerWidth}
+                                // Enable scrolling by swiping on mobile (touch) devices only
+                                // disable scroll for desktop/browsers because they add their scrollbars
+                                // Enable scrolling FlatList only when PDF is not in a zoomed state
+                                scrollEnabled={this.canUseTouchScreen && !this.state.isZoomed}
+                                ref={this.scrollRef}
+                                initialScrollIndex={this.state.page}
+                                initialNumToRender={3}
+                                windowSize={5}
+                                maxToRenderPerBatch={3}
+                                data={this.state.attachments}
+                                CellRendererComponent={this.renderCell}
+                                renderItem={this.renderItem}
+                                getItemLayout={this.getItemLayout}
+                                keyExtractor={(item) => item.source}
+                                viewabilityConfig={this.viewabilityConfig}
+                                onViewableItemsChanged={this.updatePage}
+                            />
                         )}
-                    </>
-                )}
 
-                {this.state.containerWidth > 0 && (
-                    <FlatList
-                        keyboardShouldPersistTaps="handled"
-                        listKey="AttachmentCarousel"
-                        horizontal
-                        decelerationRate="fast"
-                        showsHorizontalScrollIndicator={false}
-                        bounces={false}
-                        // Scroll only one image at a time no matter how fast the user swipes
-                        disableIntervalMomentum
-                        pagingEnabled
-                        snapToAlignment="start"
-                        snapToInterval={this.state.containerWidth}
-                        // Enable scrolling by swiping on mobile (touch) devices only
-                        // disable scroll for desktop/browsers because they add their scrollbars
-                        // Enable scrolling FlatList only when PDF is not in a zoomed state
-                        scrollEnabled={this.canUseTouchScreen && !this.state.isZoomed}
-                        ref={this.scrollRef}
-                        initialScrollIndex={this.state.page}
-                        initialNumToRender={3}
-                        windowSize={5}
-                        maxToRenderPerBatch={3}
-                        data={this.state.attachments}
-                        CellRendererComponent={this.renderCell}
-                        renderItem={this.renderItem}
-                        getItemLayout={this.getItemLayout}
-                        keyExtractor={(item) => item.source}
-                        viewabilityConfig={this.viewabilityConfig}
-                        onViewableItemsChanged={this.updatePage}
-                    />
+                        <CarouselActions onCycleThroughAttachments={this.cycleThroughAttachments} />
+                    </>
                 )}
-
-                <CarouselActions onCycleThroughAttachments={this.cycleThroughAttachments} />
             </View>
         );
     }
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index bb648c155840..00fdbaa510d9 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -98,6 +98,7 @@ function AttachmentModal(props) {
     const [modalType, setModalType] = useState(CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE);
     const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false);
     const [confirmButtonFadeAnimation] = useState(new Animated.Value(1));
+    const [shouldShowDownloadButton, setShouldShowDownloadButton] = React.useState(true);
     const [file, setFile] = useState(
         props.originalFileName
             ? {
@@ -136,6 +137,17 @@ function AttachmentModal(props) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [props.translate],
     );
+
+    /**
+     * Toggles the visibility of the download button
+     * @param {Boolean} shouldShowButton
+     */
+    const toggleDownloadButtonVisibility = useCallback((shouldShowButton) => {
+        if (shouldShowDownloadButton === shouldShowButton) {
+            return;
+        }
+        setShouldShowDownloadButton(shouldShowButton);
+    }, [shouldShowDownloadButton]);
     /**
      * Download the currently viewed attachment.
      */
@@ -310,7 +322,7 @@ function AttachmentModal(props) {
                 <HeaderWithBackButton
                     title={props.headerTitle || props.translate('common.attachment')}
                     shouldShowBorderBottom
-                    shouldShowDownloadButton={props.allowDownload}
+                    shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton}
                     onDownloadButtonPress={() => downloadAttachment(source)}
                     shouldShowCloseButton={!props.isSmallScreenWidth}
                     shouldShowBackButton={props.isSmallScreenWidth}
@@ -324,6 +336,7 @@ function AttachmentModal(props) {
                             onNavigate={onNavigate}
                             source={props.source}
                             onToggleKeyboard={updateConfirmButtonVisibility}
+                            toggleDownloadButtonVisibility={toggleDownloadButtonVisibility}
                         />
                     ) : (
                         Boolean(sourceForAttachmentView) &&

From c9e86db936b6149fd871715709d077b44933b04e Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Wed, 19 Jul 2023 01:49:08 +0200
Subject: [PATCH 02/12] prettier

---
 src/components/AttachmentCarousel/index.js |  6 +++---
 src/components/AttachmentModal.js          | 15 +++++++++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 30ae6f5bc5e7..520dcfce0ecf 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -21,8 +21,8 @@ import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import compose from '../../libs/compose';
 import withWindowDimensions from '../withWindowDimensions';
 import reportPropTypes from '../../pages/reportPropTypes';
-import BlockingView from "../BlockingViews/BlockingView"
-import * as Illustrations from "../Icon/Illustrations";
+import BlockingView from '../BlockingViews/BlockingView';
+import * as Illustrations from '../Icon/Illustrations';
 import variables from '../../styles/variables';
 
 const propTypes = {
@@ -198,7 +198,7 @@ class AttachmentCarousel extends React.Component {
 
         const page = _.findIndex(attachments, (a) => a.source === this.props.source);
 
-        if(page !== -1) {
+        if (page !== -1) {
             // Update the parent modal's state with the source and name from the mapped attachments
             this.props.onNavigate(attachments[page]);
         }
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 00fdbaa510d9..731a86341293 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -142,12 +142,15 @@ function AttachmentModal(props) {
      * Toggles the visibility of the download button
      * @param {Boolean} shouldShowButton
      */
-    const toggleDownloadButtonVisibility = useCallback((shouldShowButton) => {
-        if (shouldShowDownloadButton === shouldShowButton) {
-            return;
-        }
-        setShouldShowDownloadButton(shouldShowButton);
-    }, [shouldShowDownloadButton]);
+    const toggleDownloadButtonVisibility = useCallback(
+        (shouldShowButton) => {
+            if (shouldShowDownloadButton === shouldShowButton) {
+                return;
+            }
+            setShouldShowDownloadButton(shouldShowButton);
+        },
+        [shouldShowDownloadButton],
+    );
     /**
      * Download the currently viewed attachment.
      */

From 1974052a1b0e8885121520c994fd3d14630f80b3 Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Wed, 19 Jul 2023 21:26:33 +0200
Subject: [PATCH 03/12] change toggleDownloadButtonVisibility method name to
 setDownloadButtonVisibility

---
 src/components/AttachmentCarousel/index.js | 8 ++++----
 src/components/AttachmentModal.js          | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 520dcfce0ecf..bf60633865ee 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -32,8 +32,8 @@ const propTypes = {
     /** Callback to update the parent modal's state with a source and name from the attachments array */
     onNavigate: PropTypes.func,
 
-    /** Callback to change the download button Visibility */
-    toggleDownloadButtonVisibility: PropTypes.func,
+    /** Function to change the download button Visibility */
+    setDownloadButtonVisibility: PropTypes.func,
 
     /** Object of report actions for this report */
     reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
@@ -48,7 +48,7 @@ const defaultProps = {
     source: '',
     reportActions: {},
     onNavigate: () => {},
-    toggleDownloadButtonVisibility: () => {},
+    setDownloadButtonVisibility: () => {},
 };
 
 class AttachmentCarousel extends React.Component {
@@ -204,7 +204,7 @@ class AttachmentCarousel extends React.Component {
         }
 
         // Update the download button visibility in the parent modal
-        this.props.toggleDownloadButtonVisibility(page !== -1);
+        this.props.setDownloadButtonVisibility(page !== -1);
 
         return {
             page,
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 731a86341293..8671f2b3c306 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -139,10 +139,10 @@ function AttachmentModal(props) {
     );
 
     /**
-     * Toggles the visibility of the download button
+     * set the visibility of the download button
      * @param {Boolean} shouldShowButton
      */
-    const toggleDownloadButtonVisibility = useCallback(
+    const setDownloadButtonVisibility = useCallback(
         (shouldShowButton) => {
             if (shouldShowDownloadButton === shouldShowButton) {
                 return;
@@ -339,7 +339,7 @@ function AttachmentModal(props) {
                             onNavigate={onNavigate}
                             source={props.source}
                             onToggleKeyboard={updateConfirmButtonVisibility}
-                            toggleDownloadButtonVisibility={toggleDownloadButtonVisibility}
+                            setDownloadButtonVisibility={setDownloadButtonVisibility}
                         />
                     ) : (
                         Boolean(sourceForAttachmentView) &&

From 8cf2cdbf16f5f1ead73fcead028ac92e7b889e8f Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Tue, 25 Jul 2023 16:46:13 +0200
Subject: [PATCH 04/12] fix attachment deep link not work in native ios and
 android

---
 src/components/AttachmentCarousel/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index bf60633865ee..3d95435fe402 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -196,7 +196,8 @@ class AttachmentCarousel extends React.Component {
             attachments.reverse();
         }
 
-        const page = _.findIndex(attachments, (a) => a.source === this.props.source);
+        const source = tryResolveUrlFromApiRoot(this.props.source);
+        const page = _.findIndex(attachments, (a) => a.source === source);
 
         if (page !== -1) {
             // Update the parent modal's state with the source and name from the mapped attachments

From 0d208790e4e5811b22c151d535899b3a5614453f Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Thu, 27 Jul 2023 22:37:37 +0200
Subject: [PATCH 05/12] fix merge conflict

---
 .../attachmentCarouselPropTypes.js            |   4 +
 .../AttachmentCarousel/createInitialState.js  |  13 +-
 src/components/AttachmentCarousel/index.js    | 154 ++++++++++--------
 3 files changed, 96 insertions(+), 75 deletions(-)

diff --git a/src/components/AttachmentCarousel/attachmentCarouselPropTypes.js b/src/components/AttachmentCarousel/attachmentCarouselPropTypes.js
index 62ad758555ec..d0ed29edb7d7 100644
--- a/src/components/AttachmentCarousel/attachmentCarouselPropTypes.js
+++ b/src/components/AttachmentCarousel/attachmentCarouselPropTypes.js
@@ -9,6 +9,9 @@ const propTypes = {
     /** Callback to update the parent modal's state with a source and name from the attachments array */
     onNavigate: PropTypes.func,
 
+    /** Function to change the download button Visibility */
+    setDownloadButtonVisibility: PropTypes.func,
+
     /** Object of report actions for this report */
     reportActions: PropTypes.shape(reportActionPropTypes),
 
@@ -20,6 +23,7 @@ const defaultProps = {
     source: '',
     reportActions: {},
     onNavigate: () => {},
+    setDownloadButtonVisibility: () => {},
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/AttachmentCarousel/createInitialState.js b/src/components/AttachmentCarousel/createInitialState.js
index 770b5f243eee..1cdded4c2ceb 100644
--- a/src/components/AttachmentCarousel/createInitialState.js
+++ b/src/components/AttachmentCarousel/createInitialState.js
@@ -48,13 +48,16 @@ function createInitialState(props) {
         attachments.reverse();
     }
 
-    const page = _.findIndex(attachments, (a) => a.source === props.source);
-    if (page === -1) {
-        throw new Error('Attachment not found');
+    const source = tryResolveUrlFromApiRoot(props.source);
+    const page = _.findIndex(attachments, (a) => a.source === source);
+
+    if (page !== -1) {
+        // Update the parent modal's state with the source and name from the mapped attachments
+        props.onNavigate(attachments[page]);
     }
 
-    // Update the parent modal's state with the source and name from the mapped attachments
-    props.onNavigate(attachments[page]);
+    // Update the download button visibility in the parent modal
+    props.setDownloadButtonVisibility(page !== -1);
 
     return {
         page,
diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index b5637cc53568..7804185b4fe2 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -16,6 +16,9 @@ import Tooltip from '../Tooltip';
 import useLocalize from '../../hooks/useLocalize';
 import createInitialState from './createInitialState';
 import {propTypes, defaultProps} from './attachmentCarouselPropTypes';
+import BlockingView from '../BlockingViews/BlockingView';
+import * as Illustrations from '../Icon/Illustrations';
+import variables from '../../styles/variables';
 
 const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 const viewabilityConfig = {
@@ -232,81 +235,92 @@ function AttachmentCarousel(props) {
             onMouseEnter={() => !canUseTouchScreen && toggleArrowsVisibility(true)}
             onMouseLeave={() => !canUseTouchScreen && toggleArrowsVisibility(false)}
         >
-            {shouldShowArrow && (
+            {page === -1 ? (
+                <BlockingView
+                    icon={Illustrations.ToddBehindCloud}
+                    iconWidth={variables.modalTopIconWidth}
+                    iconHeight={variables.modalTopIconHeight}
+                    title={translate('notFound.notHere')}
+                />
+            ) : (
                 <>
-                    {!isBackDisabled && (
-                        <Tooltip text={translate('common.previous')}>
-                            <View style={[styles.attachmentArrow, isSmallScreenWidth ? styles.l2 : styles.l8]}>
-                                <Button
-                                    small
-                                    innerStyles={[styles.arrowIcon]}
-                                    icon={Expensicons.BackArrow}
-                                    iconFill={themeColors.text}
-                                    iconStyles={[styles.mr0]}
-                                    onPress={() => {
-                                        cycleThroughAttachments(-1);
-                                        autoHideArrow();
-                                    }}
-                                    onPressIn={cancelAutoHideArrow}
-                                    onPressOut={autoHideArrow}
-                                />
-                            </View>
-                        </Tooltip>
+                    {shouldShowArrow && (
+                        <>
+                            {!isBackDisabled && (
+                                <Tooltip text={translate('common.previous')}>
+                                    <View style={[styles.attachmentArrow, isSmallScreenWidth ? styles.l2 : styles.l8]}>
+                                        <Button
+                                            small
+                                            innerStyles={[styles.arrowIcon]}
+                                            icon={Expensicons.BackArrow}
+                                            iconFill={themeColors.text}
+                                            iconStyles={[styles.mr0]}
+                                            onPress={() => {
+                                                cycleThroughAttachments(-1);
+                                                autoHideArrow();
+                                            }}
+                                            onPressIn={cancelAutoHideArrow}
+                                            onPressOut={autoHideArrow}
+                                        />
+                                    </View>
+                                </Tooltip>
+                            )}
+                            {!isForwardDisabled && (
+                                <Tooltip text={translate('common.next')}>
+                                    <View style={[styles.attachmentArrow, isSmallScreenWidth ? styles.r2 : styles.r8]}>
+                                        <Button
+                                            small
+                                            innerStyles={[styles.arrowIcon]}
+                                            icon={Expensicons.ArrowRight}
+                                            iconFill={themeColors.text}
+                                            iconStyles={[styles.mr0]}
+                                            onPress={() => {
+                                                cycleThroughAttachments(1);
+                                                autoHideArrow();
+                                            }}
+                                            onPressIn={cancelAutoHideArrow}
+                                            onPressOut={autoHideArrow}
+                                        />
+                                    </View>
+                                </Tooltip>
+                            )}
+                        </>
                     )}
-                    {!isForwardDisabled && (
-                        <Tooltip text={translate('common.next')}>
-                            <View style={[styles.attachmentArrow, isSmallScreenWidth ? styles.r2 : styles.r8]}>
-                                <Button
-                                    small
-                                    innerStyles={[styles.arrowIcon]}
-                                    icon={Expensicons.ArrowRight}
-                                    iconFill={themeColors.text}
-                                    iconStyles={[styles.mr0]}
-                                    onPress={() => {
-                                        cycleThroughAttachments(1);
-                                        autoHideArrow();
-                                    }}
-                                    onPressIn={cancelAutoHideArrow}
-                                    onPressOut={autoHideArrow}
-                                />
-                            </View>
-                        </Tooltip>
+
+                    {containerWidth > 0 && (
+                        <FlatList
+                            keyboardShouldPersistTaps="handled"
+                            listKey="AttachmentCarousel"
+                            horizontal
+                            decelerationRate="fast"
+                            showsHorizontalScrollIndicator={false}
+                            bounces={false}
+                            // Scroll only one image at a time no matter how fast the user swipes
+                            disableIntervalMomentum
+                            pagingEnabled
+                            snapToAlignment="start"
+                            snapToInterval={containerWidth}
+                            // Enable scrolling by swiping on mobile (touch) devices only
+                            // disable scroll for desktop/browsers because they add their scrollbars
+                            // Enable scrolling FlatList only when PDF is not in a zoomed state
+                            scrollEnabled={canUseTouchScreen && !isZoomed}
+                            ref={scrollRef}
+                            initialScrollIndex={page}
+                            initialNumToRender={3}
+                            windowSize={5}
+                            maxToRenderPerBatch={3}
+                            data={attachments}
+                            CellRendererComponent={renderCell}
+                            renderItem={renderItem}
+                            getItemLayout={getItemLayout}
+                            keyExtractor={(item) => item.source}
+                            viewabilityConfig={viewabilityConfig}
+                            onViewableItemsChanged={updatePage}
+                        />
                     )}
+                    <CarouselActions onCycleThroughAttachments={cycleThroughAttachments} />
                 </>
             )}
-
-            {containerWidth > 0 && (
-                <FlatList
-                    keyboardShouldPersistTaps="handled"
-                    listKey="AttachmentCarousel"
-                    horizontal
-                    decelerationRate="fast"
-                    showsHorizontalScrollIndicator={false}
-                    bounces={false}
-                    // Scroll only one image at a time no matter how fast the user swipes
-                    disableIntervalMomentum
-                    pagingEnabled
-                    snapToAlignment="start"
-                    snapToInterval={containerWidth}
-                    // Enable scrolling by swiping on mobile (touch) devices only
-                    // disable scroll for desktop/browsers because they add their scrollbars
-                    // Enable scrolling FlatList only when PDF is not in a zoomed state
-                    scrollEnabled={canUseTouchScreen && !isZoomed}
-                    ref={scrollRef}
-                    initialScrollIndex={page}
-                    initialNumToRender={3}
-                    windowSize={5}
-                    maxToRenderPerBatch={3}
-                    data={attachments}
-                    CellRendererComponent={renderCell}
-                    renderItem={renderItem}
-                    getItemLayout={getItemLayout}
-                    keyExtractor={(item) => item.source}
-                    viewabilityConfig={viewabilityConfig}
-                    onViewableItemsChanged={updatePage}
-                />
-            )}
-            <CarouselActions onCycleThroughAttachments={cycleThroughAttachments} />
         </View>
     );
 }

From 533a553d224e92c60e6307a8c4be67448b5aa09c Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Fri, 4 Aug 2023 17:39:45 +0200
Subject: [PATCH 06/12] fix dismiss modal when deleting attachment

---
 src/components/AttachmentCarousel/index.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 8eefc6323a03..77ff141617d6 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -19,6 +19,7 @@ import {propTypes, defaultProps} from './attachmentCarouselPropTypes';
 import BlockingView from '../BlockingViews/BlockingView';
 import * as Illustrations from '../Icon/Illustrations';
 import variables from '../../styles/variables';
+import Navigation from "../../libs/Navigation/Navigation"
 
 const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 const viewabilityConfig = {
@@ -53,7 +54,10 @@ function AttachmentCarousel(props) {
 
     useEffect(() => {
         const initialState = createInitialState(props);
-        if (initialState) {
+        // dismiss the modal when deleting an attachment during its display in preview.
+        if(initialState.page === -1 && _.find(attachments, (a) => a.source === props.source)) {
+            Navigation.dismissModal();
+        }else {
             setPage(initialState.page);
             setAttachments(initialState.attachments);
         }

From 4aff8e22b3689ba2358b93660670493cffa9bb24 Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Fri, 4 Aug 2023 18:48:21 +0200
Subject: [PATCH 07/12] fix dismiss modal when deleting attachment

---
 src/components/AttachmentCarousel/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 77ff141617d6..1ddc9ecb09cf 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -20,6 +20,7 @@ import BlockingView from '../BlockingViews/BlockingView';
 import * as Illustrations from '../Icon/Illustrations';
 import variables from '../../styles/variables';
 import Navigation from "../../libs/Navigation/Navigation"
+import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
 
 const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 const viewabilityConfig = {
@@ -55,7 +56,8 @@ function AttachmentCarousel(props) {
     useEffect(() => {
         const initialState = createInitialState(props);
         // dismiss the modal when deleting an attachment during its display in preview.
-        if(initialState.page === -1 && _.find(attachments, (a) => a.source === props.source)) {
+        const source = tryResolveUrlFromApiRoot(props.source);
+        if(initialState.page === -1 && _.find(attachments, (a) => a.source === source)) {
             Navigation.dismissModal();
         }else {
             setPage(initialState.page);

From 2fa9a3757859a9ad08d8362fc30143f5217fd1f1 Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Fri, 4 Aug 2023 19:28:30 +0200
Subject: [PATCH 08/12] prettier

---
 src/components/AttachmentCarousel/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index 1ddc9ecb09cf..a45fb31b9b14 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -19,7 +19,7 @@ import {propTypes, defaultProps} from './attachmentCarouselPropTypes';
 import BlockingView from '../BlockingViews/BlockingView';
 import * as Illustrations from '../Icon/Illustrations';
 import variables from '../../styles/variables';
-import Navigation from "../../libs/Navigation/Navigation"
+import Navigation from '../../libs/Navigation/Navigation';
 import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
 
 const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
@@ -57,9 +57,9 @@ function AttachmentCarousel(props) {
         const initialState = createInitialState(props);
         // dismiss the modal when deleting an attachment during its display in preview.
         const source = tryResolveUrlFromApiRoot(props.source);
-        if(initialState.page === -1 && _.find(attachments, (a) => a.source === source)) {
+        if (initialState.page === -1 && _.find(attachments, (a) => a.source === source)) {
             Navigation.dismissModal();
-        }else {
+        } else {
             setPage(initialState.page);
             setAttachments(initialState.attachments);
         }

From b4c04b97f5b0f9b5af5e378f574eeea740864cd1 Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Mon, 7 Aug 2023 21:44:15 +0200
Subject: [PATCH 09/12] remove uplicated tryResolveUrlFromApiRoot

---
 src/components/AttachmentCarousel/createInitialState.js | 3 +--
 src/components/AttachmentCarousel/index.js              | 4 +---
 src/components/AttachmentModal.js                       | 3 ++-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/AttachmentCarousel/createInitialState.js b/src/components/AttachmentCarousel/createInitialState.js
index 1cdded4c2ceb..35c59defa11c 100644
--- a/src/components/AttachmentCarousel/createInitialState.js
+++ b/src/components/AttachmentCarousel/createInitialState.js
@@ -48,8 +48,7 @@ function createInitialState(props) {
         attachments.reverse();
     }
 
-    const source = tryResolveUrlFromApiRoot(props.source);
-    const page = _.findIndex(attachments, (a) => a.source === source);
+    const page = _.findIndex(attachments, (a) => a.source === props.source);
 
     if (page !== -1) {
         // Update the parent modal's state with the source and name from the mapped attachments
diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
index a45fb31b9b14..f71c3b2e9ecc 100644
--- a/src/components/AttachmentCarousel/index.js
+++ b/src/components/AttachmentCarousel/index.js
@@ -20,7 +20,6 @@ import BlockingView from '../BlockingViews/BlockingView';
 import * as Illustrations from '../Icon/Illustrations';
 import variables from '../../styles/variables';
 import Navigation from '../../libs/Navigation/Navigation';
-import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
 
 const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 const viewabilityConfig = {
@@ -56,8 +55,7 @@ function AttachmentCarousel(props) {
     useEffect(() => {
         const initialState = createInitialState(props);
         // dismiss the modal when deleting an attachment during its display in preview.
-        const source = tryResolveUrlFromApiRoot(props.source);
-        if (initialState.page === -1 && _.find(attachments, (a) => a.source === source)) {
+        if (initialState.page === -1 && _.find(attachments, (a) => a.source === props.source)) {
             Navigation.dismissModal();
         } else {
             setPage(initialState.page);
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
index 7470e04f8fd3..833c9cc5a1e3 100755
--- a/src/components/AttachmentModal.js
+++ b/src/components/AttachmentModal.js
@@ -24,6 +24,7 @@ import HeaderGap from './HeaderGap';
 import SafeAreaConsumer from './SafeAreaConsumer';
 import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
 import reportPropTypes from '../pages/reportPropTypes';
+import tryResolveUrlFromApiRoot from '../libs/tryResolveUrlFromApiRoot';
 
 /**
  * Modal render prop component that exposes modal launching triggers that can be used
@@ -336,7 +337,7 @@ function AttachmentModal(props) {
                         <AttachmentCarousel
                             report={props.report}
                             onNavigate={onNavigate}
-                            source={props.source}
+                            source={tryResolveUrlFromApiRoot(props.source)}
                             onToggleKeyboard={updateConfirmButtonVisibility}
                             setDownloadButtonVisibility={setDownloadButtonVisibility}
                         />

From 5f2b425d95649eb8fb88a8b36a4d23bb1b25b11f Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Tue, 8 Aug 2023 21:58:11 +0200
Subject: [PATCH 10/12] fix conflict

---
 .../extractAttachmentsFromReport.js           |  30 +---
 .../Attachments/AttachmentCarousel/index.js   | 131 +++++++++++-------
 .../AttachmentCarousel/index.native.js        | 116 ++++++++++------
 3 files changed, 156 insertions(+), 121 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
index 047a016674b7..f4df0fc0c3e2 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js
@@ -3,18 +3,16 @@ import _ from 'underscore';
 import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
 import CONST from '../../../CONST';
 import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
-import Navigation from '../../../libs/Navigation/Navigation';
 
 /**
  * Constructs the initial component state from report actions
  * @param {Object} report
  * @param {Array} reportActions
- * @param {String} source
- * @returns {{attachments: Array, initialPage: Number, initialItem: Object, initialActiveSource: String}}
+ * @returns {Array}
  */
-function extractAttachmentsFromReport(report, reportActions, source) {
+function extractAttachmentsFromReport(report, reportActions) {
     const actions = [ReportActionsUtils.getParentReportAction(report), ...ReportActionsUtils.getSortedReportActions(_.values(reportActions))];
-    let attachments = [];
+    const attachments = [];
 
     const htmlParser = new HtmlParser({
         onopentag: (name, attribs) => {
@@ -42,27 +40,7 @@ function extractAttachmentsFromReport(report, reportActions, source) {
     });
     htmlParser.end();
 
-    attachments = attachments.reverse();
-
-    const initialPage = _.findIndex(attachments, (a) => a.source === source);
-    if (initialPage === -1) {
-        Navigation.dismissModal();
-        return {
-            attachments: [],
-            initialPage: 0,
-            initialItem: undefined,
-            initialActiveSource: null,
-        };
-    }
-
-    const initialItem = attachments[initialPage];
-
-    return {
-        attachments,
-        initialPage,
-        initialItem,
-        initialActiveSource: initialItem.source,
-    };
+    return attachments.reverse();
 }
 
 export default extractAttachmentsFromReport;
diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
index 564e60b65dd1..526926375f0c 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.js
@@ -1,4 +1,4 @@
-import React, {useRef, useCallback, useState, useEffect, useMemo} from 'react';
+import React, {useRef, useCallback, useState, useEffect} from 'react';
 import {View, FlatList, PixelRatio, Keyboard} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -15,6 +15,10 @@ import withLocalize from '../../withLocalize';
 import compose from '../../../libs/compose';
 import useCarouselArrows from './useCarouselArrows';
 import useWindowDimensions from '../../../hooks/useWindowDimensions';
+import Navigation from '../../../libs/Navigation/Navigation';
+import BlockingView from '../../BlockingViews/BlockingView';
+import * as Illustrations from '../../Icon/Illustrations';
+import variables from '../../../styles/variables';
 
 const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 const viewabilityConfig = {
@@ -23,24 +27,34 @@ const viewabilityConfig = {
     itemVisiblePercentThreshold: 95,
 };
 
-function AttachmentCarousel({report, reportActions, source, onNavigate}) {
+function AttachmentCarousel({report, reportActions, source, onNavigate, setDownloadButtonVisibility, translate}) {
     const scrollRef = useRef(null);
 
     const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
 
-    const {attachments, initialPage, initialActiveSource, initialItem} = useMemo(() => extractAttachmentsFromReport(report, reportActions, source), [report, reportActions, source]);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [page, setPage] = useState(0);
+    const [attachments, setAttachments] = useState([]);
+    const [activeSource, setActiveSource] = useState(source);
+    const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
 
     useEffect(() => {
-        // Update the parent modal's state with the source and name from the mapped attachments
-        if (!initialItem) return;
-        onNavigate(initialItem);
+        const attachmentsFromReport = extractAttachmentsFromReport(report, reportActions);
+
+        const initialPage = _.findIndex(attachmentsFromReport, (a) => a.source === source);
+        // dismiss the modal when deleting an attachment during its display in preview.
+        if (initialPage === -1 && _.find(attachments, (a) => a.source === source)) {
+            Navigation.dismissModal();
+        } else {
+            setPage(initialPage);
+            setAttachments(attachmentsFromReport);
+            // Update the download button visibility in the parent modal
+            setDownloadButtonVisibility(initialPage !== -1);
+            // Update the parent modal's state with the source and name from the mapped attachments
+            if (!_.isUndefined(attachmentsFromReport[initialPage])) onNavigate(attachmentsFromReport[initialPage]);
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initialItem]);
-
-    const [containerWidth, setContainerWidth] = useState(0);
-    const [page, setPage] = useState(initialPage);
-    const [activeSource, setActiveSource] = useState(initialActiveSource);
-    const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
+    }, [report, reportActions, source]);
 
     /**
      * Updates the page state when the user navigates between attachments
@@ -153,49 +167,60 @@ function AttachmentCarousel({report, reportActions, source, onNavigate}) {
             onMouseEnter={() => !canUseTouchScreen && setShouldShowArrows(true)}
             onMouseLeave={() => !canUseTouchScreen && setShouldShowArrows(false)}
         >
-            <CarouselButtons
-                shouldShowArrows={shouldShowArrows}
-                page={page}
-                attachments={attachments}
-                onBack={() => cycleThroughAttachments(-1)}
-                onForward={() => cycleThroughAttachments(1)}
-                autoHideArrow={autoHideArrows}
-                cancelAutoHideArrow={cancelAutoHideArrows}
-            />
-
-            {containerWidth > 0 && (
-                <FlatList
-                    keyboardShouldPersistTaps="handled"
-                    listKey="AttachmentCarousel"
-                    horizontal
-                    decelerationRate="fast"
-                    showsHorizontalScrollIndicator={false}
-                    bounces={false}
-                    // Scroll only one image at a time no matter how fast the user swipes
-                    disableIntervalMomentum
-                    pagingEnabled
-                    snapToAlignment="start"
-                    snapToInterval={containerWidth}
-                    // Enable scrolling by swiping on mobile (touch) devices only
-                    // disable scroll for desktop/browsers because they add their scrollbars
-                    // Enable scrolling FlatList only when PDF is not in a zoomed state
-                    scrollEnabled={canUseTouchScreen}
-                    ref={scrollRef}
-                    initialScrollIndex={page}
-                    initialNumToRender={3}
-                    windowSize={5}
-                    maxToRenderPerBatch={3}
-                    data={attachments}
-                    CellRendererComponent={renderCell}
-                    renderItem={renderItem}
-                    getItemLayout={getItemLayout}
-                    keyExtractor={(item) => item.source}
-                    viewabilityConfig={viewabilityConfig}
-                    onViewableItemsChanged={updatePage.current}
+            {page === -1 ? (
+                <BlockingView
+                    icon={Illustrations.ToddBehindCloud}
+                    iconWidth={variables.modalTopIconWidth}
+                    iconHeight={variables.modalTopIconHeight}
+                    title={translate('notFound.notHere')}
                 />
+            ) : (
+                <>
+                    <CarouselButtons
+                        shouldShowArrows={shouldShowArrows}
+                        page={page}
+                        attachments={attachments}
+                        onBack={() => cycleThroughAttachments(-1)}
+                        onForward={() => cycleThroughAttachments(1)}
+                        autoHideArrow={autoHideArrows}
+                        cancelAutoHideArrow={cancelAutoHideArrows}
+                    />
+
+                    {containerWidth > 0 && (
+                        <FlatList
+                            keyboardShouldPersistTaps="handled"
+                            listKey="AttachmentCarousel"
+                            horizontal
+                            decelerationRate="fast"
+                            showsHorizontalScrollIndicator={false}
+                            bounces={false}
+                            // Scroll only one image at a time no matter how fast the user swipes
+                            disableIntervalMomentum
+                            pagingEnabled
+                            snapToAlignment="start"
+                            snapToInterval={containerWidth}
+                            // Enable scrolling by swiping on mobile (touch) devices only
+                            // disable scroll for desktop/browsers because they add their scrollbars
+                            // Enable scrolling FlatList only when PDF is not in a zoomed state
+                            scrollEnabled={canUseTouchScreen}
+                            ref={scrollRef}
+                            initialScrollIndex={page}
+                            initialNumToRender={3}
+                            windowSize={5}
+                            maxToRenderPerBatch={3}
+                            data={attachments}
+                            CellRendererComponent={renderCell}
+                            renderItem={renderItem}
+                            getItemLayout={getItemLayout}
+                            keyExtractor={(item) => item.source}
+                            viewabilityConfig={viewabilityConfig}
+                            onViewableItemsChanged={updatePage.current}
+                        />
+                    )}
+
+                    <CarouselActions onCycleThroughAttachments={cycleThroughAttachments} />
+                </>
             )}
-
-            <CarouselActions onCycleThroughAttachments={cycleThroughAttachments} />
         </View>
     );
 }
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
index 58e248d514e1..d0a3e6d84468 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.js
+++ b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -1,6 +1,7 @@
-import React, {useCallback, useEffect, useRef, useState, useMemo} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View, Keyboard, PixelRatio} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import AttachmentCarouselPager from './Pager';
 import styles from '../../../styles/styles';
 import CarouselButtons from './CarouselButtons';
@@ -9,24 +10,41 @@ import ONYXKEYS from '../../../ONYXKEYS';
 import {propTypes, defaultProps} from './attachmentCarouselPropTypes';
 import extractAttachmentsFromReport from './extractAttachmentsFromReport';
 import useCarouselArrows from './useCarouselArrows';
+import Navigation from '../../../libs/Navigation/Navigation';
+import BlockingView from '../../BlockingViews/BlockingView';
+import * as Illustrations from '../../Icon/Illustrations';
+import variables from '../../../styles/variables';
+import compose from '../../../libs/compose';
+import withLocalize from '../../withLocalize';
 
-function AttachmentCarousel({report, reportActions, source, onNavigate, onClose}) {
-    const {attachments, initialPage, initialActiveSource, initialItem} = useMemo(() => extractAttachmentsFromReport(report, reportActions, source), [report, reportActions, source]);
-
-    useEffect(() => {
-        // Update the parent modal's state with the source and name from the mapped attachments
-        onNavigate(initialItem);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initialItem]);
-
+function AttachmentCarousel({report, reportActions, source, onNavigate, onClose, setDownloadButtonVisibility, translate}) {
     const pagerRef = useRef(null);
 
     const [containerDimensions, setContainerDimensions] = useState({width: 0, height: 0});
-    const [page, setPage] = useState(initialPage);
-    const [activeSource, setActiveSource] = useState(initialActiveSource);
+    const [page, setPage] = useState(0);
+    const [attachments, setAttachments] = useState([]);
+    const [activeSource, setActiveSource] = useState(source);
     const [isPinchGestureRunning, setIsPinchGestureRunning] = useState(true);
     const [shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows] = useCarouselArrows();
 
+    useEffect(() => {
+        const attachmentsFromReport = extractAttachmentsFromReport(report, reportActions);
+
+        const initialPage = _.findIndex(attachmentsFromReport, (a) => a.source === source);
+        // dismiss the modal when deleting an attachment during its display in preview.
+        if (initialPage === -1 && _.find(attachments, (a) => a.source === source)) {
+            Navigation.dismissModal();
+        } else {
+            setPage(initialPage);
+            setAttachments(attachmentsFromReport);
+            // Update the download button visibility in the parent modal
+            setDownloadButtonVisibility(initialPage !== -1);
+            // Update the parent modal's state with the source and name from the mapped attachments
+            if (!_.isUndefined(attachmentsFromReport[initialPage])) onNavigate(attachmentsFromReport[initialPage]);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [report, reportActions, source]);
+
     /**
      * Updates the page state when the user navigates between attachments
      * @param {Object} item
@@ -90,31 +108,42 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose}
             onMouseEnter={() => setShouldShowArrows(true)}
             onMouseLeave={() => setShouldShowArrows(false)}
         >
-            <CarouselButtons
-                shouldShowArrows={shouldShowArrows && !isPinchGestureRunning}
-                page={page}
-                attachments={attachments}
-                onBack={() => cycleThroughAttachments(-1)}
-                onForward={() => cycleThroughAttachments(1)}
-                autoHideArrow={autoHideArrows}
-                cancelAutoHideArrow={cancelAutoHideArrows}
-            />
-
-            {containerDimensions.width > 0 && containerDimensions.height > 0 && (
-                <AttachmentCarouselPager
-                    items={attachments}
-                    renderItem={renderItem}
-                    initialIndex={page}
-                    onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
-                    onPinchGestureChange={(newIsPinchGestureRunning) => {
-                        setIsPinchGestureRunning(newIsPinchGestureRunning);
-                        if (!newIsPinchGestureRunning && !shouldShowArrows) setShouldShowArrows(true);
-                    }}
-                    onSwipeDown={onClose}
-                    containerWidth={containerDimensions.width}
-                    containerHeight={containerDimensions.height}
-                    ref={pagerRef}
+            {page === -1 ? (
+                <BlockingView
+                    icon={Illustrations.ToddBehindCloud}
+                    iconWidth={variables.modalTopIconWidth}
+                    iconHeight={variables.modalTopIconHeight}
+                    title={translate('notFound.notHere')}
                 />
+            ) : (
+                <>
+                    <CarouselButtons
+                        shouldShowArrows={shouldShowArrows && !isPinchGestureRunning}
+                        page={page}
+                        attachments={attachments}
+                        onBack={() => cycleThroughAttachments(-1)}
+                        onForward={() => cycleThroughAttachments(1)}
+                        autoHideArrow={autoHideArrows}
+                        cancelAutoHideArrow={cancelAutoHideArrows}
+                    />
+
+                    {containerDimensions.width > 0 && containerDimensions.height > 0 && (
+                        <AttachmentCarouselPager
+                            items={attachments}
+                            renderItem={renderItem}
+                            initialIndex={page}
+                            onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
+                            onPinchGestureChange={(newIsPinchGestureRunning) => {
+                                setIsPinchGestureRunning(newIsPinchGestureRunning);
+                                if (!newIsPinchGestureRunning && !shouldShowArrows) setShouldShowArrows(true);
+                            }}
+                            onSwipeDown={onClose}
+                            containerWidth={containerDimensions.width}
+                            containerHeight={containerDimensions.height}
+                            ref={pagerRef}
+                        />
+                    )}
+                </>
             )}
         </View>
     );
@@ -122,9 +151,12 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose}
 AttachmentCarousel.propTypes = propTypes;
 AttachmentCarousel.defaultProps = defaultProps;
 
-export default withOnyx({
-    reportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
-        canEvict: false,
-    },
-})(AttachmentCarousel);
+export default compose(
+    withOnyx({
+        reportActions: {
+            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
+            canEvict: false,
+        },
+    }),
+    withLocalize,
+)(AttachmentCarousel);

From b9af0163ecbc4928e3cd9f9e0649104f53266b32 Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Wed, 9 Aug 2023 19:45:45 +0200
Subject: [PATCH 11/12] improve comments

---
 src/components/Attachments/AttachmentCarousel/index.js       | 5 ++++-
 .../Attachments/AttachmentCarousel/index.native.js           | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Attachments/AttachmentCarousel/index.js b/src/components/Attachments/AttachmentCarousel/index.js
index 526926375f0c..cec5f54508cb 100644
--- a/src/components/Attachments/AttachmentCarousel/index.js
+++ b/src/components/Attachments/AttachmentCarousel/index.js
@@ -42,14 +42,17 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, setDownl
         const attachmentsFromReport = extractAttachmentsFromReport(report, reportActions);
 
         const initialPage = _.findIndex(attachmentsFromReport, (a) => a.source === source);
-        // dismiss the modal when deleting an attachment during its display in preview.
+
+        // Dismiss the modal when deleting an attachment during its display in preview.
         if (initialPage === -1 && _.find(attachments, (a) => a.source === source)) {
             Navigation.dismissModal();
         } else {
             setPage(initialPage);
             setAttachments(attachmentsFromReport);
+
             // Update the download button visibility in the parent modal
             setDownloadButtonVisibility(initialPage !== -1);
+
             // Update the parent modal's state with the source and name from the mapped attachments
             if (!_.isUndefined(attachmentsFromReport[initialPage])) onNavigate(attachmentsFromReport[initialPage]);
         }
diff --git a/src/components/Attachments/AttachmentCarousel/index.native.js b/src/components/Attachments/AttachmentCarousel/index.native.js
index d0a3e6d84468..4162cfae88e9 100644
--- a/src/components/Attachments/AttachmentCarousel/index.native.js
+++ b/src/components/Attachments/AttachmentCarousel/index.native.js
@@ -31,14 +31,17 @@ function AttachmentCarousel({report, reportActions, source, onNavigate, onClose,
         const attachmentsFromReport = extractAttachmentsFromReport(report, reportActions);
 
         const initialPage = _.findIndex(attachmentsFromReport, (a) => a.source === source);
-        // dismiss the modal when deleting an attachment during its display in preview.
+
+        // Dismiss the modal when deleting an attachment during its display in preview.
         if (initialPage === -1 && _.find(attachments, (a) => a.source === source)) {
             Navigation.dismissModal();
         } else {
             setPage(initialPage);
             setAttachments(attachmentsFromReport);
+
             // Update the download button visibility in the parent modal
             setDownloadButtonVisibility(initialPage !== -1);
+
             // Update the parent modal's state with the source and name from the mapped attachments
             if (!_.isUndefined(attachmentsFromReport[initialPage])) onNavigate(attachmentsFromReport[initialPage]);
         }

From a0962d1e9801630c864ec4e0220019d6e7b55269 Mon Sep 17 00:00:00 2001
From: ahmedGaber93 <a.gaber0093@gmail.com>
Date: Fri, 11 Aug 2023 16:51:09 +0200
Subject: [PATCH 12/12] improve comments

---
 .../AttachmentCarousel/attachmentCarouselPropTypes.js            | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
index fc5e07c4482f..81f22f684243 100644
--- a/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
+++ b/src/components/Attachments/AttachmentCarousel/attachmentCarouselPropTypes.js
@@ -14,6 +14,7 @@ const propTypes = {
 
     /** Function to change the download button Visibility */
     setDownloadButtonVisibility: PropTypes.func,
+
     /** Object of report actions for this report */
     reportActions: PropTypes.shape(reportActionPropTypes),