Price Adjustments Talons

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.

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

Kind: global function

Param 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/useCouponCode';

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

Kind: global function

Param 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';

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

Kind: global function

Param 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';

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

Kind: global function

Param Type Description    
props Object      
props.setIsCartUpdating function Function for setting the updating state of the shopping cart    
props.selectedShippingMethod String A serialized string of , 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';

CouponCodeMutations : Object

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

Kind: global typedef
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.

CouponCodeQueries : Object

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

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

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

CouponCodeTalonProps : Object

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

Kind: global typedef
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.

SelectShippingFields : Object

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

Kind: global typedef
Properties

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

ShippingFormMutations : Object

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

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

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

ShippingFormQueries : Object

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

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

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

ShippingFormTalonProps : Object

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

Kind: global typedef
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.

ShippingMethodsQueries : Object

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

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

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

ShippingMethodsTalonProps : Object

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

Kind: global typedef
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 , 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.    

ShippingRadiosMutations : Object

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

Kind: global typedef
Properties

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

ShippingRadiosTalonProps : Object

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

Kind: global typedef
Properties

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

For implementation details View Source.

Examples

useCouponCode()

import React from 'react'

import { useCouponCode } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/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