Pwa 3437 (#4424)

* Fixed place order and filter button issue

* Fixed various console warnings in various pages

* Fixed ariaLabel errors

---------

Co-authored-by: Bharathidasan Elangovan <del22123@adobe.com>

Author: glo42707

packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/createAccount.js

@@ -179,7 +179,7 @@ const CreateAccount = props => {
                 <GoogleReCaptcha {...recaptchaWidgetProps} />
                 <div className={classes.actions}>
                     <Button
-                        disabled={isDisabled}
+                        disabled={Boolean(isDisabled)}
                         type="submit"
                         className={classes.create_account_button}
                         data-cy="OrderConfirmationPage-CreateAccount-createAccountButton"

packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap

@@ -173,7 +173,7 @@ exports[`CheckoutPage renders an error and disables review order button if there
         onTouchCancel={[Function]}
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        onTouchStart={[MockFunction toggleSignInContent]}
         type="button"
       >
         <span
@@ -537,7 +537,7 @@ exports[`CheckoutPage renders checkout content for guest on desktop 1`] = `
         onTouchCancel={[Function]}
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        onTouchStart={[MockFunction toggleSignInContent]}
         type="button"
       >
         <span
@@ -679,7 +679,7 @@ exports[`CheckoutPage renders checkout content for guest on mobile 1`] = `
         onTouchCancel={[Function]}
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
-        onTouchStart={[Function]}
+        onTouchStart={[MockFunction toggleSignInContent]}
         type="button"
       >
         <span

packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js

@@ -177,6 +177,7 @@ const CheckoutPage = props => {
                     className={classes.signInButton}
                     data-cy="CheckoutPage-signInButton"
                     onClick={toggleSignInContent}
+                    onTouchStart={toggleSignInContent}
                     priority="normal"
                 >
                     <FormattedMessage
@@ -282,6 +283,7 @@ const CheckoutPage = props => {
             checkoutStep === CHECKOUT_STEP.REVIEW ? (
                 <Button
                     onClick={handlePlaceOrder}
+                    onTouchStart={handlePlaceOrder}
                     onKeyDown={handlePlaceOrderEnterKeyPress}
                     priority="high"
                     className={classes.place_order_button}

packages/venia-ui/lib/components/FilterModal/FilterList/filterDefault.js

@@ -57,7 +57,7 @@ const FilterDefault = props => {
             field={`${label}-${value_index}`}
             fieldValue={!!isSelected}
             label={title}
-            ariaLabel={ariaLabel}
+            aria-label={ariaLabel}
             data-cy="FilterDefault-checkbox"
             onClick={onMouseDown}
             {...restProps}

packages/venia-ui/lib/components/FilterModal/FilterList/filterItemRadio.js

@@ -45,7 +45,7 @@ const FilterItemRadio = props => {
             value={value}
             onChange={handleOnchange}
             data-cy="FilterDefault-radio"
-            ariaLabel={ariaLabel}
+            aria-label={ariaLabel}
         />
     );
 

packages/venia-ui/lib/components/FilterModal/FilterList/filterList.js

@@ -36,8 +36,8 @@ const FilterList = props => {
         var maxRange = Number(items[items.length - 1].value.split('_')[1]);
         if (filterState !== undefined) {
             const filterArray = [...filterState];
-            var currentMinVal = Number(filterArray[0].value.split('_')[0]);
-            var currentMaxVal = Number(filterArray[0].value.split('_')[1]);
+            var currentMinVal = Number(filterArray[0]?.value?.split('_')[0]);
+            var currentMaxVal = Number(filterArray[0]?.value?.split('_')[1]);
         }
     }
 

packages/venia-ui/lib/components/FilterModal/filterFooter.js

@@ -26,6 +26,7 @@ const FilterFooter = props => {
             <Button
                 disabled={!touched}
                 onClick={applyFilters}
+                onTouchStart={applyFilters}
                 data-cy="FilterFooter-button"
                 aria-label={buttonLabel}
                 aria-disabled={!touched}

packages/venia-ui/lib/components/FilterModal/filterModal.js

@@ -80,7 +80,7 @@ const FilterModal = props => {
             <LinkButton
                 type="button"
                 onClick={handleReset}
-                ariaLabel={clearAllAriaLabel}
+                aria-label={clearAllAriaLabel}
                 data-cy="FilterModal-clearButton"
             >
                 <FormattedMessage

packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js

@@ -24,6 +24,7 @@ const FilterModalOpenButton = props => {
             }}
             data-cy="FilterModalOpenButton-button"
             onClick={handleOpen}
+            onTouchStart={handleOpen}
             onKeyDown={handleKeypress}
             type="button"
             aria-live="polite"

packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/items.js

@@ -13,7 +13,7 @@ const Items = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     const itemsComponent = items.map(item => (
-        <Item key={item.id} {...item} {...imagesData[item.product_sku]} />
+        <Item key={item.id} {...item} {...imagesData[0][item.product_sku]} />
     ));
 
     return (