Status-react: Fix installation buttons for sticker packs

[asemiankevich]

Problem

There is a Status icon shown for a stickerpack which was bought with SNT. It is not shown for free stickerpack.

Align the icons with statuses using figma:

Steps

1. recover husband rough hotel obey annual you member reopen struggle air evoke taxi
2. join public chat -> tap Stickers icon

Build

nightly 6 Sep 2019, device - Samsung S10 Android 9

[errorists]

The icon should only be present when it's joined by a SNT value. It's a shorthand for SNT :) If there's no value like here, please please remove the icon. 🙏

[errorists]

let's assume that 🔵 is the troublesome icon in question
🔵 1000
Install
Free

Designs are available here Figma

[andmironov]

Hey, some context for this: you might have purchased a sticker pack on another device, so you don't have to pay for it anymore, but it is not installed. So the question is: should there be a "Purchased but not installed" state? The screenshot above is a result of purchasing a sticker pack and then recovering that account on another device

[errorists]

Thanks! The answer would be the same, no icon. It should say something like 'Recover', like when you recover a previously made in-app purchase made on iOS for example.
edit: what I had previously for this state is exactly what's shown above 'Install'. We might consider using a different label if that's not obvious enough but the icon itself is linked to the price of the pack only.

cc @rachelhamlin

[errorists]

oh and by the way, to whomever will pick this up: those arrows next to 'Install' label in Figma are made with regular text, it's an unicode character available in our font like so ↓, no assets are needed

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__This issue now has a funding of 0.497 ETH (89.92 USD @ $180.92/ETH) attached to it.__

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
  
  
  
  • Want to chip in? Add your own contribution here.
  
  
  • Questions? Checkout Gitcoin Help or the Gitcoin Slack
  
  
  • $154,229.82 more funded OSS Work available on the Gitcoin Issue Explorer
  
  

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work has been started__.

These users each claimed they can complete the work by 1 day, 13 hours from now.
Please review their action plans below:

1) igetgames has been approved to start work.

Looks like I'll be slightly modifying the logic in the price-badge view in src/status_im/ui/screens/stickers/views.cljs. I have some minor feedback on the badge state which I'll post in the GitHub issue.
2) ariesjia has applied to start work _(Funders only: approve worker | reject worker)_.

1. check the button display logic
2. fix it

Learn more on the Gitcoin Issue Details page.

[marcusrbrown]

Looking at the designs above, would it make more sense for the Free icon to display (SNT 0) ? The text _Free_ would then appear beneath the badge where the currency is displayed.

That removes an extra badge design and has clearer messaging for (Install) to download purchased packs.

[errorists]

@rachelhamlin do we want to include the Free button for any sticker packs that cost 0 SNT? I can't recall on what configuration of text labels we settled on finally regarding sticker packs.
Personally I'm not a fan of carrying a 0 SNT button, feels weird somehow to show a null price, Free is imo better and we don't add the gas cost to any of other price tags either way.

[rachelhamlin]

Agreed @errorists. If we look at Apple's app store as an example, free apps are simply labeled Get. Appreciate the consideration though @igetgames! I'm approving you to work on the issue.

[errorists]

cool, it's settled then
Packs with a price <snt icon> 1000
Packs that are free ↓ Free
Packs that were previously paid for and ready to install ↓ Install

@igetgames please be aware that the margin surrounding the SNT icon in the button is too large, the icon was exported with extra padding already there. If you'll be doing any work with that, I'd ask you kindly to remove the margin.

[marcusrbrown]

No worries. Thanks for the approval, I'll get started!

[marcusrbrown]

For the "Free" button text, am I ok adding it to just en.json or is there a procedure for adding new text?

[flexsurfer]

yes it's ok to just add it to en.json

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__Work for 0.497 ETH (89.89 USD @ $180.87/ETH) has been submitted by__:

1. @igetgames

@StatusSceptre please take a look at the submitted work:

• PR by @igetgames

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $150,297.06 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

__The funding of 0.497 ETH (89.49 USD @ $180.05/ETH) attached to this issue has been approved & issued to @igetgames.__

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $155,627.69 more funded OSS Work available on the Gitcoin Issue Explorer