Merge pull request scandipwa#5206 from matesich/ts-migration

TS fixes
denisprotassoff · Oct 14, 2022 · d37167c · d37167c
2 parents fb13746 + b27afe8
commit d37167c
Show file tree

Hide file tree

Showing 33 changed files with 160 additions and 117 deletions.
diff --git a/packages/scandipwa/src/component/CategorySort/CategorySort.style.scss b/packages/scandipwa/src/component/CategorySort/CategorySort.style.scss
@@ -42,6 +42,10 @@
         text-align: end;
         opacity: 0;
         animation: appear 100ms 300ms forwards;
+        min-height: 45px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
 
         @include mobile {
             text-align: start;
@@ -64,7 +68,7 @@
                 align-items: center;
                 align-content: center;
             }
-            
+
             .FieldSelect {
                 &-SortSelect {
                     font-size: 16px;
@@ -73,7 +77,7 @@
                     @include desktop {
                         display: none;
                     }
-                } 
+                }
             }
 
             .ChevronIcon {
@@ -82,7 +86,7 @@
                     inset-inline-end: 0;
 
                     @supports (-webkit-touch-callout: none) {
-                        /* CSS specific to iOS devices */ 
+                        /* CSS specific to iOS devices */
                         inset-block-start: 3px;
                     }
                 }
@@ -113,7 +117,7 @@
         }
     }
 
-    .Field { 
+    .Field {
         &-LabelContainer {
             .ChevronIcon {
                 margin-block-start: 3px;

diff --git a/packages/scandipwa/src/component/ClickOutside/ClickOutside.component.tsx b/packages/scandipwa/src/component/ClickOutside/ClickOutside.component.tsx
@@ -39,14 +39,20 @@ export class ClickOutsideComponent extends PureComponent<ClickOutsideComponentPr
 
         this.handleClick = this.handleClick.bind(this);
 
-        this.childrenRefs = Children.map(
-            children,
+        this.childrenRefs = Children.toArray(children).map(
             () => createRef<HTMLElement>(),
         ) || [];
     }
 
     componentDidMount(): void {
-        document.addEventListener('click', this.handleClick);
+        /*
+         * delaying adding the clickoutside event because of the issue with popup,
+         * where event was triggered immediatly
+         * vvv
+        */
+        setTimeout(() => {
+            document.addEventListener('click', this.handleClick);
+        }, 0);
     }
 
     componentWillUnmount(): void {

diff --git a/packages/scandipwa/src/component/CurrencySwitcher/CurrencySwitcher.style.scss b/packages/scandipwa/src/component/CurrencySwitcher/CurrencySwitcher.style.scss
@@ -39,7 +39,7 @@
                 margin: 0;
                 opacity: 1;
                 padding-inline-start: 0;
-                line-height: 23px;
+                line-height: 20px;
                 min-height: 0;
             }
 

diff --git a/packages/scandipwa/src/component/Field/Field.style.scss b/packages/scandipwa/src/component/Field/Field.style.scss
@@ -227,7 +227,7 @@
             }
         }
 
-        &_numberWithControls {
+        &_number_with_controls {
             align-items: center;
             display: inline-flex;
 

diff --git a/packages/scandipwa/src/component/FieldNumberWithControls/FieldNumberWithControls.style.scss b/packages/scandipwa/src/component/FieldNumberWithControls/FieldNumberWithControls.style.scss
@@ -11,7 +11,7 @@
 
 .Field {
     &_type {
-        &_numberWithControls {
+        &_number_with_controls {
             [type="number"] {
                 appearance: textfield;
                 color: var(--color-black);

diff --git a/packages/scandipwa/src/component/FieldSelect/FieldSelect.style.scss b/packages/scandipwa/src/component/FieldSelect/FieldSelect.style.scss
@@ -20,15 +20,6 @@ $select-arrow-width: 14px !default;
         cursor: pointer;
         display: flex;
         align-items: center;
-
-        #storeSwitcher,
-        #CurrencySwitcherList {
-            line-height: 20px;
-
-            @include mobile {
-                border-bottom: 1px solid var(--primary-divider-color);
-            }
-        }
     }
 
     .ChevronIcon {
@@ -48,7 +39,6 @@ $select-arrow-width: 14px !default;
 
     &-Select {
         width: 100%;
-        margin-block-start: -2px;
         padding-inline-end: 40px;
         min-height: 30px;
         height: max-content;

diff --git a/packages/scandipwa/src/component/GroupedProductsItem/GroupedProductsItem.style.scss b/packages/scandipwa/src/component/GroupedProductsItem/GroupedProductsItem.style.scss
@@ -46,7 +46,7 @@
     }
 
     .Field {
-        &_type_numberWithControls {
+        &_type_number_with_controls {
             margin-block-start: 0;
         }
 

diff --git a/packages/scandipwa/src/component/ListIcon/ListIcon.component.tsx b/packages/scandipwa/src/component/ListIcon/ListIcon.component.tsx
@@ -30,8 +30,8 @@ export class ListIconComponent extends PureComponent<ListIconComponentProps> {
             <svg
               block="ListIcon"
               mods={ { isActive } }
-              width="27"
-              height="27"
+              width="24"
+              height="24"
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/scandipwa/src/component/MyAccountAddressForm/MyAccountAddressForm.container.tsx b/packages/scandipwa/src/component/MyAccountAddressForm/MyAccountAddressForm.container.tsx
@@ -129,7 +129,7 @@ export class MyAccountAddressFormContainer <
     }
 
     getCurrentAddress(): InitialDataAddress {
-        const { address, address: { id: addressId } } = this.props;
+        const { address, address: { id: addressId } = {} } = this.props;
 
         if (!addressId) {
             return {

diff --git a/packages/scandipwa/src/component/MyAccountAddressForm/MyAccountAddressForm.form.ts b/packages/scandipwa/src/component/MyAccountAddressForm/MyAccountAddressForm.form.ts
@@ -27,7 +27,7 @@ import {
 export const getStreetFields = (props: MyAccountAddressFormProps): Partial<FieldContainerProps>[] => {
     const {
         addressLinesQty = 1,
-        address: { street = [] },
+        address: { street = [] } = {},
     } = props;
 
     if (addressLinesQty === 1) {

diff --git a/packages/scandipwa/src/component/MyAccountAddressPopup/MyAccountAddressPopup.component.tsx b/packages/scandipwa/src/component/MyAccountAddressPopup/MyAccountAddressPopup.component.tsx
@@ -52,7 +52,7 @@ export class MyAccountAddressPopupComponent extends PureComponent<MyAccountAddre
     }
 
     renderContent(): ReactElement {
-        const { payload: { action } } = this.props;
+        const { payload: { action } = {} } = this.props;
 
         switch (action) {
         case MyAccountAddressPopupAction.EDIT_ADDRESS:

diff --git a/packages/scandipwa/src/component/NavigationAbstract/NavigationAbstract.container.tsx b/packages/scandipwa/src/component/NavigationAbstract/NavigationAbstract.container.tsx
@@ -59,6 +59,13 @@ State extends NavigationAbstractContainerState,
 
         setNavigationState(this.getNavigationState());
         history.listen((history) => {
+            const { state } = history;
+
+            // vvv ignoring the route change for popup
+            if (state && state.popupOpen) {
+                return;
+            }
+
             this.handlePageScroll();
             this.setState(this.onRouteChanged(history));
         });

diff --git a/packages/scandipwa/src/component/Popup/Popup.container.tsx b/packages/scandipwa/src/component/Popup/Popup.container.tsx
@@ -20,6 +20,7 @@ import { hideActiveOverlay, hideActivePopup } from 'Store/Overlay/Overlay.action
 import { PopupPayload } from 'Store/Popup/Popup.type';
 import { ReactElement } from 'Type/Common.type';
 import { noopFn } from 'Util/Common';
+import history from 'Util/History';
 import { RootState } from 'Util/Store/Store.type';
 
 import Popup from './Popup.component';
@@ -75,7 +76,7 @@ export class PopupContainer extends PureComponent<PopupContainerProps> {
             name: Page.POPUP,
             title: this._getPopupTitle(),
             onCloseClick: () => {
-                history.back();
+                history.goBack();
             },
         });
 
@@ -99,7 +100,6 @@ export class PopupContainer extends PureComponent<PopupContainerProps> {
             contentMix,
             onClose,
             onHide,
-            onVisible,
             shouldPopupClose,
             hideActiveOverlay,
             resetHideActivePopup,
@@ -120,7 +120,6 @@ export class PopupContainer extends PureComponent<PopupContainerProps> {
             shouldPopupClose,
             onClose,
             onHide,
-            onVisible,
             hideActiveOverlay,
             resetHideActivePopup,
             goToPreviousNavigationState,

diff --git a/packages/scandipwa/src/component/Product/Product.component.tsx b/packages/scandipwa/src/component/Product/Product.component.tsx
@@ -86,15 +86,13 @@ export class ProductComponent<P extends ProductComponentProps = ProductComponent
             product: {
                 options,
             },
-
             updateSelectedValues,
         } = this.props;
 
         return (
             <ProductCustomizableOptions
               options={ options }
               updateSelectedValues={ updateSelectedValues }
-
             />
         );
     }

diff --git a/packages/scandipwa/src/component/ProductActions/ProductActions.style.scss b/packages/scandipwa/src/component/ProductActions/ProductActions.style.scss
@@ -214,7 +214,7 @@
         .Field {
             &-Wrapper {
                 &_type {
-                    &_numberWithControls {
+                    &_number_with_controls {
                         @include mobile {
                             display: flex;
                         }

diff --git a/packages/scandipwa/src/component/ProductBundleOptions/ProductBundleOptions.style.scss b/packages/scandipwa/src/component/ProductBundleOptions/ProductBundleOptions.style.scss
@@ -51,7 +51,7 @@
                         flex: 1 1;
                     }
 
-                    &_numberWithControls {
+                    &_number_with_controls {
                         display: flex;
                     }
                 }
@@ -98,7 +98,7 @@
         &_customQuantity {
             .Field {
                 &_type {
-                    &_numberWithControls {
+                    &_number_with_controls {
                         margin-inline-start: 16px;
                         margin-block-start: 0;
                     }

diff --git a/packages/scandipwa/src/component/ProductCompare/ProductCompare.component.tsx b/packages/scandipwa/src/component/ProductCompare/ProductCompare.component.tsx
@@ -38,7 +38,7 @@ export class ProductCompareComponent extends Component<ProductCompareComponentPr
         return products !== nextProducts || isLoading !== nextIsLoading;
     }
 
-    renderScroll() {
+    renderScroll(): ReactElement {
         const { handleScroll, scrollerScroll, scrollerContent } = this.props;
 
         return (
@@ -168,7 +168,7 @@ export class ProductCompareComponent extends Component<ProductCompareComponentPr
         ));
     }
 
-    renderProducts() {
+    renderProducts(): ReactElement {
         const { handleBlockScroll, productCompare, productCompareRow } = this.props;
 
         return (

diff --git a/packages/scandipwa/src/component/ProductCompare/ProductCompare.style.scss b/packages/scandipwa/src/component/ProductCompare/ProductCompare.style.scss
@@ -15,7 +15,6 @@
     --product-compare-sidebar-padding: 30px;
     --product-compare-item-count: 3.2;
     --product-compare-item-gap: 15px;
-    --prouduct-compare-additional-gap: 18px;
     --product-compare-column-width: calc(300px + var(--product-compare-item-gap) * 2);
 }
 
@@ -72,7 +71,9 @@
         }
 
         @include mobile {
-            padding: 0;
+            &:last-child {
+                padding-inline-end: var(--product-compare-item-gap);
+            }
         }
     }
 
@@ -91,7 +92,7 @@
         align-items: center;
         position: sticky;
         inset-inline-start: 0;
-        max-width: calc(var(--product-compare-sidebar-width) + var(--product-compare-item-gap));
+        max-width: var(--product-compare-sidebar-width);
 
         @include mobile {
             display: none;
@@ -132,6 +133,10 @@
 
         @include mobile {
             margin-block-start: 26px;
+
+            &:last-child {
+                padding-inline-end: var(--product-compare-item-gap);
+            }
         }
     }
 

diff --git a/.../scandipwa/src/component/ProductCompareAttributeRow/ProductCompareAttributeRow.style.scss b/.../scandipwa/src/component/ProductCompareAttributeRow/ProductCompareAttributeRow.style.scss
@@ -51,7 +51,7 @@
 
         flex: 0 0 auto;
         padding-block: 0;
-        padding-inline: var(--product-compare-item-gap) calc(var(--product-compare-item-gap) + var(--prouduct-compare-additional-gap));
+        padding-inline: var(--product-compare-item-gap) var(--product-compare-item-gap);
         width: var(--product-compare-column-width);
         text-align: justify;
 
@@ -66,6 +66,12 @@
         &:last-child {
             padding-inline-end: 0;
         }
+
+        @include mobile {
+            &:last-child {
+                padding-inline-end: var(--product-compare-item-gap);
+            }
+        }
     }
 
     &-OutOfStock {

diff --git a/packages/scandipwa/src/component/ProductCompareItem/ProductCompareItem.style.scss b/packages/scandipwa/src/component/ProductCompareItem/ProductCompareItem.style.scss
@@ -17,7 +17,8 @@
 .ProductCompareItem {
     display: flex;
     flex-direction: column;
-    padding: 10px;
+    padding: var(--product-compare-item-gap);
+    padding-inline-end: 0;
     position: relative;
     height: 100%;
     min-height: 100px;
@@ -45,13 +46,10 @@
 
     &-Actions {
         display: flex;
+        justify-content: space-between;
         align-items: center;
     }
 
-    .ProductWishlistButton {
-        margin-inline: 16px;
-    }
-
     &-Title {
         flex: 1;
         display: block;

diff --git a/...a/src/component/ProductConfigurableAttributes/ProductConfigurableAttributes.component.tsx b/...a/src/component/ProductConfigurableAttributes/ProductConfigurableAttributes.component.tsx
@@ -147,7 +147,7 @@ P extends ProductConfigurableAttributesComponentProps = ProductConfigurableAttri
                 attribute_id,
             } = option;
             const isUnselected = addToCartTriggeredWithError ? !parameters[attribute_code] : false;
-            const [{ swatch_data }] = attribute_options
+            const [{ swatch_data }] = Object.values(attribute_options).length
                 ? Object.values(attribute_options)
                 : [{ swatch_data: undefined }];
             const isSwatch = !!swatch_data;

diff --git a/packages/scandipwa/src/component/ProductGallery/ProductGallery.style.scss b/packages/scandipwa/src/component/ProductGallery/ProductGallery.style.scss
@@ -26,8 +26,12 @@
     height: 500px;
     margin-inline: 45px;
 
+    @include ultra-narrow-desktop {
+        min-width: 332px;
+    }
+
     @include narrow-desktop {
-        min-width: 507px;
+        min-width: 482px;
     }
 
     @include mobile {