Setup Pricing page

Show the pricing of the products of your choices to the user.

App/Pages/ Pricing.tsx - Pricing page component

import { useProducts, PaymentModal } from "@billing-js/react-billing-js"
import { useHistory } from "react-router-dom"

export default () => {
    const history = useHistory() // optional, if you are using react-router

    // Billing.js useProducts hook
    const {
        // loading state
        loading, 
        
        // list of the products fetched
        products: [premiumPlan], 
        
        // list of active subscriptions of the user
        activeSubscriptions, 
        
        // filter pricing by recurrence and currency
        // (allows you to display multiple prices for the same product)
        pricingFilter: {
            currency: {
                selectedCurrency, // current currency (USD by default)
                availableCurrencies, // list of the available currencies
                setCurrency // function to set the desired currency
            },
            recurrence: {
                selectedRecurrence, // current recurrence
                availableRecurrences, // list of the available recurrences
                setRecurrence // function to set the desired recurrence
            }
        }
    } = useProducts(
        // set the list of product ids to load
        // [/!\ Warning] the ids of the products are different between test mode
        // and live mode
        ["prod_..."],
        {
            // Pricings will show how much they cost monthly
            normalizePriceOnRecurrence: "monthly",
            
            // set the name of the customer if you have it
            // (i.e. the user is sign in already and you know their name)
            defaultCustomerName: getCustomerName(),
            
            // Normalize all the display prices on the given recurrence
            // in this case, all prices will be displayed as their monthly equivalent
            // so if a product cost 120$/year it will be displayed as 10$/month
            // this is useful for the user to compare the different prices
            // without having to do some conversions
            normalizePriceOnRecurrence: "monthly",
            
            // Default currency to filter the prices with
            defaultCurrency: "usd",
            
            // Default recurrence to filter the prices with
            defaultRecurrence: "yearly", 
            
            // Callback when payment is successful
            onPaymentSuccessful: () => console.log(`Payment successful`), 
            
            // Callback when payment is unsuccessful
            onPaymentError: (error) => console.log(`Payment error`, error) 
        })

    return (
        <div>
            {/*Payment modal that will open when a price is selected*/}
            <PaymentModal />

            {/*Plan description and price*/}
            <h3>{premiumPlan.name}</h3>
            <h2>
                {/*ex: $ 19.99/month */}
                {selectedCurrency.symbol} {/* $ */}
                {premiumPlan.selectedPricing.priceInteger}. {/* 19 */}
                {premiumPlan.selectedPricing.priceDecimal} {/* 99 */}
                /{premiumPlan.selectedPricing.pricingRecurrence} {/* /month */}
            </h2>
            {/* Payment button */}
            <premiumPlan.selectedPricing.PaymentButton />
        </div>
    )
}