Edit in GitHubLog an issue

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

NameTypeDescription
propsObject
props.setIsCartUpdatingfunctionCallback function for setting the update state for the cart.
props.mutationsGiftCardsMutationsGraphQL mutations for Gift Cards
props.queriesGiftCardsQueriesGraphQL queries for Gift Cards

Example (Importing into your project)

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

Provide logic for a single gift card component.

Returns: Parameters

NameTypeDescription
propsObject
props.codeStringGift card's code
props.removeGiftCardfunctionA function that removes a gift card when provided a code

Example (Importing into your project)

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

NameTypeDescription
applyGiftCardMutationGraphQLASTThe mutation used to apply a gift card to the cart.
removeGiftCardMutationGraphQLASTThe 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

NameTypeDescription
getAppliedGiftCardsQueryGraphQLASTThe query used to get the gift cards currently applied to the cart.
getGiftCardBalanceQueryGraphQLASTThe query used to get the gift cards currently applied to the cart.

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

Properties

NameTypeDescription
applyGiftCardfunctionA callback to apply a gift card to the cart.
checkBalanceDataObjectThe giftCardAccount object of the most recent successful check balance GraphQL query.
checkGiftCardBalancefunctionA callback to check the balance of a gift card.
errorLoadingGiftCardsbooleanWhether there was an error loading the cart's gift cards.
errorApplyingCardbooleanWhether there was an error applying the gift card.
errorCheckingBalancebooleanWhether there was an error checking the balance of the gift card.
errorRemovingCardbooleanWhether there was an error removing the gift card.
giftCardsDataArrayThe applied_gift_cards object of the cart query.
isLoadingGiftCardsbooleanWhether the cart's gift card data is loading.
isApplyingCardbooleanWhether the apply gift card operation is in progress.
isCheckingBalancebooleanWhether the check gift card balance operation is in progress.
isRemovingCardbooleanWhether the remove gift card operation is in progress.
removeGiftCardfunctionA callback to remove a gift card from the cart.
shouldDisplayCardBalancebooleanWhether to display the gift card balance to the user
shouldDisplayCardErrorbooleanWhether to display an error message under the card input field.

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

Properties

NameTypeDescription
removeGiftCardWithCodefunctionFunction 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()#

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()#

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
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.