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.
handleApplyCouponOnEnter	`function`	Function to call for handling the application of a coupon code to a cart on enter key Press.
handleRemoveCoupon	`function`	Function to call for handling the removal of a coupon code from a cart
handleRemoveCouponOnEnter	`function`	Function to call for handling the removal of a coupon code from a cart on enter key press.
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
handleOnSubmitKeyPress	`function`	Callback function to handle form submissions on enter key
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.
showFormOnEnter	`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
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

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
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

Gift Options

Price Summary

Last updated 9/13/2023

Was this helpful?

Yes

PriceAdjusments

Examples.css-83mclq{margin-left:var(--spectrum-global-dimension-size-100);}

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

Shipping Methods

Examples

useCouponCode()