From 9f2a0a8eaf2591b01adb8f5a813d10134efa2638 Mon Sep 17 00:00:00 2001 From: Stephen Date: Fri, 22 May 2020 16:21:48 -0500 Subject: [PATCH 1/3] PWA-609: Nudges css in the right direction on the checkout page (#2416) * Nudges css in the right direction on the checkout page Signed-off-by: sirugh * Who could forget desktop view Signed-off-by: sirugh * Define first column for potential of more than 2 Signed-off-by: sirugh * Update snaps Signed-off-by: sirugh Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com> --- .../PaymentInformation/summary.css | 9 +- .../shippingInformation.css | 3 +- .../__snapshots__/completedView.spec.js.snap | 104 ++++++++---------- .../ShippingMethod/completedView.css | 20 +--- .../ShippingMethod/completedView.js | 13 +-- .../ShippingMethod/shippingMethod.css | 6 +- 6 files changed, 64 insertions(+), 91 deletions(-) diff --git a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/summary.css b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/summary.css index 29d967d823..0a25693f02 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/summary.css +++ b/packages/venia-ui/lib/components/CheckoutPage/PaymentInformation/summary.css @@ -1,13 +1,13 @@ .root { display: grid; gap: 2rem; - padding: 2rem 1rem; + padding: 1.5rem 1rem; } .heading_container { display: grid; grid-auto-flow: column; - grid-template-columns: auto 5rem; + grid-template-columns: 1fr; } .heading { @@ -51,14 +51,9 @@ padding-right: 5px; } -.edit_button { - text-align: right; -} - .edit_text { line-height: 1; padding-left: 0.5rem; - text-decoration: underline; vertical-align: top; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.css index 526465593e..d67b8dab38 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/shippingInformation.css @@ -15,7 +15,7 @@ .cardHeader { display: grid; grid-auto-flow: column; - justify-content: space-between; + grid-template-columns: 1fr; } .cardTitle { @@ -34,7 +34,6 @@ .editText { line-height: 1; padding-left: 0.5rem; - text-decoration: underline; vertical-align: top; } diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/completedView.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/completedView.spec.js.snap index e700ff7e07..60ea75adbb 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/completedView.spec.js.snap +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/completedView.spec.js.snap @@ -16,38 +16,34 @@ exports[`it renders an error when selectedShippingMethod is missing 1`] = ` Shipping Method
{
Shipping Method
- {contents} diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.css index cb25191f10..a75051724e 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.css @@ -2,12 +2,7 @@ border: none; border-radius: 0px; border-bottom: 1px solid rgb(var(--venia-border)); - min-height: 10rem; padding: 1.5rem 0rem; - - display: grid; - grid-template-rows: auto 1fr; - row-gap: 1rem; } .done { @@ -25,6 +20,7 @@ display: grid; grid-template-rows: 1fr auto; row-gap: 1.5rem; + padding-top: 1rem; } .formButtons { From ec0b9cad0e4fff0bafb6a54becf97e7208ff3cf5 Mon Sep 17 00:00:00 2001 From: Andy Terranova <13182778+supernova-at@users.noreply.github.com> Date: Tue, 26 May 2020 10:28:29 -0500 Subject: [PATCH 2/3] Preselect lowest cost shipping method for authed users without one (#2402) * Authed users without shipping methods get lowest cost one preselected for them * Mocks user context in unit test * Adds an initializing display state to remove visual hiccup and erroneous error messages * Runs prettier * Fixes continue button regression * Unit test changes * Remove change to isLoading logic * Commits fully to the new initialized display state. * Simplifies talon logic * Use derived state where possible * Runs prettier * Derive displayState instead of keeping it in local state * Derives isBackgroundAutoSelecting instead of tracking it in state * Disables input radios while the page is updating * Runs prettier Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com> --- .../__tests__/useShippingMethod.spec.js | 16 +- .../talons/CheckoutPage/useShippingMethod.js | 147 ++++++++---- .../__snapshots__/shippingMethod.spec.js.snap | 220 +++++++++++------- .../__snapshots__/shippingRadios.spec.js.snap | 14 +- .../__snapshots__/updateModal.spec.js.snap | 101 +++----- .../__tests__/shippingMethod.spec.js | 49 ++-- .../__tests__/shippingRadios.spec.js | 17 +- .../__tests__/updateModal.spec.js | 2 +- .../ShippingMethod/shippingMethod.js | 83 ++++--- .../ShippingMethod/shippingRadios.css | 6 - .../ShippingMethod/shippingRadios.js | 18 +- .../ShippingMethod/updateModal.js | 2 +- .../__snapshots__/radioGroup.spec.js.snap | 112 +++++++++ .../RadioGroup/__tests__/radioGroup.spec.js | 7 + .../lib/components/RadioGroup/radioGroup.js | 13 +- 15 files changed, 493 insertions(+), 314 deletions(-) diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useShippingMethod.spec.js b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useShippingMethod.spec.js index 80f20a3112..24dee0df02 100644 --- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/useShippingMethod.spec.js +++ b/packages/peregrine/lib/talons/CheckoutPage/__tests__/useShippingMethod.spec.js @@ -45,7 +45,12 @@ jest.mock('@apollo/react-hooks', () => { loading: false } ]), - useMutation: jest.fn().mockReturnValue([jest.fn()]) + useMutation: jest.fn().mockReturnValue([ + jest.fn(), + { + loading: false + } + ]) }; }); @@ -58,6 +63,15 @@ jest.mock('@magento/peregrine/lib/context/cart', () => { return { useCartContext }; }); +jest.mock('@magento/peregrine/lib/context/user', () => { + const state = { isSignedIn: false }; + const api = {}; + + const useUserContext = jest.fn(() => [state, api]); + + return { useUserContext }; +}); + /* * Member Variables. */ diff --git a/packages/peregrine/lib/talons/CheckoutPage/useShippingMethod.js b/packages/peregrine/lib/talons/CheckoutPage/useShippingMethod.js index eeb808b9f9..91e2125c80 100644 --- a/packages/peregrine/lib/talons/CheckoutPage/useShippingMethod.js +++ b/packages/peregrine/lib/talons/CheckoutPage/useShippingMethod.js @@ -1,11 +1,13 @@ -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useMemo, useState } from 'react'; import { useLazyQuery, useMutation } from '@apollo/react-hooks'; import { useCartContext } from '@magento/peregrine/lib/context/cart'; +import { useUserContext } from '@magento/peregrine/lib/context/user'; export const displayStates = { DONE: 'done', - EDITING: 'editing' + EDITING: 'editing', + INITIALIZING: 'initializing' }; const serializeShippingMethod = method => { @@ -36,6 +38,9 @@ const addSerializedProperty = shippingMethod => { }; }; +const DEFAULT_SELECTED_SHIPPING_METHOD = null; +const DEFAULT_AVAILABLE_SHIPPING_METHODS = []; + export const useShippingMethod = props => { const { onSave, @@ -45,25 +50,26 @@ export const useShippingMethod = props => { } = props; const [{ cartId }] = useCartContext(); + const [{ isSignedIn }] = useUserContext(); /* * Apollo Hooks. */ - const [setShippingMethodCall] = useMutation(setShippingMethod); - - const [fetchShippingMethodInfo, { data, loading }] = useLazyQuery( - getSelectedAndAvailableShippingMethods, - { - fetchPolicy: 'cache-and-network' - } - ); + const [ + setShippingMethodCall, + { loading: isSettingShippingMethod } + ] = useMutation(setShippingMethod); + + const [ + fetchShippingMethodInfo, + { data, loading: isLoadingShippingMethods } + ] = useLazyQuery(getSelectedAndAvailableShippingMethods, { + fetchPolicy: 'cache-and-network' + }); /* * State / Derived state. */ - const [displayState, setDisplayState] = useState(displayStates.EDITING); - const [shippingMethods, setShippingMethods] = useState([]); - const [selectedShippingMethod, setSelectedShippingMethod] = useState(null); const [isUpdateMode, setIsUpdateMode] = useState(false); const hasData = @@ -71,6 +77,45 @@ export const useShippingMethod = props => { data.cart.shipping_addresses.length && data.cart.shipping_addresses[0].selected_shipping_method; + const derivedPrimaryShippingAddress = + data && + data.cart.shipping_addresses && + data.cart.shipping_addresses.length + ? data.cart.shipping_addresses[0] + : null; + + const derivedSelectedShippingMethod = derivedPrimaryShippingAddress + ? addSerializedProperty( + derivedPrimaryShippingAddress.selected_shipping_method + ) + : DEFAULT_SELECTED_SHIPPING_METHOD; + + const derivedShippingMethods = useMemo(() => { + if (!derivedPrimaryShippingAddress) + return DEFAULT_AVAILABLE_SHIPPING_METHODS; + + // Shape the list of available shipping methods. + // Sort them by price and add a serialized property to each. + const rawShippingMethods = + derivedPrimaryShippingAddress.available_shipping_methods; + const shippingMethodsByPrice = [...rawShippingMethods].sort(byPrice); + const result = shippingMethodsByPrice.map(addSerializedProperty); + + return result; + }, [derivedPrimaryShippingAddress]); + + // Determine the component's display state. + const isBackgroundAutoSelecting = + isSignedIn && + !derivedSelectedShippingMethod && + Boolean(derivedShippingMethods.length); + const displayState = derivedSelectedShippingMethod + ? displayStates.DONE + : isLoadingShippingMethods || + (isSettingShippingMethod && isBackgroundAutoSelecting) + ? displayStates.INITIALIZING + : displayStates.EDITING; + /* * Callbacks. */ @@ -94,15 +139,8 @@ export const useShippingMethod = props => { setPageIsUpdating(false); setIsUpdateMode(false); - setDisplayState(displayStates.DONE); }, - [ - cartId, - setDisplayState, - setIsUpdateMode, - setPageIsUpdating, - setShippingMethodCall - ] + [cartId, setIsUpdateMode, setPageIsUpdating, setShippingMethodCall] ); const handleCancelUpdate = useCallback(() => { @@ -133,44 +171,51 @@ export const useShippingMethod = props => { } }, [hasData, onSave]); + // If an authenticated user does not have a preferred shipping method, + // auto-select the least expensive one for them. useEffect(() => { if (!data) return; - - // Determine the "primary" shipping address by using - // the first shipping address on the cart. - const primaryShippingAddress = data.cart.shipping_addresses[0]; - - // Shape the list of available shipping methods. - // Sort them by price and add a serialized property to each. - const rawShippingMethods = - primaryShippingAddress.available_shipping_methods; - const shippingMethodsByPrice = [...rawShippingMethods].sort(byPrice); - const shippingMethods = shippingMethodsByPrice.map( - addSerializedProperty - ); - setShippingMethods(shippingMethods); - - // Determine the selected shipping method. - const selectedMethod = addSerializedProperty( - primaryShippingAddress.selected_shipping_method - ); - setSelectedShippingMethod(selectedMethod); - - // Determine the component's display state. - const nextDisplayState = selectedMethod - ? displayStates.DONE - : displayStates.EDITING; - setDisplayState(nextDisplayState); - }, [data]); + if (!cartId) return; + if (!isSignedIn) return; + + if (!derivedSelectedShippingMethod) { + // The shipping methods are sorted by price. + const leastExpensiveShippingMethod = derivedShippingMethods[0]; + + if (leastExpensiveShippingMethod) { + const { + carrier_code, + method_code + } = leastExpensiveShippingMethod; + + setShippingMethodCall({ + variables: { + cartId, + shippingMethod: { + carrier_code, + method_code + } + } + }); + } + } + }, [ + cartId, + data, + derivedSelectedShippingMethod, + derivedShippingMethods, + isSignedIn, + setShippingMethodCall + ]); return { displayState, handleCancelUpdate, handleSubmit, - isLoading: loading, + isLoading: isLoadingShippingMethods, isUpdateMode, - selectedShippingMethod, - shippingMethods, + selectedShippingMethod: derivedSelectedShippingMethod, + shippingMethods: derivedShippingMethods, showUpdateMode }; }; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap index b291b99590..0765246a3c 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`it renders correctly 1`] = ` +exports[`it disables inputs when the page is updating 1`] = `
@@ -24,6 +24,7 @@ exports[`it renders correctly 1`] = ` `; +exports[`it renders correctly 1`] = ` +
+

+ Shipping Method +

+
+
+
+`; + exports[`it renders correctly in done mode 1`] = ` Array [
@@ -127,86 +194,79 @@ exports[`it renders correctly in edit mode and loading 1`] = ` > Shipping Method -
-
- - - - - - - - - - - - - - Loading shipping methods... - -
-
+ + + + + + + + + + + + Loading shipping methods... + +
`; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingRadios.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingRadios.spec.js.snap index 3cd067a922..bf2e1b03b9 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingRadios.spec.js.snap +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingRadios.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`it renders an error when no shipping methods 1`] = ` +exports[`it renders an error message when no shipping methods 1`] = ` @@ -32,15 +32,3 @@ exports[`it renders correctly 1`] = ` } /> `; - -exports[`it renders correctly when loading 1`] = ` - - Loading shipping methods... - -`; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/updateModal.spec.js.snap b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/updateModal.spec.js.snap index 34b50bd06b..e92331c3a8 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/updateModal.spec.js.snap +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/updateModal.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`it renders correctly 1`] = ` +exports[`it disables the submit button while loading 1`] = `
-
- )} - -
- ); - } else { + if (displayState === displayStates.DONE) { const updateFormInitialValues = { shipping_method: selectedShippingMethod.serializedValue }; @@ -99,6 +69,47 @@ const ShippingMethod = props => { /> ); + } else { + // We're either initializing or editing. + let bodyContents = initializingContents; + + if (displayState === displayStates.EDITING) { + const lowestCostShippingMethodSerializedValue = shippingMethods.length + ? shippingMethods[0].serializedValue + : ''; + const lowestCostShippingMethod = { + shipping_method: lowestCostShippingMethodSerializedValue + }; + + bodyContents = ( +
+ +
+ +
+ + ); + } + + contents = ( +
+

{'Shipping Method'}

+ {bodyContents} +
+ ); } return {contents}; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.css b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.css index 9fa6cd3abf..9895703b3a 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.css +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.css @@ -2,12 +2,6 @@ color: rgb(var(--venia-error)); } -.loadingRoot { - composes: root from '../../LoadingIndicator/indicator.css'; - height: auto; - margin: 0; -} - .radioLabel { display: grid; grid-template-columns: auto auto; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.js index 4d68683977..14717e7155 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.js +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingRadios.js @@ -2,7 +2,6 @@ import React from 'react'; import { arrayOf, bool, number, shape, string } from 'prop-types'; import { mergeClasses } from '../../../classify'; -import LoadingIndicator from '../../LoadingIndicator'; import RadioGroup from '../../RadioGroup'; import ShippingRadio from '../../CartPage/PriceAdjustments/ShippingMethods/shippingRadio'; import defaultClasses from './shippingRadios.css'; @@ -11,18 +10,10 @@ const ERROR_MESSAGE = 'Error loading shipping methods. Please ensure a shipping address is set and try again.'; const ShippingRadios = props => { - const { isLoading, shippingMethods } = props; + const { disabled, shippingMethods } = props; const classes = mergeClasses(defaultClasses, props.classes); - if (isLoading) { - return ( - - {'Loading shipping methods...'} - - ); - } - if (!shippingMethods.length) { return {ERROR_MESSAGE}; } @@ -49,6 +40,7 @@ const ShippingRadios = props => { return ( @@ -59,12 +51,12 @@ export default ShippingRadios; ShippingRadios.propTypes = { classes: shape({ - loadingRoot: string, + error: string, radioMessage: string, radioLabel: string, radioRoot: string }), - isLoading: bool, + disabled: bool, shippingMethods: arrayOf( shape({ amount: shape({ @@ -78,5 +70,5 @@ ShippingRadios.propTypes = { method_title: string, serializedValue: string.isRequired }) - ) + ).isRequired }; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/updateModal.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/updateModal.js index 606be8894b..6c5c11639e 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/updateModal.js +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/updateModal.js @@ -33,7 +33,7 @@ const UpdateModal = props => { title={'Edit Shipping Method'} > diff --git a/packages/venia-ui/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap b/packages/venia-ui/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap index c848645a49..656d1e7e53 100644 --- a/packages/venia-ui/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap +++ b/packages/venia-ui/lib/components/RadioGroup/__tests__/__snapshots__/radioGroup.spec.js.snap @@ -1,5 +1,117 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`disables all child radios when disable prop is truthy 1`] = ` +Array [ +
+ + + + + + + + +
, +

, +] +`; + exports[`renders as expected 1`] = ` Array [

diff --git a/packages/venia-ui/lib/components/RadioGroup/__tests__/radioGroup.spec.js b/packages/venia-ui/lib/components/RadioGroup/__tests__/radioGroup.spec.js index 5093235fa8..0dc751492b 100644 --- a/packages/venia-ui/lib/components/RadioGroup/__tests__/radioGroup.spec.js +++ b/packages/venia-ui/lib/components/RadioGroup/__tests__/radioGroup.spec.js @@ -17,3 +17,10 @@ test('renders as expected', () => { const instance = createTestInstance(); expect(instance.toJSON()).toMatchSnapshot(); }); + +test('disables all child radios when disable prop is truthy', () => { + const instance = createTestInstance( + + ); + expect(instance.toJSON()).toMatchSnapshot(); +}); diff --git a/packages/venia-ui/lib/components/RadioGroup/radioGroup.js b/packages/venia-ui/lib/components/RadioGroup/radioGroup.js index fd9ba4be66..132efd57f1 100644 --- a/packages/venia-ui/lib/components/RadioGroup/radioGroup.js +++ b/packages/venia-ui/lib/components/RadioGroup/radioGroup.js @@ -1,5 +1,5 @@ import React, { Fragment } from 'react'; -import { arrayOf, oneOfType, node, shape, string } from 'prop-types'; +import { arrayOf, bool, node, oneOfType, shape, string } from 'prop-types'; import { BasicRadioGroup, asField } from 'informed'; import { mergeClasses } from '../../classify'; @@ -8,12 +8,20 @@ import Radio from './radio'; import defaultClasses from './radioGroup.css'; const RadioGroup = props => { - const { classes: propClasses, fieldState, items, message, ...rest } = props; + const { + classes: propClasses, + disabled, + fieldState, + items, + message, + ...rest + } = props; const classes = mergeClasses(defaultClasses, propClasses); const options = items.map(({ value, ...item }) => ( Date: Tue, 26 May 2020 13:07:23 -0500 Subject: [PATCH 3/3] [PWA-595] GraphQL Build Warning (#2421) * Rename checkout fragments and restructure Cart operations * Rename cart fragments Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com> --- .../ShippingMethods/shippingForm.js | 8 ++++---- .../ShippingMethods/shippingMethods.gql.js | 20 +++++++++++++++++++ .../ShippingMethods/shippingMethods.js | 19 ++---------------- ...nts.js => shippingMethodsFragments.gql.js} | 20 +++++++++---------- .../ShippingMethods/shippingRadios.js | 6 +++--- .../CartPage/ProductListing/product.js | 10 +++++----- .../EditForm/editForm.gql.js | 6 +++--- .../ShippingMethod/shippingMethod.gql.js | 16 +++++++-------- .../shippingMethodFragments.gql.js | 20 +++++++++---------- 9 files changed, 65 insertions(+), 60 deletions(-) create mode 100644 packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.gql.js rename packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/{shippingMethodsFragments.js => shippingMethodsFragments.gql.js} (67%) diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.js index 6a483f5d59..3b98e12cbe 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.js +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingForm.js @@ -14,8 +14,8 @@ import Region from '../../../Region'; import TextInput from '../../../TextInput'; import { CartPageFragment } from '../../cartPageFragments.gql'; import defaultClasses from './shippingForm.css'; -import { GET_SHIPPING_METHODS } from './shippingMethods'; -import { ShippingMethodsFragment } from './shippingMethodsFragments'; +import { GET_SHIPPING_METHODS } from './shippingMethods.gql'; +import { ShippingMethodsCartFragment } from './shippingMethodsFragments.gql'; const ShippingForm = props => { const { hasMethods, selectedShippingFields, setIsCartUpdating } = props; @@ -99,12 +99,12 @@ export const SET_SHIPPING_ADDRESS_MUTATION = gql` cart { id ...CartPageFragment - ...ShippingMethodsFragment + ...ShippingMethodsCartFragment ...ShippingInformationFragment } } } ${CartPageFragment} - ${ShippingMethodsFragment} + ${ShippingMethodsCartFragment} ${ShippingInformationFragment} `; diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.gql.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.gql.js new file mode 100644 index 0000000000..23b360f440 --- /dev/null +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.gql.js @@ -0,0 +1,20 @@ +import gql from 'graphql-tag'; + +import { ShippingMethodsCartFragment } from './shippingMethodsFragments.gql'; + +export const GET_SHIPPING_METHODS = gql` + query GetShippingMethods($cartId: String!) { + cart(cart_id: $cartId) @connection(key: "Cart") { + id + ...ShippingMethodsCartFragment + } + } + ${ShippingMethodsCartFragment} +`; + +export default { + mutations: {}, + queries: { + getShippingMethodsQuery: GET_SHIPPING_METHODS + } +}; diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.js index 6a799de2c9..ea3d2575c3 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.js +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethods.js @@ -1,5 +1,4 @@ import React, { Fragment } from 'react'; -import gql from 'graphql-tag'; import { Form } from 'informed'; import { useShippingMethods } from '@magento/peregrine/lib/talons/CartPage/PriceAdjustments/ShippingMethods/useShippingMethods'; @@ -7,7 +6,7 @@ import { mergeClasses } from '../../../../classify'; import Button from '../../../Button'; import ShippingForm from './shippingForm'; import defaultClasses from './shippingMethods.css'; -import { ShippingMethodsFragment } from './shippingMethodsFragments'; +import ShippingMethodsOperations from './shippingMethods.gql'; import ShippingRadios from './shippingRadios'; const ShippingMethods = props => { @@ -19,11 +18,7 @@ const ShippingMethods = props => { selectedShippingMethod, shippingMethods, showForm - } = useShippingMethods({ - queries: { - getShippingMethodsQuery: GET_SHIPPING_METHODS - } - }); + } = useShippingMethods({ ...ShippingMethodsOperations }); const classes = mergeClasses(defaultClasses, props.classes); @@ -74,13 +69,3 @@ const ShippingMethods = props => { }; export default ShippingMethods; - -export const GET_SHIPPING_METHODS = gql` - query GetShippingMethods($cartId: String!) { - cart(cart_id: $cartId) @connection(key: "Cart") { - id - ...ShippingMethodsFragment - } - } - ${ShippingMethodsFragment} -`; diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.gql.js similarity index 67% rename from packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.js rename to packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.gql.js index 8f3fce63e8..e4ae734b3f 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.js +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingMethodsFragments.gql.js @@ -6,8 +6,8 @@ import gql from 'graphql-tag'; * It is intentionally not included in the CartPageFragment. Make sure you are * conscious about the side effects when including it in queries and mutations. */ -export const AvailableShippingMethodsFragment = gql` - fragment AvailableShippingMethodsFragment on Cart { +export const AvailableShippingMethodsCartFragment = gql` + fragment AvailableShippingMethodsCartFragment on Cart { id shipping_addresses { available_shipping_methods { @@ -25,8 +25,8 @@ export const AvailableShippingMethodsFragment = gql` } `; -export const SelectedShippingMethodFragment = gql` - fragment SelectedShippingMethodFragment on Cart { +export const SelectedShippingMethodCartFragment = gql` + fragment SelectedShippingMethodCartFragment on Cart { id shipping_addresses { selected_shipping_method { @@ -37,11 +37,11 @@ export const SelectedShippingMethodFragment = gql` } `; -export const ShippingMethodsFragment = gql` - fragment ShippingMethodsFragment on Cart { +export const ShippingMethodsCartFragment = gql` + fragment ShippingMethodsCartFragment on Cart { id - ...AvailableShippingMethodsFragment - ...SelectedShippingMethodFragment + ...AvailableShippingMethodsCartFragment + ...SelectedShippingMethodCartFragment shipping_addresses { country { code @@ -52,6 +52,6 @@ export const ShippingMethodsFragment = gql` } } } - ${AvailableShippingMethodsFragment} - ${SelectedShippingMethodFragment} + ${AvailableShippingMethodsCartFragment} + ${SelectedShippingMethodCartFragment} `; diff --git a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadios.js b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadios.js index 381531de44..e4f8041286 100644 --- a/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadios.js +++ b/packages/venia-ui/lib/components/CartPage/PriceAdjustments/ShippingMethods/shippingRadios.js @@ -8,7 +8,7 @@ import RadioGroup from '../../../RadioGroup'; import { CartPageFragment } from '../../cartPageFragments.gql'; import ShippingRadio from './shippingRadio'; import defaultClasses from './shippingRadios.css'; -import { SelectedShippingMethodFragment } from './shippingMethodsFragments'; +import { SelectedShippingMethodCartFragment } from './shippingMethodsFragments.gql'; const ShippingRadios = props => { const { @@ -70,7 +70,7 @@ export const SET_SHIPPING_METHOD_MUTATION = gql` cart { id ...CartPageFragment - ...SelectedShippingMethodFragment + ...SelectedShippingMethodCartFragment # Intentionally do not re-fetch available methods because # a) they are wrong in the mutation response # b) it is expensive to recalculate. @@ -78,7 +78,7 @@ export const SET_SHIPPING_METHOD_MUTATION = gql` } } ${CartPageFragment} - ${SelectedShippingMethodFragment} + ${SelectedShippingMethodCartFragment} `; ShippingRadios.propTypes = { diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/product.js b/packages/venia-ui/lib/components/CartPage/ProductListing/product.js index bd1e36d6ff..e2cc114b0c 100644 --- a/packages/venia-ui/lib/components/CartPage/ProductListing/product.js +++ b/packages/venia-ui/lib/components/CartPage/ProductListing/product.js @@ -13,7 +13,7 @@ import Icon from '../../Icon'; import Image from '../../Image'; import defaultClasses from './product.css'; import { CartPageFragment } from '../cartPageFragments.gql'; -import { AvailableShippingMethodsFragment } from '../PriceAdjustments/ShippingMethods/shippingMethodsFragments'; +import { AvailableShippingMethodsCartFragment } from '../PriceAdjustments/ShippingMethods/shippingMethodsFragments.gql'; const IMAGE_SIZE = 100; const errorIcon = ; @@ -129,12 +129,12 @@ export const REMOVE_ITEM_MUTATION = gql` cart { id ...CartPageFragment - ...AvailableShippingMethodsFragment + ...AvailableShippingMethodsCartFragment } } } ${CartPageFragment} - ${AvailableShippingMethodsFragment} + ${AvailableShippingMethodsCartFragment} `; export const UPDATE_QUANTITY_MUTATION = gql` @@ -152,10 +152,10 @@ export const UPDATE_QUANTITY_MUTATION = gql` cart { id ...CartPageFragment - ...AvailableShippingMethodsFragment + ...AvailableShippingMethodsCartFragment } } } ${CartPageFragment} - ${AvailableShippingMethodsFragment} + ${AvailableShippingMethodsCartFragment} `; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/EditForm/editForm.gql.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/EditForm/editForm.gql.js index ba6f625aae..79c5183202 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/EditForm/editForm.gql.js +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/EditForm/editForm.gql.js @@ -1,7 +1,7 @@ import gql from 'graphql-tag'; import { ShippingInformationFragment } from '../shippingInformationFragments.gql'; -import { ShippingMethodsFragment } from '../../ShippingMethod/shippingMethodFragments.gql'; +import { ShippingMethodsCheckoutFragment } from '../../ShippingMethod/shippingMethodFragments.gql'; export const SET_SHIPPING_INFORMATION_MUTATION = gql` mutation SetShippingInformation( @@ -25,12 +25,12 @@ export const SET_SHIPPING_INFORMATION_MUTATION = gql` cart { id ...ShippingInformationFragment - ...ShippingMethodsFragment + ...ShippingMethodsCheckoutFragment } } } ${ShippingInformationFragment} - ${ShippingMethodsFragment} + ${ShippingMethodsCheckoutFragment} `; export default { diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.gql.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.gql.js index bb40cde5ba..c7bd235851 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.gql.js +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethod.gql.js @@ -3,20 +3,20 @@ import gql from 'graphql-tag'; import { PriceSummaryFragment } from '@magento/venia-ui/lib/components/CartPage/PriceSummary/priceSummaryFragments'; import { - AvailableShippingMethodsFragment, - SelectedShippingMethodFragment + AvailableShippingMethodsCheckoutFragment, + SelectedShippingMethodCheckoutFragment } from './shippingMethodFragments.gql'; export const GET_SELECTED_AND_AVAILABLE_SHIPPING_METHODS = gql` query getSelectedAndAvailableShippingMethods($cartId: String!) { cart(cart_id: $cartId) @connection(key: "Cart") { id - ...AvailableShippingMethodsFragment - ...SelectedShippingMethodFragment + ...AvailableShippingMethodsCheckoutFragment + ...SelectedShippingMethodCheckoutFragment } } - ${AvailableShippingMethodsFragment} - ${SelectedShippingMethodFragment} + ${AvailableShippingMethodsCheckoutFragment} + ${SelectedShippingMethodCheckoutFragment} `; export const SET_SHIPPING_METHOD = gql` @@ -29,7 +29,7 @@ export const SET_SHIPPING_METHOD = gql` ) @connection(key: "setShippingMethodsOnCart") { cart { id - ...SelectedShippingMethodFragment + ...SelectedShippingMethodCheckoutFragment ...PriceSummaryFragment # Intentionally do not re-fetch available methods because # a) they are wrong in the mutation response @@ -37,7 +37,7 @@ export const SET_SHIPPING_METHOD = gql` } } } - ${SelectedShippingMethodFragment} + ${SelectedShippingMethodCheckoutFragment} ${PriceSummaryFragment} `; diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethodFragments.gql.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethodFragments.gql.js index 5e63ea293f..c0c93127da 100644 --- a/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethodFragments.gql.js +++ b/packages/venia-ui/lib/components/CheckoutPage/ShippingMethod/shippingMethodFragments.gql.js @@ -5,8 +5,8 @@ import gql from 'graphql-tag'; * causes the backend to make remote queries to carriers for real-time data. * Make sure you are conscious about the side effects when including it in queries and mutations. */ -export const AvailableShippingMethodsFragment = gql` - fragment AvailableShippingMethodsFragment on Cart { +export const AvailableShippingMethodsCheckoutFragment = gql` + fragment AvailableShippingMethodsCheckoutFragment on Cart { id shipping_addresses { available_shipping_methods { @@ -24,8 +24,8 @@ export const AvailableShippingMethodsFragment = gql` } `; -export const SelectedShippingMethodFragment = gql` - fragment SelectedShippingMethodFragment on Cart { +export const SelectedShippingMethodCheckoutFragment = gql` + fragment SelectedShippingMethodCheckoutFragment on Cart { id shipping_addresses { selected_shipping_method { @@ -41,11 +41,11 @@ export const SelectedShippingMethodFragment = gql` } `; -export const ShippingMethodsFragment = gql` - fragment ShippingMethodsFragment on Cart { +export const ShippingMethodsCheckoutFragment = gql` + fragment ShippingMethodsCheckoutFragment on Cart { id - ...AvailableShippingMethodsFragment - ...SelectedShippingMethodFragment + ...AvailableShippingMethodsCheckoutFragment + ...SelectedShippingMethodCheckoutFragment shipping_addresses { country { code @@ -56,6 +56,6 @@ export const ShippingMethodsFragment = gql` } } } - ${AvailableShippingMethodsFragment} - ${SelectedShippingMethodFragment} + ${AvailableShippingMethodsCheckoutFragment} + ${SelectedShippingMethodCheckoutFragment} `;