Billing flow revamp (#2130)

* Add new icons in project settings page * Add icon for Variables * Update documentation for Profile > Billing * Add documentation for Settings > Plans * Add new icons in Profile settings page + some improvements * Update/add documentation about Invoices * Add comments to update screenshots at the end of the project * Change Usage & Billing name everywhere + start documenting seats management * Document seats management * Create + Use snippet for invoices statuses info * Update TOC badges * Fix typos and errors after reviews * Update & add screenshots --------- Co-authored-by: Pierre Wizla <[email protected]>
strapi · Jun 26, 2024 · de9d2c3 · de9d2c3
1 parent 0acfa51
commit de9d2c3
Show file tree

Hide file tree

Showing 38 changed files with 220 additions and 102 deletions.
diff --git a/docusaurus/docs/cloud/account/account-billing.md b/docusaurus/docs/cloud/account/account-billing.md
@@ -1,19 +1,19 @@
 ---
-title: Account billing details
+title: Account billing & invoices
 displayed_sidebar: cloudSidebar
-description: Manage billing details for Strapi Cloud account.
+description: Manage billing details and invoices for Strapi Cloud account.
 canonicalUrl: https://docs.strapi.io/cloud/account/account-billing.html
 ---
 
-# Account billing details 
+import InvoiceStatus from '/docs/snippets/invoices-statuses.md'
 
-Through the *Profile* page, accessible by clicking on your profile picture on the top right hand corner of the interface then clicking on **Profile**, you can access the *Billing* tab.
+# Account billing & invoices 
 
-The *Billing* tab displays and enables you to modify the billing details and payment method set for the account. This information will by default be reused for every new project created with your Strapi Cloud account.
+Through the *Profile* page, accessible by clicking on your profile picture on the top right hand corner of the interface then clicking on **Profile**, you can access the [![Billing icon](/img/assets/icons/CreditCard.svg) *Billing*](#account-billing) and [![Invoices icon](/img/assets/icons/Invoice.svg) *Invoices*](#account-invoices) tabs.
 
-:::note
-The Payment method section can only be accessible once the mandatory fields of the Billing details section have been filled in.
-:::
+## Account billing
+
+The ![Billing icon](/img/assets/icons/CreditCard.svg) *Billing* tab displays and enables you to modify the billing details and payment method set for the account.
 
 <ThemedImage
   alt="Billing tab of Profile page"
@@ -23,57 +23,50 @@ The Payment method section can only be accessible once the mandatory fields of t
     }}
 />
 
-## Managing subscriptions
+The *Payment method* section of the ![Billing icon](/img/assets/icons/CreditCard.svg) *Billing* tab allows you to manage the credit cards that can be used for the Strapi Cloud projects. The *Billing details* section requires to be filled in, at least for the mandatory fields, as this information will be the default billing details for all Strapi Cloud projects related to your account.
 
-Using the **Manage subscriptions** button in the *Billing* tab, you can:
+### Adding a new credit card
 
-- view and edit your subscriptions by clicking on the active subscription(s) tile(s): change project name, update shipping details, [edit current subscription](#edit-subscription) and [cancel current subscription](#cancel-subscription),
-- view and edit your Account Information: email, password and company name,
-- view and edit your Billing & Shipping Addresses,
-- view and edit your Payment Methods and add new ones,
-- access your Billing History and download your invoices.
+1. In the *Payment method* section of the ![Billing icon](/img/assets/icons/CreditCard.svg) *Billing* tab, click on the **Add card** button.
+2. Fill in the following fields:
 
-<ThemedImage
-  alt="Subscriptions management modal"
-  sources={{
-        light: '/img/assets/cloud/manage-subscriptions.png',
-        dark: '/img/assets/cloud/manage-subscriptions_DARK.png',
-      }}
-/>
-
-## Edit subscription
+| Field name | Description |
+| --- | --- |
+| Card Number | Write the number of the credit card to add as payment method. |
+| Expires | Write the expiration date of the credit card. |
+| CVC | Write the 3-numbers code displayed at the back of the credit card. |
 
-From the subscription management modal, you can view and modify any current subscription. This includes upgrading or downgrading to another plan.
+3. Click on the **Save** button.
 
-:::caution
-If you choose to downgrade to another plan but your current usage exceeds the limits of that plan, you are taking the risk of getting charged for the overages. Not also that you may lose access to some features: for example, downgrading to the Developer plan which doesn't include the Backups feature, would make you lose all your project's backups. Please refer to [Usage & Billing](/cloud/getting-started/usage-billing) for more information.
+:::tip
+The first credit card to be added as payment method for the account will by default be the primary one. It is however possible to define another credit card as primary by clicking on the ![Menu icon](/img/assets/icons/more.svg) icon, then **Switch as primary**.
 :::
 
-<ThemedImage
-  alt="Subscription edition modal"
-  sources={{
-      light: '/img/assets/cloud/edit-subscription-modal.png',
-      dark: '/img/assets/cloud/edit-subscription-modal_DARK.png',
-    }}
-/>
+### Deleting a credit card
+
+To remove a credit card from the list of payment methods for the account:
+
+1. Click on the ![Menu icon](/img/assets/icons/more.svg) icon of the credit card you wish to delete.
+2. Click **Remove card**. The card is immediately deleted.
 
-1. Click on an active subscription tile (e.g. "Strapi Cloud Pro $99.00" located above the subscriptions management links such as _Account Information_, _Billing & Shipping Addresses_). You will be redirected to your subscription details.
-2. Click on the **Edit Subscription** link.
-3. If you only want to add addons (e.g. additional seats), click on the **Add Addons** button.
-4. If you want to change plan, whether it is a plan upgrade or a downgrade (e.g. from Pro plan to Team plan, or from Pro plan to Developer plan), click on **Change** and select a new plan.
-5. Confirm your modifications by clicking on the **Update Subscription** button at the bottom of the modal.
+:::note
+You cannot delete the primary card as at least one credit card must be available as payment method, and the primary card is by default that one. If the credit card you wish to delete is currently the primary card, you must first define another credit card as primary, then delete it.
+:::
 
-## Cancel subscription
+## Account invoices
+
+The ![Invoices icon](/img/assets/icons/Invoice.svg) *Invoices* tab displays the complete list of invoices for all your Strapi Cloud projects.
 
 <ThemedImage
-  alt="Subscription cancellation modal"
+  alt="Invoices tab of Profile page"
   sources={{
-    light: '/img/assets/cloud/cancel-subscription-modal.png',
-    dark: '/img/assets/cloud/cancel-subscription-modal_DARK.png',
+      light: '/img/assets/cloud/account-invoices.png',
+      dark: '/img/assets/cloud/account-invoices_DARK.png',
     }}
 />
 
-1. Click on an active subscription tile (e.g. "Strapi Cloud Pro $99.OO"). You will be redirected to your subscription details.
-2. Click on the **Cancel Subscription** link.
-3. Select the reason of your cancellation from the drop-down menu, and optionally add a comment in the textbox.
-4. Confirm your choice by clicking on the **Confirm Cancellation** button.
+<InvoiceStatus components={props.components} />
+
+:::strapi Invoices are also available per project.
+In the *Settings > Invoices* tab of any project, you will find the invoices for that project only. Feel free to check the [dedicated documentation](/cloud/projects/settings#invoices).
+:::
diff --git a/docusaurus/docs/cloud/account/account-settings.md b/docusaurus/docs/cloud/account/account-settings.md
@@ -9,11 +9,11 @@ canonicalUrl: https://docs.strapi.io/cloud/account/account-settings.html
 
 The *Profile* page enables you to manage your account details and preferences. It is accessible by clicking on your profile picture, on the top right hand corner of the interface, and **Profile**.
 
-There are 3 tabs available in the *Profile* interface: [*General*](#general), [*Preferences*](#preferences) and *Billing* (the latter is documented in the [Account billing details](/cloud/account/account-billing) section of this documentation).
+There are 3 tabs available in the *Profile* interface: ![General icon](/img/assets/icons/Faders.svg) [*General*](#general), ![Preferences icon](/img/assets/icons/Palette.svg) [*Preferences*](#preferences), ![Billing icon](/img/assets/icons/CreditCard.svg) *Billing* and ![Invoices icon](/img/assets/icons/Invoice.svg) Invoices (the last 2 are documented in the [Account billing details](/cloud/account/account-billing) section of this documentation).
 
 ## General
 
-The *General* tab enables you to edit the following details for your account profile:
+The ![General icon](/img/assets/icons/Faders.svg) *General* tab enables you to edit the following details for your account profile:
 
 - Details: to see the name associated with your account.
 - Connected accounts: to manage Google, GitHub and GitLab accounts connected with your Strapi Cloud account (see [Managing connected accounts](#managing-connected-accounts)).
@@ -39,13 +39,13 @@ You can also click on the three dots button of a connected account and click on
 
 You can delete your Strapi Cloud account, but it will be permanent and irreversible. All associated projects and their data will be deleted as well and the subscriptions for the projects will automatically be canceled.
 
-1. In the *Delete account* section of the *General* tab, click on the **Delete account** button.
+1. In the *Delete account* section of the ![General icon](/img/assets/icons/Faders.svg) *General* tab, click on the **Delete account** button.
 2. In the dialog, type `DELETE` in the textbox.
 3. Confirm the deletion of your account by clicking on the **Delete** button.
 
 ## Preferences
 
-The *Preferences* tab enables you to choose the appearance of your Strapi Cloud dashboard: either the Light or Dark theme.
+The ![Preferences icon](/img/assets/icons/Palette.svg) *Preferences* tab enables you to choose the appearance of your Strapi Cloud dashboard: either the Light or Dark theme.
 
 <ThemedImage
   alt="Preferences tab of Profile page"

diff --git a/docusaurus/docs/cloud/getting-started/cloud-fundamentals.md b/docusaurus/docs/cloud/getting-started/cloud-fundamentals.md
@@ -13,7 +13,7 @@ Before going any further into this Strapi Cloud documentation, we recommend you
 
 - **Strapi Cloud Pricing Plans** <br/> As a Strapi Cloud user you have the choice between 3 tiers: Developer, Pro and Team. Depending on the tier, you have access to different functionalities, support and customization options (see [Pricing page](https://strapi.io/pricing-cloud) for more details). In this Strapi Cloud documentation, the <CloudDevBadge />, <CloudProBadge />, and <CloudTeamBadge /> badges can be displayed beside a section's title to indicate for which tier the feature is available.
 
-- **Strapi CMS Enterprise features** <br/> Some of Strapi features, usually accessible via the Enterprise Edition of Strapi CMS, are included in some Strapi Cloud tiers (see [Pricing page](https://strapi.io/pricing-cloud) and [Usage & Billing](/cloud/getting-started/usage-billing) for more details). These features, highlighted with an <EnterpriseBadge /> badge, are documented in the [User Guide](https://docs.strapi.io/user-docs/intro) and the [Developer Documentation](https://docs.strapi.io/dev-docs/intro).
+- **Strapi CMS Enterprise features** <br/> Some of Strapi features, usually accessible via the Enterprise Edition of Strapi CMS, are included in some Strapi Cloud tiers (see [Pricing page](https://strapi.io/pricing-cloud) and [Information on billing & usage](/cloud/getting-started/usage-billing) for more details). These features, highlighted with an <EnterpriseBadge /> badge, are documented in the [User Guide](https://docs.strapi.io/user-docs/intro) and the [Developer Documentation](https://docs.strapi.io/dev-docs/intro).
 
 - **Types of Strapi Cloud users** <br/> There can be 2 types of users on a Strapi Cloud project: owners and maintainers. The owner is the one who has created the project and has therefore access to all features and options for the project. Maintainers are users who have been invited to contribute to an already created project by its owner. Maintainers, as documented in the [Collaboration](/cloud/projects/collaboration) page, cannot view and access all features and options from the Strapi Cloud dashboard.
 

diff --git a/docusaurus/docs/cloud/getting-started/intro.md b/docusaurus/docs/cloud/getting-started/intro.md
@@ -39,7 +39,7 @@ The Strapi Cloud documentation that you are currently reading is organised in to
 
 <CustomDocCardsWrapper>
   <CustomDocCard emoji="☁️" title="Project creation" description="Step-by-step guide to guide you through the creation and deployment of a Strapi Cloud project." link="/cloud/getting-started/deployment" />
-  <CustomDocCard emoji="💸" title="Usage & Billing" description="All details on Strapi Cloud plans & billing, including overages and project suspension." link="/cloud/getting-started/usage-billing" />
+  <CustomDocCard emoji="💸" title="Information on billing & usage" description="All details on Strapi Cloud plans & billing, including overages and project suspension." link="/cloud/getting-started/usage-billing" />
   <CustomDocCard emoji="🗃️" title="Projects overview" description="Information on how to access Strapi Cloud projects to view their details & usage, and manage them." link="/cloud/projects/overview" />
   <CustomDocCard emoji="⚙️" title="Projects settings" description="Details on all the available settings for Strapi Cloud projects and how to configure them." link="/cloud/projects/settings"/>
   <CustomDocCard emoji="🤝" title="Collaboration" description="Documentation for the Collaboration feature to invite other users to access and manage a project." link="/cloud/projects/collaboration"/>

diff --git a/docusaurus/docs/cloud/getting-started/usage-billing.md b/docusaurus/docs/cloud/getting-started/usage-billing.md
@@ -1,10 +1,10 @@
 ---
-sidebar_label: 'Usage & Billing'
+sidebar_label: 'Information on billing & usage'
 displayed_sidebar: cloudSidebar
 sidebar_position: 3
 ---
 
-# Usage & Billing
+# Information on billing & usage
 
 This page contains general information related to the usage and billing of your Strapi Cloud account and projects.
 
@@ -42,7 +42,7 @@ Strapi Cloud offers a free 14 days trial for all new accounts, and 3 paid plans:
 
 Seats represent the maximum number of users that can access the Strapi admin panel. Each plan comes with a default number of seats. 
 
-You can add more seats either by upgrading to a higher plan, or manually adding individual seats as desired. Seats can be added from the **Account Settings** (see [Edit subscription](/cloud/account/account-billing#edit-subscription)).
+You can add more seats either by upgrading to a higher plan, or manually adding individual seats as desired. Seats can be added from the **Billing & Usage** tab of a project's settings (see [Managing project's number of seats](/cloud/projects/settings#managing-projects-number-of-seats)).
 
 There is however a maximum number of seats that can be added per plan: