Gift Options Talons
Functions
- useGiftOptions(props) ⇒
GiftOptionsTalonProps - This talon contains the logic for a gift options component. It performs effects and returns a data object containing values for rendering the component. This talon performs the following effects: - Fetch the gift options associated with the cart - Update the [GiftOptionsTalonProps](#GiftOptionsTalonProps) values with the data returned by the query
Typedefs
- GiftOptionsMutations :
Object - GraphQL mutations for Gift Options
- GiftOptionsQueries :
Object - GraphQL query for Gift Options
- GiftOptionsTalonProps :
Object - Props data to use when rendering a gift options component.
This talon contains the logic for a gift options component. It performs effects and returns a data object containing values for rendering the component.
This talon performs the following effects:
- Fetch the gift options associated with the cart
- Update the GiftOptionsTalonProps values with the data returned by the query
Returns: ** **Parameters
| Name | Type | Description |
|---|---|---|
| props | Object |
|
| props.mutations | GiftOptionsMutations |
GraphQL mutations for Gift Options |
| props.queries | GiftOptionsQueries |
GraphQL queries for Gift Options |
Example (Importing into your project)
import { useGiftOptions } from '@magento/peregrine/lib/talons/CartPage/GiftOptions/useGiftOptions';
GraphQL mutations for Gift Options
See: giftOptions.gql.js
for the query Venia uses.
Properties
| Name | Type | Description |
|---|---|---|
| setGiftOptionsMutation | GraphQLAST |
Mutation to use for setting the gift options for the cart |
GraphQL query for Gift Options
See: giftOptions.gql.js
for the query Venia uses.
Properties
| Name | Type | Description |
|---|---|---|
| getGiftOptionsQuery | GraphQLAST |
Query to get gift options data |
Props data to use when rendering a gift options component.
Properties
| Name | Type | Description |
|---|---|---|
| cardMessageProps | object |
Props for the cardMessage textarea element. |
| giftReceiptProps | object |
Props for the includeGiftReceipt checkbox element. |
| optionsFormProps | object |
Props for the form element. |
| printedCardProps | object |
Props for the includePrintedCard checkbox element. |
| shouldPromptForMessage | function |
Determines whether to show the cardMessage textarea element. |
Source Code: pwa-studio/packages/peregrine/lib/talons/CartPage/PriceAdjustments/GiftOptions/useGiftOptions.js
Examples
useGiftOptions()
import React from 'react'
import useGiftOptions from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/GiftOptions/useGiftOptions';
import MyGiftOptionsOperations from './myGiftOptions.gql';
const MyGiftOptions = props => {
const { mutations, queries } = MyGiftOptionsOperations;
const {
includeGiftReceipt,
includePrintedCard,
giftMessage,
toggleIncludeGiftReceiptFlag,
toggleIncludePrintedCardFlag,
updateGiftMessage
} = useGiftOptions({ mutations, queries });
return (
// JSX that renders a Gift Options component using talon props
)
}
export default MyGiftOptions