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 propsFromTalon = useGiftCards(talonProps)

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

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

export default MyGiftCards
Copied to your clipboard
1import React from 'react'
2import { useGiftCards } from '@magento/peregrine/lib/talons/CartPage/GiftCards'
3import {
4    GET_CART_GIFT_CARDS_QUERY,
5    GET_GIFT_CARD_BALANCE_QUERY,
6    APPLY_GIFT_CARD_MUTATION,
7    REMOVE_GIFT_CARD_MUTATION
8} from './myGiftCardQueries';
9
10const MyGiftCards = props => {
11
12 const talonProps = useGiftCards({
13     setIsCartUpdating: props.setIsCartUpdating,
14     mutations: {
15         applyCardMutation: APPLY_GIFT_CARD_MUTATION,
16         removeCardMutation: REMOVE_GIFT_CARD_MUTATION
17     },
18     queries: {
19         appliedCardsQuery: GET_CART_GIFT_CARDS_QUERY,
20         cardBalanceQuery: GET_GIFT_CARD_BALANCE_QUERY
21     }
22 });
23
24 const propsFromTalon = useGiftCards(talonProps)
25
26 const {
27     applyGiftCard,
28     checkBalanceData,
29     checkGiftCardBalance,
30     errorLoadingGiftCards,
31     errorRemovingCard,
32     giftCardsData,
33     isLoadingGiftCards,
34     isApplyingCard,
35     isCheckingBalance,
36     isRemovingCard,
37     removeGiftCard,
38     setFormApi,
39     shouldDisplayCardBalance,
40     shouldDisplayCardError
41 } = propsFromTalon;
42
43 return (
44     // JSX using the props from the talon
45 )
46}
47
48export 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
1import React from 'react'
2import { useGiftCard } from '@magento/peregrine/lib/talons/CartPage/GiftCards/useGiftCard';
3
4const MyGiftCard = props => {
5    const { code } = props;
6
7    const removeGiftCard = code => {
8        // Logic for removing a gift card using its code
9        // This can also be passed in as a prop
10    }
11
12    const { removeGiftCardWithCode } = useGiftCard({
13        code,
14        removeGiftCard
15    });
16
17    return (
18        // JSX for rendering a single Gift Card using data from the talon
19    )
20}
21
22export default MyGiftCard

Cart Page

Gift Options

Last updated 5/26/2021

Was this helpful?

Yes

GiftCards

Examples.css-1911m5i{margin-left:var(--spectrum-global-dimension-size-100);}#

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

useGiftCard()#

Examples#

useGiftCards()#