From d98d7199e3bbc57ccfcf50a1702d9c61b787667f Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Thu, 1 Sep 2022 16:04:13 +0200
Subject: [PATCH 1/9] Wrap menu item in OfflineWithFeedback component on
 Initial Settings Page

---
 src/pages/settings/InitialSettingsPage.js | 68 ++++++++++++++++-------
 1 file changed, 49 insertions(+), 19 deletions(-)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index f03058a27925..cb8b5b73b411 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -29,6 +29,7 @@ import * as PaymentMethods from '../../libs/actions/PaymentMethods';
 import bankAccountPropTypes from '../../components/bankAccountPropTypes';
 import cardPropTypes from '../../components/cardPropTypes';
 import * as Wallet from '../../libs/actions/Wallet';
+import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 
 const propTypes = {
     /* Onyx Props */
@@ -94,6 +95,7 @@ class InitialSettingsPage extends React.Component {
         this.getWalletBalance = this.getWalletBalance.bind(this);
         this.getDefaultMenuItems = this.getDefaultMenuItems.bind(this);
         this.getMenuItems = this.getMenuItems.bind(this);
+        this.getMenuItem = this.getMenuItem.bind(this);
     }
 
     componentDidMount() {
@@ -168,6 +170,8 @@ class InitialSettingsPage extends React.Component {
                 iconFill: themeColors.iconReversed,
                 fallbackIcon: Expensicons.FallbackWorkspaceAvatar,
                 brickRoadIndicator: PolicyUtils.getPolicyBrickRoadIndicatorStatus(policy, this.props.policyMembers),
+                pendingAction: policy.pendingAction ? policy.pendingAction : null,
+                isPolicy: true,
             }))
             .value();
         menuItems.push(...this.getDefaultMenuItems());
@@ -175,6 +179,50 @@ class InitialSettingsPage extends React.Component {
         return menuItems;
     }
 
+    getMenuItem(item, index) {
+        const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title;
+        const isPaymentItem = item.translationKey === 'common.payments';
+
+        // If the menu item is a policy, wrap it with OfflineWithFeedback
+        if (item.isPolicy) {
+            return (
+                <OfflineWithFeedback
+                    pendingAction={item.pendingAction}
+                >
+                    <MenuItem
+                        key={`${keyTitle}_${index}`}
+                        title={keyTitle}
+                        icon={item.icon}
+                        iconType={item.iconType}
+                        onPress={item.action}
+                        iconStyles={item.iconStyles}
+                        iconFill={item.iconFill}
+                        shouldShowRightIcon
+                        badgeText={this.getWalletBalance(isPaymentItem)}
+                        fallbackIcon={item.fallbackIcon}
+                        brickRoadIndicator={item.brickRoadIndicator}
+                    />
+                </OfflineWithFeedback>
+            );
+        }
+
+        return (
+            <MenuItem
+                key={`${keyTitle}_${index}`}
+                title={keyTitle}
+                icon={item.icon}
+                iconType={item.iconType}
+                onPress={item.action}
+                iconStyles={item.iconStyles}
+                iconFill={item.iconFill}
+                shouldShowRightIcon
+                badgeText={this.getWalletBalance(isPaymentItem)}
+                fallbackIcon={item.fallbackIcon}
+                brickRoadIndicator={item.brickRoadIndicator}
+            />
+        );
+    }
+
     openProfileSettings() {
         Navigation.navigate(ROUTES.SETTINGS_PROFILE);
     }
@@ -222,25 +270,7 @@ class InitialSettingsPage extends React.Component {
                                 </Text>
                             )}
                         </View>
-                        {_.map(this.getMenuItems(), (item, index) => {
-                            const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title;
-                            const isPaymentItem = item.translationKey === 'common.payments';
-                            return (
-                                <MenuItem
-                                    key={`${keyTitle}_${index}`}
-                                    title={keyTitle}
-                                    icon={item.icon}
-                                    iconType={item.iconType}
-                                    onPress={item.action}
-                                    iconStyles={item.iconStyles}
-                                    iconFill={item.iconFill}
-                                    shouldShowRightIcon
-                                    badgeText={this.getWalletBalance(isPaymentItem)}
-                                    fallbackIcon={item.fallbackIcon}
-                                    brickRoadIndicator={item.brickRoadIndicator}
-                                />
-                            );
-                        })}
+                        {_.map(this.getMenuItems(), (item, index) => this.getMenuItem(item, index))}
                     </View>
                 </ScrollView>
             </ScreenWrapper>

From bc9ed0f5e79a99f0aec18a79fc0416e2f3b0591f Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Thu, 1 Sep 2022 16:06:41 +0200
Subject: [PATCH 2/9] Rename getMenuItems to getMenuItemsList

---
 src/pages/settings/InitialSettingsPage.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index cb8b5b73b411..49b88102fd50 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -94,7 +94,7 @@ class InitialSettingsPage extends React.Component {
 
         this.getWalletBalance = this.getWalletBalance.bind(this);
         this.getDefaultMenuItems = this.getDefaultMenuItems.bind(this);
-        this.getMenuItems = this.getMenuItems.bind(this);
+        this.getMenuItemsList = this.getMenuItemsList.bind(this);
         this.getMenuItem = this.getMenuItem.bind(this);
     }
 
@@ -158,7 +158,7 @@ class InitialSettingsPage extends React.Component {
      * Add free policies (workspaces) to the list of menu items and returns the list of menu items
      * @returns {Array} the menu item list
      */
-    getMenuItems() {
+    getMenuItemsList() {
         const menuItems = _.chain(this.props.policies)
             .filter(policy => policy && policy.type === CONST.POLICY.TYPE.FREE && policy.role === CONST.POLICY.ROLE.ADMIN)
             .map(policy => ({
@@ -270,7 +270,7 @@ class InitialSettingsPage extends React.Component {
                                 </Text>
                             )}
                         </View>
-                        {_.map(this.getMenuItems(), (item, index) => this.getMenuItem(item, index))}
+                        {_.map(this.getMenuItemsList(), (item, index) => this.getMenuItem(item, index))}
                     </View>
                 </ScrollView>
             </ScreenWrapper>

From e9f6bd0090ddeb8126df384f383961b72f68bf29 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Thu, 1 Sep 2022 16:12:53 +0200
Subject: [PATCH 3/9] Add pendingAction proptype

---
 src/pages/settings/InitialSettingsPage.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 49b88102fd50..96254c1d4d0f 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -53,6 +53,9 @@ const propTypes = {
 
         /** The user's role in the policy */
         role: PropTypes.string,
+
+        /** The current action that is waiting to happen on the policy */
+        pendingAction: PropTypes.string,
     })),
 
     /** List of policy members */

From c47ee619e97b52ad79e078e8c8dc54ab1685d255 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Thu, 1 Sep 2022 16:49:17 +0200
Subject: [PATCH 4/9] Add OfflineWithFeedback to WorkspaceInitialPage

---
 src/pages/workspace/WorkspaceInitialPage.js | 117 ++++++++++----------
 1 file changed, 60 insertions(+), 57 deletions(-)

diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.js
index 2f47a219ad41..08610ce151b9 100644
--- a/src/pages/workspace/WorkspaceInitialPage.js
+++ b/src/pages/workspace/WorkspaceInitialPage.js
@@ -27,6 +27,7 @@ import CONST from '../../CONST';
 import * as ReimbursementAccount from '../../libs/actions/ReimbursementAccount';
 import ONYXKEYS from '../../ONYXKEYS';
 import policyMemberPropType from '../policyMemberPropType';
+import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 
 const propTypes = {
     ...fullPolicyPropTypes,
@@ -160,69 +161,71 @@ class WorkspaceInitialPage extends React.Component {
                             styles.justifyContentBetween,
                         ]}
                     >
-                        <View style={[styles.flex1]}>
-                            <View style={styles.pageWrapper}>
-                                <View style={[styles.settingsPageBody, styles.alignItemsCenter]}>
-                                    <Pressable
-                                        style={[styles.pRelative, styles.avatarLarge]}
-                                        onPress={this.openEditor}
-                                    >
-                                        {this.props.policy.avatar
-                                            ? (
-                                                <Avatar
-                                                    containerStyles={styles.avatarLarge}
-                                                    imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
-                                                    source={this.props.policy.avatar}
-                                                    fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
-                                                    size={CONST.AVATAR_SIZE.LARGE}
-                                                />
-                                            )
-                                            : (
-                                                <Icon
-                                                    src={Expensicons.Workspace}
-                                                    height={80}
-                                                    width={80}
-                                                    fill={themedefault.iconSuccessFill}
-                                                />
-                                            )}
-                                    </Pressable>
-                                    {!_.isEmpty(this.props.policy.name) && (
+                        <OfflineWithFeedback pendingAction={this.props.policy.pendingAction}>
+                            <View style={[styles.flex1]}>
+                                <View style={styles.pageWrapper}>
+                                    <View style={[styles.settingsPageBody, styles.alignItemsCenter]}>
                                         <Pressable
-                                            style={[
-                                                styles.alignSelfCenter,
-                                                styles.mt4,
-                                                styles.mb6,
-                                                styles.w100,
-                                            ]}
+                                            style={[styles.pRelative, styles.avatarLarge]}
                                             onPress={this.openEditor}
                                         >
-                                            <Tooltip text={this.props.policy.name}>
-                                                <Text
-                                                    numberOfLines={1}
-                                                    style={[
-                                                        styles.displayName,
-                                                        styles.alignSelfCenter,
-                                                    ]}
-                                                >
-                                                    {this.props.policy.name}
-                                                </Text>
-                                            </Tooltip>
+                                            {this.props.policy.avatar
+                                                ? (
+                                                    <Avatar
+                                                        containerStyles={styles.avatarLarge}
+                                                        imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
+                                                        source={this.props.policy.avatar}
+                                                        fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
+                                                        size={CONST.AVATAR_SIZE.LARGE}
+                                                    />
+                                                )
+                                                : (
+                                                    <Icon
+                                                        src={Expensicons.Workspace}
+                                                        height={80}
+                                                        width={80}
+                                                        fill={themedefault.iconSuccessFill}
+                                                    />
+                                                )}
                                         </Pressable>
-                                    )}
+                                        {!_.isEmpty(this.props.policy.name) && (
+                                            <Pressable
+                                                style={[
+                                                    styles.alignSelfCenter,
+                                                    styles.mt4,
+                                                    styles.mb6,
+                                                    styles.w100,
+                                                ]}
+                                                onPress={this.openEditor}
+                                            >
+                                                <Tooltip text={this.props.policy.name}>
+                                                    <Text
+                                                        numberOfLines={1}
+                                                        style={[
+                                                            styles.displayName,
+                                                            styles.alignSelfCenter,
+                                                        ]}
+                                                    >
+                                                        {this.props.policy.name}
+                                                    </Text>
+                                                </Tooltip>
+                                            </Pressable>
+                                        )}
+                                    </View>
                                 </View>
+                                {_.map(menuItems, item => (
+                                    <MenuItem
+                                        key={item.translationKey}
+                                        title={this.props.translate(item.translationKey)}
+                                        icon={item.icon}
+                                        iconRight={item.iconRight}
+                                        onPress={() => item.action()}
+                                        shouldShowRightIcon
+                                        brickRoadIndicator={item.brickRoadIndicator}
+                                    />
+                                ))}
                             </View>
-                            {_.map(menuItems, item => (
-                                <MenuItem
-                                    key={item.translationKey}
-                                    title={this.props.translate(item.translationKey)}
-                                    icon={item.icon}
-                                    iconRight={item.iconRight}
-                                    onPress={() => item.action()}
-                                    shouldShowRightIcon
-                                    brickRoadIndicator={item.brickRoadIndicator}
-                                />
-                            ))}
-                        </View>
+                        </OfflineWithFeedback>
                     </ScrollView>
                     <ConfirmModal
                         title={this.props.translate('workspace.common.delete')}

From 7485e02d9a959cb10a8abeb9ab5be8e45d5ed430 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Fri, 2 Sep 2022 10:15:42 +0200
Subject: [PATCH 5/9] Move props to one line on OfflineWithFeedback

---
 src/pages/settings/InitialSettingsPage.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 96254c1d4d0f..0e337e58a083 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -189,9 +189,7 @@ class InitialSettingsPage extends React.Component {
         // If the menu item is a policy, wrap it with OfflineWithFeedback
         if (item.isPolicy) {
             return (
-                <OfflineWithFeedback
-                    pendingAction={item.pendingAction}
-                >
+                <OfflineWithFeedback pendingAction={item.pendingAction}>
                     <MenuItem
                         key={`${keyTitle}_${index}`}
                         title={keyTitle}

From 6d71a9c1a5253a034c9b833529ff53c6e1d3caac Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Fri, 2 Sep 2022 10:27:43 +0200
Subject: [PATCH 6/9] Remove unnecessary comments

---
 src/pages/settings/InitialSettingsPage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 0e337e58a083..deff9fdb1e96 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -186,7 +186,6 @@ class InitialSettingsPage extends React.Component {
         const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title;
         const isPaymentItem = item.translationKey === 'common.payments';
 
-        // If the menu item is a policy, wrap it with OfflineWithFeedback
         if (item.isPolicy) {
             return (
                 <OfflineWithFeedback pendingAction={item.pendingAction}>

From c6441798bcfc4f6f1c075cc62ddaf83162da1832 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Fri, 2 Sep 2022 11:55:45 +0200
Subject: [PATCH 7/9] Move key to parent element of MenuItem when wrapped with
 OfflineWithFeedback

---
 src/pages/settings/InitialSettingsPage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index deff9fdb1e96..56871149c55d 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -184,13 +184,13 @@ class InitialSettingsPage extends React.Component {
 
     getMenuItem(item, index) {
         const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title;
+        console.log("🚀 ~ file: InitialSettingsPage.js ~ line 187 ~ InitialSettingsPage ~ getMenuItem ~ keyTitle_index", `${keyTitle}_${index}`)
         const isPaymentItem = item.translationKey === 'common.payments';
 
         if (item.isPolicy) {
             return (
-                <OfflineWithFeedback pendingAction={item.pendingAction}>
+                <OfflineWithFeedback key={`${keyTitle}_${index}`} pendingAction={item.pendingAction}>
                     <MenuItem
-                        key={`${keyTitle}_${index}`}
                         title={keyTitle}
                         icon={item.icon}
                         iconType={item.iconType}

From 2d6c15c62a8d5513d8d0289ef086bc67fd2de0d4 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Fri, 2 Sep 2022 12:02:49 +0200
Subject: [PATCH 8/9] Remove accidental console statement

---
 src/pages/settings/InitialSettingsPage.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index 56871149c55d..ffd5815f9e54 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -184,7 +184,6 @@ class InitialSettingsPage extends React.Component {
 
     getMenuItem(item, index) {
         const keyTitle = item.translationKey ? this.props.translate(item.translationKey) : item.title;
-        console.log("🚀 ~ file: InitialSettingsPage.js ~ line 187 ~ InitialSettingsPage ~ getMenuItem ~ keyTitle_index", `${keyTitle}_${index}`)
         const isPaymentItem = item.translationKey === 'common.payments';
 
         if (item.isPolicy) {

From c251434da9f2dc67ba0df7bcb57d1f95ba292c8a Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Fri, 2 Sep 2022 12:42:58 +0200
Subject: [PATCH 9/9] Update propType for pendingAction to be more specific

---
 src/pages/settings/InitialSettingsPage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js
index ffd5815f9e54..df2fbd8afe0b 100755
--- a/src/pages/settings/InitialSettingsPage.js
+++ b/src/pages/settings/InitialSettingsPage.js
@@ -55,7 +55,7 @@ const propTypes = {
         role: PropTypes.string,
 
         /** The current action that is waiting to happen on the policy */
-        pendingAction: PropTypes.string,
+        pendingAction: PropTypes.oneOf(['add', 'update', 'delete']),
     })),
 
     /** List of policy members */
