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();
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:
// 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 });
}, []);
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 });
}
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,
});
}
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.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
}
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 });
}
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,
});
}
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,
});
}
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.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 />
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 />
A "federated login" usually constitutes three steps:
// 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 />
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 />
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 />
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 />
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} />
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 />
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 />
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,
});
}
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();
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 });
}
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 set the default billing address.
// An exmple usage with the hook.
const [setDefaultBillingAddress, result, loading, error] = useSetDefaultBillingAddress();
// ...
// Additional code
// ...
// A sample event handler to handle button click
const handleClick = () => {
setDefaultBillingAddress({ addressId });
}
An array constitutes of the following:
setDefaultBillingAddress:
A function to trigger the setCurrentCustomerDefaultBillingAddress
mutation from your UI. You can pass SetDefaultBillingAddressParams as parameters.
The function returns a promise that fulfills with
SetDefaultBillingAddressResponse.result:
The
SetDefaultBillingAddressResponse
returned from your mutation. Defaults to undefinedloading: A boolean that indicates whether your mutation is in flight.error: Any errors returned from the mutation.Custom Hook to set the default shipping address.
// An exmple usage with the hook.
const [setDefaultShippingAddress, result, loading, error] = useSetDefaultShippingAddress();
// ...
// Additional code
// ...
// A sample event handler to handle button click
const handleClick = () => {
setDefaultShippingAddress({ addressId });
}
An array constitutes of the following:
setDefaultShippingAddress:
A function to trigger the setCurrentCustomerDefaultShippingAddress
mutation from your UI. You can pass SetDefaultShippingAddressParams as parameters.
The function returns a promise that fulfills with
SetDefaultShippingAddressResponse.result:
The
SetDefaultShippingAddressResponse
returned from your mutation. Defaults to undefinedloading: 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,
});
}
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.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 />
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 />
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 />
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 />
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 />
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} />
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,
});
}
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 });
}
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 });
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.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();
}
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.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`
}
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 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 });
}
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 });
}
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,
});
}
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} />
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} />
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} />
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} />
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} />
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} />
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} />
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} />
Custom Hook for fetching categories.
// An exmple usage with the hook.
const [categories, loading, error] = useCategories({
smViewId,
connector,
brUid2,
});
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,
});
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}
/>
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}
/>
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>
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.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>,
);
}
A CommerceConnectorContextInputProps object
Custom Hook to fetch an order.
// An exmple usage with the hook.
const [order, loading, error] = useOrder({ orderId });
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();
}
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();
}
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();
}
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,
});
}
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 });
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} />
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} />
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} />
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} />
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} />
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} />
Custom Hook for product detail.
// An exmple usage with the hook.
const [item, loading, error] = useProductDetail({
itemId,
smViewId,
brUid2,
connector,
customAttrFields,
customVariantAttrFields,
});
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();
}
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();
}
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();
}
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,
});
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}
/>
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}
/>
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}
/>
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}
/>
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}
/>
Generated using TypeDoc
Custom Hook to change a customer's password.