Update welcome note

[dukenv0307]

Details

Fixed Issues

$ https://github.com/Expensify/App/issues/37152 PROPOSAL: https://github.com/Expensify/App/issues/37152#issuecomment-1964336610

Tests

1. Go to WS settings
2. Click button 'Invite member'
3. Choose a contact and click button Next
4. Verify that: Welcome message has a new format.

• [x] Verify that no errors appear in the JS console

Offline tests

QA Steps

1. Go to WS settings
2. Click button 'Invite member'
3. Choose a contact and click button Next
4. Verify that: Welcome message has a new format.

• [x] Verify that no errors appear in the JS console

PR Author Checklist

• [x] I linked the correct issue in the ### Fixed Issues section above
• [x] I wrote clear testing steps that cover the changes made in this PR
  • [x] I added steps for local testing in the Tests section
  • [x] I added steps for the expected offline behavior in the Offline steps section
  • [x] I added steps for Staging and/or Production testing in the QA steps section
  • [x] I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • [x] I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • [x] I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• [x] I included screenshots or videos for tests on all platforms
• [x] I ran the tests on all platforms & verified they passed on:
  • [x] Android: Native
  • [x] Android: mWeb Chrome
  • [x] iOS: Native
  • [x] iOS: mWeb Safari
  • [x] MacOS: Chrome / Safari
  • [x] MacOS: Desktop
• [x] I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• [x] I followed proper code patterns (see Reviewing the code)
  • [x] I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • [x] I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • [x] I verified that comments were added to code that is not self explanatory
  • [x] I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • [x] I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • [x] If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • [x] I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • [x] I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is either coming verbatim from figma or has been approved by marketing (in order to get marketing approval, ask the Bug Zero team member to add the Waiting for copy label to the issue)
  • [x] I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • [x] I verified the JSDocs style guidelines (in STYLE.md) were followed
• [x] If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• [x] I followed the guidelines as stated in the Review Guidelines
• [x] I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• [x] I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• [x] I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• [x] I verified that if a function's arguments changed that all usages have also been updated correctly
• [x] If any new file was added I verified that:
  • [x] The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• [x] If a new CSS style is added I verified that:
  • [x] A similar style doesn't already exist
  • [x] The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))
• [x] If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• [x] If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• [x] If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• [x] If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• [x] If the PR modifies the form input styles:
  • [x] I verified that all the inputs inside a form are aligned with each other.
  • [x] I added Design label so the design team can review the changes.
• [x] If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• [x] If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.

Screenshots/Videos

Android: Native

https://github.com/Expensify/App/assets/129500732/1c275282-9440-44a9-b3a5-0a5cbebc297a

Android: mWeb Chrome

https://github.com/Expensify/App/assets/129500732/30c4fd3a-4e57-40da-aacc-60aafc623121

iOS: Native

https://github.com/Expensify/App/assets/129500732/a21598c8-bcbc-43b8-a88e-9d179f260313

iOS: mWeb Safari

https://github.com/Expensify/App/assets/129500732/da9dff7c-f71e-4a5f-9cfc-95ef184ca5ac

MacOS: Chrome / Safari

https://github.com/Expensify/App/assets/129500732/ef125b42-03a4-4006-8e8c-ed5f4464bc29

https://github.com/Expensify/App/assets/129500732/92a7c160-bec9-4b58-9e75-d2e96a3d4dd9

MacOS: Desktop

https://github.com/Expensify/App/assets/129500732/6eee0a71-5348-4fb6-ae63-9e7d95199bee

[melvin-bot[bot]]

@situchan 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]

[trjExpensify]

@situchan can you give us an ETA on reviewing this PR please?

[situchan]

@situchan can you give us an ETA on reviewing this PR please?

ETA end of day

[situchan]

And at least one platform screenshot with Spanish tested. And also screenshot of invite email

[danielrvidal]

@situchan we don't actually need for the welcome messages if they are being sent from Concierge/a guide, etc.

@dukenv0307 if you need other screens translated, you can ask me and I'll get them.

[dukenv0307]

And at least one platform screenshot with Spanish tested. And also screenshot of invite email

@situchan @danielrvidal I just updated Spanish and updated the screenshot in MacOS: Chrome / Safari platform, please check it when you get a chance.

[trjExpensify]

Sorry @dukenv0307, I think you might have misunderstood Daniel. Messages in the product that come from "Expensify" in a support capacity like Concierge, an account manager or a setup specialist etc are not translated into Spanish because we don't provide support in Spanish.

[situchan]

@trjExpensify we have Spanish message in production. So now this should be unlocalized? https://github.com/Expensify/App/blob/0cb701c34ccb45a10227f8d2e34cecab5b80cfc4/src/languages/es.ts#L2003-L2004

[trjExpensify]

Cool, chatted to some peeps internally here (ref for Expensifiers) and we'd like to remove that translation on the welcomeNote message, please. CC: @iwiznia

[danielrvidal]

@dukenv0307 do you mind showing what the email looks like when:

• The workspace description is: This is the workspace description.
• The invite message is: This is the invite message.

This screenshot looks to be incorrect, but I think it's because you are inputting information into the invite message:

This is what the email should be:

Subject: [First Name] [Last Name] ([[email protected]]) invited you to Expensify

Hi there -

To join "[workspace name]", [click here](link) to start tracking your expenses!

They also added the message:
[Input invitationmessage]

Additionally, here is the workspace description:
[Input workspace description]

And the bottom two lines (for invitation/workspace description) are dependent on 1) if they are present and 2) what the text of those inputs are.

If you don't mind showing a mock-up/video up what it looks like with the suggestions above I can definitively tell you if there is an issue in the coding or if it was just because of what was input in the invitation message.

[danielrvidal]

Maybe to add a bit more information, here is what I would expect the message to look like and then I have defined what is driving some of the pieces. Please let me know if there is any questions.

• Daniel Vidal in the subject line is my First/Last name
• Bob's Donut's is the workspace name.
• click here is linked to the workspace chat they were invited to (the URL for which is unique as every member gets a workspace chat created on invite to a workspace).
• "This is the invite message" is the invite message they input when inviting the user to the workspace.
• "This is the workspace description" is the workspace description.

[dukenv0307]

@danielrvidal this is my error, thank you for your explanation. I will update the PR soon.

[dukenv0307]

@situchan @trjExpensify If we decide to remove welcomeNote, should we remove all welcomeNotes from the en and es files and then move welcomeNote to the const file?

[dukenv0307]

To join "[workspace name]", click here to start tracking your expenses!

@danielrvidal can you give me some link examples or link formats here?

[dukenv0307]

@danielrvidal @situchan subject mail in here, I think BE will fix it?

[situchan]

@situchan @trjExpensify If we decide to remove welcomeNote, should we remove all welcomeNotes from the en and es files and then move welcomeNote to the const file?

I don't mind putting this directly in view component like copy on onboarding modal https://github.com/Expensify/App/blob/0a512c9f3cf1b207668ab93f3d79866c80345f88/src/pages/OnboardEngagement/PurposeForUsingExpensifyPage.tsx#L25

Maybe it would be good to group concierge messages all together but out of scope

[danielrvidal]

@dukenv0307 here is an example of a workspace chat link: https://new.expensify.com/r/4656517140007919

It would just direct me to my workspace chat:

Obviously for a new user, theirs would not be populated with any requests yet but it would drop them into their workspace chat.

[danielrvidal]

@situchan @dukenv0307 any update on this one? Let me know if you need anything else.

[dukenv0307]

@danielrvidal https://github.com/Expensify/App/pull/38023#issuecomment-1997157656 Can you verify my question here here?

[danielrvidal]

subject mail in here, I think BE will fix it?

Sorry, what is BE in this reference? I'll be sure to get it answered asap.

[trjExpensify]

@danielrvidal I think @dukenv0307 is asking if we're getting the intended subject line for this message from the backend or not?

#[senders display name] ([senders login]) invited you to Expensify

[danielrvidal]

@dukenv0307 just for reference, I'm looking into the backend changes in here. It looks like something might not be working with the updated message. @Gonals should give us some more info tomorrow.

[Gonals]

@dukenv0307 just for reference, I'm looking into the backend changes in here. It looks like something might not be working with the updated message. @Gonals should give us some more info tomorrow.

It shouldn't affect this PR at all 😁

[danielrvidal]

@dukenv0307 we're still working figuring out the subject line/invite updates. I'll get back to you asap.

[danielrvidal]

@dukenv0307 I have an update for you. Sorry for the delay. Here are the new updates we need to make. Can you let me know:

1. Does the below all make sense? If not, please let me know precisely what you need help with. @Gonals @tgolen and I can help.
2. If it does make sense, can we prioritize this as it is blocking a high-priority project?
3. Can you let us know what the ETA might be?

Here is what the invite should be on New Expensify:

Subject: # [inviterFirstName] [inviterLastName] invited you to [workspaceName]

Body:
[welcomeNote]

Footer: Head over to new.expensify.com to respond on Expensify, or reply here.

• This should trigger a whisper message for the invited in the workspaceChat from the inviter.
• The whisper message will use the custom subject line syntax (so the subject line is bigger/bolded in the chat UI) and thus trigger an invite email/SMS.
• If the inviter does not have a [inviterFirstName] [inviterLastName], it would be their email/SMS in place of those.
• In the footer, new.expensify.com should link to the workspace chat.
• The footer is not shown in the whisper, only in email/SMS.

If you would like to see the updates that @Gonals is making on Expensify Classic, you can here.

Let us know what we can do to help!

[dukenv0307]

"This is the invite message" is the invite message they input when inviting the user to the workspace.

@danielrvidal I have some questions here

1. The text that we entered in WorkspaceInviteMessagePage here will be the invite message as your description here https://github.com/Expensify/App/pull/38023#issuecomment-1996163665 or it's the whole message that we will send to the user

https://github.com/Expensify/App/assets/129500732/67431578-be43-4873-bd3f-fbd32aa7b9b2

And the text that we entered here will be

here is an example of a workspace chat link: https://new.expensify.com/r/4656517140007919

2. I'm still confused about the workspaceLink because if we invite many users at the same time, the workspace chat for each user will be different while the message that we send to them is the same.

[danielrvidal]

Hey @dukenv0307 please find the follow-ups below:

1. In the video you linked, the text box will be the workspaceDescription by default. If the user ends up changing the text in the text box, then you would send whatever they input as the body of the welcomeNote. I've highlighted where that goes here:

2. If we invite many members at one time, you would need to change the new.expensify.com link to be the workspace Chat that is specific to each invited member. Thus, each invite will have the same text but have different links linked in the new.expensify.com

Let me know if that does not make sense.

[dukenv0307]

@danielrvidal Thanks for your feedback, I need to clarify another here

then you would send whatever they input as the body of the welcomeNote.

1. If the user changes the input, it will be This is invite message here or it's all body of the email

If we invite many members at one time, you would need to change the new.expensify.com link to be the workspace Chat that is specific to each invited member. Thus, each invite will have the same text but have different links linked in the new.expensify.com

2. Actually, when AddMemberToWorkspace API is called, we send the welcomeNote to backend and it will be used as the body of the email for all users, so if we want to do that we need to config the workspaceLink from backend

[danielrvidal]

If the user changes the input, it will be This is invite message https://github.com/Expensify/App/pull/38023#issuecomment-1996163665 or it's all body of the email

Sorry, but I think what you are linking to is not correct. We would want the body to be what is in the welcomeNote and only that except for the footer which we'll always send in email/SMS. It is not the message you linked to. Please let me know if that does not make sense.

Actually, when AddMemberToWorkspace API is called, we send the welcomeNote to backend and it will be used as the body of the email for all users, so if we want to do that we need to config the workspaceLink from backend

@tgolen @Gonals for workspace invites, I'm wondering if the footer should be sent via the back end because it is always going to be the same thing when being sent to a user on NewDot. Can you advise what we should do here?

Reply to this message or respond at new.expensify.com

And new.expensify.com links to the workspace chat that applies to them. I think this would fix what @dukenv0307 is talking about. Note: This is a slightly updated from the footer I had above as someone pointed out we want a footer with the link at the end so it will look good in SMS too.

[dukenv0307]

@danielrvidal

Sorry, but I think what you are linking to is not correct. We would want the body to be what is in the welcomeNote and only that except for the footer which we'll always send in email/SMS. It is not the message you linked to. Please let me know if that does not make sense.

So that it can be understood easily I will take an example

1. In WorkspaceInviteMessagePage, if we don't edit anything in the input the body email will have this format, right?

Hi there -

To join "[workspace name]", [click here](link) to start tracking your expenses!

They also added the message:
[Input invitationmessage]

Additionally, here is the workspace description:
[Input workspace description]

2. If I clear the input and type Here is my invite message, the body of email will be

Hi there -

To join "[workspace name]", [click here](link) to start tracking your expenses!

They also added the message:
Here is my invite message

Additionally, here is the workspace description:
[Input workspace description]

or it will be

Here is my invite message