Options
All
  • Public
  • Public/Protected
  • All
Menu

@bloomreach/connector-components-react

Index

Account

Address

Cart

Category

CommerceConnectorContext

Order

Product

Generated GraphQL Types

Account

useChangePassword

  • 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.

useCurrentCustomer

  • Custom Hook for fetching current customer.

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

    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.

useFederatedLogin

  • 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.

useForgotPassword

  • 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.

useLogin

  • 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

  • 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.

useResetPassword

  • 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.

useSignup

  • 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.

useUpdateCustomer

  • 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

  • withChangePassword<P>(Component: React.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

withCurrentCustomer

  • withCurrentCustomer<P>(Component: React.ComponentType<P & CurrentCustomerProps>): (props: P) => 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

  • withFederatedLogin<P>(Component: React.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

  • withForgotPassword<P>(Component: React.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

  • withLogin<P>(Component: React.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

  • withLogout<P>(Component: React.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

withResetPassword

  • 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

  • withSignup<P>(Component: React.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

  • withUpdateCustomer<P>(Component: React.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

useAddAddress

  • 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,
      });
    }
    
    

    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.

useAddressGroup

  • Custom Hook for fetching addresses.

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

    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.

useRemoveAddress

  • 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.

useSetDefaultBillingAddress

useSetDefaultShippingAddress

useUpdateAddress

  • 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,
      });
    }
    
    

    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

  • withAddAddress<P>(Component: React.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,
        });
      }
    
      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

  • withAddressGroup<P>(Component: React.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

  • withRemoveAddress<P>(Component: React.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

withSetDefaultBillingAddress

  • 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

withSetDefaultShippingAddress

  • 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

withUpdateAddress

  • 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,
        });
      }
    
      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

useAddToCart

  • 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.

useApplyCartDiscount

  • 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.

useCart

  • 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]

    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.

useCheckOut

  • 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.

useFederatedCheckOut

  • 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.

useRemoveCartDiscount

  • 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.

useRemoveFromCart

  • 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.

useUpdateCartItem

  • 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.

withAddToCart

  • 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

withApplyCartDiscount

  • 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

  • withCart<P>(Component: React.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 }: CartProps) {
      return (
        // renders a cart
      );
    }
    
    // Enhance the component.
    const EnhancedCart = withCart(Cart);
    
    // Use the enhanced component.
    <EnhancedCart cartId={cartId} />
    

    Type parameters

    • P

    Parameters

    • Component: React.ComponentType<P & CartProps>

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

      • Parameters

        Returns Element

withCheckOut

  • 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

withFederatedCheckOut

  • withFederatedCheckOut<P>(Component: React.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

withRemoveCartDiscount

  • 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

withRemoveFromCart

  • 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

withUpdateCartItem

  • 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

useCategories

  • 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.

useCategory

  • 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.

withCategories

  • 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

withCategory

  • 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

Const CommerceConnectorConsumer

CommerceConnectorConsumer: Consumer<CommerceConnectorContextProps> = ...

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>

Const CommerceConnectorContext

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

CommerceConnectorProvider

  • 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.REACT_APP_DEFAULT_CONNECTOR;
      const graphqlServiceUrl = process.env.REACT_APP_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

useOrder

  • 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.

useOrders

  • 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.

usePlaceOrder

  • 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.

useReOrder

  • 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.

useSetOrderDetails

  • 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,
      });
    }
    
    

    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.

useShipmentMethods

  • 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.

withOrder

  • withOrder<P>(Component: React.ComponentType<P & OrderProps>): (__namedParameters: InputPropsType<P, OrderInputProps>) => Element
  • 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

withOrders

  • 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

withPlaceOrder

  • 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

withReOrder

  • 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

withSetOrderDetails

  • 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,
        });
      }
    
      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

withShipmentMethods

  • 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

useProductDetail

  • 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.

useProductGridCategory

  • 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.

useProductGridSearch

  • 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.

useProductGridWidget

  • 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.

useProductSearchSuggestion

  • 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.

withProductDetail

  • 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

withProductGridCategory

  • 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

withProductGridSearch

  • 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

withProductGridWidget

  • 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

withProductSearchSuggestion

  • 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

Generated GraphQL Types

AddToCart_addToCart_cart_entries_items

CartFragment_entries_items

Cart_getCart_entries_items

OrderFragment_orderItems_item

Order_getOrderById_orderItems_item

Orders_findOrders_orders_orderItems_item

PlaceOrder_placeOrder_order_orderItems_item

RemoveFromCart_removeFromCart_cart_entries_items

UpdateCartByOrder_updateCartByOrder_cart_entries_items

UpdateCart_updateCart_cart_entries_items

Generated using TypeDoc