Clickable emoji for expense task by Amoralchik · Pull Request #56602 · Expensify/App

Amoralchik · 2025-02-10T12:27:11Z

Explanation of Change

Fixed Issues

$ #54643
PROPOSAL: #54643 (comment)

Tests

Verify that no errors appear in the JS console

Offline tests

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."

Create new account
Choose "Get paid back by my employer" option in onboarding
Click the "Submit expense" task from Concierge
Make sure you can see a green emoji-like button inline with the text
Make sure you can click green button and finish Task (Create expense)

PR Author Checklist

Screenshots/Videos

Android: Native

2025-02-25.20.44.49.mov

Android: mWeb Chrome

2025-02-25.20.49.49.mov

iOS: Native

2025-02-24.22.17.06.mov

iOS: mWeb Safari

2025-02-25.20.52.29.mov

MacOS: Chrome / Safari

2025-02-25.20.41.03.mov

MacOS: Desktop

2025-02-25.20.38.48.mov

…-exoense-task

Amoralchik · 2025-02-13T10:29:33Z

@roryabraham I can't say for sure if it is similar to issues you mentioned.

In my opinion it is better to have a conversation here.

src/components/HTMLEngineProvider/HTMLRenderers/CustomEmojiRenderer.tsx

src/styles/index.ts

…derer.tsx Co-authored-by: c3024 <102477862+c3024@users.noreply.github.com>

Co-authored-by: c3024 <102477862+c3024@users.noreply.github.com>

…xoense-task

melvin-bot · 2025-02-24T16:40:45Z

@c3024 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

Amoralchik · 2025-02-24T16:42:35Z

Open for review
cc @c3024 @roryabraham

shawnborton · 2025-02-24T17:01:19Z

Do we have updated screenshots to review?

dubielzyk-expensify · 2025-02-25T01:10:35Z

Tried this locally but couldn't get Concierge to send the onboarding message. It usually triggers, but unsure if it's related to this PR or if dev is just being weird.

On iOS native the positioning looks great:

But on macOS and Android it seems to sit quite a bit higher:

Any reason for this?

github-actions · 2025-02-25T01:17:22Z

🚧 @roryabraham has triggered a test build. You can view the workflow run here.

Amoralchik · 2025-02-25T18:56:17Z

Updated
change position for web & android

dubielzyk-expensify · 2025-02-26T02:34:06Z

Still seeing it pretty high on web

Amoralchik · 2025-02-26T14:03:19Z

@dubielzyk-expensify Hi,
Could you provide more information? Also, please check if you have updated the git branch to the latest commit. The updated version is shown in the video description. Thanks!

c3024 · 2025-02-26T16:25:18Z

src/components/FABPopoverProvider.tsx

+        if (platform !== CONST.PLATFORM.WEB) {
+            return;
+        }
+        document.removeEventListener('dragover', hidePopoverOnDragOver);


Is this still necessary? We are not adding this event listener for removing it.

This code is initially from BottomTabBarFloatingActionButton

c3024 · 2025-02-26T16:35:18Z

src/components/FABPopoverProvider.tsx

+import React, {createContext, useCallback, useMemo, useRef, useState} from 'react';
+import type {View} from 'react-native';
+import getPlatform from '@libs/getPlatform';
+import type FloatingActionButtonPopoverMenuRef from '@pages/home/sidebar/BottomTabBarFloatingActionButton/types';


We can move this type to this file and remove index.native.ts and types of BottomTabBarFloatingActionButton because we are not using BottomTabBarFloatingActionButton anymore!

c3024 · 2025-02-26T16:37:10Z

src/components/HTMLEngineProvider/CustomEmojiWithDefaultPressableAction.tsx

+            <PressableWithoutFeedback
+                onPress={() => setIsCreateMenuActive(!isFabActionActive)}
+                onLongPress={() => {}}
+                style={{verticalAlign: 'bottom', userSelect: 'none'}}


Suggested change

style={{verticalAlign: 'bottom', userSelect: 'none'}}

style={[styles.verticalAlignBotton, styles.userSelectNone]}

c3024 · 2025-02-26T16:52:20Z

src/libs/Navigation/NavigationRoot.tsx

            }}
        >
-            <AppNavigator authenticated={authenticated} />
+            <FABPopoverProvider>


Any reason for separately wrapping the Provider here unlike adding in Expensify.tsx like we do with other Providers?

We need NavigationContainer for FloatingActionButtonPopover (aka FABPopoverContext) if we place it in Expensify.tsx we fail with this error:
Couldn't find a navigation object. Is your component inside NavigationContainer?

c3024 · 2025-02-26T17:06:23Z

src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx

-                onPress={toggleCreateMenu}
-            />
-        </View>
+        </>


Now that FAB is moved to another component we can rename this component to FloatingActionButtonPopover.

…xoense-task

Amoralchik · 2025-03-03T22:24:52Z

Resolve merge conflict
No changes
Merge origin into branch

dubielzyk-expensify · 2025-03-04T04:52:32Z

The new screenshots look good from my end 👍

shawnborton · 2025-03-04T09:56:15Z

Same! Going to fire up a quick test build though because I'm curious if browser zooming has any impact on this one, but otherwise I think we're good to go.

github-actions · 2025-03-04T09:56:47Z

🚧 @shawnborton has triggered a test hybrid app build. You can view the workflow run here.

github-actions · 2025-03-04T10:21:57Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, Desktop, and Web. Happy testing! 🧪🧪

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/56602/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/56602/index.html

Desktop 💻	Web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/56602/NewExpensify.dmg	https://56602.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

shawnborton · 2025-03-04T10:26:10Z

Cool, looks good to me after a quick test. Time for final review @c3024 !

c3024 · 2025-03-04T15:39:13Z

Screenshots/Videos

Android: Native

Screenrecorder-2025-03-04-20-32-51-747.mp4

Android: mWeb Chrome

Screenrecorder-2025-03-04-20-35-40-117.mp4

iOS: Native

emojiiOS-compressed.mp4

iOS: mWeb Safari

ScreenRecording_03-04-2025.20-47-44_1.MP4

MacOS: Chrome / Safari

emojiChrome.mov

MacOS: Desktop

c3024 · 2025-03-04T15:43:42Z

Everything tests well. On Android, the emoji layout does not follow text the same way it does on iOS. Different devices have different scales, making it impossible to place emojis accurately at extreme zoom-ins and zoom-outs. On my Redmi Note 11 Pro+, there’s some misalignment at extreme zooms, but it’s the same for regular emojis as well.

It looks fine on the emulator for all scales.

Since Android alignment cannot be fixed across all zoom levels, I think we can ship this!

OSBotify · 2025-03-04T18:46:19Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2025-03-04T22:08:43Z

🚀 Deployed to staging by https://github.com/roryabraham in version: 9.1.9-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	success ✅

github-actions · 2025-03-04T22:51:50Z

🚀 Deployed to staging by https://github.com/roryabraham in version: 9.1.9-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	success ✅
🍎🔄 iOS HybridApp 🍎🔄	success ✅

…-exoense-task" This reverts commit a1fae23, reversing changes made to d47c197.

[CP Staging] Revert "Merge pull request #56602 from Amoralchik/clickable-emoji-for…

[CP Staging] Revert "Merge pull request #56602 from Amoralchik/clickable-emoji-for… (cherry picked from commit 8d588e8) (CP triggered by puneetlath)

* main: (192 commits) Update Mobile-Expensify submodule version to 9.1.9-6 Update version to 9.1.9-6 reset the submodule commit to fix crash Revert "fix: Message Previews Always Include Sender Name" Update Mobile-Expensify submodule version to 9.1.9-5 Update version to 9.1.9-5 Update Mobile-Expensify submodule version to 9.1.9-4 Update version to 9.1.9-4 Revert "Merge pull request #56602 from Amoralchik/clickable-emoji-for-exoense-task" Update Require-tags-and-categories-for-expenses.md Update Require-tags-and-categories-for-expenses.md bump Mobile-Expensify submodule remove unused code Update Require-tags-and-categories-for-expenses.md Add domain function back to help doc Update Mobile-Expensify submodule version to 9.1.9-3 Update version to 9.1.9-3 avoid deleted employee in exporter list update comment Update redirects.csv ...

…ickable-emoji-for-exoense-task"" This reverts commit 65d675b.

github-actions · 2025-03-06T22:55:04Z

🚀 Deployed to production by https://github.com/puneetlath in version: 9.1.9-8 🚀

platform	result
🤖 android 🤖	true ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	failure ❌

github-actions · 2025-03-06T23:14:29Z

🚀 Deployed to staging by https://github.com/roryabraham in version: 9.1.10-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	success ✅
🍎🔄 iOS HybridApp 🍎🔄	success ✅

github-actions · 2025-03-10T21:10:01Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.1.10-6 🚀

platform	result
🤖 android 🤖	true ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	failure ❌

Amoralchik added 2 commits February 10, 2025 13:55

Add custom emoji support and update onboarding instructions

f79f6b4

Merge remote-tracking branch 'ogorigin/main' into clickable-emoji-for…

2d99731

…-exoense-task

Amoralchik mentioned this pull request Feb 10, 2025

[Due for payment 2025-07-22] [$250] Improvement: Make the "press the green + button" text in the "Submit an Expense" task on mobile a clickable emoji #54643

Closed

8 tasks

c3024 suggested changes Feb 18, 2025

View reviewed changes

src/components/HTMLEngineProvider/HTMLRenderers/CustomEmojiRenderer.tsx Outdated Show resolved Hide resolved

src/styles/index.ts Outdated Show resolved Hide resolved

Amoralchik and others added 7 commits February 19, 2025 19:30

Update src/components/HTMLEngineProvider/HTMLRenderers/CustomEmojiRen…

82445b6

…derer.tsx Co-authored-by: c3024 <102477862+c3024@users.noreply.github.com>

Update src/styles/index.ts

d063ba4

Co-authored-by: c3024 <102477862+c3024@users.noreply.github.com>

Remove fontScale from useResponsiveLayout

41d937a

Merge remote-tracking branch 'origin/main' into clickable-emoji-for-e…

ab766dc

…xoense-task

Merge remote-tracking branch 'origin/main' into clickable-emoji-for-e…

93e3ddc

…xoense-task

Add ref for CustomEmojiWithDefaultPressableAction

edebbc2

fix lint warnings

1074a41

Amoralchik marked this pull request as ready for review February 24, 2025 16:40

Amoralchik requested review from a team as code owners February 24, 2025 16:40

melvin-bot bot requested review from c3024 and removed request for a team February 24, 2025 16:40

fix emoji press

d9d1563

roryabraham added the Ready To Build label Feb 25, 2025

This comment has been minimized.

Sign in to view

update margin calculations for Android and Web

bc5c49f

c3024 suggested changes Feb 26, 2025

View reviewed changes

Amoralchik added 2 commits February 28, 2025 02:06

Merge remote-tracking branch 'origin/main' into clickable-emoji-for-e…

163c0cf

…xoense-task

Merge remote-tracking branch 'origin/main' into clickable-emoji-for-e…

918a54b

…xoense-task

c3024 approved these changes Mar 4, 2025

View reviewed changes

roryabraham approved these changes Mar 4, 2025

View reviewed changes

roryabraham merged commit a1fae23 into Expensify:main Mar 4, 2025
17 checks passed

github-actions bot mentioned this pull request Mar 4, 2025

Deploy Checklist: New Expensify 2025-03-04 #57792

Closed

77 tasks

tgolen mentioned this pull request Mar 5, 2025

[Due for payment 2025-03-17] [Due for payment 2025-03-13] LHN - FAB does not close when clicking FAB button again when FAB is opened #57797

Closed

8 tasks

tgolen changed the title ~~Clickable emoji for exoense task~~ Clickable emoji for expense task Mar 5, 2025

tgolen added a commit that referenced this pull request Mar 5, 2025

Revert "Merge pull request #56602 from Amoralchik/clickable-emoji-for…

65d675b

…-exoense-task" This reverts commit a1fae23, reversing changes made to d47c197.

tgolen mentioned this pull request Mar 5, 2025

[CP Staging] Revert "Merge pull request #56602 from Amoralchik/clickable-emoji-for… #57890

Merged

60 tasks

puneetlath added a commit that referenced this pull request Mar 5, 2025

Merge pull request #57890 from Expensify/tgolen-revert-PR56602

8d588e8

[CP Staging] Revert "Merge pull request #56602 from Amoralchik/clickable-emoji-for…

Amoralchik added a commit to Amoralchik/App that referenced this pull request Mar 6, 2025

Revert "Revert "Merge pull request Expensify#56602 from Amoralchik/cl…

6249f33

…ickable-emoji-for-exoense-task"" This reverts commit 65d675b.

github-actions bot mentioned this pull request Mar 6, 2025

Deploy Checklist: New Expensify 2025-03-06 #57963

Closed

93 tasks

c3024 mentioned this pull request Mar 10, 2025

Fix FAB button state synchronization with create menu activity #57874

Closed

50 tasks

	style={{verticalAlign: 'bottom', userSelect: 'none'}}
	style={[styles.verticalAlignBotton, styles.userSelectNone]}

Conversation

Amoralchik commented Feb 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

Amoralchik commented Feb 13, 2025

Uh oh!

Uh oh!

Uh oh!

melvin-bot bot commented Feb 24, 2025

Uh oh!

Amoralchik commented Feb 24, 2025

Uh oh!

shawnborton commented Feb 24, 2025

Uh oh!

dubielzyk-expensify commented Feb 25, 2025

Uh oh!

github-actions bot commented Feb 25, 2025

Uh oh!

This comment has been minimized.

Amoralchik commented Feb 25, 2025

Uh oh!

dubielzyk-expensify commented Feb 26, 2025

Uh oh!

Amoralchik commented Feb 26, 2025

Uh oh!

c3024 Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

Amoralchik Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

c3024 Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

c3024 Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

c3024 Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

Amoralchik Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

c3024 Feb 26, 2025

Choose a reason for hiding this comment

Uh oh!

Amoralchik commented Mar 3, 2025

Uh oh!

dubielzyk-expensify commented Mar 4, 2025

Uh oh!

shawnborton commented Mar 4, 2025

Uh oh!

github-actions bot commented Mar 4, 2025

Uh oh!

github-actions bot commented Mar 4, 2025

Uh oh!

shawnborton commented Mar 4, 2025

Uh oh!

c3024 commented Mar 4, 2025

Screenshots/Videos

Uh oh!

c3024 commented Mar 4, 2025

Uh oh!

Uh oh!

OSBotify commented Mar 4, 2025

Uh oh!

github-actions bot commented Mar 4, 2025

Uh oh!

github-actions bot commented Mar 4, 2025

Uh oh!

github-actions bot commented Mar 6, 2025

Uh oh!

github-actions bot commented Mar 6, 2025

Amoralchik commented Feb 10, 2025 •

edited

Loading