GiftOptions

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 values with the data returned by the query

Typedefs

GiftOptionsTalonProps : Object: Props data to use when rendering a gift options component.
GiftOptionsOperations : Object: This is a type used by the useGiftOptions talon.

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
props	`Object`
props.operations	`GiftOptionsOperations`

Example (Importing into your project)

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

Props data to use when rendering a gift options component.

Properties

Name	Type	Description
loading	`Boolean`	Query loading indicator.
errors	`Object`	Errors for GraphQl query and mutation.
savingOptions	`Array`	Array containing fields that are busy.
giftReceiptProps	`Object`	Props for the `includeGiftReceipt` checkbox element.
printedCardProps	`Object`	Props for the `includePrintedCard` checkbox element.
printedCardPrice	`Object`	Printed Card Price object.
giftMessageCheckboxProps	`Object`	Props for the `includeGiftMessage` checkbox element.
giftMessageResult	`Object`	Object containing Gift Message data.
hasGiftMessage	`Boolean`	Checks if Gift Message data has all fields filled.
showGiftMessageResult	`Boolean`	Show or hide Gift Message result.
cardToProps	`Object`	Props for the `cardTo` text input element.
cardFromProps	`Object`	Props for the `cardFrom` text input element.
cardMessageProps	`Object`	Props for the `cardMessage` textarea element.
editGiftMessageButtonProps	`Object`	Props for the Edit Gift Message button.
cancelGiftMessageButtonProps	`Object`	Props for the Cancel Gift Message button.
saveGiftMessageButtonProps	`Object`	Props for the Update Gift Message button.
optionsFormProps	`Object`	Props for the form element.

This is a type used by the useGiftOptions talon.

Properties

Name	Type	Description
setGiftOptionsOnCartMutation	`GraphQLAST`	sets the gift options on cart.
getGiftOptionsQuery	`GraphQLAST`	fetch the gift options.

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
Copied to your clipboard
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