Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Monetisation] 1.a AAU, I can see a button “upgrade to plus” on sidebar when I am not paying for Quivr plus #1430

Closed
mamadoudicko opened this issue Oct 18, 2023 · 0 comments
Closed

[Monetisation] 1.a AAU, I can see a button “upgrade to plus” on sidebar when I am not paying for Quivr plus #1430

mamadoudicko opened this issue Oct 18, 2023 · 0 comments
Assignees
@matthieujacq
Labels
area: frontend Related to frontend functionality or under the /frontend directory

Comments

@mamadoudicko
Copy link
Contributor

mamadoudicko commented Oct 18, 2023 •
edited
Loading

EPIC: #1429

Functional:

  1. Non-subscribed users will see an "Upgrade to Plus" button in the sidebar (design below)
  2. Clicking on this button will trigger a modal that displays Quivr's pricing table using a Stripe link embed (design below).
  • The modal is positioned at the center of the screen (not the chat page)
  • User can click on the cross or anywhere around the popup to close it.

Tech:

  • To know if user is paying, use type UserStats
  • How to detect if user is not paying ?
  • Embed data:
<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<stripe-pricing-table pricing-table-id="prctbl_1O2xpHJglvQxkJ1HboraWtTU"
publishable-key="pk_test_51NtDTIJglvQxkJ1HgOBKicXBZ9Ug9pIhOZz3Lkask6q5JPZRoRW49nmwW6Q7wjWHJgc89HbruUP7GJ0d5DlQYOQ200MkvXpFnV">
</stripe-pricing-table>
  • For rendering, use
import { useStripe, useElements, CardElement } from '@stripe/react-stripe-js';

Designs:

  • Upgrade Button:
    Upgrade Button

  • Embed Modal:
    Embed Modal
@dosubot dosubot bot added the area: frontend Related to frontend functionality or under the /frontend directory label Oct 18, 2023
@mamadoudicko mamadoudicko changed the title [Monetisation] AAUser, I can see a button “upgrade to plus” when I am not paying for Quivr plus [Monetisation] 1.a AAUser, I can see a button “upgrade to plus” when I am not paying for Quivr plus Oct 18, 2023
@mamadoudicko mamadoudicko changed the title [Monetisation] 1.a AAUser, I can see a button “upgrade to plus” when I am not paying for Quivr plus [Monetisation] 1.a AAUser, I can see a button “upgrade to plus” on sidebar when I am not paying for Quivr plus Oct 18, 2023
@mamadoudicko mamadoudicko mentioned this issue Oct 18, 2023
Closed
@mamadoudicko mamadoudicko changed the title [Monetisation] 1.a AAUser, I can see a button “upgrade to plus” on sidebar when I am not paying for Quivr plus [Monetisation] 1.a AAU, I can see a button “upgrade to plus” on sidebar when I am not paying for Quivr plus Oct 19, 2023
@matthieujacq matthieujacq mentioned this issue Oct 24, 2023
Merged
mamadoudicko pushed a commit that referenced this issue Oct 24, 2023
@matthieujacq
feat: upgrade to plus button (#1482)
56d1f94 
# Description

Epic: #1429 
User Story: #1430 

## Pour la mise en preview / prod:

- Mettre à jour l'environnement

```env
NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=<change-me>
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=<change-me>
```

- Activer le feature flag `monetization` (booléen)

## Screenshots (if appropriate):

Button:
<img width="289" alt="image"
src="https://github.com/StanGirard/quivr/assets/67386567/c0f7321e-2f48-4462-aab9-fd1c6f4282cd">

Modal:
<img width="843" alt="image"
src="https://github.com/StanGirard/quivr/assets/67386567/28082680-1126-44db-bf77-76ae7474747f">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@matthieujacq matthieujacq

Labels
area: frontend Related to frontend functionality or under the /frontend directory
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mamadoudicko @matthieujacq