Features from P Community Upgrade

kulla commented 4 years ago

The following features should be implemented from the project "Community Upgrade".

General information

Users of Serlo can be active authors / active reviewers / active donors. Whether they are included in these communities can be requested from the API. Thus the type User has the following additional properties:

type User {
  activeAuthor: Boolean!
  activeDonor: Boolean!
  activeReviewer: Boolean!
}

The features shall only be available in the German version.

Badges next to links ✅

Next to a link to a user profile there shall be badges displayed for each type of community the user belongs to:

2020-08-17-183019_834x31_scrot

The badges are:

The order of badges is:

Badge for active reviewer
Badge for active author
Badge for active donor

User profiles (path `/user/profile/...`)

On the top of the user profile there is a banner showing the types of the communities the user belongs to:

2020-08-17-183906_1076x659_scrot

Bird image

The first image in the following list is used:

Example: When a user is active author and active donor, then the picture for active author is shown.

Explanation of communities

All communities the user belongs to, are explained. Here the badge is shown, together with an explanation text. The explanation texts are defined in https://github.com/serlo/serlo.org/blob/a54b908690c06718749f44707b58d5c04f22c7b8/packages/public/client/src/feature-prototypes/donation-profiles.ts#L32-L61 -> see the properties otherUserProfileMessage (%username% needs to be replaced with the username of the user the profile belongs to).

Next to the explanation a call to action is shown, when the current user is not logged in or does not belong to the given community.

Own user profile (`/user/me`)

On top of the own profile also the banner is shown as described in the previous section. However the explanatory texts are different (see properties ownProfileMessage in https://github.com/serlo/serlo.org/blob/a54b908690c06718749f44707b58d5c04f22c7b8/packages/public/client/src/feature-prototypes/donation-profiles.ts#L32-L61 ) -> %no% need to be exchanged with the current number in the respective community. The call to action is not shown

Donation form

If the user is not an active donor a form is displayed to him. The short version is:

2020-08-17-185427_711x445_scrot

The long version is (click on "mehr anzeigen"):

2020-08-17-185516_725x798_scrot

The last sentence "Kannst du dir vorstellen, unsere Arbeit als Spenderin bzw. Spender zu fördern und Teil der Community zu werden? Dann nutze bitte das Formular rechts." is replaced with "Du bist schon Teil dieser Community. Kannst du dir dennoch vorstellen, auch einen kleinen finanziellen Beitrag zu leisten? Dann nutze bitte das Formular rechts." when the user is an active author or active reviewer.

The form url (iframe) is https://spenden.twingle.de/serlo-education-e-v/spendenprofil/tw5e8dbb1390e8b/page?tw_cid=${encodedCampaignId} whereby

const encodedCampaignId = encodeURIComponent(`Spendenprofil { userId: ${userId}, userName: ${userName} }`)

You can see the current HTML at https://github.com/serlo/serlo.org/blob/a54b908690c06718749f44707b58d5c04f22c7b8/packages/public/client/src/feature-prototypes/donation-profiles.ts#L149-L173

The height of the iframe can be dynamically changed with the code https://github.com/serlo/serlo.org/blob/a54b908690c06718749f44707b58d5c04f22c7b8/packages/public/client/src/feature-prototypes/donation-profiles.ts#L125-L136

Entkenntnis commented 4 years ago

Thank you @kulla for writing this up!

Entkenntnis commented 4 years ago

The next step would be to extract the relevant features (e.g. blockers) for the current milestone.

elbotho commented 4 years ago

So the parts are:

[x] Badges next to username-links (done in #572)
[x] public user profiles (done in #573)
[x] own user profile (done in #573)

elbotho commented 4 years ago

Next to the explanation a call to action is shown, when the current user is not logged in or does not belong to the given community.

Information currently not supported, frontend auth only provides username. I guess it's okay to always display the CTA until we need to expand the auth info for some other feature anyway. Okay @kulla ?

Also, we provide the user id to the donation form atm.

const encodedCampaignId = encodeURIComponent(
    `Spendenprofil { userId: 0, userName: ${username} }`
  )

How important is this (since usernames are unique i guess)? (again currently this information is not available)

kulla commented 4 years ago

Next to the explanation a call to action is shown, when the current user is not logged in or does not belong to the given community.

Information currently not supported, frontend auth only provides username. I guess it's okay to always display the CTA until we need to expand the auth info for some other feature anyway. Okay @kulla ?

Also, we provide the user id to the donation form atm.
const encodedCampaignId = encodeURIComponent(
    `Spendenprofil { userId: 0, userName: ${username} }`
  )
How important is this (since usernames are unique i guess)? (again currently this information is not available)

This is okay to have it this way. Can you create a follow up issue with the missing stuff.

How can I have a look at a profile. https://frontend-git-community-features-for-profiles.serlo.vercel.app/user/profile/kulla does not seem to work...

elbotho commented 4 years ago

e.g. /user/profile/18981 works. I focused on the frontend, not sure if we implement routing (usernames, /me …) in the frontend or in the SW. Let's discuss this tonight maybe.

elbotho commented 4 years ago

Okay, I found a simple way to get the user id and use it for the donation form.

Entkenntnis commented 3 years ago

Implemented in staging

serlo / frontend