Election cost Calculator & Payment Gateways

[jpaulet]

User Story:

As Vocdoni we want our potential clients, specially the integrator's to be able to estimate the election costs in tokens and in fiat. For that reason we need to create a new component to let, in a easy and quick way estimate the price of the election and purchase the needed tokens either with fiat or crypto.

To do so, we will introduce a new "calculator" component where the user can select the following parameters to estimate the election cost:

• Census: Nº of voters (1-100M). Default to 100.
• Duration: Nº of days (1-1000). Default to 1.
• Elections: Nº of elections (1-10000). Default to 1.
• Parameters: Encrypted, Anonymous, Vote-overwrite. Default to "false".

Once the user has introduced the values and click the "Estimate cost", it will trigger the calculation and show the needed tokens, the price per token and the price in fiat, and offer 2 ways of purchasing the tokens: fiat (stripe) and crypto (loop).

The results component will have 3 different tabs:

• One-time payment: Shows the cost in tokens, fiat and payment gateways.
• Packages: Shows the list of the different token packages options, with its discount and final price. Also offers 2 payment gateways to purchase the tokens. The discount table is as follow:

Packs (Nº Tokens) | Discount (%) | TOTAL (€)
1000 | 1% | 149€
5000 | 7% | 697€
10.000 | 15% | 1275€
50.000 | 21% | 5925€
+100.000 | 30% | 10.500€

• Recurring: A text explaining that we offer service agreements if they need recurring elections and a "Contact us" button.

If the user wants to purchase any token (one-time or package) they need to be logged and with a valid organization. If the user is not logged, first we need to log-in. Once if logged, if the user has no org, a popup for create the org should appear. Once is logged and with a valid org, we can proceed with the purchase of the tokens, sending the needed info (e.g: orgName and wallet Address) to the payment platform:

• Stripe: Set up a payment gateway with Stripe, once the user does a valid payment, the faucet must send the nº of purchased tokens to the provided address. Also, a "Success payment" popup should be visible in the UI.
• Loop crypto: Set up the integration with Loop to be able to pay with crypto. Same as Stripe, once a valid payment is made, the tokens must be send to the specified address and a "Success Payment" popup should appear.

Acceptance Criteria:

Frontend:

• Create a new (reusable) calculator component with the census, duration, election inputs, the parameters checkboxes and the "Calculate" button. Limit the inputs to the max values specified and set the default specified value.
• Relate the "Calculate" button with the trigger of the estimation. Show the information to the user and the proper calculations (X tokens x price_per_token = Y$). For now, the price_per_token is 0.15. Also, the discounts from the "Package" tab should apply, i.e if a voting process costs 10K tokens, a 15% discount should apply.
• Add the tabs and add the content for the "Package" and "Recurring" tabs.
• Create the payment buttons and relate to the Stripe/Loop account
• Apply all the styles and visuals as presented in the following design
• Add the flow to check if the user is logged
• Add the flow to check if the logged user has a valid organization
• Create the popup to easily create a organization [Design pending]
• Create the popup of a valid/invalid payment transaction [Design pending]
• Place the new "calculator" component into the "Faucet page" and adapt the texts as the design.

Backend:

• Create the backend that will send tokens to the users when a valid payment is made.
• Create the Stripe integration
• Deploy the new backend
• Test the integration with the fronted

Ops:

• Create the new Stripe account, set the package, token price, test accounts, etc.

Ref:

• Stripe: https://stripe.com

Designs:

[emmdim]

Useful links for Strip integration:
https://docs.stripe.com/payments/checkout/how-checkout-works
https://docs.stripe.com/checkout/embedded/quickstart

[emmdim]

Stripe faucet PR:
vocdoni/vocfaucet#14

[emmdim]

Stripe scaffold PR: vocdoni/ui-scaffold#702

[emmdim]

Stripce scaffold PR moved to calculator PR:
vocdoni/ui-scaffold#673