Merge main to resolve merge conflicts

Expensify · Aug 21, 2023 · 6b13565 · 6b13565
2 parents 8ad0fc4 + 298ae29
commit 6b13565
Show file tree

Hide file tree

Showing 21 changed files with 302 additions and 85 deletions.
diff --git a/docs/_sass/_colors.scss b/docs/_sass/_colors.scss
@@ -1,7 +1,10 @@
 $color-green400: #03D47C;
 $color-green-icons: #8B9C8F;
 $color-green-borders: #1A3D32;
+$color-button-background: #1A3D32;
+$color-button-hovered: #2C6755;
 $color-green-highlightBG: #07271F;
+$color-green-highlightBG-hover: #06231c;
 $color-green-appBG: #061B09;
 $color-green-hover: #00a862;
 $color-light-gray-green: #AFBBB0;

diff --git a/docs/_sass/_search-bar.scss b/docs/_sass/_search-bar.scss
@@ -4,6 +4,7 @@
 
 $color-appBG: $color-green-appBG;
 $color-highlightBG: $color-green-highlightBG;
+$color-highlightBG-hover: $color-green-highlightBG-hover;
 $color-accent : $color-green400;
 $color-borders: $color-green-borders;
 $color-icons: $color-green-icons;
@@ -27,6 +28,7 @@ $color-gray-label: $color-gray-label;
     display: block;
     top: 0;
     right: 0;
+    z-index: 2;
 }
 
 @media only screen and (max-width: $breakpoint-tablet) {
@@ -69,7 +71,7 @@ $color-gray-label: $color-gray-label;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.4);
-    z-index: 2;
+    z-index: 1;
 }
 
 /* All gsc id & class are Google Search relate gcse_0 is the search bar parent & gcse_1 is the search result list parent */
@@ -156,6 +158,13 @@ label.search-label {
     font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
     max-height: 80vh;
     overflow-y: scroll;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+/* Hide the scrollbar */
+.gsc-control-cse::-webkit-scrollbar {
+    display: none;
 }
 
 .gs-title {
@@ -195,3 +204,67 @@ label.search-label {
 .gsc-resultsbox-visible .gsc-webResult .gsc-result {
     border-bottom: none;
 }
+
+
+/* Change Font the Google Search result */
+.gsc-control-cse .gsc-table-result {
+    font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
+}
+
+/* Change Font result Paragraph color */
+.gsc-results .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType {
+    color: $color-text;
+}
+
+
+/* Change the color of the Google Search Suggestion font */
+.gs-spelling.gs-result {
+    color: $color-text;
+}
+
+/* Pagination related style */
+.gsc-resultsbox-visible .gsc-results .gsc-cursor-box {
+    text-align: center;
+}
+
+.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page {
+    margin: 4px;
+    width: 28px;
+    height: 28px;
+    border-radius: 25px;
+    display: inline-block;
+    line-height: 2.5;
+    background-color: $color-accent;
+    font-weight: bold;
+    font-size: 11px;
+}
+
+
+/* Change the color & background of Google Search Pagination */
+.gsc-cursor-next-page,
+.gsc-cursor-final-page {
+    color: $color-text;
+    background-color: $color-appBG;
+}
+
+/* Change the color & background of Google Search Current Page */
+.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page {
+    background-color: $color-accent;
+    color: $color-text;
+
+    &:hover {
+        text-decoration: none;
+        background-color: $color-accent;
+    }
+}
+
+/* Change the color & background of Google Search of Other Page */
+.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page {
+    background-color: $color-button-background;
+    color: $color-text;
+
+    &:hover {
+        background-color: $color-button-hovered;
+        text-decoration: none;
+    }
+}
diff --git a/docs/assets/js/main.js b/docs/assets/js/main.js
@@ -75,16 +75,6 @@ function injectFooterCopywrite() {
     footer.innerHTML = `&copy;2008-${new Date().getFullYear()} Expensify, Inc.`;
 }
 
-function openSidebar() {
-    document.getElementById('sidebar-layer').style.display = 'block';
-
-    // Make body unscrollable
-    const yAxis = document.documentElement.style.getPropertyValue('y-axis');
-    const body = document.body;
-    body.style.position = 'fixed';
-    body.style.top = `-${yAxis}`;
-}
-
 function closeSidebar() {
     document.getElementById('sidebar-layer').style.display = 'none';
 
@@ -100,6 +90,31 @@ function closeSidebar() {
     window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
 }
 
+function closeSidebarOnClickOutside(event) {
+    const sidebarLayer = document.getElementById('sidebar-layer');
+
+    if (event.target !== sidebarLayer) {
+        return;
+    }
+    closeSidebar();
+}
+
+function openSidebar() {
+    document.getElementById('sidebar-layer').style.display = 'block';
+
+    // Make body unscrollable
+    const yAxis = document.documentElement.style.getPropertyValue('y-axis');
+    const body = document.body;
+    body.style.position = 'fixed';
+    body.style.top = `-${yAxis}`;
+
+    // Close the sidebar when clicking sidebar layer (outside the sidebar search)
+    const sidebarLayer = document.getElementById('sidebar-layer');
+    if (sidebarLayer) {
+        sidebarLayer.addEventListener('click', closeSidebarOnClickOutside);
+    }
+}
+
 // Function to adapt & fix cropped SVG viewBox from Google based on viewport (Mobile or Tablet-Desktop)
 function changeSVGViewBoxGoogle() {
     // Get all inline Google SVG elements on the page

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -153,7 +153,7 @@
     "react-web-config": "^1.0.0",
     "react-window": "^1.8.9",
     "save": "^2.4.0",
-    "semver": "^7.3.8",
+    "semver": "^7.5.2",
     "shim-keyboard-event-key": "^1.0.3",
     "underscore": "^1.13.1"
   },

diff --git a/src/ROUTES.js b/src/ROUTES.js
@@ -207,4 +207,5 @@ export default {
             isSubReportPageRoute: pathSegments.length > 2,
         };
     },
+    SIGN_IN_MODAL: 'sign-in-modal',
 };
diff --git a/src/components/OfflineWithFeedback.js b/src/components/OfflineWithFeedback.js
@@ -94,10 +94,10 @@ function OfflineWithFeedback(props) {
     const errorMessages = _.omit(props.errors, (e) => e === null);
     const hasErrorMessages = !_.isEmpty(errorMessages);
     const isOfflinePendingAction = props.network.isOffline && props.pendingAction;
-    const isUpdateOrDeleteError = hasErrors && (props.pendingAction === 'delete' || props.pendingAction === 'update');
-    const isAddError = hasErrors && props.pendingAction === 'add';
+    const isUpdateOrDeleteError = hasErrors && (props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE);
+    const isAddError = hasErrors && props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD;
     const needsOpacity = (isOfflinePendingAction && !isUpdateOrDeleteError) || isAddError;
-    const needsStrikeThrough = props.network.isOffline && props.pendingAction === 'delete';
+    const needsStrikeThrough = props.network.isOffline && props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const hideChildren = props.shouldHideOnDelete && !props.network.isOffline && props.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE && !hasErrors;
     let children = props.children;
 

diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js
@@ -23,6 +23,7 @@ import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import EmptyStateBackgroundImage from '../../../assets/images/empty-state_background-fade.png';
 import useLocalize from '../../hooks/useLocalize';
 import useWindowDimensions from '../../hooks/useWindowDimensions';
+import OfflineWithFeedback from '../OfflineWithFeedback';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -103,36 +104,44 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, polic
                     style={[StyleUtils.getReportWelcomeBackgroundImageStyle(true)]}
                 />
             </View>
-            <MenuItemWithTopDescription
-                title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}
-                shouldShowTitleIcon={isSettled}
-                titleIcon={Expensicons.Checkmark}
-                description={description}
-                titleStyle={styles.newKansasLarge}
-                disabled={isSettled || !canEdit}
-                shouldShowRightIcon={canEdit}
-                onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
-            />
-            <MenuItemWithTopDescription
-                description={translate('common.description')}
-                title={transactionDescription}
-                disabled={isSettled || !canEdit}
-                shouldShowRightIcon={canEdit}
-                onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
-            />
-            <MenuItemWithTopDescription
-                description={translate('common.date')}
-                title={transactionDate}
-                disabled={isSettled || !canEdit}
-                shouldShowRightIcon={canEdit}
-                onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
-            />
-            <MenuItemWithTopDescription
-                description={translate('common.merchant')}
-                title={transactionMerchant}
-                shouldShowRightIcon={false}
-                disabled
-            />
+            <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.amount') || lodashGet(transaction, 'pendingAction')}>
+                <MenuItemWithTopDescription
+                    title={formattedTransactionAmount ? formattedTransactionAmount.toString() : ''}
+                    shouldShowTitleIcon={isSettled}
+                    titleIcon={Expensicons.Checkmark}
+                    description={description}
+                    titleStyle={styles.newKansasLarge}
+                    disabled={isSettled || !canEdit}
+                    shouldShowRightIcon={canEdit}
+                    onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.AMOUNT))}
+                />
+            </OfflineWithFeedback>
+            <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.comment') || lodashGet(transaction, 'pendingAction')}>
+                <MenuItemWithTopDescription
+                    description={translate('common.description')}
+                    title={transactionDescription}
+                    disabled={isSettled || !canEdit}
+                    shouldShowRightIcon={canEdit}
+                    onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DESCRIPTION))}
+                />
+            </OfflineWithFeedback>
+            <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.created') || lodashGet(transaction, 'pendingAction')}>
+                <MenuItemWithTopDescription
+                    description={translate('common.date')}
+                    title={transactionDate}
+                    disabled={isSettled || !canEdit}
+                    shouldShowRightIcon={canEdit}
+                    onPress={() => Navigation.navigate(ROUTES.getEditRequestRoute(report.reportID, CONST.EDIT_REQUEST_FIELD.DATE))}
+                />
+            </OfflineWithFeedback>
+            <OfflineWithFeedback pendingAction={lodashGet(transaction, 'pendingFields.merchant') || lodashGet(transaction, 'pendingAction')}>
+                <MenuItemWithTopDescription
+                    description={translate('common.merchant')}
+                    title={transactionMerchant}
+                    shouldShowRightIcon={false}
+                    disabled
+                />
+            </OfflineWithFeedback>
             {shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
         </View>
     );

diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js
@@ -48,6 +48,11 @@ Onyx.connect({
         }
 
         currentAccountID = val.accountID;
+        if (Navigation.isActiveRoute(ROUTES.SIGN_IN_MODAL)) {
+            // This means sign in in RHP was successful, so we can dismiss the modal and subscribe to user events
+            Navigation.dismissModal();
+            User.subscribeToUserEvents();
+        }
     },
 });
 

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js
@@ -725,6 +725,16 @@ const EditRequestStackNavigator = createModalStackNavigator([
     },
 ]);
 
+const SignInModalStackNavigator = createModalStackNavigator([
+    {
+        getComponent: () => {
+            const SignInModal = require('../../../pages/signin/SignInModal').default;
+            return SignInModal;
+        },
+        name: 'SignIn_Root',
+    },
+]);
+
 export {
     MoneyRequestModalStackNavigator,
     SplitDetailsModalStackNavigator,
@@ -746,4 +756,5 @@ export {
     WalletStatementStackNavigator,
     FlagCommentStackNavigator,
     EditRequestStackNavigator,
+    SignInModalStackNavigator,
 };
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -93,6 +93,10 @@ function RightModalNavigator() {
                 name="EditRequest"
                 component={ModalStackNavigators.EditRequestStackNavigator}
             />
+            <Stack.Screen
+                name="SignIn"
+                component={ModalStackNavigators.SignInModalStackNavigator}
+            />
         </Stack.Navigator>
     );
 }

diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
@@ -355,6 +355,11 @@ export default {
                             EditRequest_Currency: ROUTES.EDIT_CURRENCY_REQUEST,
                         },
                     },
+                    SignIn: {
+                        screens: {
+                            SignIn_Root: ROUTES.SIGN_IN_MODAL,
+                        },
+                    },
                 },
             },
         },