UI elements to introduce crowdfunding campaigns

[blackforestboi]

Soon we will launch our feature-based crowdfunding, where people can back upcoming features and in return get Memex Credits. Those can be used to pay for premium upgrades, like backups, more sharing capabilties, API requests etc.

Since it can be overwhelming to have a huge list of available upgrades (which will still be there), we introduce those campaigns in context with the features people use. For example we implement a little sharing button to annotations cards, so people who want to share annotations get a popup to make them aware of the crowdfunding campaign for sharing annotations.

Here a list of all upgrades that are needed:

1) Sharing of annotations:

• Adding a "sharing" and a "reply" button to each annotation card (left screen), and make it being replaced by the the annotation card in the middle screen.
• Content of popup: Headline, body text, button with link
• Replace the content of the current annotation card with the middle screen, and on "close notification", go back to the previous state.
• Tracking @mukeshkharita: click on each button (reply, share), click on "learn more" in popup

2) Sharing of collections:

• Adding a "sharing" button to each bar in the collections, let a popup appear once they click on it (right & bottom screen).
• Content of popup: Headline, body text, button
• Tracking @mukeshkharita: click on share button, click on "learn more" in popup

general notes:

• Content, and links MUST be individually editable to each interaction notification, so we can experiment and change the text according to the feature.
• SVG of "reply" button: reply.svg.zip

[mukeshkharita]

@oliversauter Sure, I'll add tracking once the UI got implemented. BTW If due to these things the crowdfunding is not able to release then we can implement very easily. :slightly_smiling_face:

[blackforestboi]

related to your comment in https://github.com/WorldBrain/Memex/pull/541#issuecomment-416374347 Help me with the popup (Is it same as this & How to call it ) [optional] Icon for reply button hover event . Just a UX upgrade

Indeed it makes sense here to think about a common component for these full screen interlays. Seems to be a good module to also introduce new features, just with different UI types. Like smaller popups explaining certain features.

Both the onboarding screen, and the popups for the premium support need to be a component. You can see there is a notifications folder. Maybe a subcategory there would be good. For this @mukeshkharita is also the right one to ask, as he built that folder. Maybe some refactoring necessary?

[poltak]

it makes sense here to think about a common component for these full screen interlays. Seems to be a good module to also introduce new features, just with different UI types. Like smaller popups explaining certain features.

We have the <Overlay> component which is built with React portals. I would recommend building on top of that for any new needed modal-like UI elements to avoid re-inventing the wheel. We also have the <Modal> component, which uses <Overlay>, but it's not very featureful (although feel free to extend it).

[pranshuchittora]

Building a common component for popups could makes sense , On the other hand , I tried to create share button modal in Annotations. Just a glimpse of it .

[blackforestboi]

On the other hand , I tried to create share button modal in Annotations. Just a glimpse of it .

Is there the old comment behind? or why does it look like the upper part is 2 layers?

What is important UX wise is that you replace the content of the original card (or hide the card itself temporarily) the reason is that when this popup comes that it appears at the exact same spot, and when closing, the old card comes back at the same place too. Doing this notification inside the card itself seems like a good solution to this. new requirement: clicking outside anywhere makes the notification go away too.