@magento/venia-ui 8.0.0-alpha.6 → 9.0.0-alpha.3

package/lib/components/CheckoutPage/OrderConfirmationPage/{createAccount.css → createAccount.module.css}

@@ -15,7 +15,7 @@
 }
 
 .create_account_button {
-    composes: root_normalPriority from '../../Button/button.css';
+    composes: root_normalPriority from '../../Button/button.module.css';
 }
 
 /*

package/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js

@@ -7,7 +7,7 @@ import { useStyle } from '../../../classify';
 import { StoreTitle } from '../../../components/Head';
 import CreateAccount from './createAccount';
 import ItemsReview from '../ItemsReview';
-import defaultClasses from './orderConfirmationPage.css';
+import defaultClasses from './orderConfirmationPage.module.css';
 
 const OrderConfirmationPage = props => {
     const classes = useStyle(defaultClasses, props.classes);

package/lib/components/CheckoutPage/OrderSummary/orderSummary.js

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
 import PriceSummary from '../../CartPage/PriceSummary';
 import { useStyle } from '../../../classify';
 
-import defaultClasses from './orderSummary.css';
+import defaultClasses from './orderSummary.module.css';
 
 const OrderSummary = props => {
     const classes = useStyle(defaultClasses, props.classes);

package/lib/components/CheckoutPage/PaymentInformation/__tests__/__snapshots__/braintreeSummary.spec.js.snap

@@ -18,6 +18,17 @@ exports[`Should not render billing address if it is same as shipping address 1`]
     <button
       className="edit_button"
       disabled={false}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -126,6 +137,17 @@ exports[`Should render billing address if it is not same as shipping address 1`]
     <button
       className="edit_button"
       disabled={false}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -250,6 +272,17 @@ exports[`should render 1`] = `
     <button
       className="edit_button"
       disabled={false}
+      onDragStart={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      onMouseUp={[Function]}
+      onTouchCancel={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
+      onTouchStart={[Function]}
       type="button"
     >
       <span

package/lib/components/CheckoutPage/PaymentInformation/__tests__/__snapshots__/paymentInformation.spec.js.snap

@@ -39,6 +39,86 @@ exports[`Should render PaymentMethods component only if doneEditing is false 1`]
 </div>
 `;
 
+exports[`Should render loading state 1`] = `
+<div
+  className="root"
+>
+  <span
+    className="root"
+  >
+    <svg
+      className="icon"
+      fill="none"
+      height={64}
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width={64}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <line
+        x1="12"
+        x2="12"
+        y1="2"
+        y2="6"
+      />
+      <line
+        x1="12"
+        x2="12"
+        y1="18"
+        y2="22"
+      />
+      <line
+        x1="4.93"
+        x2="7.76"
+        y1="4.93"
+        y2="7.76"
+      />
+      <line
+        x1="16.24"
+        x2="19.07"
+        y1="16.24"
+        y2="19.07"
+      />
+      <line
+        x1="2"
+        x2="6"
+        y1="12"
+        y2="12"
+      />
+      <line
+        x1="18"
+        x2="22"
+        y1="12"
+        y2="12"
+      />
+      <line
+        x1="4.93"
+        x2="7.76"
+        y1="19.07"
+        y2="16.24"
+      />
+      <line
+        x1="16.24"
+        x2="19.07"
+        y1="7.76"
+        y2="4.93"
+      />
+    </svg>
+  </span>
+  <span
+    className="message"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Fetching Payment Information"
+      id="checkoutPage.loadingPaymentInformation"
+    />
+  </span>
+</div>
+`;
+
 exports[`Should render summary component only if doneEditing is true 1`] = `
 <div
   className="root"

package/lib/components/CheckoutPage/PaymentInformation/__tests__/braintreeSummary.spec.js

@@ -2,7 +2,7 @@ import React from 'react';
 import createTestInstance from '@magento/peregrine/lib/util/createTestInstance';
 jest.mock('../../../../classify');
 
-import classes from '../braintreeSummary.css';
+import classes from '../braintreeSummary.module.css';
 import { useBraintreeSummary } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/useBraintreeSummary';
 import BraintreeSummary from '../braintreeSummary';
 

package/lib/components/CheckoutPage/PaymentInformation/__tests__/creditCard.spec.js

@@ -6,7 +6,7 @@ import CreditCard from '../creditCard';
 import LoadingIndicator from '../../../LoadingIndicator';
 import Country from '../../../Country';
 
-import classes from '../creditCard.css';
+import classes from '../creditCard.module.css';
 
 jest.mock('../../../../classify');
 

package/lib/components/CheckoutPage/PaymentInformation/__tests__/paymentInformation.spec.js

@@ -51,6 +51,16 @@ const defaultProps = {
     shouldSubmit: false
 };
 
+test('Should render loading state', () => {
+    usePaymentInformation.mockReturnValueOnce({
+        ...defaultTalonResponse,
+        isLoading: true
+    });
+
+    const tree = createTestInstance(<PaymentInformation {...defaultProps} />);
+    expect(tree.toJSON()).toMatchSnapshot();
+});
+
 test('Should render summary component only if doneEditing is true', () => {
     usePaymentInformation.mockReturnValueOnce({
         ...defaultTalonResponse,

package/lib/components/CheckoutPage/PaymentInformation/brainTreeDropIn.js

@@ -14,7 +14,7 @@ import React, { useEffect, useState, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { bool, func, shape, string } from 'prop-types';
 
-import defaultClasses from './braintreeDropin.css';
+import defaultClasses from './braintreeDropin.module.css';
 import { useStyle } from '../../../classify';
 
 const authorization = process.env.CHECKOUT_BRAINTREE_TOKEN;

package/lib/components/CheckoutPage/PaymentInformation/braintreeSummary.js

@@ -5,9 +5,10 @@ import { shape, string, func, bool } from 'prop-types';
 import { Edit2 as EditIcon } from 'react-feather';
 import Icon from '../../Icon';
 import LinkButton from '../../LinkButton';
+import LoadingIndicator from '../../LoadingIndicator';
 
 import { useBraintreeSummary } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/useBraintreeSummary';
-import defaultClasses from './braintreeSummary.css';
+import defaultClasses from './braintreeSummary.module.css';
 
 const BraintreeSummary = props => {
     const { classes: propClasses, onEdit } = props;
@@ -33,16 +34,18 @@ const BraintreeSummary = props => {
         );
     }
 
-    const paymentSummary = formatMessage(
-        {
-            id: 'checkoutPage.paymentSummary',
-            defaultMessage: 'Card'
-        },
-        {
-            cardType: paymentNonce.details.cardType,
-            lastFour: paymentNonce.details.lastFour
-        }
-    );
+    const paymentSummary =
+        paymentNonce &&
+        formatMessage(
+            {
+                id: 'checkoutPage.paymentSummary',
+                defaultMessage: 'Card'
+            },
+            {
+                cardType: paymentNonce.details.cardType,
+                lastFour: paymentNonce.details.lastFour
+            }
+        );
 
     const billingAddressSummary =
         !isBillingAddressSame && billingAddress ? (

package/lib/components/CheckoutPage/PaymentInformation/{braintreeSummary.css → braintreeSummary.module.css}

@@ -5,7 +5,7 @@
 }
 
 .loading {
-    composes: root from '../../LoadingIndicator/indicator.css';
+    composes: root from '../../LoadingIndicator/indicator.module.css';
     text-align: center;
 }
 

package/lib/components/CheckoutPage/PaymentInformation/creditCard.js

@@ -14,7 +14,7 @@ import BrainTreeDropin from './brainTreeDropIn';
 import LoadingIndicator from '../../LoadingIndicator';
 import { useStyle } from '../../../classify';
 
-import defaultClasses from './creditCard.css';
+import defaultClasses from './creditCard.module.css';
 import FormError from '../../FormError';
 
 const STEP_DESCRIPTIONS = [

package/lib/components/CheckoutPage/PaymentInformation/editCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shape, string, bool, func } from 'prop-types';
-import defaultClasses from './editCard.css';
+import defaultClasses from './editCard.module.css';
 import { useStyle } from '../../../classify';
 import CreditCard from './creditCard';
 

package/lib/components/CheckoutPage/PaymentInformation/editModal.js

@@ -4,14 +4,13 @@ import { bool, func } from 'prop-types';
 
 import { useEditModal } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/useEditModal';
 import Dialog from '../../Dialog';
-import editModalOperations from './editModal.gql';
 import editablePayments from './editablePaymentCollection';
 
 const EditModal = props => {
     const { onClose, isOpen } = props;
     const { formatMessage } = useIntl();
 
-    const talonProps = useEditModal({ onClose, ...editModalOperations });
+    const talonProps = useEditModal({ onClose });
 
     const {
         selectedPaymentMethod,

package/lib/components/CheckoutPage/PaymentInformation/paymentInformation.js

@@ -7,8 +7,7 @@ import { usePaymentInformation } from '@magento/peregrine/lib/talons/CheckoutPag
 import CheckoutError from '@magento/peregrine/lib/talons/CheckoutPage/CheckoutError';
 
 import { useStyle } from '../../../classify';
-import paymentInformationOperations from './paymentInformation.gql';
-import defaultClasses from './paymentInformation.css';
+import defaultClasses from './paymentInformation.module.css';
 import LoadingIndicator from '../../LoadingIndicator';
 
 const PaymentMethods = React.lazy(() => import('./paymentMethods'));
@@ -32,8 +31,7 @@ const PaymentInformation = props => {
         checkoutError,
         resetShouldSubmit,
         setCheckoutStep,
-        shouldSubmit,
-        ...paymentInformationOperations
+        shouldSubmit
     });
 
     const {

package/lib/components/CheckoutPage/PaymentInformation/{paymentInformation.css → paymentInformation.module.css}

@@ -10,7 +10,7 @@
 }
 
 .loading {
-    composes: root from '../../LoadingIndicator/indicator.css';
+    composes: root from '../../LoadingIndicator/indicator.module.css';
     text-align: center;
 }
 

package/lib/components/CheckoutPage/PaymentInformation/paymentMethods.js

@@ -7,8 +7,7 @@ import { usePaymentMethods } from '@magento/peregrine/lib/talons/CheckoutPage/Pa
 import { useStyle } from '../../../classify';
 import RadioGroup from '@magento/venia-ui/lib/components/RadioGroup';
 import Radio from '@magento/venia-ui/lib/components/RadioGroup/radio';
-import paymentMethodOperations from './paymentMethods.gql';
-import defaultClasses from './paymentMethods.css';
+import defaultClasses from './paymentMethods.module.css';
 import payments from './paymentMethodCollection';
 
 const PaymentMethods = props => {
@@ -24,9 +23,7 @@ const PaymentMethods = props => {
 
     const classes = useStyle(defaultClasses, propClasses);
 
-    const talonProps = usePaymentMethods({
-        ...paymentMethodOperations
-    });
+    const talonProps = usePaymentMethods({});
 
     const {
         availablePaymentMethods,

package/lib/components/CheckoutPage/PaymentInformation/summary.js

@@ -5,7 +5,7 @@ import { shape, string, func } from 'prop-types';
 import { useSummary } from '@magento/peregrine/lib/talons/CheckoutPage/PaymentInformation/useSummary';
 import { useStyle } from '../../../classify';
 
-import defaultClasses from './summary.css';
+import defaultClasses from './summary.module.css';
 import LoadingIndicator from '../../LoadingIndicator';
 import summaryPayments from './summaryPaymentCollection';
 

package/lib/components/CheckoutPage/PriceAdjustments/priceAdjustments.js

@@ -8,7 +8,7 @@ import CouponCode from '../../CartPage/PriceAdjustments/CouponCode';
 import GiftCardSection from '../../CartPage/PriceAdjustments/giftCardSection';
 import GiftOptions from '../../CartPage/PriceAdjustments/GiftOptions';
 
-import defaultClasses from './priceAdjustments.css';
+import defaultClasses from './priceAdjustments.module.css';
 
 /**
  * PriceAdjustments component for the Checkout page.

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap

@@ -455,13 +455,13 @@ Array [
         >
           <svg
             fill="none"
-            height="24"
+            height={24}
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="2"
             viewBox="0 0 24 24"
-            width="24"
+            width={24}
             xmlns="http://www.w3.org/2000/svg"
           >
             <rect
@@ -491,6 +491,17 @@ Array [
         className="root_lowPriority"
         disabled={true}
         onClick={[MockFunction handleCancel]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="button"
       >
         <span
@@ -505,6 +516,18 @@ Array [
       <button
         className="root_highPriority"
         disabled={true}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="submit"
       >
         <span
@@ -893,13 +916,13 @@ Array [
         >
           <svg
             fill="none"
-            height="24"
+            height={24}
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
             strokeWidth="2"
             viewBox="0 0 24 24"
-            width="24"
+            width={24}
             xmlns="http://www.w3.org/2000/svg"
           >
             <polyline
@@ -927,6 +950,17 @@ Array [
         className="root_lowPriority"
         disabled={false}
         onClick={[MockFunction handleCancel]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="button"
       >
         <span
@@ -941,6 +975,18 @@ Array [
       <button
         className="root_highPriority"
         disabled={false}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="submit"
       >
         <span
@@ -1383,6 +1429,18 @@ Array [
       <button
         className="root_normalPriority"
         disabled={false}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="submit"
       >
         <span

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap

@@ -410,6 +410,18 @@ Array [
       <button
         className="root_normalPriority"
         disabled={false}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="submit"
       >
         <span
@@ -837,6 +849,18 @@ Array [
       <button
         className="root_normalPriority"
         disabled={false}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="submit"
       >
         <span
@@ -1253,6 +1277,17 @@ Array [
         className="root_lowPriority"
         disabled={true}
         onClick={[MockFunction handleCancel]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="button"
       >
         <span
@@ -1267,6 +1302,18 @@ Array [
       <button
         className="root_highPriority"
         disabled={true}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="submit"
       >
         <span
@@ -1683,6 +1730,17 @@ Array [
         className="root_lowPriority"
         disabled={false}
         onClick={[MockFunction handleCancel]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="button"
       >
         <span
@@ -1697,6 +1755,18 @@ Array [
       <button
         className="root_highPriority"
         disabled={false}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
         type="submit"
       >
         <span

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js

@@ -14,8 +14,7 @@ import FormError from '../../../FormError';
 import Region from '../../../Region';
 import Postcode from '../../../Postcode';
 import TextInput from '../../../TextInput';
-import defaultClasses from './customerForm.css';
-import CustomerFormOperations from './customerForm.gql';
+import defaultClasses from './customerForm.module.css';
 import LoadingIndicator from '../../../LoadingIndicator';
 
 const CustomerForm = props => {
@@ -29,7 +28,6 @@ const CustomerForm = props => {
 
     const talonProps = useCustomerForm({
         afterSubmit,
-        ...CustomerFormOperations,
         onCancel,
         onSuccess,
         shippingData