Gift Cards Talons

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.

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

Kind: global function

Param 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'

useGiftCard(props) ⇒ GiftCardTalonProps

Provide logic for a single gift card component.

Kind: global function

Param 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';

GiftCardsMutations : Object

GraphQL mutations for Gift Cards.

Kind: global typedef
See: giftCardQueries.js for queries used in Venia
Properties

Name Type Description
applyCardMutation GraphQLAST The mutation used to apply a gift card to the cart.
removeCardMutation GraphQLAST The mutation used to remove a gift card from the cart.

GiftCardsQueries : Object

GraphQL queries for Gift Cards.

Kind: global typedef
See: giftCardQueries.js for queries used in Venia
Properties

Name Type Description
appliedCardsQuery GraphQLAST The query used to get the gift cards currently applied to the cart.
cardBalanceQuery GraphQLAST The query used to get the gift cards currently applied to the cart.

GiftCardsTalonProps : Object

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

Kind: global typedef
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.

GiftCardTalonProps : Object

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

Kind: global typedef
Properties

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

For implementation details View Source.

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

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