Move addToCart to onSubmit handler so mutation receives up to date va…

…lues
magento · Sep 30, 2020 · df0141a · df0141a
1 parent c2408d7
commit df0141a
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 90 deletions.
diff --git a/packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js b/packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js
@@ -9,7 +9,6 @@ import { deriveErrorMessage } from '../../util/deriveErrorMessage';
 
 const INITIAL_OPTION_CODES = new Map();
 const INITIAL_OPTION_SELECTIONS = new Map();
-const INITIAL_QUANTITY = 1;
 
 const deriveOptionCodesFromProduct = product => {
     // If this is a simple product it has no option codes.
@@ -193,8 +192,6 @@ export const useProductFullDetail = props => {
         { error: errorAddingSimpleProduct, loading: isAddSimpleLoading }
     ] = useMutation(addSimpleProductToCartMutation);
 
-    const [quantity, setQuantity] = useState(INITIAL_QUANTITY);
-
     const breadcrumbCategoryId = useMemo(
         () => getBreadcrumbCategoryId(product.categories),
         [product.categories]
@@ -224,57 +221,60 @@ export const useProductFullDetail = props => {
         [product, optionCodes, optionSelections]
     );
 
-    const handleAddToCart = useCallback(async () => {
-        const payload = {
-            item: product,
-            productType,
-            quantity
-        };
+    const handleAddToCart = useCallback(
+        async formValues => {
+            const { quantity } = formValues;
+            const payload = {
+                item: product,
+                productType,
+                quantity
+            };
 
-        if (isProductConfigurable(product)) {
-            appendOptionsToPayload(payload, optionSelections, optionCodes);
-        }
+            if (isProductConfigurable(product)) {
+                appendOptionsToPayload(payload, optionSelections, optionCodes);
+            }
 
-        if (isSupportedProductType) {
-            const variables = {
-                cartId,
-                parentSku: payload.parentSku,
-                product: payload.item,
-                quantity: payload.quantity,
-                sku: payload.item.sku
-            };
-            // Use the proper mutation for the type.
-            if (productType === 'SimpleProduct') {
-                try {
-                    await addSimpleProductToCart({
-                        variables
-                    });
-                } catch {
-                    return;
-                }
-            } else if (productType === 'ConfigurableProduct') {
-                try {
-                    await addConfigurableProductToCart({
-                        variables
-                    });
-                } catch {
-                    return;
+            if (isSupportedProductType) {
+                const variables = {
+                    cartId,
+                    parentSku: payload.parentSku,
+                    product: payload.item,
+                    quantity: payload.quantity,
+                    sku: payload.item.sku
+                };
+                // Use the proper mutation for the type.
+                if (productType === 'SimpleProduct') {
+                    try {
+                        await addSimpleProductToCart({
+                            variables
+                        });
+                    } catch {
+                        return;
+                    }
+                } else if (productType === 'ConfigurableProduct') {
+                    try {
+                        await addConfigurableProductToCart({
+                            variables
+                        });
+                    } catch {
+                        return;
+                    }
                 }
+            } else {
+                console.error('Unsupported product type. Cannot add to cart.');
             }
-        } else {
-            console.error('Unsupported product type. Cannot add to cart.');
-        }
-    }, [
-        addConfigurableProductToCart,
-        addSimpleProductToCart,
-        cartId,
-        isSupportedProductType,
-        optionCodes,
-        optionSelections,
-        product,
-        productType,
-        quantity
-    ]);
+        },
+        [
+            addConfigurableProductToCart,
+            addSimpleProductToCart,
+            cartId,
+            isSupportedProductType,
+            optionCodes,
+            optionSelections,
+            product,
+            productType
+        ]
+    );
 
     const handleSelectionChange = useCallback(
         (optionId, selection) => {
@@ -287,13 +287,6 @@ export const useProductFullDetail = props => {
         [optionSelections]
     );
 
-    const handleSetQuantity = useCallback(
-        value => {
-            setQuantity(value);
-        },
-        [setQuantity]
-    );
-
     const productPrice = useMemo(
         () => getConfigPrice(product, optionCodes, optionSelections),
         [product, optionCodes, optionSelections]
@@ -321,14 +314,12 @@ export const useProductFullDetail = props => {
         errorMessage: derivedErrorMessage,
         handleAddToCart,
         handleSelectionChange,
-        handleSetQuantity,
         isAddToCartDisabled:
             !isSupportedProductType ||
             isMissingOptions ||
             isAddConfigurableLoading ||
             isAddSimpleLoading,
         mediaGalleryEntries,
-        productDetails,
-        quantity
+        productDetails
     };
 };
diff --git a/...i/lib/components/ProductFullDetail/__tests__/__snapshots__/productFullDetail.spec.js.snap b/...i/lib/components/ProductFullDetail/__tests__/__snapshots__/productFullDetail.spec.js.snap
@@ -57,8 +57,7 @@ exports[`it disables the add to cart button when the talon indicates 1`] = `
     <button
       className="root_highPriority"
       disabled={true}
-      onClick={[MockFunction]}
-      type="button"
+      type="submit"
     >
       <span
         className="content"
@@ -149,8 +148,7 @@ exports[`it does not render options if the product is not a ConfigurableProduct
     <button
       className="root_highPriority"
       disabled={false}
-      onClick={[MockFunction]}
-      type="button"
+      type="submit"
     >
       <span
         className="content"
@@ -247,8 +245,7 @@ exports[`it renders an error for an invalid user token when adding to cart 1`] =
     <button
       className="root_highPriority"
       disabled={false}
-      onClick={[MockFunction]}
-      type="button"
+      type="submit"
     >
       <span
         className="content"
@@ -346,8 +343,7 @@ Array [
       <button
         className="root_highPriority"
         disabled={false}
-        onClick={[MockFunction]}
-        type="button"
+        type="submit"
       >
         <span
           className="content"
@@ -514,8 +510,7 @@ exports[`it renders correctly 1`] = `
     <button
       className="root_highPriority"
       disabled={false}
-      onClick={[MockFunction]}
-      type="button"
+      type="submit"
     >
       <span
         className="content"
@@ -608,8 +603,7 @@ exports[`it renders field level errors for quantity - message 1 1`] = `
     <button
       className="root_highPriority"
       disabled={false}
-      onClick={[MockFunction]}
-      type="button"
+      type="submit"
     >
       <span
         className="content"
@@ -702,8 +696,7 @@ exports[`it renders field level errors for quantity - message 2 1`] = `
     <button
       className="root_highPriority"
       disabled={false}
-      onClick={[MockFunction]}
-      type="button"
+      type="submit"
     >
       <span
         className="content"
@@ -796,8 +789,7 @@ exports[`it renders field level errors for quantity - message 3 1`] = `
     <button
       className="root_highPriority"
       disabled={false}
-      onClick={[MockFunction]}
-      type="button"
+      type="submit"
     >
       <span
         className="content"
@@ -894,8 +886,7 @@ exports[`it renders form level errors 1`] = `
     <button
       className="root_highPriority"
       disabled={false}
-      onClick={[MockFunction]}
-      type="button"
+      type="submit"
     >
       <span
         className="content"

diff --git a/packages/venia-ui/lib/components/ProductFullDetail/__tests__/productFullDetail.spec.js b/packages/venia-ui/lib/components/ProductFullDetail/__tests__/productFullDetail.spec.js
@@ -141,14 +141,12 @@ const mockSimpleProduct = {
 };
 const mockHandleAddToCart = jest.fn();
 const mockHandleSelectionChange = jest.fn();
-const mockHandleSetQuantity = jest.fn();
 
 const talonProps = {
     breadcrumbCategoryId: undefined,
     errorMessage: null,
     handleAddToCart: mockHandleAddToCart,
     handleSelectionChange: mockHandleSelectionChange,
-    handleSetQuantity: mockHandleSetQuantity,
     isAddToCartDisabled: false,
     mediaGalleryEntries: [],
     productDetails: {
@@ -159,8 +157,7 @@ const talonProps = {
             currency: 'USD',
             value: '3.50'
         }
-    },
-    quantity: 1
+    }
 };
 
 test('it renders correctly', () => {

diff --git a/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.js b/packages/venia-ui/lib/components/ProductFullDetail/productFullDetail.js
@@ -51,11 +51,9 @@ const ProductFullDetail = props => {
         errorMessage,
         handleAddToCart,
         handleSelectionChange,
-        handleSetQuantity,
         isAddToCartDisabled,
         mediaGalleryEntries,
-        productDetails,
-        quantity
+        productDetails
     } = talonProps;
 
     const classes = mergeClasses(defaultClasses, props.classes);
@@ -121,7 +119,7 @@ const ProductFullDetail = props => {
     return (
         <Fragment>
             {breadcrumbs}
-            <Form className={classes.root}>
+            <Form className={classes.root} onSubmit={handleAddToCart}>
                 <section className={classes.title}>
                     <h1 className={classes.productName}>
                         {productDetails.name}
@@ -147,17 +145,15 @@ const ProductFullDetail = props => {
                     <h2 className={classes.quantityTitle}>Quantity</h2>
                     <QuantityFields
                         classes={{ root: classes.quantityRoot }}
-                        initialValue={quantity}
-                        onChange={handleSetQuantity}
                         min={1}
                         message={errors.get('quantity')}
                     />
                 </section>
                 <section className={classes.cartActions}>
                     <Button
-                        priority="high"
-                        onClick={handleAddToCart}
                         disabled={isAddToCartDisabled}
+                        priority="high"
+                        type="submit"
                     >
                         Add to Cart
                     </Button>