[HOLD for payment 2023-09-07] [$2000] [New feature] Teachers Unite sign-up flows

[marcochavezf]

Strategic Context

People around the world incur out-of-pocket expenses to fight injustice that they care about in their local community. Expensify.org calls them “volunteers”. A great example of this are school teachers who pay for books, prizes, classroom decor, etc. out of their own money to plug gaps left by state underfunding. Expensify’s native community provides a unique and powerful opportunity to fight social injustice around the world by directly connecting our charity (Expensify.org) and Expensify members (the public) with these volunteers to split their expense costs. It is through these ‘campaigns’ that Expensify.org slowly evolves the traditional donation model into efficient, emotionally engaging and fraud-free giving.

Solution

We're launching a new initiative called "Teachers Unite" for educators who personally finance essential classroom supplies, inviting them to share these costs with Expensify.org through NewDot. Thus, the goal for this GH is to implement part of the sign-up procedures for this campaign.

Details

A new menu item in the FAB will be called "Save the world". When the user selects this option, we’ll show the new “Teachers Unite” view with a “select option” to choose either the Volunteer referral flow (“I know a teacher”) or the Volunteer sign-up flow (“I am a teacher”).

Volunteer referral flow:

This flow will consist of only one form view (“I know a teacher”). According to the Offline UX diagram, this will be pattern A (optimistic without feedback), because the server response can be anticipated and the referrer doesn’t need to know if the action is successful.

Selecting ‘I know a teacher’ opens up a new page requesting:

• First name of teacher
• Last name
• their phone number, or their email address
• Note: Name must be added to form and either SMS number or Email to proceed. This page is a form on all platforms and it displays as the right hand pane modal on desktop

After the referrer clicks on the submit button, we redirect them to the public room. We’ll save the reportID as a constant in the application to redirect the user to the public room (reportID value TBD but meanwhile we can use the reportID for the ECX #anounce room 3504895439653267).

• Edge case: If the user performs this action in offline mode, we’ll just display the chat report as loading. Since we’ll persist the request, we will share the room anyways once the request has been made.

Additionally, the referrer clicks on the submit button, we’ll send that data along with the accountID of the referrer (inviterID) to the new API command called ReferTeachersUniteVolunteer.

For form error messages, will surface the following:

• “Enter a name” when the name fields are blank
• “Enter a valid email address or phone number” when the email/phone field is left blank
• If someone enters a phone or email address that is not valid then we will display the existing error message(s) we currently use in newDot for email/phone number validation

Volunteer Sign-Up flow

Selecting ‘I am a teacher’ opens up a new page (form) on all applications:

• To allow the teacher to sign-in up, we'd need to verify their school email is validated. So when the user selects “I’m a teacher”, we'll check if the domain of the user’s primary login is not public (we’ll re-use this logic on the client-side). If this is the case, we will display the page “Update your email address”. The “Contact methods” link and the “Update email address” button will redirect the user to the "Contact methods" page.

• If the teacher already has their school email as their primary email, we’ll show the form view “Intro to your school principal”. Since we’ll be creating a new policyExpenseChat (workspace chat) for the teacher after the user completes the form, we’ll use pattern B (optimistic with feedback). It will be helpful for the user to know if the workspace chat was created if they took this action while offline.

  • When the user clicks on the “Let’s start” button, we will:
    1. Optimistically create the policyExpenseChat (workspace chat) for the teacher in App, akin to our current approach.
    2. We will hardcode the policyID for the TU campaign.
    3. Redirect the teacher to the optimistic policyExpenseChat.
    4. Send the optimistic ‘reportID’ and optimistic ‘reportActionID’, along with the data collected from the previous forms to the new AddSchoolPrincipal (TBD) API command.

We can check if an email has a public domain by checking if the email is contained in some of the following values:

   const publicDomains = [
        'accountant.com',
        'afis.ch',
        'aol.com',
        'artlover.com',
        'asia.com',
        'att.net',
        'bellsouth.net',
        'bills.expensify.com',
        'btinternet.com',
        'cheerful.com',
        'chromeexpensify.com',
        'comcast.net',
        'consultant.com',
        'contractor.com',
        'cox.net',
        'cpa.com',
        'cryptohistoryprice.com',
        'dr.com',
        'email.com',
        'engineer.com',
        'europe.com',
        'evernote.user',
        'execs.com',
        'expensify.cash',
        'expensify.sms',
        'gmail.com',
        'gmail.con',
        'googlemail.com',
        'hey.com',
        'hotmail.co.uk',
        'hotmail.com',
        'hotmail.fr',
        'hotmail.it',
        'icloud.com',
        'iname.com',
        'jeeviess.com',
        'live.com',
        'mac.com',
        'mail.com',
        'mail.ru',
        'mailfence.com',
        'me.com',
        'msn.com',
        'musician.org',
        'myself.com',
        'outlook.com',
        'pm.me',
        'post.com',
        'privaterelay.appleid.com',
        'proton.me',
        'protonmail.ch',
        'protonmail.com',
        'qq.com',
        'rigl.ch',
        'sasktel.net',
        'sbcglobal.net',
        'spacehotline.com',
        'tafmail.com',
        'techie.com',
        'usa.com',
        'verizon.net',
        'vomoto.com',
        'wolfandcranebar.tech',
        'workmail.com',
        'writeme.com',
        'yahoo.ca',
        'yahoo.co.in',
        'yahoo.co.uk',
        'yahoo.com',
        'yahoo.com.br',
        'ymail.com',
    ]:

For this new feature, a detailed proposed solution isn't necessary. We simply require a rough outline of your implementation strategy by describing what new components you will build, if you will re-use some existing components, and roughly what those components will do.

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0167d6cf391edcfcf4
• Upwork Job ID: 1679657270367203328
• Last Price Increase: 2023-07-14

[melvin-bot[bot]]

Triggered auto assignment to @flaviadefaria (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[melvin-bot[bot]]

Triggered auto assignment to Design team member for new feature review - @shawnborton (NewFeature)

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~0167d6cf391edcfcf4

[melvin-bot[bot]]

Current assignee @flaviadefaria is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (External)

[marcochavezf]

Given the complexity of this implementation, I believe a base payment of $2000 would be appropriate.

[melvin-bot[bot]]

Upwork job price has been updated to $2000

[dhairyasenjaliya]

Proposal

Please re-state the problem that we are trying to solve in this issue.

• [New feature] Teachers Unite sign-up flows

What is the root cause of that problem?

• New Feature request 


  What changes do you think we should make in order to solve the problem?

• Firstly we need to add a new option on FAB as Save the world and add a new route

• On the Save the world we page we should re-use the <MenuItem> component in order to display two new options to use as below mentioned

• For rendering the SVG on header we can simply use SVG as a component we can take reference from a new page called LoungeAccessPage.js

• We need to create 2 separate pages (route) and inside the <MenuItem>

  • I know a teacher ()
  • I am a teacher

Flow - 1 (Volunteer referral flow)

• I know a teacher will consist of First name of teacher , Last name ,  phone number, or their email address

• Here we need to re-use the <Form> component and follow pattern A (Optimistic Without Feedback Pattern)

• As here we don't need successData or failureData , we should only put optimisticData in the options

• We need to apply Form validation, we can simply add the below condition on validate props which basically validate all the conditions before calling the API

  • “Enter a name” when the name fields are blank
  • We can re-use this condition _.isEmpty(values.phoneOrEmail)
  • “Enter a valid email address or phone number” when the email/phone field is left blank
  • If someone enters a phone or email address that is not valid then we will display the existing error message(s) we currently use in newDot for email/phone number validation *we can re-use condition as !_.isEmpty(values.phoneOrEmail) && !((parsePhoneNumber(phoneLogin).possible && Str.isValidPhone(phoneLogin.slice(0))) || Str.isValidEmail(values.phoneOrEmail))

• After the referrer clicks on the submit button, we redirect them to the public room. We’ll save the reportID as a constant in the application to redirect the user to the public room (reportID value TBD but meanwhile we can use the reportID for the ECX #anounce room 3504895439653267) and probably pass to API and store.

• Additionally, if the referrer clicks on the submit button, we’ll send that data along with the accountID of the referrer (inviterID) to the new API command called ReferTeachersUniteVolunteer.

•  If the user performs this action in offline mode, we’ll just display the chat report as loading.

Flow -2 (Volunteer Sign-Up flow)

• I am a teacher opens up a new page (form) on all applications

• On this flow firstly we need to create a new util-helper method basically that will check and compare the current primary login that is not public in user publicDomains based on the above given list we should navigate between the below 2 case

Case 1 (if logged user’s primary mail is non-public email)

• For this case we just need to add SVG and text indicating that user needs to use the school email in order to continue
• Here we can re-use and add <FixedFooter> inside that <button> component and onPressing that user will be redirected to ContactMethod page

Case 2 (if logged user’s primary mail is public email)

• For this page Intro to your school principal here we will re-use the <Form> component (and we need to follow pattern B  Optimistic WITH Feedback Pattern)

• Here we need to add 3 <Form> fields as Principal first name, last name and work email

• We need to use validation props of <Form> to validate all three filed upon success passing all the validation user can click Form to proceed next

• We’ll be creating a new policyExpenseChat by pressing Submit button

• When the user clicks on the “Let’s start” button, we will:

  • Optimistically create the policyExpenseChat (workspace chat) for the teacher in App, akin to our current approach.
  • We will hardcode the policyID for the TU campaign.
  • Redirect the teacher to the optimistic policyExpenseChat.
  • Send the optimistic ‘reportID’ and optimistic ‘reportActionID’, along with the data collected from the previous forms to the new AddSchoolPrincipal (TBD) API command.

What alternative solutions did you explore? (Optional)

• N/A

[neonbhai]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Implement part of the Teacher's Unite sign up process.

What is the root cause of that problem?

New Feature Request.

What changes do you think we should make in order to solve the problem?

1. Firstly add a new menu item in the FAB called "Save the world" to trigger the Teachers Unite feature.

2. This view will have options to choose from Volunteer referral flow ("I know a teacher") or the Volunteer sign-up flow ("I am a teacher").

3. Implement the Volunteer referral flow

• Display a form where the referrer can enter the first name, last name, and contact information (phone number or email address) of the teacher they know.
• Perform client-side validation to ensure the required fields (name and contact information) are filled.
• We will Handle form submission by sending the referrer's data and account ID to the new API command called ReferTeachersUniteVolunteer.
• Redirect the referrer to the public room and save the report ID for future use.

4. Implement the Volunteer sign-up flow

• Display a form where teachers can sign up by providing their school email address and other required information.
• Check if the domain of the user's primary login is not public to determine if their school email is validated.
• If the school email is not validated, show the "Update your email address" page and provide options to update the email address.
• If the school email is already validated, show the "Intro to your school principal" form.
• When the user clicks the "Let's start" button, optimistically create a policyExpenseChat (workspace chat) for the teacher and redirect them to the optimistic policyExpenseChat.
• Send the optimistic report ID, report action ID, and data collected from previous forms to the new AddSchoolPrincipal API command.
• Use optimistic feedback to inform the user if the workspace chat was created successfully, especially if they performed this action while offline.

What alternative solutions did you explore? (Optional)

xx

[snwork89]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Implement Teacher Unite SIgn Up Process.

What is the root cause of that problem?

New Feature to implement

What changes do you think we should make in order to solve the problem?

• First need to add new FAB in menu called "Save The World"

• Create 3 new routers for navigation purpose Save The World,I know a teacher,I am a teacher

• Create "Save The World" Page as per the design.

  Implement Volunteer referral flow

• Create 3 form field first name,last name,email or phone number

• Add form validation as per description

• As per UX pattern follow PatternA and implement according to it when user submit the form.

• navigate to chat-report if user is online and if user is offline display loading state in chat report.

  Implement Volunteer Signup flow

• Implement "Update Your Email Address" Page

• Check if user has non public email or not based on provided public ,if yes then navigate to "Intro to your school principal" page ,else navigate to "Update Your Email Address"

• Implement "Intro to your school principal" as per design .

• Create 3 form field principal first name,principal last name,principal work email

• Add form validation as per description

• As per UX pattern follow PatternB(optimistic with feedback) and implement according to it when user submit the form.

• when user submit the form naviagate to optimistic policyExpenseChat and send optimistic reportId ,reportActionId and other form data to AddSchoolPrincipal API.

[James-Xitij]

Hi, So here is my understanding based on what you have explained.

The primary aim is to: Create a chat room where other flows are completed and we just need to add signup flow.

So the flow's understanding goes as mentioned below. -Whenever a user clicks on 'save the world' button, it will open the teacher unite modal and will display 2 action buttons; namely 'I know a teacher' and 'I am a teacher'.

• When one clicks on the 'I know a teacher' button it opens a form with first name, last name and email address where there will be a validation as described by you. By then clicking the 'let's do this' button will call API to save data and redirect user to the public room.

And in second case, if the user clicks on the 'I am a teacher' button, the system should or will first check whether the email is public. For that, we loop through defined domain and check if it is public or not. If it is, then the user will need to update their email and if it is public then it will open a form with principle first name, last name and email and we put validation on this form as well, post which we will click on 'let's start' which will create policy expense chat and redirect user to that chat and call addSchoolPrinciple API to add data.

This whole process would consume around 4 working days and will cost you $550.00/- flat for a flawless output from my end. I hope the timeline and the quote sounds workable to you. Also, if you feel I have missed out or misunderstood something, please let me know and I will be happy to correct.

With that I would await a positive response from your end in the matter.

Thanks & Regards, James

Contributor details Your Expensify account email: James.k@prismitsystems.com Upwork Profile Link: https://www.upwork.com/freelancers/jameskshitij

[melvin-bot[bot]]

📣 @James-Xitij! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[parasharrajat]

Will be reviewing this in sometime.

[marcochavezf]

Hi guys, thanks for the proposals, and sorry for not being clear in the description, but can you outline roughly what new components you will create for the general plan described in the OP? Also, if you're going to reuse existing components and describre roughly what will each component do? I will update the OP to reflect that

[dhairyasenjaliya]

updated the proposal to add existing component re-use @marcochavezf @parasharrajat

[flaviadefaria]

@parasharrajat thoughts on the proposals above?

[James-Xitij]

Hi guys, thanks for the proposals, and sorry for not being clear in the description, but can you outline roughly what new components you will create for the general plan described in the OP? Also, if you're going to reuse existing components and describre roughly what will each component do? I will update the OP to reflect that

So if your modal component is already created and it is created in a way that it accepts the passed parameters to display then I will use the same component otherwise I will create a new component to display data into that model. then for managing form and selection, I will use a step so that when the user completes the first step then display second part conditionally the same as the third step. And if you manage function calls in the hooks file then I will create a hooks file for that modal and call related functions by steps from there otherwise call functions from the same component.

[marcochavezf]

Thanks @dhairyasenjaliya, the updated proposal covers most of what we would need to implement the sign-up flows. Let's begin with it since we'd want to get it live soon. We can address any specific detail or minor changes (if required) in the PR.

[parasharrajat]

Give me 15 mins to review it @marcochavezf

[marcochavezf]

Hi guys, thanks for the proposals, and sorry for not being clear in the description, but can you outline roughly what new components you will create for the general plan described in the OP? Also, if you're going to reuse existing components and describre roughly what will each component do? I will update the OP to reflect that

So if your modal component is already created and it is created in a way that it accepts the passed parameters to display then I will use the same component otherwise I will create a new component to display data into that model. then for managing form and selection, I will use a step so that when the user completes the first step then display second part conditionally the same as the third step. And if you manage function calls in the hooks file then I will create a hooks file for that modal and call related functions by steps from there otherwise call functions from the same component.

@James-Xitij, thanks for the update here, but we usually look for proposals that demonstrate that you have knowledge about the code base by mentioning the specific parts that you'd change in the implementation. That will give us the confidence that you have a detailed plan to tackle the problem or implement the solution without much surprises.

[parasharrajat]

I looked at all the proposals and @dhairyasenjaliya's proposal seems most complete. It will be good to have someone who knows the App in detail again @dhairyasenjaliya have more experience than others so I m good with their proposal.

:ribbon: :eyes: :ribbon: C+ reviewed

[melvin-bot[bot]]

Current assignee @marcochavezf is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[marcochavezf]

Thanks @parasharrajat, assigning @dhairyasenjaliya 🚀

[melvin-bot[bot]]

📣 @parasharrajat Please request via NewDot manual requests for the Reviewer role ($2000)

[melvin-bot[bot]]

📣 @dhairyasenjaliya 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[dhairyasenjaliya]

All right thank you for the assignment I will start PR soon :)

[dhairyasenjaliya]

hey @marcochavezf @parasharrajat I have started PR currently I am adding the Routes and basic design following the current coding styling but I will be needing following

1. Mokup design to follow exact details needed (probably will tag @shawnborton )
2. Translation of all the Text in both the language eng & Spanish (currently I'm doing google translate if that's fine)
3. All the SVG and icons needed for the design
4. As we have a couple of <Form> here need to know if we want by default keyboard to be autoFocus or not

[James-Xitij]

change

Thanks for letting me know. I would try and expand. But I see that a selection has already been made on this task. But if I still need to submit a well explained approach, I will be happy to do so. Just let me know and I shall do the needful.

[parasharrajat]

Mokup design to follow exact details needed (probably will tag @shawnborton )

it present on the OP.

Translation of all the Text in both the language eng & Spanish (currently I'm doing google translate if that's fine)

yes, it's fine for now. You will have to ask this on Slack and confirm all of them. Its better to do it now.

All the SVG and icons needed for the design

cc: @shawnborton

As we have a couple of

here need to know if we want by default keyboard to be autoFocus or not

Follow other forms. (like displayName etc).

[marcochavezf]

Hi @dhairyasenjaliya, I think these are the svgs that you would need for the implementation, but if you need another icon/image let me know

[shawnborton]

I'm happy to regenerate these assets for you, just tag me in your PR. As they stand now, they aren't using the correct bounding box size, etc.

For the scale, we actually have that as an animation, so perhaps you can mirror what @roryabraham is doing for the Preferences page.

[roryabraham]

Yes for this mockup:

I'd absolutely recommend using the IllustratedHeaderPageLayout component and also set the page background color here. The Preferences page is a good example, or the WorkspaceListPage is also being done in a similar way in this PR

[dhairyasenjaliya]

Indeed I was following that exact PR for showing IllustratedHeader I have started to add those SVG's as well

[marcochavezf]

Hi @dhairyasenjaliya, just for visibility, could you provide a short update on what you're working on and what remains to be done?

[dhairyasenjaliya]

Update

• UI is almost complete with form validation (We can start reviewing the design part along with that I will start API integration @parasharrajat )
• New Route and all new screen is created on PR

Remaining

• Will start integrating the API but I have a question below

Volunteer referral flow

Question - 1

After the referrer clicks on the submit button, we redirect them to the public room. We’ll save the reportID as a constant in the application to redirect the user to the public room (reportID value TBD but meanwhile we can use the reportID for the ECX #anounce room 3504895439653267)

• @marcochavezf Do we have a similar function available on the app? so that I can refer for redirect them to the public room.

Question - 2

• Volunteer referral flow we need to add a new API named ReferTeachersUniteVolunteer Is this API ready yet? and also we have 2 parameters as accountID and inviterID I believe these are the required parameters but do we have any other parameters to pass like optional

Volunteer Sign-Up flow

Question - 3

we'll check if the domain of the user’s primary login is not public (we’ll re-use this [logic] on the client-side)

• Seems I can't access the given link can I get a reference for that function to start adding

Question - 4

We will hardcode the policyID for the TU campaign.

• Is the policyID for the TU campaign decided yet and if yes what will be the ID?

Question - 5

• Volunteer Sign-Up flow we need to add a new API named AddSchoolPrincipal Is this API ready yet? and also we have 2 parameters as reportID and reportActionID I believe these are the required parameters but do we have any other parameters to pass like optional (Principal firstName, lastName, email)

CC @marcochavezf @parasharrajat

[parasharrajat]

Do we have a similar function available on the app? so that I can refer for redirect them to the public room.

You will just have to use Navigation.navigate. Save the ID in a CONST.

Question - 2

Create an action with API call to this API. You can pass any parameters you want to for now. We can update this later. It might be done in separate PR. It will be https://github.com/Expensify/App/blob/main/contributingGuides/OFFLINE_UX.md#a---optimistic-without-feedback-pattern without optimistic data I guess.

Seems I can't access the given link can I get a reference for that function to start adding

There should be a function already for this. I think you can use ONYXKEYS.USER isFromPublicDomain value.

We will hardcode the policyID for the TU campaign.

For testing, you can use any of your workspaces. Create a CONST for this.

Question - 5

You have to send all the collected data plus the optimistic created reportID and reportActionID.

[marcochavezf]

Thanks for the update @dhairyasenjaliya! We're still working on the API commands, so we can update that later. Just to complement a little bit more @parasharrajat's responses (thanks btw!):

• For the ReferTeachersUniteVolunteer command we'll just need to send the teacher's data: email, firstName and lastName.

• For the AddSchoolPrincipal command, we'll also send the email, firstName and lastName of the principal and the policyExpenseChatReportID and policyExpenseCreatedReportActionID of the workspace chat (policyExpenseChat). The policyID is not ready yet, but I will get back to you once we have it, meanwhile you can create a workspace and use its policyID.

• WRT the logic to check the public domain, it links to a private repository but is just comparing the email with the array of publicDomains posted in the OP.

[marcochavezf]

Hi @dhairyasenjaliya, can you provide an update?

[dhairyasenjaliya]

hey @marcochavezf Im just adding changes as per the above comments, mostly will add these changes by today

[parasharrajat]

@dhairyasenjaliya Can you share the link to draft PR?

[dhairyasenjaliya]

@parasharrajat here https://github.com/Expensify/App/pull/23063

[dhairyasenjaliya]

hey @marcochavezf I have added changes as per the above comments and also addressed the changes reviewed by @parasharrajat also you can re-review the PR I have added another changes after that

[parasharrajat]

@dhairyasenjaliya If you think your PR is ready, mark it ready for review.

[dhairyasenjaliya]

@parasharrajat I think we can start review without API for now

[parasharrajat]

@dhairyasenjaliya Can you increase the frequency of updates on this PR? It's progressing very slowly.

[dhairyasenjaliya]

sure will increase

[StefStavri]

Hey guys what is the latest here? I'd like to report back to the internal team.

[parasharrajat]

PR waiting inputs on @marcochavezf

[marcochavezf]

I will check the other pending comments today

[marcochavezf]

@dhairyasenjaliya could you post an update of what has been done so far and what's missing, please?