[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]

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]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-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]

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]

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

It looks like we're good to issue payment here? I'll switch this to daily as it was kept as weekly.

[flaviadefaria]

when @dhairyasenjaliya got assigned: 2023-07-17 16:54:50 Z
when the PR got merged: 2023-08-30 00:41:30 UTC
days elapsed: 31

Payment Summary:
@dhairyasenjaliya = $2000 -50% penalty = $1000
@parasharrajat = $2000 -50% penalty = $1000

@dhairyasenjaliya I'll send you an offer in UW.
@parasharrajat please make your manual request.

[flaviadefaria]

@dhairyasenjaliya offer sent!

[dhairyasenjaliya]

 Hey, I had a request for this to be re-evaluated for compensation because it was quite time-consuming and involved a lot of changes also I believe a penalty should not be applied here since this was a new feature request we were just waiting for API. Let me know your thoughts @flaviadefaria @parasharrajat @marcochavezf @youssef-lr

[flaviadefaria]

@marcochavezf @youssef-lr what are your thoughts here?

[melvin-bot]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[flaviadefaria]

@puneetlath I'm going OoO for a week so assigning this to you so that you can move it forward in the meantime. The only thing that is left is issuing payment. I sent a contract following this but @dhairyasenjaliya requested above that the penalty not be applied. I'm waiting on @marcochavezf and @youssef-lr to chime in. Once they do you can issue payment. Thanks!

[marcochavezf]

Yeah I agree with @dhairyasenjaliya, this is a new feature for TU (wave7), and more changes were requested to fix edge cases discovered during the testing. So I think the penalty shouldn't be applied here. cc @flaviadefaria @puneetlath

[puneetlath]

Ok, so does this payment summary seem accurate then?

• @dhairyasenjaliya - $2000 (to be paid in Upwork)
• @parasharrajat - $2000 (to be paid in NewDot)

[puneetlath]

Ok @dhairyasenjaliya has been paid. @parasharrajat please go ahead and request payment on NewDot.

[dhairyasenjaliya]

Thnx for reminding 😅 and also can you close duplicate contract @puneetlath

[puneetlath]

I'm only seeing this contract: https://www.upwork.com/nx/wm/workroom/34233569/details. Mind linking the dupe?

[dhairyasenjaliya]

actually, I have not accepted that new contract so just rejected it from my side all good now @puneetlath

[puneetlath]

Ok great, just waiting for confirmation from @parasharrajat that he's opened a NewDot request and then I'll close this out.

[parasharrajat]

Not yet. Free free to close it. I can track it.

[puneetlath]

Cool, thanks everyone!

[parasharrajat]

Payment requested as per #22857 (comment)

[JmillsExpensify]

$2,000 payment approved for @parasharrajat based on this summary.