Merge branch 'develop' into BUG#PWA-3161

magento · Oct 4, 2023 · 89869b4 · 89869b4
2 parents 76b73b5 + 44101ef
commit 89869b4
Show file tree

Hide file tree

Showing 23 changed files with 122 additions and 64 deletions.
diff --git a/packages/pagebuilder/lib/ContentTypes/Row/__tests__/row.spec.js b/packages/pagebuilder/lib/ContentTypes/Row/__tests__/row.spec.js
@@ -38,12 +38,7 @@ test('render row with parallax initializes Jarallax', () => {
         }
     });
 
-    expect(mockJarallax).toHaveBeenCalledWith(true, {
-        speed: 0.75,
-        imgPosition: 'center center',
-        imgRepeat: 'repeat',
-        imgSize: 'cover'
-    });
+    expect(mockJarallax).toHaveBeenCalledWith(true, 'destroy');
 });
 
 test('render row with parallax initializes JarallaxVideo', () => {
@@ -99,15 +94,7 @@ test('row unmount causes Jarallax to be destroyed', () => {
     });
 
     expect(mockJarallax.mock.calls).toEqual([
-        [
-            true,
-            {
-                speed: 0.75,
-                imgPosition: 'top left',
-                imgRepeat: 'no-repeat',
-                imgSize: 'contain'
-            }
-        ],
+        [true, 'destroy'],
         [true, 'destroy']
     ]);
 });

diff --git a/packages/pagebuilder/lib/ContentTypes/Row/row.js b/packages/pagebuilder/lib/ContentTypes/Row/row.js
@@ -160,12 +160,7 @@ const Row = props => {
         if (enableParallax && bgImageStyle && backgroundType !== 'video') {
             ({ jarallax } = require('jarallax'));
             parallaxElement = backgroundElement.current;
-            jarallax(parallaxElement, {
-                speed: parallaxSpeed,
-                imgSize: backgroundSize,
-                imgPosition: backgroundPosition,
-                imgRepeat: backgroundRepeat
-            });
+            jarallax(parallaxElement, 'destroy');
         }
 
         if (backgroundType === 'video') {

diff --git a/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress.js b/packages/peregrine/lib/talons/CheckoutPage/BillingAddress/useBillingAddress.js
@@ -178,10 +178,13 @@ export const useBillingAddress = props => {
      * shipping address.
      */
     const setShippingAddressAsBillingAddress = useCallback(() => {
-        const shippingAddress = shippingAddressData
+        var shippingAddress = shippingAddressData
             ? mapAddressData(shippingAddressData.cart.shippingAddresses[0])
             : {};
 
+        shippingAddress.region =
+            shippingAddress.region == null ? '' : shippingAddress.region;
+
         updateBillingAddress({
             variables: {
                 cartId,

diff --git a/...ages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/useCreditCard.spec.js b/...ages/peregrine/lib/talons/CheckoutPage/PaymentInformation/__tests__/useCreditCard.spec.js
@@ -1095,6 +1095,7 @@ describe('missing data', () => {
             Object {
               "variables": Object {
                 "cartId": "123",
+                "region": "",
                 "sameAsShipping": true,
               },
             }

diff --git a/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/useCreditCard.js b/packages/peregrine/lib/talons/CheckoutPage/PaymentInformation/useCreditCard.js
@@ -234,10 +234,13 @@ export const useCreditCard = props => {
      * shipping address.
      */
     const setShippingAddressAsBillingAddress = useCallback(() => {
-        const shippingAddress = shippingAddressData
+        var shippingAddress = shippingAddressData
             ? mapAddressData(shippingAddressData.cart.shippingAddresses[0])
             : {};
 
+        shippingAddress.region =
+            shippingAddress.region == null ? '' : shippingAddress.region;
+
         updateBillingAddress({
             variables: {
                 cartId,

diff --git a/...outPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useGuestForm.spec.js.snap b/...outPage/ShippingInformation/AddressForm/__tests__/__snapshots__/useGuestForm.spec.js.snap
@@ -9,7 +9,11 @@ Object {
       "firstname": "Philip",
       "lastname": "Fry",
       "postcode": "10019",
-      "region": 12,
+      "region": Object {
+        "region": "New York",
+        "region_code": "NY",
+        "region_id": 12,
+      },
       "street": Array [
         "3000 57th Street",
         "Suite 200",
@@ -33,7 +37,11 @@ Object {
       "firstname": "Philip",
       "lastname": "Fry",
       "postcode": "10019",
-      "region": 12,
+      "region": Object {
+        "region": "New York",
+        "region_code": "NY",
+        "region_id": 12,
+      },
       "street": Array [
         "3000 57th Street",
       ],

diff --git a/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js b/packages/peregrine/lib/talons/CheckoutPage/ShippingInformation/AddressForm/useGuestForm.js
@@ -60,7 +60,7 @@ export const useGuestForm = props => {
 
     const handleSubmit = useCallback(
         async formValues => {
-            const { country, email, region, ...address } = formValues;
+            const { country, email, ...address } = formValues;
             try {
                 await setGuestShipping({
                     variables: {
@@ -70,8 +70,6 @@ export const useGuestForm = props => {
                             ...address,
                             // Cleans up the street array when values are null or undefined
                             street: address.street.filter(e => e),
-                            // region_id is used for field select and region is used for field input
-                            region: region.region_id || region.region,
                             country_code: country
                         }
                     }

diff --git a/packages/peregrine/lib/talons/Header/cartTriggerFragments.gql.js b/packages/peregrine/lib/talons/Header/cartTriggerFragments.gql.js
@@ -4,5 +4,6 @@ export const CartTriggerFragment = gql`
     fragment CartTriggerFragment on Cart {
         id
         total_quantity
+        total_summary_quantity_including_config
     }
 `;
diff --git a/packages/peregrine/lib/talons/Header/useCartTrigger.js b/packages/peregrine/lib/talons/Header/useCartTrigger.js
@@ -52,7 +52,7 @@ export const useCartTrigger = props => {
         errorPolicy: 'all'
     });
 
-    const itemCount = data?.cart?.total_quantity || 0;
+    const itemCount = data?.cart?.total_summary_quantity_including_config || 0;
 
     const handleTriggerClick = useCallback(() => {
         // Open the mini cart.

diff --git a/packages/peregrine/lib/talons/ProductFullDetail/productFullDetail.gql.ce.js b/packages/peregrine/lib/talons/ProductFullDetail/productFullDetail.gql.ce.js
@@ -11,6 +11,10 @@ export const ADD_PRODUCT_TO_CART = gql`
                 ...CartTriggerFragment
                 ...MiniCartFragment
             }
+            user_errors {
+                code
+                message
+            }
         }
     }
     ${CartTriggerFragment}

diff --git a/packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js b/packages/peregrine/lib/talons/ProductFullDetail/useProductFullDetail.js
@@ -289,7 +289,11 @@ export const useProductFullDetail = props => {
 
     const [
         addProductToCart,
-        { error: errorAddingProductToCart, loading: isAddProductLoading }
+        {
+            data: addToCartResponseData,
+            error: errorAddingProductToCart,
+            loading: isAddProductLoading
+        }
     ] = useMutation(operations.addProductToCartMutation);
 
     const breadcrumbCategoryId = useMemo(
@@ -556,12 +560,14 @@ export const useProductFullDetail = props => {
             deriveErrorMessage([
                 errorAddingSimpleProduct,
                 errorAddingConfigurableProduct,
-                errorAddingProductToCart
+                errorAddingProductToCart,
+                ...(addToCartResponseData?.addProductsToCart?.user_errors || [])
             ]),
         [
             errorAddingConfigurableProduct,
             errorAddingProductToCart,
-            errorAddingSimpleProduct
+            errorAddingSimpleProduct,
+            addToCartResponseData
         ]
     );
 

diff --git a/packages/peregrine/lib/talons/RootComponents/Category/useCategory.js b/packages/peregrine/lib/talons/RootComponents/Category/useCategory.js
@@ -100,10 +100,7 @@ export const useCategory = props => {
         called: introspectionCalled,
         data: introspectionData,
         loading: introspectionLoading
-    } = useQuery(getFilterInputsQuery, {
-        fetchPolicy: 'cache-and-network',
-        nextFetchPolicy: 'cache-first'
-    });
+    } = useQuery(getFilterInputsQuery);
 
     // Create a type map we can reference later to ensure we pass valid args
     // to the graphql query.

diff --git a/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/productForm.js b/packages/venia-ui/lib/components/CartPage/ProductListing/EditModal/productForm.js
@@ -91,6 +91,7 @@ const ProductForm = props => {
                     }}
                     errors={Array.from(errors.values())}
                     scrollOnError={false}
+                    allowErrorMessages={true}
                 />
                 <ProductDetail
                     item={cartItem}

diff --git a/...outPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap b/...outPage/ShippingInformation/AddressForm/__tests__/__snapshots__/customerForm.spec.js.snap
@@ -351,8 +351,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -827,8 +827,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1364,8 +1364,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"

diff --git a/...eckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap b/...eckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap
@@ -333,8 +333,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -800,8 +800,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1255,8 +1255,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"
@@ -1736,8 +1736,8 @@ Array [
         fieldInput="region[region]"
         fieldSelect="region[region_id]"
         optionValueKey="id"
-        validate={[Function]}
       />
+      
     </div>
     <div
       className="postcode"

diff --git a/...ages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js b/...ages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.js
@@ -134,6 +134,18 @@ const CustomerForm = props => {
         <Text type="hidden" field="default_shipping" initialValue={true} />
     );
 
+    const createErrorMessage = JSON.stringify(
+        errors.get('createCustomerAddressMutation')
+    );
+    const updateErrorMessage = JSON.stringify(
+        errors.get('updateCustomerAddressMutation')
+    );
+    const errorMessage = 'region_id is required for the specified country code';
+    const regionError =
+        createErrorMessage?.includes(errorMessage) ||
+        updateErrorMessage?.includes(errorMessage);
+
+    // errors
     return (
         <Fragment>
             <FormError errors={Array.from(errors.values())} />
@@ -257,9 +269,10 @@ const CustomerForm = props => {
                         />
                     </Field>
                 </div>
+
                 <div className={classes.region}>
                     <Region
-                        validate={isRequired}
+                        regionError={regionError}
                         data-cy="CustomerForm-region"
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
@@ -269,7 +282,20 @@ const CustomerForm = props => {
                             defaultMessage: 'State Required'
                         })}
                     />
+                    {regionError ? (
+                        <Message>
+                            <div className={classes.regionError}>
+                                <FormattedMessage
+                                    id={'validation.isRequired'}
+                                    defaultMessage={'isRequired'}
+                                />
+                            </div>
+                        </Message>
+                    ) : (
+                        ''
+                    )}
                 </div>
+
                 <div className={classes.postcode}>
                     <Postcode
                         validate={isRequired}

diff --git a/...ia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css b/...ia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/customerForm.module.css
@@ -42,6 +42,11 @@
     composes: p-xs from global;
 }
 
+.regionError {
+    color: brown;
+    font-weight: 600;
+}
+
 @media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;

diff --git a/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js b/packages/venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js
@@ -126,6 +126,13 @@ const GuestForm = props => {
         }
     }, [addToast, formatMessage, showSignInToast, handleToastAction]);
 
+    const shippingAddressError = JSON.stringify(
+        errors.get('setGuestShippingMutation')
+    );
+
+    const errorMessage = 'Region is required';
+    const regionError = shippingAddressError?.includes(errorMessage);
+
     return (
         <Fragment>
             <FormError errors={Array.from(errors.values())} />
@@ -304,11 +311,11 @@ const GuestForm = props => {
                 </div>
                 <div className={classes.region}>
                     <Region
+                        regionError={regionError}
                         autoComplete={formatMessage({
                             id: 'region.label',
                             defaultMessage: 'State'
                         })}
-                        validate={isRequired}
                         fieldInput={'region[region]'}
                         fieldSelect={'region[region_id]'}
                         optionValueKey={'id'}
@@ -318,6 +325,18 @@ const GuestForm = props => {
                             defaultMessage: 'State Required'
                         })}
                     />
+                    {regionError ? (
+                        <Message>
+                            <div className={classes.regionError}>
+                                <FormattedMessage
+                                    id={'validation.isRequired'}
+                                    defaultMessage={'isRequired'}
+                                />
+                            </div>
+                        </Message>
+                    ) : (
+                        ''
+                    )}
                 </div>
                 <div className={classes.postcode}>
                     <Postcode

diff --git a/...venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css b/...venia-ui/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.module.css
@@ -36,6 +36,11 @@
     composes: p-xs from global;
 }
 
+.regionError {
+    color: brown;
+    font-weight: 600;
+}
+
 @media (max-width: 959px) {
     .firstname {
         grid-column: 1 / span 2;