analytics/lib/plausible_web/live/choose_plan.ex

760 lines
25 KiB
Elixir
Raw Normal View History

Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
defmodule PlausibleWeb.Live.ChoosePlan do
@moduledoc """
LiveView for upgrading to a plan, or changing an existing plan.
"""
use Phoenix.LiveView
use Phoenix.HTML
import PlausibleWeb.Components.Billing
Refactor enterprise plan upgrade and change-plan actions (#3397) * rename enterprise?/1 function * change link text to Upgrade when subscription deleted * extract paddle_button and paddle_script components * create a new upgrade-to-enterprise-plan page * extract upgrade_link component * rename function * link to enterprise plan upgrade page from settings ...if the user has an enterprise plan configured * fetch enterprise plan price on the new page * add change_enterprise_plan functionality on the new page * render existing change_enterprise_plan_contact_us.html ...when subscribed to latest configured enterprise plan * rename vars and extract resumable? fn * remove dead billing route * small test refactor: extract convenience fn * add tests for... ...restricting paused and past_due subscription access to the new enterprise plan page. 1. redirect to /settings from the controller action 2. hiding the change-plan link from the user settings * implement redirect to /settings * hide the enterprise upgrade/change-plan link * add tests for a deleted enterprise subscription * plug in the new controller action and delete dead code * optimize for dark mode * fix compile warning * credo fix * display N/A instead of crash when price nil * change subscription.status type to Ecto.Enum Also, create a new `Subscription.Status` module that exposes macros to return the used atom values (prevent typos at compiletime). * fix bug (@conn not available anymore) * use Routes.billing_path where applicable * add a status() type * silence credo * refactor suggestion from review Co-authored-by: Adrian Gruntkowski <adrian.gruntkowski@gmail.com> * Remove the __using__ macro from Subscription.Status ... instead be explicit about requires and aliases and also order the use, import, require, and alias clauses according to https://github.com/christopheradams/elixir_style_guide#module-attribute-ordering * drop the virtual Enteprise 'price_per_interval' field * apply review suggestion to make the code more DRY * use dot syntax to fetch current user in new controller actions * fix formatting --------- Co-authored-by: Adrian Gruntkowski <adrian.gruntkowski@gmail.com>
2023-10-10 20:35:17 +03:00
require Plausible.Billing.Subscription.Status
alias Plausible.Users
alias Plausible.Billing.{Plans, Plan, Quota, Subscription}
alias PlausibleWeb.Router.Helpers, as: Routes
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
@contact_link "https://plausible.io/contact"
@billing_faq_link "https://plausible.io/docs/billing"
def mount(_params, %{"user_id" => user_id}, socket) do
socket =
socket
|> assign_new(:user, fn ->
Users.with_subscription(user_id)
end)
|> assign_new(:usage, fn %{user: user} ->
Quota.usage(user, with_features: true)
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
end)
|> assign_new(:owned_plan, fn %{user: %{subscription: subscription}} ->
Plans.get_regular_plan(subscription, only_non_expired: true)
end)
|> assign_new(:owned_tier, fn %{owned_plan: owned_plan} ->
if owned_plan, do: Map.get(owned_plan, :kind), else: nil
end)
|> assign_new(:recommended_tier, fn %{owned_plan: owned_plan, user: user} ->
if owned_plan, do: nil, else: Plans.suggest_tier(user)
end)
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
|> assign_new(:current_interval, fn %{user: user} ->
current_user_subscription_interval(user.subscription)
end)
|> assign_new(:available_plans, fn %{user: user} ->
Plans.available_plans_for(user, with_prices: true)
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
end)
|> assign_new(:available_volumes, fn %{available_plans: available_plans} ->
get_available_volumes(available_plans)
end)
|> assign_new(:selected_volume, fn %{
owned_plan: owned_plan,
usage: usage,
available_volumes: available_volumes
} ->
default_selected_volume(owned_plan, usage.monthly_pageviews, available_volumes)
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
end)
|> assign_new(:selected_interval, fn %{current_interval: current_interval} ->
current_interval || :monthly
end)
|> assign_new(:selected_growth_plan, fn %{
available_plans: available_plans,
selected_volume: selected_volume
} ->
get_plan_by_volume(available_plans.growth, selected_volume)
end)
|> assign_new(:selected_business_plan, fn %{
available_plans: available_plans,
selected_volume: selected_volume
} ->
get_plan_by_volume(available_plans.business, selected_volume)
end)
{:ok, socket}
end
def render(assigns) do
growth_plan_to_render =
assigns.selected_growth_plan || List.last(assigns.available_plans.growth)
business_plan_to_render =
assigns.selected_business_plan || List.last(assigns.available_plans.business)
growth_benefits = growth_benefits(growth_plan_to_render)
business_benefits = business_benefits(business_plan_to_render, growth_benefits)
assigns =
assigns
|> assign(:growth_plan_to_render, growth_plan_to_render)
|> assign(:business_plan_to_render, business_plan_to_render)
|> assign(:growth_benefits, growth_benefits)
|> assign(:business_benefits, business_benefits)
|> assign(:enterprise_benefits, enterprise_benefits(business_benefits))
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
~H"""
<div class="bg-gray-100 dark:bg-gray-900 pt-1 pb-12 sm:pb-16 text-gray-900 dark:text-gray-100">
<div class="mx-auto max-w-7xl px-6 lg:px-20">
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
<.subscription_past_due_notice class="pb-2" subscription={@user.subscription} />
<.subscription_paused_notice class="pb-2" subscription={@user.subscription} />
<div class="mx-auto max-w-4xl text-center">
<p class="text-4xl font-bold tracking-tight lg:text-5xl">
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
<%= if @owned_plan,
do: "Change subscription plan",
else: "Upgrade your account" %>
</p>
</div>
<div class="mt-12 max-w-md lg:max-w-none mx-auto flex flex-col lg:flex-row-reverse justify-between">
<.interval_picker selected_interval={@selected_interval} />
<.slider selected_volume={@selected_volume} available_volumes={@available_volumes} />
</div>
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
<div class="mt-6 isolate mx-auto grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<.plan_box
kind={:growth}
owned={@owned_tier == :growth}
recommended={@recommended_tier == :growth}
plan_to_render={@growth_plan_to_render}
benefits={@growth_benefits}
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
available={!!@selected_growth_plan}
{assigns}
/>
<.plan_box
kind={:business}
owned={@owned_tier == :business}
recommended={@recommended_tier == :business}
plan_to_render={@business_plan_to_render}
benefits={@business_benefits}
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
available={!!@selected_business_plan}
{assigns}
/>
<.enterprise_plan_box benefits={@enterprise_benefits} />
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
</div>
<p class="mx-auto mt-8 max-w-2xl text-center text-lg leading-8 text-gray-600 dark:text-gray-400">
You have used <b><%= PlausibleWeb.AuthView.delimit_integer(@usage.monthly_pageviews) %></b>
billable pageviews in the last 30 days
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
</p>
<.pageview_limit_notice :if={!@owned_plan} />
<.help_links />
</div>
</div>
<.slider_styles />
<.paddle_script />
"""
end
def handle_event("set_interval", %{"interval" => interval}, socket) do
new_interval =
case interval do
"yearly" -> :yearly
"monthly" -> :monthly
end
{:noreply, assign(socket, selected_interval: new_interval)}
end
def handle_event("slide", %{"slider" => index}, socket) do
index = String.to_integer(index)
%{available_plans: available_plans, available_volumes: available_volumes} = socket.assigns
new_volume =
if index == length(available_volumes) do
:enterprise
else
Enum.at(available_volumes, index)
end
{:noreply,
assign(socket,
selected_volume: new_volume,
selected_growth_plan: get_plan_by_volume(available_plans.growth, new_volume),
selected_business_plan: get_plan_by_volume(available_plans.business, new_volume)
)}
end
defp default_selected_volume(%Plan{monthly_pageview_limit: limit}, _, _), do: limit
defp default_selected_volume(_, pageview_usage, available_volumes) do
Enum.find(available_volumes, &(pageview_usage < &1)) || :enterprise
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
end
defp current_user_subscription_interval(subscription) do
case Plans.subscription_interval(subscription) do
"yearly" -> :yearly
"monthly" -> :monthly
_ -> nil
end
end
defp get_plan_by_volume(_, :enterprise), do: nil
defp get_plan_by_volume(plans, volume) do
Enum.find(plans, &(&1.monthly_pageview_limit == volume))
end
defp interval_picker(assigns) do
~H"""
<div class="mt-4 lg:flex justify-center self-start lg:self-end">
<div class="relative ">
<.two_months_free />
<fieldset class="grid grid-cols-2 gap-x-1 rounded-full bg-white dark:bg-gray-700 p-1 text-center text-sm font-semibold leading-5 shadow dark:ring-gray-600">
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
<label
class={"cursor-pointer rounded-full px-2.5 py-1 text-gray-900 dark:text-white #{if @selected_interval == :monthly, do: "bg-indigo-600 text-white"}"}
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
phx-click="set_interval"
phx-value-interval="monthly"
>
<input type="radio" name="frequency" value="monthly" class="sr-only" />
<span>Monthly</span>
</label>
<label
class={"cursor-pointer rounded-full px-2.5 py-1 text-gray-900 dark:text-white #{if @selected_interval == :yearly, do: "bg-indigo-600 text-white"}"}
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
phx-click="set_interval"
phx-value-interval="yearly"
>
<input type="radio" name="frequency" value="yearly" class="sr-only" />
<span>Yearly</span>
</label>
</fieldset>
</div>
</div>
"""
end
def two_months_free(assigns) do
~H"""
<span class="absolute -right-16 -top-3 whitespace-no-wrap w-max px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 bg-yellow-100 border border-yellow-300 text-yellow-700">
2 months free
</span>
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
"""
end
defp slider(assigns) do
~H"""
<form class="w-full lg:w-2/5 mt-4 ">
<p class="font-medium leading-6 text-gray-600 dark:text-gray-200">
<b id="slider-value" class="text-xl text-gray-900 dark:text-gray-100">
<%= slider_value(@selected_volume, @available_volumes) %>
</b>
monthly pageviews
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
</p>
<input
phx-change="slide"
name="slider"
class="mt-4 shadow dark:bg-gray-600 dark:border-none"
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
type="range"
min="0"
max={length(@available_volumes)}
step="1"
value={
Enum.find_index(@available_volumes, &(&1 == @selected_volume)) || length(@available_volumes)
}
/>
</form>
"""
end
defp plan_box(assigns) do
highlight =
cond do
assigns.owned -> "Current"
assigns.recommended -> "Recommended"
true -> nil
end
assigns = assign(assigns, :highlight, highlight)
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
~H"""
<div
id={"#{@kind}-plan-box"}
class={[
"shadow-lg bg-white rounded-3xl px-6 sm:px-8 py-4 sm:py-6 dark:bg-gray-800",
!@highlight && "dark:ring-gray-600",
@highlight && "ring-2 ring-indigo-600 dark:ring-indigo-300"
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
]}
>
<div class="flex items-center justify-between gap-x-4">
<h3 class={[
"text-lg font-semibold leading-8",
!@highlight && "text-gray-900 dark:text-gray-100",
@highlight && "text-indigo-600 dark:text-indigo-300"
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
]}>
<%= String.capitalize(to_string(@kind)) %>
</h3>
<.pill :if={@highlight} text={@highlight} />
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
</div>
<div>
<.render_price_info available={@available} {assigns} />
<%= if @available do %>
<.checkout id={"#{@kind}-checkout"} {assigns} />
<% else %>
<.contact_button class="bg-indigo-600 hover:bg-indigo-500 text-white" />
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
<% end %>
</div>
<%= if @owned && @kind == :growth && @plan_to_render.generation < 4 do %>
<.growth_grandfathering_notice />
<% else %>
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 text-gray-600 dark:text-gray-100 xl:mt-10"
>
<.plan_benefit :for={benefit <- @benefits}><%= benefit %></.plan_benefit>
</ul>
<% end %>
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
</div>
"""
end
defp checkout(assigns) do
paddle_product_id = get_paddle_product_id(assigns.plan_to_render, assigns.selected_interval)
change_plan_link_text = change_plan_link_text(assigns)
exceeded_limits = Quota.exceeded_limits(assigns.usage, assigns.plan_to_render)
usage_exceeds_plan_limits =
Enum.any?([:team_member_limit, :site_limit], &(&1 in exceeded_limits))
subscription = assigns.user.subscription
billing_details_expired =
subscription &&
subscription.status in [
Subscription.Status.paused(),
Subscription.Status.past_due()
]
subscription_cancelled = subscription && subscription.status == Subscription.Status.deleted()
{checkout_disabled, disabled_message} =
cond do
change_plan_link_text == "Currently on this plan" && not subscription_cancelled ->
{true, nil}
assigns.available && usage_exceeds_plan_limits ->
{true, "Your usage exceeds this plan"}
billing_details_expired ->
{true, "Please update your billing details first"}
true ->
{false, nil}
end
features_to_lose = assigns.usage.features -- assigns.plan_to_render.features
assigns =
assigns
|> assign(:paddle_product_id, paddle_product_id)
|> assign(:change_plan_link_text, change_plan_link_text)
|> assign(:checkout_disabled, checkout_disabled)
|> assign(:disabled_message, disabled_message)
|> assign(:confirm_message, losing_features_message(features_to_lose))
~H"""
<%= if @owned_plan && Plausible.Billing.Subscriptions.resumable?(@user.subscription) do %>
<.change_plan_link {assigns} />
<% else %>
<.paddle_button {assigns}>Upgrade</.paddle_button>
<% end %>
<p :if={@disabled_message} class="h-0 text-center text-sm text-red-700 dark:text-red-500">
<%= @disabled_message %>
</p>
"""
end
defp losing_features_message([]), do: nil
defp losing_features_message(features_to_lose) do
features_list_str =
features_to_lose
|> Enum.map(& &1.display_name)
|> PlausibleWeb.TextHelpers.pretty_join()
"This plan does not support #{features_list_str}, which you are currently using. Please note that by subscribing to this plan you will lose access to #{if length(features_to_lose) == 1, do: "this feature", else: "these features"}."
end
defp growth_grandfathering_notice(assigns) do
~H"""
<ul class="mt-8 space-y-3 text-sm leading-6 text-gray-600 text-justify dark:text-gray-100 xl:mt-10">
Your subscription has been grandfathered in at the same rate and terms as when you first joined. If you don't need the "Business" features, you're welcome to stay on this plan. You can adjust the pageview limit or change the billing frequency of this grandfathered plan. If you're interested in business features, you can upgrade to the new "Business" plan.
</ul>
"""
end
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
def render_price_info(%{available: false} = assigns) do
~H"""
<p id={"#{@kind}-custom-price"} class="mt-6 flex items-baseline gap-x-1">
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
<span class="text-4xl font-bold tracking-tight text-gray-900 dark:text-white">
Custom
</span>
</p>
<p class="h-4 mt-1"></p>
"""
end
def render_price_info(assigns) do
~H"""
<p class="mt-6 flex items-baseline gap-x-1">
<.price_tag
kind={@kind}
selected_interval={@selected_interval}
plan_to_render={@plan_to_render}
/>
</p>
<p class="mt-1 text-xs">+ VAT if applicable</p>
"""
end
defp change_plan_link(assigns) do
confirmed =
if assigns.confirm_message, do: "confirm(\"#{assigns.confirm_message}\")", else: "true"
assigns = assign(assigns, :confirmed, confirmed)
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
~H"""
<button
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
id={"#{@kind}-checkout"}
onclick={"if (#{@confirmed}) {window.location = '#{Routes.billing_path(PlausibleWeb.Endpoint, :change_plan_preview, @paddle_product_id)}'}"}
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
class={[
"w-full mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 text-white",
!@checkout_disabled && "bg-indigo-600 hover:bg-indigo-500",
@checkout_disabled && "pointer-events-none bg-gray-400 dark:bg-gray-600"
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
]}
>
<%= @change_plan_link_text %>
</button>
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
"""
end
slot :inner_block, required: true
attr :icon_color, :string, default: "indigo-600"
defp plan_benefit(assigns) do
~H"""
<li class="flex gap-x-3">
<.check_icon class={"text-#{@icon_color} dark:text-green-600"} />
<%= render_slot(@inner_block) %>
</li>
"""
end
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
defp contact_button(assigns) do
~H"""
<.link
href={contact_link()}
class={[
"mt-6 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 bg-gray-800 hover:bg-gray-700 text-white dark:bg-indigo-600 dark:hover:bg-indigo-500",
@class
]}
>
Contact us
</.link>
"""
end
defp enterprise_plan_box(assigns) do
~H"""
<div
id="enterprise-plan-box"
class="rounded-3xl px-6 sm:px-8 py-4 sm:py-6 bg-gray-900 shadow-xl dark:bg-gray-800 dark:ring-gray-600"
>
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
<h3 class="text-lg font-semibold leading-8 text-white dark:text-gray-100">Enterprise</h3>
<p class="mt-6 flex items-baseline gap-x-1">
<span class="text-4xl font-bold tracking-tight text-white dark:text-gray-100">
Custom
</span>
</p>
<p class="h-4 mt-1"></p>
<.contact_button class="" />
<ul
role="list"
class="mt-8 space-y-3 text-sm leading-6 xl:mt-10 text-gray-300 dark:text-gray-100"
>
<.plan_benefit :for={benefit <- @benefits}>
<%= if is_binary(benefit), do: benefit, else: benefit.(assigns) %>
</.plan_benefit>
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
</ul>
</div>
"""
end
defp pill(assigns) do
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
~H"""
<div class="flex items-center justify-between gap-x-4">
<p
id="highlight-pill"
class="rounded-full bg-indigo-600/10 px-2.5 py-1 text-xs font-semibold leading-5 text-indigo-600 dark:text-indigo-300 dark:ring-1 dark:ring-indigo-300/50"
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
>
<%= @text %>
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
</p>
</div>
"""
end
defp check_icon(assigns) do
~H"""
<svg {%{class: "h-6 w-5 flex-none #{@class}", viewBox: "0 0 20 20",fill: "currentColor","aria-hidden": "true"}}>
<path
fill-rule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clip-rule="evenodd"
/>
</svg>
"""
end
defp pageview_limit_notice(assigns) do
~H"""
<div class="mt-12 mx-auto mt-6 max-w-2xl">
<dt>
<p class="w-full text-center text-gray-900 dark:text-gray-100">
<span class="text-center font-semibold leading-7">
What happens if I go over my page views limit?
</span>
</p>
</dt>
<dd class="mt-3">
<div class="text-justify leading-7 block text-gray-600 dark:text-gray-100">
You will never be charged extra for an occasional traffic spike. There are no surprise fees and your card will never be charged unexpectedly. If your page views exceed your plan for two consecutive months, we will contact you to upgrade to a higher plan for the following month. You will have two weeks to make a decision. You can decide to continue with a higher plan or to cancel your account at that point.
</div>
</dd>
</div>
"""
end
defp help_links(assigns) do
~H"""
<div class="mt-8 text-center">
Questions? <a class="text-indigo-600" href={contact_link()}>Contact us</a>
or see <a class="text-indigo-600" href={billing_faq_link()}>billing FAQ</a>
</div>
"""
end
defp price_tag(%{plan_to_render: %Plan{monthly_cost: nil}} = assigns) do
~H"""
<span class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
N/A
</span>
"""
end
defp price_tag(%{selected_interval: :monthly} = assigns) do
~H"""
<span
id={"#{@kind}-price-tag-amount"}
class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
>
<%= @plan_to_render.monthly_cost |> format_price() %>
</span>
<span
id={"#{@kind}-price-tag-interval"}
class="text-sm font-semibold leading-6 text-gray-600 dark:text-gray-500"
>
/month
</span>
"""
end
defp price_tag(%{selected_interval: :yearly} = assigns) do
~H"""
<span class="text-2xl font-bold w-max tracking-tight line-through text-gray-500 dark:text-gray-600 mr-1">
<%= @plan_to_render.monthly_cost |> Money.mult!(12) |> format_price() %>
</span>
<span
id={"#{@kind}-price-tag-amount"}
class="text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
>
<%= @plan_to_render.yearly_cost |> format_price() %>
</span>
<span id={"#{@kind}-price-tag-interval"} class="text-sm font-semibold leading-6 text-gray-600">
/year
</span>
"""
end
defp slider_styles(assigns) do
~H"""
<style>
input[type="range"] {
-moz-appearance: none;
-webkit-appearance: none;
background: white;
border-radius: 3px;
height: 6px;
width: 100%;
margin-bottom: 9px;
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background-color: #5f48ff;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
border: 0;
border-radius: 50%;
cursor: pointer;
height: 28px;
width: 28px;
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
}
input[type="range"]::-moz-range-thumb {
background-color: #5f48ff;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
border: 0;
border: none;
border-radius: 50%;
cursor: pointer;
height: 28px;
width: 28px;
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
}
input[type="range"]::-ms-thumb {
background-color: #5f48ff;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2212%22%20height%3D%228%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%20.5v7L12%204zM0%204l4%203.5v-7z%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E");
background-position: center;
background-repeat: no-repeat;
border: 0;
border-radius: 50%;
cursor: pointer;
height: 28px;
width: 28px;
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
}
input[type="range"]::-moz-focus-outer {
border: 0;
}
</style>
"""
end
# credo:disable-for-next-line Credo.Check.Refactor.CyclomaticComplexity
defp change_plan_link_text(
%{
owned_plan: %Plan{kind: from_kind, monthly_pageview_limit: from_volume},
plan_to_render: %Plan{kind: to_kind, monthly_pageview_limit: to_volume},
current_interval: from_interval,
selected_interval: to_interval
} = _assigns
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
) do
cond do
from_kind == :business && to_kind == :growth ->
"Downgrade to Growth"
from_kind == :growth && to_kind == :business ->
"Upgrade to Business"
from_volume == to_volume && from_interval == to_interval ->
"Currently on this plan"
from_volume == to_volume ->
"Change billing interval"
from_volume > to_volume ->
"Downgrade"
true ->
"Upgrade"
end
end
defp change_plan_link_text(_), do: nil
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
defp get_available_volumes(%{business: business_plans, growth: growth_plans}) do
growth_volumes = Enum.map(growth_plans, & &1.monthly_pageview_limit)
business_volumes = Enum.map(business_plans, & &1.monthly_pageview_limit)
(growth_volumes ++ business_volumes)
|> Enum.uniq()
end
defp get_paddle_product_id(%Plan{monthly_product_id: plan_id}, :monthly), do: plan_id
defp get_paddle_product_id(%Plan{yearly_product_id: plan_id}, :yearly), do: plan_id
defp slider_value(:enterprise, available_volumes) do
List.last(available_volumes)
|> PlausibleWeb.StatsView.large_number_format()
|> Kernel.<>("+")
end
defp slider_value(volume, _) when is_integer(volume) do
PlausibleWeb.StatsView.large_number_format(volume)
end
defp growth_benefits(plan) do
[
team_member_limit_benefit(plan),
site_limit_benefit(plan),
"Intuitive, fast and privacy-friendly dashboard",
"Email/Slack reports",
"Google Analytics import"
]
|> Kernel.++(feature_benefits(plan))
end
defp business_benefits(plan, growth_benefits) do
[
"Everything in Growth",
team_member_limit_benefit(plan),
site_limit_benefit(plan)
]
|> Kernel.++(feature_benefits(plan))
|> Kernel.--(growth_benefits)
|> Kernel.++(["Priority support"])
end
defp enterprise_benefits(business_benefits) do
team_members =
if "Up to 10 team members" in business_benefits,
do: "10+ team members",
else: nil
[
"Everything in Business",
team_members,
"50+ sites",
"600+ Stats API requests per hour",
&sites_api_benefit/1,
"Technical onboarding"
]
|> Enum.filter(& &1)
end
defp team_member_limit_benefit(%Plan{} = plan) do
case plan.team_member_limit do
:unlimited -> "Unlimited team members"
number -> "Up to #{number} team members"
end
end
defp site_limit_benefit(%Plan{} = plan), do: "Up to #{plan.site_limit} sites"
defp feature_benefits(%Plan{} = plan) do
Enum.map(plan.features, fn feature_mod ->
case feature_mod.name() do
:goals -> "Goals and custom events"
:stats_api -> "Stats API (600 requests per hour)"
:revenue_goals -> "Ecommerce revenue attribution"
_ -> feature_mod.display_name()
end
end)
end
defp sites_api_benefit(assigns) do
~H"""
<p>
Sites API access for
<.link
class="text-indigo-500 hover:text-indigo-400"
href="https://plausible.io/white-label-web-analytics"
>
reselling
</.link>
</p>
"""
end
Use Phoenix LiveView for the upgrade page (#3382) * add a new upgrade page liveview behind a FF * Create plans_v4.json file * Add the upgrade page UI template and some basic functionalities * different content based on subscription plan existing or not * pageview slider * monthly/yearly switch * fix tests * split into 2 separate functions * rename variables * implement volume slider + read default interval/volume from plan * organize choose-plan.ex better * remove unused vars from tests * make monthly_cost and yearly_cost nil by default The actual prices for all plans are stored in Paddle. We don't need to keep the duplicates in the JSON files. * add fetch_prices/1 to PaddleApi * make v4 business ID's differ from growth ones * render actual price information from plans ...and make the prices in both growth and business plan boxes change dynamically when the pageview slider or interval is changed. * highlight current subscription plan box * add test describe block for business tier subscription * connect to live socket only on the specific LV page using focus.html * only wrap the input slider inside the form * little readability improvement * add v4 team_member_limits (after rebase with master) * extract monthly_quota_box function in user_settings When the business_tier FF is enabled, this section is different and links to the new upgrade page. * document subscription statuses * change _notice.html.eex to .heex * extract subscription status notice components * add failed payment notices to upgrade page * create class_of_element/2 convenience function for testing * add cancel_subscription mix task * implement checkout buttons * mix format * get all available plans with prices through plans.ex * use more suitable function for fetching usage * avoid double db lookups on mount * rename variable * separate functions for getting plan by product_id vs subscription * separate subscription status docs into context module * consider cancelled subscriptions * default volume by usage if no subscription plan * add enterprise-level volume option to slider * optimize for darkmode * UI improvements * display 2 months free notice for yearly billing * VAT excluded notice * note about having a business subscription in user settings * make the page pop and fit plans on screen on first render * optimize for mobile and remove background containers * change default price tag to simply 'N/A' * fix tests * Change Paddle.js integration to use JavaScript directly * rename many variables * allow users on v1 and v2 plan subscribe to 20M and 50M tiers * add a test for two months free label * make it work with a free_10k subscription * small test improvement and formatting * change other upgrade link in user settings if FF enabled * dialyzer * fix typo * add test for free_10k user * silence credo * mix format * credo - add moduledoc * credo - another moduledoc * handle calls to sentry on the api level * refactor getting regular subscription plan for LiveView * post review code style tweaks * remove unused aliases * credo - add @moduledoc false to Subscriptions * crash in cancel_subscription task when Repo update fails * readability improvements (review suggestions) * add comment about 'external_resource' module attr --------- Co-authored-by: Vinicius Brasil <vini@hey.com>
2023-10-03 13:36:22 +03:00
defp contact_link(), do: @contact_link
defp billing_faq_link(), do: @billing_faq_link
end