Commerce Shared React Hooks

import type { FC } from 'react';
import { useLogout } from '@broadleaf/commerce-shared-react';

interface Props {
  logoutActions?: () => Promise<void>;
}

const LogoutButton: FC<Props> = props => {
  const { logoutActions } = props;

  const logoutWithRedirect = useLogout(logoutActions);

  const handleLogout = async () => {
    await logoutWithRedirect();
  };

  return (
    <button onClick={handleLogout} type="button">
      Logout
    </button>
  );
};

import { useClientDiscovery } from '@broadleaf/commerce-shared-react';

const MyComponent = () => {
  const { clientId, isLoading, error } = useClientDiscovery('my-client-id', 'dynamic');

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <h1>Client ID: {clientId}</h1>
    </div>
  );
};

import { useGetClient } from '@broadleaf/commerce-shared-react';
import type { TenantClient } from '@broadleaf/commerce-tenant';

const MyComponent = () => {
  const getClient = useGetClient();
  const client = getClient<TenantClient>('TENANT');

  return null;
};

import { useLocaleState } from '@broadleaf/commerce-shared-react';
import { useEffect } from 'react';

const MyComponent = () => {
  const locale = useLocaleState({
    cachedState: 'en-US',
    cookieName: 'blLocale',
    cookieMaxAge: 3600,
    defaultLocale: 'en-US'
  });

  useEffect(() => {
    console.log('Current locale:', locale);
  }, [locale]);

  return <div>Current locale: {locale}</div>;
};

import { useCallback, useState } from 'react';
import axios from 'axios';
import type { Cart, UpdateCartInfoRequest } from '@broadleaf/commerce-cart';
import type { ApiError } from '@broadleaf/commerce-core';
import { usePreviewOptions } from '@broadleaf/commerce-shared-react';

import { useGetCustomerAccessToken } from '@src/auth/hooks';
import { useCartClient } from '@src/common/contexts';

interface Response {
  updateCartInfo: (cart: Cart, request: UpdateCartInfoRequest) => Promise<void>;
  cart?: Cart;
  error?: ApiError | unknown;
}

export const useUpdateCartInfo = (): Response => {
  const [error, setError] = useState<ApiError | unknown>();
  const [cart, setCart] = useState<Cart>();
  const getCustomerToken = useGetCustomerAccessToken();
  const preview = usePreviewOptions(); // <-- use the hook
  const cartClient = useCartClient();

  const updateCartInfo = useCallback(
    async (cart: Cart, request: UpdateCartInfoRequest): Promise<void> => {
      try {
        setError(undefined);
        const accessToken = await getCustomerToken();
        const newCart = await cartClient.updateCartInfo(cart.id, request, {
          accessToken,
          preview, // <-- use the preview options //
          version: cart.version,
        });
        setCart(newCart);
      } catch (err) {
        if (axios.isCancel(err)) {
          return;
        }

        if (axios.isAxiosError(err)) {
          setError(err.response.data);
        }

        setError(err);
      }
    },
    [cartClient, getCustomerToken, preview]
  );

  return { updateCartInfo, error, cart };
};

import { PreviewContext } from 'contexts';
import { FC, useEffect } from 'react';

import { PageLoader, PreviewLayout } from 'components';
import { useProvidePreviewContext } from 'hooks';

import type { PreviewProviderProps } from 'types';
import { ComponentRenderer } from 'services';

/**
 * Sets up the PreviewContext and adds the `PREVIEW_LAYOUT` component that is primarily responsible
 * for adding the `PREVIEW_HEADER` component for rendering Preview-on-Site components.
 */
export const PreviewProvider: FC<PreviewProviderProps> = props => {
  const { children, messages } = props;
  const context = useProvidePreviewContext(props);
  const [state] = context;

  useEffect(() => {
    // when these change, need to refetch all the things
    if (state.reload) {
      window.location.reload();
    }
  }, [state.reload]);

  if (state.isActive && !state.isValidated) {
    return <ComponentRenderer name="PAGE_LOADER" fallback={PageLoader} />;
  }

  if (!state.isActive && !state.isValidated) {
    return <>{children}</>;
  }

  return (
    <PreviewContext.Provider value={context}>
      <ComponentRenderer
        name="PREVIEW_LAYOUT"
        messages={messages}
        fallback={PreviewLayout}
      >
        {children}
      </ComponentRenderer>
    </PreviewContext.Provider>
  );
};

import { useSandboxColors } from '@broadleaf/commerce-shared-react';

const MyComponent = () => {
  const sandbox = {
    color: '#ff0000'
  };

  const { background, text } = useSandboxColors(sandbox);

  return (
    <div style={{ backgroundColor: background.primary, color: text.primary }}>
      Sandbox Colors
    </div>
  );
};

import { FC } from 'react';
import { AuthProvider } from '@broadleaf/auth-react';
import { useGetApplicationUrl } from '@broadleaf/commerce-shared-react';
import type { AppAuthProviderProps } from '@broadleaf/commerce-shared-react';

const AppAuthProvider: FC<AppAuthProviderProps> = props => {
  const { children, ...rest } = props;
  const baseUrl = useGetApplicationUrl();
  const silentRedirectUri = new URL(baseUrl);
  // adding this path separately so as not to lose the parameters
  if (silentRedirectUri.pathname?.endsWith('/')) {
    silentRedirectUri.pathname += 'silent-callback.html';
  } else {
    silentRedirectUri.pathname += '/silent-callback.html';
  }

  return (
    <AuthProvider
      {...rest}
      key={props.clientId}
      redirectUri={baseUrl.href}
      silentRedirectUri={silentRedirectUri.href}
      credentials
      onRedirectCallback={appState => {
        window.location.replace(appState?.returnTo || window.location.pathname);
      }}
    >
      <AuthSessionManager>{children}</AuthSessionManager>
    </AuthProvider>
  );
};

import { useState } from 'react';
import type { HTMLDivElement } from 'react';
import { useDelayHover } from '@broadleaf/commerce-shared-react';

const MyComponent = () => {
  const [isHovered, setIsHovered] = useState(false);

  const { handleMouseEnter, handleMouseLeave } = useDelayHover<HTMLDivElement>({
    value: isHovered,
    setValue: setIsHovered,
    openDelay: 500,
    closeDelay: 500,
    includeEvent: true
  });

  return (
    <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
      Hover over me!
      {isHovered && <div>I'm hovered!</div>}
    </div>
  );
};

import { useEventCallback } from '@broadleaf/commerce-shared-react';

const MyComponent = props => {
  // the function `onChange` never mutates, but the function it internally reference does change
  const onChange = useEventCallback(e =>
    props.setFieldValue(e.target.name, e.target.value),
    // the internal function is recalculates anytime props.setFieldValue changes
    [props.setFieldValue]
  );
  return <Input onChange={onChange}/>
};

import { useGetCustomerAccessToken } from '@broadleaf/commerce-shared-react';

const MyComponent = () => {
  const getAccessToken = useGetCustomerAccessToken();

  const handleClick = async () => {
    const token = await getAccessToken();
    console.log('Access Token:', token);
  };

  return (
    <button onClick={handleClick}>
      Get Access Token
    </button>
  );
};

import { useInterval } from '@broadleaf/commerce-shared-react';

// update the count every second
const MyComponent = () => {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(prevCount => prevCount + 1);
  }, 1000);

  return (
    <div>
      <h1>Count: {count}</h1>
    </div>
  );
};

import { useIsClient } from '@broadleaf/commerce-shared-react';

const MyComponent = () => {
  const isClient = useIsClient();

  return (
    <div>
      <h1>Client Check</h1>
      <p>{isClient ? 'Running in client environment' : 'Not running in client environment'}</p>
    </div>
  );
};

import { useIsWindowFocused } from '@broadleaf/commerce-shared-react';

const MyComponent = () => {
  const isFocused = useIsWindowFocused();

  return (
    <div>
      <h1>Window Focus</h1>
      <p>{isFocused ? 'Window is focused' : 'Window is not focused'}</p>
    </div>
  );
};

import { PermissionType } from '@broadleaf/auth-web';
import type { UserOperationInformation } from '@broadleaf/commerce-shared-react';
import { useUserOperations } from '@broadleaf/commerce-shared-react';

const MyComponent = () => {
  const { userOperationInfo, errorUserOperations, loading, refetch } = useUserOperations('SUBSCRIPTION');

  if (loading) {
    return <div>Loading...</div>;
  }

  if (errorUserOperations) {
    return <div>Error: {errorUserOperations.message}</div>;
  }

  if (!hasPermission(userOperationInfo, 'SUBSCRIPTION')) {
    return <div>You do not have permission to view this information.</div>;
  }

  return (
    <div>
      <h1>User Operations</h1>
      <pre>{JSON.stringify(userOperationInfo, null, 2)}</pre>
      <button onClick={refetch}>Refetch</button>
    </div>
  );
};

const hasPermission = (
  userOperationInfo: UserOperationInformation,
  permission: string,
  types = [PermissionType.READ, PermissionType.ALL]
): boolean => {
  return (
    !!userOperationInfo &&
    !!userOperationInfo.content
      .filter(userOperation => userOperation.scope === permission)
      .filter(
        userOperation =>
          intersection(userOperation.operationTypes, types).length
      ).length
  );
};