USER REDESIGN: redesign the Donations screen for the talawa user portal

[aashimawadhwa]

Is your feature request related to a problem? Please describe.
we are planning redesigning the user portal, this issue is a part of that redesigning.

Describe the solution you'd like
we want to redesign the Donations screen for the user portal and follow a theme similar to the talawa admin portal.

Screenshots

• Attaching the screenshots for reference.
  current situation :
  
  Desired Result:
  

  Please refer the figma file for a detailed understanding :
  https://www.figma.com/file/WksD4uIa5sQJMIk3pR4l0c/Talawa-Design-System-(Official)?type=design&node-id=3447%3A59&mode=design&t=fkgMPaaz67qLwmMz-1

Related issue : #1510 (sidenavbar is covered in this issue)

Potential internship candidates
Please read this if you are planning to apply for a Palisadoes Foundation internship PalisadoesFoundation/talawa#359

[Abhinob-Bora]

please assign me this work to me

[takshakmudgal]

I'd like to work on this issue.

[aashimawadhwa]

@Abhinob-Bora assigned 👍🏼

[Abhinob-Bora]

@Abhinob-Bora assigned 👍🏼

Thank you

[Abhinob-Bora]

@aashimawadhwa can you please clearify whether i have to work on figma or redesign in frontend ?Figma designing is already done right! which you have shown as desired results !!OR do I have to make changes in it ? Im really getting confused,can you please clearify the task again...

[Alokih]

@Abhinob-Bora Bro Read the issue properly, you are assigned for redesigning the Donations Page similar to given design in Figma

[Abhinob-Bora]

@Abhinob-Bora Bro Read the issue properly, you are assigned for redesigning the Donations Page similar to given design in Figma

Thanks for your confirmation, I'm already working on it

[Abhinob-Bora]

@aashimawadhwa @palisadoes can somebody please review my design that I've attached below-
https://www.figma.com/file/ruXRbsoPsh4yvvzJ5ScBz4/Untitled?type=design&node-id=0%3A1&mode=design&t=DbbuujAuHyvjApIU-1

Work Flows-
=>There are two search bar.In the top one you can search donors and will be able to see donations done by him/her to different organizations in a hovered form.
=>The second one is for the searching organizations by name and you will be able to make donations to that organisation on the donation bar.
=>The list of previous donations are sorted by time of donations.Earliest donation appears on the top.It should have a global and search by organization option also once you searched the organisation it should show the donations made to that organization according to sorted time.A global donation option should appear there once you have made search a organization.By clicking it to global you will be again able to see all the donations to different organisations.

[palisadoes]

1. This is for the user portal.
2. Users only have privileges to see their own data.
3. As this is an organization specific screen, they should only see data related to this particular organization.

The original design took these factors into consideration

[Abhinob-Bora]

1. This is for the user portal.
2. Users only have privileges to see their own data.
3. As this is an organization specific screen, they should only see data related to this particular organization.

The original design took these factors into consideration

ok got it.Let me do the modifications accordingly

[Abhinob-Bora]

@palisadoes can you please review the design now and give some feedbacks.Here is the link attached-
https://www.figma.com/file/ruXRbsoPsh4yvvzJ5ScBz4/Untitled?type=design&node-id=0-1&mode=design&t=nOzugNtm2vvY2xRA-0

[palisadoes]

1. This is for a user. They don't need to see the organization wide statistics. Please remove.
2. It's "Donate to", not "Donate for"
3. Work with @aashimawadhwa and @rishav-jha-mech for future design inputs and your PR

[Abhinob-Bora]

1. This is for a user. They don't need to see the organization wide statistics. Please remove.
2. It's "Donate to", not "Donate for"
3. Work with @aashimawadhwa and @rishav-jha-mech for future design inputs and your PR

ok I will work with them.I have made the required modifications .

[Abhinob-Bora]

@aashimawadhwa @rishav-jha-mech Please review my design for the donation screen for raising the PR.Here the link attached-
https://www.figma.com/file/ruXRbsoPsh4yvvzJ5ScBz4/Untitled?type=design&node-id=0-1&mode=design&t=nOzugNtm2vvY2xRA-0

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[Cioppolo14]

@Abhinob-Bora Are you still working on this?

[Abhinob-Bora]

@Cioppolo14 Yes I have done it.Will raise a PR today

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[Cioppolo14]

Unassigning due to no activity or open PR.

[AmitSharma512]

@Cioppolo14 can I work on this?

[pranshugupta54]

Hi @AmitSharma512, it appears you haven't been active for 5 days. Are you still tackling this issue, or can I take over if you're encountering any difficulties?

[AmitSharma512]

@pranshugupta54 bro, who said I am not active? I am working on the issue and will soon make the PR.

[AmitSharma512]

@palisadoes @Cioppolo14 The donation screen can only be opened when the user joins an organization and clicks on the donation tab. But, we cannot enter any organization because the requests section is removed from the portal.

[palisadoes]

1. We expect that to be fixed in this issue:
   1. ADMIN REDESIGN: redesign the User Request for the talawa admin portal  #1631
2. Try to work with existing users in the sample database that are already organization members. That should work for now. Let us know.

[AmitSharma512]

1. We expect that to be fixed in this issue:

   1. ADMIN REDESIGN: redesign the User Request for the talawa admin portal  #1631

2. Try to work with existing users in the sample database that are already organization members. That should work for now. Let us know.

I have made the donation box according to the design, but how can I get the previous donations because the donate button is not functional?

[palisadoes]

Donation capabilities should already be available in the API. See this PR for reference.

• [GSoC]Feature Request : Performing Donations ( Ability to store donation transaction in Talwa-api )  talawa-api#756

[github-actions]

This issue did not get any activity in the past 10 days and will be closed in 180 days if no update occurs. Please check if the develop branch has fixed it and report again or close the issue.

[palisadoes]

Unassigning, not activity or PR

[GlenDsza]

Would like to work on this task

[GlenDsza]

Above is from desired result shared design

@aashimawadhwa @rishav-jha-mech few doubts I had in previous donations section in Donation Screen

1. This is for the user portal.
2. Users only have privileges to see their own data.
3. As this is an organization specific screen, they should only see data related to this particular organization.

The original design took these factors into consideration

As per this comment by @palisadoes - User should only able to view his/her past donations to a particular organization.
So,

• If we are going to go with Card Design, What image should be there in Card? As per desired result, If we've to keep user profile image it is going to be repetitive/redundant for all cards as user is only able to see his donations made to particular organization.

• Similarly in card design Name of Donor would be repetitive/redundant in UI.

• Displaying Name of Donor, Profile Image, maybe would be beneficial if we plan to allow User to enter whatever name, etc. info he/she wants (maybe on behalf of other person) per Donation? in this case Name of Donor , etc. could be unique per Donation.

• So information we could show per transaction is date, amount, payPalID maybe or am I missing something. Plz suggest if there is anything more to add.
  currently donation object looks like follows:
  

• Currently for Donation functionality I have kept payPalId of user as random string. Or should there be some popup or modal to intake payPalId?

• imo if there is only above info to be shown, Table Format would be preferable like below design
  

[GlenDsza]

Unassigning, would like to work on issues introduced due to userTypeFix affecting accessibility of UserPortal and thereby Donation Screen would resume redesigning later

[palisadoes]

We are tracking this issue with one of our projects, and we'd like to track its progress especially as the GSoC announcement dates draw near.

1. When you create your PR, please link it back to this project:
   1. https://github.com/orgs/PalisadoesFoundation/projects/27/views/1
2. The process is simple. It can be found here:
   1. https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#manually-linking-a-pull-request-to-an-issue-using-the-pull-request-sidebar

[git-init-priyanshu]

I would like to work on this issue. Thanks.