DOC-2315: Document the Customer Dashboard feature (#40712)

Author: DariaHanzenko

Diff for: user/back-office/marketing/content-widgets/index.rst

@@ -8,13 +8,14 @@ Manage Content Widgets in the Back-Office
 
 Content widgets are snippets of structured information that you can insert into any WYSIWYG field in your application. :ref:`WYSIWYG fields <getting-started-wysiwyg-editor-field>` are available throughout OroCommerce; for example, in category descriptions, on edit pages of products, content blocks, and landing pages.
 
-There are four content widget types:
+There are six content widget types:
 
 * An Image Slider
-* A Contact Us form
+* A Contact Us Form
 * A Product Mini Block
 * A Product Segment
 * Tabbed Content
+* Customer Dashboard DataGrid
 
 Each of these widget types has a different set of options.
 
@@ -45,7 +46,7 @@ To create a new content widget:
 
 3. Depending on the widget type, form fields are different:
 
-   * **Contact Us Form** - Enables you to add a standard Contact Us form.
+   * **Contact Us Form** - Enables you to add a standard Contact Us form to the Contact Us storefront page. Once the widget is saved, add it to the **Contact Us Form** field under the :ref:`theme configuration <back-office-theme-configuration>`.
 
      .. image:: /user/img/marketing/content_widgets/contact_us.png
         :alt: Contact us content widget form
@@ -86,6 +87,21 @@ To create a new content widget:
      .. image:: /user/img/marketing/content_widgets/injected-widget-new.png
         :alt: Contact us widget embedded in tabbed content widget
 
+.. _content-widgets--dashboard-datagrid-widget:
+
+   * **Customer Dashboard DataGrid** - Enables you to add a structured, table-style (datagrid) widget to the customer user’s :ref:`Dashboard <storefront--dashboard>` page in the My Account section. Each widget presents up to five of the latest records and allows customers to navigate to a dedicated page for full details. You can configure the datagrid widget to display data from one of the following entities:
+
+     * **Latest Orders** – Lists the most recent orders placed by the current **customer user**, including order number, total amount, status, and last update.
+     * **Open Quotes** – Lists open quotes associated with the current **customer**, including quote number, PO number, and expiration date. Depending on the customer user's permissions, they may or may not see quotes from other users within their organization.
+     * **My Checkouts** – Lists ongoing checkout sessions of the current **customer user**, including the number of items, subtotal, and last update. Customers can proceed to checkout directly from this widget.
+     * **Requests for Quote** – Lists the most recent RFQs submitted by the current **customer**, including RFQ number, PO number, status, and last update. Depending on the customer user's permissions, they may or may not see RFQs from other users within their organization.
+     * **My Shopping Lists** – Shows the shopping lists of the current **customer user**, including the shopping list name, the number of items, subtotal, and last update. Users can either edit or view the list based on their permissions.
+
+   Once the widget is saved, add it to the **Customer Dashboard Content Widget** field in the :ref:`theme configuration <back-office-theme-configuration>`.
+
+     .. image:: /user/img/marketing/content_widgets/customer-dashboard-content-widget.png
+        :alt: Illustrating the created 5 content widgets on the customer user’s Dashboard page
+
 4. Once you have provided all widget-specific details, click **Save and Close**.
 
    .. .. image:: /user/img/marketing/content_widgets/widget-view.png

Diff for: user/back-office/system/theme-configuration/index.rst

@@ -18,8 +18,8 @@ To configure your current storefront theme:
 
 4. In the **General** section, configure the following options:
 
-   .. image:: /user/img/system/theme-configuration/theme-configuration.png
-      :alt: Theme configuration details
+   .. image:: /user/img/system/theme-configuration/theme-configuration-general.png
+      :alt: General section of the theme configuration
 
    * **Owner** --- Select the owner responsible for the theme configuration.
    * **Theme** --- Select the storefront theme from the list. The default theme starting from version 6.1 LTS is *Refreshing Teal*. However, if you select one of your backup themes from the previous OroCommerce LTS versions, the settings under the Configuration menu below will become disabled. You can still configure them under the :ref:`theme system configuration <configuration--commerce--design--theme>` settings.
@@ -31,11 +31,39 @@ To configure your current storefront theme:
    * **Description** --- Type a short but meaningful description that can help you and other users understand the specifics of the theme.
    * **Type** --- Select the theme type. Currently, only storefront themes are available for configuration.
 
-5. In the **Configuration** section, customize the following options. You can preview each menu configuration setting to visualize what the option does and where the selected storefront menu will be positioned.
+5. In the **Configuration** section, customize the following options. You can preview several menu configuration setting to visualize what the option does and where the selected storefront menu will be positioned.
+
+   .. image:: /user/img/system/theme-configuration/theme-configuration-config-details.png
+      :alt: Configuration section of the theme configuration
+
+* **Show Quick Access Menu** --- Enable a storefront quick access menu (:ref:`oro_customer_dashboard_quick_access_menu <menu-management-concept-guide--storefront--quick-access>`) on the customer user’s :ref:`Dashboard <storefront--dashboard>` page. You can edit this menu under *System > Storefront Menus* to include shortcuts to key sections.
+
+   .. image:: /user/img/system/theme-configuration/oro-customer-dashboard-quick-access-menu.png
+      :alt: Illustrating the enabled storefront quick access menu on the customer user’s Dashboard page
+
+* **Show Purchase Volume Chart** --- Enable a bar chart to show the customer user’s total purchase volume over the past 12 months on the customer user’s :ref:`Dashboard <storefront--dashboard>` page. The total purchase volume is the sum of all orders placed by or for this customer user (excluding sub-orders and canceled orders).
+
+   .. image:: /user/img/system/theme-configuration/volume-chart.png
+      :alt: Illustrating the enabled Purchase Volume Chart on the customer user`s Dashboard page
+
+* **Customer Dashboard Content Widget (1-6)** --- Select a :ref:`datagrid content widget <content-widgets--dashboard-datagrid-widget>` from the list of predefined widgets to display on the customer user’s :ref:`Dashboard <storefront--dashboard>` page. You can select up to six content widgets. Only the widgets of the **Customer Dashboard DataGrid** type are displayed in the dropdown list. Each widget presents up to five of the latest records in a grid format, with an option to view all other records on a dedicated page.
+
+   .. image:: /user/img/system/theme-configuration/customer-dashboard-content-widgets.png
+      :alt: Illustrating the selected 5 content widgets on the customer user’s Dashboard page
+
+* **Recommended Products (1-2)** --- Select a :ref:`product segment content widget <content-widgets-user-guide>` from the list of predefined widgets to display on the customer user’s :ref:`Dashboard <storefront--dashboard>` page. You can select up to two content widgets. Only the widgets of the **Product Segment** type are displayed in the dropdown list. This widget highlights specific product segments for the customer user.
+
+   .. image:: /user/img/system/theme-configuration/recommended-products-widgets.png
+      :alt: Illustrating the selected 5 content widgets on the customer user’s Dashboard page
+
+* **Promotional Content Block (1-2)** --- Select a :ref:`content block <user-guide--landing-pages--marketing--content-blocks>` from the dropdown list to display on the customer user’s :ref:`Dashboard <storefront--dashboard>` page. You can select up to two content blocks. This section can include important information such as news, blog posts, or other relevant content.
+
+   .. image:: /user/img/system/theme-configuration/dashboard-promotional-block.png
+      :alt: Illustrating the selected 5 content widgets on the customer user’s Dashboard page
 
 * **Promotional Content** --- Select a :ref:`content block <user-guide--landing-pages--marketing--content-blocks>` from the dropdown list to display it at the top of the storefront header.
 
-    .. image:: /user/img/system/theme-configuration/promotional-content-block.png
+    .. image:: /user/img/system/theme-configuration/promotional-content.png
        :alt: Promotional content configuration and representation in the storefront header
 
 * **Top Navigation Menu** --- Select a storefront menu that will be rendered above the header. Please see the :ref:`concept guide on storefront menu items <menu-management-concept-guide>` to learn more about each menu.
@@ -125,6 +153,11 @@ To configure your current storefront theme:
 
        To control whether to hide or disable product attributes within filters, refer to the :ref:`filters and sorting settings <configuration--guide--commerce--configuration--catalog--filters-sorters>` documentation.
 
+* **Contact Us Form** --- Select a :ref:`contact us content widget <content-widgets-user-guide>` from the dropdown list of predefined widgets to display on the Contact Us page. Only the widgets of the **Contact Us Form** type are displayed in the dropdown list.
+
+   .. image:: /user/img/system/theme-configuration/contact-us-form-widget.png
+      :alt: Illustrating the selected contact us widget on the Contact Us page
+
 * **Quantity Inputs in Shopping List** --- Choose how quantity inputs are displayed in the shopping list. Available options are *Plain* (displays a simple input field where users can type the desired quantity manually) and *With Stepper Buttons* (adds ``+`` and ``-`` buttons next to the input field, allowing users to adjust the quantity incrementally).
 
 6. Click **Save Settings**.

Diff for: user/concept-guides/administration/menus/index.rst

@@ -36,6 +36,8 @@ The way the menu looks and behaves on your website depends on the customization
 
 Let's check each of the available menu items individually.
 
+.. _menu-management-concept-guide-storefront:
+
 Storefront Menu Components
 --------------------------
 
@@ -56,6 +58,16 @@ Once you have configured the menu items, you can add them to the selected :ref:`
 .. image:: /user/img/concept-guides/menus/theme-configurations.png
    :alt: Selecting a menu item under Theme configuration
 
+.. _menu-management-concept-guide--storefront--quick-access:
+
+Oro_customer_dashboard_quick_access_menu
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+**Oro_customer_dashboard_quick_access_menu** refers to a customizable quick access menu that appears on the customer user’s :ref:`Dashboard <storefront--dashboard>` page in their **My Account** section. If enabled in the :ref:`theme configuration <back-office-theme-configuration>`, this menu provides customer users with shortcuts to key sections of their account, such as orders, shopping lists, RFQs, quotes, or other important pages. You can edit the menu to include the necessary links, helping customer users navigate their account more efficiently.
+
+.. image:: /user/img/concept-guides/menus/oro-customer-dashboard-quick-access-menu1.png
+   :alt: Illustrating the enabled storefront quick access menu on the customer user’s Dashboard page
+
 
 Frontend_menu
 ^^^^^^^^^^^^^

Diff for: user/img/concept-guides/menus/frontend_menu_list.png

@@ -0,0 +1,18 @@
+.. _storefront--dashboard:
+
+Manage Dashboard in the Storefront
+==================================
+
+The **Dashboard** menu offers a clear and organized overview of a customer user’s key account activities. Designed for convenience, it helps users stay informed about their orders, quotes, checkouts, and more in a single location. Dashboard eliminates the need to navigate through multiple pages by centralizing essential account information, providing quick access, real-time updates, and intuitive navigation for customer users.
+
+Dashboard consists of multiple sections that offer instant access to important account details. The sections are customized in the :ref:`theme configuration <back-office-theme-configuration>` in the back-office.
+
+* **Quick Access Menu** – A customizable menu with shortcuts to frequently used pages like orders, shopping lists, and RFQs.
+* **Latest Orders, Quotes, RFQs, and Checkouts** – A data grid showing recent activities and transactions, allowing customers to quickly review and manage their activity.
+* **Purchase Volume Chart** – A visual breakdown of total purchases over the past 12 months, helping users track their spending.
+* **Recommended Products** – Personalized product suggestions based on the segments configured in the back-office.
+* **Promotional Content** – Important announcements, news, or special offers displayed directly on the dashboard.
+
+.. image:: /user/img/storefront/profile/dashboard_menu.png
+   :alt: Illustration of the Dashboard menu
+

Diff for: user/img/concept-guides/menus/oro-customer-dashboard-quick-access-menu1.png

@@ -16,6 +16,7 @@ To reach the menu details, click **Account** in the user menu on the top left of
 
 Your account menu has the following sections:
 
+* :ref:`Dashboard <storefront--dashboard>` -- provides a quick and organized overview of a customer user’s key account activities.
 * :ref:`My Profile <frontstore-guide--profile>` -- consolidates all your personal contact information and the default addresses you use to provide the billing and shipping locations.
 * :ref:`Conversations <storefront-guide--conversations>` -- enables communication between back-office users and customers users.
 * :ref:`Address Book <frontstore-guide--address>` -- stores both your company and personal addresses.
@@ -34,6 +35,7 @@ Your account menu has the following sections:
    :titlesonly:
    :maxdepth: 1
 
+   Dashboard <dashboard/index>
    My Profile <my-profile/index>
    Address Book <address-book/index>
    Users <users/index>