Edit in GitHubLog an issue

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

NameTypeDescription
propsObject
props.setIsCartUpdatingfunctionCallback function for setting the update state for the cart.
props.mutationsCouponCodeMutationsGraphQL mutations for a cart's coupon code.
props.queriesCouponCodeQueriesGraphQL queries for a cart's coupon code.

Example (Importing into your project)

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

NameTypeDescription
propsObject
props.selectedValuesSelectShippingFieldsThe values from the select input fields in the shipping form
props.setIsCartUpdatingfunctionCallback function for setting the update state for the cart.
props.mutationsShippingFormMutationsGraphQL mutations for the shipping form.
props.queriesShippingFormQueriesGraphQL queries for the shipping form.

Example (Importing into your project)

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

NameTypeDescription
propsObject
props.queriesShippingMethodsQueriesGraphQL queries for shipping methods

Example (Importing into your project)

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

NameTypeDescription
propsObject
props.setIsCartUpdatingfunctionFunction for setting the updating state of the shopping cart
props.selectedShippingMethodStringA serialized string of ${carrier-code}|${method-code}, eg. usps|priority.
props.shippingMethodsArray.<Object>An array of available shipping methods
props.mutationsShippingRadiosMutationsGraphQL mutations for a shipping radio selector component.

Example (Importing into your project)

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

NameTypeDescription
applyCouponMutationGraphQLASTMutation for applying a coupon code to a cart.
removeCouponMutationGraphQLASTMutation 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

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

NameTypeDescription
applyingCouponbooleanTrue if a coupon is currently being applied. False otherwise.
dataObjectData returned from the getAppliedCouponsQuery.
errorMessageStringIf GraphQL error occurs, this value is set.
fetchErrorObjectThe error data object returned by a GraphQL query.
handleApplyCouponfunctionFunction to call for handling the application of a coupon code to a cart.
handleRemoveCouponfunctionFunction to call for handling the removal of a coupon code from a cart
removingCouponbooleanTrue 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

NameTypeDescription
countryStringCountry shipping destination
regionStringCountry's region shipping destination
zipStringCountry'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

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

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

NameTypeDescription
formErrorsArray.<Error>A list of form errors
handleOnSubmitfunctionCallback function to handle form submissions
handleZipChangefunctionCallback function to handle a zip code change
isSetShippingLoadingbooleanTrue 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

NameTypeDescription
getShippingMethodsQueryGraphQLASTQuery to get the available shipping methods.

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

Properties

NameTypeDescription
hasMethodsnumberProvides the number of shipping methods available. Can be used as a boolean value since having no shipping methods would return 0.
isShowingFormbooleanTrue if the form should be shown. False otherwise.
selectedShippingFieldsSelectShippingFieldsValues for the select input fields on the shipping form
selectedShippingMethodStringA serialized string of ${carrier-code}|${method-code}, eg. usps|priority.
shippingMethodsArray.<Object>A list of available shipping methods based on the primary shipping address
showFormfunctionA 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

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

NameTypeDescription
formattedShippingMethodsObjectShipping method data that has been formatted.
handleShippingSelectionfunctionCallback function for handling shipping selection form updates.

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

Examples#

useCouponCode()#

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#

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
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.