From 63cbf53bf11ad1e9ba2307598acc6a6a1a815b7c Mon Sep 17 00:00:00 2001
From: Mykhailo Kravchenko <rezkiy37@gmail.com>
Date: Thu, 11 Jan 2024 12:59:13 +0100
Subject: [PATCH] implement ReferralDetailsPageIcon

---
 .../ReferralDetailsPageIcon/index.native.tsx   | 18 ++++++++++++++++++
 .../ReferralDetailsPageIcon/index.tsx          | 18 ++++++++++++++++++
 src/pages/ReferralDetailsPage.js               | 16 ++--------------
 3 files changed, 38 insertions(+), 14 deletions(-)
 create mode 100644 src/components/ReferralDetailsPageIcon/index.native.tsx
 create mode 100644 src/components/ReferralDetailsPageIcon/index.tsx

diff --git a/src/components/ReferralDetailsPageIcon/index.native.tsx b/src/components/ReferralDetailsPageIcon/index.native.tsx
new file mode 100644
index 000000000000..578fab7a2e33
--- /dev/null
+++ b/src/components/ReferralDetailsPageIcon/index.native.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Icon from '@components/Icon';
+import {PaymentHands} from '@components/Icon/Illustrations';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+
+function ReferralDetailsPageIcon() {
+    const {windowWidth} = useWindowDimensions();
+
+    return (
+        <Icon
+            src={PaymentHands}
+            width={windowWidth}
+            height={232}
+        />
+    );
+}
+
+export default ReferralDetailsPageIcon;
diff --git a/src/components/ReferralDetailsPageIcon/index.tsx b/src/components/ReferralDetailsPageIcon/index.tsx
new file mode 100644
index 000000000000..81ca33871277
--- /dev/null
+++ b/src/components/ReferralDetailsPageIcon/index.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import Icon from '@components/Icon';
+import {PaymentHands} from '@components/Icon/Illustrations';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+
+function ReferralDetailsPageIcon() {
+    const {windowWidth} = useWindowDimensions();
+
+    return (
+        <Icon
+            src={PaymentHands}
+            width={windowWidth * 2}
+            height={232}
+        />
+    );
+}
+
+export default ReferralDetailsPageIcon;
diff --git a/src/pages/ReferralDetailsPage.js b/src/pages/ReferralDetailsPage.js
index 95d3960b6d9a..b1383ffce34b 100644
--- a/src/pages/ReferralDetailsPage.js
+++ b/src/pages/ReferralDetailsPage.js
@@ -4,18 +4,15 @@ import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import ContextMenuItem from '@components/ContextMenuItem';
 import HeaderPageLayout from '@components/HeaderPageLayout';
-import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import {PaymentHands} from '@components/Icon/Illustrations';
 import MenuItem from '@components/MenuItem';
+import ReferralDetailsPageIcon from '@components/ReferralDetailsPageIcon';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import Clipboard from '@libs/Clipboard';
-import getPlatform from '@libs/getPlatform';
 import * as Link from '@userActions/Link';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -45,12 +42,9 @@ const defaultProps = {
 function ReferralDetailsPage({route, account}) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const {windowWidth} = useWindowDimensions();
     const {translate} = useLocalize();
     const popoverAnchor = useRef(null);
     const {isExecuting, singleExecution} = useSingleExecution();
-    const platform = getPlatform();
-    const isNative = platform === CONST.PLATFORM.IOS || platform === CONST.PLATFORM.ANDROID;
     let {contentType} = route.params;
 
     if (!_.includes(_.values(CONST.REFERRAL_PROGRAM.CONTENT_TYPES), contentType)) {
@@ -66,13 +60,7 @@ function ReferralDetailsPage({route, account}) {
     return (
         <HeaderPageLayout
             title={translate('common.referral')}
-            headerContent={
-                <Icon
-                    src={PaymentHands}
-                    width={isNative ? windowWidth : windowWidth * 2}
-                    height={232}
-                />
-            }
+            headerContent={<ReferralDetailsPageIcon />}
             headerContainerStyles={[styles.staticHeaderImage, styles.justifyContentEnd]}
             backgroundColor={theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.REFERRAL].backgroundColor}
         >