PriceAdjusments

These talons provide logic for components that may adjust the total price in a shopping cart.

Functions

useCouponCode(props) ⇒ CouponCodeTalonProps

This talon contains the logic for a coupon code form component. It performs effects and returns props data for rendering the component.

This talon performs the following effects:

Fetch all coupons associated with the cart
Manage the updating state of the cart while a coupon is being applied or removed

useShippingForm(props) ⇒ ShippingFormTalonProps

Contains logic for a shipping form component. It performs effects and returns props data related to rendering a shipping address form.

This talon performs the following effects:

Manage the updating state of the cart while the mutation for setting the shipping address is in flight

useShippingMethods(props) ⇒ ShippingMethodsTalonProps

Contains logic for a shipping method selector component. It performs effect and returns props data used to render that component.

This talon performs the following effects:

Set the shipping form visibility value based on the shipping methods associated with the cart

useShippingRadios(props) ⇒ ShippingRadiosTalonProps

Contains logic for a component that renders a radio selector for shipping. It performs effects and returns props data used for rendering that component.

This talon performs the following effects:

Sets the value of the shipping method to a default value if there is no current method selected
Manage the updating state of the cart while a shipping method is being applied

Typedefs

CouponCodeMutations : Object: GraphQL mutations for a cart's coupon code. This is a type used by the useCouponCode talon.
CouponCodeQueries : Object: GraphQL queries for a cart's coupon code. This is a type used by the useCouponCode talon.
CouponCodeTalonProps : Object: Object type returned by the useCouponCode talon. It provides props data to use when rendering a coupon code component.
SelectShippingFields : Object: Values for the select input fields on the shipping form. This is a prop used by the useShippingForm talon.
ShippingFormMutations : Object: GraphQL mutations for the shipping form. This is a type used by the useShippingForm talon.
ShippingFormQueries : Object: GraphQL queries for the shipping form. This is a type used by the useShippingForm talon.
ShippingFormTalonProps : Object: Object type returned by the useShippingForm talon. It provides props data to use when rendering a shipping form component.
ShippingMethodsQueries : Object: GraphQL queries for shipping methods. This is a type used in the useShippingMethods talon.
ShippingMethodsTalonProps : Object: Object type returned by the useShippingMethods talon. It provides prop data to use when rendering shipping methods.
ShippingRadiosMutations : Object: GraphQL mutations for a shipping radio selector component. This is a type used by the useShippingRadios talon.
ShippingRadiosTalonProps : Object: Object type returned by the useShippingRadios talon. It provides data to use when rendering a radio selector for shipping methods.

This talon contains the logic for a coupon code form component. It performs effects and returns props data for rendering the component.

This talon performs the following effects:

Fetch all coupons associated with the cart
Manage the updating state of the cart while a coupon is being applied or removed

Returns: Parameters

Name	Type	Description
props	`Object`
props.setIsCartUpdating	`function`	Callback function for setting the update state for the cart.
props.mutations	`CouponCodeMutations`	GraphQL mutations for a cart's coupon code.
props.queries	`CouponCodeQueries`	GraphQL queries for a cart's coupon code.

Example (Importing into your project)

import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode';
Copied to your clipboard
import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode';

Contains logic for a shipping form component. It performs effects and returns props data related to rendering a shipping address form.

This talon performs the following effects:

Manage the updating state of the cart while the mutation for setting the shipping address is in flight

Returns: Parameters

Name	Type	Description
props	`Object`
props.selectedValues	`SelectShippingFields`	The values from the select input fields in the shipping form
props.setIsCartUpdating	`function`	Callback function for setting the update state for the cart.
props.mutations	`ShippingFormMutations`	GraphQL mutations for the shipping form.
props.queries	`ShippingFormQueries`	GraphQL queries for the shipping form.

Example (Importing into your project)

import { useShippingForm } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingForm';
Copied to your clipboard
import { useShippingForm } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingForm';

Contains logic for a shipping method selector component. It performs effect and returns props data used to render that component.

This talon performs the following effects:

Set the shipping form visibility value based on the shipping methods associated with the cart

Returns: Parameters

Name	Type	Description
props	`Object`
props.queries	`ShippingMethodsQueries`	GraphQL queries for shipping methods

Example (Importing into your project)

import { useShippingMethods } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods';
Copied to your clipboard
import { useShippingMethods } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods';

Contains logic for a component that renders a radio selector for shipping. It performs effects and returns props data used for rendering that component.

This talon performs the following effects:

Sets the value of the shipping method to a default value if there is no current method selected
Manage the updating state of the cart while a shipping method is being applied

Returns: Parameters

Name	Type	Description
props	`Object`
props.setIsCartUpdating	`function`	Function for setting the updating state of the shopping cart
props.selectedShippingMethod	`String`	A serialized string of `${carrier-code}\|${method-code}`, eg. `usps\|priority`.
props.shippingMethods	`Array.<Object>`	An array of available shipping methods
props.mutations	`ShippingRadiosMutations`	GraphQL mutations for a shipping radio selector component.

Example (Importing into your project)

import { useShippingRadios } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingRadios';
Copied to your clipboard
import { useShippingRadios } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingRadios';

GraphQL mutations for a cart's coupon code. This is a type used by the useCouponCode talon.

See: CouponCode.js for the queries used Venia
Properties

Name	Type	Description
applyCouponMutation	`GraphQLAST`	Mutation for applying a coupon code to a cart.
removeCouponMutation	`GraphQLAST`	Mutation for removing a coupon code from a cart.

GraphQL queries for a cart's coupon code. This is a type used by the useCouponCode talon.

See: CouponCode.js for the queries used Venia
Properties

Name	Type	Description
getAppliedCouponsQuery	`GraphQLAST`	Query to fetch the currently applied coupons for a cart.

Object type returned by the useCouponCode talon. It provides props data to use when rendering a coupon code component.

Properties

Name	Type	Description
applyingCoupon	`boolean`	True if a coupon is currently being applied. False otherwise.
data	`Object`	Data returned from the `getAppliedCouponsQuery`.
errorMessage	`String`	If GraphQL error occurs, this value is set.
fetchError	`Object`	The error data object returned by a GraphQL query.
handleApplyCoupon	`function`	Function to call for handling the application of a coupon code to a cart.
handleRemoveCoupon	`function`	Function to call for handling the removal of a coupon code from a cart
removingCoupon	`boolean`	True if a coupon code is currently being removed. False otherwise.

Values for the select input fields on the shipping form. This is a prop used by the useShippingForm talon.

Properties

Name	Type	Description
country	`String`	Country shipping destination
region	`String`	Country's region shipping destination
zip	`String`	Country's zip code shipping destination

GraphQL mutations for the shipping form. This is a type used by the useShippingForm talon.

See: shippingForm.js for the query used in Venia
Properties

Name	Type	Description
setShippingAddressMutation	`GraphQLAST`	Mutation for setting the shipping address on a cart

GraphQL queries for the shipping form. This is a type used by the useShippingForm talon.

See: shippingMethods.gql.js for the query used in Venia
Properties

Name	Type	Description
shippingMethodsQuery	`GraphQLAST`	Query for getting data about available shipping methods

Object type returned by the useShippingForm talon. It provides props data to use when rendering a shipping form component.

Properties

Name	Type	Description
formErrors	`Array.<Error>`	A list of form errors
handleOnSubmit	`function`	Callback function to handle form submissions
handleZipChange	`function`	Callback function to handle a zip code change
isSetShippingLoading	`boolean`	True if the cart shipping information is being set. False otherwise.

GraphQL queries for shipping methods. This is a type used in the useShippingMethods talon.

See: shippingMethods.gql.js for the queries used in Venia
Properties

Name	Type	Description
getShippingMethodsQuery	`GraphQLAST`	Query to get the available shipping methods.

Object type returned by the useShippingMethods talon. It provides prop data to use when rendering shipping methods.

Properties

Name	Type	Description
hasMethods	`number`	Provides the number of shipping methods available. Can be used as a boolean value since having no shipping methods would return 0.
isShowingForm	`boolean`	True if the form should be shown. False otherwise.
selectedShippingFields	`SelectShippingFields`	Values for the select input fields on the shipping form
selectedShippingMethod	`String`	A serialized string of `${carrier-code}\|${method-code}`, eg. `usps\|priority`.
shippingMethods	`Array.<Object>`	A list of available shipping methods based on the primary shipping address
showForm	`function`	A function that sets the `isShowingForm` value to true.

GraphQL mutations for a shipping radio selector component. This is a type used by the useShippingRadios talon.

Properties

Name	Type	Description
setShippingMethodMutation	`GraphQLAST`	Mutation for setting the shipping method on a cart.

Object type returned by the useShippingRadios talon. It provides data to use when rendering a radio selector for shipping methods.

Properties

Name	Type	Description
formattedShippingMethods	`Object`	Shipping method data that has been formatted.
handleShippingSelection	`function`	Callback function for handling shipping selection form updates.

Source Code: pwa-studio/packages/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode.js

Examples#

useCouponCode()#

import React from 'react'

import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode';

import {
    GET_APPLIED_COUPONS,
    APPLY_COUPON_MUTATION,
    REMOVE_COUPON_MUTATION
} from './myCouponCodeQueries'

const MyCouponCode = props => {

    const talonProps = useCouponCode({
        setIsCartUpdating: props.setIsCartUpdating,
        mutations: {
            applyCouponMutation: APPLY_COUPON_MUTATION,
            removeCouponMutation: REMOVE_COUPON_MUTATION
        },
        queries: {
            getAppliedCouponsQuery: GET_APPLIED_COUPONS
        }
    });

    const {
        applyingCoupon,
        data,
        errorMessage,
        fetchError,
        handleApplyCoupon,
        handleRemoveCoupon,
        removingCoupon
    } = talonProps;

    if (!data) {
        return null;
    }

    if (fetchError) {
        return 'Something went wrong. Refresh and try again.';
    }

    return (
        // JSX for rendering a Coupon Code form and applied codes using props from the talon
    )
}

export default MyCouponCode
Copied to your clipboard
1import React from 'react'
2
3import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/CouponCode/useCouponCode';
4
5import {
6    GET_APPLIED_COUPONS,
7    APPLY_COUPON_MUTATION,
8    REMOVE_COUPON_MUTATION
9} from './myCouponCodeQueries'
10
11const MyCouponCode = props => {
12
13    const talonProps = useCouponCode({
14        setIsCartUpdating: props.setIsCartUpdating,
15        mutations: {
16            applyCouponMutation: APPLY_COUPON_MUTATION,
17            removeCouponMutation: REMOVE_COUPON_MUTATION
18        },
19        queries: {
20            getAppliedCouponsQuery: GET_APPLIED_COUPONS
21        }
22    });
23
24    const {
25        applyingCoupon,
26        data,
27        errorMessage,
28        fetchError,
29        handleApplyCoupon,
30        handleRemoveCoupon,
31        removingCoupon
32    } = talonProps;
33
34    if (!data) {
35        return null;
36    }
37
38    if (fetchError) {
39        return 'Something went wrong. Refresh and try again.';
40    }
41
42    return (
43        // JSX for rendering a Coupon Code form and applied codes using props from the talon
44    )
45}
46
47export default MyCouponCode

Shipping Methods#

import React from 'react';
import { useShippingMethods } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods';
import { useShippingForm } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingForm';
import { useShippingRadios } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingRadios';

import { GET_SHIPPING_METHODS, SET_SHIPPING_ADDRESS_MUTATION, SET_SHIPPING_METHOD_MUTATION } from './myShippingMethods.gql';

const MyShippingMethods = props => {
    const { setIsCartUpdating } = props;

    const shippingMethodsProps = useShippingMethods({
        queries: GET_SHIPPING_METHODS
    });

    const {
        hasMethods,
        isShowingForm,
        selectedShippingFields,
        selectedShippingMethod,
        shippingMethods,
        showForm
    } = shippingMethodsProps;

    const shippingFormProps = useShippingForm({
        selectedValues: selectedShippingFields,
        setIsCartUpdating,
        mutations: {
            setShippingAddressMutation: SET_SHIPPING_ADDRESS_MUTATION
        },
        queries: {
            shippingMethodsQuery: GET_SHIPPING_METHODS
        }
    });

    const {
        formErrors,
        handleOnSubmit,
        handleZipChange,
        isSetShippingLoading
    } = shippingFormProps;

    const shippingRadioProps = useShippingRadios({
        setIsCartUpdating,
        selectedShippingMethod,
        shippingMethods,
        mutations: {
            setShippingMethodMutation: SET_SHIPPING_METHOD_MUTATION
        }
    });

    const {
        formattedShippingMethods,
        handleShippingSelection
    } = shippingRadioProps;

    return (
        // JSX for rendering shipping methods form using props from the shipping methods talons
    )
}

export default MyShippingMethods
Copied to your clipboard
1import React from 'react';
2import { useShippingMethods } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods';
3import { useShippingForm } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingForm';
4import { useShippingRadios } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingRadios';
5
6import { GET_SHIPPING_METHODS, SET_SHIPPING_ADDRESS_MUTATION, SET_SHIPPING_METHOD_MUTATION } from './myShippingMethods.gql';
7
8const MyShippingMethods = props => {
9    const { setIsCartUpdating } = props;
10
11    const shippingMethodsProps = useShippingMethods({
12        queries: GET_SHIPPING_METHODS
13    });
14
15    const {
16        hasMethods,
17        isShowingForm,
18        selectedShippingFields,
19        selectedShippingMethod,
20        shippingMethods,
21        showForm
22    } = shippingMethodsProps;
23
24    const shippingFormProps = useShippingForm({
25        selectedValues: selectedShippingFields,
26        setIsCartUpdating,
27        mutations: {
28            setShippingAddressMutation: SET_SHIPPING_ADDRESS_MUTATION
29        },
30        queries: {
31            shippingMethodsQuery: GET_SHIPPING_METHODS
32        }
33    });
34
35    const {
36        formErrors,
37        handleOnSubmit,
38        handleZipChange,
39        isSetShippingLoading
40    } = shippingFormProps;
41
42    const shippingRadioProps = useShippingRadios({
43        setIsCartUpdating,
44        selectedShippingMethod,
45        shippingMethods,
46        mutations: {
47            setShippingMethodMutation: SET_SHIPPING_METHOD_MUTATION
48        }
49    });
50
51    const {
52        formattedShippingMethods,
53        handleShippingSelection
54    } = shippingRadioProps;
55
56    return (
57        // JSX for rendering shipping methods form using props from the shipping methods talons
58    )
59}
60
61export default MyShippingMethods

Gift Options

Price Summary

Last updated 10/8/2021

Was this helpful?

Yes

PriceAdjusments

Examples.css-1911m5i{margin-left:var(--spectrum-global-dimension-size-100);}#

useCouponCode().css-1mxjwj6{margin-left:var(--spectrum-global-dimension-size-50);}#

Shipping Methods#

Examples#

useCouponCode()#