GiftCards

Functions

useGiftCards(props) ⇒ GiftCardsTalonProps

Handles the logic for a component that renders a list of gift cards. It performs effects and returns the prop data necessary for rendering the component.

This talon performs the following effects:

Fetch the currently applied gift cards for a cart
Manage the updating state of the cart while a gift card is being applied or removed

useGiftCard(props) ⇒ GiftCardTalonProps

Provide logic for a single gift card component.

Typedefs

GiftCardsMutations : Object: GraphQL mutations for Gift Cards.
GiftCardsQueries : Object: GraphQL queries for Gift Cards.
GiftCardsTalonProps : Object: Props data to use when rendering a list of gift cards.
GiftCardTalonProps : Object: Props data to use when rendering a single gift card component.

Handles the logic for a component that renders a list of gift cards. It performs effects and returns the prop data necessary for rendering the component.

This talon performs the following effects:

Fetch the currently applied gift cards for a cart
Manage the updating state of the cart while a gift card is being applied or removed

Returns: Parameters

Name	Type	Description
props	`Object`
props.setIsCartUpdating	`function`	Callback function for setting the update state for the cart.
props.mutations	`GiftCardsMutations`	GraphQL mutations for Gift Cards
props.queries	`GiftCardsQueries`	GraphQL queries for Gift Cards

Example (Importing into your project)

import { useGiftCards } from '@magento/peregrine/lib/talons/CartPage/GiftCards'
Copied to your clipboard
import { useGiftCards } from '@magento/peregrine/lib/talons/CartPage/GiftCards'

Provide logic for a single gift card component.

Returns: Parameters

Name	Type	Description
props	`Object`
props.code	`String`	Gift card's code
props.removeGiftCard	`function`	A function that removes a gift card when provided a code

Example (Importing into your project)

import { useGiftCard } from '@magento/peregrine/lib/talons/CartPage/GiftCards/useGiftCard';
Copied to your clipboard
import { useGiftCard } from '@magento/peregrine/lib/talons/CartPage/GiftCards/useGiftCard';

GraphQL mutations for Gift Cards.

See: giftCardQueries.ee.js for queries used in Venia
Properties

Name	Type	Description
applyGiftCardMutation	`GraphQLAST`	The mutation used to apply a gift card to the cart.
removeGiftCardMutation	`GraphQLAST`	The mutation used to remove a gift card from the cart.

GraphQL queries for Gift Cards.

See: giftCardQueries.ee.js for queries used in Venia
Properties

Name	Type	Description
getAppliedGiftCardsQuery	`GraphQLAST`	The query used to get the gift cards currently applied to the cart.
getGiftCardBalanceQuery	`GraphQLAST`	The query used to get the gift cards currently applied to the cart.

Props data to use when rendering a list of gift cards.

Properties

Name	Type	Description
applyGiftCard	`function`	A callback to apply a gift card to the cart.
checkBalanceData	`Object`	The giftCardAccount object of the most recent successful check balance GraphQL query.
checkGiftCardBalance	`function`	A callback to check the balance of a gift card.
errorLoadingGiftCards	`boolean`	Whether there was an error loading the cart's gift cards.
errorApplyingCard	`boolean`	Whether there was an error applying the gift card.
errorCheckingBalance	`boolean`	Whether there was an error checking the balance of the gift card.
errorRemovingCard	`boolean`	Whether there was an error removing the gift card.
giftCardsData	`Array`	The applied_gift_cards object of the cart query.
isLoadingGiftCards	`boolean`	Whether the cart's gift card data is loading.
isApplyingCard	`boolean`	Whether the apply gift card operation is in progress.
isCheckingBalance	`boolean`	Whether the check gift card balance operation is in progress.
isRemovingCard	`boolean`	Whether the remove gift card operation is in progress.
removeGiftCard	`function`	A callback to remove a gift card from the cart.
shouldDisplayCardBalance	`boolean`	Whether to display the gift card balance to the user
shouldDisplayCardError	`boolean`	Whether to display an error message under the card input field.

Props data to use when rendering a single gift card component.

Properties

Name	Type	Description
removeGiftCardWithCode	`function`	Function for removing a gift card associated with the code passed into this talon.

Source Code: pwa-studio/packages/peregrine/lib/talons/CartPage/GiftCards/useGiftCards.js

Examples

useGiftCards()

import React from 'react';
import { useGiftCards } from '@magento/peregrine/lib/talons/CartPage/GiftCards';
import {
    GET_CART_GIFT_CARDS_QUERY,
    GET_GIFT_CARD_BALANCE_QUERY,
    APPLY_GIFT_CARD_MUTATION,
    REMOVE_GIFT_CARD_MUTATION
} from './myGiftCardQueries';

const MyGiftCards = props => {

 const talonProps = useGiftCards({
     setIsCartUpdating: props.setIsCartUpdating,
     mutations: {
         applyCardMutation: APPLY_GIFT_CARD_MUTATION,
         removeCardMutation: REMOVE_GIFT_CARD_MUTATION
     },
     queries: {
         appliedCardsQuery: GET_CART_GIFT_CARDS_QUERY,
         cardBalanceQuery: GET_GIFT_CARD_BALANCE_QUERY
     }
 });


 const {
     applyGiftCard,
     checkBalanceData,
     checkGiftCardBalance,
     errorLoadingGiftCards,
     errorRemovingCard,
     giftCardsData,
     isLoadingGiftCards,
     isApplyingCard,
     isCheckingBalance,
     isRemovingCard,
     removeGiftCard,
     setFormApi,
     shouldDisplayCardBalance,
     shouldDisplayCardError
 } = talonProps;

 return (
     // JSX using the props from the talon
 )
}

export default MyGiftCards
Copied to your clipboard
import React from 'react';
import { useGiftCards } from '@magento/peregrine/lib/talons/CartPage/GiftCards';
import {
    GET_CART_GIFT_CARDS_QUERY,
    GET_GIFT_CARD_BALANCE_QUERY,
    APPLY_GIFT_CARD_MUTATION,
    REMOVE_GIFT_CARD_MUTATION
} from './myGiftCardQueries';

const MyGiftCards = props => {

 const talonProps = useGiftCards({
     setIsCartUpdating: props.setIsCartUpdating,
     mutations: {
         applyCardMutation: APPLY_GIFT_CARD_MUTATION,
         removeCardMutation: REMOVE_GIFT_CARD_MUTATION
     },
     queries: {
         appliedCardsQuery: GET_CART_GIFT_CARDS_QUERY,
         cardBalanceQuery: GET_GIFT_CARD_BALANCE_QUERY
     }
 });


 const {
     applyGiftCard,
     checkBalanceData,
     checkGiftCardBalance,
     errorLoadingGiftCards,
     errorRemovingCard,
     giftCardsData,
     isLoadingGiftCards,
     isApplyingCard,
     isCheckingBalance,
     isRemovingCard,
     removeGiftCard,
     setFormApi,
     shouldDisplayCardBalance,
     shouldDisplayCardError
 } = talonProps;

 return (
     // JSX using the props from the talon
 )
}

export default MyGiftCards

useGiftCard()

import React from 'react';
import { useGiftCard } from '@magento/peregrine/lib/talons/CartPage/GiftCards/useGiftCard';

const MyGiftCard = props => {
    const { code } = props;

    const removeGiftCard = code => {
        // Logic for removing a gift card using its code
        // This can also be passed in as a prop
    }

    const { removeGiftCardWithCode } = useGiftCard({
        code,
        removeGiftCard
    });

    return (
        // JSX for rendering a single Gift Card using data from the talon
    )
}

export default MyGiftCard
Copied to your clipboard
import React from 'react';
import { useGiftCard } from '@magento/peregrine/lib/talons/CartPage/GiftCards/useGiftCard';

const MyGiftCard = props => {
    const { code } = props;

    const removeGiftCard = code => {
        // Logic for removing a gift card using its code
        // This can also be passed in as a prop
    }

    const { removeGiftCardWithCode } = useGiftCard({
        code,
        removeGiftCard
    });

    return (
        // JSX for rendering a single Gift Card using data from the talon
    )
}

export default MyGiftCard

Cart Page

Gift Options

Last updated 9/2/2025

Was this helpful?

Yes

GiftCards

Examples.css-83mclq{margin-left:var(--spectrum-global-dimension-size-100);}

useGiftCards().css-jmmyhj{margin-left:var(--spectrum-global-dimension-size-50);}

useGiftCard()

Examples

useGiftCards()