Price Summary Talons

Functions

usePriceSummary(props)PriceSummaryTalonProps

This talon contains logic for a price summary component. It performs effects and returns prop data for rendering the component.

This talon performs the following effects:

  • Log a GraphQL error if it occurs when getting the price summary

Typedefs

FlattenedData : Object

Query data flattened into a simple object.

PriceSummaryQueries : Object

GraphQL queries for price summary component.

PriceSummaryTalonProps : Object

Props used for rendering a price summary component.

usePriceSummary(props) ⇒ PriceSummaryTalonProps

This talon contains logic for a price summary component. It performs effects and returns prop data for rendering the component.

This talon performs the following effects:

  • Log a GraphQL error if it occurs when getting the price summary

Kind: global function

Param Type Description
props Object  
props.queries PriceSummaryQueries GraphQL queries for a price summary component.

Example (Importing into your project)

import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';

FlattenedData : Object

Query data flattened into a simple object.

Kind: global typedef
Properties

Name Type Description
subtotal String Cart subtotal (excluding tax)
total String Cart grand total
discounts Array.<Object> Discounts applied to the cart
giftCards Array.<Object> Gift cards applied to the cart
taxes Array.<Object> Taxes applied to the cart
shipping Array.<Object> Shipping addresses associated with this cart

PriceSummaryQueries : Object

GraphQL queries for price summary component.

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

Name Type Description
getPriceSummary GraphQLAST Query to get the price summary for a cart

PriceSummaryTalonProps : Object

Props used for rendering a price summary component.

Kind: global typedef
Properties

Name Type Description
handleProceedToCheckout function Callback function which navigates the browser to the checkout
hasError boolean True if a GraphQL query returns an error. False otherwise.
hasItems boolean True if the cart has any items. False otherwise.
isLoading boolean True while the GraphQL query is still in flight. False otherwise.
flatData FlattenedData Query data that has been flattened into a simple object

For implementation details View Source.

Examples

usePriceSummary()

import React from 'react'
import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';

import { GET_PRICE_SUMMARY } from './myPriceSummary.gql';


const MyPriceSummary = props => {
    const { isUpdating } = props;

    const talonProps = usePriceSummary({
        queries: {
            getPriceSummary: GET_PRICE_SUMMARY
        }
    });

    const {
        handleProceedToCheckout,
        hasError,
        hasItems,
        isCheckout,
        isLoading,
        flatData
    } = talonProps;

    if (hasError) {
        return (
            <div>
                Something went wrong. Please refresh and try again.
            </div>
        );
    } else if (!hasItems || isLoading) {
        return null;
    }

    const { subtotal, total, discounts, giftCards, taxes, shipping } = flatData;

    return (
        // JSX that renders a price summary component using data from the talon
    )
}

export default MyPriceSummary