PriceSummary

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.

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

Returns: Parameters

Example (Importing into your project)

import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
CopyCopied to your clipboard
import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';

Query data flattened into a simple object.

Properties

GraphQL queries for price summary component.

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

Props used for rendering a price summary component.

Properties

Source Code: pwa-studio/packages/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js

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
CopyCopied to your clipboard
1import React from 'react'
2import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
3
4import { GET_PRICE_SUMMARY } from './myPriceSummary.gql';
5
6
7const MyPriceSummary = props => {
8    const { isUpdating } = props;
9
10    const talonProps = usePriceSummary({
11        queries: {
12            getPriceSummary: GET_PRICE_SUMMARY
13        }
14    });
15
16    const {
17        handleProceedToCheckout,
18        hasError,
19        hasItems,
20        isCheckout,
21        isLoading,
22        flatData
23    } = talonProps;
24
25    if (hasError) {
26        return (
27            <div>
28                Something went wrong. Please refresh and try again.
29            </div>
30        );
31    } else if (!hasItems || isLoading) {
32        return null;
33    }
34
35    const { subtotal, total, discounts, giftCards, taxes, shipping } = flatData;
36
37    return (
38        // JSX that renders a price summary component using data from the talon
39    )
40}
41
42export default MyPriceSummary

Last updated 5/26/2021

Was this helpful?

Yes

No