Report an Issue Interface

[wdprice]

Implement a modal (or equivalent) to appear when the user clicks on the "Report an Issue" button on the MyTeams page. Same Modal should be used when a user clicks the "Report an Issue" in the actions menu on a particular resource.

Model should include a Subject Line(non-editable) and Body labeled as "Describe your issue" (editable).

Subject Line (Team level): Issue Report - TEAM NAME Subject Line (resourceBooking level): Issue Report - TEAM NAME - RESOURCE HANDLE

Body should be a text area.

On submission of the form, send an email to customersuccess@topcoder.com with the Subject Line defined above and the body as defined by the user. Append a link to the corresponding team detail page at the end of the email body.

[wdprice]

Our goal will be to integrate w/ SFDC to create an escalation record in place of sending an email to customer success. More details to come as we solution w/ the SFDC team.

Email will be fallback plan.

[maxceem]

Sum up:

• User can send a report for the whole team by clicking "Report Issue" on the team list page (screenshot) or on the Team Detail page (screenshot)

• Or we can send a report for a particular resource (screenshot)

• At the moment we just directly open the email client so user can send the email. Instead of this, we would like to implement UI for sending reports and connect it to the API. Remove the current logic which is not used anymore including email configs.

• When we click the "Report Issue" button in any of these places, we have to show the popup https://marvelapp.com/prototype/921gg0f/screen/75360462/handoff

  • If we report team, then title should be: Issue Report - <TEAM NAME>. If we report resource, then the title should be Issue Report - <TEAM NAME> - <RESOURCE HANDLE>

• User should be able to enter any text inside the report and click "Submit" (disabled if no text).

• When the user clicks "Submit" we should disable buttons, show the loading indicator like during member deleting (see video) and send a request to the API endpoint:

  • if the request was successful, then close popup and show green toastr with "Report submitted successfully"
  • if the request failed, then show red toast with error from the server, hide the loading indicator, enable buttons and show teaxtarea keeping all the text of the user, so user can try to submit report again.

• Use API endpoint POST /taas-teams/email:

  • body for team report:

    {
      template: "team-issue-report"
      data: {
        projectName: <TEAM NAME>,
        projected: <TEAM ID>,
        reportText: <REPORT TEXT FROM THE TEXTARE>   
      }
    }

  • body for resource/member report:

    {
      template: "member-issue-report"
      data: {
        projectName: <TEAM NAME>,
        projected: <TEAM ID>,
        reportText: <REPORT TEXT FROM THE TEXTARE>,
        userHandle: <HANDLE OF THE REPORTED USER>,
      }
    }

• ❗ Note, that we would like to show this report popup on 2 pages: Team List and Team Details. We would like to be able to open this popup by a single method, like

  import { showReportPopup } from 'components/ReportPopup'
  
  // somewhere in the code
  onClick={() => showReportPopup(<TEAM NAME>, <TEAM ID>, <HANDLE>)}

  • this is so we don't have to repeat the whole code of the popup on each page again and again.

• Reuse BaseModal - you may update it if needed. But the correct code which uses BaseModal should still work good.

[sandhiyakavi]

@maxceem The email send to customersuccess@topcoder-dev.com doesn't have body section sent

Other than that ,everything is working fine

Getting success message for Report send from Team listings, Team details page and Report send for particular resource.

https://user-images.githubusercontent.com/55895538/108812205-0f0d5700-75f2-11eb-8042-e751145daba5.mp4

Getting error message in case of failure.

[maxceem]

@sandhiyakavi this is ready for QA now.

We've fixed the email body so now it's shown:

I’ve tried to improve formatting, but it appears hard to do without changing the email template. So I guess we have to release with such formatting for now and we would have to improve the email template after.

[sandhiyakavi]

Verified on Dev Env. It is working as expected.

[sandhiyakavi]

Verified in Prod Env.

https://user-images.githubusercontent.com/55895538/109296482-b3520080-7873-11eb-9446-e469509cdead.mp4

Failure message.

Separate issue logged for Email template https://github.com/topcoder-platform/taas-app/issues/121