Merge 5.3.6-rc into ts-migration branch

packages/scandipwa/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@scandipwa/scandipwa",
     "description": "ScandiPWA source code used by CSA.",
-    "version": "5.3.4",
+    "version": "5.3.6",
     "scripts": {
         "start": "scandipwa-scripts start",
         "start:magento": "BUILD_MODE=magento scandipwa-scripts start",

packages/scandipwa/src/component/CheckoutTermsAndConditionsPopup/CheckoutTermsAndConditionsPopup.component.tsx

@@ -34,7 +34,7 @@ export class CheckoutTermsAndConditionsPopupComponent extends PureComponent<Chec
         return (
             <Popup
               id={ TERMS_AND_CONDITIONS_POPUP_ID }
-              clickOutside={ false }
+              isCloseOnOutsideClick={ false }
               mix={ { block: 'CheckoutTermsAndConditionsPopup' } }
             >
                 { this.renderContent() }

packages/scandipwa/src/component/ImageZoomPopup/ImageZoomPopup.container.tsx

@@ -84,7 +84,7 @@ export class ImageZoomPopupContainer extends PureComponent<ImageZoomPopupContain
         return (
             <Popup
               id={ popupId }
-              clickOutside={ false }
+              isCloseOnOutsideClick={ false }
               mix={ { block: 'ImageZoomPopup', mix } }
               contentMix={ { block: 'ImageZoomPopup', elem: 'PopupContent' } }
               onClose={ onClose }

packages/scandipwa/src/component/MyAccountAddressPopup/MyAccountAddressPopup.component.tsx

@@ -71,7 +71,7 @@ export class MyAccountAddressPopupComponent extends PureComponent<MyAccountAddre
         return (
             <Popup
               id={ MyAccountAddressPopupAction.ADDRESS_POPUP_ID }
-              clickOutside={ false }
+              isCloseOnOutsideClick={ false }
               mix={ { block: 'MyAccountAddressPopup' } }
             >
                 <div>

packages/scandipwa/src/component/NewVersionPopup/NewVersionPopup.component.tsx

@@ -93,7 +93,7 @@ export class NewVersionPopupComponent extends PureComponent<NewVersionPopupCompo
         return (
             <Popup
               id={ NEW_VERSION_POPUP_ID }
-              clickOutside={ false }
+              isCloseOnOutsideClick={ false }
               mix={ { block: 'NewVersionPopup' } }
             >
                 { this.renderContent() }

packages/scandipwa/src/component/Popup/Popup.component.tsx

@@ -27,7 +27,7 @@ import './Popup.style';
 export class PopupComponent extends Overlay<PopupComponentProps> {
     static defaultProps: Partial<PopupComponentProps> = {
         ...Overlay.defaultProps,
-        clickOutside: true,
+        isCloseOnOutsideClick: true,
         title: '',
     };
 
@@ -104,9 +104,9 @@ export class PopupComponent extends Overlay<PopupComponentProps> {
 
     // Same with click outside
     handleClickOutside(): void {
-        const { clickOutside, isMobile } = this.props;
+        const { isCloseOnOutsideClick, isMobile } = this.props;
 
-        if (!clickOutside) {
+        if (!isCloseOnOutsideClick) {
             return;
         }
 

packages/scandipwa/src/component/Popup/Popup.container.tsx

@@ -61,7 +61,7 @@ export class PopupContainer extends PureComponent<PopupContainerProps> {
         contentMix: {},
         children: [],
         isStatic: false,
-        clickOutside: false,
+        isCloseOnOutsideClick: true,
     };
 
     containerFunctions: PopupContainerFunctions = {
@@ -87,6 +87,7 @@ export class PopupContainer extends PureComponent<PopupContainerProps> {
     PopupContainerPropsKeys
     > {
         const {
+            isCloseOnOutsideClick,
             activeOverlay,
             areOtherOverlaysOpen,
             changeHeaderState,
@@ -106,6 +107,7 @@ export class PopupContainer extends PureComponent<PopupContainerProps> {
         } = this.props;
 
         return {
+            isCloseOnOutsideClick,
             activeOverlay,
             areOtherOverlaysOpen,
             changeHeaderState,

packages/scandipwa/src/component/Popup/Popup.type.ts

@@ -45,18 +45,18 @@ export type PopupContainerProps = PopupContainerMapStateProps
     isStatic: boolean;
     children: Children;
     id: string;
-    clickOutside: boolean;
+    isCloseOnOutsideClick: boolean;
 };
 
 export type PopupComponentProps = OverlayComponentProps & {
-    clickOutside: boolean;
     title?: string;
     isMobile: boolean;
     changeHeaderState: (state: NavigationState) => void;
     goToPreviousNavigationState: () => void;
     resetHideActivePopup: () => void;
     hideActiveOverlay: () => void;
     shouldPopupClose: boolean;
+    isCloseOnOutsideClick: boolean;
 };
 
 export type PopupContainerPropsKeys = 'activeOverlay'
@@ -75,4 +75,5 @@ export type PopupContainerPropsKeys = 'activeOverlay'
 | 'hideActiveOverlay'
 | 'resetHideActivePopup'
 | 'goToPreviousNavigationState'
-| 'title';
+| 'title'
+| 'isCloseOnOutsideClick';

packages/scandipwa/src/component/ProductList/ProductList.container.tsx

@@ -327,6 +327,8 @@ export class ProductListContainer extends PureComponent<ProductListContainerProp
         setQueryParams({
             page: pageNumber === 1 ? '' : String(pageNumber),
         }, location, history);
+
+        scrollToTop();
     }
 
     render(): ReactElement {

packages/scandipwa/src/component/ShareWishlistPopup/ShareWishlistPopup.component.tsx

@@ -37,7 +37,7 @@ export class ShareWishlistPopupComponent extends PureComponent<ShareWishlistPopu
         return (
             <Popup
               id={ SHARE_WISHLIST_POPUP_ID }
-              clickOutside={ false }
+              isCloseOnOutsideClick={ false }
               mix={ { block: 'ShareWishlistPopup' } }
             >
                 { this.renderContent() }

packages/scandipwa/src/component/StoreInPickUpPopup/StoreInPickUpPopup.component.tsx

@@ -140,7 +140,7 @@ export class StoreInPickUpPopupComponent extends PureComponent<StoreInPickUpPopu
         return (
             <Popup
               id={ STORE_IN_PICK_UP_POPUP_ID }
-              clickOutside={ false }
+              isCloseOnOutsideClick={ false }
               mix={ { block: 'StoreInPickUpPopup' } }
             >
                 { this.renderContent() }

packages/scandipwa/src/route/CategoryPage/CategoryPage.component.tsx

@@ -13,7 +13,6 @@
 import { lazy, PureComponent, Suspense } from 'react';
 
 import CategoryDetails from 'Component/CategoryDetails';
-import { CATEGORY_FILTER_OVERLAY_ID } from 'Component/CategoryFilterOverlay/CategoryFilterOverlay.config';
 import CategoryItemsCount from 'Component/CategoryItemsCount';
 import CategoryProductList from 'Component/CategoryProductList';
 import CategorySort from 'Component/CategorySort';
@@ -61,14 +60,9 @@ S extends CategoryPageComponentState = CategoryPageComponentState,
         selectedLayoutType: undefined,
     };
 
-    __construct(props: CategoryPageComponentProps): void {
-        super.__construct?.(props);
-        this.onFilterButtonClick = this.onFilterButtonClick.bind(this);
-
-        this.state = {
-            activeLayoutType: undefined,
-        } as S;
-    }
+    state = {
+        activeLayoutType: undefined,
+    } as S;
 
     static getDerivedStateFromProps(props: CategoryPageComponentProps): Partial<CategoryPageComponentState> {
         const {
@@ -98,13 +92,7 @@ S extends CategoryPageComponentState = CategoryPageComponentState,
         return { activeLayoutType };
     }
 
-    onFilterButtonClick(): void {
-        const { toggleOverlayByKey } = this.props;
-
-        toggleOverlayByKey(CATEGORY_FILTER_OVERLAY_ID);
-    }
-
-    displayProducts(): boolean {
+    displayProducts() {
         const {
             category: {
                 display_mode = CategoryDisplayMode.PRODUCTS,
@@ -159,7 +147,7 @@ S extends CategoryPageComponentState = CategoryPageComponentState,
             isSearchPage,
             isCurrentCategoryLoaded,
             isMatchingInfoFilter,
-
+            onFilterButtonClick,
         } = this.props;
 
         if (!isMatchingInfoFilter) {
@@ -174,7 +162,7 @@ S extends CategoryPageComponentState = CategoryPageComponentState,
             <button
               block="CategoryPage"
               elem="Filter"
-              onClick={ this.onFilterButtonClick }
+              onClick={ onFilterButtonClick }
             >
                 <FilterIcon />
                 <span>{ __('Filters') }</span>

packages/scandipwa/src/route/CategoryPage/CategoryPage.container.tsx

@@ -13,6 +13,7 @@ import { ComponentType, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
 
+import { CATEGORY_FILTER_OVERLAY_ID } from 'Component/CategoryFilterOverlay/CategoryFilterOverlay.config';
 import { Page } from 'Component/Header/Header.config';
 import { NavigationTabsMap } from 'Component/NavigationTabs/NavigationTabs.config';
 import {
@@ -151,6 +152,7 @@ S extends CategoryPageContainerState = CategoryPageContainerState,
         onSortChange: this.onSortChange.bind(this),
         onGridButtonClick: this.onGridButtonClick.bind(this),
         onListButtonClick: this.onListButtonClick.bind(this),
+        onFilterButtonClick: this.onFilterButtonClick.bind(this),
     };
 
     __construct(props: P): void {
@@ -344,6 +346,12 @@ S extends CategoryPageContainerState = CategoryPageContainerState,
         this.updateMeta();
     }
 
+    onFilterButtonClick(): void {
+        const { toggleOverlayByKey } = this.props;
+
+        toggleOverlayByKey(CATEGORY_FILTER_OVERLAY_ID);
+    }
+
     setOfflineNoticeSize(): void {
         const { setBigOfflineNotice, isInfoLoading } = this.props;
 
@@ -414,7 +422,6 @@ S extends CategoryPageContainerState = CategoryPageContainerState,
             filters,
             isMobile,
             sortFields,
-            toggleOverlayByKey,
             totalPages,
             totalItems,
             isSearchPage,
@@ -441,7 +448,6 @@ S extends CategoryPageContainerState = CategoryPageContainerState,
             selectedFilters: this.getSelectedFiltersFromUrl(),
             selectedSort: this.getSelectedSortFromUrl(),
             sortFields,
-            toggleOverlayByKey,
             totalPages,
             totalItems,
             selectedLayoutType,

packages/scandipwa/src/route/CategoryPage/CategoryPage.type.ts

@@ -60,6 +60,7 @@ export interface CategoryPageContainerFunctions {
     onSortChange: (sortDirection: SortDirections, sortKey: string[]) => void;
     onGridButtonClick: () => void;
     onListButtonClick: () => void;
+    onFilterButtonClick: () => void;
 }
 
 export interface CategoryPageContainerBaseProps {
@@ -100,7 +101,6 @@ export interface CategoryPageComponentProps extends CategoryPageContainerFunctio
     selectedFilters: Record<string, string[]>;
     selectedSort: CategorySortOptions;
     sortFields: Partial<SortFields>;
-    toggleOverlayByKey: (key: string) => void;
     totalPages: number;
     totalItems: number;
     selectedLayoutType?: CategoryPageLayout;
@@ -127,7 +127,6 @@ export type CategoryPageContainerPropsKeys =
     | 'selectedFilters'
     | 'selectedSort'
     | 'sortFields'
-    | 'toggleOverlayByKey'
     | 'totalPages'
     | 'totalItems'
     | 'selectedLayoutType'

packages/scandipwa/src/util/Request/Request.ts

@@ -251,7 +251,7 @@ export const executeGet = async <T>(
             const putResponse = await putPersistedQuery(getGraphqlEndpoint(), query, cacheTTL);
 
             if (putResponse.status === HTTP_201_CREATED) {
-                return parseResponse(await getFetch(uri, name, signal));
+                return await parseResponse(await getFetch(uri, name, signal));
             }
         }
 
@@ -261,7 +261,7 @@ export const executeGet = async <T>(
         }
 
         // Successful and all other http responses go here:
-        return parseResponse(result);
+        return await parseResponse(result);
     } catch (error) {
         // Network error
         handleConnectionError(error, 'executeGet failed');