arcana-network · shaloo · Apr 10, 2023 · Feb 23, 2023 · Feb 27, 2023 · Feb 28, 2023
diff --git a/docs/concepts/billing.md b/docs/concepts/billing.md
@@ -68,4 +68,4 @@ The following billing notifications are displayed:
 TBD
 Link the billing errors list here and also link the Troubleshooting guide section on Billing errors.
 
--->
+-->
diff --git a/docs/concepts/index.md b/docs/concepts/index.md
@@ -12,6 +12,8 @@ These are the building blocks to help you learn about various {{config.extra.arc
 
 [Auth Types :material-clipboard-text-search-outline:](authtype/index.md){ .md-button }
 
+[Billing :fontawesome-solid-money-check-dollar:](billing.md){ .md-button }
+
 [Dashboard :material-monitor-dashboard:](dashboard.md){ .md-button }
 
 [DKG :material-key-plus:](dkg/index.md){ .md-button }

diff --git a/docs/db/config_dApp_with_db.md b/docs/db/config_dApp_with_db.md
@@ -41,7 +41,7 @@ This guide will walk you through the various configuration options available on
 
 !!! info "{{config.extra.arcana.app_address}}"
 
-      The {{config.extra.arcana.app_address}} assigned to your application can be found on the top right of the {{config.extra.arcana.dashboard_name}} screen. ![Dashboard Client Identifier](/img/an_db_app_address.png){.an-screenshots}
+      The {{config.extra.arcana.app_address}} assigned to your application can be found on the top right of the {{config.extra.arcana.dashboard_name}} screen. ![App Client Identifier](/img/an_db_app_address.png){.an-screenshots}
 
 ### Manage Configurations
 
@@ -153,9 +153,9 @@ Developers can monitor their registered application usage statistics via the {{c
 
 #### Account Usage Metrics
 
-The *Manage Apps* screen displays Monthly Active Users (MAU) for the developer account. This is an aggregate score across all the applications that are registered for a dev account and configured to use the {{config.extra.arcana.company_name}} Mainnet. Any application using the 'Testnet' are not billed and not included in this overall account usage statistic.
+The *Manage Apps* screen displays Monthly Active Users (MAU) for the developer account. This is an aggregate score across all the applications that are registered for a developer account and configured to use the {{config.extra.arcana.company_name}} Mainnet. Any application using the 'Testnet' are not billed and not included in this overall account usage statistic.
 
-![Dashboard metrics](/img/an_db_metrics.png){.an-screenshots}
+![App usage metrics](/img/an_db_metrics.png){.an-screenshots}
 
 !!! caution
 
@@ -177,11 +177,73 @@ You can use the dropdown in the top right of the application dashboard screen to
 
 ![Application Usage Stats Mainnet](/img/an_db_app_usage_metrics_mainnet_anim.gif){.an-screenshots}
 
+### Billing
+
+{{config.extra.arcana.company_name}} tracks the Mainnet app usage for every developer account in terms of MAU. Invoices are generated at the end of each month and the chargeable amount is auto-deducted using the payment method configured by the developer in their profile section. See [billing and pricing]({{page.meta.arcana.root_rel_path}}/concepts/billing.md) for details.
+
+To begin using the {{config.extra.arcana.sdk_name}}, the app developers don't need to update the profile details including the billing information. Once the apps consume the free tier of {{config.extra.arcana.company_name}} Mainnet usage, the developer must provide the billing details via the profile section of the {{config.extra.arcana.dashboard_name}}. Otherwise, the registered apps will be suspended and users will not be allowed to log in to any app that is registered using the developer account.
+
+#### Set up Payment Method
+
+Click on the user icon on the top right of the {{config.extra.arcana.dashboard_name}} screen. Select **Profile** in the dropdown. 
+
+![Application Usage Stats Mainnet](/img/an_db_billing_nav.png){.an-screenshots}
+
+You will see the developer's {{config.extra.arcana.company_name}} account profile details. The developer account **name** and **public identifier** (email) are automatically retrieved based on the account used to log into the {{config.extra.arcana.dashboard_name}}.
+
+Developers are required to update the following profile details and then click **Save**. 
+
+* Organization
+* Billing Address Details
+* Payment Method
+
+![Application Usage Stats Mainnet Billing Profile](/img/an_db_billing_profile.gif){.an-screenshots}
+
+!!! note "Payment Method"
+
+       By default, the 'Payment Method' section is disabled. 
+
+       Enter the billing address details and click **Save**. The payment method section is enabled for input only after the billing address details are provided.
+
+#### View Invoices
+
+Click on the user icon on the top right of the {{config.extra.arcana.dashboard_name}} screen. Select **Invoices** in the dropdown.
+
+![Application Usage Stats Mainnet](/img/an_db_invoices_nav.png){.an-screenshots}
+
+On the **Invoices** page, you will see the details of the current pending dues followed by the billing history of previous invoices that can be downloaded for reference.
+
+![Application Usage Stats Mainnet](/img/an_db_invoices_details.png){.an-screenshots}
+
+#### View Billing Notifications
+
+Click the bell icon to view all notifications for the developer account. Check the [billing notifications]({{page.meta.arcana.root_rel_path}}/concepts/billing.md#notifications) list for details.
+
+![Developer account notifications](/img/an_db_notifications_nav.png){.an-screenshots}
+
+<!---
+
+![Billing methods and details](/img/an_db_billing_method_details.png)
+
+#### View Billing History
+
+Refer to the 'Billing Details' screen. The 'Estimated Charges' section on the bottom displays a link to view the billing history and download invoices.
+
+![Billing history](/img/an_db_billing_history.png)
+
+#### Pay Bills
+
+To pay the Arcana Network dues, developers can refer to the 'Estimated Charges' section on the bottom right of the 'Billing Details' screen. Click **Continue** to view invoice details and pay the bill.
+
+![Pay Dues](/img/an_db_billing_dues.png)
+
+-->
+
 ### Delete Application
 
 To de-register an application the developers must delete the entry using the {{config.extra.arcana.dashboard_name}}. Go to the 'Manage Apps' dashboard page which lists all the registered applications.  
 
-![Manage Apps Dashboard](/img/an_db_manage_apps.png){.an-screenshots}
+![Manage Apps Screen](/img/an_db_manage_apps.png){.an-screenshots}
 
 Select the application you wish to de-register and choose **Delete**.
 

diff --git a/docs/img/an_db_billing_allapps_MAU.png b/docs/img/an_db_billing_allapps_MAU.png
diff --git a/docs/img/an_db_billing_dues.png b/docs/img/an_db_billing_dues.png
diff --git a/docs/img/an_db_billing_history.png b/docs/img/an_db_billing_history.png
diff --git a/docs/img/an_db_billing_method_details.png b/docs/img/an_db_billing_method_details.png
diff --git a/docs/img/an_db_billing_nav.png b/docs/img/an_db_billing_nav.png
diff --git a/docs/img/an_db_billing_profile.gif b/docs/img/an_db_billing_profile.gif
diff --git a/docs/img/an_db_invoices_details.png b/docs/img/an_db_invoices_details.png
diff --git a/docs/img/an_db_invoices_nav.png b/docs/img/an_db_invoices_nav.png
diff --git a/docs/img/an_db_notifications_list.png b/docs/img/an_db_notifications_list.png
diff --git a/docs/img/an_db_notifications_nav.png b/docs/img/an_db_notifications_nav.png
diff --git a/docs/introduction.md b/docs/introduction.md
@@ -17,18 +17,18 @@ Welcome to **{{config.extra.arcana.product_name }}** documentation!
 
 ==}
 
+{{config.extra.arcana.product_name}} consists of two components: 
+
+* {{config.extra.arcana.sdk_name}}
+* {{config.extra.arcana.dashboard_name}}
+
 Use {{config.extra.arcana.product_name}} to easily onboard users to Web3 apps through the familiar Web2 authentication providers. The authenticated users can instantly access the embedded, non-custodial {{config.extra.arcana.wallet_name}} and sign blockchain transactions. 
 
 Designed for developers and Web3 users, {{config.extra.arcana.product_name}} is easy to integrate and offers a simple yet secure, and customizable user experience for signing blockchain transactions. It is powered by cutting-edge cryptographic algorithms and a built-in _distributed key generation subsystem_ that ensures no single entity owns or manages the user's keys. 
 
 !!! note "Already using {{config.extra.arcana.product_name}}?"
 
       {% include "./text-snippets/warn_latest_sdk_version.md" %}
-
- {{config.extra.arcana.product_name}} consists of two components: 
-
-* {{config.extra.arcana.sdk_name}}
-* {{config.extra.arcana.dashboard_name}}
 
 ## {{config.extra.arcana.sdk_name}}
 

diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
@@ -281,4 +281,4 @@ For a complete sample app that addresses polyfill issues - refer to [sources in
 
       While an app is switching over from the default 'app-specific' keys configuration to the 'global keys' configuration, the developer may choose to allow app users to log in before the global features option is approved. Users that log in before the global keys are approved will be assigned 'app-specific' keys. There is some part of key metadata that is stored locally in the authenticated user's device. In this case, once the feature gets **approved**, the user keys are re-assigned. The keys change from 'app-specific' to 'global keys' and this results in new key metadata. There is a mismatch between the keys or {{config.extra.arcana.walket_name}} addresses already in use by the users and the new global keys that are now reconfigured for the app users.  As a result, users will not be able to log in to the app anymore.
 
-      To fix this issue, the user needs to clear the local storage used by the {{config.extra.arcana.wallet_name}} on their device by clearing the browser cache and then attempting another login from a fresh browser window.
+      To fix this issue, the user needs to clear the local storage used by the {{config.extra.arcana.wallet_name}} on their device by clearing the browser cache and then attempting another login from a fresh browser window.
diff --git a/mkdocs.yml b/mkdocs.yml
@@ -115,6 +115,7 @@ nav:
           - Social Providers: concepts/authtype/socialauth.md
           - Custom IAM Providers: concepts/authtype/customauth.md
           - Passwordless: concepts/authtype/pwdless.md
+        - Usage & Billing: concepts/billing.md
         - Dashboard: concepts/dashboard.md
         - DKG:
           - concepts/dkg/index.md
-Original file line number
+Diff line change
@@ Expand Up / @@ -68,4 +68,4 @@ The following billing notifications are displayed: @@
     TBD
     Link the billing errors list here and also link the Troubleshooting guide section on Billing errors.
-    -->
+    -->
Original file line number	Diff line number	Diff line change
Expand Up		@@ -281,4 +281,4 @@ For a complete sample app that addresses polyfill issues - refer to [sources in

		While an app is switching over from the default 'app-specific' keys configuration to the 'global keys' configuration, the developer may choose to allow app users to log in before the global features option is approved. Users that log in before the global keys are approved will be assigned 'app-specific' keys. There is some part of key metadata that is stored locally in the authenticated user's device. In this case, once the feature gets approved, the user keys are re-assigned. The keys change from 'app-specific' to 'global keys' and this results in new key metadata. There is a mismatch between the keys or {{config.extra.arcana.walket_name}} addresses already in use by the users and the new global keys that are now reconfigured for the app users. As a result, users will not be able to log in to the app anymore.

		To fix this issue, the user needs to clear the local storage used by the {{config.extra.arcana.wallet_name}} on their device by clearing the browser cache and then attempting another login from a fresh browser window.
		To fix this issue, the user needs to clear the local storage used by the {{config.extra.arcana.wallet_name}} on their device by clearing the browser cache and then attempting another login from a fresh browser window.