* basic typography classes
* Clean up classes for where we use h1 tags
* Clean up classes for where we use h2, h3, h4
* Clean up classes for where we use h6
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
- Mandatory address input when adding a new payment method
- Removed the global HCaptcha store that wasn't used consistently and would sometimes block payment method changes
- Remove the custom billing address data & tax id form on org creation and plan upgrades in favour of Stripe's `AddressElement`
- Unify usage of the Stripe payment elements into a single component
- Customers can mark "Purchasing as a business" and will then be able to put down a tax id
- Adjusted billing address form to have better labels + tax id is filtered down to selected country
- Adjusted Stripe Elements styling to use floating labels (otherwise very hard to use with address element) + additional styling changes
- New flag to filter out payment methods that do not have an address for org upgrades and credit top ups, this will be enforced a few days after rolling this out
- Added Google Maps Places API integration for address auto-completion via Stripe AddressElement
- Upgraded Stripe dependencies
- Slight adjustments to styling of plan upgrade modal
When changing the plan while also creating a payment method in the same breath, some customers double-clicked the confirm button leading to a double-submission and possibly leading to a state where the customer gets charged, but the plan change is not going through.
- Remove captcha for downgrades to Free, it is not needed
- Properly handle 3DS if customer has multiple payment methods
- Move payment method invalidation to react-query
This PR implements the new flow to confirm subscription upgrades using Orb pending changes. This is backwards compatible and based on a flag exposed by the backend (`subscriptionPreview.pending_subscription_flow`).
Just like the organization creation, the entire flow is slightly different - instead of creating a payment method separately, the payment method is added inline while doing the upgrade and then attached to the customer. If payment fails, the upgrade will not go through. If payment requires additional action, the user needs to confirm the payment before allowing the upgrade.
For testing the new flow locally, toggle the flag in `flags.ts` on the backend.
Changes include
- No longer rely on the `changeType` from the plans endpoint as this is regularly out-of-sync and displays wrong up/downgrade info due to race conditions
- `readOnly` mode for Stripe elements if anything is loading/submitting
- Reduced prop drilling for some components
- Hide payment method and address selection on downgrade
When translation tools go over prices, they wrongfully convert USD into other currencies without changing the price. $25 becomes Rp25 (Rupiah).
By using `translate='no'` we avoid the translation of pricing info. There are some tooltips left that are not covered yet, but this should be the majority already.
Kept the docs Pricing component as simple as possible, just wrapping in a span to avoid translation, not modifying any formatting.
We currently get support requests about adding or amending invoices due to no billing address being set. Changes in this PR:
- Unify tax id and billing address into a single form
- Add ability to set billing name that diverges from org name
- Add ability to set billing address & tax id during org creation (only paid plans)
- Add ability to set billing address & tax id during plan upgrade
Kevin Grüneberg