Quote React Components

import { FC, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import { DefaultCartType } from '@broadleaf/commerce-cart';
import type { ConfigState } from '@broadleaf/commerce-quote-react';
import {
BrowseQuotes,
ConfigContextProvider,
} from '@broadleaf/commerce-quote-react';

import { getAuthUserScope } from '@app/auth/contexts';
import { useCartContext } from '@app/cart/contexts';
import { useIsQuoteEnabled } from '@app/cart/hooks';
import { usePreviewOptions, useQuoteClient } from '@app/common/contexts';
import { GATEWAY_HOST, PRODUCT_URL_PREFIX } from '@app/common/utils';
import { CSR_SCOPE } from '@app/csr/utils';
import { AccountMenu } from '@app/my-account/components';

import messages from 'some/where';

const MyQuotes: FC = () => {
  const quoteClient = useQuoteClient();
  const { cart, setCart } = useCartContext();
  const preview = usePreviewOptions();
  const { query, replace } = useRouter();
  const state = useMemo<ConfigState>(
    () => ({
      cartContextUri: '/cart',
      checkoutContextUri: '/checkout',
      customerScope: getAuthUserScope(),
      csrScope: CSR_SCOPE,
      gatewayHost: GATEWAY_HOST,
      preview,
      productRoutePrefix: PRODUCT_URL_PREFIX,
      quoteContextUri: '/my-account/quotes',
      quoteBrowsePageSize: 10,
    }),
    [preview]
  );
  const [isAllowQuotes, isFetching] = useIsQuoteEnabled();

  if (!isAllowQuotes && !isFetching) {
    replace('/my-account');
    return null;
  }

  if (query.id) {
    replace('/my-account/quotes/' + query.id);
    return null;
  }

  return (
    <ConfigContextProvider state={state}>
      <BrowseQuotes
        AccountMenu={AccountMenu}
        activeQuoteId={
          cart?.type === DefaultCartType.QUOTE ? cart.id : undefined
        }
        handleNotAuthenticated={() => {
          replace('/my-account/sign-in');
        }}
        messages={messages}
        quoteClient={quoteClient}
        setCart={setCart}
      />
    </ConfigContextProvider>
  );
};

import { FC, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { useRouter } from 'next/router';
import get from 'lodash/get';
import type { ConfigState } from '@broadleaf/commerce-quote-react';
import {
  ConfigContextProvider,
  QuoteDetails,
} from '@broadleaf/commerce-quote-react';

import { getAuthUserScope } from '@app/auth/contexts';
import { useCartContext } from '@app/cart/contexts';
import { useIsQuoteEnabled } from '@app/cart/hooks';
import { usePreviewOptions, useQuoteClient } from '@app/common/contexts';
import { GATEWAY_HOST, PRODUCT_URL_PREFIX } from '@app/common/utils';
import { CSR_SCOPE } from '@app/csr/utils';
import { AccountMenu } from '@app/my-account/components';

import messages from 'some/where';

const MyQuoteDetails: FC = () => {
  const { query, replace } = useRouter();
  const id = get(query, 'id');
  const quoteClient = useQuoteClient();
  const { cart, setCart } = useCartContext();
  const preview = usePreviewOptions();
  const state = useMemo<ConfigState>(
    () => ({
      cartContextUri: '/cart',
      checkoutContextUri: '/checkout',
      customerScope: getAuthUserScope(),
      csrScope: CSR_SCOPE,
      gatewayHost: GATEWAY_HOST,
      preview,
      productRoutePrefix: PRODUCT_URL_PREFIX,
      quoteContextUri: '/my-account/quotes',
      quoteBrowsePageSize: 10,
    }),
    [preview]
  );
  const [isAllowQuotes, isFetching] = useIsQuoteEnabled();

  if (!isAllowQuotes && !isFetching) {
    replace('/my-account');
    return null;
  }

  return (
    <ConfigContextProvider state={state}>
      <QuoteDetails
        AccountMenu={AccountMenu}
        activeQuoteId={cart?.id}
        handleNotAuthenticated={() => {
          replace('/my-account/sign-in');
        }}
        messages={messages}
        quoteClient={quoteClient}
        resolveQuoteId={() => id}
        setCart={setCart}
      />
    </ConfigContextProvider>
  );
};

import { ComponentRegistry } from '@broadleaf/commerce-quote-react';

const MyButton = () => {
  return <button onClick={() => {}} type="button">My Custom Button</button>;
}

ComponentRegistry.registerComponent('BUTTON', MyButton);

import type { FC } from 'react';
import { ComponentRenderer } from '@broadleaf/commerce-quote-react';

const MyComponent: FC = () => {
  // can passthrough other props that go directly to the underlying component
  return (
    <ComponentRenderer
      name="BUTTON"
      fallback={Button}
    >
      {children}
    </ComponentRenderer>
  );
};