diff --git a/.github/workflows/validate-b2b-architecture.yml b/.github/workflows/validate-b2b-architecture.yml.disabled similarity index 98% rename from .github/workflows/validate-b2b-architecture.yml rename to .github/workflows/validate-b2b-architecture.yml.disabled index 98c3b5bb1..50d892e4a 100644 --- a/.github/workflows/validate-b2b-architecture.yml +++ b/.github/workflows/validate-b2b-architecture.yml.disabled @@ -39,7 +39,7 @@ jobs: - name: Install dependencies if: success() || failure() - run: npm ci || npm install + run: npm ci --legacy-peer-deps || npm install --legacy-peer-deps - name: Validate B2B enrichments if: success() || failure() diff --git a/B2B-COMMERCE-BLOCKS-REFERENCE.md b/B2B-COMMERCE-BLOCKS-REFERENCE.md new file mode 100644 index 000000000..480db1add --- /dev/null +++ b/B2B-COMMERCE-BLOCKS-REFERENCE.md @@ -0,0 +1,240 @@ +# B2B Commerce Blocks Reference + +This document provides the definitive reference for identifying and verifying B2B commerce blocks across all branches. + +## Block Counts + +- **B2C Commerce blocks**: 24 files +- **B2B Commerce blocks**: 30 files +- **Total Commerce blocks**: 54 files + +## File Locations + +All commerce block documentation files are located in: +``` +src/content/docs/merchants/blocks/ +``` + +## B2B Block Identification Patterns + +B2B commerce blocks follow these naming patterns: + +### 1. Purchase Order blocks (18 files) +Prefix: `commerce-b2b-po-*` and `commerce-b2b-negotiable-quote*` and related +- `commerce-b2b-negotiable-quote.mdx` +- `commerce-b2b-negotiable-quote-template.mdx` +- `commerce-b2b-po-approval-flow.mdx` +- `commerce-b2b-po-approval-rule-details.mdx` +- `commerce-b2b-po-approval-rule-form.mdx` +- `commerce-b2b-po-approval-rules-list.mdx` +- `commerce-b2b-po-checkout-success.mdx` +- `commerce-b2b-po-comment-form.mdx` +- `commerce-b2b-po-comments-list.mdx` +- `commerce-b2b-po-company-purchase-orders.mdx` +- `commerce-b2b-po-customer-purchase-orders.mdx` +- `commerce-b2b-po-header.mdx` +- `commerce-b2b-po-history-log.mdx` +- `commerce-b2b-po-require-approval-purchase-orders.mdx` +- `commerce-b2b-po-status.mdx` +- `commerce-b2b-quote-checkout.mdx` +- `commerce-b2b-requisition-list.mdx` +- `commerce-b2b-requisition-list-view.mdx` + +### 2. Company Management blocks (7 files) +Prefix: `commerce-company-*` +- `commerce-company-accept-invitation.mdx` +- `commerce-company-create.mdx` +- `commerce-company-credit.mdx` +- `commerce-company-profile.mdx` +- `commerce-company-roles-permissions.mdx` +- `commerce-company-structure.mdx` +- `commerce-company-users.mdx` + +### 3. Customer Company blocks (1 file) +- `commerce-customer-company.mdx` + +### 4. Shared B2B blocks (4 files) +These blocks are used by both B2B and B2C contexts but documented as B2B: +- `commerce-account-header.mdx` +- `commerce-account-nav.mdx` +- `commerce-account-sidebar.mdx` +- `commerce-checkout-success.mdx` + +## Verification Commands + +### Count all B2B commerce blocks +```bash +ls -1 src/content/docs/merchants/blocks/ | \ + grep -E "commerce-b2b-|commerce-company-|commerce-customer-company|commerce-checkout-success|commerce-account-header|commerce-account-nav|commerce-account-sidebar" | \ + wc -l +``` +Expected output: `30` + +### List all B2B commerce blocks (sorted) +```bash +ls -1 src/content/docs/merchants/blocks/ | \ + grep -E "commerce-b2b-|commerce-company-|commerce-customer-company|commerce-checkout-success|commerce-account-header|commerce-account-nav|commerce-account-sidebar" | \ + sed 's/.mdx$//' | sort +``` + +### Count all B2C commerce blocks +```bash +ls -1 src/content/docs/merchants/blocks/*.mdx | \ + grep -v "commerce-b2b-\|commerce-company-\|commerce-customer-company\|commerce-checkout-success\|commerce-account-header\|commerce-account-nav\|commerce-account-sidebar" | \ + wc -l +``` +Expected output: `24` + +### Verify sidebar matches files +```bash +# Extract B2B blocks from sidebar +sed -n '/label: .B2B Commerce blocks.,$/,/^ },$/p' astro.sidebar.mjs | \ + grep "link: '/merchants/blocks/" | \ + sed "s/.*'\/merchants\/blocks\/\(.*\)\/'.*/\1/" | \ + sort > /tmp/sidebar-b2b.txt + +# List B2B files +ls -1 src/content/docs/merchants/blocks/ | \ + grep -E "commerce-b2b-|commerce-company-|commerce-customer-company|commerce-checkout-success|commerce-account-header|commerce-account-nav|commerce-account-sidebar" | \ + sed 's/.mdx$//' | sort > /tmp/files-b2b.txt + +# Compare +diff /tmp/sidebar-b2b.txt /tmp/files-b2b.txt +``` +Expected output: No differences (empty output) + +## Sidebar Structure + +The B2B commerce blocks are organized in `astro.sidebar.mjs` under: +``` +Merchants + └── B2B Commerce blocks (collapsed) + ├── Account Header + ├── Account Nav + ├── Account Sidebar + ├── Checkout Success + ├── Company Accept Invitation + ├── Company Create + ├── Company Credit + ├── Company Profile + ├── Company Roles & Permissions + ├── Company Structure + ├── Company Users + ├── Customer Company + ├── Negotiable Quote + ├── Negotiable Quote Template + ├── Purchase Order Approval Flow + ├── Purchase Order Approval Rule Details + ├── Purchase Order Approval Rule Form + ├── Purchase Order Approval Rules List + ├── Purchase Order Checkout Success + ├── Purchase Order Comment Form + ├── Purchase Order Comments List + ├── Purchase Order Company List + ├── Purchase Order Customer List + ├── Purchase Order Header + ├── Purchase Order History Log + ├── Purchase Order Require Approval List + ├── Purchase Order Status + ├── Quote Checkout + ├── Requisition List + └── Requisition List View +``` + +## Branch Consistency + +These 30 B2B commerce blocks must be present and correctly linked in the sidebar across all B2B branches: + +### Release Branches +- `releases/b2b-nov-release` +- `releases/b2b-infrastructure` +- `releases/b2b-docs-only` + +### Feature Branches +- `b2b-docs-company-management-v2` +- `b2b-docs-company-switcher-v2` +- `b2b-docs-purchase-order` (merged to release) +- `b2b-docs-quote-management-v2` +- `b2b-docs-requisition-list-v3` + +### Preview Branch +- `b2b-preview` (GitHub Pages deployment) + +## Common Issues and Solutions + +### Issue: Missing blocks in sidebar +**Symptom**: Build fails with "Failed to find the topic for" errors +**Solution**: Verify all 30 blocks are listed in the "B2B Commerce blocks" section of `astro.sidebar.mjs` + +### Issue: Incorrect block count +**Symptom**: Verification commands show count ≠ 30 +**Solution**: Run the verification commands above to identify missing or extra files + +### Issue: Orphaned block pages +**Symptom**: Build fails with "Failed to find the topic" for a specific block +**Solution**: Either add the block to the sidebar or delete the file if it shouldn't exist + +### Issue: Invalid links to blocks +**Symptom**: Build fails with "invalid links" errors +**Solution**: Ensure all sidebar links follow the pattern `/merchants/blocks/[block-name]/` + +## Regeneration Workflow + +When regenerating documentation for B2B branches: + +1. **Verify B2B blocks are present**: + ```bash + ls -1 src/content/docs/merchants/blocks/ | grep -E "commerce-b2b-|commerce-company-|commerce-customer-company|commerce-checkout-success|commerce-account-header|commerce-account-nav|commerce-account-sidebar" | wc -l + ``` + Should return: `30` + +2. **Verify sidebar entries**: + ```bash + sed -n '/label: .B2B Commerce blocks.,$/,/^ },$/p' astro.sidebar.mjs | grep "label:" | grep -v "B2B Commerce blocks" | wc -l + ``` + Should return: `30` + +3. **Run build test**: + ```bash + pnpm run build:prod-fast + ``` + Should complete with zero errors. + +## Architecture Notes + +### Why These Patterns? + +The B2B block identification patterns are based on: +1. **Source repository structure**: Blocks are organized by feature area (Purchase Order, Company Management, etc.) +2. **Naming conventions**: Adobe Commerce uses prefixes to indicate feature scope +3. **Historical context**: Some blocks (`commerce-account-*`, `commerce-checkout-success`) are shared between B2B and B2C but documented in the B2B section + +### B2B vs B2C Separation + +- **B2C blocks** (24): Core commerce functionality for all customers +- **B2B blocks** (30): Business-specific features (Purchase Orders, Company Management, Requisition Lists) +- **Sidebar separation**: Two distinct sections prevent confusion and improve navigation + +### File Restoration + +The 30 B2B commerce blocks were restored from git history (`45dd67bb~1`) on 2024-12-19 after being inadvertently removed during a merge from the `develop` branch. The restoration ensures: +- Complete B2B feature documentation +- Proper sidebar navigation structure +- Zero build errors on `b2b-preview` branch +- Consistent documentation across all B2B branches + +## Last Verified + +- **Date**: 2024-12-19 +- **Branch**: `b2b-preview` +- **Files**: 30 B2B blocks present and correctly linked +- **Build**: Passed with zero errors +- **Command**: `pnpm run build:prod-fast` + +## Related Documentation + +- `B2B-SIDEBAR-AND-BLOCKS-FIXED.md` - Complete fix documentation +- `B2B-PREVIEW-WORKFLOW.md` - Branch workflow and merge strategy +- `B2B-WORKFLOW-GUIDE.md` - Overall B2B documentation workflow +- `astro.sidebar.mjs` - Sidebar configuration (lines 723-757) + diff --git a/SIDEBAR-CONTAMINATION-ANALYSIS.md b/SIDEBAR-CONTAMINATION-ANALYSIS.md new file mode 100644 index 000000000..f088c8915 --- /dev/null +++ b/SIDEBAR-CONTAMINATION-ANALYSIS.md @@ -0,0 +1,296 @@ +# Sidebar Contamination Analysis + +**Date**: 2024-12-19 +**Current Branch**: b2b-preview + +## Summary + +The sidebar on `b2b-preview` (and all B2B branches) contains a **nested "B2C drop-ins" structure** that came from the `develop` branch. This is the contamination you identified. + +## The Contamination: Nested "B2C drop-ins" Structure + +### What It Looks Like Now (Lines 145-480) + +``` +Drop-ins (expanded) +├── Overview +├── Extend or create? +├── Using drop-ins +├── Commerce blocks +├── Styling +├── Branding +├── Labeling and Localization +├── Localizing Links +├── Dictionaries +├── Slots +├── Layouts +├── Events +├── Common events +├── Extending +├── Creating +└── B2C drop-ins (collapsed) ← THIS IS THE CONTAMINATION + ├── Overview + ├── Cart + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ └── Containers (11 containers) + ├── Checkout + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ ├── Tutorials (6 tutorials) + │ └── Containers (14 containers) + ├── Order + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ └── Containers (8 containers) + ├── Payment Services + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ └── Containers (1 container) + ├── Personalization + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ └── Containers (2 containers) + ├── Product Details + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ └── Containers (3 containers) + ├── Product Discovery + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ └── Containers (2 containers) + ├── Recommendations + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ └── Containers (1 container) + ├── User Account + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ └── Containers (6 containers) + ├── User Authentication + │ ├── Overview + │ ├── Quick Start + │ ├── Initialization + │ ├── Slots + │ ├── Styles + │ ├── Functions + │ ├── Events + │ ├── Dictionary + │ └── Containers (5 containers) + └── Wishlist + ├── Overview + ├── Quick Start + ├── Initialization + ├── Slots + ├── Styles + ├── Functions + ├── Events + ├── Dictionary + └── Containers (2 containers) +``` + +## Current Full Sidebar Structure (3 Drop-ins Sections) + +``` +1. Drop-ins (lines 145-480) ← Contains nested "B2C drop-ins" + ├── 15 overview/common pages + └── B2C drop-ins (nested, 11 dropins) ← CONTAMINATION + +2. Drop-ins for B2B (lines 481-564) + ├── Overview + ├── Company Management (9 pages) + ├── Company Switcher (9 pages) + ├── Purchase Order (9 pages) + ├── Quote Management (9 pages) + └── Requisition List (9 pages) + +3. Drop-ins SDK (lines 565-end) + ├── SDK introduction + ├── SDK CLI usage + ├── SDK components (37 components) + ├── SDK design (7 pages) + └── SDK reference (5 pages) +``` + +## What This Means + +### The Problem +The "B2C drop-ins" nested structure in the first "Drop-ins" section creates: +1. **Organizational confusion**: B2C dropins are nested under "Drop-ins" > "B2C drop-ins" instead of being at the top level +2. **Asymmetry**: B2B dropins are in a separate top-level section "Drop-ins for B2B" +3. **Navigation inconsistency**: Users have to understand that B2C dropins are nested while B2B dropins are separate + +### How It Got There +This structure came from the `develop` branch, which reorganized the sidebar to: +- Group all B2C dropins under a nested "B2C drop-ins" subsection +- Keep B2B dropins in a separate top-level "Drop-ins for B2B" section + +This develop structure was merged into the B2B branches, contaminating them with the B2C organizational changes. + +## What Should The B2B Branches Have? + +**Option A: Pure B2B Structure (No B2C Dropins)** +``` +1. Drop-ins (Overview/Common pages only) + ├── Overview + ├── Extend or create? + ├── Using drop-ins + ├── Commerce blocks + ├── Styling + ├── Branding + ├── Labeling and Localization + ├── Localizing Links + ├── Dictionaries + ├── Slots + ├── Layouts + ├── Events + ├── Common events + ├── Extending + └── Creating + +2. Drop-ins for B2B + ├── Overview + ├── Company Management (9 pages) + ├── Company Switcher (9 pages) + ├── Purchase Order (9 pages) + ├── Quote Management (9 pages) + └── Requisition List (9 pages) + +3. Drop-ins SDK + [SDK content as-is] +``` + +**Option B: Keep B2C Dropins But Flatten Structure** +``` +1. Drop-ins + ├── Overview + ├── Extend or create? + [... common pages ...] + ├── Cart (flatten, not nested under "B2C drop-ins") + ├── Checkout + ├── Order + [... all 11 B2C dropins at this level ...] + └── Wishlist + +2. Drop-ins for B2B + [B2B dropins as-is] + +3. Drop-ins SDK + [SDK as-is] +``` + +**Option C: Unified Structure (B2C and B2B Together)** +``` +1. Drop-ins + ├── Overview + ├── Extend or create? + [... common pages ...] + ├── Cart (B2C) + ├── Checkout (B2C) + ├── Company Management (B2B) + ├── Company Switcher (B2B) + [... all dropins mixed alphabetically ...] + └── Wishlist (B2C) + +2. Drop-ins SDK + [SDK as-is] +``` + +## Recommendations + +### For B2B Preview Branch +**Recommended: Option A (Pure B2B Structure)** + +**Reasoning**: +1. B2B preview is for B2B reviewers - they don't need B2C dropin documentation +2. Keeps the preview focused and clean +3. Removes ~330 lines of nested B2C structure from sidebar +4. Makes the sidebar simpler and faster to navigate +5. Aligns with the purpose of having separate "Drop-ins" vs "Drop-ins for B2B" sections + +**Implementation**: +Remove the entire nested "B2C drop-ins" subsection (lines ~167-478) from the first "Drop-ins" section, leaving only the 15 overview/common pages. + +### Impact on File Count +- **Current**: 481 pages built +- **After removing B2C dropins**: ~230 pages (B2B dropins + common + infrastructure) +- **Reduction**: ~250 pages (all B2C dropin pages) + +## Next Steps + +1. **Decide which option** (A, B, or C) is correct for B2B branches +2. **Remove the contamination** from all 8 B2B branches +3. **Document the correct structure** for future regeneration +4. **Update the workflow** to prevent develop contamination in the future + +## Files to Modify + +If choosing Option A (Pure B2B Structure): +- `astro.sidebar.mjs` on all 8 B2B branches +- Remove lines ~167-478 (the nested "B2C drop-ins" subsection) +- Keep lines 145-165 (overview/common pages) +- Keep lines 481-564 (B2B dropins section) + +## Verification + +After making changes, verify: +1. Build passes on all branches +2. Navigation makes sense for B2B reviewers +3. All B2B dropin pages are accessible +4. No orphaned pages or broken links + + diff --git a/_dropin-enrichments/quote-management/containers.json b/_dropin-enrichments/quote-management/containers.json new file mode 100644 index 000000000..208984a22 --- /dev/null +++ b/_dropin-enrichments/quote-management/containers.json @@ -0,0 +1,420 @@ +{ + "ItemsQuoted": { + "description": "The ItemsQuoted container displays a summary of items that have been quoted, providing a quick overview of quoted products. It shows product information and pricing, quantity and discount details, subtotal calculations, and action buttons for quote management. The component includes responsive design for mobile and desktop viewing.", + "features": [ + "Product information and pricing display", + "Quantity and discount details", + "Subtotal calculations", + "Action buttons for quote management", + "Responsive design for mobile and desktop" + ], + "parameters": { + "quoteData": { + "description": "Quote data object. Auto-populated from drop-in state when omitted." + }, + "onItemCheckboxChange": { + "description": "Callback when item checkbox is toggled. Use for tracking selections or custom validation." + }, + "onItemDropdownChange": { + "description": "Callback when item action dropdown changes. Use for custom action handling or analytics." + }, + "onUpdate": { + "description": "Callback on form submission (quantity/note updates). Use for custom validation or tracking." + }, + "onRemoveItemsRef": { + "description": "Provides access to internal item removal handler. Use for custom removal workflows." + }, + "onRemoveModalStateChange": { + "description": "Callback when remove confirmation modal opens/closes. Use for tracking or custom modal logic." + } + } + }, + "ItemsQuotedTemplate": { + "description": "The ItemsQuotedTemplate container displays items stored in a quote template for reuse in future quote requests.", + "parameters": { + "templateData": { + "description": "Template data object. Auto-populated from drop-in state when omitted." + } + } + }, + "ManageNegotiableQuote": { + "description": "The ManageNegotiableQuote container provides comprehensive quote management capabilities for existing quotes. It displays quote details (creation date, sales rep, expiration), manages quote status and updates, shows the product list with pricing and quantity controls, provides quote actions (print, copy, delete, send for review), displays shipping information, and includes a quote comments section. All actions respect permission-based access control.", + "features": [ + "Quote details display (creation date, sales rep, expiration)", + "Quote status management and updates", + "Product list with pricing and quantity controls", + "Quote actions (print, copy, delete, send for review)", + "Shipping information display", + "Quote comments section", + "Permission-based action availability" + ], + "parameters": { + "maxFiles": { + "description": "Sets the maximum number of files that can be attached when sending a quote for review. Enforces company policies on attachment limits and prevents excessive file uploads that could impact performance or storage." + }, + "maxFileSize": { + "description": "Sets the maximum file size in bytes for attachments. Controls the upper limit for individual file uploads. Use to prevent large file uploads that could impact performance, storage, or network bandwidth." + }, + "acceptedFileTypes": { + "description": "Specifies an array of MIME types allowed for file attachments (for example \\`['application/pdf', 'image/jpeg', 'image/png']\\`). Use to restrict uploads to specific document types required by your quote approval process." + }, + "onActionsDropdownChange": { + "description": "Callback function triggered when actions dropdown change" + }, + "onActionsButtonClick": { + "description": "Callback function triggered when actions button click" + }, + "onSendForReview": { + "description": "Callback function triggered when send for review" + }, + "onDuplicateQuote": { + "description": "Callback function triggered when duplicate quote" + } + }, + "slots": { + "QuoteName": { + "description": "Customize the quote name display and rename functionality. Use to add custom icons, styling, or additional metadata next to the quote name." + }, + "QuoteStatus": { + "description": "Customize how the quote status is displayed. Use to add custom status badges, colors, or additional status information." + }, + "Banner": { + "description": "Customize the alert banner shown for specific quote states (submitted, pending, expired). Use to provide custom messaging or styling for different quote statuses." + }, + "Details": { + "description": "Customize the quote metadata display (created date, sales rep, expiration). Use to add additional fields, reorder information, or apply custom formatting." + }, + "ActionBar": { + "description": "Customize the action buttons and dropdown menu for quote operations. Use to add custom actions, reorder existing actions, or integrate with external systems." + }, + "QuoteContent": { + "description": "Customize the entire tabbed content area containing items, comments, and history. Use to add new tabs, reorder tabs, or completely replace the tabbed interface." + }, + "ItemsQuotedTab": { + "description": "Customize the Items Quoted tab content. Use to add additional product information, custom filtering, or integrate with inventory systems." + }, + "CommentsTab": { + "description": "Customize the Comments tab displaying quote discussions. Use to add custom comment filters, sorting, or rich text formatting." + }, + "HistoryLogTab": { + "description": "Customize the History Log tab showing quote activity. Use to add custom filtering, grouping by action type, or export functionality." + }, + "ShippingInformationTitle": { + "description": "Customize the shipping section heading. Use to add icons, tooltips, or additional contextual information about shipping requirements." + }, + "ShippingInformation": { + "description": "Customize the shipping address display and selection. Use to integrate with third-party shipping services, add address validation, or provide custom address formatting." + }, + "QuoteCommentsTitle": { + "description": "Customize the quote comments section heading. Use to add help text, character limits, or formatting guidelines." + }, + "QuoteComments": { + "description": "Customize the comment input field. Use to add rich text editing, @mentions, file attachments inline, or comment templates." + }, + "AttachFilesField": { + "description": "Customize the file attachment input control. Use to integrate with document management systems, add drag-and-drop functionality, or provide custom file previews." + }, + "AttachedFilesList": { + "description": "Customize how attached files are displayed. Use to add file previews, virus scanning status, or integration with external document viewers." + }, + "Footer": { + "description": "Customize the Send for Review button and footer actions. Use to add additional submission options, validation steps, or approval workflow controls." + } + } + }, + "ManageNegotiableQuoteTemplate": { + "description": "The ManageNegotiableQuoteTemplate container provides the interface for managing quote templates with template-specific actions and details.", + "parameters": { + "onActionsButtonClick": { + "description": "Callback function triggered when actions button click" + }, + "onSendForReview": { + "description": "Callback function triggered when send for review" + } + } + }, + "OrderSummary": { + "description": "The OrderSummary container displays a comprehensive pricing breakdown for quotes including subtotal calculations, applied discounts, tax information, and grand total. This component provides transparency in quote pricing.", + "features": [ + "Subtotal calculations", + "Applied discounts display", + "Tax information", + "Grand total display" + ], + "parameters": { + "showTotalSaved": { + "description": "Shows/hides total savings amount." + }, + "updateLineItems": { + "description": "Callback to transform line items before display. Use for custom line item logic." + } + } + }, + "OrderSummaryLine": { + "description": "The OrderSummaryLine container renders individual line items within the order summary such as subtotal, shipping, or tax rows.", + "parameters": { + "label": { + "description": "Yes | Label text or component for the line item." + }, + "price": { + "description": "Price component for the line item." + }, + "classSuffixes": { + "description": "Provides an array of CSS class suffixes for styling variants. Use to apply different visual styles to order summary line items based on their type or context." + }, + "labelClassSuffix": { + "description": "CSS class suffix specifically for the label." + }, + "testId": { + "description": "Test ID for automated testing." + }, + "children": { + "description": "Child elements to render within the container" + } + } + }, + "QuoteCommentsList": { + "description": "The QuoteCommentsList container displays all comments and communications between buyer and seller for a negotiable quote.", + "parameters": { + "quoteData": { + "description": "Quote data object. Auto-populated from drop-in state when omitted." + } + } + }, + "QuoteHistoryLog": { + "description": "The QuoteHistoryLog container shows the complete history of actions, status changes, and updates for a quote throughout its lifecycle.", + "parameters": { + "quoteData": { + "description": "Quote data object. Auto-populated from drop-in state when omitted." + } + } + }, + "QuoteSummaryList": { + "description": "The QuoteSummaryList container displays quote metadata including quote ID, status, dates, buyer information, and shipping details.", + "parameters": { + "hideHeading": { + "description": "Hides the list heading when true." + }, + "hideFooter": { + "description": "Hides item footers when true." + }, + "routeProduct": { + "description": "Generates product detail URLs. Receives item data as a parameter and returns a URL string. Use to create links to product pages, add query parameters, or integrate with your application's product routing system." + }, + "showMaxItems": { + "description": "Shows maximum item count indicator when true." + }, + "attributesToHide": { + "description": "Specifies an array of product attributes to hide from display. Use to customize which product attributes are visible in the quote summary, reducing visual clutter or focusing on specific attribute types." + }, + "accordion": { + "description": "Enables accordion-style collapsible items when true." + }, + "variant": { + "description": "No | Visual variant (primary or secondary)." + }, + "showDiscount": { + "description": "Shows discount information when true." + }, + "showSavings": { + "description": "Shows savings amount when true." + } + }, + "slots": { + "Heading": { + "description": "Customize the heading displaying the item count. Receives the total quantity and quote ID. Use to add custom branding, icons, or additional quote metadata in the header." + }, + "Footer": { + "description": "Customize the footer section below individual quote items. Receives the item data. Use to add custom actions like add to cart, remove, or item-specific notes for each line item." + }, + "Thumbnail": { + "description": "Customize the product image display for each item. Receives the item and default image props. Use to add image overlays, badges for discounted items, or custom image loading behavior." + }, + "ProductAttributes": { + "description": "Customize how product attributes (size, color) are displayed for each item. Receives the item data. Use to add custom formatting, grouping, or additional attribute information." + }, + "QuoteSummaryFooter": { + "description": "Customize the View More button and footer actions for the entire quote list. Receives the display state. Use to add additional actions like export to PDF or email quote." + }, + "QuoteItem": { + "description": "Customize the entire quote item row. Receives comprehensive item data and formatting functions. Use for complete control over item rendering, such as custom layouts for mobile versus desktop." + }, + "ItemTitle": { + "description": "Customize the product title display for each item. Receives the item data. Use to add product badges, custom linking, or additional product information inline with the title." + }, + "ItemPrice": { + "description": "Customize the unit price display for each item. Receives the item data. Use to add price comparison, original pricing with strikethrough, or custom currency formatting." + }, + "ItemTotal": { + "description": "Customize the line total display for each item. Receives the item data. Use to add savings calculations, tax breakdowns, or custom total formatting with discounts highlighted." + }, + "ItemSku": { + "description": "Customize the SKU display for each item. Receives the item data. Use to add copy-to-clipboard functionality, links to product pages, or custom SKU formatting." + } + } + }, + "QuoteTemplateCommentsList": { + "description": "The QuoteTemplateCommentsList container displays all comments associated with a quote template.", + "parameters": { + "quoteData": { + "description": "The quote template data object containing the comments history. Required to display discussions and notes related to the template that can be reused across multiple quote requests." + }, + "templateData": { + "description": "Template data object. Auto-populated from drop-in state when omitted." + } + } + }, + "QuoteTemplateHistoryLog": { + "description": "The QuoteTemplateHistoryLog container shows the complete history of changes and updates for a quote template.", + "parameters": { + "quoteData": { + "description": "The quote template data object containing the history log. Required to track when the template was created, modified, used, or archived for audit and governance purposes." + }, + "templateData": { + "description": "Template data object. Auto-populated from drop-in state when omitted." + } + } + }, + "QuoteTemplatesListTable": { + "description": "The QuoteTemplatesListTable container displays all quote templates in a paginated table with search, filter, and action capabilities.", + "parameters": { + "pageSize": { + "description": "Sets the number of items displayed per page for pagination. Controls how many quote template items appear in each page view. Use to optimize display for different screen sizes or match user preferences." + }, + "showItemRange": { + "description": "Shows item range indicator when true." + }, + "showPageSizePicker": { + "description": "Shows page size selector when true." + }, + "showPagination": { + "description": "Shows pagination controls when true." + }, + "onViewQuoteTemplate": { + "description": "Callback when viewing a template. Receives template ID, name, and status." + }, + "onGenerateQuoteFromTemplate": { + "description": "Callback when generating quote from template. Receives template and quote IDs." + }, + "onPageSizeChange": { + "description": "Callback when page size changes." + }, + "onPageChange": { + "description": "Callback when page changes." + } + } + }, + "QuotesListTable": { + "description": "The QuotesListTable container displays a comprehensive list of quotes with advanced filtering, sorting, and management capabilities. It includes quote list display with status indicators, pagination and sorting controls, search and filtering options, bulk actions for multiple quotes, quote selection and navigation, and responsive table design.", + "features": [ + "Quote list display with status indicators", + "Pagination and sorting controls", + "Search and filtering options", + "Bulk actions for multiple quotes", + "Quote selection and navigation", + "Responsive table design" + ], + "parameters": { + "pageSize": { + "description": "Sets the number of items displayed per page for pagination. Controls how many quote items appear in each page view. Use to optimize display for different screen sizes or match user preferences." + }, + "showItemRange": { + "description": "Shows item range indicator when true." + }, + "showPageSizePicker": { + "description": "Shows page size selector when true." + }, + "showPagination": { + "description": "Shows pagination controls when true." + }, + "onViewQuote": { + "description": "Callback when viewing a quote. Receives quote ID, name, and status." + }, + "onPageSizeChange": { + "description": "Callback when page size changes." + }, + "onPageChange": { + "description": "Callback when page changes." + } + } + }, + "RequestNegotiableQuoteForm": { + "description": "The RequestNegotiableQuoteForm container enables customers to request new negotiable quotes from their cart contents. This component handles quote name and comment input, draft saving functionality, form validation and error handling, and success/error messaging. It includes support for file attachments and integrates with cart contents.", + "features": [ + "Quote name and comment input fields", + "Form validation with error handling", + "Draft saving functionality", + "Success/error messaging", + "Integration with cart contents", + "Authentication checks" + ], + "parameters": { + "cartId": { + "description": "Specifies the cart ID to create the quote from. Required to identify which shopping cart contains the items to be quoted." + }, + "maxFiles": { + "description": "Sets the maximum number of files that can be attached when sending a quote for review. Enforces company policies on attachment limits and prevents excessive file uploads that could impact performance or storage." + }, + "maxFileSize": { + "description": "Sets the maximum file size in bytes for attachments. Controls the upper limit for individual file uploads. Use to prevent large file uploads that could impact performance, storage, or network bandwidth." + }, + "acceptedFileTypes": { + "description": "Specifies an array of allowed MIME types for file attachments. Use to restrict uploads to specific document types required by your quote approval process (for example, \\`['application/pdf', 'image/jpeg', 'image/png']\\`)." + } + }, + "slots": { + "ErrorBanner": { + "description": "Customize the error message display when quote submission fails. Receives the error message. Use to add custom error tracking, retry mechanisms, or support contact information." + }, + "SuccessBanner": { + "description": "Customize the success message display after quote submission. Receives the success message. Use to add next steps, links to the quote details page, or custom celebration animations." + }, + "Title": { + "description": "Customize the form heading. Receives the title text. Use to add custom branding, help icons, or contextual information about the quote process." + }, + "CommentField": { + "description": "Customize the comment input field. Receives form state and error handlers. Use to add character counters, rich text editing, comment templates, or AI-assisted comment generation." + }, + "QuoteNameField": { + "description": "Customize the quote name input field. Receives form state and error handlers. Use to add auto-naming logic based on cart contents, validation rules, or naming conventions specific to your organization." + }, + "AttachFileField": { + "description": "Customize the file attachment input control. Receives upload handler and form state. Use to add drag-and-drop functionality, file previews, or integration with document management systems." + }, + "AttachedFilesList": { + "description": "Customize how attached files are displayed. Receives the file list and removal handler. Use to add file previews, virus scanning status, download links, or file metadata display." + }, + "RequestButton": { + "description": "Customize the primary submit button for requesting a quote. Receives the submission handler and form state. Use to add confirmation dialogs, custom loading states, or multi-step submission workflows." + }, + "SaveDraftButton": { + "description": "Customize the draft save button for saving incomplete quote requests. Receives the save handler and form state. Use to add auto-save functionality, draft naming conventions, or draft management interfaces." + } + } + }, + "ShippingAddressDisplay": { + "description": "The ShippingAddressDisplay container shows the selected shipping address for a quote with options to change or add new addresses. This component integrates with the company address book for B2B customers.", + "parameters": { + "shippingAddress": { + "description": "Provides the shipping address object to display for the quote. Contains address details such as street, city, region, postal code, and country. Required to render the address information in the container." + }, + "loading": { + "description": "Controls the loading state of the container. Shows a loading indicator when set to `true` while address data is being fetched or processed. Use to provide visual feedback during async operations." + } + } + }, + "integration": { + "description": "These containers are designed to work together to provide a complete quote management experience. Use RequestNegotiableQuoteForm on cart pages or product pages to initiate quote requests, ManageNegotiableQuote on dedicated quote management pages for comprehensive quote handling, ItemsQuoted on quote summary pages or as a sidebar component, and QuotesListTable on quotes listing pages for browsing and managing multiple quotes." + }, + "customization": { + "description": "Each container can be customized through configuration props passed to the container, slots for content areas that can be customized with your own components, events as callback functions for handling user interactions, and styles through CSS customization for visual appearance." + }, + "best_practices": [ + "Use RequestNegotiableQuoteForm on cart pages to enable easy quote requests", + "Implement ManageNegotiableQuote on dedicated quote management pages", + "Use ItemsQuoted as a summary component in quote lists or sidebars", + "Handle errors gracefully with appropriate callback functions", + "Ensure proper authentication checks before rendering containers", + "Test all quote workflows thoroughly in your B2B environment" + ] +} diff --git a/astro.redirects.mjs b/astro.redirects.mjs new file mode 100644 index 000000000..a92d9f29a --- /dev/null +++ b/astro.redirects.mjs @@ -0,0 +1,172 @@ +/** + * Site-wide redirects configuration + * + * This file maintains all URL redirects for the Adobe Commerce Storefront documentation. + * Redirects are organized by category for easier maintenance. + * + * @returns {Object} Redirects object keyed by old path, valued by new path + */ + +/** + * Generate redirects with base path prefix + * @param {string} basePath - The base path to prefix redirects with + * @returns {Object} Complete redirects object + */ +export function generateRedirects(basePath) { + return { + // ========= CUSTOMIZE REDIRECTS ========= + '/customize/design-tokens': `${basePath}/dropins/all/branding`, + '/customize/enrich': `${basePath}/dropins/all/enriching`, + '/customize/localize': `${basePath}/dropins/all/localizing`, + '/customize/slots': `${basePath}/dropins/all/extending`, + '/customize/style': `${basePath}/dropins/all/styling`, + '/customize': `${basePath}/dropins/all/introduction`, + + // ========= DROP-INS REDIRECTS ========= + '/dropins/all/installing': `${basePath}/dropins/all/quick-start`, + '/dropins/all/anatomy': `${basePath}/dropins/all/introduction`, + '/dropins/all/enriching': `${basePath}/merchants/get-started/enrichment`, + '/dropins/all/experimenting': `${basePath}/merchants/get-started/experiments`, + '/dropins/all/localizing': `${basePath}/dropins/all/labeling`, + '/dropins/all/eventbus': `${basePath}/dropins/all/events`, + + // Cart drop-in + '/dropins/cart/cart-introduction': `${basePath}/dropins/cart`, + '/dropins/cart/cart-installation': `${basePath}/dropins/cart/quick-start`, + '/dropins/cart/cart-styles': `${basePath}/dropins/cart/styles`, + '/dropins/cart/cart-containers': `${basePath}/dropins/cart/containers`, + '/dropins/cart/cart-slots': `${basePath}/dropins/cart/slots`, + '/dropins/cart/cart-functions': `${basePath}/dropins/cart/functions`, + '/dropins/cart/cart-dictionary': `${basePath}/dropins/cart/dictionary`, + '/dropins/cart/installation': `${basePath}/dropins/cart/quick-start`, + + // Cart tutorials + '/dropins/cart/tutorials/add-inline-messages-to-mini-cart': `${basePath}/dropins/cart/tutorials/add-messages-to-mini-cart`, + '/dropins/cart/tutorials/add-overlay-messages-to-mini-cart': `${basePath}/dropins/cart/tutorials/add-messages-to-mini-cart`, + + // Checkout drop-in + '/dropins/checkout/checkout-introduction': `${basePath}/dropins/checkout`, + '/dropins/checkout/installation': `${basePath}/dropins/checkout/quick-start`, + + // Order drop-in + '/dropins/order/order-dictionary': `${basePath}/dropins/order/dictionary`, + '/dropins/order/installation': `${basePath}/dropins/order/quick-start`, + + // Product Details drop-in + '/product-details/pdp-containers': `${basePath}/dropins/product-details/containers`, + '/product-details/pdp-functions': `${basePath}/dropins/product-details/functions`, + '/product-details/pdp-installation': `${basePath}/dropins/product-details/quick-start`, + '/product-details/pdp-introduction': `${basePath}/dropins/product-details/`, + '/product-details/pdp-styles': `${basePath}/dropins/product-details/styles`, + '/dropins/product-details/installation': `${basePath}/dropins/product-details/quick-start`, + + // Product Discovery drop-in + '/dropins/product-discovery/containers/product-list': `${basePath}/dropins/product-discovery/containers/search-results`, + '/dropins/product-discovery/containers/results-info': `${basePath}/dropins/product-discovery/containers/pagination`, + '/dropins/product-discovery/containers/search-bar-input': `${basePath}/dropins/product-discovery`, + '/dropins/product-discovery/containers/search-bar-results': `${basePath}/dropins/product-discovery`, + '/dropins/product-discovery/installation': `${basePath}/dropins/product-discovery/quick-start`, + + // Other drop-ins + '/dropins/personalization/installation': `${basePath}/dropins/personalization/quick-start`, + '/dropins/recommendations/installation': `${basePath}/dropins/recommendations/quick-start`, + '/dropins/user-account/useraccount-introduction': `${basePath}/dropins/user-account`, + '/dropins/user-account/installation': `${basePath}/dropins/user-account/quick-start`, + '/dropins/user-auth/userauth-introduction': `${basePath}/dropins/user-auth`, + '/dropins/user-auth/installation': `${basePath}/dropins/user-auth/quick-start`, + '/dropins/wishlist/installation': `${basePath}/dropins/wishlist/quick-start`, + + // Drop-in category redirects + '/dropins/other/recommendations': `${basePath}/dropins/recommendations`, + '/dropins/other/search': `${basePath}/dropins/product-discovery`, + + // ========= GET STARTED REDIRECTS ========= + '/get-started/launch-checklist': `${basePath}/launch`, + '/get-started/requirements': `${basePath}/get-started/architecture`, + '/get-started/boilerplate-project': `${basePath}/boilerplate/getting-started`, + '/get-started/working-with-boilerplate': `${basePath}/boilerplate/getting-started`, + '/get-started/update-boilerplate': `${basePath}/boilerplate/updates`, + '/get-started/configurations': `${basePath}/setup/configuration/commerce-configuration`, + '/get-started/release': `${basePath}/releases/`, + '/get-started/overview/': `${basePath}/get-started/`, + + // ========= BOILERPLATE REDIRECTS ========= + '/boilerplate/working-with-boilerplate': `${basePath}/boilerplate/getting-started`, + '/boilerplate/update-boilerplate': `${basePath}/boilerplate/updates`, + '/boilerplate/blocks': `${basePath}/boilerplate/blocks-reference`, + + // ========= SETUP & CONFIG REDIRECTS ========= + '/config': `${basePath}/setup/configuration`, + '/config/commerce-configuration': `${basePath}/setup/configuration/commerce-configuration`, + '/config/content-delivery-network': `${basePath}/setup/configuration/content-delivery-network`, + '/config/gated-content': `${basePath}/setup/configuration/gated-content`, + '/config/storefront-compatibility': `${basePath}/setup/configuration/storefront-compatibility/install`, + '/setup/configuration/storefront-compatibility': `${basePath}/setup/configuration/storefront-compatibility/install`, + '/setup/discovery/architecture': `${basePath}/get-started/architecture`, + '/setup/multistore': `${basePath}/setup/configuration/multistore-setup`, + '/activate': `${basePath}/setup`, + '/discovery': `${basePath}/setup`, + '/discovery/architecture': `${basePath}/get-started/architecture`, + '/discovery/data-export-validation': `${basePath}/setup/discovery/data-export-validation`, + '/discovery/luma-bridge': `${basePath}/setup/discovery/luma-bridge`, + + // ========= ANALYTICS & LAUNCH REDIRECTS ========= + '/analytics/instrumentation': `${basePath}/setup/analytics/instrumentation`, + '/launch': `${basePath}/setup/launch`, + + // ========= SEO REDIRECTS ========= + '/seo/indexing': `${basePath}/setup/seo/indexing`, + '/seo/metadata': `${basePath}/setup/seo/metadata`, + + // ========= SDK REDIRECTS ========= + '/sdk/get-started/create-a-dropin': `${basePath}/dropins/all/creating`, + '/sdk/get-started': `${basePath}/sdk/get-started/cli`, + '/sdk/reference/initialize': `${basePath}/sdk/reference/initializer`, + '/sdk/reference/common-events': `${basePath}/dropins/all/events`, + + // ========= MERCHANT REDIRECTS ========= + // Quick start redirects (storefront-builder → quick-start) + '/merchants/get-started/': `${basePath}/merchants/quick-start`, + '/merchants/storefront-builder/create-content': `${basePath}/merchants/quick-start/create-content`, + '/merchants/storefront-builder/document-authoring': `${basePath}/merchants/quick-start/document-authoring`, + '/merchants/storefront-builder/visual-editor': `${basePath}/merchants/quick-start/visual-editor`, + '/merchants/storefront-builder/content-commerce-blocks': `${basePath}/merchants/quick-start/content-commerce-blocks`, + '/merchants/storefront-builder/page-metadata': `${basePath}/merchants/quick-start/page-metadata`, + '/merchants/storefront-builder/section-metadata': `${basePath}/merchants/quick-start/section-metadata`, + '/merchants/storefront-builder/your-first-page': `${basePath}/merchants/quick-start/your-first-page`, + '/merchants/storefront-builder/overview/': `${basePath}/merchants/storefront-builder/`, + '/merchants/storefront-builder/create-your-content/': `${basePath}/merchants/storefront-builder/create-content/`, + + // Commerce blocks redirects (storefront-builder → commerce-blocks) + '/merchants/storefront-builder/': `${basePath}/merchants/commerce-blocks`, + '/merchants/storefront-builder/personalization': `${basePath}/merchants/commerce-blocks/personalization`, + '/merchants/storefront-builder/product-recommendations': `${basePath}/merchants/commerce-blocks/product-recommendations`, + '/merchants/get-started/personalization': `${basePath}/merchants/commerce-blocks/personalization`, + '/merchants/get-started/product-recommendations': `${basePath}/merchants/commerce-blocks/product-recommendations`, + + // Content customizations redirects (get-started → content-customizations) + '/merchants/get-started/content-customizations': `${basePath}/merchants/content-customizations`, + '/merchants/get-started/enrichment': `${basePath}/merchants/content-customizations/enrichment`, + '/merchants/get-started/experiments': `${basePath}/merchants/content-customizations/experiments`, + '/merchants/get-started/terms-and-conditions': `${basePath}/merchants/content-customizations/terms-and-conditions`, + '/merchants/terms-and-conditions': `${basePath}/merchants/get-started/terms-and-conditions`, + + // Multistore redirects + '/merchants/get-started/multistore': `${basePath}/setup/configuration/multistore-setup`, + '/merchants/multistore': `${basePath}/setup/configuration/multistore-setup`, + + // Localization redirects + '/merchants/get-started/localization': `${basePath}/merchants/quick-start/content-localization`, + '/merchants/multistore/commerce-localization': `${basePath}/merchants/quick-start/content-localization`, + '/merchants/multistore/localization': `${basePath}/merchants/quick-start/content-localization`, + '/merchants/multistore/content-localization': `${basePath}/merchants/quick-start/content-localization`, + '/merchants/multistore/content-localization-universal-editor': `${basePath}/merchants/quick-start/content-localization-universal-editor`, + + // ========= MISC REDIRECTS ========= + '/faq': `${basePath}/troubleshooting/faq`, + '/references/configurations': `${basePath}/setup/configuration/commerce-configuration`, + '/references/requirements': `${basePath}/get-started/architecture`, + '/resources/product-discovery-diagrams': `${basePath}/dropins/product-discovery`, + '/setup/aem-assets-integration': `${basePath}/merchants/storefront-builder/visual-editor`, + }; +} diff --git a/astro.sidebar.mjs b/astro.sidebar.mjs new file mode 100644 index 000000000..332f9f0fd --- /dev/null +++ b/astro.sidebar.mjs @@ -0,0 +1,838 @@ +/** + * Sidebar navigation configuration + * + * This file maintains the sidebar structure for the Adobe Commerce Storefront documentation. + * The sidebar is organized by audience (Developers, Merchants, etc.) and uses the Starlight Sidebar Topics plugin. + * + * @returns {Array} Sidebar topics configuration array + */ + +/** + * Generate sidebar configuration + * @returns {Array} Sidebar topics array + */ +export function generateSidebar() { + return [ + // ========= STORE FRONT DEVELOPERS ========= + { + label: 'Developers', + link: '/get-started/', + icon: 'seti:json', + items: [ + { + label: 'Essentials', + collapsed: false, + items: [ + { label: 'Overview', link: '/get-started/' }, + { label: 'Create a storefront', link: '/get-started/create-storefront' }, + { label: 'Learn the architecture', link: '/get-started/architecture/' }, + { label: 'Browser compatibility', link: '/get-started/browser-compatibility/' }, + { label: 'Run Lighthouse audits', link: '/get-started/run-lighthouse/' }, + { label: "Launch checklist", link: "setup/launch/" }, + ], + }, + { + label: 'The Boilerplate', + collapsed: true, + items: [ + { label: 'Overview', link: '/boilerplate/' }, + { label: 'Getting started', link: '/boilerplate/getting-started/' }, + { label: 'Configuration', link: '/boilerplate/configuration/' }, + { label: 'Blocks reference', link: '/boilerplate/blocks-reference/' }, + { label: 'Customizing blocks', link: '/boilerplate/customizing-blocks/' }, + { label: 'Updates', link: '/boilerplate/updates/' }, + ], + }, + { + label: 'Licensing', + collapsed: true, + autogenerate: { directory: '/licensing/' }, + }, + { + label: 'Storefront setup', + collapsed: true, + items: [ + { + label: 'Overview', + link: '/setup/', + }, + { + label: 'Configuration', + collapsed: true, + items: [ + { label: 'Overview', link: '/setup/configuration/' }, + { label: 'Storefront configuration', link: '/setup/configuration/commerce-configuration/' }, + { label: 'Price Book ID setup', link: '/setup/configuration/price-book-setup/' }, + { 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: '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/' }, + ], + }, + { + label: 'Compatibility package', + collapsed: true, + items: [ + { label: 'Installation', link: '/setup/configuration/storefront-compatibility/install/' }, + { label: 'Adobe Commerce 2.4.8', link: '/setup/configuration/storefront-compatibility/v248/' }, + { label: 'Adobe Commerce 2.4.7', link: '/setup/configuration/storefront-compatibility/v247/' }, + ], + } + ] + }, + { + label: 'Launch preparation', + collapsed: true, + items: [ + { label: 'Launch checklist', link: '/setup/launch/' }, + { label: 'Analytics instrumentation', link: '/setup/analytics/instrumentation/' }, + { label: 'Adobe Experience Platform', link: '/setup/analytics/adobe-experience-platform/' }, + { label: 'SEO indexing', link: '/setup/seo/indexing/' }, + { label: 'SEO metadata', link: '/setup/seo/metadata/' }, + ], + }, + // ---------- HOW-TOS ---------- + { + label: 'How-Tos', + collapsed: true, + items: [ + { label: 'Federated search', link: '/how-tos/federated-search/' }, + { label: 'Luma Bridge', link: '/setup/discovery/luma-bridge/' }, + { label: 'Multistore', link: '/setup/configuration/multistore-setup/' }, + { + label: 'Cart', + collapsed: true, + items: [ + { label: 'Configure cart summary', link: '/dropins/cart/tutorials/configure-cart-summary/' }, + { label: 'Add custom product lines', link: '/dropins/cart/tutorials/add-product-lines-to-cart-summary/' }, + { label: 'Customize order summary lines', link: '/dropins/cart/tutorials/order-summary-lines/' }, + { label: 'Add gift options to PDP', link: '/dropins/cart/tutorials/gift-options/' }, + { label: 'Add messages to mini cart', link: '/dropins/cart/tutorials/add-messages-to-mini-cart/' }, + { label: 'Enable product variation updates', link: '/dropins/cart/tutorials/enable-product-variation-updates-in-cart/' }, + ], + }, + { + label: 'Checkout', + collapsed: true, + items: [ + { label: 'Add payment method', link: '/dropins/checkout/tutorials/add-payment-method/' }, + { label: 'Integrate address verification', link: '/dropins/checkout/tutorials/address-integration/' }, + { label: 'Validate shipping address', link: '/dropins/checkout/tutorials/validate-shipping-address/' }, + { label: 'Buy online, pickup in store', link: '/dropins/checkout/tutorials/buy-online-pickup-in-store/' }, + { label: 'Implement multi-step checkout', link: '/dropins/checkout/tutorials/multi-step/' }, + ], + }, + { + label: 'Order', + collapsed: true, + items: [ + { label: 'Enable order cancellation', link: '/dropins/order/tutorials/order-cancellation/' }, + ], + }, + { + label: 'User Account', + collapsed: true, + items: [ + { label: 'Customize layout', link: '/dropins/user-account/tutorials/customize-layout/' }, + { label: 'Validate address', link: '/dropins/user-account/tutorials/validate-address/' }, + ], + }, + ], + }, + // ---------- DROP-INS Overview ---------- + { + label: 'Drop-ins', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/all/introduction/' }, + { label: 'Extend or create?', link: '/dropins/all/extend-or-create/' }, + { label: 'Using drop-ins', link: '/dropins/all/quick-start/' }, + { label: 'Commerce blocks', link: '/dropins/all/commerce-blocks/' }, + { label: 'Styling', link: '/dropins/all/styling/' }, + { label: 'Branding', link: '/dropins/all/branding/' }, + { label: 'Labeling and Localization', link: '/dropins/all/labeling/' }, + { label: 'Localizing Links', link: '/dropins/all/linking/' }, + { label: 'Dictionaries', link: '/dropins/all/dictionaries/' }, + { label: 'Slots', link: '/dropins/all/slots/' }, + { label: 'Layouts', link: '/dropins/all/layouts/' }, + { label: 'Events', link: '/dropins/all/events/' }, + { label: 'Common events', link: '/dropins/all/common-events/' }, + { label: 'Extending', link: '/dropins/all/extending/' }, + { label: 'Creating', link: '/dropins/all/creating/' }, + ], + }, + + // ---------- B2C DROP-INS ---------- + { + label: 'B2C Drop-ins', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/' }, + { + label: 'Cart', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/cart/' }, + { label: 'Quick Start', link: '/dropins/cart/quick-start/' }, + { label: 'Initialization', link: '/dropins/cart/initialization/' }, + { label: 'Slots', link: '/dropins/cart/slots/' }, + { label: 'Styles', link: '/dropins/cart/styles/' }, + { label: 'Functions', link: '/dropins/cart/functions/' }, + { label: 'Events', link: '/dropins/cart/events/' }, + { label: 'Dictionary', link: '/dropins/cart/dictionary/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/cart/containers/' }, + { label: 'CartSummaryGrid', link: '/dropins/cart/containers/cart-summary-grid/' }, + { label: 'CartSummaryList', link: '/dropins/cart/containers/cart-summary-list/' }, + { label: 'CartSummaryTable', link: '/dropins/cart/containers/cart-summary-table/' }, + { label: 'Coupons', link: '/dropins/cart/containers/coupons/' }, + { label: 'EmptyCart', link: '/dropins/cart/containers/empty-cart/' }, + { label: 'EstimateShipping', link: '/dropins/cart/containers/estimate-shipping/' }, + { label: 'GiftCards', link: '/dropins/cart/containers/gift-cards/' }, + { label: 'GiftOptions', link: '/dropins/cart/containers/gift-options/' }, + { label: 'MiniCart', link: '/dropins/cart/containers/mini-cart/' }, + { label: 'OrderSummary', link: '/dropins/cart/containers/order-summary/' }, + { label: 'OrderSummaryLine', link: '/dropins/cart/containers/order-summary-line/' }, + ], + }, + ], + }, + { + label: 'Checkout', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/checkout/' }, + { label: 'Quick Start', link: '/dropins/checkout/quick-start/' }, + { label: 'Initialization', link: '/dropins/checkout/initialization/' }, + { label: 'Extending', link: '/dropins/checkout/extending/' }, + { label: 'Error handling', link: '/dropins/checkout/error-handling/' }, + { label: 'Event handling', link: '/dropins/checkout/event-handling/' }, + { label: 'Utility functions', link: '/dropins/checkout/utilities/' }, + { label: 'Slots', link: '/dropins/checkout/slots/' }, + { label: 'Styles', link: '/dropins/checkout/styles/' }, + { label: 'Functions', link: '/dropins/checkout/functions/' }, + { label: 'Events', link: '/dropins/checkout/events/' }, + { label: 'Dictionary', link: '/dropins/checkout/dictionary/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/checkout/containers/' }, + { label: 'AddressValidation', link: '/dropins/checkout/containers/address-validation/' }, + { label: 'BillToShippingAddress', link: '/dropins/checkout/containers/bill-to-shipping-address/' }, + { label: 'EstimateShipping', link: '/dropins/checkout/containers/estimate-shipping/' }, + { label: 'LoginForm', link: '/dropins/checkout/containers/login-form/' }, + { label: 'MergedCartBanner', link: '/dropins/checkout/containers/merged-cart-banner/' }, + { label: 'OutOfStock', link: '/dropins/checkout/containers/out-of-stock/' }, + { label: 'PaymentMethods', link: '/dropins/checkout/containers/payment-methods/' }, + { label: 'PaymentOnAccount', link: '/dropins/checkout/containers/payment-on-account/' }, + { label: 'PlaceOrder', link: '/dropins/checkout/containers/place-order/' }, + { label: 'PurchaseOrder', link: '/dropins/checkout/containers/purchase-order/' }, + { label: 'ServerError', link: '/dropins/checkout/containers/server-error/' }, + { label: 'ShippingMethods', link: '/dropins/checkout/containers/shipping-methods/' }, + { label: 'TermsAndConditions', link: '/dropins/checkout/containers/terms-and-conditions/' }, + ], + }, + ], + }, + { + label: 'Order Management', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/order/' }, + { label: 'Quick Start', link: '/dropins/order/quick-start/' }, + { label: 'Initialization', link: '/dropins/order/initialization/' }, + { label: 'Slots', link: '/dropins/order/slots/' }, + { label: 'Styles', link: '/dropins/order/styles/' }, + { label: 'Functions', link: '/dropins/order/functions/' }, + { label: 'Events', link: '/dropins/order/events/' }, + { label: 'Dictionary', link: '/dropins/order/dictionary/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/order/containers/' }, + { label: 'CreateReturn', link: '/dropins/order/containers/create-return/' }, + { label: 'CustomerDetails', link: '/dropins/order/containers/customer-details/' }, + { label: 'OrderCancelForm', link: '/dropins/order/containers/order-cancel-form/' }, + { label: 'OrderCostSummary', link: '/dropins/order/containers/order-cost-summary/' }, + { label: 'OrderHeader', link: '/dropins/order/containers/order-header/' }, + { label: 'OrderProductList', link: '/dropins/order/containers/order-product-list/' }, + { label: 'OrderReturns', link: '/dropins/order/containers/order-returns/' }, + { label: 'OrderSearch', link: '/dropins/order/containers/order-search/' }, + { label: 'OrderStatus', link: '/dropins/order/containers/order-status/' }, + { label: 'ReturnsList', link: '/dropins/order/containers/returns-list/' }, + { label: 'ShippingStatus', link: '/dropins/order/containers/shipping-status/' }, + ], + }, + ], + }, + { + label: 'Payment Services', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/payment-services/' }, + { label: 'Installation', link: '/dropins/payment-services/installation/' }, + { label: 'Initialization', link: '/dropins/payment-services/initialization/' }, + { label: 'Functions', link: '/dropins/payment-services/functions/' }, + { label: 'Events', link: '/dropins/payment-services/events/' }, + { label: 'Slots', link: '/dropins/payment-services/slots/' }, + { label: 'Styles', link: '/dropins/payment-services/styles/' }, + { label: 'Dictionary', link: '/dropins/payment-services/dictionary/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/payment-services/containers/' }, + { label: 'ApplePay', link: '/dropins/payment-services/containers/apple-pay/' }, + { label: 'CreditCard', link: '/dropins/payment-services/containers/credit-card/' } + ], + }, + ], + }, + { + label: 'Personalization', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/personalization/' }, + { label: 'Quick Start', link: '/dropins/personalization/quick-start/' }, + { label: 'Initialization', link: '/dropins/personalization/initialization/' }, + { label: 'Events', link: '/dropins/personalization/events/' }, + { label: 'Dictionary', link: '/dropins/personalization/dictionary/' }, + { label: 'Functions', link: '/dropins/personalization/functions/' }, + { label: 'Slots', link: '/dropins/personalization/slots/' }, + { label: 'Styles', link: '/dropins/personalization/styles/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/personalization/containers/' }, + { label: 'TargetedBlock', link: '/dropins/personalization/containers/targeted-block/' } + ], + }, + ], + }, + { + label: 'Product details (PDP)', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/product-details/' }, + { label: 'Quick Start', link: '/dropins/product-details/quick-start/' }, + { label: 'Initialization', link: '/dropins/product-details/initialization/' }, + { label: 'Styles', link: '/dropins/product-details/styles/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/product-details/containers/' }, + { label: 'ProductAttributes', link: '/dropins/product-details/containers/product-attributes/' }, + { label: 'ProductDetails', link: '/dropins/product-details/containers/product-details/' }, + { label: 'ProductDescription', link: '/dropins/product-details/containers/product-description/' }, + { label: 'ProductGallery', link: '/dropins/product-details/containers/product-gallery/' }, + { label: 'ProductGiftCardOptions', link: '/dropins/product-details/containers/product-gift-card-options/' }, + { label: 'ProductGiftcardOptions', link: '/dropins/product-details/containers/product-giftcard-options/' }, + { label: 'ProductHeader', link: '/dropins/product-details/containers/product-header/' }, + { label: 'ProductOptions', link: '/dropins/product-details/containers/product-options/' }, + { label: 'ProductPrice', link: '/dropins/product-details/containers/product-price/' }, + { label: 'ProductQuantity', link: '/dropins/product-details/containers/product-quantity/' }, + { label: 'ProductShortDescription', link: '/dropins/product-details/containers/product-short-description/' }, + ], + }, + { label: 'Functions', link: '/dropins/product-details/functions/' }, + { label: 'Slots', link: '/dropins/product-details/slots/' }, + { label: 'Events', link: '/dropins/product-details/events/' }, + { label: 'Dictionary', link: '/dropins/product-details/dictionary/' }, + ], + }, + { + label: 'Product Discovery', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/product-discovery/' }, + { label: 'Quick Start', link: '/dropins/product-discovery/quick-start/' }, + { label: 'Initialization', link: '/dropins/product-discovery/initialization/' }, + { label: 'Functions', link: '/dropins/product-discovery/functions/' }, + { label: 'Events', link: '/dropins/product-discovery/events/' }, + { label: 'Dictionary', link: '/dropins/product-discovery/dictionary/' }, + { label: 'Slots', link: '/dropins/product-discovery/slots/' }, + { label: 'Styles', link: '/dropins/product-discovery/styles/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/product-discovery/containers/' }, + { label: 'SearchResults', link: '/dropins/product-discovery/containers/search-results/' }, + { label: 'Facets', link: '/dropins/product-discovery/containers/facets/' }, + { label: 'SortBy', link: '/dropins/product-discovery/containers/sort-by/' }, + { label: 'Pagination', link: '/dropins/product-discovery/containers/pagination/' }, + ], + }, + ], + }, + { + label: 'Recommendations', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/recommendations/' }, + { label: 'Quick Start', link: '/dropins/recommendations/quick-start/' }, + { label: 'Initialization', link: '/dropins/recommendations/initialization/' }, + { label: 'Functions', link: '/dropins/recommendations/functions/' }, + { label: 'Events', link: '/dropins/recommendations/events/' }, + { label: 'Dictionary', link: '/dropins/recommendations/dictionary/' }, + { label: 'Slots', link: '/dropins/recommendations/slots/' }, + { label: 'Styles', link: '/dropins/recommendations/styles/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/recommendations/containers/' }, + { label: 'ProductList', link: '/dropins/recommendations/containers/product-list/' } + ], + }, + ], + }, + { + label: 'User Account', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/user-account/' }, + { label: 'Quick Start', link: '/dropins/user-account/quick-start/' }, + { label: 'Initialization', link: '/dropins/user-account/initialization/' }, + { label: 'Functions', link: '/dropins/user-account/functions/' }, + { label: 'Slots', link: '/dropins/user-account/slots/' }, + { label: 'Styles', link: '/dropins/user-account/styles/' }, + { label: 'Events', link: '/dropins/user-account/events/' }, + { label: 'Dictionary', link: '/dropins/user-account/dictionary/' }, + { label: 'Sidebar', link: '/dropins/user-account/sidebar/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/user-account/containers/' }, + { label: 'Addresses', link: '/dropins/user-account/containers/addresses/' }, + { label: 'AddressForm', link: '/dropins/user-account/containers/address-form/' }, + { label: 'AddressValidation', link: '/dropins/user-account/containers/address-validation/' }, + { label: 'CustomerInformation', link: '/dropins/user-account/containers/customer-information/' }, + { label: 'OrdersList', link: '/dropins/user-account/containers/orders-list/' }, + ], + }, + ], + }, + { + label: 'User Authentication', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/user-auth/' }, + { label: 'Quick Start', link: '/dropins/user-auth/quick-start/' }, + { label: 'Initialization', link: '/dropins/user-auth/initialization/' }, + { label: 'reCAPTCHA', link: '/dropins/user-auth/recaptcha/' }, + { label: 'Slots', link: '/dropins/user-auth/slots/' }, + { label: 'Styles', link: '/dropins/user-auth/styles/' }, + { label: 'Events', link: '/dropins/user-auth/events/' }, + { label: 'Functions', link: '/dropins/user-auth/functions/' }, + { label: 'Dictionary', link: '/dropins/user-auth/dictionary/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/user-auth/containers/' }, + { label: 'AuthCombine', link: '/dropins/user-auth/containers/auth-combine/' }, + { label: 'ResetPassword', link: '/dropins/user-auth/containers/reset-password/' }, + { label: 'SignIn', link: '/dropins/user-auth/containers/sign-in/' }, + { label: 'SignUp', link: '/dropins/user-auth/containers/sign-up/' }, + { label: 'SuccessNotification', link: '/dropins/user-auth/containers/success-notification/' }, + { label: 'UpdatePassword', link: '/dropins/user-auth/containers/update-password/' }, + ], + }, + ], + }, + { + label: 'Wishlist', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins/wishlist/' }, + { label: 'Quick Start', link: '/dropins/wishlist/quick-start/' }, + { label: 'Initialization', link: '/dropins/wishlist/initialization/' }, + { label: 'Functions', link: '/dropins/wishlist/functions/' }, + { label: 'Slots', link: '/dropins/wishlist/slots/' }, + { label: 'Styles', link: '/dropins/wishlist/styles/' }, + { label: 'Events', link: '/dropins/wishlist/events/' }, + { label: 'Dictionary', link: '/dropins/wishlist/dictionary/' }, + { + label: 'Containers', + collapsed: false, + items: [ + { label: 'Overview', link: '/dropins/wishlist/containers/' }, + { label: 'Wishlist Container', link: '/dropins/wishlist/containers/wishlist/' }, + { label: 'WishlistAlert', link: '/dropins/wishlist/containers/wishlist-alert/' }, + { label: 'WishlistItem', link: '/dropins/wishlist/containers/wishlist-item/' }, + { label: 'WishlistToggle', link: '/dropins/wishlist/containers/wishlist-toggle/' }, + ], + }, + ], + }, + ], + }, + + // ---------- B2B DROP-INS ---------- + { + label: 'B2B Drop-ins', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins-b2b/' }, + { + label: 'Company Management', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins-b2b/company-management/' }, + { label: 'Quick start', link: '/dropins-b2b/company-management/quick-start/' }, + { label: 'Functions', link: '/dropins-b2b/company-management/functions/' }, + { label: 'Events', link: '/dropins-b2b/company-management/events/' }, + { label: 'Initialization', link: '/dropins-b2b/company-management/initialization/' }, + { label: 'Containers', link: '/dropins-b2b/company-management/containers/' }, + { label: 'Slots', link: '/dropins-b2b/company-management/slots/' }, + { label: 'Styles', link: '/dropins-b2b/company-management/styles/' }, + { label: 'Dictionary', link: '/dropins-b2b/company-management/dictionary/' }, + ], + }, + { + label: 'Company Switcher', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins-b2b/company-switcher/' }, + { label: 'Quick start', link: '/dropins-b2b/company-switcher/quick-start/' }, + { label: 'Functions', link: '/dropins-b2b/company-switcher/functions/' }, + { label: 'Events', link: '/dropins-b2b/company-switcher/events/' }, + { label: 'Initialization', link: '/dropins-b2b/company-switcher/initialization/' }, + { label: 'Containers', link: '/dropins-b2b/company-switcher/containers/' }, + { label: 'Slots', link: '/dropins-b2b/company-switcher/slots/' }, + { label: 'Styles', link: '/dropins-b2b/company-switcher/styles/' }, + { label: 'Dictionary', link: '/dropins-b2b/company-switcher/dictionary/' }, + ], + }, + { + label: 'Quote Management', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins-b2b/quote-management/' }, + { label: 'Quick start', link: '/dropins-b2b/quote-management/quick-start/' }, + { label: 'Functions', link: '/dropins-b2b/quote-management/functions/' }, + { label: 'Events', link: '/dropins-b2b/quote-management/events/' }, + { label: 'Initialization', link: '/dropins-b2b/quote-management/initialization/' }, + { label: 'Containers', link: '/dropins-b2b/quote-management/containers/' }, + { label: 'Slots', link: '/dropins-b2b/quote-management/slots/' }, + { label: 'Styles', link: '/dropins-b2b/quote-management/styles/' }, + { label: 'Dictionary', link: '/dropins-b2b/quote-management/dictionary/' }, + ], + }, + { + label: 'Requisition List', + collapsed: true, + items: [ + { label: 'Overview', link: '/dropins-b2b/requisition-list/' }, + { label: 'Quick start', link: '/dropins-b2b/requisition-list/quick-start/' }, + { label: 'Functions', link: '/dropins-b2b/requisition-list/functions/' }, + { label: 'Events', link: '/dropins-b2b/requisition-list/events/' }, + { label: 'Initialization', link: '/dropins-b2b/requisition-list/initialization/' }, + { label: 'Containers', link: '/dropins-b2b/requisition-list/containers/' }, + { label: 'Slots', link: '/dropins-b2b/requisition-list/slots/' }, + { label: 'Styles', link: '/dropins-b2b/requisition-list/styles/' }, + { label: 'Dictionary', link: '/dropins-b2b/requisition-list/dictionary/' }, + ], + }, + ], + }, + + // ---------- DROP-INS SDK ---------- + { + label: 'Drop-ins SDK', + collapsed: true, + items: [ + { label: 'SDK introduction', link: '/sdk/' }, + { label: 'SDK CLI usage', link: '/sdk/get-started/cli/' }, + { + label: 'SDK components', + collapsed: true, + items: [ + { label: 'Components overview', link: '/sdk/components/overview/' }, + { label: 'Accordion', link: '/sdk/components/accordion/' }, + { label: 'ActionButton', link: '/sdk/components/actionbutton/' }, + { label: 'ActionButtonGroup', link: '/sdk/components/actionbuttongroup/' }, + { label: 'AlertBanner', link: '/sdk/components/alertbanner/' }, + { label: 'Breadcrumbs', link: '/sdk/components/breadcrumbs/' }, + { label: 'Button', link: '/sdk/components/button/' }, + { label: 'Card', link: '/sdk/components/card/' }, + { label: 'CartItem', link: '/sdk/components/cartitem/' }, + { label: 'CartList', link: '/sdk/components/cartlist/' }, + { label: 'Checkbox', link: '/sdk/components/checkbox/' }, + { label: 'ColorSwatch', link: '/sdk/components/colorswatch/' }, + { label: 'ContentGrid', link: '/sdk/components/contentgrid/' }, + { label: 'Divider', link: '/sdk/components/divider/' }, + { label: 'Field', link: '/sdk/components/field/' }, + { label: 'Header', link: '/sdk/components/header/' }, + { label: 'Icon', link: '/sdk/components/icon/' }, + { label: 'IllustratedMessage', link: '/sdk/components/illustratedmessage/' }, + { label: 'Image', link: '/sdk/components/image/' }, + { label: 'ImageSwatch', link: '/sdk/components/imageswatch/' }, + { label: 'Incrementer', link: '/sdk/components/incrementer/' }, + { label: 'InlineAlert', link: '/sdk/components/inlinealert/' }, + { label: 'Input', link: '/sdk/components/input/' }, + { label: 'InputDate', link: '/sdk/components/inputdate/' }, + { label: 'InputFile', link: '/sdk/components/inputfile/' }, + { label: 'InputPassword', link: '/sdk/components/inputpassword/' }, + { label: 'Modal', link: '/sdk/components/modal/' }, + { label: 'Pagination', link: '/sdk/components/pagination/' }, + { label: 'Picker', link: '/sdk/components/picker/' }, + { label: 'Portal', link: '/sdk/components/portal/' }, + { label: 'Price', link: '/sdk/components/price/' }, + { label: 'PriceRange', link: '/sdk/components/pricerange/' }, + { label: 'ProductItemCard', link: '/sdk/components/productitemcard/' }, + { label: 'ProgressSpinner', link: '/sdk/components/progressspinner/' }, + { label: 'RadioButton', link: '/sdk/components/radiobutton/' }, + { label: 'Skeleton', link: '/sdk/components/skeleton/' }, + { label: 'Tag', link: '/sdk/components/tag/' }, + { label: 'TextArea', link: '/sdk/components/textarea/' }, + { label: 'TextSwatch', link: '/sdk/components/textswatch/' }, + { label: 'ToggleButton', link: '/sdk/components/togglebutton/' }, + ], + }, + { + label: 'SDK design', + collapsed: true, + items: [ + { label: 'Design overview', link: '/sdk/design/' }, + { label: 'Design tokens', link: '/sdk/design/base/' }, + { label: 'Colors', link: '/sdk/design/colors/' }, + { label: 'Typography', link: '/sdk/design/typography/' }, + { label: 'Spacing', link: '/sdk/design/spacing/' }, + { label: 'Shapes', link: '/sdk/design/shapes/' }, + { label: 'Grid', link: '/sdk/design/grid/' }, + ], + }, + { + label: 'SDK reference', + collapsed: true, + items: [ + { label: 'Reference overview', link: '/sdk/reference/' }, + { label: 'Events', link: '/sdk/reference/events/' }, + { label: 'GraphQL', link: '/sdk/reference/graphql/' }, + { label: 'Initializer', link: '/sdk/reference/initializer/' }, + { label: 'Links', link: '/sdk/reference/links/' }, + { label: 'Render', link: '/sdk/reference/render/' }, + { label: 'reCAPTCHA', link: '/sdk/reference/recaptcha/' }, + { label: 'Slots', link: '/sdk/reference/slots/' }, + { label: 'VComponent', link: '/sdk/reference/vcomponent/' }, + ], + }, + { + label: 'SDK utilities', + collapsed: true, + items: [ + { label: 'Utilities overview', link: '/sdk/utilities/' }, + { label: 'classList', link: '/sdk/utilities/classlist/' }, + { label: 'debounce', link: '/sdk/utilities/debounce/' }, + { label: 'deepmerge', link: '/sdk/utilities/deepmerge/' }, + { label: 'getCookie', link: '/sdk/utilities/getcookie/' }, + { label: 'getFormErrors', link: '/sdk/utilities/getformerrors/' }, + { label: 'getFormValues', link: '/sdk/utilities/getformvalues/' }, + { label: 'getPathValue', link: '/sdk/utilities/getpathvalue/' }, + ], + }, + ], + }, + + // ---------- OTHER ---------- + { + label: 'Troubleshooting', + collapsed: true, + autogenerate: { directory: '/troubleshooting/' }, + }, + { + label: 'Resources', + collapsed: true, + autogenerate: { directory: '/resources/' }, + }, + ], + }, + + // ========= MERCHANTS ========= + { + label: 'Merchants', + link: '/merchants/quick-start/', + icon: 'seti:svg', + items: [ + { + label: 'Quick start', + items: [ + { label: 'Overview', link: '/merchants/quick-start/' }, + { label: 'What is Commerce Storefront?', link: '/merchants/quick-start/create-content/' }, + { label: 'Your first page', link: '/merchants/quick-start/your-first-page/' }, + { label: 'Using the Document Authoring tool', link: '/merchants/quick-start/document-authoring/' }, + { label: 'Using the Visual Editor', link: '/merchants/quick-start/visual-editor/' }, + // { label: 'Using digital assets management', link: '/merchants/quick-start/digital-assets-management/' }, + { label: 'Using Content and Commerce blocks', link: '/merchants/quick-start/content-commerce-blocks/' }, + { label: 'Page metadata', link: '/merchants/quick-start/page-metadata/' }, + { label: 'Section metadata', link: '/merchants/quick-start/section-metadata/' }, + { + label: 'Localization', + collapsed: true, + items: [ + { label: 'Document Authoring workflow', link: '/merchants/quick-start/content-localization/' }, + { label: 'Universal Editor workflow', link: '/merchants/quick-start/content-localization-universal-editor/' }, + { label: 'Commerce-specific tasks', link: '/merchants/quick-start/content-localization-commerce-tasks/' }, + ], + }, + ], + }, + { + label: 'Commerce blocks', + items: [ + { label: 'Overview', link: '/merchants/commerce-blocks/' }, + { label: 'Personalization', link: '/merchants/commerce-blocks/personalization/' }, + { label: 'Product recommendations', link: '/merchants/commerce-blocks/product-recommendations/' }, + { label: 'Addresses', link: '/merchants/blocks/commerce-addresses/' }, + { label: 'Cart', link: '/merchants/blocks/commerce-cart/' }, + { label: 'Create Password', link: '/merchants/blocks/commerce-create-password/' }, + { label: 'Create Return', link: '/merchants/blocks/commerce-create-return/' }, + { label: 'Customer Details', link: '/merchants/blocks/commerce-customer-details/' }, + { label: 'Customer Information', link: '/merchants/blocks/commerce-customer-information/' }, + { label: 'Forgot Password', link: '/merchants/blocks/commerce-forgot-password/' }, + { label: 'Gift Options', link: '/merchants/blocks/commerce-gift-options/' }, + { label: 'Login', link: '/merchants/blocks/commerce-login/' }, + { label: 'Mini Cart', link: '/merchants/blocks/commerce-mini-cart/' }, + { label: 'Order Cost Summary', link: '/merchants/blocks/commerce-order-cost-summary/' }, + { label: 'Order Header', link: '/merchants/blocks/commerce-order-header/' }, + { label: 'Order Product List', link: '/merchants/blocks/commerce-order-product-list/' }, + { label: 'Order Returns', link: '/merchants/blocks/commerce-order-returns/' }, + { label: 'Order Status', link: '/merchants/blocks/commerce-order-status/' }, + { label: 'Orders List', link: '/merchants/blocks/commerce-orders-list/' }, + { 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: 'Shipping Status', link: '/merchants/blocks/commerce-shipping-status/' }, + { label: 'Wishlist', link: '/merchants/blocks/commerce-wishlist/' }, + { label: 'Product Details', link: '/merchants/blocks/product-details/' }, + { label: 'Product List Page', link: '/merchants/blocks/product-list-page/' }, + { label: 'Product Recommendations', link: '/merchants/blocks/product-recommendations/' }, + ], + }, + // B2B Commerce blocks (30 total): commerce-b2b-* (18), commerce-company-* (7), + // commerce-customer-company (1), plus commerce-{account-header,account-nav,account-sidebar,checkout-success} (4) + { + label: 'B2B Commerce blocks', + collapsed: true, + items: [ + { label: 'Account Header', link: '/merchants/blocks/commerce-account-header/' }, + { label: 'Account Nav', link: '/merchants/blocks/commerce-account-nav/' }, + { label: 'Account Sidebar', link: '/merchants/blocks/commerce-account-sidebar/' }, + { label: 'Checkout Success', link: '/merchants/blocks/commerce-checkout-success/' }, + { label: 'Company Accept Invitation', link: '/merchants/blocks/commerce-company-accept-invitation/' }, + { label: 'Company Create', link: '/merchants/blocks/commerce-company-create/' }, + { label: 'Company Credit', link: '/merchants/blocks/commerce-company-credit/' }, + { label: 'Company Profile', link: '/merchants/blocks/commerce-company-profile/' }, + { label: 'Company Roles & Permissions', link: '/merchants/blocks/commerce-company-roles-permissions/' }, + { label: 'Company Structure', link: '/merchants/blocks/commerce-company-structure/' }, + { label: 'Company Users', link: '/merchants/blocks/commerce-company-users/' }, + { label: 'Customer Company', link: '/merchants/blocks/commerce-customer-company/' }, + { label: 'Negotiable Quote', link: '/merchants/blocks/commerce-b2b-negotiable-quote/' }, + { label: 'Negotiable Quote Template', link: '/merchants/blocks/commerce-b2b-negotiable-quote-template/' }, + { label: 'PO Approval Flow', link: '/merchants/blocks/commerce-b2b-po-approval-flow/' }, + { label: 'PO Approval Rule Details', link: '/merchants/blocks/commerce-b2b-po-approval-rule-details/' }, + { label: 'PO Approval Rule Form', link: '/merchants/blocks/commerce-b2b-po-approval-rule-form/' }, + { label: 'PO Approval Rules List', link: '/merchants/blocks/commerce-b2b-po-approval-rules-list/' }, + { label: 'PO Checkout Success', link: '/merchants/blocks/commerce-b2b-po-checkout-success/' }, + { label: 'PO Comment Form', link: '/merchants/blocks/commerce-b2b-po-comment-form/' }, + { label: 'PO Comments List', link: '/merchants/blocks/commerce-b2b-po-comments-list/' }, + { label: 'PO Company Purchase Orders', link: '/merchants/blocks/commerce-b2b-po-company-purchase-orders/' }, + { label: 'PO Customer Purchase Orders', link: '/merchants/blocks/commerce-b2b-po-customer-purchase-orders/' }, + { label: 'PO Header', link: '/merchants/blocks/commerce-b2b-po-header/' }, + { label: 'PO History Log', link: '/merchants/blocks/commerce-b2b-po-history-log/' }, + { label: 'PO Require Approval', link: '/merchants/blocks/commerce-b2b-po-require-approval-purchase-orders/' }, + { label: 'PO Status', link: '/merchants/blocks/commerce-b2b-po-status/' }, + { label: 'Quote Checkout', link: '/merchants/blocks/commerce-b2b-quote-checkout/' }, + { label: 'Requisition List', link: '/merchants/blocks/commerce-b2b-requisition-list/' }, + { label: 'Requisition List View', link: '/merchants/blocks/commerce-b2b-requisition-list-view/' }, + ], + }, + { + label: 'Content customizations', + items: [ + { label: 'Overview', link: '/merchants/content-customizations/' }, + { label: 'Enrichment', link: '/merchants/content-customizations/enrichment/' }, + { label: 'Experiments', link: '/merchants/content-customizations/experiments/' }, + { label: 'Prerendered product pages', link: '/merchants/content-customizations/prerendered-product-pages/' }, + { label: 'Terms and conditions', link: '/merchants/content-customizations/terms-and-conditions/' }, + ], + }, + ], + }, + + // ========= VIDEOS ========= + { + label: 'Videos', + link: '/videos/', + icon: 'seti:video', + items: [ + { + label: 'Storefront videos', + items: [ + { label: 'Overview', link: '/videos/' }, + { label: 'Add custom product lines to cart summary', link: '/videos/add-product-lines-to-cart-summary/' }, + { label: 'Buy online, pickup in store', link: '/videos/buy-online-pickup-in-store/' }, + { label: 'Customize address form layout and address lookup', link: '/videos/customize-address-form-layout/' }, + { label: 'Customize cart summary', link: '/videos/customize-cart-summary/' }, + { label: 'Customize order summary lines', link: '/videos/customize-order-summary-lines/' }, + { label: 'Multi-step checkout', link: '/videos/multi-step-checkout/' }, + { label: 'Shopper experience', link: '/videos/shopper-experience/' }, + ], + }, + ], + }, + + // ========= PLAYGROUNDS ========= + { + label: 'Playgrounds', + link: '/playgrounds/', + icon: 'laptop', + items: [ + { + label: 'Storefront playgrounds', + items: [ + { label: 'Introduction', link: '/playgrounds/' }, + { label: 'Commerce API Playground', link: '/playgrounds/commerce-services/' }, + { label: 'Commerce Optimizer API Playground', link: '/playgrounds/commerce-optimizer/' }, + ], + }, + ], + }, + + // ========= RELEASES ========= + { + label: 'Releases', + link: '/releases/', + icon: 'rocket', + collapsed: true, + items: [ + { + label: 'Release notes', + items: [ + { label: 'Overview', link: '/releases/' }, + { label: 'Changelog', link: '/releases/changelog/' }, + ], + }, + { + label: 'Hotfixes', + items: [ + { label: 'Centralized FetchGraphQL', link: '/releases/hotfixes/centralized-fetchgraphql/' }, + ], + }, + ], + }, + ]; +} diff --git a/src/content/docs/boilerplate/blocks/index.mdx b/src/content/docs/boilerplate/blocks/index.mdx deleted file mode 100644 index 09712cbe3..000000000 --- a/src/content/docs/boilerplate/blocks/index.mdx +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Commerce blocks -description: Technical reference guide for all commerce blocks in the boilerplate, organized by functionality and integration patterns. ---- - -import TableWrapper from '@components/TableWrapper.astro'; -import Link from '@components/Link.astro'; - -This reference provides technical details for all 32 commerce blocks included in the boilerplate. Each block integrates one or more drop-in components to provide complete commerce functionality. - -## Quick reference by functionality - - - -| Block | Primary Drop-ins | Key Features | -|-------|-----------------|--------------| -| **Shopping Experience** | | | -| [Product List Page](/merchants/blocks/product-list-page/) | storefront-product-discovery, tools, storefront-wishlist | Search, filtering, sorting, pagination, wishlist integration | -| [Product Details](/merchants/blocks/product-details/) | tools, storefront-pdp, storefront-wishlist | Product options, pricing, add to cart, wishlist toggle | -| [Product Recommendations](/merchants/blocks/product-recommendations/) | tools, storefront-cart, storefront-recommendations | AI-powered recommendations, multiple page types | -| [Cart](/merchants/blocks/commerce-cart/) | tools, storefront-cart, storefront-wishlist | Item management, coupon codes, gift options, move to wishlist | -| [Mini Cart](/merchants/blocks/commerce-mini-cart/) | storefront-cart, tools | Dropdown cart summary, quick view, checkout navigation | -| [Checkout](/merchants/blocks/commerce-checkout/) | tools, storefront-order, storefront-checkout | Complete checkout flow, shipping, payment, order review | -| **Customer Account** | | | -| [Login](/merchants/blocks/commerce-login/) | storefront-auth | Email/password authentication, redirect handling | -| [Create Account](/merchants/blocks/commerce-create-account/) | storefront-auth | Registration form, validation, account creation | -| [Confirm Account](/merchants/blocks/commerce-confirm-account/) | storefront-auth, tools | Email confirmation landing, account activation | -| [Forgot Password](/merchants/blocks/commerce-forgot-password/) | storefront-auth, tools | Password reset request, email trigger | -| [Create Password](/merchants/blocks/commerce-create-password/) | storefront-auth, tools | Password reset form, token validation | -| [Account Header](/merchants/blocks/commerce-account-header/) | tools | Customer name display, logout functionality | -| [Account Sidebar](/merchants/blocks/commerce-account-sidebar/) | tools, storefront-account | Account navigation menu, active state management | -| [Addresses](/merchants/blocks/commerce-addresses/) | storefront-account | Address CRUD operations, default address management | -| [Customer Information](/merchants/blocks/commerce-customer-information/) | storefront-account | Profile editing, email/name updates | -| [Customer Details](/merchants/blocks/commerce-customer-details/) | storefront-order | Customer info display in order context | -| **Order Management** | | | -| [Orders List](/merchants/blocks/commerce-orders-list/) | storefront-account, tools | Order history, status display, order details navigation | -| [Search Order](/merchants/blocks/commerce-search-order/) | storefront-auth, storefront-order, tools | Guest order lookup, email and order number validation | -| [Order Header](/merchants/blocks/commerce-order-header/) | tools | Order number, date, status badge | -| [Order Status](/merchants/blocks/commerce-order-status/) | storefront-order | Detailed status, tracking info, delivery estimates | -| [Order Product List](/merchants/blocks/commerce-order-product-list/) | storefront-order, storefront-cart, tools | Line items, reorder functionality, product images | -| [Order Cost Summary](/merchants/blocks/commerce-order-cost-summary/) | storefront-order | Subtotal, taxes, shipping, discounts, grand total | -| [Shipping Status](/merchants/blocks/commerce-shipping-status/) | storefront-order, tools | Shipment tracking, carrier info, delivery status | -| **Returns & Exchanges** | | | -| [Returns List](/merchants/blocks/commerce-returns-list/) | storefront-order, tools | Return history, status tracking, return details navigation | -| [Create Return](/merchants/blocks/commerce-create-return/) | storefront-order, tools | Return request form, item selection, reason codes | -| [Order Returns](/merchants/blocks/commerce-order-returns/) | tools, storefront-order | Return details for specific order | -| [Return Header](/merchants/blocks/commerce-return-header/) | tools | Return number, date, status display | -| **Gift Options** | | | -| [Gift Options](/merchants/blocks/commerce-gift-options/) | storefront-cart | Gift messages, gift wrapping, gift receipt options | -| **Wishlist** | | | -| [Wishlist](/merchants/blocks/commerce-wishlist/) | storefront-cart, storefront-pdp, storefront-wishlist | Saved items, move to cart, item management | - - - -## Integration patterns - -### Block decoration flow - -Every commerce block follows this initialization pattern: - -1. **Server-side rendering**: Edge Delivery Services transforms the document table into HTML -2. **Client-side decoration**: The block's JavaScript decorator runs via `decorateBlock()` -3. **Drop-in initialization**: Drop-in containers are initialized with configuration and providers -4. **Rendering**: Drop-in components render into the block's DOM -5. **Event handling**: Event listeners connect to the global event bus - -### Common integration patterns - -#### Simple drop-in rendering - -Blocks like Login and Forgot Password simply render a single drop-in container: - -```javascript -export default async function decorate(block) { - const { render } = await import('@dropins/storefront-auth/containers/SignIn.js'); - await render(SignInContainer, {})({}); -} -``` - -#### Multi-drop-in coordination - -Complex blocks like Cart and Checkout coordinate multiple drop-ins: - -```javascript -// Cart block uses cart + wishlist drop-ins -import { render as renderCart } from '@dropins/storefront-cart/containers/Cart.js'; -import { render as renderWishlist } from '@dropins/storefront-wishlist/api.js'; -``` - -#### Configuration from block tables - -Blocks read configuration from document authoring tables: - -```javascript -const config = readBlockConfig(block); -const hideHeading = config['hide-heading'] === 'true'; -``` - -#### Event bus integration - -Blocks listen to events from drop-ins and other blocks: - -```javascript -events.on('cart/updated', () => { - // React to cart changes -}); -``` - -## Implementation details - -### Drop-in dependencies - -All drop-ins are loaded via import maps defined in `head.html`: - -```json -{ - "imports": { - "@dropins/storefront-cart/": "/scripts/__dropins__/storefront-cart/", - "@dropins/storefront-checkout/": "/scripts/__dropins__/storefront-checkout/" - } -} -``` - -### Provider initialization - -Drop-ins require providers to be initialized in `scripts/initializers/`: - -- **GraphQL provider**: Configures Commerce backend endpoint and headers -- **Authentication provider**: Manages customer sessions and tokens -- **Event provider**: Sets up the global event bus - -See [Configuration](/boilerplate/configuration/) for provider setup details. - -### Styling - -Each block includes: - -1. **Base styles**: Block-specific CSS in `blocks/*/block-name.css` -2. **Drop-in tokens**: Design tokens in `scripts/initializers/dropin-name.js` -3. **Global tokens**: Shared tokens in `scripts/initializers/` - -## Blocks by page type - -### Essential implementations - -Every storefront requires these pages: - -- **Homepage**: Product Recommendations, Product List Page -- **Product Page (PDP)**: Product Details, Product Recommendations -- **Cart Page**: Cart, Product Recommendations -- **Checkout Page**: Checkout -- **Account Dashboard**: Account Header, Account Sidebar - -### Common additions - -Enhance your storefront with: - -- **Wishlist Page**: Wishlist -- **Order Tracking**: Search Order, Order Status, Orders List -- **Returns Portal**: Create Return, Returns List, Order Returns -- **Account Management**: Addresses, Customer Information - -## Performance considerations - -### Lazy loading - -Commerce blocks are lazy-loaded automatically: - -1. Blocks below the fold are loaded when scrolled into view -2. Drop-in containers are code-split and loaded on demand -3. Heavy dependencies (like checkout) are loaded only when needed - -### Critical rendering path - -For optimal performance: - -1. Keep Mini Cart in header (loads early) -2. Defer non-critical blocks below the fold -3. Use Product Recommendations sparingly (loads ML models) - -## Development workflow - -### Local testing - -1. Start the AEM CLI: `aem up` -2. Modify block JavaScript in `blocks/commerce-*/` -3. Changes hot-reload automatically -4. Test with demo backend or configure your own in `demo-config.json` - -### Adding new blocks - -To create a custom commerce block: - -1. Create a new directory: `blocks/my-custom-block/` -2. Add decorator: `my-custom-block.js` -3. Add styles: `my-custom-block.css` -4. Import and render drop-in containers -5. Initialize required providers - -See for block creation basics. - -## Related resources - -- [Boilerplate overview](/boilerplate/) - Complete technical reference -- [Configuration guide](/boilerplate/configuration/) - Setup and provider configuration -- [Drop-in documentation](/dropins/all/introduction/) - Drop-in technical details -- [Merchant block reference](/merchants/commerce-blocks/) - Business user perspective -- - -## Need help? - -- **Block not rendering?** Verify drop-in providers are initialized in `scripts/initializers/` -- **GraphQL errors?** Check Commerce backend configuration in `demo-config.json` -- **Styling issues?** Review design token configuration in drop-in initializers -- **Event not firing?** Ensure event bus is initialized and event names match documentation - diff --git a/src/content/docs/boilerplate/index.mdx b/src/content/docs/boilerplate/index.mdx index df11138d0..42b619194 100644 --- a/src/content/docs/boilerplate/index.mdx +++ b/src/content/docs/boilerplate/index.mdx @@ -50,28 +50,10 @@ All commerce blocks included in the boilerplate with their drop-in dependencies: | Block | Drop-ins used | |-------|---------------| -| [Commerce Account Header](/merchants/blocks/commerce-account-header/) | tools | -| [Commerce Account Nav](/merchants/blocks/commerce-account-nav/) | tools | -| [Commerce Account Sidebar](/merchants/blocks/commerce-account-sidebar/) | tools, storefront-account | | [Commerce Addresses](/merchants/blocks/commerce-addresses/) | storefront-account | -| [Commerce B2b Negotiable Quote](/merchants/blocks/commerce-b2b-negotiable-quote/) | tools, storefront-company-management, storefront-quote-management, storefront-account | -| [Commerce B2b Quote Checkout](/merchants/blocks/commerce-b2b-quote-checkout/) | tools, storefront-order, storefront-checkout | -| [Commerce B2b Requisition List](/merchants/blocks/commerce-b2b-requisition-list/) | storefront-requisition-list | -| [Commerce B2b Requisition List View](/merchants/blocks/commerce-b2b-requisition-list-view/) | storefront-requisition-list | | [Commerce Cart](/merchants/blocks/commerce-cart/) | tools, storefront-cart, storefront-wishlist, storefront-quote-management | -| [Commerce Checkout](/merchants/blocks/commerce-checkout/) | tools, storefront-order, storefront-checkout, storefront-payment-services | -| [Commerce Checkout Success](/merchants/blocks/commerce-checkout-success/) | tools, storefront-order, storefront-checkout, storefront-cart, storefront-auth | -| [Commerce Company Create](/merchants/blocks/commerce-company-create/) | storefront-company-management, tools | -| [Commerce Company Credit](/merchants/blocks/commerce-company-credit/) | storefront-company-management | -| [Commerce Company Profile](/merchants/blocks/commerce-company-profile/) | storefront-company-management | -| [Commerce Company Roles Permissions](/merchants/blocks/commerce-company-roles-permissions/) | storefront-company-management | -| [Commerce Company Structure](/merchants/blocks/commerce-company-structure/) | storefront-company-management | -| [Commerce Company Users](/merchants/blocks/commerce-company-users/) | storefront-company-management | -| [Commerce Confirm Account](/merchants/blocks/commerce-confirm-account/) | storefront-auth, tools | -| [Commerce Create Account](/merchants/blocks/commerce-create-account/) | storefront-auth | | [Commerce Create Password](/merchants/blocks/commerce-create-password/) | storefront-auth, tools | | [Commerce Create Return](/merchants/blocks/commerce-create-return/) | storefront-order, tools | -| [Commerce Customer Company](/merchants/blocks/commerce-customer-company/) | storefront-company-management | | [Commerce Customer Details](/merchants/blocks/commerce-customer-details/) | storefront-order | | [Commerce Customer Information](/merchants/blocks/commerce-customer-information/) | storefront-account | | [Commerce Forgot Password](/merchants/blocks/commerce-forgot-password/) | storefront-auth, tools | diff --git a/src/content/docs/dropins-b2b/index.mdx b/src/content/docs/dropins-b2b/index.mdx new file mode 100644 index 000000000..841308fbc --- /dev/null +++ b/src/content/docs/dropins-b2b/index.mdx @@ -0,0 +1,22 @@ +--- +title: Overview +description: Explore Adobe Commerce B2B drop-in components for building enterprise storefronts with company management, purchasing workflows, and quote functionality. +sidebar: + label: Overview + order: 1 +--- + +B2B drop-ins are pre-built, customizable UI components that provide complete B2B commerce functionality for your storefront. Each drop-in handles a specific aspect of the business-to-business shopping experience, from company management to purchase order workflows. + +## Available B2B drop-ins + +**Company Management** - Enables company profile management and role-based permissions for Adobe Commerce storefronts. + +**Company Switcher** - Provides a UI component for users to switch between multiple companies they are associated with. + +**Purchase Order** - Manages purchase order workflows, approval rules, and purchase order history for B2B transactions. + +**Quote Management** - Enables negotiable quotes for B2B customers with quote request, negotiation, and approval workflows. + +**Requisition List** - Provides tools for creating and managing requisition lists for repeat purchases and bulk ordering. + diff --git a/src/content/docs/dropins-b2b/quote-management/containers/index.mdx b/src/content/docs/dropins-b2b/quote-management/containers/index.mdx new file mode 100644 index 000000000..ee106331b --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/index.mdx @@ -0,0 +1,49 @@ +--- +title: Quote Management Containers +description: Overview of containers available in the Quote Management drop-in. +sidebar: + label: Overview + order: 1 +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +The **Quote Management** drop-in provides pre-built container components for integrating into your storefront. + +
+Version: 1.0.0-beta5 +
+ +## What are Containers? + +Containers are pre-built UI components that combine functionality, state management, and presentation. They provide a complete solution for specific features and can be customized through props, slots, and CSS. + +## Available Containers + + + +| Container | Description | +| --------- | ----------- | +| [ItemsQuoted](/dropins-b2b/quote-management/containers/items-quoted/) | Displays quoted items with product details, quantities, pricing, and editing controls. | +| [ItemsQuotedTemplate](/dropins-b2b/quote-management/containers/items-quoted-template/) | Displays items in a quote template for reuse in future quote requests. | +| [ManageNegotiableQuote](/dropins-b2b/quote-management/containers/manage-negotiable-quote/) | Comprehensive quote management with details, actions, shipping, comments, and history. | +| [ManageNegotiableQuoteTemplate](/dropins-b2b/quote-management/containers/manage-negotiable-quote-template/) | Template-specific quote management interface with template actions and details. | +| [OrderSummary](/dropins-b2b/quote-management/containers/order-summary/) | Pricing breakdown showing subtotal, discounts, taxes, and grand total. | +| [OrderSummaryLine](/dropins-b2b/quote-management/containers/order-summary-line/) | Individual line item in the order summary displaying label and price. | +| [QuoteCommentsList](/dropins-b2b/quote-management/containers/quote-comments-list/) | Displays conversation history for a quote. | +| [QuoteHistoryLog](/dropins-b2b/quote-management/containers/quote-history-log/) | Displays chronological activity log for a quote. | +| [QuoteSummaryList](/dropins-b2b/quote-management/containers/quote-summary-list/) | Displays quote items in a summary list format with accordion support. | +| [QuoteTemplateCommentsList](/dropins-b2b/quote-management/containers/quote-template-comments-list/) | Displays conversation history for a quote template. | +| [QuoteTemplateHistoryLog](/dropins-b2b/quote-management/containers/quote-template-history-log/) | Displays chronological activity log for a quote template. | +| [QuoteTemplatesListTable](/dropins-b2b/quote-management/containers/quote-templates-list-table/) | Paginated table of quote templates with view and generate actions. | +| [QuotesListTable](/dropins-b2b/quote-management/containers/quotes-list-table/) | Paginated table of quotes with view actions and customizable columns. | +| [RequestNegotiableQuoteForm](/dropins-b2b/quote-management/containers/request-negotiable-quote-form/) | Form for creating new quote requests from cart with attachments support. | +| [ShippingAddressDisplay](/dropins-b2b/quote-management/containers/shipping-address-display/) | Displays shipping address for a quote with loading state support. | + + + + + diff --git a/src/content/docs/dropins-b2b/quote-management/containers/items-quoted-template.mdx b/src/content/docs/dropins-b2b/quote-management/containers/items-quoted-template.mdx new file mode 100644 index 000000000..d7bd2275b --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/items-quoted-template.mdx @@ -0,0 +1,60 @@ +--- +title: ItemsQuotedTemplate Container +description: Learn about the ItemsQuotedTemplate container in the Quote Management drop-in. +sidebar: + label: ItemsQuotedTemplate +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Displays items in a quote template for reuse in future quote requests. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `ItemsQuotedTemplate` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `templateData` | `NegotiableQuoteTemplateModel` | No | Template data object. Auto-populated from drop-in state when omitted. | + + + +## Slots + +This container exposes the following slots for customization: + + + +| Slot | Type | Required | Description | +|------|------|----------|-------------| +| `ProductListTable` | `function` | No | Customize the product list display for templates. | +| `QuotePricesSummary` | `SlotProps` | No | Customize pricing summary for templates. | + + + +## Usage + +The following example demonstrates how to use the `ItemsQuotedTemplate` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ItemsQuotedTemplate } from '@dropins/storefront-quote-management/containers/ItemsQuotedTemplate.js'; + +await provider.render(ItemsQuotedTemplate, { + templateData: templateData, + slots: { + // Add custom slot implementations here + } +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/items-quoted.mdx b/src/content/docs/dropins-b2b/quote-management/containers/items-quoted.mdx new file mode 100644 index 000000000..71b9e895f --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/items-quoted.mdx @@ -0,0 +1,67 @@ +--- +title: ItemsQuoted Container +description: Learn about the ItemsQuoted container in the Quote Management drop-in. +sidebar: + label: ItemsQuoted +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Displays quoted items with product details, quantities, pricing, and editing controls. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `ItemsQuoted` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `quoteData` | `NegotiableQuoteModel` | No | Quote data object. Auto-populated from drop-in state when omitted. | +| `onItemCheckboxChange` | `function` | No | Callback when item checkbox is toggled. Use for tracking selections or custom validation. | +| `onItemDropdownChange` | `function` | No | Callback when item action dropdown changes. Use for custom action handling or analytics. | +| `onUpdate` | `function` | No | Callback on form submission (quantity/note updates). Use for custom validation or tracking. | +| `onRemoveItemsRef` | `function` | No | Provides access to internal item removal handler. Use for custom removal workflows. | +| `onRemoveModalStateChange` | `function` | No | Callback when remove confirmation modal opens/closes. Use for tracking or custom modal logic. | + + + +## Slots + +This container exposes the following slots for customization: + + + +| Slot | Type | Required | Description | +|------|------|----------|-------------| +| `ProductListTable` | `function` | No | Customize the entire product list display. Use for custom columns, filtering, or table layout. | +| `QuotePricesSummary` | `SlotProps` | No | Customize pricing summary section. Use for custom pricing displays or additional summary information. | + + + +## Usage + +The following example demonstrates how to use the `ItemsQuoted` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ItemsQuoted } from '@dropins/storefront-quote-management/containers/ItemsQuoted.js'; + +await provider.render(ItemsQuoted, { + quoteData: quoteData, + onItemCheckboxChange: onItemCheckboxChange, + onItemDropdownChange: onItemDropdownChange, + slots: { + // Add custom slot implementations here + } +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/manage-negotiable-quote-template.mdx b/src/content/docs/dropins-b2b/quote-management/containers/manage-negotiable-quote-template.mdx new file mode 100644 index 000000000..39fa7068d --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/manage-negotiable-quote-template.mdx @@ -0,0 +1,77 @@ +--- +title: ManageNegotiableQuoteTemplate Container +description: Learn about the ManageNegotiableQuoteTemplate container in the Quote Management drop-in. +sidebar: + label: ManageNegotiableQuoteTemplate +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +The `ManageNegotiableQuoteTemplate` container provides the interface for managing quote templates with template-specific actions and details. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `ManageNegotiableQuoteTemplate` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `onActionsButtonClick` | `function` | No | Callback function triggered when actions button click | +| `onSendForReview` | `function` | No | Callback function triggered when send for review | + + + +## Slots + +This container exposes the following slots for customization: + + + +| Slot | Type | Required | Description | +|------|------|----------|-------------| +| `TemplateName` | `SlotProps` | No | | +| `TemplateStatus` | `SlotProps` | No | | +| `Banner` | `SlotProps` | No | | +| `Details` | `SlotProps` | No | | +| `ActionBar` | `SlotProps` | No | | +| `ReferenceDocuments` | `function` | No | | +| `ItemsTable` | `SlotProps` | No | | +| `ItemsQuotedTab` | `SlotProps` | No | | +| `CommentsTab` | `SlotProps` | No | | +| `HistoryLogTab` | `SlotProps` | No | | +| `CommentsTitle` | `SlotProps` | No | | +| `Comments` | `SlotProps` | No | | +| `HistoryLogTitle` | `SlotProps` | No | | +| `HistoryLog` | `SlotProps` | No | | +| `Footer` | `function` | No | | +| `ShippingInformationTitle` | `SlotProps` | No | | +| `ShippingInformation` | `function` | No | | + + + +## Usage + +The following example demonstrates how to use the `ManageNegotiableQuoteTemplate` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + onActionsButtonClick: onActionsButtonClick, + onSendForReview: onSendForReview, + slots: { + // Add custom slot implementations here + } +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/manage-negotiable-quote.mdx b/src/content/docs/dropins-b2b/quote-management/containers/manage-negotiable-quote.mdx new file mode 100644 index 000000000..6df4c951b --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/manage-negotiable-quote.mdx @@ -0,0 +1,85 @@ +--- +title: ManageNegotiableQuote Container +description: Learn about the ManageNegotiableQuote container in the Quote Management drop-in. +sidebar: + label: ManageNegotiableQuote +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +The `ManageNegotiableQuote` container provides comprehensive quote management capabilities for existing quotes. It displays quote details (creation date, sales rep, expiration), manages quote status and updates, shows the product list with pricing and quantity controls, provides quote actions (print, copy, delete, send for review), displays shipping information, and includes a quote comments section. + +All actions respect permission-based access control. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `ManageNegotiableQuote` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `onActionsDropdownChange` | `function` | No | Callback function triggered when actions dropdown change | +| `onActionsButtonClick` | `function` | No | Callback function triggered when actions button click | +| `onSendForReview` | `function` | No | Callback function triggered when send for review | +| `maxFiles` | `number` | No | Sets the maximum number of files that can be attached when sending a quote for review. Enforces company policies on attachment limits and prevents excessive file uploads that could impact performance or storage. | +| `maxFileSize` | `number` | No | Sets the maximum file size in bytes for attachments. Controls the upper limit for individual file uploads. Use to prevent large file uploads that could impact performance, storage, or network bandwidth. | +| `acceptedFileTypes` | `string[]` | No | Specifies an array of MIME types allowed for file attachments (for example \`['application/pdf', 'image/jpeg', 'image/png']\`). Use to restrict uploads to specific document types required by your quote approval process. | +| `onDuplicateQuote` | `function` | No | Callback function triggered when duplicate quote | + + + +## Slots + +This container exposes the following slots for customization: + + + +| Slot | Type | Required | Description | +|------|------|----------|-------------| +| `QuoteName` | `SlotProps` | No | Customize the quote name display and rename functionality. Use to add custom icons, styling, or additional metadata next to the quote name. | +| `QuoteStatus` | `SlotProps` | No | Customize how the quote status is displayed. Use to add custom status badges, colors, or additional status information. | +| `Banner` | `SlotProps` | No | Customize the alert banner shown for specific quote states (submitted, pending, expired). Use to provide custom messaging or styling for different quote statuses. | +| `DuplicateQuoteWarningBanner` | `SlotProps` | No | | +| `Details` | `SlotProps` | No | Customize the quote metadata display (created date, sales rep, expiration). Use to add additional fields, reorder information, or apply custom formatting. | +| `ActionBar` | `SlotProps` | No | Customize the action buttons and dropdown menu for quote operations. Use to add custom actions, reorder existing actions, or integrate with external systems. | +| `QuoteContent` | `SlotProps` | No | Customize the entire tabbed content area containing items, comments, and history. Use to add new tabs, reorder tabs, or completely replace the tabbed interface. | +| `ItemsQuotedTab` | `SlotProps` | No | Customize the Items Quoted tab content. Use to add additional product information, custom filtering, or integrate with inventory systems. | +| `CommentsTab` | `SlotProps` | No | Customize the Comments tab displaying quote discussions. Use to add custom comment filters, sorting, or rich text formatting. | +| `HistoryLogTab` | `SlotProps` | No | Customize the History Log tab showing quote activity. Use to add custom filtering, grouping by action type, or export functionality. | +| `ShippingInformationTitle` | `SlotProps` | No | Customize the shipping section heading. Use to add icons, tooltips, or additional contextual information about shipping requirements. | +| `ShippingInformation` | `function` | No | Customize the shipping address display and selection. Use to integrate with third-party shipping services, add address validation, or provide custom address formatting. | +| `QuoteCommentsTitle` | `SlotProps` | No | Customize the quote comments section heading. Use to add help text, character limits, or formatting guidelines. | +| `QuoteComments` | `SlotProps` | No | Customize the comment input field. Use to add rich text editing, @mentions, file attachments inline, or comment templates. | +| `AttachFilesField` | `function` | No | Customize the file attachment input control. Use to integrate with document management systems, add drag-and-drop functionality, or provide custom file previews. | +| `AttachedFilesList` | `function` | No | Customize how attached files are displayed. Use to add file previews, virus scanning status, or integration with external document viewers. | +| `Footer` | `function` | No | Customize the Send for Review button and footer actions. Use to add additional submission options, validation steps, or approval workflow controls. | + + + +## Usage + +The following example demonstrates how to use the `ManageNegotiableQuote` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + onActionsDropdownChange: onActionsDropdownChange, + onActionsButtonClick: onActionsButtonClick, + onSendForReview: onSendForReview, + slots: { + // Add custom slot implementations here + } +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/order-summary-line.mdx b/src/content/docs/dropins-b2b/quote-management/containers/order-summary-line.mdx new file mode 100644 index 000000000..69b4eaac2 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/order-summary-line.mdx @@ -0,0 +1,55 @@ +--- +title: OrderSummaryLine Container +description: Learn about the OrderSummaryLine container in the Quote Management drop-in. +sidebar: + label: OrderSummaryLine +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Individual line item in the order summary displaying label and price. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `OrderSummaryLine` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `label` | `VNode \| string` | Yes | Label text or component for the line item. | +| `price` | `VNode>` | Yes | Price component for the line item. | +| `classSuffixes` | `Array` | No | Provides an array of CSS class suffixes for styling variants. Use to apply different visual styles to order summary line items based on their type or context. | +| `labelClassSuffix` | `string` | No | CSS class suffix specifically for the label. | +| `testId` | `string` | No | Test ID for automated testing. | +| `children` | `any` | No | Child elements to render within the container | + + + +## Slots + +This container does not expose any customizable slots. + +## Usage + +The following example demonstrates how to use the `OrderSummaryLine` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { OrderSummaryLine } from '@dropins/storefront-quote-management/containers/OrderSummaryLine.js'; + +await provider.render(OrderSummaryLine, { + label: label, + price: price, + classSuffixes: [], +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/order-summary.mdx b/src/content/docs/dropins-b2b/quote-management/containers/order-summary.mdx new file mode 100644 index 000000000..870aae392 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/order-summary.mdx @@ -0,0 +1,50 @@ +--- +title: OrderSummary Container +description: Learn about the OrderSummary container in the Quote Management drop-in. +sidebar: + label: OrderSummary +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Pricing breakdown showing subtotal, discounts, taxes, and grand total. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `OrderSummary` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `showTotalSaved` | `boolean` | No | Shows/hides total savings amount. | +| `updateLineItems` | `function` | No | Callback to transform line items before display. Use for custom line item logic. | + + + +## Slots + +This container does not expose any customizable slots. + +## Usage + +The following example demonstrates how to use the `OrderSummary` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { OrderSummary } from '@dropins/storefront-quote-management/containers/OrderSummary.js'; + +await provider.render(OrderSummary, { + showTotalSaved: true, + updateLineItems: updateLineItems, +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/quote-comments-list.mdx b/src/content/docs/dropins-b2b/quote-management/containers/quote-comments-list.mdx new file mode 100644 index 000000000..7ee3b8aab --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/quote-comments-list.mdx @@ -0,0 +1,48 @@ +--- +title: QuoteCommentsList Container +description: Learn about the QuoteCommentsList container in the Quote Management drop-in. +sidebar: + label: QuoteCommentsList +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Displays conversation history for a quote. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `QuoteCommentsList` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `quoteData` | `NegotiableQuoteModel` | No | Quote data object. Auto-populated from drop-in state when omitted. | + + + +## Slots + +This container does not expose any customizable slots. + +## Usage + +The following example demonstrates how to use the `QuoteCommentsList` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteCommentsList } from '@dropins/storefront-quote-management/containers/QuoteCommentsList.js'; + +await provider.render(QuoteCommentsList, { + quoteData: quoteData, +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/quote-history-log.mdx b/src/content/docs/dropins-b2b/quote-management/containers/quote-history-log.mdx new file mode 100644 index 000000000..f39ee907c --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/quote-history-log.mdx @@ -0,0 +1,48 @@ +--- +title: QuoteHistoryLog Container +description: Learn about the QuoteHistoryLog container in the Quote Management drop-in. +sidebar: + label: QuoteHistoryLog +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Displays chronological activity log for a quote. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `QuoteHistoryLog` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `quoteData` | `NegotiableQuoteModel` | No | Quote data object. Auto-populated from drop-in state when omitted. | + + + +## Slots + +This container does not expose any customizable slots. + +## Usage + +The following example demonstrates how to use the `QuoteHistoryLog` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteHistoryLog } from '@dropins/storefront-quote-management/containers/QuoteHistoryLog.js'; + +await provider.render(QuoteHistoryLog, { + quoteData: quoteData, +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/quote-summary-list.mdx b/src/content/docs/dropins-b2b/quote-management/containers/quote-summary-list.mdx new file mode 100644 index 000000000..1abd0579a --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/quote-summary-list.mdx @@ -0,0 +1,78 @@ +--- +title: QuoteSummaryList Container +description: Learn about the QuoteSummaryList container in the Quote Management drop-in. +sidebar: + label: QuoteSummaryList +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Displays quote items in a summary list format with accordion support. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `QuoteSummaryList` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `hideHeading` | `boolean` | No | Hides the list heading when true. | +| `hideFooter` | `boolean` | No | Hides item footers when true. | +| `routeProduct` | `function` | No | Generates product detail URLs. Receives item data as a parameter and returns a URL string. Use to create links to product pages, add query parameters, or integrate with your application's product routing system. | +| `showMaxItems` | `boolean` | No | Shows maximum item count indicator when true. | +| `attributesToHide` | `SwitchableAttributes[]` | No | Specifies an array of product attributes to hide from display. Use to customize which product attributes are visible in the quote summary, reducing visual clutter or focusing on specific attribute types. | +| `accordion` | `boolean` | No | Enables accordion-style collapsible items when true. | +| `variant` | `'primary' \| 'secondary'` | No | Visual variant (primary or secondary). | +| `showDiscount` | `boolean` | No | Shows discount information when true. | +| `showSavings` | `boolean` | No | Shows savings amount when true. | + + + +## Slots + +This container exposes the following slots for customization: + + + +| Slot | Type | Required | Description | +|------|------|----------|-------------| +| `Heading` | `SlotProps` | No | Customize list heading. | +| `Footer` | `SlotProps` | No | Customize item footer. | +| `Thumbnail` | `SlotProps` | No | Customize product thumbnail. | +| `ProductAttributes` | `SlotProps` | No | Customize product attributes display. | +| `QuoteSummaryFooter` | `SlotProps` | No | Customize summary footer. | +| `QuoteItem` | `SlotProps` | No | Customize entire quote item display. | +| `ItemTitle` | `SlotProps` | No | Customize item title. | +| `ItemPrice` | `SlotProps` | No | Customize item price display. | +| `ItemTotal` | `SlotProps` | No | Customize item total display. | +| `ItemSku` | `SlotProps` | No | Customize SKU display. | + + + +## Usage + +The following example demonstrates how to use the `QuoteSummaryList` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + hideHeading: true, + hideFooter: true, + routeProduct: routeProduct, + slots: { + // Add custom slot implementations here + } +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/quote-template-comments-list.mdx b/src/content/docs/dropins-b2b/quote-management/containers/quote-template-comments-list.mdx new file mode 100644 index 000000000..8140c05e6 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/quote-template-comments-list.mdx @@ -0,0 +1,48 @@ +--- +title: QuoteTemplateCommentsList Container +description: Learn about the QuoteTemplateCommentsList container in the Quote Management drop-in. +sidebar: + label: QuoteTemplateCommentsList +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Displays conversation history for a quote template. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `QuoteTemplateCommentsList` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `templateData` | `NegotiableQuoteTemplateModel` | No | Template data object. Auto-populated from drop-in state when omitted. | + + + +## Slots + +This container does not expose any customizable slots. + +## Usage + +The following example demonstrates how to use the `QuoteTemplateCommentsList` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplateCommentsList } from '@dropins/storefront-quote-management/containers/QuoteTemplateCommentsList.js'; + +await provider.render(QuoteTemplateCommentsList, { + templateData: templateData, +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/quote-template-history-log.mdx b/src/content/docs/dropins-b2b/quote-management/containers/quote-template-history-log.mdx new file mode 100644 index 000000000..ae852d3ad --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/quote-template-history-log.mdx @@ -0,0 +1,48 @@ +--- +title: QuoteTemplateHistoryLog Container +description: Learn about the QuoteTemplateHistoryLog container in the Quote Management drop-in. +sidebar: + label: QuoteTemplateHistoryLog +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Displays chronological activity log for a quote template. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `QuoteTemplateHistoryLog` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `templateData` | `NegotiableQuoteTemplateModel` | No | Template data object. Auto-populated from drop-in state when omitted. | + + + +## Slots + +This container does not expose any customizable slots. + +## Usage + +The following example demonstrates how to use the `QuoteTemplateHistoryLog` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplateHistoryLog } from '@dropins/storefront-quote-management/containers/QuoteTemplateHistoryLog.js'; + +await provider.render(QuoteTemplateHistoryLog, { + templateData: templateData, +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/quote-templates-list-table.mdx b/src/content/docs/dropins-b2b/quote-management/containers/quote-templates-list-table.mdx new file mode 100644 index 000000000..80f2bd780 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/quote-templates-list-table.mdx @@ -0,0 +1,79 @@ +--- +title: QuoteTemplatesListTable Container +description: Learn about the QuoteTemplatesListTable container in the Quote Management drop-in. +sidebar: + label: QuoteTemplatesListTable +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Paginated table of quote templates with view and generate actions. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `QuoteTemplatesListTable` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `pageSize` | `number` | No | Sets the number of items displayed per page for pagination. Controls how many quote template items appear in each page view. Use to optimize display for different screen sizes or match user preferences. | +| `showItemRange` | `boolean` | No | Shows item range indicator when true. | +| `showPageSizePicker` | `boolean` | No | Shows page size selector when true. | +| `showPagination` | `boolean` | No | Shows pagination controls when true. | +| `onViewQuoteTemplate` | `function` | No | Callback when viewing a template. Receives template ID, name, and status. | +| `onGenerateQuoteFromTemplate` | `function` | No | Callback when generating quote from template. Receives template and quote IDs. | +| `onPageSizeChange` | `function` | No | Callback when page size changes. | +| `onPageChange` | `function` | No | Callback when page changes. | + + + +## Slots + +This container exposes the following slots for customization: + + + +| Slot | Type | Required | Description | +|------|------|----------|-------------| +| `Name` | `SlotProps` | No | Customize template name cell. | +| `State` | `SlotProps` | No | Customize state cell (active/inactive). | +| `Status` | `SlotProps` | No | Customize status cell. | +| `ValidUntil` | `SlotProps` | No | Customize valid until date cell. | +| `MinQuoteTotal` | `SlotProps` | No | Customize minimum quote total cell. | +| `OrdersPlaced` | `SlotProps` | No | Customize orders placed count cell. | +| `LastOrdered` | `SlotProps` | No | Customize last ordered date cell. | +| `Actions` | `function` | No | Customize actions cell (view, generate quote buttons). | +| `EmptyTemplates` | `SlotProps` | No | Customize empty state message when no templates exist. | +| `ItemRange` | `SlotProps` | No | Customize item range display (for example '1-10 of 50'). | +| `PageSizePicker` | `function` | No | Customize page size selector. | +| `Pagination` | `function` | No | Customize pagination controls. | + + + +## Usage + +The following example demonstrates how to use the `QuoteTemplatesListTable` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + pageSize: 0, + showItemRange: true, + showPageSizePicker: true, + slots: { + // Add custom slot implementations here + } +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/quotes-list-table.mdx b/src/content/docs/dropins-b2b/quote-management/containers/quotes-list-table.mdx new file mode 100644 index 000000000..b5c380640 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/quotes-list-table.mdx @@ -0,0 +1,78 @@ +--- +title: QuotesListTable Container +description: Learn about the QuotesListTable container in the Quote Management drop-in. +sidebar: + label: QuotesListTable +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Paginated table of quotes with view actions and customizable columns. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `QuotesListTable` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `pageSize` | `number` | No | Sets the number of items displayed per page for pagination. Controls how many quote items appear in each page view. Use to optimize display for different screen sizes or match user preferences. | +| `showItemRange` | `boolean` | No | Shows item range indicator when true. | +| `showPageSizePicker` | `boolean` | No | Shows page size selector when true. | +| `showPagination` | `boolean` | No | Shows pagination controls when true. | +| `onViewQuote` | `function` | No | Callback when viewing a quote. Receives quote ID, name, and status. | +| `onPageSizeChange` | `function` | No | Callback when page size changes. | +| `onPageChange` | `function` | No | Callback when page changes. | + + + +## Slots + +This container exposes the following slots for customization: + + + +| Slot | Type | Required | Description | +|------|------|----------|-------------| +| `QuoteName` | `SlotProps` | No | Customize quote name cell. | +| `Created` | `SlotProps` | No | Customize created date cell. | +| `CreatedBy` | `SlotProps` | No | Customize created by (buyer name) cell. | +| `Status` | `SlotProps` | No | Customize status cell. | +| `LastUpdated` | `SlotProps` | No | Customize last updated date cell. | +| `QuoteTemplate` | `SlotProps` | No | Customize quote template reference cell. | +| `QuoteTotal` | `SlotProps` | No | Customize quote total amount cell. | +| `Actions` | `function` | No | Customize actions cell (view button). | +| `EmptyQuotes` | `SlotProps` | No | Customize empty state message when no quotes exist. | +| `ItemRange` | `SlotProps` | No | Customize item range display (for example '1-10 of 50'). | +| `PageSizePicker` | `function` | No | Customize page size selector. | +| `Pagination` | `function` | No | Customize pagination controls. | + + + +## Usage + +The following example demonstrates how to use the `QuotesListTable` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + pageSize: 0, + showItemRange: true, + showPageSizePicker: true, + slots: { + // Add custom slot implementations here + } +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/request-negotiable-quote-form.mdx b/src/content/docs/dropins-b2b/quote-management/containers/request-negotiable-quote-form.mdx new file mode 100644 index 000000000..6aaf4d16c --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/request-negotiable-quote-form.mdx @@ -0,0 +1,72 @@ +--- +title: RequestNegotiableQuoteForm Container +description: Learn about the RequestNegotiableQuoteForm container in the Quote Management drop-in. +sidebar: + label: RequestNegotiableQuoteForm +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +Form for creating new quote requests from cart with attachments support. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `RequestNegotiableQuoteForm` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `cartId` | `string` | Yes | Specifies the cart ID to create the quote from. Required to identify which shopping cart contains the items to be quoted. | +| `maxFiles` | `number` | No | Sets the maximum number of files that can be attached when sending a quote for review. Enforces company policies on attachment limits and prevents excessive file uploads that could impact performance or storage. | +| `maxFileSize` | `number` | No | Sets the maximum file size in bytes for attachments. Controls the upper limit for individual file uploads. Use to prevent large file uploads that could impact performance, storage, or network bandwidth. | +| `acceptedFileTypes` | `string[]` | No | Specifies an array of allowed MIME types for file attachments. Use to restrict uploads to specific document types required by your quote approval process (for example, \`['application/pdf', 'image/jpeg', 'image/png']\`). | + + + +## Slots + +This container exposes the following slots for customization: + + + +| Slot | Type | Required | Description | +|------|------|----------|-------------| +| `ErrorBanner` | `SlotProps` | No | Customize error message display. | +| `SuccessBanner` | `SlotProps` | No | Customize success message display after quote creation. | +| `Title` | `SlotProps` | No | Customize form title heading. | +| `CommentField` | `function` | No | Customize comment textarea field with validation. | +| `QuoteNameField` | `function` | No | Customize quote name input field with validation. | +| `AttachFileField` | `function` | No | Customize file attachment input control. | +| `AttachedFilesList` | `function` | No | Customize attached files display with remove functionality. | +| `RequestButton` | `function` | No | Customize request quote submission button. | +| `SaveDraftButton` | `function` | No | Customize save draft button. | + + + +## Usage + +The following example demonstrates how to use the `RequestNegotiableQuoteForm` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { RequestNegotiableQuoteForm } from '@dropins/storefront-quote-management/containers/RequestNegotiableQuoteForm.js'; + +await provider.render(RequestNegotiableQuoteForm, { + cartId: "abc-123", + maxFiles: 0, + maxFileSize: 0, + slots: { + // Add custom slot implementations here + } +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/containers/shipping-address-display.mdx b/src/content/docs/dropins-b2b/quote-management/containers/shipping-address-display.mdx new file mode 100644 index 000000000..876301be0 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/containers/shipping-address-display.mdx @@ -0,0 +1,50 @@ +--- +title: ShippingAddressDisplay Container +description: Learn about the ShippingAddressDisplay container in the Quote Management drop-in. +sidebar: + label: ShippingAddressDisplay +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +The `ShippingAddressDisplay` container shows the selected shipping address for a quote with options to change or add new addresses. This component integrates with the company address book for B2B customers. + +
+Version: 1.0.0-beta5 +
+ +## Configuration + +The `ShippingAddressDisplay` container provides the following configuration options: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `shippingAddress` | `ShippingAddress` | No | Provides the shipping address object to display for the quote. Contains address details such as street, city, region, postal code, and country. Required to render the address information in the container. | +| `loading` | `boolean` | No | Controls the loading state of the container. Shows a loading indicator when set to `true` while address data is being fetched or processed. Use to provide visual feedback during async operations. | + + + +## Slots + +This container does not expose any customizable slots. + +## Usage + +The following example demonstrates how to use the `ShippingAddressDisplay` container: + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ShippingAddressDisplay } from '@dropins/storefront-quote-management/containers/ShippingAddressDisplay.js'; + +await provider.render(ShippingAddressDisplay, { + shippingAddress: shippingAddress, + loading: true, +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/dictionary.mdx b/src/content/docs/dropins-b2b/quote-management/dictionary.mdx new file mode 100644 index 000000000..a939cf3ab --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/dictionary.mdx @@ -0,0 +1,523 @@ +--- +title: Quote Management Dictionary +description: Customize user-facing text and labels in the Quote Management drop-in for localization and branding. +sidebar: + label: Dictionary + order: 8 +--- + +import { Aside } from '@astrojs/starlight/components'; + +The **Quote Management dictionary** contains all user-facing text, labels, and messages displayed by this drop-in. Customize the dictionary to: + +- **Localize** the drop-in for different languages and regions +- **Customize** labels and messages to match your brand voice +- **Override** default text without modifying source code for the drop-in + +Dictionaries use the **i18n (internationalization)** pattern, where each text string is identified by a unique key path. + +
+Version: 1.0.0-beta5 +
+ +## How to customize + +Override dictionary values during drop-in initialization. The drop-in deep-merges your custom values with the defaults. + +```javascript +import { initialize } from '@dropins/storefront-quote-management'; + +await initialize({ + langDefinitions: { + en_US: { + "ConfirmationModal": { + "cancel": { + "0": "Custom value", + "1": "Custom value" + } + } + } + } +}); +``` + +You only need to include the keys you want to change. For multi-language support and advanced patterns, see the [Dictionary customization guide](/dropins/all/dictionaries/). + +## Default keys and values + +Below are the default English (`en_US`) strings provided by the **Quote Management** drop-in: + +```json title="en_US.json" +{ + "ConfirmationModal": { + "cancel": "Cancel", + "confirm": "Confirm" + }, + "NegotiableQuote": { + "Request": { + "title": "Request a Quote", + "comment": "Comment", + "commentError": "Please add your comment", + "quoteName": "Quote name", + "quoteNameError": "Please add a quote name", + "attachmentsError": "Error uploading attachments", + "maxFilesExceeded": "Maximum {maxFiles} file(s) allowed", + "maxFileSizeExceeded": "File size exceeds maximum limit of {maxSize}", + "invalidFileType": "File type not accepted", + "removeFile": "Remove file", + "uploading": "Uploading...", + "uploadSuccess": "Upload complete", + "uploadError": "Upload failed", + "requestCta": "Request a Quote", + "saveDraftCta": "Save as draft", + "error": { + "header": "Error", + "unauthenticated": "Please sign in to request a quote.", + "unauthorized": "You are not authorized to request a quote.", + "missingCart": "Could not find a valid cart." + }, + "success": { + "header": "Success", + "submitted": "Quote request submitted successfully!", + "draftSaved": "Quote saved as draft successfully!" + } + }, + "Manage": { + "createdLabel": "Created:", + "salesRepLabel": "Sales Rep:", + "expiresLabel": "Expires:", + "actionsLabel": "Actions", + "actions": { + "remove": "Remove" + }, + "attachFile": "Attach File", + "attachFiles": "Attach Files", + "fileUploadError": "Failed to upload file. Please try again.", + "maxFilesExceeded": "Maximum {maxFiles} file(s) allowed", + "maxFileSizeExceeded": "File size exceeds maximum limit of {maxSize}", + "invalidFileType": "File type not accepted", + "removeFile": "Remove file", + "uploading": "Uploading...", + "uploadSuccess": "Upload complete", + "uploadError": "Upload failed", + "bannerTitle": "Alert", + "bannerStatusMessages": { + "submitted": "This quote is currently locked for editing. It will become available once released by the Merchant.", + "pending": "This quote is currently locked for editing. It will become available once released by the Merchant.", + "expired": "Your quote has expired and the product prices have been updated as per the latest prices in your catalog. You can either re-submit the quote to seller for further negotiation or go to checkout." + }, + "actionButtons": { + "close": "Close quote", + "delete": "Delete quote", + "print": "Print quote", + "createTemplate": "Create quote template", + "createCopy": "Create copy", + "sendForReview": "Send for review" + }, + "confirmationModal": { + "cancel": "Cancel", + "delete": { + "title": "Delete Quote", + "message": "Are you sure you want to delete this quote?", + "confirm": "Delete", + "errorHeading": "Error", + "errorFallback": "Failed to delete quote", + "successHeading": "Success", + "successDescription": "Quote has been successfully deleted" + }, + "duplicate": { + "title": "Duplicate Quote", + "message": "Are you sure you want to create a copy of this quote?", + "confirm": "Create Copy", + "errorHeading": "Error", + "errorFallback": "Failed to duplicate quote", + "successHeading": "Success", + "successDescription": "Quote has been successfully duplicated. You will be redirected to the new quote shortly.", + "outOfStockWarningHeading": "Alert", + "outOfStockWarningMessage": "Some items were skipped during duplication due to errors." + }, + "close": { + "message": "Are you sure you want to close this quote?", + "confirm": "Close", + "confirmLoading": "Closing...", + "successHeading": "Success", + "successDescription": "Quote has been successfully closed" + }, + "createTemplate": { + "message": "Are you sure you want to create a quote template from this quote?", + "confirm": "Create Template", + "confirmLoading": "Creating...", + "successHeading": "Success", + "successDescription": "Quote template has been successfully created", + "errorHeading": "Error", + "errorFallback": "Failed to create quote template" + }, + "noItemsSelected": { + "title": "Please Select Quote Items", + "message": "Please select at least one quote item to proceed.", + "confirm": "Ok" + } + }, + "shippingInformation": { + "title": "Shipping Information" + }, + "shippingAddress": { + "noAddress": "No shipping address has been set for this quote.", + "noAddressHeading": "No Shipping Address", + "noAddressDescription": "Please select or enter a shipping address." + }, + "quoteComments": { + "title": "Quote Comments", + "placeholder": "Add your comment", + "emptyState": "No comments yet", + "by": "by", + "attachments": "Attachments:" + }, + "productListTable": { + "headers": { + "productName": "Product name", + "sku": "SKU", + "price": "Price", + "quantity": "Quantity", + "discount": "Discount", + "subtotal": "Subtotal", + "actions": "Actions" + }, + "submitButton": "Update", + "actions": { + "editNoteToSeller": "Edit note to seller", + "remove": "Remove" + }, + "notes": { + "header": "NOTES", + "leftANote": "left a note:", + "buyer": "Buyer", + "seller": "Seller" + }, + "outOfStock": "Out of Stock", + "outOfStockMessage": "This item is currently out of stock." + }, + "rename": { + "title": "Rename Quote", + "quoteNameLabel": "Quote name", + "reasonLabel": "Reason for change", + "renameButton": "Rename", + "cancelButton": "Cancel", + "errorHeading": "Error", + "quoteNameRequired": "Quote name is required", + "errorDefault": "Failed to rename quote. Please try again.", + "successHeading": "Success", + "successMessage": "Quote renamed successfully!" + }, + "lineItemNote": { + "title": "Leave a note to seller", + "productLabel": "Name & SKU", + "skuLabel": "SKU", + "priceLabel": "Price", + "stockLabel": "Stock", + "quantityLabel": "Qty", + "discountLabel": "Discount", + "subtotalLabel": "Subtotal", + "noteLabel": "Note to seller", + "notePlaceholder": "Can I get a discount on this?", + "noteHelper": "The seller will see the note when you send the quote back.", + "confirmButton": "Confirm", + "cancelButton": "Cancel", + "noteError": "Please enter a note", + "quantityError": "Quantity must be greater than 0" + }, + "tabbedContent": { + "itemsQuoted": "Items quoted", + "comments": "Comments", + "historyLog": "History log" + }, + "quotePricesSummary": { + "subtotal": { + "excludingTax": "Quote Subtotal (excluding tax)" + }, + "appliedTaxes": "Applied Taxes", + "grandTotal": { + "includingTax": "Quote Grand Total (including tax)" + } + }, + "updateQuantitiesModal": { + "title": "Change Quote Items", + "description": "Making changes to any quote item changes the terms of the quote. After you update the quote, return it to the seller for review and approval.", + "cancelButton": "Cancel", + "updateButton": "Apply Changes", + "successHeading": "Success", + "successMessage": "Quote quantities have been successfully updated.", + "errorHeading": "Error", + "errorMessage": "Failed to update quote quantities. Please try again." + }, + "removeItemsModal": { + "title": "Change Quote Items", + "description": "Making changes to any quote item changes the terms of the quote. After you update the quote, return it to the seller for review and approval.", + "cancelButton": "Cancel", + "confirmButton": "Remove", + "confirmButtonRemoving": "Removing...", + "successHeading": "Success", + "successMessage": "Quote items have been successfully removed.", + "errorHeading": "Error", + "errorMessage": "Failed to remove quote items. Please try again." + } + }, + "PriceSummary": { + "taxToBeDetermined": "TBD", + "orderSummary": "Order Summary", + "giftOptionsTax": { + "printedCard": { + "title": "Printed card", + "inclTax": "Including taxes", + "exclTax": "excluding taxes" + }, + "itemGiftWrapping": { + "title": "Item gift wrapping", + "inclTax": "Including taxes", + "exclTax": "excluding taxes" + }, + "orderGiftWrapping": { + "title": "Order gift wrapping", + "inclTax": "Including taxes", + "exclTax": "excluding taxes" + } + }, + "subTotal": { + "label": "Subtotal", + "withTaxes": "Including taxes", + "withoutTaxes": "excluding taxes" + }, + "shipping": { + "label": "Shipping", + "withTaxes": "Including taxes", + "withoutTaxes": "excluding taxes" + }, + "taxes": { + "total": "Tax Total", + "totalOnly": "Tax", + "breakdown": "Taxes", + "showBreakdown": "Show Tax Breakdown", + "hideBreakdown": "Hide Tax Breakdown" + }, + "total": { + "free": "Free", + "label": "Total", + "withoutTax": "Total excluding taxes", + "saved": "Total saved" + } + }, + "QuoteSummaryList": { + "discountedPrice": "Discounted Price", + "discountPercentage": "{discount}% off", + "editQuote": "Edit", + "file": "{count} file", + "files": "{count} files", + "heading": "Negotiable Quote ({count})", + "listOfQuoteItems": "List of Quote Items", + "regularPrice": "Regular Price", + "savingsAmount": "Savings", + "viewMore": "View more" + } + }, + "NegotiableQuoteTemplate": { + "Manage": { + "createdLabel": "Created:", + "salesRepLabel": "Sales Rep:", + "expiresLabel": "Expires:", + "templateIdLabel": "Template ID:", + "referenceDocuments": { + "title": "Reference Documents", + "add": "Add", + "edit": "Edit", + "remove": "Remove", + "noReferenceDocuments": "No reference documents", + "form": { + "title": "Document Information", + "documentNameLabel": "Document name", + "documentIdentifierLabel": "Document identifier", + "referenceUrlLabel": "Reference URL", + "addButton": "Add to Quote Template", + "updateButton": "Update Document", + "cancelButton": "Cancel", + "documentNameRequired": "Document name is required", + "documentIdentifierRequired": "Document identifier is required", + "referenceUrlRequired": "Reference URL is required", + "invalidUrl": "Please enter a valid URL", + "errorHeading": "Error", + "duplicateUidError": "A document with this identifier already exists in the template. Please use a different identifier." + } + }, + "shippingInformation": { + "title": "Shipping Information" + }, + "comments": { + "title": "Comments" + }, + "historyLog": { + "title": "History Log" + }, + "tabs": { + "itemsQuoted": "Items Quoted", + "comments": "Comments", + "historyLog": "History Log" + }, + "templateComments": { + "title": "Template Comments", + "placeholder": "Add your comment" + }, + "actionsLabel": "Actions", + "actionButtons": { + "sendForReview": "Send for review", + "delete": "Delete template", + "cancel": "Cancel template", + "accept": "Accept", + "generateQuote": "Generate quote" + }, + "removeItemsModal": { + "title": "Change Quote Template Items", + "description": "Making changes to any quote template item changes the terms of the template. After you update the template, return it to the seller for review and approval.", + "cancelButton": "Cancel", + "confirmButton": "Remove", + "confirmButtonRemoving": "Removing...", + "successHeading": "Success", + "successMessage": "Quote template items have been successfully removed.", + "errorHeading": "Error", + "errorMessage": "Failed to remove quote template items. Please try again." + }, + "updateQuantitiesModal": { + "title": "Change Quote Template Items", + "description": "Making changes to any quote template item changes the terms of the template. After you update the template, return it to the seller for review and approval.", + "cancelButton": "Cancel", + "updateButton": "Apply Changes", + "successHeading": "Success", + "successMessage": "Quote template quantities have been successfully updated.", + "errorHeading": "Error", + "errorMessage": "Failed to update quote template quantities. Please try again." + }, + "confirmationModal": { + "cancel": "Cancel", + "delete": { + "title": "Delete Quote Template", + "message": "Are you sure you want to delete this quote template?", + "confirm": "Delete", + "errorHeading": "Error", + "errorFallback": "Failed to delete quote template", + "successHeading": "Success", + "successDescription": "Quote template has been successfully deleted" + }, + "cancelTemplate": { + "title": "Cancel Quote Template", + "message": "Are you sure you want to cancel this quote template?", + "confirm": "Cancel Template", + "errorHeading": "Error", + "errorFallback": "Failed to cancel quote template", + "successHeading": "Success", + "successDescription": "Quote template has been successfully cancelled" + }, + "accept": { + "title": "Accept Quote Template", + "message": "Are you sure you want to accept this quote template?", + "confirm": "Accept", + "confirmLoading": "Accepting...", + "successHeading": "Quote Template Accepted", + "successDescription": "Quote template has been successfully accepted.", + "errorHeading": "Error", + "errorFallback": "Failed to accept quote template. Please try again." + }, + "generateQuote": { + "message": "Are you sure you want to generate a quote from this template?", + "confirm": "Generate Quote", + "confirmLoading": "Generating...", + "successHeading": "Quote Generated", + "successDescription": "Quote has been successfully generated from the template.", + "errorHeading": "Error", + "errorFallback": "Failed to generate quote from template. Please try again." + } + }, + "quotePricesSummary": { + "subtotal": { + "excludingTax": "Quote Template Subtotal (excluding tax)" + }, + "appliedTaxes": "Applied Taxes", + "grandTotal": { + "includingTax": "Quote Template Grand Total (including tax)" + } + }, + "lineItemNoteModal": { + "errorHeading": "Error" + }, + "rename": { + "title": "Rename Quote Template", + "templateNameLabel": "Template name", + "reasonLabel": "Reason for change", + "renameButton": "Rename", + "cancelButton": "Cancel", + "errorHeading": "Error", + "templateNameRequired": "Template name is required", + "errorDefault": "Failed to rename quote template. Please try again.", + "successHeading": "Success", + "successMessage": "Quote template renamed successfully!" + }, + "unsavedChangesWarningHeading": "Unsaved Changes", + "unsavedChangesWarningMessage": "The quote template must be submitted for review to save the changes.", + "shippingAddressWarningHeading": "No Shipping Address", + "shippingAddressWarningMessage": "No shipping address has been set for this quote template." + } + }, + "historyLog": { + "changeTypes": { + "created": "Quote Created", + "updated": "Quote Updated", + "statusChanged": "Status Changed", + "commentAdded": "Comment Added", + "expirationChanged": "Expiration Changed" + }, + "noteTypes": { + "buyerNoteAdded": "Buyer Note Added", + "sellerNoteAdded": "Seller Note Added" + }, + "authorLabels": { + "buyer": "(Buyer)", + "seller": "(Seller)" + }, + "changeDetails": { + "comment": "Comment: \"{comment}\"", + "statusChangedFromTo": "Status changed from {oldStatus} to {newStatus}", + "statusSetTo": "Status set to {newStatus}", + "expirationChangedFromTo": "Expiration changed from {oldExpiration} to {newExpiration}", + "expirationSetTo": "Expiration set to {newExpiration}", + "totalChangedFromTo": "Total changed from {oldTotal} to {newTotal}", + "customChange": "{title}: changed from \"{oldValue}\" to \"{newValue}\"", + "productsRemovedFromCatalog": "Products removed from catalog: {products}", + "productsRemovedFromQuote": "Products removed from quote: {products}", + "noDetailsAvailable": "No details available" + }, + "emptyState": "No history available for this quote." + }, + "QuoteManagement": { + "QuotesListTable": { + "quoteName": "Quote Name", + "created": "Created", + "createdBy": "Created By", + "status": "Status", + "lastUpdated": "Last Updated", + "quoteTemplate": "Quote Template", + "quoteTotal": "Quote Total", + "actions": "Action" + }, + "QuoteTemplatesListTable": { + "name": "Template Name", + "state": "State", + "status": "Status", + "validUntil": "Valid Until", + "minQuoteTotal": "Min. Quote Total (Negotiated)", + "ordersPlaced": "Orders Placed", + "lastOrdered": "Last Ordered", + "actions": "Action", + "view": "View" + } + } +} +``` + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/events.mdx b/src/content/docs/dropins-b2b/quote-management/events.mdx new file mode 100644 index 000000000..6960b9411 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/events.mdx @@ -0,0 +1,1542 @@ +--- +title: Quote Management Data & Events +description: Learn about the events used by the Quote Management and the data available within the events. +sidebar: + label: Events + order: 5 +--- + +import { Aside } from '@astrojs/starlight/components'; +import TableWrapper from '@components/TableWrapper.astro'; + +The **Quote Management** drop-in uses the [event bus](/sdk/reference/events) to emit and listen to events for communication between drop-ins and external integrations. + +
+Version: 1.0.0-beta5 +
+ +## Events reference + +{/* EVENTS_TABLE_START */} + + +| Event | Direction | Description | +|-------|-----------|-------------| +| [quote-management/file-upload-error](#quote-managementfile-upload-error-emits) | Emits | Emitted when a specific condition or state change occurs. | +| [quote-management/line-item-note-set](#quote-managementline-item-note-set-emits) | Emits | Emitted when a specific condition or state change occurs. | +| [quote-management/negotiable-quote-delete-error](#quote-managementnegotiable-quote-delete-error-emits) | Emits | Emitted when a specific condition or state change occurs. | +| [quote-management/negotiable-quote-deleted](#quote-managementnegotiable-quote-deleted-emits) | Emits | Emitted when a specific condition or state change occurs. | +| [quote-management/negotiable-quote-requested](#quote-managementnegotiable-quote-requested-emits) | Emits | Emitted when a specific condition or state change occurs. | +| [quote-management/quote-data/error](#quote-managementquote-dataerror-emits) | Emits | Emitted when an error occurs. | +| [quote-management/quote-data/initialized](#quote-managementquote-datainitialized-emits) | Emits | Emitted when the component completes initialization. | +| [quote-management/quote-template-data/error](#quote-managementquote-template-dataerror-emits) | Emits | Emitted when an error occurs. | +| [quote-management/quote-template-deleted](#quote-managementquote-template-deleted-emits) | Emits | Emitted when a specific condition or state change occurs. | +| [quote-management/quote-template-generated](#quote-managementquote-template-generated-emits) | Emits | Emitted when a specific condition or state change occurs. | +| [quote-management/quote-templates-data](#quote-managementquote-templates-data-emits) | Emits | Emitted when a specific condition or state change occurs. | +| [auth/permissions](#authpermissions-listens) | Listens | Fired by Auth (`auth`) when permissions are updated. | +| [checkout/updated](#checkoutupdated-listens) | Listens | Fired by Checkout (`checkout`) when the component state is updated. | +| [quote-management/initialized](#quote-managementinitialized-emits-and-listens) | Emits and listens | Triggered when the component completes initialization. | +| [quote-management/negotiable-quote-close-error](#quote-managementnegotiable-quote-close-error-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | +| [quote-management/negotiable-quote-closed](#quote-managementnegotiable-quote-closed-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | +| [quote-management/permissions](#quote-managementpermissions-emits-and-listens) | Emits and listens | Triggered when permissions are updated. | +| [quote-management/quantities-updated](#quote-managementquantities-updated-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | +| [quote-management/quote-data](#quote-managementquote-data-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | +| [quote-management/quote-duplicated](#quote-managementquote-duplicated-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | +| [quote-management/quote-items-removed](#quote-managementquote-items-removed-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | +| [quote-management/quote-renamed](#quote-managementquote-renamed-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | +| [quote-management/quote-sent-for-review](#quote-managementquote-sent-for-review-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | +| [quote-management/quote-template-data](#quote-managementquote-template-data-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | +| [quote-management/shipping-address-set](#quote-managementshipping-address-set-emits-and-listens) | Emits and listens | Emitted and consumed for internal and external communication. | + + +{/* EVENTS_TABLE_END */} + +## Event details + +The following sections provide detailed information about each event, including its direction, event payload, and usage examples. + + +### `auth/permissions` (listens) + +Fired by Auth (`auth`) when permissions are updated. + +#### Event payload + +```typescript +AuthPermissionsPayload +``` + + + + + +#### Example + +```js +import { events } from '@dropins/tools/event-bus.js'; + +events.on('auth/permissions', (payload) => { + console.log('auth/permissions event received:', payload); + // Add your custom logic here +}); +``` + + + + + + +### `checkout/updated` (listens) + +Fired by Checkout (`checkout`) when the component state is updated. + +#### Event payload + +```typescript +Cart | NegotiableQuote | null +``` + +See [`Cart`](/dropins/checkout/events#cart), [`NegotiableQuote`](/dropins/checkout/events#negotiablequote) for full type definitions. + + + + + +#### Example + +```js +import { events } from '@dropins/tools/event-bus.js'; + +events.on('checkout/updated', (payload) => { + console.log('checkout/updated event received:', payload); + // Add your custom logic here +}); +``` + + + + + + +### `quote-management/file-upload-error` (emits) + +Emitted when a specific condition or state change occurs. + +#### Event payload + +```typescript +{ + error: string; + fileName?: string; +} +``` + + + + + +#### Example + +```js +import { events } from '@dropins/tools/event-bus.js'; + +events.on('quote-management/file-upload-error', (payload) => { + console.log('quote-management/file-upload-error event received:', payload); + // Add your custom logic here +}); +``` + + + + + + +### `quote-management/initialized` (emits and listens) + +Triggered when the component completes initialization. + +#### Event payload + +```typescript +{ + config: StoreConfigModel; +} +``` + +See [`StoreConfigModel`](#storeconfigmodel) for full type definition. + + + +#### When triggered + +- After `initialize()` function completes +- On drop-in first load + + + +#### Example: Example + +```js +import { events } from '@dropins/tools/event-bus.js'; + +events.on('quote-management/initialized', () => { + console.log('Quote Management ready'); + loadQuotesList(); +}); +``` + +--- + + + + + + +### `quote-management/line-item-note-set` (emits) + +Emitted when a specific condition or state change occurs. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel; + input: { + quoteUid: string; + itemUid: string; + note: string; + quantity?: number; +} +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- After calling `setLineItemNote()` +- When merchant or buyer adds/updates item notes + + + +#### Example: Example + +```js +events.on('quote-management/line-item-note-set', (payload) => { + console.log(`Note set on item ${payload.data.itemId}:`, payload.data.note); + refreshQuoteItemsList(); +}); +``` + +--- + + + + + + +### `quote-management/negotiable-quote-close-error` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + error: Error; + attemptedQuoteUids: string[]; +} +``` + + + + + +#### Example + +```js +import { events } from '@dropins/tools/event-bus.js'; + +events.on('quote-management/negotiable-quote-close-error', (payload) => { + console.log('quote-management/negotiable-quote-close-error event received:', payload); + // Add your custom logic here +}); +``` + + + + + + +### `quote-management/negotiable-quote-closed` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + closedQuoteUids: string[]; + resultStatus: string; +} +``` + + + +#### When triggered + +- After calling `closeNegotiableQuote()` +- When quote reaches final state + + + +#### Example: Example + +```js +events.on('quote-management/negotiable-quote-closed', (payload) => { + console.log(`Quote ${payload.data.quoteId} closed`); + redirectToQuotesList(); +}); +``` + +--- + + + + + + +### `quote-management/negotiable-quote-delete-error` (emits) + +Emitted when a specific condition or state change occurs. + +#### Event payload + +```typescript +{ + error: Error; + attemptedQuoteUids: string[]; +} +``` + + + + + +#### Example + +```js +import { events } from '@dropins/tools/event-bus.js'; + +events.on('quote-management/negotiable-quote-delete-error', (payload) => { + console.log('quote-management/negotiable-quote-delete-error event received:', payload); + // Add your custom logic here +}); +``` + + + + + + +### `quote-management/negotiable-quote-deleted` (emits) + +Emitted when a specific condition or state change occurs. + +#### Event payload + +```typescript +{ + deletedQuoteUids: string[]; + resultStatus: string; +} +``` + + + +#### When triggered + +- After calling `deleteQuote()` +- After successful quote deletion + + + +#### Example: Example + +```js +events.on('quote-management/negotiable-quote-deleted', (payload) => { + console.log(`Quote ${payload.data.quoteId} deleted`); + removeQuoteFromList(payload.data.quoteId); +}); +``` + +--- + + + + + + +### `quote-management/negotiable-quote-requested` (emits) + +Emitted when a specific condition or state change occurs. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel | null; + input: { + cartId: string; + quoteName: string; + comment?: string; + attachments?: { key: string }[]; + isDraft?: boolean; +} +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- After calling `requestNegotiableQuote()` +- When buyer submits quote request + + + +#### Example: Example + +```js +events.on('quote-management/negotiable-quote-requested', (payload) => { + console.log(`Quote ${payload.data.quoteName} requested`); + showSuccessMessage('Quote request submitted'); + redirectToQuoteDetails(payload.data.quoteId); +}); +``` + +--- + + + + + + +### `quote-management/permissions` (emits and listens) + +Triggered when permissions are updated. + +#### Event payload + +```typescript +typeof state.permissions +``` + + + +#### When triggered + +- After permission changes +- On user role updates +- After company context switches + + + +#### Example: Example + +```js +events.on('quote-management/permissions', (payload) => { + const canRequestQuote = payload.data.permissions.includes('request_quote'); + updateQuoteActions(canRequestQuote); +}); +``` + +--- + + + + + + +### `quote-management/quantities-updated` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel; + input: { + quoteUid: string; + items: Array<{ quoteItemUid: string; quantity: number }>; +} +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- After calling `updateQuantities()` +- When buyer or merchant updates quantities + + + +#### Example: Example + +```js +events.on('quote-management/quantities-updated', (payload) => { + console.log(`Quantities updated for quote ${payload.data.quoteId}`); + refreshQuoteTotals(); +}); +``` + +--- + + + + + + +### `quote-management/quote-data` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel; + permissions: typeof state.permissions; +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- After loading quote details +- After any quote modification +- After status changes + + + +#### Example: Example + +```js +events.on('quote-management/quote-data', (payload) => { + console.log('Quote data updated:', payload.data); + updateQuoteDisplay(payload.data); +}); +``` + +--- + + + + + + +### `quote-management/quote-data/error` (emits) + +Emitted when an error occurs. + +#### Event payload + +```typescript +{ + error: Error; +} +``` + + + + + +#### Example + +```js +import { events } from '@dropins/tools/event-bus.js'; + +events.on('quote-management/quote-data/error', (payload) => { + console.log('quote-management/quote-data/error event received:', payload); + // Add your custom logic here +}); +``` + + + + + + +### `quote-management/quote-data/initialized` (emits) + +Emitted when the component completes initialization. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel; + permissions: typeof state.permissions; +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- On first load of quote details +- After quote context is established + + + +#### Example: Example + +```js +events.on('quote-management/quote-data/initialized', (payload) => { + console.log('Quote initialized:', payload.data.number); + setupQuoteWorkflow(payload.data); +}); +``` + +--- + + + + + + +### `quote-management/quote-duplicated` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel; + input: { + quoteUid: string; + duplicatedQuoteUid: string; +} + hasOutOfStockItems?: boolean; +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- After calling `duplicateQuote()` +- When creating copy of existing quote + + + +#### Example: Example + +```js +events.on('quote-management/quote-duplicated', (payload) => { + console.log(`Quote duplicated: ${payload.data.originalQuoteId} -> ${payload.data.newQuoteId}`); + redirectToQuote(payload.data.newQuoteId); +}); +``` + +--- + + + + + + +### `quote-management/quote-items-removed` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel; + removedItemUids: string[]; + input: RemoveNegotiableQuoteItemsInput; +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- After calling `removeNegotiableQuoteItems()` +- When items are deleted from quote + + + +#### Example: Example + +```js +events.on('quote-management/quote-items-removed', (payload) => { + console.log(`Removed ${payload.data.removedItemIds.length} items`); + refreshQuoteItemsList(); +}); +``` + +--- + + + + + + +### `quote-management/quote-renamed` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel; + input: { + quoteUid: string; + quoteName: string; + quoteComment?: string; +} +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- After calling `renameNegotiableQuote()` +- When quote name is updated + + + +#### Example: Example + +```js +events.on('quote-management/quote-renamed', (payload) => { + console.log(`Quote renamed to: ${payload.data.newName}`); + updateQuoteHeader(payload.data.newName); +}); +``` + +--- + + + + + + +### `quote-management/quote-sent-for-review` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel; + input: { + quoteUid: string; + comment?: string; + attachments?: { key: string }[]; +} +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- After calling `sendForReview()` +- When buyer submits quote for negotiation + + + +#### Example: Example + +```js +events.on('quote-management/quote-sent-for-review', (payload) => { + console.log(`Quote ${payload.data.quoteId} sent for review`); + showSuccessMessage('Quote submitted for merchant review'); + updateQuoteStatus('pending'); +}); +``` + +--- + + + + + + +### `quote-management/quote-template-data` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + quoteTemplate: NegotiableQuoteTemplateModel; + permissions: typeof state.permissions; +} +``` + +See [`NegotiableQuoteTemplateModel`](#negotiablequotetemplatemodel) for full type definition. + + + +#### When triggered + +- After loading template details +- After template modifications +- After template status changes + + + +#### Example: Example + +```js +events.on('quote-management/quote-template-data', (payload) => { + console.log('Template data updated:', payload.data); + updateTemplateDisplay(payload.data); +}); +``` + +--- + + + + + + +### `quote-management/quote-template-data/error` (emits) + +Emitted when an error occurs. + +#### Event payload + +```typescript +{ + error: Error; +} +``` + + + + + +#### Example + +```js +import { events } from '@dropins/tools/event-bus.js'; + +events.on('quote-management/quote-template-data/error', (payload) => { + console.log('quote-management/quote-template-data/error event received:', payload); + // Add your custom logic here +}); +``` + + + + + + +### `quote-management/quote-template-deleted` (emits) + +Emitted when a specific condition or state change occurs. + +#### Event payload + +```typescript +{ + templateId: string; +} +``` + + + +#### When triggered + +- After calling `deleteQuoteTemplate()` +- After successful template deletion + + + +#### Example: Example + +```js +events.on('quote-management/quote-template-deleted', (payload) => { + console.log(`Template ${payload.data.templateId} deleted`); + removeTemplateFromList(payload.data.templateId); +}); +``` + +--- + + + + + + +### `quote-management/quote-template-generated` (emits) + +Emitted when a specific condition or state change occurs. + +#### Event payload + +```typescript +{ + quoteId: string; +} +``` + + + +#### When triggered + +- After calling `generateQuoteFromTemplate()` +- When creating quote from template + + + +#### Example 1: Basic template generation + +```js +events.on('quote-management/quote-template-generated', (payload) => { + console.log(`Quote ${payload.data.quoteId} generated from template ${payload.data.templateId}`); + redirectToQuote(payload.data.quoteId); +}); +``` + +#### Example 2: Template catalog with quick-quote generation + +```js +import { events } from '@dropins/tools/event-bus.js'; +import { generateQuoteFromTemplate, getQuoteTemplates } from '@dropins/storefront-quote-management/api.js'; + +class QuoteTemplateCatalog { + constructor(containerElement) { + this.container = containerElement; + this.templates = []; + + // Listen for template generation + events.on('quote-management/quote-template-generated', this.handleQuoteGenerated.bind(this)); + + this.init(); + } + + async init() { + try { + // Load all available templates + const response = await getQuoteTemplates({ + currentPage: 1, + pageSize: 50, + sort: { field: 'name', direction: 'ASC' } + }); + + this.templates = response.items; + this.render(); + + } catch (error) { + this.showError('Failed to load quote templates'); + console.error(error); + } + } + + render() { + this.container.innerHTML = ` +
+

Quote Templates

+
+ ${this.templates.map(template => this.renderTemplateCard(template)).join('')} +
+
+ `; + + // Attach event listeners + this.container.querySelectorAll('.generate-quote-btn').forEach(btn => { + btn.addEventListener('click', (e) => { + const templateUid = e.target.dataset.templateUid; + this.generateQuote(templateUid); + }); + }); + } + + renderTemplateCard(template) { + return ` +
+
+

${template.name}

+ ${template.items.length} items +
+
+ Total: ${template.prices.grandTotal.value} + Created: ${formatDate(template.createdAt)} +
+
+ + +
+
+ `; + } + + async generateQuote(templateUid) { + const template = this.templates.find(t => t.uid === templateUid); + if (!template) return; + + try { + // Show loading state + this.showLoadingOverlay(`Generating quote from "${template.name}"...`); + + // Generate quote from template + await generateQuoteFromTemplate(templateUid); + + // Event handler will redirect when complete + + } catch (error) { + this.hideLoadingOverlay(); + this.showError('Failed to generate quote: ' + error.message); + console.error(error); + } + } + + handleQuoteGenerated(payload) { + const { templateId, quoteId } = payload.data; + + this.hideLoadingOverlay(); + + // Get template name for notification + const template = this.templates.find(t => t.uid === templateId); + const templateName = template ? template.name : 'template'; + + // Show success notification + this.showSuccess(`Quote generated from "${templateName}"`); + + // Track analytics + trackAnalytics('quote_generated_from_template', { + templateId, + quoteId, + templateName + }); + + // Redirect to the new quote for editing + setTimeout(() => { + window.location.href = `/quotes/${quoteId}`; + }, 1500); + } + + showLoadingOverlay(message) { + const overlay = document.createElement('div'); + overlay.id = 'loading-overlay'; + overlay.innerHTML = ` + +
${message}
+ `; + document.body.appendChild(overlay); + } + + hideLoadingOverlay() { + const overlay = document.getElementById('loading-overlay'); + if (overlay) overlay.remove(); + } + + showSuccess(message) { + this.showToast(message, 'success'); + } + + showError(message) { + this.showToast(message, 'error'); + } + + showToast(message, type) { + const toast = document.createElement('div'); + toast.className = `toast toast-${type}`; + toast.textContent = message; + document.body.appendChild(toast); + setTimeout(() => toast.remove(), 3000); + } +} + +// Initialize template catalog +const catalog = new QuoteTemplateCatalog(document.querySelector('#template-catalog')); +``` + +#### Example 3: Recurring order workflow using templates + +```js +import { events } from '@dropins/tools/event-bus.js'; +import { generateQuoteFromTemplate, submitNegotiableQuote } from '@dropins/storefront-quote-management/api.js'; + +/** + * Automated recurring order system using quote templates + * Useful for customers who regularly order the same items + */ +class RecurringOrderManager { + constructor() { + this.activeOrders = []; + + events.on('quote-management/quote-template-generated', this.handleGeneration.bind(this)); + events.on('quote-management/quote-sent-for-review', this.handleSubmission.bind(this)); + } + + /** + * Set up a recurring order schedule + */ + async scheduleRecurringOrder(templateUid, schedule) { + const recurringOrder = { + templateUid, + schedule, // e.g., { frequency: 'monthly', dayOfMonth: 1 } + status: 'active', + lastGenerated: null, + nextGeneration: this.calculateNextDate(schedule) + }; + + // Save to user preferences + await this.saveRecurringOrder(recurringOrder); + + // Set up next execution + this.scheduleNextGeneration(recurringOrder); + + return recurringOrder; + } + + /** + * Generate quote from template on schedule + */ + async generateScheduledQuote(templateUid, autoSubmit = true) { + try { + console.log(`Generating scheduled quote from template ${templateUid}`); + + // Generate the quote + await generateQuoteFromTemplate(templateUid); + + // Store auto-submit preference + if (autoSubmit) { + this.pendingAutoSubmits.add(templateUid); + } + + } catch (error) { + console.error('Failed to generate scheduled quote:', error); + + // Notify user of failure + this.notifyGenerationFailure(templateUid, error); + } + } + + /** + * Handle successful quote generation + */ + async handleGeneration(payload) { + const { templateId, quoteId } = payload.data; + + console.log(`Quote ${quoteId} generated from template ${templateId}`); + + // Check if this was an automated generation + if (this.pendingAutoSubmits.has(templateId)) { + // Automatically submit for review + try { + await submitNegotiableQuote(quoteId); + console.log(`Auto-submitted quote ${quoteId} for review`); + + this.pendingAutoSubmits.delete(templateId); + + } catch (error) { + console.error('Failed to auto-submit quote:', error); + + // Notify user to manually submit + this.notifyManualSubmissionNeeded(quoteId); + } + } + + // Update recurring order record + await this.updateRecurringOrderHistory(templateId, quoteId); + } + + /** + * Handle quote submission + */ + handleSubmission(payload) { + const { quoteId } = payload.data; + + // Send confirmation email + this.sendSubmissionConfirmation(quoteId); + + // Update dashboard + this.updateDashboard(); + } + + calculateNextDate(schedule) { + const now = new Date(); + switch (schedule.frequency) { + case 'weekly': + return new Date(now.setDate(now.getDate() + 7)); + case 'monthly': + return new Date(now.setMonth(now.getMonth() + 1, schedule.dayOfMonth)); + case 'quarterly': + return new Date(now.setMonth(now.getMonth() + 3, schedule.dayOfMonth)); + default: + return null; + } + } + + scheduleNextGeneration(recurringOrder) { + const delay = recurringOrder.nextGeneration - new Date(); + setTimeout(() => { + this.generateScheduledQuote(recurringOrder.templateUid, true); + }, delay); + } + + // Helper methods + pendingAutoSubmits = new Set(); + + async saveRecurringOrder(order) { /* Save to backend */ } + async updateRecurringOrderHistory(templateId, quoteId) { /* Update history */ } + notifyGenerationFailure(templateId, error) { /* Send notification */ } + notifyManualSubmissionNeeded(quoteId) { /* Send notification */ } + sendSubmissionConfirmation(quoteId) { /* Send email */ } + updateDashboard() { /* Refresh UI */ } +} + +// Initialize recurring order system +const recurringOrders = new RecurringOrderManager(); + +// Example: Set up monthly recurring order +recurringOrders.scheduleRecurringOrder('template-uid-123', { + frequency: 'monthly', + dayOfMonth: 1 +}); +``` + + + +#### Usage scenarios + +- One-click quote generation from commonly used templates. +- Streamline repeat ordering workflows for regular customers. +- Implement recurring order systems based on templates. +- Quick quote creation for standard product bundles. +- Template-based ordering for seasonal or periodic purchases. +- Automated quote generation for subscription-like B2B orders. + +--- + + + + +### `quote-management/quote-templates-data` (emits) + +Emitted when a specific condition or state change occurs. + +#### Event payload + +```typescript +{ + quoteTemplates: NegotiableQuoteTemplatesListModel; + permissions: typeof state.permissions; +} +``` + +See [`NegotiableQuoteTemplatesListModel`](#negotiablequotetemplateslistmodel) for full type definition. + + + +#### When triggered + +- After loading templates list +- After template creation/deletion +- After template status changes + + + +#### Example: Example + +```js +events.on('quote-management/quote-templates-data', (payload) => { + console.log(`${payload.data.totalCount} templates loaded`); + updateTemplatesList(payload.data.templates); +}); +``` + +--- + + + + + + +### `quote-management/shipping-address-set` (emits and listens) + +Emitted and consumed for internal and external communication. + +#### Event payload + +```typescript +{ + quote: NegotiableQuoteModel; + input: { + quoteUid: string; + addressId?: number; + addressData?: AddressInput; +} +} +``` + +See [`NegotiableQuoteModel`](#negotiablequotemodel) for full type definition. + + + +#### When triggered + +- After calling `setShippingAddress()` +- When shipping address is updated + + + +#### Example: Example + +```js +events.on('quote-management/shipping-address-set', (payload) => { + console.log('Shipping address set:', payload.data.address); + refreshShippingMethods(); + recalculateQuoteTotals(); +}); +``` + +--- + +## Listening to events + +All Quote Management events are emitted through the centralized event bus: + +```js +import { events } from '@dropins/tools/event-bus.js'; + +// Listen to quote lifecycle events +events.on('quote-management/negotiable-quote-requested', handleQuoteRequest); +events.on('quote-management/quote-sent-for-review', handleQuoteReview); +events.on('quote-management/quote-duplicated', handleQuoteDuplicate); + +// Listen to quote data changes +events.on('quote-management/quote-data', handleQuoteUpdate); +events.on('quote-management/quantities-updated', handleQuantityChange); + +// Listen to template events +events.on('quote-management/quote-template-generated', handleTemplateGeneration); +events.on('quote-management/quote-templates-data', handleTemplatesLoad); + +// Clean up listeners +events.off('quote-management/quote-data', handleQuoteUpdate); +``` + + + + + +## Event flow examples + + + + + + + + +## Data Models + +The following data models are used in event payloads for this drop-in. + +### NegotiableQuoteModel + +Used in: [`quote-management/line-item-note-set`](#quote-managementline-item-note-set-emits), [`quote-management/negotiable-quote-requested`](#quote-managementnegotiable-quote-requested-emits), [`quote-management/quantities-updated`](#quote-managementquantities-updated-emits-and-listens), [`quote-management/quote-data`](#quote-managementquote-data-emits-and-listens), [`quote-management/quote-data/initialized`](#quote-managementquote-datainitialized-emits), [`quote-management/quote-duplicated`](#quote-managementquote-duplicated-emits-and-listens), [`quote-management/quote-items-removed`](#quote-managementquote-items-removed-emits-and-listens), [`quote-management/quote-renamed`](#quote-managementquote-renamed-emits-and-listens), [`quote-management/quote-sent-for-review`](#quote-managementquote-sent-for-review-emits-and-listens), [`quote-management/shipping-address-set`](#quote-managementshipping-address-set-emits-and-listens). + +```ts +interface NegotiableQuoteModel { + uid: string; + name: string; + createdAt: string; + salesRepName: string; + expirationDate: string; + updatedAt: string; + status: NegotiableQuoteStatus; + isVirtual: boolean; + buyer: { + firstname: string; + lastname: string; + }; + templateName?: string; + totalQuantity: number; + comments?: { + uid: string; + createdAt: string; + author: { + firstname: string; + lastname: string; + }; + text: string; + attachments?: { + name: string; + url: string; + }[]; + }[]; + history?: NegotiableQuoteHistoryEntry[]; + prices: { + appliedDiscounts?: Discount[]; + appliedTaxes?: Tax[]; + discount?: Currency; + grandTotal?: Currency; + grandTotalExcludingTax?: Currency; + shippingExcludingTax?: Currency; + shippingIncludingTax?: Currency; + subtotalExcludingTax?: Currency; + subtotalIncludingTax?: Currency; + subtotalWithDiscountExcludingTax?: Currency; + totalTax?: Currency; + }; + items: CartItemModel[]; + shippingAddresses?: ShippingAddress[]; + canCheckout: boolean; + canSendForReview: boolean; + lockedForEditing?: boolean; + canDelete: boolean; + canClose: boolean; + canUpdateQuote: boolean; + readOnly: boolean; +} +``` + +### NegotiableQuoteTemplateModel + +Used in: [`quote-management/quote-template-data`](#quote-managementquote-template-data-emits-and-listens). + +```ts +interface NegotiableQuoteTemplateModel { + id: string; + uid: string; + name: string; + createdAt: string; + updatedAt: string; + expirationDate?: string; + status: NegotiableQuoteTemplateStatus; + salesRepName: string; + buyer: { + firstname: string; + lastname: string; + }; + comments?: QuoteTemplateComment[]; + history?: NegotiableQuoteHistoryEntry[]; + prices: { + subtotalExcludingTax?: Currency; + subtotalIncludingTax?: Currency; + subtotalWithDiscountExcludingTax?: Currency; + grandTotal?: Currency; + appliedTaxes?: { + amount: Currency; + label: string; + }[]; + }; + items: CartItemModel[]; + shippingAddresses?: ShippingAddress[]; + referenceDocuments?: { + uid: string; + name: string; + identifier?: string; + url: string; + }[]; + // Template-specific fields + quantityThresholds?: { + min?: number; + max?: number; + }; + canAccept: boolean; + canDelete: boolean; + canReopen: boolean; + canCancel: boolean; + canSendForReview: boolean; + canGenerateQuoteFromTemplate: boolean; + canEditTemplateItems: boolean; +} +``` + +### NegotiableQuoteTemplatesListModel + +Used in: [`quote-management/quote-templates-data`](#quote-managementquote-templates-data-emits). + +```ts +interface NegotiableQuoteTemplatesListModel { + items: NegotiableQuoteTemplateListEntry[]; + pageInfo: { + currentPage: number; + pageSize: number; + totalPages: number; + }; + totalCount: number; + paginationInfo?: PaginationInfo; + sortFields?: { + default: string; + options: Array<{ + label: string; + value: string; + }>; + }; +} +``` + +### StoreConfigModel + +Used in: [`quote-management/initialized`](#quote-managementinitialized-emits-and-listens). + +```ts +interface StoreConfigModel { + quoteSummaryDisplayTotal: number; + quoteSummaryMaxItems: number; + quoteDisplaySettings: { + zeroTax: boolean; + subtotal: QuoteDisplayAmount; + price: QuoteDisplayAmount; + shipping: QuoteDisplayAmount; + fullSummary: boolean; + grandTotal: boolean; + }; + useConfigurableParentThumbnail: boolean; + quoteMinimumAmount: number | null; + quoteMinimumAmountMessage: string | null; +} +``` + diff --git a/src/content/docs/dropins-b2b/quote-management/functions.mdx b/src/content/docs/dropins-b2b/quote-management/functions.mdx new file mode 100644 index 000000000..067334e15 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/functions.mdx @@ -0,0 +1,1005 @@ +--- +title: Quote Management Functions +description: API functions provided by the Quote Management drop-in for programmatic control and customization. +sidebar: + label: Functions + order: 6 +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 3 +--- + +import TableWrapper from '@components/TableWrapper.astro'; +import Link from '@components/Link.astro'; +import { Aside } from '@astrojs/starlight/components'; + +The Quote Management drop-in provides **17 API functions** for managing negotiable quotes and quote templates, including creating quotes, adding items, managing shipping addresses, and processing quote workflows. + +
+Version: 1.0.0-beta5 +
+ + + +| Function | Description | +| --- | --- | +| [`acceptQuoteTemplate`](#acceptquotetemplate) | Accepts a negotiable quote template. | +| [`addQuoteTemplateLineItemNote`](#addquotetemplatelineitemnote) | Adds a buyer's note to a specific item in a negotiable quote template. | +| [`addQuoteTemplateShippingAddress`](#addquotetemplateshippingaddress) | Assigns a shipping address to a negotiable quote template. | +| [`cancelQuoteTemplate`](#cancelquotetemplate) | Cancels a negotiable quote template. | +| [`closeNegotiableQuote`](#closenegotiablequote) | Closes one or more negotiable quotes via `GraphQL` mutation.. | +| [`createQuoteTemplate`](#createquotetemplate) | Creates a new negotiable quote template from an existing quote. | +| [`deleteQuote`](#deletequote) | Deletes one or more negotiable quotes. | +| [`deleteQuoteTemplate`](#deletequotetemplate) | Permanently deletes a negotiable quote template. | +| [`duplicateQuote`](#duplicatequote) | API function for the drop-in.. | +| [`generateQuoteFromTemplate`](#generatequotefromtemplate) | Generates a negotiable quote from an accepted quote template. | +| [`getQuoteData`](#getquotedata) | Fetches negotiable quote data by ID.. | +| [`getQuoteTemplateData`](#getquotetemplatedata) | Fetches negotiable quote template data by template ID. | +| [`getQuoteTemplates`](#getquotetemplates) | An asynchronous function that fetches the list of negotiable quote templates for the authenticated customer using `GraphQL` and returns the transformed result.. | +| [`getStoreConfig`](#getstoreconfig) | Returns information about a store's configuration.. | +| [`negotiableQuotes`](#negotiablequotes) | An asynchronous function that fetches the list of negotiable quotes for the authenticated customer using `GraphQL` and returns the transformed result.. | +| [`openQuoteTemplate`](#openquotetemplate) | Opens an existing negotiable quote template. | +| [`removeNegotiableQuoteItems`](#removenegotiablequoteitems) | Removes one or more items from a negotiable quote, returns the updated quote data, and emits an event so listeners can react to the change.. | +| [`removeQuoteTemplateItems`](#removequotetemplateitems) | Removes one or more products from an existing negotiable quote template. | +| [`renameNegotiableQuote`](#renamenegotiablequote) | Renames a negotiable quote. | +| [`requestNegotiableQuote`](#requestnegotiablequote) | Creates a new negotiable quote request from the current cart. | +| [`sendForReview`](#sendforreview) | Submits a negotiable quote for review by the seller. | +| [`sendQuoteTemplateForReview`](#sendquotetemplateforreview) | Submits a negotiable quote template for review by the seller. | +| [`setLineItemNote`](#setlineitemnote) | Updates (or creates) a buyer note for a specific negotiable quote line item.. | +| [`setShippingAddress`](#setshippingaddress) | Sets or updates the shipping address for a negotiable quote. | +| [`updateQuantities`](#updatequantities) | Updates the quantities of items in a negotiable quote. | +| [`updateQuoteTemplateItemQuantities`](#updatequotetemplateitemquantities) | Changes the quantity of one or more items in an existing negotiable quote template. | +| [`uploadFile`](#uploadfile) | API function for the drop-in.. | + + + +## acceptQuoteTemplate + +Accepts a negotiable quote template. This action finalizes the acceptance of a quote template from the buyer's side, returns the updated template data on success, and emits an event for successful acceptance. + +```ts +const acceptQuoteTemplate = async ( + params: AcceptQuoteTemplateParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `AcceptQuoteTemplateParams` | Yes | An object of type \`AcceptQuoteTemplateParams\` containing the template UID and acceptance details. See the type definition for available fields. | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns `void`. + +## addQuoteTemplateLineItemNote + +Adds a buyer's note to a specific item in a negotiable quote template. This allows buyers to provide additional information or special instructions for individual line items. + +```ts +const addQuoteTemplateLineItemNote = async ( + params: AddQuoteTemplateLineItemNoteParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `AddQuoteTemplateLineItemNoteParams` | Yes | An object of type \`AddQuoteTemplateLineItemNoteParams\` containing the template UID, item UID, and note text to add to a specific line item. | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns `void`. + +## addQuoteTemplateShippingAddress + +Assigns a shipping address to a negotiable quote template. This can be either a previously-defined customer address (by ID) or a new address provided with full details. + +```ts +const addQuoteTemplateShippingAddress = async ( + params: AddQuoteTemplateShippingAddressParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `AddQuoteTemplateShippingAddressParams` | Yes | An object of type \`AddQuoteTemplateShippingAddressParams\` containing the template UID and shipping address details (street, city, region, postal code, country). | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns `void`. + +## cancelQuoteTemplate + +Cancels a negotiable quote template. This action allows buyers to cancel a quote template they no longer need, with an optional comment to provide the reason for cancellation. Returns the updated template data on success and emits an event for successful cancellation. + +```ts +const cancelQuoteTemplate = async ( + params: CancelQuoteTemplateParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `CancelQuoteTemplateParams` | Yes | An object of type \`CancelQuoteTemplateParams\` containing the template UID to cancel. This moves the quote template to canceled status. | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns `void`. + +## closeNegotiableQuote + +Closes one or more negotiable quotes via `GraphQL` mutation. + +```ts +const closeNegotiableQuote = async ( + input: CloseNegotiableQuoteInput +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `input` | `CloseNegotiableQuoteInput` | Yes | Input parameters for retrieving or managing quotes. | + + + +### Events + +Emits the following events: [`quote-management/negotiable-quote-close-error`](/dropins-b2b/quote-management/events/#quote-managementnegotiable-quote-close-error-emits-and-listens), [`quote-management/negotiable-quote-closed`](/dropins-b2b/quote-management/events/#quote-managementnegotiable-quote-closed-emits-and-listens). + +### Returns + +Returns `CloseNegotiableQuoteResult`. + +## createQuoteTemplate + +Creates a new negotiable quote template from an existing quote. Returns the newly created template data on success and emits an event with the template data and user permissions. + +```ts +const createQuoteTemplate = async ( + quoteId: string +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `quoteId` | `string` | Yes | The unique identifier for the negotiable quote to convert into a reusable template. Creates a template that can be used to generate similar quotes in the future. | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns [`NegotiableQuoteTemplateModel`](#negotiablequotetemplatemodel) or `null`. + +## deleteQuote + +Deletes one or more negotiable quotes. Deleted quotes become invisible from both the Admin and storefront. On success, it emits an event with the deleted quote UIDs. + +```ts +const deleteQuote = async ( + quoteUids: string[] | string +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `quoteUids` | `string[] \| string` | Yes | One or more negotiable quote unique identifiers to delete. Can be a single UID string or an array of UIDs for batch deletion. This permanently removes the quotes. | + + + +### Events + +Emits the following events: [`quote-management/negotiable-quote-delete-error`](/dropins-b2b/quote-management/events/#quote-managementnegotiable-quote-delete-error-emits), [`quote-management/negotiable-quote-deleted`](/dropins-b2b/quote-management/events/#quote-managementnegotiable-quote-deleted-emits). + +### Returns + +Returns `DeleteQuoteOutput`. + +## deleteQuoteTemplate + +Permanently deletes a negotiable quote template. This action removes the template from the system, returns a success result, and emits an event for successful deletion. This operation is irreversible. + +```ts +const deleteQuoteTemplate = async ( + params: DeleteQuoteTemplateParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `DeleteQuoteTemplateParams` | Yes | An object of type \`DeleteQuoteTemplateParams\` containing the template UID to delete. This permanently removes the quote template. | + + + +### Events + +Emits the [`quote-management/quote-template-deleted`](/dropins-b2b/quote-management/events/#quote-managementquote-template-deleted-emits) event. + +### Returns + +Returns `void`. + +## duplicateQuote + +```ts +const duplicateQuote = async ( + input: DuplicateQuoteInput +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `input` | `DuplicateQuoteInput` | Yes | Input parameters for retrieving or managing quotes. | + + + +### Events + +Does not emit any drop-in events. + +### Returns + +Returns [`NegotiableQuoteModel`](#negotiablequotemodel) or `null`. + +## generateQuoteFromTemplate + +Generates a negotiable quote from an accepted quote template. This creates a new quote based on the template's configuration and items. + +```ts +const generateQuoteFromTemplate = async ( + params: GenerateQuoteFromTemplateParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `GenerateQuoteFromTemplateParams` | Yes | An object of type \`GenerateQuoteFromTemplateParams\` containing the template UID and any customization parameters. Creates a new negotiable quote based on the template structure. | + + + +### Events + +Emits the [`quote-management/quote-template-generated`](/dropins-b2b/quote-management/events/#quote-managementquote-template-generated-emits) event. + +### Returns + +Returns `void`. + +## getQuoteData + +Fetches negotiable quote data by ID. + +```ts +const getQuoteData = async ( + quoteId: string +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `quoteId` | `string` | Yes | The unique identifier for the negotiable quote to retrieve. Returns complete quote details including items, prices, history, comments, and negotiation status. | + + + +### Events + +Emits the [`quote-management/quote-data`](/dropins-b2b/quote-management/events/#quote-managementquote-data-emits-and-listens) event. + +### Returns + +Returns `void`. + +## getQuoteTemplateData + +Fetches negotiable quote template data by template ID. Returns the transformed template data on success and emits an event with the template data and user permissions. + +```ts +const getQuoteTemplateData = async ( + templateId: string +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `templateId` | `string` | Yes | The unique identifier for the quote template to retrieve. Returns template details including structure, items, and configuration settings. | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns [`NegotiableQuoteTemplateModel`](#negotiablequotetemplatemodel) or `null`. + +## getQuoteTemplates + +An asynchronous function that fetches the list of negotiable quote templates for the authenticated customer using `GraphQL` and returns the transformed result. + +```ts +const getQuoteTemplates = async ( + params: GetQuoteTemplatesParams = {} +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `GetQuoteTemplatesParams` | No | An optional object of type \`GetQuoteTemplatesParams\` containing pagination and filter criteria (currentPage, pageSize, filter). Omit to retrieve all templates with default pagination. | + + + +### Events + +Emits the [`quote-management/quote-templates-data`](/dropins-b2b/quote-management/events/#quote-managementquote-templates-data-emits) event. + +### Returns + +Returns [`NegotiableQuoteTemplatesListModel`](#negotiablequotetemplateslistmodel). + +## getStoreConfig + +Returns information about a store's configuration. + +```ts +const getStoreConfig = async (): Promise +``` + +### Events + +Does not emit any drop-in events. + +### Returns + +Returns [`StoreConfigModel`](#storeconfigmodel). + +## negotiableQuotes + +An asynchronous function that fetches the list of negotiable quotes for the authenticated customer using `GraphQL` and returns the transformed result. + +```ts +const negotiableQuotes = async ( + params: NegotiableQuotesParams = {} +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `NegotiableQuotesParams` | No | An optional object of type \`NegotiableQuotesParams\` containing pagination and filter criteria (currentPage, pageSize, filter). Omit to retrieve all negotiable quotes with default pagination. | + + + +### Events + +Does not emit any drop-in events. + +### Returns + +Returns [`NegotiableQuotesListModel`](#negotiablequoteslistmodel). + +## openQuoteTemplate + +Opens an existing negotiable quote template. This action allows buyers to reopen a quote template for viewing or editing, returns the updated template data on success, and emits an event with the template data. + +```ts +const openQuoteTemplate = async ( + params: OpenQuoteTemplateParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `OpenQuoteTemplateParams` | Yes | An object of type \`OpenQuoteTemplateParams\` containing the template UID to open or activate. This makes the template available for generating quotes. | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns `void`. + +## removeNegotiableQuoteItems + +Removes one or more items from a negotiable quote, returns the updated quote data, and emits an event so listeners can react to the change. + +```ts +const removeNegotiableQuoteItems = async ( + input: RemoveNegotiableQuoteItemsInput +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `input` | `RemoveNegotiableQuoteItemsInput` | Yes | Input parameters for the operation. | + + + +### Events + +Emits the [`quote-management/quote-items-removed`](/dropins-b2b/quote-management/events/#quote-managementquote-items-removed-emits-and-listens) event. + +### Returns + +Returns [`NegotiableQuoteModel`](#negotiablequotemodel) or `null`. + +## removeQuoteTemplateItems + +Removes one or more products from an existing negotiable quote template. This allows you to delete items from a template by providing their unique identifiers. + +```ts +const removeQuoteTemplateItems = async ( + params: RemoveQuoteTemplateItemsParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `RemoveQuoteTemplateItemsParams` | Yes | An object of type \`RemoveQuoteTemplateItemsParams\` containing the template UID and an array of item UIDs to remove from the template. | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns `void`. + +## renameNegotiableQuote + +Renames a negotiable quote. It supports renaming quotes with or without a comment explaining the reason for the rename, returns the updated quote data on success, and emits an event for successful renames. + +```ts +const renameNegotiableQuote = async ( + input: RenameNegotiableQuoteInput +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `input` | `RenameNegotiableQuoteInput` | Yes | Input parameters for retrieving or managing quotes. | + + + +### Events + +Emits the [`quote-management/quote-renamed`](/dropins-b2b/quote-management/events/#quote-managementquote-renamed-emits-and-listens) event. + +### Returns + +Returns [`NegotiableQuoteModel`](#negotiablequotemodel) or `null`. + +## requestNegotiableQuote + +Creates a new negotiable quote request from the current cart. This initiates the quote negotiation workflow, converting cart items into a quote that can be reviewed and negotiated by the seller. + +```ts +const requestNegotiableQuote = async ( + input: RequestNegotiableQuoteInput +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `input` | `RequestNegotiableQuoteInput` | Yes | Input parameters for retrieving or managing quotes. | + + + +### Events + +Emits the [`quote-management/negotiable-quote-requested`](/dropins-b2b/quote-management/events/#quote-managementnegotiable-quote-requested-emits) event. + +### Returns + +Returns [`NegotiableQuoteModel`](#negotiablequotemodel) or `null`. + +## sendForReview + +Submits a negotiable quote for review by the seller. It supports submitting quotes with or without a comment, returns the updated quote data on success, and emits an event for successful submissions. + +```ts +const sendForReview = async ( + input: SendForReviewInput +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `input` | `SendForReviewInput` | Yes | Input parameters for the operation. | + + + +### Events + +Emits the [`quote-management/quote-sent-for-review`](/dropins-b2b/quote-management/events/#quote-managementquote-sent-for-review-emits-and-listens) event. + +### Returns + +Returns [`NegotiableQuoteModel`](#negotiablequotemodel) or `null`. + +## sendQuoteTemplateForReview + +Submits a negotiable quote template for review by the seller. It supports submitting templates with optional name, comment, and reference document links, returns the updated template data on success, and emits an event for successful submissions. + +```ts +const sendQuoteTemplateForReview = async ( + params: SendQuoteTemplateForReviewParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `SendQuoteTemplateForReviewParams` | Yes | An object of type \`SendQuoteTemplateForReviewParams\` containing the template UID and optional review notes. Submits the template for review by the seller or approver. | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns `void`. + +## setLineItemNote + +Updates (or creates) a buyer note for a specific negotiable quote line item. + +```ts +const setLineItemNote = async ( + input: SetLineItemNoteInput +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `input` | `SetLineItemNoteInput` | Yes | Input parameters for the operation. | + + + +### Events + +Emits the following events: [`quote-management/line-item-note-set`](/dropins-b2b/quote-management/events/#quote-managementline-item-note-set-emits), [`quote-management/quote-data`](/dropins-b2b/quote-management/events/#quote-managementquote-data-emits-and-listens). + +### Returns + +Returns [`NegotiableQuoteModel`](#negotiablequotemodel) or `null`. + +## setShippingAddress + +Sets or updates the shipping address for a negotiable quote. It supports setting the address using either a saved customer address ID or by providing new address data. Returns the updated quote data on success and emits an event for successful updates. + +```ts +const setShippingAddress = async ( + input: SetShippingAddressInput +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `input` | `SetShippingAddressInput` | Yes | Input parameters for the operation. | + + + +### Examples + +```ts +additionalInput: { + vat_id: 'GB123456789', + custom_attribute: 'value', + delivery_instructions: 'Leave at door' +} +``` + +### Events + +Emits the [`quote-management/shipping-address-set`](/dropins-b2b/quote-management/events/#quote-managementshipping-address-set-emits-and-listens) event. + +### Returns + +Returns [`NegotiableQuoteModel`](#negotiablequotemodel) or `null`. + +## updateQuantities + +Updates the quantities of items in a negotiable quote. It validates input, transforms the request to `GraphQL` format, returns the updated quote data on success, and emits an event for successful updates. + +```ts +const updateQuantities = async ( + input: UpdateQuantitiesInput +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `input` | `UpdateQuantitiesInput` | Yes | Input parameters for the operation. | + + + +### Events + +Emits the [`quote-management/quantities-updated`](/dropins-b2b/quote-management/events/#quote-managementquantities-updated-emits-and-listens) event. + +### Returns + +Returns [`NegotiableQuoteModel`](#negotiablequotemodel) or `null`. + +## updateQuoteTemplateItemQuantities + +Changes the quantity of one or more items in an existing negotiable quote template. This allows updating item quantities, including optional `min/max` quantity constraints when the template uses `min/max` quantity settings. + +```ts +const updateQuoteTemplateItemQuantities = async ( + params: UpdateQuoteTemplateItemQuantitiesParams +): Promise +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `params` | `UpdateQuoteTemplateItemQuantitiesParams` | Yes | An object of type \`UpdateQuoteTemplateItemQuantitiesParams\` containing the template UID and an array of item quantity updates (item UID and new quantity for each item). | + + + +### Events + +Emits the [`quote-management/quote-template-data`](/dropins-b2b/quote-management/events/#quote-managementquote-template-data-emits-and-listens) event. + +### Returns + +Returns `void`. + +## uploadFile + +API function for the drop-in. + +```ts +const uploadFile = async ( + file: File +): Promise<{ key: string }> +``` + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `file` | `File` | Yes | The File object to upload and attach to a quote. Supports specification documents, purchase orders, or any supporting files that provide context for quote requests. | + + + +### Events + +Emits the [`quote-management/file-upload-error`](/dropins-b2b/quote-management/events/#quote-managementfile-upload-error-emits) event. + +### Returns + +Returns `{ key: string }`. + +## Data Models + +The quote management drop-in uses several TypeScript interfaces to define data structures: + +### NegotiableQuoteModel + +Represents a negotiable quote with all its properties and relationships. + +```typescript +interface NegotiableQuoteModel { + uid: string; + name: string; + createdAt: string; + salesRepName: string; + expirationDate: string; + updatedAt: string; + status: NegotiableQuoteStatus; + buyer: { + firstname: string; + lastname: string; + }; + templateName?: string; + comments?: QuoteComment[]; + prices: QuotePrices; + items: NegotiableQuoteCartItem[]; + canCheckout: boolean; + canSendForReview: boolean; +} +``` + +### NegotiableQuoteStatus + +Enumeration of possible quote statuses. + +```typescript +enum NegotiableQuoteStatus { + SUBMITTED = 'SUBMITTED', + PENDING = 'PENDING', + UPDATED = 'UPDATED', + OPEN = 'OPEN', + ORDERED = 'ORDERED', + CLOSED = 'CLOSED', + DECLINED = 'DECLINED', + EXPIRED = 'EXPIRED', + DRAFT = 'DRAFT', +} +``` + +### CustomerModel + +Represents customer data and permissions. + +```typescript +interface CustomerModel { + permissions: CustomerPermissions; +} + +interface CustomerPermissions { + canRequestQuote: boolean; + canEditQuote: boolean; + canDeleteQuote: boolean; + canCheckoutQuote: boolean; +} +``` + +### NegotiableQuoteModel + +The `NegotiableQuoteModel` object is returned by the following functions: [`duplicateQuote`](#duplicatequote), [`removeNegotiableQuoteItems`](#removenegotiablequoteitems), [`renameNegotiableQuote`](#renamenegotiablequote), [`requestNegotiableQuote`](#requestnegotiablequote), [`sendForReview`](#sendforreview), [`setLineItemNote`](#setlineitemnote), [`setShippingAddress`](#setshippingaddress), [`updateQuantities`](#updatequantities). + +```ts +interface NegotiableQuoteModel { + uid: string; + name: string; + createdAt: string; + salesRepName: string; + expirationDate: string; + updatedAt: string; + status: NegotiableQuoteStatus; + isVirtual: boolean; + buyer: { + firstname: string; + lastname: string; + }; + templateName?: string; + totalQuantity: number; + comments?: { + uid: string; + createdAt: string; + author: { + firstname: string; + lastname: string; + }; + text: string; + attachments?: { + name: string; + url: string; + }[]; + }[]; + history?: NegotiableQuoteHistoryEntry[]; + prices: { + appliedDiscounts?: Discount[]; + appliedTaxes?: Tax[]; + discount?: Currency; + grandTotal?: Currency; + grandTotalExcludingTax?: Currency; + shippingExcludingTax?: Currency; + shippingIncludingTax?: Currency; + subtotalExcludingTax?: Currency; + subtotalIncludingTax?: Currency; + subtotalWithDiscountExcludingTax?: Currency; + totalTax?: Currency; + }; + items: CartItemModel[]; + shippingAddresses?: ShippingAddress[]; + canCheckout: boolean; + canSendForReview: boolean; + lockedForEditing?: boolean; + canDelete: boolean; + canClose: boolean; + canUpdateQuote: boolean; + readOnly: boolean; +} +``` + +### NegotiableQuoteTemplateModel + +The `NegotiableQuoteTemplateModel` object is returned by the following functions: [`createQuoteTemplate`](#createquotetemplate), [`getQuoteTemplateData`](#getquotetemplatedata). + +```ts +interface NegotiableQuoteTemplateModel { + id: string; + uid: string; + name: string; + createdAt: string; + updatedAt: string; + expirationDate?: string; + status: NegotiableQuoteTemplateStatus; + salesRepName: string; + buyer: { + firstname: string; + lastname: string; + }; + comments?: QuoteTemplateComment[]; + history?: NegotiableQuoteHistoryEntry[]; + prices: { + subtotalExcludingTax?: Currency; + subtotalIncludingTax?: Currency; + subtotalWithDiscountExcludingTax?: Currency; + grandTotal?: Currency; + appliedTaxes?: { + amount: Currency; + label: string; + }[]; + }; + items: CartItemModel[]; + shippingAddresses?: ShippingAddress[]; + referenceDocuments?: { + uid: string; + name: string; + identifier?: string; + url: string; + }[]; + // Template-specific fields + quantityThresholds?: { + min?: number; + max?: number; + }; + canAccept: boolean; + canDelete: boolean; + canReopen: boolean; + canCancel: boolean; + canSendForReview: boolean; + canGenerateQuoteFromTemplate: boolean; + canEditTemplateItems: boolean; +} +``` + +### NegotiableQuoteTemplatesListModel + +The `NegotiableQuoteTemplatesListModel` object is returned by the following functions: [`getQuoteTemplates`](#getquotetemplates). + +```ts +interface NegotiableQuoteTemplatesListModel { + items: NegotiableQuoteTemplateListEntry[]; + pageInfo: { + currentPage: number; + pageSize: number; + totalPages: number; + }; + totalCount: number; + paginationInfo?: PaginationInfo; + sortFields?: { + default: string; + options: Array<{ + label: string; + value: string; + }>; + }; +} +``` + +### NegotiableQuotesListModel + +The `NegotiableQuotesListModel` object is returned by the following functions: [`negotiableQuotes`](#negotiablequotes). + +```ts +interface NegotiableQuotesListModel { + items: NegotiableQuoteListEntry[]; + pageInfo: { + currentPage: number; + pageSize: number; + totalPages: number; + }; + totalCount: number; + paginationInfo?: PaginationInfo; + sortFields?: { + default: string; + options: Array<{ + label: string; + value: string; + }>; + }; +} +``` + +### StoreConfigModel + +The `StoreConfigModel` object is returned by the following functions: [`getStoreConfig`](#getstoreconfig). + +```ts +interface StoreConfigModel { + quoteSummaryDisplayTotal: number; + quoteSummaryMaxItems: number; + quoteDisplaySettings: { + zeroTax: boolean; + subtotal: QuoteDisplayAmount; + price: QuoteDisplayAmount; + shipping: QuoteDisplayAmount; + fullSummary: boolean; + grandTotal: boolean; + }; + useConfigurableParentThumbnail: boolean; + quoteMinimumAmount: number | null; + quoteMinimumAmountMessage: string | null; +} +``` + + + +{/* This documentation is auto-generated from the drop-in source repository: REPO_URL */} diff --git a/src/content/docs/dropins-b2b/quote-management/index.mdx b/src/content/docs/dropins-b2b/quote-management/index.mdx new file mode 100644 index 000000000..6887c40f8 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/index.mdx @@ -0,0 +1,72 @@ +--- +title: Quote Management overview +description: Learn about the features and functions of the Quote Management drop-in component. +sidebar: + order: 1 +--- + +import { Badge } from '@astrojs/starlight/components'; +import { Aside } from '@astrojs/starlight/components'; + +The Quote Management drop-in enables requesting negotiable quotes and quote management and tracking for Adobe Commerce storefronts. It also supports quote status updates and quote comments and attachments. + +## Supported Commerce features + +The following table provides an overview of the Adobe Commerce features that the Quote Management drop-in supports: + +| Feature | Status | +| ------- | ------ | +| Request negotiable quotes | | +| Quote management and tracking | | +| Quote status updates | | +| Quote comments and attachments | | +| Quote pricing summary | | +| Product list management | | +| Quote actions (print, copy, delete) | | +| Draft quote saving | | +| Quote expiration handling | | +| Customer authentication integration | | +| Permission-based access control | | +| Event-driven architecture | | +| Internationalization (i18n) support | | +| Responsive design | | +| Quote templates for repeat ordering | | +| Quote duplication | | +| Convert quotes to orders | | + +## Section topics + +The topics in this section will help you understand how to customize and use the Quote Management drop-in effectively within your B2B storefront. + +### Quick Start + +Provides quick reference information and getting started guide for the Quote Management drop-in. This topic covers package details, import paths, and basic usage examples to help you integrate Quote Management functionality into your site. + +### Initialization + +Describes how to configure the Quote Management drop-in initializer with language definitions, permissions, and custom models. This customization allows you to align the drop-in with your B2B workflow requirements and brand standards. + +### Containers + +Describes the structural elements of the Quote Management drop-in, focusing on how each container manages and displays content. Includes configuration options and customization settings to optimize the B2B user experience. + +### Functions + +Describes the API functions available in the Quote Management drop-in. These functions allow developers to retrieve quote data, request new quotes, and manage quote lifecycle operations programmatically. + +### Events + +Explains the event-driven architecture of the Quote Management drop-in, including available events and how to listen for them to integrate with other storefront components. + +### Slots + +Describes the customizable content areas within Quote Management containers that can be replaced with custom components to tailor the user experience. + +### Dictionary + +Provides the complete list of internationalization (i18n) keys used in the Quote Management drop-in for translating text content into different languages. + +### Styles + +Describes how to customize the appearance of the Quote Management drop-in using CSS. Provides guidelines and examples for applying styles to various components within the drop-in to maintain brand consistency. + diff --git a/src/content/docs/dropins-b2b/quote-management/initialization.mdx b/src/content/docs/dropins-b2b/quote-management/initialization.mdx new file mode 100644 index 000000000..caf368170 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/initialization.mdx @@ -0,0 +1,217 @@ +--- +title: Quote Management initialization +description: Configure the Quote Management drop-in with language definitions, custom data models, and drop-in-specific options. +sidebar: + label: Initialization + order: 3 +--- + +import TableWrapper from '@components/TableWrapper.astro'; +import { Aside } from '@astrojs/starlight/components'; + +The **Quote Management initializer** configures the drop-in for managing negotiable quotes, quote templates, and quote workflows. Use initialization to set quote identifiers, customize data models, and enable internationalization for multi-language B2B storefronts. + +
+Version: 1.0.0-beta5 +
+ + + +## Configuration options + +The following table describes the configuration options available for the **Quote Management** initializer: + + + +| Parameter | Type | Req? | Description | +|---|---|---|---| +| `langDefinitions` | [`LangDefinitions`](#langdefinitions) | No | Language definitions for internationalization (i18n). Override dictionary keys for localization or branding. | +| `quoteId` | `string` | No | Quote identifier used to load and display a specific negotiable quote. Pass this to initialize the drop-in with quote details on page load. | +| `quoteTemplateId` | `string` | No | Quote template identifier used to load and display a specific quote template. Pass this to initialize the drop-in with template details on page load. | + + + +## Default configuration + +The initializer runs with these defaults when no configuration is provided: + +```javascript title="scripts/initializers/quote-management.js" +import { initializers } from '@dropins/tools/initializer.js'; +import { initialize } from '@dropins/storefront-quote-management'; + +// All configuration options are optional +await initializers.mountImmediately(initialize, { + langDefinitions: {}, // Uses built-in English strings + models: {}, // Uses default data models + // Drop-in-specific defaults: + // quoteId: undefined // See configuration options below + // quoteTemplateId: undefined // See configuration options below +}); +``` + +## Language definitions + +Override dictionary keys for localization or branding. The `langDefinitions` object maps locale keys to custom strings that override default text for the drop-in. + +```javascript title="scripts/initializers/quote-management.js" +import { initializers } from '@dropins/tools/initializer.js'; +import { initialize } from '@dropins/storefront-quote-management'; + +const customStrings = { + 'AddToCart': 'Add to Bag', + 'Checkout': 'Complete Purchase', + 'Price': 'Cost', +}; + +const langDefinitions = { + default: customStrings, +}; + +await initializers.mountImmediately(initialize, { langDefinitions }); +``` + + + +## Customizing data models + +Extend or transform data models by providing custom transformer functions. Use the `models` option to add custom fields or modify existing data structures returned from the backend. + +### Available models + +The following models can be customized through the `models` configuration option: + + + + +| Model | Description | +|---|---| +| [`NegotiableQuoteModel`](#negotiablequotemodel) | Transforms negotiable quote data from `GraphQL` including quote details, status, items, totals, comments, and history. Use this to add custom fields or modify existing quote data structures. | + + + +The following example shows how to customize the `NegotiableQuoteModel` model for the **Quote Management** drop-in: + +```javascript title="scripts/initializers/quote-management.js" +import { initializers } from '@dropins/tools/initializer.js'; +import { initialize } from '@dropins/storefront-quote-management'; + +const models = { + NegotiableQuoteModel: { + transformer: (data) => ({ + // Add urgency badge for expiring quotes (within 7 days) + isExpiringSoon: data?.expirationDate && + new Date(data.expirationDate) - Date.now() < 7 * 24 * 60 * 60 * 1000, + // Custom status display for better UX + statusDisplay: data?.status === 'SUBMITTED' ? 'Pending Review' : data?.status, + // Add formatted expiration date + expirationFormatted: data?.expirationDate ? + new Date(data.expirationDate).toLocaleDateString() : null, + }), + }, +}; + +await initializers.mountImmediately(initialize, { models }); +``` + +## Drop-in configuration + +The **Quote Management initializer** configures the drop-in for managing negotiable quotes, quote templates, and quote workflows. Use initialization to set quote identifiers, customize data models, and enable internationalization for multi-language B2B storefronts. + +```javascript title="scripts/initializers/quote-management.js" +import { initializers } from '@dropins/tools/initializer.js'; +import { initialize } from '@dropins/storefront-quote-management'; + +await initializers.mountImmediately(initialize, { + langDefinitions: {}, + quoteId: 'abc123', + quoteTemplateId: 'abc123', +}); +``` + + + + + +## Configuration types + +The following TypeScript definitions show the structure of each configuration object: + +### langDefinitions + +Maps locale identifiers to dictionaries of key-value pairs. The `default` locale is used as the fallback when no specific locale matches. Each dictionary key corresponds to a text string used in the drop-in UI. + +```typescript +langDefinitions?: { + [locale: string]: { + [key: string]: string; + }; +}; +``` + + +## Model definitions + +The following TypeScript definitions show the structure of each customizable model: + +### NegotiableQuoteModel + +```typescript +interface NegotiableQuoteModel { + uid: string; + name: string; + createdAt: string; + salesRepName: string; + expirationDate: string; + updatedAt: string; + status: NegotiableQuoteStatus; + isVirtual: boolean; + buyer: { + firstname: string; + lastname: string; + }; + templateName?: string; + totalQuantity: number; + comments?: { + uid: string; + createdAt: string; + author: { + firstname: string; + lastname: string; + }; + text: string; + attachments?: { + name: string; + url: string; + }[]; + }[]; + history?: NegotiableQuoteHistoryEntry[]; + prices: { + appliedDiscounts?: Discount[]; + appliedTaxes?: Tax[]; + discount?: Currency; + grandTotal?: Currency; + grandTotalExcludingTax?: Currency; + shippingExcludingTax?: Currency; + shippingIncludingTax?: Currency; + subtotalExcludingTax?: Currency; + subtotalIncludingTax?: Currency; + subtotalWithDiscountExcludingTax?: Currency; + totalTax?: Currency; + }; + items: NegotiableQuoteCartItem[]; + shippingAddresses?: ShippingAddress[]; + canCheckout: boolean; + canSendForReview: boolean; + lockedForEditing?: boolean; + canDelete: boolean; + canClose: boolean; + canUpdateQuote: boolean; + readOnly: boolean; +} +``` + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/quick-start.mdx b/src/content/docs/dropins-b2b/quote-management/quick-start.mdx new file mode 100644 index 000000000..26fd5b39f --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/quick-start.mdx @@ -0,0 +1,69 @@ +--- +title: Quote Management Quick Start +description: Quick reference and getting started guide for the Quote Management drop-in. +sidebar: + label: Quick Start + order: 2 +--- + +import { Aside } from '@astrojs/starlight/components'; +import Link from '@components/Link.astro'; + +Get started with the Quote Management drop-in to enable B2B quote negotiation and management in your storefront. + + +
+Version: 1.0.0-beta5 +
+ + + +## Quick example + +The Quote Management drop-in is included in the . This example shows the basic pattern: + +```js +// 1. Import initializer (handles all setup) +import '../../scripts/initializers/quote-management.js'; + +// 2. Import the container you need +import ItemsQuoted from '@dropins/storefront-quote-management/containers/ItemsQuoted.js'; + +// 3. Import the provider +import { render as provider } from '@dropins/storefront-quote-management/render.js'; + +// 4. Render in your block +export default async function decorate(block) { + await provider.render(ItemsQuoted, { + // Configuration options - see Containers page + })(block); +} +``` + +**New to drop-ins?** See the [Using drop-ins](/dropins/all/quick-start/) guide for complete step-by-step instructions. + + + +## Quick reference + +**Import paths:** +- Initializer: `import '../../scripts/initializers/quote-management.js'` +- Containers: `import ContainerName from '@dropins/storefront-quote-management/containers/ContainerName.js'` +- Provider: `import { render } from '@dropins/storefront-quote-management/render.js'` + +**Package:** `@dropins/storefront-quote-management` + +**Version:** 1.0.0-beta5 (verify compatibility with your Commerce instance) + +**Example container:** `ItemsQuoted` + +## Learn more + +- [Containers](/dropins-b2b/quote-management/containers/) - Available UI components and configuration options +- [Initialization](/dropins-b2b/quote-management/initialization/) - Customize initializer settings and data models +- [Functions](/dropins-b2b/quote-management/functions/) - Control drop-in behavior programmatically +- [Events](/dropins-b2b/quote-management/events/) - Listen to and respond to drop-in state changes +- [Slots](/dropins-b2b/quote-management/slots/) - Extend containers with custom content + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} + diff --git a/src/content/docs/dropins-b2b/quote-management/slots.mdx b/src/content/docs/dropins-b2b/quote-management/slots.mdx new file mode 100644 index 000000000..3c2771963 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/slots.mdx @@ -0,0 +1,1845 @@ +--- +title: Quote Management Slots +description: Customize UI sections in the Quote Management drop-in using slots. +sidebar: + label: Slots + order: 5 +tableOfContents: + minHeadingLevel: 2 + maxHeadingLevel: 2 +--- + +import TableWrapper from '@components/TableWrapper.astro'; +import { Aside } from '@astrojs/starlight/components'; + +The Quote Management drop-in exposes slots for customizing specific UI sections. Use slots to replace or extend container components. For default properties available to all slots, see [Extending drop-in components](/dropins/all/extending/). + +
+Version: 1.0.0-beta5 +
+ + + +| Container | Slots | +|-----------|-------| +| [`ItemsQuoted`](#itemsquoted-slots) | `ProductListTable`, `QuotePricesSummary` | +| [`ItemsQuotedTemplate`](#itemsquotedtemplate-slots) | `ProductListTable`, `QuotePricesSummary` | +| [`ManageNegotiableQuote`](#managenegotiablequote-slots) | `QuoteName`, `QuoteStatus`, `Banner`, `DuplicateQuoteWarningBanner`, `Details`, `ActionBar`, `QuoteContent`, `ItemsQuotedTab`, `CommentsTab`, `HistoryLogTab`, `ShippingInformationTitle`, `ShippingInformation`, `QuoteCommentsTitle`, `QuoteComments`, `AttachFilesField`, `AttachedFilesList`, `Footer` | +| [`ManageNegotiableQuoteTemplate`](#managenegotiablequotetemplate-slots) | `TemplateName`, `TemplateStatus`, `Banner`, `Details`, `ActionBar`, `ReferenceDocuments`, `ItemsTable`, `ItemsQuotedTab`, `CommentsTab`, `HistoryLogTab`, `CommentsTitle`, `Comments`, `HistoryLogTitle`, `HistoryLog`, `Footer`, `ShippingInformationTitle`, `ShippingInformation` | +| [`QuoteSummaryList`](#quotesummarylist-slots) | `Heading`, `Footer`, `Thumbnail`, `ProductAttributes`, `QuoteSummaryFooter`, `QuoteItem`, `ItemTitle`, `ItemPrice`, `ItemTotal`, `ItemSku` | +| [`QuoteTemplatesListTable`](#quotetemplateslisttable-slots) | `Name`, `State`, `Status`, `ValidUntil`, `MinQuoteTotal`, `OrdersPlaced`, `LastOrdered`, `Actions`, `EmptyTemplates`, `ItemRange`, `PageSizePicker`, `Pagination` | +| [`QuotesListTable`](#quoteslisttable-slots) | `QuoteName`, `Created`, `CreatedBy`, `Status`, `LastUpdated`, `QuoteTemplate`, `QuoteTotal`, `Actions`, `EmptyQuotes`, `ItemRange`, `PageSizePicker`, `Pagination` | +| [`RequestNegotiableQuoteForm`](#requestnegotiablequoteform-slots) | `ErrorBanner`, `SuccessBanner`, `Title`, `CommentField`, `QuoteNameField`, `AttachFileField`, `AttachedFilesList`, `RequestButton`, `SaveDraftButton` | + + + + + +## ItemsQuoted slots + +The slots for the `ItemsQuoted` container allow you to customize its appearance and behavior. + +```typescript +interface ItemsQuotedProps { + slots?: { + ProductListTable?: SlotProps<{ + items: NegotiableQuoteModel['items']; + canEdit: boolean; + readOnly?: boolean; + onItemCheckboxChange?: ( + item: CartItemModel, + isSelected: boolean + ) => void; + onItemDropdownChange?: ( + item: CartItemModel, + action: string + ) => void; + onQuantityChange?: ( + item: CartItemModel, + newQuantity: number + ) => void; + onUpdate?: (e: SubmitEvent) => void; + dropdownSelections?: Record; + }>; + QuotePricesSummary?: SlotProps<{ + items: NegotiableQuoteModel['items']; + prices: NegotiableQuoteModel['prices']; + }>; + }; +} +``` + +### QuotePricesSummary slot + +The `QuotePricesSummary` slot allows you to customize the quote prices summary section of the `ItemsQuoted` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ItemsQuoted } from '@dropins/storefront-quote-management/containers/ItemsQuoted.js'; + +await provider.render(ItemsQuoted, { + slots: { + QuotePricesSummary: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuotePricesSummary'; + ctx.appendChild(element); + } + } +})(block); +``` + +## ItemsQuotedTemplate slots + +The slots for the `ItemsQuotedTemplate` container allow you to customize its appearance and behavior. + +```typescript +interface ItemsQuotedTemplateProps { + slots?: { + ProductListTable?: SlotProps<{ + items: NegotiableQuoteTemplateModel['items']; + canEdit: boolean; + dropdownSelections: Record; + handleItemDropdownChange: (item: CartItemModel, action: string) => void; + handleQuantityChange: (item: CartItemModel, newQuantity: number) => void; + handleUpdate: (e: SubmitEvent) => void; + onItemDropdownChange?: (item: any, action: string) => void; + }>; + QuotePricesSummary?: SlotProps<{ + items: NegotiableQuoteTemplateModel['items']; + prices: NegotiableQuoteTemplateModel['prices']; + }>; + }; +} +``` + +### ProductListTable slot + +The `ProductListTable` slot allows you to customize the product list table section of the `ItemsQuotedTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ItemsQuotedTemplate } from '@dropins/storefront-quote-management/containers/ItemsQuotedTemplate.js'; + +await provider.render(ItemsQuotedTemplate, { + slots: { + ProductListTable: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ProductListTable'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuotePricesSummary slot + +The `QuotePricesSummary` slot allows you to customize the quote prices summary section of the `ItemsQuotedTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ItemsQuotedTemplate } from '@dropins/storefront-quote-management/containers/ItemsQuotedTemplate.js'; + +await provider.render(ItemsQuotedTemplate, { + slots: { + QuotePricesSummary: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuotePricesSummary'; + ctx.appendChild(element); + } + } +})(block); +``` + +## ManageNegotiableQuote slots + +The slots for the `ManageNegotiableQuote` container allow you to customize its appearance and behavior. + +```typescript +interface ManageNegotiableQuoteProps { + slots?: { + QuoteName?: SlotProps<{ + quoteName?: string; + quoteData?: NegotiableQuoteModel; + }>; + QuoteStatus?: SlotProps<{ + quoteStatus?: string; + quoteData?: NegotiableQuoteModel; + }>; + Banner?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + }>; + DuplicateQuoteWarningBanner?: SlotProps<{ + outOfStockWarning?: boolean; + }>; + Details?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + }>; + ActionBar?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + actionsBarDropdownValue?: string; + }>; + QuoteContent?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + }>; + ItemsQuotedTab?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + }>; + CommentsTab?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + }>; + HistoryLogTab?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + }>; + ShippingInformationTitle?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + }>; + ShippingInformation?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + loading?: boolean; + setLoading?: (loading: boolean) => void; + }>; + QuoteCommentsTitle?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + }>; + QuoteComments?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + }>; + AttachFilesField?: SlotProps<{ + onFileChange: (files: File[]) => void; + attachedFiles: AttachedFile[]; + fileUploadError: string | undefined; + disabled?: boolean; + }>; + AttachedFilesList?: SlotProps<{ + files: AttachedFile[]; + onRemove: (key: string) => void; + disabled?: boolean; + }>; + Footer?: SlotProps<{ + quoteData?: NegotiableQuoteModel; + comment?: string; + isSubmitting?: boolean; + attachments?: AttachedFile[]; + handleSendForReview: () => void; + }>; + }; +} +``` + +### QuoteName slot + +The `QuoteName` slot allows you to customize the quote name section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + QuoteName: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteName'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuoteStatus slot + +The `QuoteStatus` slot allows you to customize the quote status section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + QuoteStatus: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteStatus'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Banner slot + +The Banner slot allows you to customize the banner section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + Banner: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Banner'; + ctx.appendChild(element); + } + } +})(block); +``` + +### DuplicateQuoteWarningBanner slot + +The `DuplicateQuoteWarningBanner` slot allows you to customize the duplicate quote warning banner section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + DuplicateQuoteWarningBanner: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom DuplicateQuoteWarningBanner'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Details slot + +The Details slot allows you to customize the details section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + Details: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Details'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ActionBar slot + +The `ActionBar` slot allows you to customize the action bar section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + ActionBar: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ActionBar'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuoteContent slot + +The `QuoteContent` slot allows you to customize the quote content section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + QuoteContent: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteContent'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ItemsQuotedTab slot + +The `ItemsQuotedTab` slot allows you to customize the items quoted tab section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + ItemsQuotedTab: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ItemsQuotedTab'; + ctx.appendChild(element); + } + } +})(block); +``` + +### CommentsTab slot + +The `CommentsTab` slot allows you to customize the comments tab section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + CommentsTab: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom CommentsTab'; + ctx.appendChild(element); + } + } +})(block); +``` + +### HistoryLogTab slot + +The `HistoryLogTab` slot allows you to customize the history log tab section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + HistoryLogTab: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom HistoryLogTab'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ShippingInformationTitle slot + +The `ShippingInformationTitle` slot allows you to customize the shipping information title section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + ShippingInformationTitle: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ShippingInformationTitle'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuoteCommentsTitle slot + +The `QuoteCommentsTitle` slot allows you to customize the quote comments title section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + QuoteCommentsTitle: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteCommentsTitle'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuoteComments slot + +The `QuoteComments` slot allows you to customize the quote comments section of the `ManageNegotiableQuote` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuote } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuote.js'; + +await provider.render(ManageNegotiableQuote, { + slots: { + QuoteComments: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteComments'; + ctx.appendChild(element); + } + } +})(block); +``` + +## ManageNegotiableQuoteTemplate slots + +The slots for the `ManageNegotiableQuoteTemplate` container allow you to customize its appearance and behavior. + +```typescript +interface ManageNegotiableQuoteTemplateProps { + slots?: { + TemplateName?: SlotProps<{ + templateName?: string; + templateData?: NegotiableQuoteTemplateModel; + templateDisplayName?: string; + isRenameDisabled?: boolean; + }>; + TemplateStatus?: SlotProps<{ + templateStatus?: string; + templateData?: NegotiableQuoteTemplateModel; + }>; + Banner?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + Details?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + ActionBar?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + ReferenceDocuments?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + referenceDocuments?: ReferenceDocument[]; + isEditable?: boolean; + onAddDocument?: () => void; + onEditDocument?: (document: ReferenceDocument) => void; + onRemoveDocument?: (document: ReferenceDocument) => void; + referenceDocumentsTitle?: string; + }>; + ItemsTable?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + ItemsQuotedTab?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + CommentsTab?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + HistoryLogTab?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + CommentsTitle?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + Comments?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + HistoryLogTitle?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + HistoryLog?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + Footer?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + comment?: string; + isSubmitting?: boolean; + referenceDocuments?: ReferenceDocument[]; + hasUnsavedChanges?: boolean; + handleSendForReview: () => void; + showAcceptButton?: boolean; + renameTemplateName?: string; + renameReason?: string; + }>; + ShippingInformationTitle?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + }>; + ShippingInformation?: SlotProps<{ + templateData?: NegotiableQuoteTemplateModel; + loading?: boolean; + setLoading?: (loading: boolean) => void; + }>; + }; +} +``` + +### TemplateName slot + +The `TemplateName` slot allows you to customize the template name section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + TemplateName: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom TemplateName'; + ctx.appendChild(element); + } + } +})(block); +``` + +### TemplateStatus slot + +The `TemplateStatus` slot allows you to customize the template status section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + TemplateStatus: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom TemplateStatus'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Banner slot + +The Banner slot allows you to customize the banner section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + Banner: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Banner'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Details slot + +The Details slot allows you to customize the details section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + Details: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Details'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ActionBar slot + +The `ActionBar` slot allows you to customize the action bar section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + ActionBar: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ActionBar'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ItemsTable slot + +The `ItemsTable` slot allows you to customize the items table section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + ItemsTable: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ItemsTable'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ItemsQuotedTab slot + +The `ItemsQuotedTab` slot allows you to customize the items quoted tab section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + ItemsQuotedTab: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ItemsQuotedTab'; + ctx.appendChild(element); + } + } +})(block); +``` + +### CommentsTab slot + +The `CommentsTab` slot allows you to customize the comments tab section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + CommentsTab: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom CommentsTab'; + ctx.appendChild(element); + } + } +})(block); +``` + +### HistoryLogTab slot + +The `HistoryLogTab` slot allows you to customize the history log tab section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + HistoryLogTab: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom HistoryLogTab'; + ctx.appendChild(element); + } + } +})(block); +``` + +### CommentsTitle slot + +The `CommentsTitle` slot allows you to customize the comments title section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + CommentsTitle: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom CommentsTitle'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Comments slot + +The Comments slot allows you to customize the comments section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + Comments: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Comments'; + ctx.appendChild(element); + } + } +})(block); +``` + +### HistoryLogTitle slot + +The `HistoryLogTitle` slot allows you to customize the history log title section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + HistoryLogTitle: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom HistoryLogTitle'; + ctx.appendChild(element); + } + } +})(block); +``` + +### HistoryLog slot + +The `HistoryLog` slot allows you to customize the history log section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + HistoryLog: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom HistoryLog'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ShippingInformationTitle slot + +The `ShippingInformationTitle` slot allows you to customize the shipping information title section of the `ManageNegotiableQuoteTemplate` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { ManageNegotiableQuoteTemplate } from '@dropins/storefront-quote-management/containers/ManageNegotiableQuoteTemplate.js'; + +await provider.render(ManageNegotiableQuoteTemplate, { + slots: { + ShippingInformationTitle: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ShippingInformationTitle'; + ctx.appendChild(element); + } + } +})(block); +``` + +## QuoteSummaryList slots + +The slots for the `QuoteSummaryList` container allow you to customize its appearance and behavior. + +```typescript +interface QuoteSummaryListProps { + slots?: { + Heading?: SlotProps<{ count: number; quoteId: string }>; + Footer?: SlotProps<{ item: NegotiableQuoteItemModel }>; + Thumbnail?: SlotProps<{ + item: NegotiableQuoteItemModel; + defaultImageProps: ImageProps; + }>; + ProductAttributes?: SlotProps<{ item: NegotiableQuoteItemModel }>; + QuoteSummaryFooter?: SlotProps<{ + displayMaxItems: boolean; + }>; + QuoteItem?: SlotProps; + ItemTitle?: SlotProps<{ item: NegotiableQuoteItemModel }>; + ItemPrice?: SlotProps<{ item: NegotiableQuoteItemModel }>; + ItemTotal?: SlotProps<{ item: NegotiableQuoteItemModel }>; + ItemSku?: SlotProps<{ item: NegotiableQuoteItemModel }>; + }; +} +``` + +### Heading slot + +The Heading slot allows you to customize the heading section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + Heading: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Heading'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Footer slot + +The Footer slot allows you to customize the footer section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + Footer: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Footer'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Thumbnail slot + +The Thumbnail slot allows you to customize the thumbnail section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + Thumbnail: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Thumbnail'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ProductAttributes slot + +The `ProductAttributes` slot allows you to customize the product attributes section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + ProductAttributes: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ProductAttributes'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuoteSummaryFooter slot + +The `QuoteSummaryFooter` slot allows you to customize the quote summary footer section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + QuoteSummaryFooter: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteSummaryFooter'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuoteItem slot + +The `QuoteItem` slot allows you to customize the quote item section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + QuoteItem: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteItem'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ItemTitle slot + +The `ItemTitle` slot allows you to customize the item title section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + ItemTitle: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ItemTitle'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ItemPrice slot + +The `ItemPrice` slot allows you to customize the item price section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + ItemPrice: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ItemPrice'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ItemTotal slot + +The `ItemTotal` slot allows you to customize the item total section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + ItemTotal: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ItemTotal'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ItemSku slot + +The `ItemSku` slot allows you to customize the item sku section of the `QuoteSummaryList` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteSummaryList } from '@dropins/storefront-quote-management/containers/QuoteSummaryList.js'; + +await provider.render(QuoteSummaryList, { + slots: { + ItemSku: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ItemSku'; + ctx.appendChild(element); + } + } +})(block); +``` + +## QuoteTemplatesListTable slots + +The slots for the `QuoteTemplatesListTable` container allow you to customize its appearance and behavior. + +```typescript +interface QuoteTemplatesListTableProps { + slots?: { + Name?: SlotProps<{ template: NegotiableQuoteTemplateListEntry }>; + State?: SlotProps<{ template: NegotiableQuoteTemplateListEntry }>; + Status?: SlotProps<{ template: NegotiableQuoteTemplateListEntry }>; + ValidUntil?: SlotProps<{ template: NegotiableQuoteTemplateListEntry }>; + MinQuoteTotal?: SlotProps<{ template: NegotiableQuoteTemplateListEntry }>; + OrdersPlaced?: SlotProps<{ template: NegotiableQuoteTemplateListEntry }>; + LastOrdered?: SlotProps<{ template: NegotiableQuoteTemplateListEntry }>; + Actions?: SlotProps<{ + template: NegotiableQuoteTemplateListEntry; + onViewQuoteTemplate?: (id: string, name: string, status: string) => void; + onGenerateQuoteFromTemplate?: (id: string, name: string) => void; + }>; + EmptyTemplates?: SlotProps; + ItemRange?: SlotProps<{ + startItem: number; + endItem: number; + totalCount: number; + currentPage: number; + pageSize: number; + }>; + PageSizePicker?: SlotProps<{ + pageSize: number; + pageSizeOptions: number[]; + onPageSizeChange?: (pageSize: number) => void; + }>; + Pagination?: SlotProps<{ + currentPage: number; + totalPages: number; + onChange?: (page: number) => void; + }>; + }; +} +``` + +### Name slot + +The Name slot allows you to customize the name section of the `QuoteTemplatesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + slots: { + Name: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Name'; + ctx.appendChild(element); + } + } +})(block); +``` + +### State slot + +The State slot allows you to customize the state section of the `QuoteTemplatesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + slots: { + State: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom State'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Status slot + +The Status slot allows you to customize the status section of the `QuoteTemplatesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + slots: { + Status: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Status'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ValidUntil slot + +The `ValidUntil` slot allows you to customize the valid until section of the `QuoteTemplatesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + slots: { + ValidUntil: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ValidUntil'; + ctx.appendChild(element); + } + } +})(block); +``` + +### MinQuoteTotal slot + +The `MinQuoteTotal` slot allows you to customize the min quote total section of the `QuoteTemplatesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + slots: { + MinQuoteTotal: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom MinQuoteTotal'; + ctx.appendChild(element); + } + } +})(block); +``` + +### OrdersPlaced slot + +The `OrdersPlaced` slot allows you to customize the orders placed section of the `QuoteTemplatesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + slots: { + OrdersPlaced: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom OrdersPlaced'; + ctx.appendChild(element); + } + } +})(block); +``` + +### LastOrdered slot + +The `LastOrdered` slot allows you to customize the last ordered section of the `QuoteTemplatesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + slots: { + LastOrdered: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom LastOrdered'; + ctx.appendChild(element); + } + } +})(block); +``` + +### EmptyTemplates slot + +The `EmptyTemplates` slot allows you to customize the empty templates section of the `QuoteTemplatesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + slots: { + EmptyTemplates: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom EmptyTemplates'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ItemRange slot + +The `ItemRange` slot allows you to customize the item range section of the `QuoteTemplatesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuoteTemplatesListTable } from '@dropins/storefront-quote-management/containers/QuoteTemplatesListTable.js'; + +await provider.render(QuoteTemplatesListTable, { + slots: { + ItemRange: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ItemRange'; + ctx.appendChild(element); + } + } +})(block); +``` + +## QuotesListTable slots + +The slots for the `QuotesListTable` container allow you to customize its appearance and behavior. + +```typescript +interface QuotesListTableProps { + slots?: { + QuoteName?: SlotProps<{ quote: NegotiableQuoteListEntry }>; + Created?: SlotProps<{ quote: NegotiableQuoteListEntry }>; + CreatedBy?: SlotProps<{ quote: NegotiableQuoteListEntry }>; + Status?: SlotProps<{ quote: NegotiableQuoteListEntry }>; + LastUpdated?: SlotProps<{ quote: NegotiableQuoteListEntry }>; + QuoteTemplate?: SlotProps<{ quote: NegotiableQuoteListEntry }>; + QuoteTotal?: SlotProps<{ quote: NegotiableQuoteListEntry }>; + Actions?: SlotProps<{ + quote: NegotiableQuoteListEntry; + onViewQuote?: (id: string, name: string, status: string) => void; + }>; + EmptyQuotes?: SlotProps; + ItemRange?: SlotProps<{ + startItem: number; + endItem: number; + totalCount: number; + currentPage: number; + pageSize: number; + }>; + PageSizePicker?: SlotProps<{ + pageSize: number; + pageSizeOptions: number[]; + onPageSizeChange?: (pageSize: number) => void; + }>; + Pagination?: SlotProps<{ + currentPage: number; + totalPages: number; + onChange?: (page: number) => void; + }>; + }; +} +``` + +### QuoteName slot + +The `QuoteName` slot allows you to customize the quote name section of the `QuotesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + slots: { + QuoteName: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteName'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Created slot + +The Created slot allows you to customize the created section of the `QuotesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + slots: { + Created: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Created'; + ctx.appendChild(element); + } + } +})(block); +``` + +### CreatedBy slot + +The `CreatedBy` slot allows you to customize the created by section of the `QuotesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + slots: { + CreatedBy: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom CreatedBy'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Status slot + +The Status slot allows you to customize the status section of the `QuotesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + slots: { + Status: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Status'; + ctx.appendChild(element); + } + } +})(block); +``` + +### LastUpdated slot + +The `LastUpdated` slot allows you to customize the last updated section of the `QuotesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + slots: { + LastUpdated: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom LastUpdated'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuoteTemplate slot + +The `QuoteTemplate` slot allows you to customize the quote template section of the `QuotesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + slots: { + QuoteTemplate: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteTemplate'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuoteTotal slot + +The `QuoteTotal` slot allows you to customize the quote total section of the `QuotesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + slots: { + QuoteTotal: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteTotal'; + ctx.appendChild(element); + } + } +})(block); +``` + +### EmptyQuotes slot + +The `EmptyQuotes` slot allows you to customize the empty quotes section of the `QuotesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + slots: { + EmptyQuotes: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom EmptyQuotes'; + ctx.appendChild(element); + } + } +})(block); +``` + +### ItemRange slot + +The `ItemRange` slot allows you to customize the item range section of the `QuotesListTable` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { QuotesListTable } from '@dropins/storefront-quote-management/containers/QuotesListTable.js'; + +await provider.render(QuotesListTable, { + slots: { + ItemRange: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ItemRange'; + ctx.appendChild(element); + } + } +})(block); +``` + +## RequestNegotiableQuoteForm slots + +The slots for the `RequestNegotiableQuoteForm` container allow you to customize its appearance and behavior. + +```typescript +interface RequestNegotiableQuoteFormProps { + slots?: { + ErrorBanner?: SlotProps<{ + message: string, + }>; + SuccessBanner?: SlotProps<{ + message: string, + }>; + Title?: SlotProps<{ + text: string, + }>; + CommentField?: SlotProps<{ + formErrors: Record; + isFormDisabled: boolean; + setFormErrors: (errors: Record) => void; + }>; + QuoteNameField?: SlotProps<{ + formErrors: Record; + isFormDisabled: boolean; + setFormErrors: (errors: Record) => void; + }>; + AttachFileField?: SlotProps<{ + onChange: (files: File[]) => void, formErrors: Record, + isFormDisabled: boolean, + attachedFiles: AttachedFile[] + }>; + AttachedFilesList?: SlotProps<{ + files: AttachedFile[]; + onRemove: (key: string) => void; + disabled?: boolean; + }>; + RequestButton?: SlotProps<{ + requestNegotiableQuote: typeof requestNegotiableQuote; + formErrors: Record; + isFormDisabled: boolean; + setIsFormDisabled: (isFormDisabled: boolean) => void; + }>; + SaveDraftButton?: SlotProps<{ + requestNegotiableQuote: typeof requestNegotiableQuote; + formErrors: Record; + isFormDisabled: boolean; + setIsFormDisabled: (isFormDisabled: boolean) => void; + }>; + }; +} +``` + +### ErrorBanner slot + +The `ErrorBanner` slot allows you to customize the error banner section of the `RequestNegotiableQuoteForm` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { RequestNegotiableQuoteForm } from '@dropins/storefront-quote-management/containers/RequestNegotiableQuoteForm.js'; + +await provider.render(RequestNegotiableQuoteForm, { + slots: { + ErrorBanner: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom ErrorBanner'; + ctx.appendChild(element); + } + } +})(block); +``` + +### SuccessBanner slot + +The `SuccessBanner` slot allows you to customize the success banner section of the `RequestNegotiableQuoteForm` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { RequestNegotiableQuoteForm } from '@dropins/storefront-quote-management/containers/RequestNegotiableQuoteForm.js'; + +await provider.render(RequestNegotiableQuoteForm, { + slots: { + SuccessBanner: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom SuccessBanner'; + ctx.appendChild(element); + } + } +})(block); +``` + +### Title slot + +The Title slot allows you to customize the title section of the `RequestNegotiableQuoteForm` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { RequestNegotiableQuoteForm } from '@dropins/storefront-quote-management/containers/RequestNegotiableQuoteForm.js'; + +await provider.render(RequestNegotiableQuoteForm, { + slots: { + Title: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom Title'; + ctx.appendChild(element); + } + } +})(block); +``` + +### CommentField slot + +The `CommentField` slot allows you to customize the comment field section of the `RequestNegotiableQuoteForm` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { RequestNegotiableQuoteForm } from '@dropins/storefront-quote-management/containers/RequestNegotiableQuoteForm.js'; + +await provider.render(RequestNegotiableQuoteForm, { + slots: { + CommentField: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom CommentField'; + ctx.appendChild(element); + } + } +})(block); +``` + +### QuoteNameField slot + +The `QuoteNameField` slot allows you to customize the quote name field section of the `RequestNegotiableQuoteForm` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { RequestNegotiableQuoteForm } from '@dropins/storefront-quote-management/containers/RequestNegotiableQuoteForm.js'; + +await provider.render(RequestNegotiableQuoteForm, { + slots: { + QuoteNameField: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom QuoteNameField'; + ctx.appendChild(element); + } + } +})(block); +``` + +### RequestButton slot + +The `RequestButton` slot allows you to customize the request button section of the `RequestNegotiableQuoteForm` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { RequestNegotiableQuoteForm } from '@dropins/storefront-quote-management/containers/RequestNegotiableQuoteForm.js'; + +await provider.render(RequestNegotiableQuoteForm, { + slots: { + RequestButton: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom RequestButton'; + ctx.appendChild(element); + } + } +})(block); +``` + +### SaveDraftButton slot + +The `SaveDraftButton` slot allows you to customize the save draft button section of the `RequestNegotiableQuoteForm` container. + +#### Example + +```js +import { render as provider } from '@dropins/storefront-quote-management/render.js'; +import { RequestNegotiableQuoteForm } from '@dropins/storefront-quote-management/containers/RequestNegotiableQuoteForm.js'; + +await provider.render(RequestNegotiableQuoteForm, { + slots: { + SaveDraftButton: (ctx) => { + // Your custom implementation + const element = document.createElement('div'); + element.innerText = 'Custom SaveDraftButton'; + ctx.appendChild(element); + } + } +})(block); +``` + + + +{/* This documentation is auto-generated from: https://github.com/adobe-commerce/storefront-quote-management */} diff --git a/src/content/docs/dropins-b2b/quote-management/styles.mdx b/src/content/docs/dropins-b2b/quote-management/styles.mdx new file mode 100644 index 000000000..ccee57278 --- /dev/null +++ b/src/content/docs/dropins-b2b/quote-management/styles.mdx @@ -0,0 +1,337 @@ +--- +title: Quote Management styles +description: CSS classes and customization examples for the Quote Management drop-in. +--- + +import Link from '@components/Link.astro'; + +Customize the Quote Management drop-in using CSS classes and design tokens. This page covers the Quote Management-specific container classes and customization examples. For comprehensive information about design tokens, responsive breakpoints, and styling best practices, see [Styling Drop-In Components](/dropins/all/styling/). + +
+Version: 1.0.0-beta5 +
+ +## Customization example + +Add this to the CSS file of the specific where you're using the Quote Management drop-in. + +For a complete list of available design tokens (colors, spacing, typography, and more), see the [Design tokens reference](/dropins/all/styling/#design-tokens-reference). + +```css title="styles/styles.css" del={2-3} ins={4-5} +.attached-files-list { + gap: var(--spacing-small, 8px); + margin: var(--spacing-medium, 16px) 0; + gap: var(--spacing-medium, 8px); + margin: var(--spacing-large, 16px) 0; +} +``` + +## Container classes + +The Quote Management drop-in uses BEM-style class naming. Use the browser DevTools to inspect elements and find specific class names. + +```css +/* ActionsBar */ +.quote-management-actions-bar {} +.quote-management-actions-bar__button {} +.quote-management-actions-bar__buttons {} +.quote-management-actions-bar__container {} +.quote-management-actions-bar__dropdown {} + +/* AttachedFilesList */ +.attached-files-list {} +.attached-files-list__error-icon {} +.attached-files-list__item {} +.attached-files-list__item--error {} +.attached-files-list__item--success {} +.attached-files-list__item--uploading {} +.attached-files-list__item-error {} +.attached-files-list__item-icon {} +.attached-files-list__item-info {} +.attached-files-list__item-main {} +.attached-files-list__item-name {} +.attached-files-list__item-size {} +.attached-files-list__remove-button {} +.attached-files-list__spinner {} +.attached-files-list__success-icon {} + +/* ConfirmationModal */ +.confirmation-modal__actions {} +.confirmation-modal__banner {} +.confirmation-modal__content {} +.confirmation-modal__message {} +.confirmation-modal__title {} +.dropin-in-line-alert {} +.dropin-modal {} +.dropin-modal__body {} +.dropin-modal__body--medium {} +.dropin-modal__content {} +.dropin-modal__header {} + +/* ItemsQuoted */ +.quote-management-items-quoted {} + +/* LineItemNoteModal */ +.dropin-in-line-alert {} +.dropin-modal__close-button {} +.dropin-modal__header-title-content {} +.quote-management-line-item-note-modal {} +.quote-management-line-item-note-modal__actions {} +.quote-management-line-item-note-modal__cancel-button {} +.quote-management-line-item-note-modal__confirm-button {} +.quote-management-line-item-note-modal__content {} +.quote-management-line-item-note-modal__details {} +.quote-management-line-item-note-modal__details-table {} +.quote-management-line-item-note-modal__discount {} +.quote-management-line-item-note-modal__error-banner {} +.quote-management-line-item-note-modal__error-text {} +.quote-management-line-item-note-modal__form-field {} +.quote-management-line-item-note-modal__helper-text {} +.quote-management-line-item-note-modal__product-info {} +.quote-management-line-item-note-modal__product-name {} +.quote-management-line-item-note-modal__product-sku {} +.quote-management-line-item-note-modal__quantity-input {} +.quote-management-line-item-note-modal__stock {} +.quote-management-line-item-note-modal__success-banner {} +.quote-management-line-item-note-modal__table-error {} + +/* ManageNegotiableQuote */ +.quote-management-manage-negotiable-quote {} +.quote-management-manage-negotiable-quote__action-bar {} +.quote-management-manage-negotiable-quote__attach-files {} +.quote-management-manage-negotiable-quote__banner {} +.quote-management-manage-negotiable-quote__detail {} +.quote-management-manage-negotiable-quote__detail-content {} +.quote-management-manage-negotiable-quote__detail-title {} +.quote-management-manage-negotiable-quote__details {} +.quote-management-manage-negotiable-quote__footer {} +.quote-management-manage-negotiable-quote__header {} +.quote-management-manage-negotiable-quote__item-actions {} +.quote-management-manage-negotiable-quote__quote-actions {} +.quote-management-manage-negotiable-quote__quote-comments-container {} +.quote-management-manage-negotiable-quote__quote-comments-title {} +.quote-management-manage-negotiable-quote__quote-name {} +.quote-management-manage-negotiable-quote__quote-name-title {} +.quote-management-manage-negotiable-quote__quote-name-wrapper {} +.quote-management-manage-negotiable-quote__quote-status {} +.quote-management-manage-negotiable-quote__rename-button {} +.quote-management-manage-negotiable-quote__shipping-information-container {} +.quote-management-manage-negotiable-quote__shipping-information-title {} + +/* ManageNegotiableQuoteTemplate */ +.quote-management-manage-negotiable-quote-template {} +.quote-management-manage-negotiable-quote-template__banner {} +.quote-management-manage-negotiable-quote-template__comments-container {} +.quote-management-manage-negotiable-quote-template__comments-title {} +.quote-management-manage-negotiable-quote-template__detail {} +.quote-management-manage-negotiable-quote-template__detail-content {} +.quote-management-manage-negotiable-quote-template__detail-title {} +.quote-management-manage-negotiable-quote-template__details {} +.quote-management-manage-negotiable-quote-template__footer {} +.quote-management-manage-negotiable-quote-template__header {} +.quote-management-manage-negotiable-quote-template__history-log-container {} +.quote-management-manage-negotiable-quote-template__history-log-title {} +.quote-management-manage-negotiable-quote-template__items-table {} +.quote-management-manage-negotiable-quote-template__reference-documents {} +.quote-management-manage-negotiable-quote-template__reference-documents-container {} +.quote-management-manage-negotiable-quote-template__reference-documents-title {} +.quote-management-manage-negotiable-quote-template__rename-button {} +.quote-management-manage-negotiable-quote-template__shipping-information-container {} +.quote-management-manage-negotiable-quote-template__shipping-information-title {} +.quote-management-manage-negotiable-quote-template__template-name-title {} +.quote-management-manage-negotiable-quote-template__template-name-wrapper {} +.quote-management-manage-negotiable-quote-template__template-status {} + +/* OrderSummary */ +.dropin-accordion-section__content-container {} +.dropin-divider {} +.quote-order-summary {} +.quote-order-summary__caption {} +.quote-order-summary__content {} +.quote-order-summary__discount {} +.quote-order-summary__divider-primary {} +.quote-order-summary__divider-secondary {} +.quote-order-summary__entry {} +.quote-order-summary__heading {} +.quote-order-summary__label {} +.quote-order-summary__price {} +.quote-order-summary__primary {} +.quote-order-summary__secondary {} +.quote-order-summary__shipping--edit {} +.quote-order-summary__shipping--hide {} +.quote-order-summary__shipping--state {} +.quote-order-summary__shipping--zip {} +.quote-order-summary__shippingLink {} +.quote-order-summary__spinner {} +.quote-order-summary__taxEntry {} +.quote-order-summary__taxes {} +.quote-order-summary__total {} + +/* OrderSummaryLine */ +.quote-order-summary__label {} +.quote-order-summary__label--bold {} +.quote-order-summary__label--muted {} +.quote-order-summary__price {} +.quote-order-summary__price--bold {} +.quote-order-summary__price--muted {} + +/* ProductListTable */ +.quote-management-product-list-table-container {} +.quote-management-product-list-table-container__submit-container {} +.quote-management-product-list-table__bundle-option {} +.quote-management-product-list-table__bundle-option-label {} +.quote-management-product-list-table__bundle-option-value {} +.quote-management-product-list-table__bundle-option-value-original-price {} +.quote-management-product-list-table__bundle-option-values {} +.quote-management-product-list-table__checkbox {} +.quote-management-product-list-table__configurable-option {} +.quote-management-product-list-table__configurable-option-label {} +.quote-management-product-list-table__configurable-option-value {} +.quote-management-product-list-table__discount-container {} +.quote-management-product-list-table__note-content {} +.quote-management-product-list-table__note-edit-icon {} +.quote-management-product-list-table__note-item {} +.quote-management-product-list-table__note-meta {} +.quote-management-product-list-table__note-text {} +.quote-management-product-list-table__notes-container {} +.quote-management-product-list-table__notes-header {} +.quote-management-product-list-table__notes-list {} +.quote-management-product-list-table__notes-row-wrapper {} +.quote-management-product-list-table__product-name {} +.quote-management-product-list-table__product-name-container {} +.quote-management-product-list-table__quantity {} +.quote-management-product-list-table__quantity-input {} +.quote-management-product-list-table__sku {} + +/* QuoteCommentsList */ +.quote-management-quote-comments-list {} +.quote-management-quote-comments-list__attachment-link {} +.quote-management-quote-comments-list__attachments {} +.quote-management-quote-comments-list__attachments-label {} +.quote-management-quote-comments-list__author {} +.quote-management-quote-comments-list__by {} +.quote-management-quote-comments-list__date {} +.quote-management-quote-comments-list__empty-state {} +.quote-management-quote-comments-list__header {} +.quote-management-quote-comments-list__item {} +.quote-management-quote-comments-list__text {} + +/* QuoteHistoryLog */ +.quote-management-quote-history-log {} +.quote-management-quote-history-log__empty {} +.quote-management-quote-history-log__entries {} +.quote-management-quote-history-log__entry {} +.quote-management-quote-history-log__entry-author {} +.quote-management-quote-history-log__entry-change {} +.quote-management-quote-history-log__entry-changes {} +.quote-management-quote-history-log__entry-date {} +.quote-management-quote-history-log__entry-header {} +.quote-management-quote-history-log__entry-meta {} +.quote-management-quote-history-log__entry-type {} + +/* QuotePricesSummary */ +.quote-management-quote-prices-summary {} +.quote-management-quote-prices-summary__accordion {} +.quote-management-quote-prices-summary__entry {} +.quote-management-quote-prices-summary__label {} +.quote-management-quote-prices-summary__label--strong {} +.quote-management-quote-prices-summary__value {} + +/* QuoteSummaryList */ +.dropin-cart-item__quantity {} +.quote-management-quote-summary-list {} +.quote-management-quote-summary-list-accordion {} +.quote-management-quote-summary-list-accordion__section {} +.quote-management-quote-summary-list-footer__action {} +.quote-management-quote-summary-list__background--secondary {} +.quote-management-quote-summary-list__content {} +.quote-management-quote-summary-list__heading {} +.quote-management-quote-summary-list__heading--full-width {} +.quote-management-quote-summary-list__heading-divider {} +.quote-management-quote-summary-list__out-of-stock-message {} + +/* QuoteTemplatesListTable */ +.quote-management-quote-templates-list-table {} +.quote-management-quote-templates-list-table__actions-cell {} +.quote-management-quote-templates-list-table__table {} +.quote-templates-list-table__empty-state {} +.quote-templates-list-table__footer {} +.quote-templates-list-table__item-range {} +.quote-templates-list-table__page-size-picker {} +.quote-templates-list-table__pagination {} + +/* QuotesListTable */ +.dropin-picker {} +.dropin-picker__select {} +.quote-management-quotes-list-table {} +.quotes-list-table__empty-state {} +.quotes-list-table__footer {} +.quotes-list-table__item-range {} +.quotes-list-table__page-size-picker {} +.quotes-list-table__pagination {} + +/* ReferenceDocumentFormModal */ +.dropin-in-line-alert {} +.dropin-modal__close-button {} +.quote-management-reference-document-form-modal {} +.quote-management-reference-document-form-modal__actions {} +.quote-management-reference-document-form-modal__cancel-button {} +.quote-management-reference-document-form-modal__content {} +.quote-management-reference-document-form-modal__error-banner {} +.quote-management-reference-document-form-modal__error-text {} +.quote-management-reference-document-form-modal__save-button {} +.quote-management-reference-document-form-modal__success-banner {} + +/* ReferenceDocumentsList */ +.quote-management-reference-documents-list {} +.quote-management-reference-documents-list__add-button {} +.quote-management-reference-documents-list__content {} +.quote-management-reference-documents-list__document {} +.quote-management-reference-documents-list__document-actions {} +.quote-management-reference-documents-list__document-link {} +.quote-management-reference-documents-list__edit-button {} +.quote-management-reference-documents-list__empty {} +.quote-management-reference-documents-list__header {} +.quote-management-reference-documents-list__info-icon {} +.quote-management-reference-documents-list__remove-button {} +.quote-management-reference-documents-list__separator {} +.quote-management-reference-documents-list__title {} + +/* RenameQuoteModal */ +.dropin-in-line-alert {} +.dropin-modal__close-button {} +.dropin-modal__header-title-content {} +.quote-management-rename-quote-modal {} +.quote-management-rename-quote-modal__actions {} +.quote-management-rename-quote-modal__cancel-button {} +.quote-management-rename-quote-modal__content {} +.quote-management-rename-quote-modal__error-banner {} +.quote-management-rename-quote-modal__error-text {} +.quote-management-rename-quote-modal__save-button {} +.quote-management-rename-quote-modal__success-banner {} + +/* RequestNegotiableQuoteForm */ +.request-negotiable-quote-form {} +.request-negotiable-quote-form__actions {} +.request-negotiable-quote-form__attach-file-field {} +.request-negotiable-quote-form__error-banner {} +.request-negotiable-quote-form__title {} + +/* ShippingAddressDisplay */ +.quote-management-shipping-address-display {} +.quote-management-shipping-address-display--empty {} +.quote-management-shipping-address-display__field {} +.quote-management-shipping-address-display__name {} +.quote-management-shipping-address-display__no-address {} + +/* TabbedContent */ +.quote-management-tabbed-content {} +.quote-management-tabbed-content__active-tab-content {} +.quote-management-tabbed-content__tab {} +.quote-management-tabbed-content__tab--active {} +.quote-management-tabbed-content__tabs {} +``` + +For the source CSS files, see the . + + diff --git a/src/content/docs/merchants/blocks/targeted-block.mdx b/src/content/docs/merchants/blocks/commerce-account-header.mdx similarity index 56% rename from src/content/docs/merchants/blocks/targeted-block.mdx rename to src/content/docs/merchants/blocks/commerce-account-header.mdx index 769c483f2..6bf78e719 100644 --- a/src/content/docs/merchants/blocks/targeted-block.mdx +++ b/src/content/docs/merchants/blocks/commerce-account-header.mdx @@ -1,34 +1,42 @@ --- -title: Personalization -description: Display personalized content to specific customer segments, groups, or cart rules using personalization blocks. This enables you to show different promotions, messaging, or content to different customer types without creating separate pages. +title: Commerce Account Header +description: Customers see consistent page headers across account pages through this block. Place it at the top of account-related pages. sidebar: - label: Personalization + label: Account Header --- import Diagram from '@components/Diagram.astro'; -Display personalized content to specific customer segments, groups, or cart rules using personalization blocks. This enables you to show different promotions, messaging, or content to different customer types without creating separate pages. +Customers see consistent page headers across account pages through this block. Place it at the top of account-related pages. -:::note[Setup required] -See the [Personalization setup guide](/merchants/commerce-blocks/personalization/) for detailed examples including customer segments, fragments, and fallback configurations. -::: - - - ![Personalization block.](/images/placeholder.webp) + + ![Commerce Account Header block.](/images/placeholder.webp) ## Configuration -Personalization blocks are configured through document tables with the following parameters: +Add this table to your document to configure the block: + + + + + + + + + + + +
commerce-account-header
TitleMy account
+ +### Property descriptions + +**Title**: The header title text displayed to users. Default: `My account`. + +### Important notes -| Parameter | Description | -|-----------|-------------| -| Customer Groups | Comma-separated list of customer group IDs that determine which customers can view the block. | -| Customer Segments | Comma-separated list of customer segment IDs that determine which customers can view the block. | -| Cart Rules | Comma-separated list of cart rule IDs that determine which customers can view the block. | -| Fragment | The path to the fragment containing the content. | -| Type | The type of block to use for the fallback chain creation. Only the first block that satisfies the conditions of each type is displayed. | +- Uses default configuration values if custom settings are missing or invalid. ## Section metadata @@ -63,6 +71,6 @@ Control the section styling, spacing, and layout that wraps your commerce block.
-Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options.
diff --git a/src/content/docs/merchants/blocks/commerce-account-nav.mdx b/src/content/docs/merchants/blocks/commerce-account-nav.mdx new file mode 100644 index 000000000..60f3956d9 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-account-nav.mdx @@ -0,0 +1,60 @@ +--- +title: Account Navigation +description: Customers navigate between account sections through this block. Place it on account dashboard pages. +sidebar: + label: Account Navigation +--- + +import Diagram from '@components/Diagram.astro'; + +Customers navigate between account sections through this block. Place it on account dashboard pages. + + + ![Account Navigation block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-account-sidebar.mdx b/src/content/docs/merchants/blocks/commerce-account-sidebar.mdx new file mode 100644 index 000000000..002d86c24 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-account-sidebar.mdx @@ -0,0 +1,56 @@ +--- +title: Commerce Account Sidebar +description: Customers navigate account sections through this sidebar. Place it on account pages for easy navigation. +sidebar: + label: Account Sidebar +--- + +import Diagram from '@components/Diagram.astro'; + +Customers navigate account sections through this sidebar. Place it on account pages for easy navigation. + + + ![Commerce Account Sidebar block.](/images/placeholder.webp) + + + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-negotiable-quote-template.mdx b/src/content/docs/merchants/blocks/commerce-b2b-negotiable-quote-template.mdx new file mode 100644 index 000000000..f2da1ef6b --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-negotiable-quote-template.mdx @@ -0,0 +1,59 @@ +--- +title: Negotiable Quote Template +description: Buyers save frequently ordered items as templates for faster reordering through this block. Place it on quote template pages. +sidebar: + label: Quote Template +--- + +import Diagram from '@components/Diagram.astro'; + +Buyers save frequently ordered items as templates for faster reordering through this block. Place it on quote template pages. + + + ![Negotiable Quote Template block.](/images/placeholder.webp) + + +## Requirements + +Customers must log in to access this block. Enable company features and negotiable quotes in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company** and **Stores** > **Configuration** > **General** > **B2B Features** > **Enable B2B Quote**. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-negotiable-quote.mdx b/src/content/docs/merchants/blocks/commerce-b2b-negotiable-quote.mdx new file mode 100644 index 000000000..c323e7197 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-negotiable-quote.mdx @@ -0,0 +1,83 @@ +--- +title: Negotiable Quote +description: Buyers request custom pricing and negotiate terms with your sales team through this block. Place it on quote pages. +sidebar: + label: Negotiable Quote +--- + +import Diagram from '@components/Diagram.astro'; + +Buyers request custom pricing and negotiate terms with your sales team through this block. Place it on quote pages. + + + ![Negotiable Quote block.](/images/placeholder.webp) + + +## Requirements + +Customers must log in to access this block. Enable company features and negotiable quotes in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company** and **Stores** > **Configuration** > **General** > **B2B Features** > **Enable B2B Quote**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleQuotes
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-approval-flow.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-approval-flow.mdx new file mode 100644 index 000000000..6c2df4112 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-approval-flow.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order Approval Flow" +description: Users view workflow status and who approved or rejected orders through this block. Place it on purchase order detail pages. +sidebar: + label: "PO Approval Flow" +--- + +import Diagram from '@components/Diagram.astro'; + +Users view workflow status and who approved or rejected orders through this block. Place it on purchase order detail pages. + + + ![Purchase Order Approval Flow block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-approval-rule-details.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-approval-rule-details.mdx new file mode 100644 index 000000000..d7425d96d --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-approval-rule-details.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order Approval Rule Details" +description: Administrators review rule conditions and approval requirements through this block. Place it on approval rule detail pages. +sidebar: + label: "PO Approval Rule Details" +--- + +import Diagram from '@components/Diagram.astro'; + +Administrators review rule conditions and approval requirements through this block. Place it on approval rule detail pages. + + + ![Purchase Order Approval Rule Details block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-approval-rule-form.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-approval-rule-form.mdx new file mode 100644 index 000000000..4ae1738cd --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-approval-rule-form.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order Approval Rule Form" +description: Administrators create spending limits and set approval hierarchies through this block. Place it on create approval rule pages. +sidebar: + label: "PO Approval Rule Form" +--- + +import Diagram from '@components/Diagram.astro'; + +Administrators create spending limits and set approval hierarchies through this block. Place it on create approval rule pages. + + + ![Purchase Order Approval Rule Form block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-approval-rules-list.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-approval-rules-list.mdx new file mode 100644 index 000000000..18f2135e5 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-approval-rules-list.mdx @@ -0,0 +1,84 @@ +--- +title: "Purchase Order Approval Rules List" +description: Administrators view all approval rules and which orders they affect through this block. Place it on approval rules pages. +sidebar: + label: "PO Approval Rules List" +--- + +import Diagram from '@components/Diagram.astro'; + +Administrators view all approval rules and which orders they affect through this block. Place it on approval rules pages. + + + ![Purchase Order Approval Rules List block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleApproval Rules
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-checkout-success.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-checkout-success.mdx new file mode 100644 index 000000000..8f3b8ab96 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-checkout-success.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order Checkout Success" +description: Buyers receive purchase order confirmation and order numbers through this block. Place it on purchase order confirmation pages. +sidebar: + label: "PO Checkout Success" +--- + +import Diagram from '@components/Diagram.astro'; + +Buyers receive purchase order confirmation and order numbers through this block. Place it on purchase order confirmation pages. + + + ![Purchase Order Checkout Success block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-comment-form.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-comment-form.mdx new file mode 100644 index 000000000..ba7f377bb --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-comment-form.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order Comment Form" +description: Team members communicate about orders and document decisions through this block. Place it on purchase order detail pages. +sidebar: + label: "PO Comment Form" +--- + +import Diagram from '@components/Diagram.astro'; + +Team members communicate about orders and document decisions through this block. Place it on purchase order detail pages. + + + ![Purchase Order Comment Form block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-comments-list.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-comments-list.mdx new file mode 100644 index 000000000..31db1530a --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-comments-list.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order Comments List" +description: Team members view order discussions and approval reasons through this block. Place it on purchase order detail pages. +sidebar: + label: "PO Comments List" +--- + +import Diagram from '@components/Diagram.astro'; + +Team members view order discussions and approval reasons through this block. Place it on purchase order detail pages. + + + ![Purchase Order Comments List block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-company-purchase-orders.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-company-purchase-orders.mdx new file mode 100644 index 000000000..95822ea90 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-company-purchase-orders.mdx @@ -0,0 +1,84 @@ +--- +title: "Company Purchase Orders" +description: Managers monitor all company spending and track pending approvals through this block. Place it on company purchase orders pages. +sidebar: + label: "Company POs" +--- + +import Diagram from '@components/Diagram.astro'; + +Managers monitor all company spending and track pending approvals through this block. Place it on company purchase orders pages. + + + ![Company Purchase Orders block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitlePurchase Orders
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-customer-purchase-orders.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-customer-purchase-orders.mdx new file mode 100644 index 000000000..a85f107ad --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-customer-purchase-orders.mdx @@ -0,0 +1,84 @@ +--- +title: "Customer Purchase Orders" +description: Buyers track their own purchase orders and monitor approval status through this block. Place it on my purchase orders pages. +sidebar: + label: "Customer POs" +--- + +import Diagram from '@components/Diagram.astro'; + +Buyers track their own purchase orders and monitor approval status through this block. Place it on my purchase orders pages. + + + ![Customer Purchase Orders block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleMy Purchase Orders
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-header.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-header.mdx new file mode 100644 index 000000000..d69287f87 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-header.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order Header" +description: Users navigate purchase order details with contextual page headers through this block. Place it at the top of purchase order pages. +sidebar: + label: "PO Header" +--- + +import Diagram from '@components/Diagram.astro'; + +Users navigate purchase order details with contextual page headers through this block. Place it at the top of purchase order pages. + + + ![Purchase Order Header block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-history-log.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-history-log.mdx new file mode 100644 index 000000000..1e50b71c4 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-history-log.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order History Log" +description: Users view audit trails showing who approved orders and when actions occurred through this block. Place it on purchase order detail pages. +sidebar: + label: "PO History Log" +--- + +import Diagram from '@components/Diagram.astro'; + +Users view audit trails showing who approved orders and when actions occurred through this block. Place it on purchase order detail pages. + + + ![Purchase Order History Log block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-require-approval-purchase-orders.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-require-approval-purchase-orders.mdx new file mode 100644 index 000000000..4b51ed9b7 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-require-approval-purchase-orders.mdx @@ -0,0 +1,84 @@ +--- +title: "Purchase Orders Requiring Approval" +description: Approvers see orders awaiting their review and prioritize approval processing through this block. Place it on orders for approval pages. +sidebar: + label: "POs Requiring Approval" +--- + +import Diagram from '@components/Diagram.astro'; + +Approvers see orders awaiting their review and prioritize approval processing through this block. Place it on orders for approval pages. + + + ![Purchase Orders Requiring Approvalblock.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleRequires My Approval
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-po-status.mdx b/src/content/docs/merchants/blocks/commerce-b2b-po-status.mdx new file mode 100644 index 000000000..a8b24c77c --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-po-status.mdx @@ -0,0 +1,60 @@ +--- +title: "Purchase Order Status" +description: Users view order status and take actions like approve, reject, or cancel through this block. Place it on purchase order detail pages. +sidebar: + label: "PO Status" +--- + +import Diagram from '@components/Diagram.astro'; + +Users view order status and take actions like approve, reject, or cancel through this block. Place it on purchase order detail pages. + + + ![Purchase Order Status block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-quote-checkout.mdx b/src/content/docs/merchants/blocks/commerce-b2b-quote-checkout.mdx new file mode 100644 index 000000000..749357f01 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-quote-checkout.mdx @@ -0,0 +1,83 @@ +--- +title: Quote Checkout +description: Buyers complete negotiated quote purchases with approved pricing through this block. Place it on quote checkout pages. +sidebar: + label: Quote Checkout +--- + +import Diagram from '@components/Diagram.astro'; + +Buyers complete negotiated quote purchases with approved pricing through this block. Place it on quote checkout pages. + + + ![Quote Checkout block.](/images/placeholder.webp) + + +## Requirements + +Customers must log in to access this block. Enable company features and negotiable quotes in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company** and **Stores** > **Configuration** > **General** > **B2B Features** > **Enable B2B Quote**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleCheckout
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-requisition-list-view.mdx b/src/content/docs/merchants/blocks/commerce-b2b-requisition-list-view.mdx new file mode 100644 index 000000000..375b2ab4c --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-requisition-list-view.mdx @@ -0,0 +1,83 @@ +--- +title: Requisition List View +description: Buyers review and add items to cart from saved lists through this block. Place it on requisition list detail pages. +sidebar: + label: List View +--- + +import Diagram from '@components/Diagram.astro'; + +Buyers review and add items to cart from saved lists through this block. Place it on requisition list detail pages. + + + ![Requisition List View block.](/images/placeholder.webp) + + +## Requirements + +Customers must log in to access this block. Enable company features and requisition lists in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company** and **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Requisition List**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleRequisition List
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-b2b-requisition-list.mdx b/src/content/docs/merchants/blocks/commerce-b2b-requisition-list.mdx new file mode 100644 index 000000000..25ea8780c --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-b2b-requisition-list.mdx @@ -0,0 +1,83 @@ +--- +title: Requisition Lists +description: Buyers create shopping lists for recurring orders through this block. Place it on requisition list pages. +sidebar: + label: Requisition Lists +--- + +import Diagram from '@components/Diagram.astro'; + +Buyers create shopping lists for recurring orders through this block. Place it on requisition list pages. + + + ![Requisition Lists block.](/images/placeholder.webp) + + +## Requirements + +Customers must log in to access this block. Enable company features and requisition lists in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company** and **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Requisition List**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleRequisition Lists
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylehighlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-checkout-success.mdx b/src/content/docs/merchants/blocks/commerce-checkout-success.mdx new file mode 100644 index 000000000..523fa87af --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-checkout-success.mdx @@ -0,0 +1,60 @@ +--- +title: Checkout Success +description: Customers see order confirmation and order numbers after completing checkout through this block. Place it on your order confirmation page. +sidebar: + label: Checkout Success +--- + +import Diagram from '@components/Diagram.astro'; + +Customers see order confirmation and order numbers after completing checkout through this block. Place it on your order confirmation page. + + + ![Checkout Success block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. Purchase orders are then configured per company. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight, highlight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-company-accept-invitation.mdx b/src/content/docs/merchants/blocks/commerce-company-accept-invitation.mdx new file mode 100644 index 000000000..297820669 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-company-accept-invitation.mdx @@ -0,0 +1,60 @@ +--- +title: Accept Company Invitation +description: Invited users join companies through this block. Place it on invitation acceptance pages. +sidebar: + label: Accept Invitation +--- + +import Diagram from '@components/Diagram.astro'; + +Invited users join companies through this block. Place it on invitation acceptance pages. + + + ![Accept Company Invitation block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-company-create.mdx b/src/content/docs/merchants/blocks/commerce-company-create.mdx new file mode 100644 index 000000000..f04795162 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-company-create.mdx @@ -0,0 +1,80 @@ +--- +title: Create Company +description: Customers register new companies to access B2B purchasing features through this block. Place it on company registration pages. +sidebar: + label: Create Company +--- + +import Diagram from '@components/Diagram.astro'; + +Customers register new companies to access B2B purchasing features through this block. Place it on company registration pages. + + + ![Create Company block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + +
metadata
TitleCompany Registration
Robotsnoindex, nofollow
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-company-credit.mdx b/src/content/docs/merchants/blocks/commerce-company-credit.mdx new file mode 100644 index 000000000..aac7a5b89 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-company-credit.mdx @@ -0,0 +1,104 @@ +--- +title: Company Credit +description: Company buyers view credit balances and transaction history through this block. Place it on company credit pages. +sidebar: + label: Company Credit +--- + +import Diagram from '@components/Diagram.astro'; + +Company buyers view credit balances and transaction history through this block. Place it on company credit pages. + + + ![Company Credit block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features and company credit in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company** and **Stores** > **Configuration** > **Customers** > **Company Configuration** > **Enable Company Credit**. + +## Configuration + +Add this table to your document to configure the block: + + + + + + + + + + + +
commerce-company-credit
Show Historytrue
+ +### Property descriptions + +**Show History**: Controls whether to show company credit transaction history ('true') or only credit summary information ('false'). Set to `true` to enable this feature. Default: `true`. + +### Important notes + +- Requires user authentication. Unauthenticated users are automatically redirected to the login page. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleCompany Credit
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-company-profile.mdx b/src/content/docs/merchants/blocks/commerce-company-profile.mdx new file mode 100644 index 000000000..b96703398 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-company-profile.mdx @@ -0,0 +1,84 @@ +--- +title: Company Profile +description: Company administrators update business details and contact information through this block. Place it on company profile pages. +sidebar: + label: Company Profile +--- + +import Diagram from '@components/Diagram.astro'; + +Company administrators update business details and contact information through this block. Place it on company profile pages. + + + ![Company Profile block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleCompany Profile
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-company-roles-permissions.mdx b/src/content/docs/merchants/blocks/commerce-company-roles-permissions.mdx new file mode 100644 index 000000000..d082c5bdf --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-company-roles-permissions.mdx @@ -0,0 +1,84 @@ +--- +title: Company Roles and Permissions +description: Company administrators control who can approve orders and access features through this block. Place it on roles and permissions pages. +sidebar: + label: Roles & Permissions +--- + +import Diagram from '@components/Diagram.astro'; + +Company administrators control who can approve orders and access features through this block. Place it on roles and permissions pages. + + + ![Company Roles and Permissions block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleRoles & Permissions
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-company-structure.mdx b/src/content/docs/merchants/blocks/commerce-company-structure.mdx new file mode 100644 index 000000000..62fed2722 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-company-structure.mdx @@ -0,0 +1,84 @@ +--- +title: Company Structure +description: Company administrators organize teams and departments through this block. Place it on company structure pages. +sidebar: + label: Company Structure +--- + +import Diagram from '@components/Diagram.astro'; + +Company administrators organize teams and departments through this block. Place it on company structure pages. + + + ![Company Structure block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleCompany Structure
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-company-users.mdx b/src/content/docs/merchants/blocks/commerce-company-users.mdx new file mode 100644 index 000000000..37a37f870 --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-company-users.mdx @@ -0,0 +1,84 @@ +--- +title: Company Users +description: Company administrators add team members and manage user access through this block. Place it on company user management pages. +sidebar: + label: Company Users +--- + +import Diagram from '@components/Diagram.astro'; + +Company administrators add team members and manage user access through this block. Place it on company user management pages. + + + ![Company Users block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. + +## Configuration + +No configurations available for this block. + +## Page metadata + +Configure page-level metadata in the document authoring table below: + + + + + + + + + + + + + + + + + + + +
metadata
TitleCompany Users
Robotsnoindex, nofollow
Cache Controlno-store
+ +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/commerce-customer-company.mdx b/src/content/docs/merchants/blocks/commerce-customer-company.mdx new file mode 100644 index 000000000..b4bb3652f --- /dev/null +++ b/src/content/docs/merchants/blocks/commerce-customer-company.mdx @@ -0,0 +1,60 @@ +--- +title: Customer Company +description: Company users view their company affiliation and job title through this block. Place it on account information pages. +sidebar: + label: Customer Company +--- + +import Diagram from '@components/Diagram.astro'; + +Company users view their company affiliation and job title through this block. Place it on account information pages. + + + ![Customer Company block.](/images/placeholder.webp) + + + +## Requirements + +Customers must log in to access this block. Enable company features in **Stores** > **Configuration** > **General** > **B2B Features** > **Enable Company**. + +## Configuration + +No configurations available for this block. + +## Section metadata + +Control the section styling, spacing, and layout that wraps your commerce block. All properties are optional: + + + + + + + + + + + + + + + + + + + + + + + + + + + +
section-metadata
Stylelight (optional)
Paddingmedium (optional)
Marginsmall (optional)
Column Width30% (optional)
Gapsmall (optional)
+ +
+Learn more: See the Section Metadata guide for all available values and the Page Metadata guide for SEO and caching options. +
+ diff --git a/src/content/docs/merchants/blocks/index.mdx b/src/content/docs/merchants/blocks/index.mdx deleted file mode 100644 index 8bd3f9e06..000000000 --- a/src/content/docs/merchants/blocks/index.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Overview -description: Explore B2B commerce blocks for building enterprise storefronts with company management, purchasing workflows, and collaborative commerce functionality. -sidebar: - label: Overview - order: 1 ---- - -import TableWrapper from '@components/TableWrapper.astro'; - -B2B commerce blocks are pre-built components that provide B2B functionality for your Adobe Commerce storefront. These blocks work together with B2B drop-ins to enable enterprise commerce features like company management, purchase orders, negotiable quotes, and requisition lists. - - - -| Category | Blocks | Description | -|----------|--------|-------------| -| **Checkout & Account** | 9 blocks | B2B-specific checkout and account management blocks including [Account Navigation](/merchants/blocks/commerce-account-nav/), [Checkout Success](/merchants/blocks/commerce-checkout-success/), and [Customer Company](/merchants/blocks/commerce-customer-company/) switcher. | -| **Company Management** | 7 blocks | Company administration blocks for managing [Company Profile](/merchants/blocks/commerce-company-profile/), [Company Users](/merchants/blocks/commerce-company-users/), [Roles & Permissions](/merchants/blocks/commerce-company-roles-permissions/), [Company Structure](/merchants/blocks/commerce-company-structure/), [Company Credit](/merchants/blocks/commerce-company-credit/), [Create Company](/merchants/blocks/commerce-company-create/), and [Accept Invitation](/merchants/blocks/commerce-company-accept-invitation/). | -| **Company Switcher** | 1 block | [Customer Company](/merchants/blocks/commerce-customer-company/) block for company context switching for multi-company users. | -| **Purchase Order** | 13 blocks | Purchase order blocks including [Company POs](/merchants/blocks/commerce-b2b-po-company-purchase-orders/), [Customer POs](/merchants/blocks/commerce-b2b-po-customer-purchase-orders/), [PO Approval Flow](/merchants/blocks/commerce-b2b-po-approval-flow/), [PO Approval Rules](/merchants/blocks/commerce-b2b-po-approval-rules-list/), [PO Comments](/merchants/blocks/commerce-b2b-po-comments-list/), [PO History Log](/merchants/blocks/commerce-b2b-po-history-log/), and [PO Status](/merchants/blocks/commerce-b2b-po-status/). | -| **Quote Management** | 3 blocks | Negotiable quote blocks including [Negotiable Quotes](/merchants/blocks/commerce-b2b-negotiable-quote/), [Quote Checkout](/merchants/blocks/commerce-b2b-quote-checkout/), and [Quote Template](/merchants/blocks/commerce-b2b-negotiable-quote-template/). | -| **Requisition List** | 2 blocks | Requisition list blocks including [Requisition List](/merchants/blocks/commerce-b2b-requisition-list/) and [Requisition List View](/merchants/blocks/commerce-b2b-requisition-list-view/). | - - - -## Requirements - -All B2B commerce blocks require: - -- Adobe Commerce B2B features enabled in **Stores** > **Configuration** > **General** > **B2B Features** -- Company features enabled for company-related blocks -- Customer authentication for most B2B functionality - -See individual block documentation for specific requirements. - diff --git a/src/content/docs/merchants/commerce-blocks/index.mdx b/src/content/docs/merchants/commerce-blocks/index.mdx index 6b98c934a..970296c7c 100644 --- a/src/content/docs/merchants/commerce-blocks/index.mdx +++ b/src/content/docs/merchants/commerce-blocks/index.mdx @@ -21,15 +21,10 @@ These blocks power standard B2C storefronts. They provide essential shopping, ac | [Product Recommendations](/merchants/blocks/product-recommendations/) | Displays AI-powered product recommendations | Product pages, cart page, homepage | | [Commerce Cart](/merchants/blocks/commerce-cart/) | Shows shopping cart with items, pricing, and cart management | Cart page | | [Commerce Mini Cart](/merchants/blocks/commerce-mini-cart/) | Displays cart summary in a dropdown or overlay | Site header, global navigation | -| [Commerce Checkout](/merchants/blocks/commerce-checkout/) | Provides complete checkout flow with shipping, payment, and order review | Checkout page | | **Customer Account** | | | | [Commerce Login](/merchants/blocks/commerce-login/) | Provides customer login form | Login page, account access page | -| [Commerce Create Account](/merchants/blocks/commerce-create-account/) | Allows new customers to register | Registration page, checkout (guest to account) | -| [Commerce Confirm Account](/merchants/blocks/commerce-confirm-account/) | Confirms account creation via email link | Email confirmation landing page | | [Commerce Forgot Password](/merchants/blocks/commerce-forgot-password/) | Initiates password reset process | Password recovery page | | [Commerce Create Password](/merchants/blocks/commerce-create-password/) | Sets new password after reset | Password reset landing page | -| [Commerce Account Header](/merchants/blocks/commerce-account-header/) | Displays customer name and account navigation | Account dashboard header | -| [Commerce Account Sidebar](/merchants/blocks/commerce-account-sidebar/) | Shows account section navigation | Account pages sidebar | | [Commerce Addresses](/merchants/blocks/commerce-addresses/) | Manages shipping and billing addresses | Account address book page | | [Commerce Customer Information](/merchants/blocks/commerce-customer-information/) | Displays and edits customer profile details | Account profile page | | [Commerce Customer Details](/merchants/blocks/commerce-customer-details/) | Shows customer information in order context | Order details page | @@ -53,50 +48,6 @@ These blocks power standard B2C storefronts. They provide essential shopping, ac -## B2B commerce blocks - -These blocks add B2B functionality for business-to-business commerce. These blocks require Adobe Commerce B2B features to be enabled. - - - -| Commerce Block | Purpose | Common Usage | -|----------------|---------|--------------| -| **Account & Authentication** | | | -| [Account Navigation](/merchants/blocks/commerce-account-nav/) | Provides B2B account navigation menu | Account pages | -| [Checkout Success](/merchants/blocks/commerce-checkout-success/) | Displays order confirmation for B2B transactions | Thank you page | -| [Customer Company](/merchants/blocks/commerce-customer-company/) | Shows company switcher for multi-company users | Account header | -| **Company Management** | | | -| [Accept Invitation](/merchants/blocks/commerce-company-accept-invitation/) | Allows users to accept company invitations | Invitation page | -| [Company Credit](/merchants/blocks/commerce-company-credit/) | Manages company credit and payment terms | Company credit page | -| [Company Profile](/merchants/blocks/commerce-company-profile/) | Displays and edits company information | Company profile page | -| [Company Structure](/merchants/blocks/commerce-company-structure/) | Manages company hierarchy and teams | Company structure page | -| [Company Users](/merchants/blocks/commerce-company-users/) | Manages company user accounts | Company users page | -| [Create Company](/merchants/blocks/commerce-company-create/) | Registration form for new companies | Company registration | -| [Roles & Permissions](/merchants/blocks/commerce-company-roles-permissions/) | Manages user roles and permissions | Company roles page | -| **Purchase Orders** | | | -| [Company POs](/merchants/blocks/commerce-b2b-po-company-purchase-orders/) | Lists all company purchase orders | Company PO list page | -| [Customer POs](/merchants/blocks/commerce-b2b-po-customer-purchase-orders/) | Lists customer's purchase orders | My purchase orders page | -| [PO Approval Flow](/merchants/blocks/commerce-b2b-po-approval-flow/) | Displays approval workflow status | PO details page | -| [PO Approval Rule Details](/merchants/blocks/commerce-b2b-po-approval-rule-details/) | Shows approval rule conditions | Approval rule page | -| [PO Approval Rule Form](/merchants/blocks/commerce-b2b-po-approval-rule-form/) | Creates/edits approval rules | Rule creation page | -| [PO Approval Rules List](/merchants/blocks/commerce-b2b-po-approval-rules-list/) | Lists all approval rules | Approval rules page | -| [PO Checkout Success](/merchants/blocks/commerce-b2b-po-checkout-success/) | Confirms purchase order placement | PO thank you page | -| [PO Comment Form](/merchants/blocks/commerce-b2b-po-comment-form/) | Adds comments to purchase orders | PO details page | -| [PO Comments List](/merchants/blocks/commerce-b2b-po-comments-list/) | Shows purchase order discussion | PO details page | -| [PO Header](/merchants/blocks/commerce-b2b-po-header/) | Displays purchase order header info | PO details page | -| [PO History Log](/merchants/blocks/commerce-b2b-po-history-log/) | Shows purchase order change history | PO details page | -| [PO Status](/merchants/blocks/commerce-b2b-po-status/) | Displays purchase order status | PO details page | -| [POs Requiring Approval](/merchants/blocks/commerce-b2b-po-require-approval-purchase-orders/) | Lists orders needing approval | Approval queue page | -| **Quotes** | | | -| [Negotiable Quotes](/merchants/blocks/commerce-b2b-negotiable-quote/) | Manages quote requests and negotiations | Quotes list page | -| [Quote Checkout](/merchants/blocks/commerce-b2b-quote-checkout/) | Processes quote to order conversion | Quote checkout page | -| [Quote Template](/merchants/blocks/commerce-b2b-negotiable-quote-template/) | Creates quote from template | Quote creation page | -| **Requisition Lists** | | | -| [Requisition List](/merchants/blocks/commerce-b2b-requisition-list/) | Manages saved product lists for repeat ordering | Requisition list page | -| [Requisition List View](/merchants/blocks/commerce-b2b-requisition-list-view/) | Displays requisition list items and details | Requisition list details page | - - - ## Using commerce blocks ### Adding a block to your page @@ -153,7 +104,7 @@ Enhance your storefront with these additional pages: - [Your first page](/merchants/quick-start/your-first-page/) - Step-by-step tutorial for creating a cart page - [Page metadata](/merchants/quick-start/page-metadata/) - Configure page-level settings - [Section metadata](/merchants/quick-start/section-metadata/) - Style your page sections -- [Personalization](/merchants/blocks/targeted-block/) - Add personalized content to your storefront +- [Personalization](/merchants/commerce-blocks/personalization/) - Add personalized content to your storefront - [Product Recommendations setup](/merchants/blocks/product-recommendations/) - Set up intelligent product recommendations ## Need help? diff --git a/src/content/docs/merchants/content-customizations/index.mdx b/src/content/docs/merchants/content-customizations/index.mdx index 780989279..f5deda3ab 100644 --- a/src/content/docs/merchants/content-customizations/index.mdx +++ b/src/content/docs/merchants/content-customizations/index.mdx @@ -25,6 +25,14 @@ Customize and optimize your storefront content using these powerful tools. link="/merchants/content-customizations/experiments/" rightIcon="right-arrow" /> + - Initial release of the personalization drop-in component, including accompanying [developer](/dropins/personalization/) and [merchant](/merchants/blocks/targeted-block/) documentation. + Initial release of the personalization drop-in component, including accompanying [developer](/dropins/personalization/) and [merchant](/merchants/commerce-blocks/personalization/) documentation. This component provides a set of tools and containers designed to display content conditionally, based on Adobe Commerce customer groups, segments, and cart price rules. diff --git a/src/content/docs/releases/index.mdx b/src/content/docs/releases/index.mdx index e61f3d037..a958828ef 100644 --- a/src/content/docs/releases/index.mdx +++ b/src/content/docs/releases/index.mdx @@ -265,7 +265,7 @@ This suite release delivers significant enhancements to existing drop-in compone | Cart | • Improved extensibility for mini cart including additional [layout options](/dropins/cart/containers/cart-summary-table/)
• Introduced the ability to [edit product options](/dropins/cart/tutorials/enable-product-variation-updates-in-cart/) directly from the cart
• Mini cart [shows a message](/dropins/cart/tutorials/add-messages-to-mini-cart/) upon adding products to the cart | | Checkout | • [Configure terms and conditions](/merchants/content-customizations/terms-and-conditions/)
• [Improved error handling](/dropins/checkout/error-handling/)
• [Improved event handling](/dropins/all/events/) | | PDP | • Supports updating cart items by URL (`itemUid`) | -| Storefront Compatibility Package (SCP) | • Secure [personalization](/merchants/blocks/targeted-block/) features
• Social login integration APIs | +| Storefront Compatibility Package (SCP) | • Secure [personalization](/merchants/commerce-blocks/personalization/) features
• Social login integration APIs | | Boilerplate | • Upgraded boilerplate to Helix 5
• Improvements to scaffolding tool
• Centralized configuration through NPM
• Updated the [localization approach](/dropins/all/labeling/) across the boilerplate
• Eliminated the need to manage or modify configuration logic manually. Updates can now be delivered through standard package upgrades. | diff --git a/src/content/docs/setup/configuration/storefront-compatibility-b2b.mdx b/src/content/docs/setup/configuration/storefront-compatibility-b2b.mdx deleted file mode 100644 index bc0a85f8d..000000000 --- a/src/content/docs/setup/configuration/storefront-compatibility-b2b.mdx +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Storefront Compatibility B2B Package -description: Learn about the contents of Storefront Compatibility B2B Package, which can be used with Adobe Commerce and ACCS. ---- - -import Badge from '@components/overrides/Badge.astro'; - - - -The Storefront Compatibility B2B Package contains changes to the Adobe Commerce B2B codebase that enable drop-in component functionality. On [Adobe Commerce as a Cloud Service](https://experienceleague.adobe.com/en/docs/commerce/cloud-service/overview), it is installed and updated automatically. - -Most of these changes enhance the Adobe Commerce B2B GraphQL schema. However, miscellaneous bug fixes are also included. The drop-in components require this package along with Storefront Compatibility Package. - -## Major features - -The Storefront Compatibility B2B Package defines the following queries and mutations: - -- `placeNegotiableQuoteOrderV2` mutation - Converts a negotiable quote into an order and returns comprehensive order details along with an errors array for consistent response handling. - -- `setQuoteTemplateExpirationDate` mutation - Allows negotiable quote templates to include an expiration date using setQuoteTemplateExpirationDate. - -## Release information - -To see release notes for each version of the Storefront Compatibility B2B Package, go to the [changelog](/releases/changelog/).