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)

Copy
import { usePriceSummary } from '@magento/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary';
Copied 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()

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

Last updated 9/13/2023

Was this helpful?

Yes

No