Options
All
  • Public
  • Public/Protected
  • All
Menu

@bloomreach/connector-components-react

Index

Account

Address

Cart

Category

CommerceConnectorContext

CustomQueryOptionsProcessor

Order

Product

Wishlist

Generated GraphQL Types

Account

  • Custom Hook to change a customer's password.

    // An exmple usage with the hook.
    const [changePassword, result, loading, error] = useChangePassword();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    changePassword({
    password,
    newPassword,
    });
    }

    Returns [MutationType<ChangePasswordParams, ChangeCurrentCustomerPassword_changeCurrentCustomerPassword>, ChangeCurrentCustomerPassword_changeCurrentCustomerPassword | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • changePassword: A function to trigger the changeCurrentCustomerPassword mutation from your UI. You can pass ChangePasswordParams as parameters. The function returns a promise that fulfills with ChangePasswordResponse.
    • result: The ChangePasswordResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook for fetching current customer.

    // An exmple usage with the hook.
    const [currentCustomer, loading, error] = useCurrentCustomer();

    Parameters

    Returns [CurrentCustomerResult | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • currentCustomer: An object containing the CurrentCustomerResult result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • A "federated login" usually constitutes three steps:

    1. User is redirected to the remote login URL (hosted by the commerce backend) to login;
    2. After successful login, the remote server will send a "token" back to a "callback URL" on the frontend;
    3. The frontend uses the "token" to login with the GraphQL Service. This is a custom hook to deal with the last step.
    // An exmple usage with the hook. Usually this is to be used on the "callback page"
    const [federatedLogin, result, loading, error] = useFederatedLogin();

    // A sample `useEffect()` hook to handle login on page load
    useEffect(() => {
    const userId = ...; // Get userId
    const token = ...; // Get token
    federatedLogin({ userId, token });
    }, []);

    Returns [MutationType<FederatedLoginParams, FederatedLoginResult>, FederatedLoginResult, boolean, Error | undefined]

    An array constitutes of the following:

    • federatedLogin: A function to trigger the GraphQL service login from your UI. You can pass FederatedLoginParams as parameters. The function returns a promise that fulfills with FederatedLoginResult.
    • result: The FederatedLoginResult returned from your request. Defaults to undefined.
    • loading: A boolean that indicates whether your login request is in flight.
    • error: Any errors returned from the login request.
  • Custom Hook to send a "Reset password" email to the customer, as the first step in the reset password process

    // An exmple usage with the hook.
    const [recoverCustomer, result, loading, error] = useForgotPassword();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    recoverCustomer({ email });
    }

    Returns [MutationType<ForgotPasswordParams, RecoverCustomer_recoverCustomer>, RecoverCustomer_recoverCustomer | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • recoverCustomer: A function to trigger the recoverCustomer mutation from your UI, which will send a "Reset password" email to the customer's email address if it's valid. You can pass ForgotPasswordParams as parameters. The function returns a promise that fulfills with RecoverCustomerResult.
    • result: The RecoverCustomerResult returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to login a customer.

    // An exmple usage with the hook.
    const [login, result, loading, error] = useLogin();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    login({
    username,
    password,
    oldCartId,
    mergeWithExistingCustomerCart,
    });
    }

    Returns [MutationType<LoginParams, LoginResult>, LoginResult, boolean, Error | undefined]

    An array constitutes of the following:

    • login: A function to trigger the login process from your UI. You can pass LoginParams as parameters. The function returns a promise that fulfills with LoginResult.
    • result: The LoginResult returned from your request. Defaults to undefined.
    • loading: A boolean that indicates whether your login request is in flight.
    • error: Any errors returned from the login request.
  • useLogout(): [() => Promise<boolean>, boolean, Error | undefined]
  • Custom Hook to logout a customer.

    // An exmple usage with the hook.
    const [logout, loading, error] = useLogout();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle a button click
    const handleButtonClick = async () => {
    const result = await logout();
    // Do something with the result
    }

    Returns [() => Promise<boolean>, boolean, Error | undefined]

    An array constitutes of the following:

    • logout: A function to trigger the logout process from your UI. The function returns a promise that fulfills with a boolean to indicate whether or not the logout succeeded.
    • loading: A boolean that indicates whether your logout request is in flight.
    • error: Any errors returned from the logout request.
  • Custom Hook to reset a customer's password, using the password reset token/url received in the email.

    // An exmple usage with the hook.
    const [resetPassword, result, loading, error] = useResetPassword({ passwordResetToken });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    recoverCustomer({ newPassword });
    }

    Parameters

    Returns [MutationType<ResetPasswordParams, ResetCustomerPassword_resetCustomerPassword>, ResetCustomerPassword_resetCustomerPassword | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • resetPassword: A function to trigger the resetCustomerPassword mutation from your UI. You can pass ResetPasswordParams as parameters. The function returns a promise that fulfills with ResetCustomerPasswordResponse.
    • result: The ResetCustomerPasswordResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to register (sign up) a customer.

    // An exmple usage with the hook.
    const [signup, result, loading, error] = useSignup();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    signup({
    email,
    password,
    firstName,
    middleName,
    lastName,
    title,
    salutation,
    companyName,
    dateOfBirth,
    });
    }

    Returns [MutationType<SignupParams, SignUp_signUp>, SignUp_signUp | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • signup: A function to trigger the signUp mutation from your UI. You can pass SignupParams as parameters. The function returns a promise that fulfills with SignUpResponse.
    • result: The SignUpResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to update a customer.

    // An exmple usage with the hook.
    const [updateCustomer, result, loading, error] = useUpdateCustomer();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateCustomer({
    email,
    firstName,
    middleName,
    lastName,
    title,
    salutation,
    companyName,
    dateOfBirth,
    });
    }

    Returns [MutationType<UpdateCustomerParams, UpdateCurrentCustomerDetail_updateCurrentCustomerDetail>, UpdateCurrentCustomerDetail_updateCurrentCustomerDetail | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • updateCustomer: A function to trigger the updateCurrentCustomerDetail mutation from your UI. You can pass UpdateCustomerParams as parameters. The function returns a promise that fulfills with UpdateCustomerResponse.
    • result: The UpdateCustomerResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • withChangePassword<P>(Component: ComponentType<P & ChangePasswordProps>): (props: P) => Element
  • React HOC for changing a customer's password. Example usage:

    // Existing react component that renders an "Change password" form.
    function ChangePasswordForm({ changePassword, loading, result, error }: ChangePasswordProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    changePassword({
    password,
    newPassword,
    });
    }

    return (
    // renders the "Change password" form
    );
    }

    // Enhance the component.
    const EnhancedChangePasswordForm = withChangePassword(ChangePasswordForm);

    // Use the enhanced component.
    <EnhancedChangePasswordForm />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • React HOC for fetching current customer. Example usage:

    // Existing react component that renders current customer.
    function CurrentCustomer({ loading, currentCustomer, error }: CurrentCustomerProps) {
    return (
    // renders current customer
    );
    }

    // Enhance the component.
    const EnhancedCurrentCustomer = withCurrentCustomer(CurrentCustomer);

    // Use the enhanced component.
    <EnhancedCurrentCustomer />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • withFederatedLogin<P>(Component: ComponentType<P & FederatedLoginProps>): (props: P) => Element
  • A "federated login" usually constitutes three steps:

    1. User is redirected to the remote login URL (hosted by the commerce backend) to login;
    2. After successful login, the remote server will send a "token" back to a "callback URL" on the frontend;
    3. The frontend uses the "token" to login with the GraphQL Service. This is a React HOC for the last step. Example usage:
    // Existing react component that renders a "Callback page".
    function LoginCallback({ federatedLogin, loading, result, error }: FederatedLoginProps) {

    // A sample `useEffect()` hook to handle login on page load
    useEffect(() => {
    const userId = ...; // Get userId
    const token = ...; // Get token
    federatedLogin({ userId, token });
    }, []);

    // If login succeeds and a customer object is returned
    if (result.customer) {
    return (
    // Redirect to the protected page
    );
    }

    // Handle any errors
    }

    // Enhance the component.
    const EnhancedLoginCallback = withFederatedLogin(LoginCallback);

    // Use the enhanced component.
    <EnhancedLoginCallback />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • withForgotPassword<P>(Component: ComponentType<P & ForgotPasswordProps>): (props: P) => Element
  • React HOC for sending a "Reset password" email to the customer, as the first step in the reset password process Example usage:

    // Existing react component that renders an "Forgot password?" form.
    function ForgotPasswordForm({ recoverCustomer, loading, result, error }: ForgotPasswordProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    recoverCustomer({ email });
    }

    return (
    // renders the "Forgot password?" form
    );
    }

    // Enhance the component.
    const EnhancedForgotPasswordForm = withForgotPassword(ForgotPasswordForm);

    // Use the enhanced component.
    <EnhancedForgotPasswordForm />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • withLogin<P>(Component: ComponentType<P & LoginProps>): (props: P) => Element
  • React HOC for logging in a customer. Example usage:

    // Existing react component that renders an "Login" form.
    function LoginForm({ login, loading, result, error }: LoginProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    login({
    username,
    password,
    oldCartId,
    mergeWithExistingCustomerCart,
    });
    }

    return (
    // renders the "login" form
    );
    }

    // Enhance the component.
    const EnhancedLoginForm = withLogin(LoginForm);

    // Use the enhanced component.
    <EnhancedLoginForm />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • withLogout<P>(Component: ComponentType<P & LogoutProps>): (props: P) => Element
  • React HOC for logging out a customer. Example usage:

    // Existing react component that renders an "Logout" button.
    function LogoutButton({ logout, loading, error }: LogoutProps) {

    // A sample event handler to handle button click
    const handleButtonClick = async () => {
    const result = await logout();
    // Do something with the result
    }

    return (
    // renders the "logout" button
    );
    }

    // Enhance the component.
    const EnhancedLogoutButton = withLogout(LogoutButton);

    // Use the enhanced component.
    <EnhancedLogoutButton />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • React HOC for resetting a customer's password, using the password reset token/url received in the email. Example usage:

    // Existing react component that renders an "Reset password" form.
    function ResetPasswordForm({ resetPassword, loading, result, error }: ResetPasswordProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    resetPassword({ newPassword });
    }

    return (
    // renders the "Reset password" form
    );
    }

    // Enhance the component.
    const EnhancedResetPasswordForm = withResetPassword(ResetPasswordForm);

    // Use the enhanced component.
    <EnhancedResetPasswordForm passwordResetToken={passwordResetToken} />

    Type parameters

    • P

    Parameters

    Returns (props: InputPropsType<P, ResetPasswordInputProps>) => Element

  • withSignup<P>(Component: ComponentType<P & SignupProps>): (props: P) => Element
  • React HOC for registering (signing up) a customer. Example usage:

    // Existing react component that renders an "Update customer" form.
    function SignupForm({ signup, loading, result, error }: SignupProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    signup({
    email,
    password,
    firstName,
    middleName,
    lastName,
    title,
    salutation,
    companyName,
    dateOfBirth,
    });
    }

    return (
    // renders the "Signup" form
    );
    }

    // Enhance the component.
    const EnhancedSignupForm = withSignup(SignupForm);

    // Use the enhanced component.
    <EnhancedSignupForm />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • withUpdateCustomer<P>(Component: ComponentType<P & UpdateCustomerProps>): (props: P) => Element
  • React HOC for updating a customer. Example usage:

    // Existing react component that renders an "Update customer" form.
    function UpdateCustomerForm({ updateCustomer, loading, result, error }: UpdateCustomerProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateCustomer({
    email,
    firstName,
    middleName,
    lastName,
    title,
    salutation,
    companyName,
    dateOfBirth,
    });
    }

    return (
    // renders the "Update customer" form
    );
    }

    // Enhance the component.
    const EnhancedUpdateCustomerForm = withUpdateCustomer(UpdateCustomerForm);

    // Use the enhanced component.
    <EnhancedUpdateCustomerForm />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

Address

  • Custom Hook to add an address.

    // An exmple usage with the hook.
    const [addAddress, result, loading, error] = useAddAddress();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    addAddress({
    firstName,
    middleName,
    lastName,
    company,
    country,
    city,
    state,
    postalCode,
    streetAddress,
    additionalStreetInfo,
    billingAddress,
    shippingAddress,
    readOnly: false,
    phone,
    });
    }

    Returns [MutationType<AddAddressParams, AddCurrentCustomerAddress_addCurrentCustomerAddress>, AddCurrentCustomerAddress_addCurrentCustomerAddress | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • addAddress: A function to trigger the addCurrentCustomerAddress mutation from your UI. You can pass AddAddressParams as parameters. The function returns a promise that fulfills with AddAddressResponse.
    • result: The AddAddressResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook for fetching addresses.

    // An exmple usage with the hook.
    const [addressGroup, loading, error] = useAddressGroup();

    Parameters

    Returns [CurrentCustomerAddressGroup_getCurrentCustomerAddressGroup | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • addressGroup: An object containing the AddressGroupResult result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • Custom Hook to remove an address.

    // An exmple usage with the hook.
    const [removeAddress, result, loading, error] = useRemoveAddress();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle button click
    const handleClick = () => {
    removeAddress({ addressId });
    }

    Returns [MutationType<RemoveAddressParams, RemoveCurrentCustomerAddress_removeCurrentCustomerAddress>, RemoveCurrentCustomerAddress_removeCurrentCustomerAddress | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • removeAddress: A function to trigger the removeCurrentCustomerAddress mutation from your UI. You can pass RemoveAddressParams as parameters. The function returns a promise that fulfills with RemoveAddressResponse.
    • result: The RemoveAddressResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to update an address.

    // An exmple usage with the hook.
    const [updateAddress, result, loading, error] = useUpdateAddress({ addressId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateAddress({
    firstName,
    middleName,
    lastName,
    company,
    country,
    city,
    state,
    postalCode,
    streetAddress,
    additionalStreetInfo,
    billingAddress,
    shippingAddress,
    readOnly,
    phone
    });
    }

    Parameters

    Returns [MutationType<UpdateAddressParams, UpdateCurrentCustomerAddress_updateCurrentCustomerAddress>, UpdateCurrentCustomerAddress_updateCurrentCustomerAddress | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • updateAddress: A function to trigger the updateCurrentCustomerAddress mutation from your UI. You can pass UpdateAddressParams as parameters. The function returns a promise that fulfills with UpdateAddressResponse.
    • result: The UpdateAddressResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • withAddAddress<P>(Component: ComponentType<P & AddAddressProps>): (props: P) => Element
  • React HOC for adding address. Example usage:

    // Existing react component that renders an "Add address" form.
    function AddAddressForm({ addAddress, loading, result, error }: AddAddressProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    addAddress({
    firstName,
    middleName,
    lastName,
    company,
    country,
    city,
    state,
    postalCode,
    streetAddress,
    additionalStreetInfo,
    billingAddress,
    shippingAddress,
    readOnly: false,
    phone,
    });
    }

    return (
    // renders the "Add address" form
    );
    }

    // Enhance the component.
    const EnhancedAddAddressForm = withAddAddress(AddAddressForm);

    // Use the enhanced component.
    <EnhancedAddAddressForm />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • withAddressGroup<P>(Component: ComponentType<P & AddressGroupProps>): (props: P) => Element
  • React HOC for fetching addresses. Example usage:

    // Existing react component that renders addresses.
    function AddressGroup({ loading, addressGroup, error }: AddressGroupProps) {
    return (
    // renders addresses
    );
    }

    // Enhance the component.
    const EnhancedAddressGroup = withAddressGroup(AddressGroup);

    // Use the enhanced component.
    <EnhancedAddressGroup />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • withRemoveAddress<P>(Component: ComponentType<P & RemoveAddressProps>): (props: P) => Element
  • React HOC for removing an address. Example usage:

    // Existing react component that renders a "Remove address" button.
    function RemoveAddressButton({ removeAddress, loading, result, error }: RemoveAddressProps) {

    // A sample event handler to handle button click
    const handleClick = () => {
    removeAddress({ addressId });
    }

    return (
    // renders the "Remove address" button
    );
    }

    // Enhance the component.
    const EnhancedRemoveAddressButton = withRemoveAddress(RemoveAddressButton);

    // Use the enhanced component.
    <EnhancedRemoveAddressButton />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • React HOC for setting the default billing address. Example usage:

    // Existing react component that renders a "SetDefaultBillingAddress" form.
    function SetDefaultBillingAddressForm({ setDefaultBillingAddress, loading, result, error }: SetDefaultBillingAddressProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    setDefaultBillingAddress({ addressId });
    }

    return (
    // renders the form to set default billing address
    );
    }

    // Enhance the component.
    const EnhancedSetDefaultBillingAddressForm = withSetDefaultBillingAddress(SetDefaultBillingAddressForm);

    // Use the enhanced component.
    <EnhancedSetDefaultBillingAddressForm />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • React HOC for setting the default shipping address. Example usage:

    // Existing react component that renders a "SetDefaultShippingAddress" form.
    function SetDefaultShippingAddressForm({ setDefaultShippingAddress, loading, result, error }: SetDefaultShippingAddressProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    setDefaultShippingAddress({ addressId });
    }

    return (
    // renders the form to set default shipping address
    );
    }

    // Enhance the component.
    const EnhancedSetDefaultShippingAddressForm = withSetDefaultShippingAddress(SetDefaultShippingAddressForm);

    // Use the enhanced component.
    <EnhancedSetDefaultShippingAddressForm />

    Type parameters

    • P

    Parameters

    Returns (props: P) => Element

      • (props: P): Element
      • Parameters

        • props: P

        Returns Element

  • React HOC for updating an address. Example usage:

    // Existing react component that renders an "Update address" form.
    function UpdateAddressForm({ updateAddress, loading, result, error }: UpdateAddressProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateAddress({
    firstName,
    middleName,
    lastName,
    company,
    country,
    city,
    state,
    postalCode,
    streetAddress,
    additionalStreetInfo,
    billingAddress,
    shippingAddress,
    readOnly,
    phone,
    });
    }

    return (
    // renders the "Update address" form
    );
    }

    // Enhance the component.
    const EnhancedUpdateAddressForm = withUpdateAddress(UpdateAddressForm);

    // Use the enhanced component.
    <EnhancedUpdateAddressForm addressId={addressId} />

    Type parameters

    • P

    Parameters

    Returns (props: InputPropsType<P, UpdateAddressInputProps>) => Element

Cart

  • Custom Hook to add an item to the cart.

    // An exmple usage with the hook.
    const [addToCart, result, loading, error] = useAddToCart({ cartId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle "Add To Cart" button click
    const handleButtonClick = () => {
    addToCart({
    itemId,
    quantity,
    customAttrs,
    });
    }

    Parameters

    Returns [MutationType<AddToCartParams, AddToCart_addToCart>, AddToCart_addToCart | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • addToCart: A function to trigger the addToCart mutation from your UI. You can pass AddToCartParams as parameters. The function returns a promise that fulfills with AddToCartResult.
    • result: The AddToCartResult returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to apply discounts to the cart.

    // An exmple usage with the hook.
    const [applyCartDiscount, result, loading, error] = useApplyCartDiscount({ cartId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    applyCartDiscount({ discountCodes });
    }

    Parameters

    Returns [MutationType<ApplyCartDiscountParams, UpdateCart_updateCart>, UpdateCart_updateCart | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • applyCartDiscount: A function to trigger the updateCart mutation from your UI. You can pass ApplyCartDiscountParams as parameters. The function returns a promise that fulfills with UpdateCartResponse.
    • result: The UpdateCartResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook for fetching a cart.

    // An exmple usage with the hook.
    const [cart, loading, error] = useCart({ cartId });

    Parameters

    Returns [CartFragment | undefined, boolean, ApolloError | undefined, (variables?: Partial<CartVariables | OperationVariables>) => Promise<ApolloQueryResult<Cart>>]

    An array constitutes of the following:

    • cart: An object containing the CartFragment result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
    • refetch : A function that enables to refresh query results in response to a particular user action
  • Custom Hook to start a checkout.

    // An exmple usage with the hook.
    const [checkOut, result, loading, error] = useCheckOut({ cartId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle button click
    const handleButtonClick = () => {
    checkOut();
    }

    Parameters

    Returns [() => Promise<CheckOut_checkOut | undefined>, CheckOut_checkOut | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • checkOut: A function to trigger the checkOut mutation from your UI. The function returns a promise that fulfills with CheckOutResponse.
    • result: The CheckOutResponse returned from your mutation. It contains an OrderDraft you can use in the checkout process. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to crete a cart.

    // An exmple usage with the hook.
    const [createCart, result, loading, error] = createToCart({ storeKey });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle "Create Cart" operation
    const handleCreateCart = () => {
    createCart({
    currency,
    country,
    });
    }

    Parameters

    Returns [MutationType<CreateCartParams, CreateCart_createCart>, CreateCart_createCart | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • createCart: A function to trigger the createCart mutation from your UI. You can pass CreateCartParams as parameters. The function returns a promise that fulfills with [[CreateCart_createToCart | CreateCartResult]].
    • result: The CreateCartResult returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Some commerce providers (e.g. Shopify) prefer to use their own ("federated") payment processing systems and checkout pages. In order to share the customer and cart information with such checkout pages, you can use this custom Hook to start a "federated checkout".

    // An exmple usage with the hook.
    const [checkOut, result, loading, error] = useFederatedCheckOut({ cartId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle button click
    const handleButtonClick = () => {
    checkOut();
    }

    if (result?.success && result.order?.federatedCheckoutUrl) {
    // Redirect the user to the `federatedCheckoutUrl`
    }

    Parameters

    • __namedParameters: FederatedCheckOutInputProps

    Returns [() => Promise<FederatedCheckOut_checkOut | undefined>, FederatedCheckOut_checkOut | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • checkOut: A function to trigger the checkOut mutation from your UI. The function returns a promise that fulfills with FederatedCheckOutResponse.
    • result: The FederatedCheckOutResponse returned from your mutation. It contains an federatedCheckoutUrl you can use to redirect the user to the "federated" (hosted by the commerce provider) checkout page. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to remove a cart.

    // An exmple usage with the hook.
    const [removeCart, result, loading, error] = useRemoveCart({ cartId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    removeCart(cartId);
    }

    Parameters

    Returns [MutationType<RemoveCartVariables, RemoveCart_removeCart>, RemoveCart_removeCart | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • removeCart: A function to trigger the removeCart mutation from your UI. You can pass RemoveCartParams as parameters. The function returns a promise that fulfills with RemoveCartResponse.
    • result: The RemoveCartResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to remove discounts from cart.

    // An exmple usage with the hook.
    const [removeCartDiscount, result, loading, error] = useRemoveCartDiscount({ cartId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle "Remove Discounts" button click
    const handleButtonClick = () => {
    removeCartDiscount({ discountCodes });
    }

    Parameters

    Returns [MutationType<RemoveCartDiscountParams, RemoveFromCart_removeFromCart>, RemoveFromCart_removeFromCart | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • removeCartDiscount: A function to trigger the removeFromCart mutation from your UI. You can pass RemoveCartDiscountParams as parameters. The function returns a promise that fulfills with RemoveFromCartResponse.
    • result: The RemoveFromCartResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to remove an entry from cart.

    // An exmple usage with the hook.
    const [removeFromCart, result, loading, error] = useRemoveFromCart({ cartId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle "Remove From Cart" button click
    const handleButtonClick = () => {
    removeFromCart({ entryId });
    }

    Parameters

    Returns [MutationType<RemoveFromCartParams, RemoveFromCart_removeFromCart>, RemoveFromCart_removeFromCart | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • removeFromCart: A function to trigger the removeFromCart mutation from your UI. You can pass RemoveFromCartParams as parameters. The function returns a promise that fulfills with RemoveFromCartResponse.
    • result: The RemoveFromCartResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to update a cart entry.

    // An exmple usage with the hook.
    const [updateCart, result, loading, error] = useUpdateCartItem({ cartId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateCart({
    entryId,
    quantity,
    customAttrs,
    });
    }

    Parameters

    Returns [MutationType<UpdateCartItemParams, UpdateCart_updateCart>, UpdateCart_updateCart | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • updateCart: A function to trigger the updateCart mutation from your UI. You can pass UpdateCartItemParams as parameters. The function returns a promise that fulfills with UpdateCartResponse.
    • result: The UpdateCartResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • React HOC for adding an item to cart. Example usage:

    // Existing react component that renders an "Add To Cart" button.
    function AddToCartButton({ addToCart, loading, result, error }: AddToCartProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    addToCart({
    itemId,
    quantity,
    customAttrs,
    });
    }

    return (
    // renders the "Add To Cart" button
    );
    }

    // Enhance the component.
    const EnhancedAddToCartButton = withAddToCart(AddToCartButton);

    // Use the enhanced component.
    <EnhancedAddToCartButton cartId={cartId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, AddToCartInputProps>) => Element

  • React HOC for applying discounts to the cart. Example usage:

    // Existing react component that renders an "Apply Discounts" form.
    function ApplyDiscountsForm({ applyCartDiscount, loading, result, error }: ApplyCartDiscountProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    applyCartDiscount({ discountCodes });
    }

    return (
    // renders the "Apply Discounts" form
    );
    }

    // Enhance the component.
    const EnhancedApplyDiscountsForm = withApplyCartDiscount(ApplyDiscountsForm);

    // Use the enhanced component.
    <EnhancedApplyDiscountsForm cartId={cartId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, ApplyCartDiscountInputProps>) => Element

  • withCart<P>(Component: ComponentType<P & CartProps>): (__namedParameters: InputPropsType<P, CartInputProps>) => Element
  • React HOC for fetching a cart. Example usage:

    // Existing react component that renders a cart.
    function Cart({ loading, cart, error, refetch }: CartProps) {
    return (
    // renders a cart
    );
    }

    // Enhance the component.
    const EnhancedCart = withCart(Cart);

    // Use the enhanced component.
    <EnhancedCart cartId={cartId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, CartInputProps>) => Element

      • Parameters

        Returns Element

  • React HOC for starting a checkout. Example usage:

    // Existing react component that renders a "Check Out" button.
    function CheckOutButton({ checkOut, loading, result, error }: CheckOutProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    checkOut();
    }

    return (
    // renders the "Check Out" button
    );
    }

    // Enhance the component.
    const EnhancedCheckOutButton = withCheckOut(CheckOutButton);

    // Use the enhanced component.
    <EnhancedCheckOutButton cartId={cartId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, CheckOutInputProps>) => Element

  • React HOC for creating cart. Example usage:

    export function CreateCartButton({ currency, country }: CreateCartButtonProps) {
    const [createCart, result, loading, error] = useCreateCart({});

    const handleOnClick = async () => {
    const res = await createCart({ currency, country });
    if (res?.success) {
    setCartIdInSession(res?.cart?.id)
    }
    };

    return (
    // renders the "CreateCart" button
    );
    }

    // Enhance the component.
    const EnhancedCreateCartButton = withCreateCart(CreateCartButton);

    // Use the enhanced component.
    <EnhancedCreatCartButton />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, CreateCartInputProps>) => Element

  • withFederatedCheckOut<P>(Component: ComponentType<P & FederatedCheckOutProps>): (__namedParameters: InputPropsType<P, FederatedCheckOutInputProps>) => Element
  • Some commerce providers (e.g. Shopify) prefer to use their own ("federated") payment processing systems and checkout pages. In order to share the customer and cart information with such checkout pages, you can use this React HOC to start a "federated checkout". Example usage:

    // Existing react component that renders a "Check Out" button.
    function CheckOutButton({ checkOut, loading, result, error }: FederatedCheckOutProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    checkOut();
    }

    if (result?.success && result.order?.federatedCheckoutUrl) {
    // Redirect the user to the `federatedCheckoutUrl`
    }

    return (
    // renders the "Check Out" button
    );
    }

    // Enhance the component.
    const EnhancedCheckOutButton = withCheckOut(CheckOutButton);

    // Use the enhanced component.
    <EnhancedCheckOutButton cartId={cartId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, FederatedCheckOutInputProps>) => Element

      • (__namedParameters: InputPropsType<P, FederatedCheckOutInputProps>): Element
      • Parameters

        • __namedParameters: InputPropsType<P, FederatedCheckOutInputProps>

        Returns Element

  • React HOC for deleting a cart. Example usage:

    // Existing react component that renders an "Remove Cart" form.
    export function RemoveCartButton({ cartId }: RemoveCartButtonProps) {
    const [removeCart, result, loading, error] = useRemoveCart({ cartId });

    const handleOnClick = async () => {
    const res = await removeCart({ cartId });
    if (res?.success) {
    setCartIdInSession(undefined)
    }
    };
    return (
    // refresh the cart page
    );
    }

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, RemoveCartInputProps>) => Element

  • React HOC for removing discounts from cart. Example usage:

    // Existing react component that renders an "Remove Cart Discounts" button.
    function RemoveCartDiscountsButton({ removeCartDiscount, loading, result, error }: RemoveCartDiscountProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    removeCartDiscount({ discountCodes });
    }

    return (
    // renders the "Remove Cart Discounts" button
    );
    }

    // Enhance the component.
    const EnhancedRRemoveCartDiscountsButton = withRemoveCartDiscount(RemoveCartDiscountsButton);

    // Use the enhanced component.
    <EnhancedRemoveCartDiscountsButton cartId={cartId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, RemoveCartDiscountInputProps>) => Element

  • React HOC for removing an entry from cart. Example usage:

    // Existing react component that renders an "Remove From Cart" button.
    function RemoveFromCartButton({ removeFromCart, loading, result, error }: RemoveFromCartProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    removeFromCart({ entryId });
    }

    return (
    // renders the "Remove From Cart" button
    );
    }

    // Enhance the component.
    const EnhancedRemoveFromCartButton = withRemoveFromCart(RemoveFromCartButton);

    // Use the enhanced component.
    <EnhancedRemoveFromCartButton cartId={cartId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, RemoveFromCartInputProps>) => Element

  • React HOC for updating a cart entry. Example usage:

    // Existing react component that renders an "Update Cart" form.
    function UpdateCartForm({ updateCart, loading, result, error }: UpdateCartItemProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateCart({
    entryId,
    quantity,
    customAttrs,
    });
    }

    return (
    // renders the "Update Cart" form
    );
    }

    // Enhance the component.
    const EnhancedUpdateCartForm = withUpdateCartItem(UpdateCartForm);

    // Use the enhanced component.
    <EnhancedUpdateCartForm cartId={cartId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, UpdateCartItemInputProps>) => Element

Category

  • Custom Hook for fetching categories.

    // An exmple usage with the hook.
    const [categories, loading, error] = useCategories({
    smViewId,
    connector,
    brUid2,
    });

    Parameters

    Returns [(CategoryFragment | null)[] | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • categories: An array containing the CategoryFragment. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • Custom Hook for fetching a category.

    // An exmple usage with the hook.
    const [category, loading, error] = useCategory({
    categoryId,
    smViewId,
    connector,
    brUid2: cookies._br_uid_2,
    });

    Parameters

    Returns [CategoryFragment | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • category: An object containing the category result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • React HOC for fetching categories. Example usage:

    // Existing react component that renders categories.
    function Categories({ loading, categories, error }: CategoriesProps) {
    return (
    // renders categories
    );
    }

    // Enhance the component.
    const EnhancedCategories = withCategories(Categories);

    // Use the enhanced component.
    <EnhancedCategories
    smViewId={smViewId}
    brUid2={cookies._br_uid_2}
    connector={connector}
    />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, CategoriesInputProps>) => Element

  • React HOC for fetching a category. Example usage:

    // Existing react component that renders a category.
    function Category({ category, loading, error }: CategoryProps) {
    return (
    // renders a category
    );
    }

    // Enhance the component.
    const EnhancedCategory = withCategory(Category);

    // Use the enhanced component.
    <EnhancedCategory
    categoryId={categoryId}
    connector={connector}
    smViewId={smViewId}
    brUid2={cookies._br_uid_2}
    />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, CategoryInputProps>) => Element

CommerceConnectorContext

CommerceConnectorConsumer: Consumer<CommerceConnectorContextProps> = CommerceConnectorContext.Consumer

The Consumer component from the React Context API to access the configured commerce properties CommerceConnectorContextProps.

Example:

<CommerceConnectorConsumer>
{{ connector, currentToken, graphqlServiceUrl } => (
// do stuff here with the properties
)}
</CommerceConnectorConsumer>
CommerceConnectorContext: Context<CommerceConnectorContextProps> = ...

A React Context object that provides access to configured commerce properties defined in CommerceConnectorContextProps throughout a React component tree.

Example:

const { connector, graphqlServiceUrl, currentToken } = useContext(CommerceConnectorContext);
sessionStorage.setItem('token', currentToken); // store current token in session storage
  • The CommerceConnectorProvider component leverages React's Context API to initialize the Apollo client used for communicating with the Commerce GraphQL Serivce. It also places configured commerce properties CommerceConnectorContextProps on the context, which enables you to access it from anywhere in your component tree. available throughout a React component tree.

    We suggest putting the CommerceConnectorProvider somewhere high in your app, above any component that might need to access the Commerce GraphQL Serivce. For example, it could be outside of your root route component if you're using React Router.

    Example:

    function App() {
    const connector = process.env.NEXT_PUBLIC_DEFAULT_CONNECTOR;
    const graphqlServiceUrl = process.env.NEXT_PUBLIC_DEFAULT_GRAPHQL_SERVICE_URL;
    const existingToken = sessionStorage.getItem('token'); // retrieve existing token from session storage
    return (
    <CommerceConnectorProvider
    connector={connector}
    graphqlServiceUrl={graphqlServiceUrl}
    existingToken={existingToken}
    >
    <div>
    <h2>My First Commerce App 🚀</h2>
    </div>
    </CommerceConnectorProvider>,
    );
    }

    Parameters

    Returns Element

Order

  • Custom Hook to fetch an order.

    // An exmple usage with the hook.
    const [order, loading, error] = useOrder({ orderId });

    Parameters

    Returns [OrderFragment | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • order: An object containing the OrderFragment result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • Custom Hook to fetch orders for current customer.

    // An exmple usage with the hook.
    const [onLoadMore, ordersPageResult, loading, error] = useOrders({ pageSize, sortFields });

    // To fetch the next page
    const handleLoadMore = () => {
    onLoadMore();
    }

    Parameters

    Returns [() => Promise<void>, Orders_findOrders | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • onLoadMore: A function that enables pagination for your query.
    • ordersPageResult: An object containing the [['Orders_findOrders | OrdersResponse']] result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • Custom Hook to place an order following checkout and setOrderDetails. This concludes a check out process.

    // An exmple usage with the hook.
    const [placeOrder, result, loading, error] = usePlaceOrder({ orderId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle button click
    const handleButtonClick = () => {
    placeOrder();
    }

    Parameters

    Returns [() => Promise<PlaceOrder_placeOrder | undefined>, PlaceOrder_placeOrder | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • placeOrder: A function to trigger the placeOrder mutation from your UI. The function returns a promise that fulfills with PlaceOrderResponse.
    • result: The PlaceOrderResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to replace the customer's existing cart (or create a new cart if there isn't one) with items from one of their existing orders ("re-order").

    // An exmple usage with the hook.
    const [reOrder, result, loading, error] = useReOrder({ orderId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle button click
    const handleButtonClick = () => {
    reOrder();
    }

    Parameters

    Returns [() => Promise<UpdateCartByOrder_updateCartByOrder | undefined>, UpdateCartByOrder_updateCartByOrder | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • reOrder: A function to trigger the updateCartByOrder mutation from your UI. The function returns a promise that fulfills with ReOrderResponse.
    • cart: The ReOrderResponse returned from your mutation. It represents the cart being replaced/created. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to set details of an order following checkout. Note: Depending on the commerce provider you use, all fields may not be supported.

    // An exmple usage with the hook.
    const [setOrderDetails, result, loading, error] = useSetOrderDetails({ orderId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    setOrderDetails({
    shippingAddressId,
    billingAddressId,
    shipmentMethodId,
    accountIssuer,
    accountNumber,
    accountHolderName,
    additionalCode,
    expirationMonth,
    expirationYear,
    email,
    });
    }

    Parameters

    Returns [MutationType<SetOrderDetailsParams, SetOrderDetails_setOrderDetails>, SetOrderDetails_setOrderDetails | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • setOrderDetails: A function to trigger the setOrderDetails mutation from your UI. You can pass SetOrderDetailsParams as parameters. The function returns a promise that fulfills with SetOrderDetailsResponse.
    • result: The SetOrderDetailsResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to fetch shipment methods for an order draft. You can then use the result to set shipmentMethodId in useSetOrderDetails. Note: Depending on the commerce provider you use, this may not be supported.

    // An exmple usage with the hook.
    const [shipmentMethods, loading, error] = useShipmentMethods({ orderId });

    Parameters

    Returns [(OrderShipmentMethods_getOrderShipmentMethods | null)[] | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • shipmentMethods: An array containing the OrderShipmentMethod results. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • React HOC for fetching an order. Example usage:

    // Existing react component that renders an order detail.
    function OrderDetail({ loading, order, error }: OrderProps) {
    return (
    // renders order details
    );
    }

    // Enhance the component.
    const EnhancedOrderDetail = withOrder(Order);

    // Use the enhanced component.
    <EnhancedOrderDetail orderId={orderId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, OrderInputProps>) => Element

  • React HOC for fetching orders for current customer. Example usage:

    // Existing react component that renders an order list.
    function OrderList({ onLoadMore, loading, ordersPageResult, error }: OrdersProps) {
    // To fetch the next page
    const handleLoadMore = () => {
    onLoadMore();
    }

    return (
    // renders order list
    );
    }

    // Enhance the component.
    const EnhancedOrderList = withOrders(OrderList);

    // Use the enhanced component.
    <EnhancedOrderList pageSize={pageSize} sortFields={sortFields} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, OrdersInputProps>) => Element

  • React HOC to place an order following checkout and setOrderDetails. This concludes a check out process. Example usage:

    // Existing react component that renders a "Place Order" button.
    function PlaceOrderButton({ placeOrder, loading, result, error }: PlaceOrderProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    placeOrder();
    }

    return (
    // renders the "Place Order" button
    );
    }

    // Enhance the component.
    const EnhancedPlaceOrderButton = withPlaceOrder(PlaceOrderButton);

    // Use the enhanced component.
    <EnhancedPlaceOrderButton orderId={orderId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, PlaceOrderInputProps>) => Element

  • React HOC to replace the customer's existing cart (or create a new cart if there isn't one) with items from one of their existing orders ("re-order"). Example usage:

    // Existing react component that renders a "Re Order" button.
    function ReOrderButton({ reOrder, loading, result, error }: ReOrderProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    reOrder();
    }

    return (
    // renders the "Re Order" button
    );
    }

    // Enhance the component.
    const EnhancedReOrderButton = withReOrder(ReOrderButton);

    // Use the enhanced component.
    <EnhancedReOrderButton orderId={orderId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, ReOrderInputProps>) => Element

  • React HOC to set details of an order following checkout. Note: Depending on the commerce provider you use, all fields may not be supported. Example usage:

    // Existing react component that renders a "Check Out" form.
    function CheckOutForm({ setOrderDetails, loading, result, error }: SetOrderDetailsProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    setOrderDetails({
    shippingAddressId,
    billingAddressId,
    shipmentMethodId,
    accountIssuer,
    accountNumber,
    accountHolderName,
    additionalCode,
    expirationMonth,
    expirationYear,
    email,
    });
    }

    return (
    // renders the "Check Out" form
    );
    }

    // Enhance the component.
    const EnhancedCheckOutForm = withSetOrderDetails(CheckOutForm);

    // Use the enhanced component.
    <EnhancedCheckOutForm orderId={orderId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, SetOrderDetailsInputProps>) => Element

  • React HOC to fetch shipment methods for an order draft. You can then use the result to set shipmentMethodId in withSetOrderDetails. Note: Depending on the commerce provider you use, this may not be supported. Example usage:

    // Existing react component that renders a shipment methods selection.
    function ShipmentMethods({ loading, shipmentMethods, error }: GetShipmentMethodsProps) {
    return (
    // renders shipment methods selection
    );
    }

    // Enhance the component.
    const EnhancedShipmentMethods = withShipmentMethods(ShipmentMethods);

    // Use the enhanced component.
    <EnhancedShipmentMethods orderId={orderId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, GetShipmentMethodsInputProps>) => Element

Product

  • Custom Hook for product detail.

    // An exmple usage with the hook.
    const [item, loading, error] = useProductDetail({
    itemId,
    smViewId,
    brUid2,
    connector,
    customAttrFields,
    customVariantAttrFields,
    });

    Parameters

    Returns [ItemFragment | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • item: An object containing the ItemFragment result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • Custom Hook for product category grids.

    // An exmple usage with the hook.
    const [onLoadMore, itemsPageResult, loading, error] = useProductGridCategory({
    categoryId,
    facetFieldFilters,
    pageSize,
    offset,
    sortFields,
    customAttrFields,
    customVariantAttrFields,
    smViewId,
    connector,
    brUid2: cookies._br_uid_2,
    });

    // To fetch the next page
    const handleLoadMore = () => {
    onLoadMore();
    }

    Parameters

    Returns [(offset?: number) => Promise<void>, ItemsByCategory_findItemsByCategory | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • onLoadMore: A function that enables pagination for your query. You can pass in an offset for the starting point of a page, or leave it undefined for an infinite-scroll style pagination.
    • itemsPageResult: An object containing the search result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • Custom Hook for product search grids.

    // An exmple usage with the hook.
    const [onLoadMore, itemsPageResult, loading, error] = useProductGridSearch({
    connector,
    customAttrFields,
    customVariantAttrFields,
    facetFieldFilters,
    pageSize,
    offset,
    sortFields,
    smViewId,
    searchText: query,
    brUid2: cookies._br_uid_2,
    });

    // To fetch the next page
    const handleLoadMore = () => {
    onLoadMore();
    }

    Parameters

    Returns [(offset?: number) => Promise<void>, Items_findItemsByKeyword | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • onLoadMore: A function that enables pagination for your query. You can pass in an offset for the starting point of a page, or leave it undefined for an infinite-scroll style pagination.
    • itemsPageResult: An object containing the search result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • Custom Hook for product search grids, using the Pathways and Recommendations API v2.

    // An exmple usage with the hook.
    const [onLoadMore, itemsPageResult, loading, error] = useProductGridWidget({
    widgetType,
    widgetId,
    productIds,
    categoryId,
    customAttrFields,
    customVariantAttrFields,
    facetFieldFilters,
    pageSize,
    offset,
    sortFields,
    smViewId,
    searchText: query,
    brUid2: cookies._br_uid_2,
    });

    // To fetch the next page
    const handleLoadMore = () => {
    onLoadMore();
    }

    Parameters

    Returns [(offset?: number) => Promise<void>, ItemsByWidget_findItemsByWidget | undefined, boolean, Error | undefined]

    An array constitutes of the following:

    • onLoadMore: A function that enables pagination for your query. You can pass in an offset for the starting point of a page, or leave it undefined for an infinite-scroll style pagination.
    • itemsPageResult: An object containing the search result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • Custom Hook for product suggestion search.

    // An exmple usage with the hook.
    const [result, loading, error] = useProductSearchSuggestion({
    text,
    connector,
    });

    Parameters

    Returns [Suggestions_findSuggestions | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • result: An object containing the search result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • React HOC for product detail. Example usage:

    // Existing react component that renders a product detail.
    function ProductDetail({ loading, item, error }: ProductDetailProps) {
    return (
    // renders the product detail
    );
    }

    // Enhance the component.
    const EnhancedProductDetail = withProductDetail(ProductDetail);

    // Use the enhanced component.
    <EnhancedProductDetail
    itemId={itemId}
    smViewId={smViewId}
    brUid2={cookies._br_uid_2}
    connector={connector}
    customAttrFields={customAttrFields}
    customVariantAttrFields={customVariantAttrFields}
    />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, ProductDetailInputProps>) => Element

  • React HOC for product category grids. Example usage:

    // Existing react component that renders a product grid.
    function ProductGridCategory({ itemsPageResult, loading, onLoadMore, error }: ProductGridCategoryProps) {
    // To fetch the next page
    const handleLoadMore = () => {
    onLoadMore();
    }

    return (
    // renders a product grid
    );
    }

    // Enhance the component.
    const EnhancedProductGridCategory = withProductGridCategory(ProductGridCategory);

    // Use the enhanced component.
    <EnhancedProductGridCategory
    categoryId={categoryId}
    connector={connector}
    facetFieldFilters={facetFieldFilters}
    pageSize={pageSize}
    offset={offset}
    sortFields={sortFields}
    customAttrFields={customAttrFields}
    customVariantAttrFields={customVariantAttrFields}
    smViewId={smViewId}
    searchText={query}
    brUid2={cookies._br_uid_2}
    />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, ProductGridCategoryInputProps>) => Element

  • React HOC for product search grids. Example usage:

    // Existing react component that renders a product grid.
    function ProductGridSearch({ itemsPageResult, loading, onLoadMore, error }: ProductGridSearchProps) {
    // To fetch the next page
    const handleLoadMore = () => {
    onLoadMore();
    }

    return (
    // renders a product grid
    );
    }

    // Enhance the component.
    const EnhancedProductGridSearch = withProductGridSearch(ProductGridSearch);

    // Use the enhanced component.
    <EnhancedProductGridSearch
    connector={connector}
    customAttrFields={customAttrFields}
    customVariantAttrFields={customVariantAttrFields}
    facetFieldFilters={facetFieldFilters}
    pageSize={pageSize}
    offset={offset}
    sortFields={sortFields}
    smViewId={smViewId}
    searchText={query}
    brUid2={cookies._br_uid_2}
    />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, ProductGridSearchInputProps>) => Element

  • React HOC for product search grids, using the Pathways and Recommendations API v2. Example usage:

    // Existing react component that renders a product grid, using the Pathways and Recommendations API v2.
    function ProductGridWidget({ itemsPageResult, loading, onLoadMore, error }: ProductGridWidgetProps) {
    // To fetch the next page
    const handleLoadMore = () => {
    onLoadMore();
    }

    return (
    // renders a product grid
    );
    }

    // Enhance the component.
    const EnhancedProductGridWidget = withProductGridWidget(ProductGridWidget);

    // Use the enhanced component.
    <EnhancedProductGridWidget
    widgetType={widgetType}
    widgetId={widgetId}
    customAttrFields={customAttrFields}
    customVariantAttrFields={customVariantAttrFields}
    facetFieldFilters={facetFieldFilters}
    pageSize={pageSize}
    sortFields={sortFields}
    smViewId={smViewId}
    searchText={query}
    productIds={productIds}
    categoryId={categoryId}
    brUid2={cookies._br_uid_2}
    />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, ProductGridWidgetInputProps>) => Element

  • React HOC for product suggestion search. Example usage:

    // Existing react component that renders the product suggestion result.
    function ProductSearchSuggestion({ result, loading, error }: ProductSearchSuggestionProps) {
    return (
    // renders the product suggestion result
    );
    }

    // Enhance the component.
    const EnhancedProductSearchSuggestion = withProductSearchSuggestion(ProductSearchSuggestion);

    // Use the enhanced component.
    <EnhancedProductSearchSuggestion
    text={text}
    connector={connector}
    />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, ProductSearchSuggestionInputProps>) => Element

Wishlist

  • Custom Hook to add an item to the wishlist.

    // An exmple usage with the hook.
    const [addEntryToWishlist, result, loading, error] = useEntryAddToWishlist();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle "Add To Wishlist" button click
    const handleButtonClick = () => {
    addEntryToWishlist({
    wishlistId,
    itemId,
    quantity,
    customAttrs,
    });
    }

    Returns [MutationType<AddEntryToWishlistParams, AddEntryToWishlist_addEntryToWishlist>, AddEntryToWishlist_addEntryToWishlist | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • addEntryToWishlist: A function to trigger the addEntryToWishlist mutation from your UI. You can pass AddEntryToWishlistParams as parameters. The function returns a promise that fulfills with AddEntryToWishlistResult.
    • result: The AddEntryToWishlistResult returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to remove a wishlist.

    // An exmple usage with the hook.
    const [removeWishlist, result, loading, error] = useRemoveWishlist({ wishlistId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle "Remove From Wishlist" button click
    const handleButtonClick = () => {
    removeWishlist({ wishlistId });
    }

    Returns [MutationType<RemoveWishlistParams, RemoveWishlist_removeWishlist>, RemoveWishlist_removeWishlist | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • removeWishlist: A function to trigger the removeWishlist mutation from your UI. You can pass RemoveWishlistParams as parameters. The function returns a promise that fulfills with RemoveWishlistResponse.
    • result: The RemoveWishlistResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to update a wishlist.

    // An exmple usage with the hook.
    const [updateWishlist, result, loading, error] = useUpdateWishlist();
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateWishlist({
    wishlistId,
    name,
    });
    }

    Returns [MutationType<UpdateWishlistParams, UpdateWishlist_updateWishlist>, UpdateWishlist_updateWishlist | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • updateWishlist: A function to trigger the updateWishlist mutation from your UI. You can pass UpdateWishlistParams as parameters. The function returns a promise that fulfills with UpdateWishlistResponse.
    • result: The UpdateWishlistResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook to update a wishlist entry.

    // An exmple usage with the hook.
    const [updateWishlistEntry, result, loading, error] = useUpdateWishlistEntry({ wishlistId });
    // ...
    // Additional code
    // ...
    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateWishlistEntry({
    entryId,
    quantity,
    customAttrs,
    });
    }

    Parameters

    Returns [MutationType<UpdateWishlistEntryParams, UpdateWishlistEntry_updateWishlistEntry>, UpdateWishlistEntry_updateWishlistEntry | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • updateWishlistEntry: A function to trigger the updateWishlistEntry mutation from your UI. You can pass UpdateWishlistEntryParams as parameters. The function returns a promise that fulfills with UpdateWishlistEntryResponse.
    • result: The UpdateWishlistEntryResponse returned from your mutation. Defaults to undefined.
    • loading: A boolean that indicates whether your mutation is in flight.
    • error: Any errors returned from the mutation.
  • Custom Hook for fetching a wishlist.

    // An exmple usage with the hook.
    const [wishlist, loading, error] = useWishlist({ wishlistId });

    Parameters

    Returns [WishlistFragment | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • wishlist: An object containing the WishlistFragment result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • Custom Hook to fetch wishlists for current customer.

    // An exmple usage with the hook.
    const [onLoadMore, wishlistsResult, loading, error] = useWishlists();

    Parameters

    Returns [() => Promise<void>, Wishlists_findWishlists | undefined, boolean, ApolloError | undefined]

    An array constitutes of the following:

    • wishlistsResult: An object containing the [['Wishlists_findWishlists | WishlistsResponse']] result. Defaults to undefined.
    • loading: A boolean that indicates whether the request is in flight.
    • error: A runtime error with graphQLErrors and networkError properties.
  • React HOC for adding an item to wishlist. Example usage:

    // Existing react component that renders an "Add To Wishlist" button.
    function AddEntryToWishlistButton({ addEntryToWishlist, loading, result, error }: AddEntryToWishlistProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    addEntryToWishlist({
    wishlistId,
    itemId,
    quantity,
    customAttrs,
    });
    }

    return (
    // renders the "Add To Wishlist" button
    );
    }

    // Enhance the component.
    const EnhancedAddEntryToWishlistButton = withAddEntryToWishlist(AddEntryToWishlistButton);

    // Use the enhanced component.
    <EnhancedAddEntryToWishlistButton />

    Type parameters

    • P

    Parameters

    Returns () => Element

      • (): Element
      • Returns Element

  • React HOC for removing an entry from wishlist. Example usage:

    // Existing react component that renders an "Remove From Wishlist" button.
    function RemoveEntryFromWishlistButton({
    removeEntryFromWishlist,
    loading,
    result,
    error,
    }: RemoveEntryFromWishlistProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    removeEntryFromWishlist({ entryId });
    }

    return (
    // renders the "Remove From Wishlist" button
    );
    }

    // Enhance the component.
    const EnhancedRemoveEntryFromWishlistButton = withRemoveEntryFromWishlist(RemoveEntryFromWishlistButton);

    // Use the enhanced component.
    <EnhancedRemoveEntryFromWishlistButton wishlistId={wishlistId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, RemoveEntryFromWishlistInputProps>) => Element

  • withRemoveWishlist<P>(Component: ComponentType<P>): () => Element
  • React HOC for removing a wishlist. Example usage:

    // Existing react component that renders an "Remove Wishlist" button.
    function RemoveWishlistButton({
    removeWishlist,
    loading,
    result,
    error,
    }: RemoveWishlistProps) {

    // A sample event handler to handle button click
    const handleButtonClick = () => {
    removeWishlist({ wishlistId });
    }

    return (
    // renders the "Remove Wishlist" button
    );
    }

    // Enhance the component.
    const EnhancedRemoveWishlistButton = withRemoveWishlist(RemoveWishlistButton);

    // Use the enhanced component.
    <EnhancedRemoveWishlistButton wishlistId={wishlistId} />

    Type parameters

    • P

    Parameters

    • Component: ComponentType<P>

    Returns () => Element

      • (): Element
      • Returns Element

  • React HOC for updating a wishlist. Example usage:

    // Existing react component that renders an "Update Wishlist" form.
    function UpdateWishlistForm({ updateWishlist, loading, result, error }: UpdateWishlistProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateWishlist({
    wishlistId,
    name,
    });
    }

    return (
    // renders the "Update Wishlist" form
    );
    }

    // Enhance the component.
    const EnhancedUpdateWishlistForm = withUpdateWishlist(UpdateWishlistForm);

    // Use the enhanced component.
    <EnhancedUpdateWishlistForm />

    Type parameters

    • P

    Parameters

    Returns () => Element

      • (): Element
      • Returns Element

  • React HOC for updating a wishlist entry. Example usage:

    // Existing react component that renders an "Update Wishlist Entry" form.
    function UpdateWishlistEntryForm({ updateWishlistEntry, loading, result, error }: UpdateWishlistEntryProps) {

    // A sample event handler to handle form submission
    const handleFormSubmit = () => {
    updateWishlistEntry({
    entryId,
    quantity,
    customAttrs,
    });
    }

    return (
    // renders the "Update Wishlist Entry" form
    );
    }

    // Enhance the component.
    const EnhancedUpdateWishlistEntryForm = withUpdateWishlistEntry(UpdateWishlistEntryForm);

    // Use the enhanced component.
    <EnhancedUpdateWishlistEntryForm wishlistId={wishlistId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, UpdateWishlistEntryInputProps>) => Element

  • React HOC for fetching a wishlist. Example usage:

    // Existing react component that renders a wishlist.
    function Wishlist({ loading, wishlist, error }: WishlistProps) {
    return (
    // renders a wishlist
    );
    }

    // Enhance the component.
    const EnhancedWishlist = useWishlist(Wishlist);

    // Use the enhanced component.
    <EnhancedWishlist wishlistId={wishlistId} />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, WishlistInputProps>) => Element

  • React HOC for fetching wishlists for current customer. Example usage:

    // Existing react component that renders an order list.
    function Wishlists({ loading, wishlistsResult, error }: WishlistsProps) {
    return (
    // renders wishlists
    );
    }

    // Enhance the component.
    const EnhancedWishlists = withWishlists(Wishlists);

    // Use the enhanced component.
    <EnhancedWishlists />

    Type parameters

    • P

    Parameters

    Returns (__namedParameters: InputPropsType<P, WishlistsInputProps>) => Element

Generated GraphQL Types

APOLLO_STATE_PROP_NAME: "__APOLLO_STATE__" = '__APOLLO_STATE__'
DEFAULT_REQUEST_HEADERS: { Accept-Language: string } = ...

Type declaration

  • Accept-Language: string
auth: AuthService = ...
  • extractErrorMessage(error: GraphQLError | AxiosError<any>): string
  • Parameters

    • error: GraphQLError | AxiosError<any>

    Returns string

  • useQueryCustom<TData, TVariables>(query: DocumentNode | TypedDocumentNode<TData, TVariables>, options?: QueryHookOptions<TData, TVariables>, customQueryOptionsProcessor?: CustomQueryOptionsProcessor<TData, TVariables>): QueryResult<TData, TVariables>
  • Type parameters

    • TData = any

    • TVariables = OperationVariables

    Parameters

    • query: DocumentNode | TypedDocumentNode<TData, TVariables>
    • Optional options: QueryHookOptions<TData, TVariables>
    • Optional customQueryOptionsProcessor: CustomQueryOptionsProcessor<TData, TVariables>

    Returns QueryResult<TData, TVariables>

Generated using TypeDoc