Broadleaf Microservices
  • v1.0.0-latest-prod

Commerce Quote Microfrontend

Provides React UI components, hooks, and utilities for rendering a Quote browse and details page in My Account.

This library provides a few primary components that can be dropped in and represent entire pages along with exposing the various sub-components to allow users to easily customize their views using some premade components. There is also a Component Registry concept similar to the Admin where individual sub-components like buttons and links can be overridden easily.

The following are the primary components:

  • BrowseQuotes used for a new "My Quotes" list view for a customer to view all their quotes or for a CSR to view all quote requests.

    • This is used by a new page: /pages/my-account/quotes/index.tsx

  • QuoteDetails that is used to display the details of a quote.

    • This is used by a new page: /pages/my-account/quotes/[id].tsx

  • ConfigContextProvider used to set up common configuration for the components:

    • Key properties

      • cartContextUri: URI that maps to the root cart view context. Defaults to /cart

      • checkoutContextUri: URI that maps to the root checkout view context. Defaults to /checkout

      • customerScope: Security scope(s) for customers to test access or get access tokens with

      • csrScope: Security scope(s) for CSR to test access or get access tokens with

      • gatewayHost: The URL host of the gateway application

      • preview: Optional. Preview options to include in requests when in sandbox-preview mode

      • productRoutePrefix: Value to prefix to product URLs if any such as /product

      • quoteContextUri: URI that maps to the root quote view context. Defaults to /my-account/quotes

      • quoteBrowsePageSize: Size of the page of quotes

Installation

Using the package manager of your choice, run the following command inside your project directory to add the Quote React library and its required dependencies:

npm install @broadleaf/commerce-quote-react @broadleaf/commerce-shared-react @broadleaf/auth-react @broadleaf/commerce-cart @broadleaf/commerce-sandbox @broadleaf/commerce-tenant @headlessui/react classnames cookie formik lodash react@18 react-dom@18 react-datepicker react-intl
# or
yarn add @broadleaf/commerce-quote-react @broadleaf/commerce-shared-react @broadleaf/auth-react @broadleaf/commerce-cart @broadleaf/commerce-sandbox @broadleaf/commerce-tenant @headlessui/react classnames cookie formik lodash react@18 react-dom@18 react-datepicker react-intl
Tip
 These required dependencies are already included by the Next.js Starter project.

Configuration

See the following for how to enable Quote functionality throughout the framework:

Directory