USF-3795: Seller assisted buying

astro.sidebar.mjs

@@ -165,9 +165,9 @@ export function generateSidebar() {
                 { label: 'AEM Assets Integration', link: '/setup/configuration/aem-assets-configuration/' },
                 { label: 'AEM Commerce Prerender', link: '/setup/configuration/aem-prerender/' },
                 { label: 'Content Delivery Network', link: '/setup/configuration/content-delivery-network/' },
+                { label: 'Gated Content', link: '/setup/configuration/gated-content/' },
                 { label: 'CORS Setup', link: '/setup/configuration/cors-setup/' },
                 { label: 'CORS Troubleshooting', link: '/setup/configuration/cors-troubleshooting/' },
-                { label: 'Gated Content', link: '/setup/configuration/gated-content/' },
                 { label: 'Data Export Validation', link: '/setup/discovery/data-export-validation/' },
               ],
             },
@@ -466,6 +466,9 @@ export function generateSidebar() {
                     {
                       label: 'PaymentMethods', link: '/dropins/user-account/containers/payment-methods/',
                     },
+                    { label: 'Seller-Assisted Buying', link: '/dropins/user-account/containers/seller-assisted-buying/' },
+                    { label: 'SellerAssistedBuyingActivity', link: '/dropins/user-account/containers/seller-assisted-buying-activity/' },
+                    { label: 'SellerAssistedBuyingSettings', link: '/dropins/user-account/containers/seller-assisted-buying-settings/' },
                   ],
                 },
               ],
@@ -876,6 +879,7 @@ export function generateSidebar() {
                 { label: 'Return Header', link: '/merchants/blocks/commerce-return-header/' },
                 { label: 'Returns List', link: '/merchants/blocks/commerce-returns-list/' },
                 { label: 'Search Order', link: '/merchants/blocks/commerce-search-order/' },
+                { label: 'Seller-Assisted Buying', link: '/merchants/blocks/seller-assisted-buying/' },
                 { label: 'Shipping Status', link: '/merchants/blocks/commerce-shipping-status/' },
                 { label: 'Wishlist', link: '/merchants/blocks/commerce-wishlist/' },
                 { label: 'Product Details', link: '/merchants/blocks/product-details/' },

src/content/docs/dropins/all/introduction.mdx

@@ -98,4 +98,4 @@ The table below shows every approach with links to the details.
 
 ## What's next
 
-You now know what every drop-in is made of, and which ones are available. The next step is writing the code. [Using drop-ins](/dropins/all/quick-start/) shows the three-line pattern — import the initializer, import a container, render it with a complete working example.
+You now know what every drop-in is made of, and which ones are available. The next step is writing the code. [Using drop-ins](/dropins/all/quick-start/) shows the three-line pattern — import the initializer, import a container, render it with a complete working example.

src/content/docs/dropins/order/containers/order-status.mdx

@@ -7,6 +7,7 @@ sidebar:
 
 import { Aside } from '@astrojs/starlight/components';
 import TableWrapper from '@components/TableWrapper.astro';
+import Diagram from '@components/Diagram.astro';
 
 
 
@@ -62,5 +63,17 @@ await provider.render(OrderStatus, {
 })(block);
 ```
 
+## Administrator-assisted orders
+
+When the seller-assisted buying feature is in use, the `OrderStatus` container shows an "Order placed by an administrator" label when `adminAssistedOrder` is set on the order. The label renders with the CSS class `.order-order-status-content__admin-assisted` and appears automatically. No configuration is required.
+
+<Diagram caption="Order status page showing the administrator label">
+  ![Order status page showing the administrator label](@images/dropins/SAB-OrderStatus.png)
+</Diagram>
+
+To customize the label text, override the `Order.OrderStatusContent.adminAssistedLabel` dictionary key in the order initializer. See the [Order dictionary](/dropins/order/dictionary/) for the key and [Seller-assisted buying](/dropins/user-account/containers/seller-assisted-buying/) for the end-to-end flow.
+
+{/* Verified against adobe-commerce/storefront-order src/components/OrderStatusContent/OrderStatusContent.tsx: adminAssistedOrder (boolean), label key Order.OrderStatusContent.adminAssistedLabel, CSS class .order-order-status-content__admin-assisted; src/i18n/en_US.json (Order.OrderStatusContent.adminAssistedLabel = "Order placed by an administrator"). */}
+
 
 

src/content/docs/dropins/order/dictionary.mdx

@@ -244,6 +244,7 @@ Below are the default English (`en_US`) strings provided by the **Order** drop-i
     },
     "OrderStatusContent": {
       "noInfoTitle": "Check back later for more details.",
+      "adminAssistedLabel": "Order placed by an administrator",
       "returnMessage": "The order was placed on {ORDER_CREATE_DATE} and your return process started on {RETURN_CREATE_DATE}",
       "returnStatus": {
         "pending": "Pending",

src/content/docs/dropins/order/index.mdx

@@ -3,12 +3,16 @@ title: Order overview
 description: Learn about the features and functions of the order drop-in component.
 ---
 
-import { Badge } from '@astrojs/starlight/components';
+import { Aside, Badge } from '@astrojs/starlight/components';
 import OptionsTable from '@components/OptionsTable.astro';
 import Diagram from '@components/Diagram.astro';
 
 The order drop-in component provides a comprehensive set of tools and containers designed to manage and display order-related data across various pages and scenarios. It simplifies the implementation of order management functionality and supports seamless integration with both customer accounts and guest user workflows.
 
+<Aside type="note" title="Part of seller-assisted buying">
+The `OrderStatus` container labels orders placed by an administrator during an assisted session. This label belongs to the cross-drop-in [seller-assisted buying](/dropins/user-account/containers/seller-assisted-buying/) feature. Read that overview first for the end-to-end flow and Admin setup.
+</Aside>
+
 ## Architecture
 
 The order drop-in component consists of multiple containers that display order details on different pages, such as:
@@ -45,3 +49,7 @@ The following table provides an overview of the Adobe Commerce guest user featur
 | View list of orders on the account                               | <Badge text="Supported" variant="tip" />   |
 | View order status                                                | <Badge text="Supported" variant="tip" />   |
 | View return status                                               | <Badge text="Supported" variant="tip" />   |
+
+## See also
+
+- [Seller-assisted buying](/dropins/user-account/containers/seller-assisted-buying/) — extends this drop-in so the `OrderStatus` container labels orders placed by an administrator during an assisted session.

src/content/docs/dropins/user-account/containers/index.mdx

@@ -31,6 +31,9 @@ Containers are pre-built UI components that combine functionality, state managem
 | [CustomerInformation](/dropins/user-account/containers/customer-information/) | Learn about the `CustomerInformation` container. |
 | [OrdersList](/dropins/user-account/containers/orders-list/) | Learn about the `OrdersList` container. |
 | [PaymentMethods](/dropins/user-account/containers/payment-methods/) | List stored payment methods in My Account; shoppers confirm removal in a dialog before the vault token is deleted. |
+| [Seller-assisted buying](/dropins/user-account/containers/seller-assisted-buying/) | End-to-end overview of seller-assisted buying across Auth, Account, and Order drop-ins. |
+| [SellerAssistedBuyingActivity](/dropins/user-account/containers/seller-assisted-buying-activity/) | Show a read-only log of administrator actions taken during seller-assisted buying sessions. |
+| [SellerAssistedBuyingSettings](/dropins/user-account/containers/seller-assisted-buying-settings/) | Let customers enable or disable remote shopping assistance for their account. |
 
 
 </TableWrapper>

src/content/docs/dropins/user-account/containers/orders-list.mdx

@@ -78,3 +78,20 @@ export default async function decorate(block) {
  }
 }
 ```
+
+## Administrator-assisted orders
+
+When the seller-assisted buying feature is in use, the `OrdersList` container shows a "Placed by an administrator" label on any order where `adminAssistedOrder > 0`. The label appears automatically in both the minified and full-size views. No configuration is required.
+
+<Diagram caption="Order card showing the administrator label in the orders list">
+  ![Order card showing the administrator label](@images/dropins/SAB-OrdersList.png)
+</Diagram>
+
+To customize the label text, override the dictionary key in the account initializer:
+
+- Minified view: `Account.minifiedView.OrdersList.OrdersListCard.placedByAdministrator`
+- Full-size view: `Account.fullSizeView.OrdersList.OrdersListCard.placedByAdministrator`
+
+For the end-to-end flow, see [Seller-assisted buying](/dropins/user-account/containers/seller-assisted-buying/).
+
+{/* Verified against adobe-commerce/storefront-account src/components/OrdersListCard/OrdersListCard.tsx: minifiedViewKey = minifiedView ? 'minifiedView' : 'fullSizeView' (line 46) builds Account.${minifiedViewKey}.OrdersList.OrdersListCard.placedByAdministrator (line 54), rendered when adminAssistedOrder > 0 (lines 123-124); src/data/models/order-history-list.ts transforms admin_assisted_order. */}

src/content/docs/dropins/user-account/containers/seller-assisted-buying-activity.mdx

@@ -0,0 +1,61 @@
+---
+title: SellerAssistedBuyingActivity container
+description: Learn about the SellerAssistedBuyingActivity container in the User Account drop-in.
+sidebar:
+  label: SellerAssistedBuyingActivity
+---
+
+import TableWrapper from '@components/TableWrapper.astro';
+import { Aside } from '@astrojs/starlight/components';
+import Diagram from '@components/Diagram.astro';
+
+The `SellerAssistedBuyingActivity` container displays a read-only table of administrator actions recorded during seller-assisted buying sessions. The table shows three columns: action, date, and details. Customers can review what an administrator did on their behalf but cannot modify or delete any records.
+
+This container is part of the seller-assisted buying feature. For the end-to-end flow and Admin setup, see [Seller-assisted buying](/dropins/user-account/containers/seller-assisted-buying/). When remote shopping assistance is disabled at the store level, the container displays a feature-disabled message instead of the table.
+
+<Diagram caption="Administrator activity log showing actions from a seller-assisted buying session">
+  ![Administrator activity log](@images/dropins/SAB-log.png)
+</Diagram>
+
+## Configuration
+
+<TableWrapper nowrap={[0,1]}>
+
+| Parameter | Type | Req? | Description |
+| --------- | ---- | ---- | ----------- |
+| `className` | `string` | No | Custom CSS class applied to the root container element. Merged with the default class. Use to apply brand styles or integrate with a utility CSS framework. |
+| `pageSize` | `number` | No | Number of activity items shown per page. Controls both the GraphQL query page size and UI pagination. Defaults to `10`. Use smaller values (5–10) for mobile-optimized views and larger values (15–25) for desktop auditing scenarios. |
+| `withWrapper` | `boolean` | No | Controls whether the table is wrapped in the default Card component. Defaults to `false`. Set to `true` when you want the drop-in to provide its own card wrapper. |
+
+</TableWrapper>
+
+## Slots
+
+This container does not expose any customizable slots.
+
+## Usage
+
+The boilerplate already includes the `commerce-seller-assisted-buying-activity` block, which renders this container with `withWrapper: false`. No changes are required to place the activity log on a page.
+
+To increase the number of rows shown per page, pass `pageSize` to the render call in the block file:
+
+```js
+await accountRenderer.render(SellerAssistedBuyingActivity, {
+  pageSize: 20,
+  withWrapper: false,
+})(container);
+```
+
+To wrap the table in the drop-in's default Card component, set `withWrapper: true`:
+
+```js
+await accountRenderer.render(SellerAssistedBuyingActivity, {
+  withWrapper: true,
+})(container);
+```
+
+<Aside type="note">
+The container populates its grid with the [`getAdminAssistanceActions`](/dropins/user-account/functions/#getadminassistanceactions) function.
+</Aside>
+
+{/* Verified against @dropins/storefront-account@4.0.0-beta.0 (npm): types/sellerAssistedBuyingActivity.types.d.ts (SellerAssistedBuyingActivityProps: className?, pageSize?, withWrapper? — withWrapper defaults to false per README and package types) and containers/SellerAssistedBuyingActivity/SellerAssistedBuyingActivity.d.ts. Column names (action, date, details) verified against SellerAssistedBuyingActivityTableProps.tableHeaders. */}

src/content/docs/dropins/user-account/containers/seller-assisted-buying-settings.mdx

@@ -0,0 +1,50 @@
+---
+title: SellerAssistedBuyingSettings container
+description: Learn about the SellerAssistedBuyingSettings container in the User Account drop-in.
+sidebar:
+  label: SellerAssistedBuyingSettings
+---
+
+import TableWrapper from '@components/TableWrapper.astro';
+import { Aside } from '@astrojs/starlight/components';
+import Diagram from '@components/Diagram.astro';
+
+The `SellerAssistedBuyingSettings` container lets customers manage their remote shopping assistance preference. It shows a checkbox that enables or disables an administrator's ability to access and manage the customer's shopping session. It also renders an optional tooltip, a dismissible warning when assistance is turned off, and a message when the feature is not available at the store level.
+
+This container is part of the seller-assisted buying feature. For the end-to-end flow and Admin setup, see [Seller-assisted buying](/dropins/user-account/containers/seller-assisted-buying/).
+
+<Diagram caption="Remote shopping assistance consent checkbox">
+  ![Remote shopping assistance consent checkbox](@images/dropins/SAB-Settings.png)
+</Diagram>
+
+## Configuration
+
+<TableWrapper nowrap={[0,1]}>
+
+| Parameter | Type | Req? | Description |
+| --------- | ---- | ---- | ----------- |
+| `className` | `string` | No | Custom CSS class applied to the root container element. Merged with the default class. Use to apply brand styles or integrate with a utility CSS framework. |
+
+</TableWrapper>
+
+## Slots
+
+This container does not expose any customizable slots.
+
+## Usage
+
+The boilerplate already includes the `commerce-seller-assisted-buying-settings` block, which renders this container with no additional configuration. No changes are required to place the preference control on a page.
+
+To apply a custom CSS class to the container root, pass `className` to the render call in the block file:
+
+```js
+await accountRenderer.render(SellerAssistedBuyingSettings, {
+  className: 'my-settings-wrapper',
+})(container);
+```
+
+<Aside type="note">
+Admin-configured values take precedence over dictionary values for the checkbox label and tooltip text. When the Admin has not set custom values at **Stores** > **Settings** > **Configuration** > **Customers** > **Login as Customer**, the container falls back to the dictionary defaults. See [Seller-assisted buying](/dropins/user-account/containers/seller-assisted-buying/).
+</Aside>
+
+{/* Verified against adobe-commerce/storefront-account src/types/sellerAssistedBuyingSettings.types.ts (SellerAssistedBuyingSettingsProps: className?) and src/containers/SellerAssistedBuyingSettings/SellerAssistedBuyingSettings.tsx. */}