Merge branch 'ts-migration' of github.com:scandipwa/scandipwa into es…

…lint-fixes

build-packages/webpack-i18n-runtime/src/plugin/App.plugin.js

@@ -1,7 +1,5 @@
 import I18nComponent from '../component/I18n';
 
-import '../util/propTypesFix';
-
 /** Ensure full application remount on locale change */
 const render = (args, callback) => (
     <I18nComponent>

build-packages/webpack-i18n-runtime/src/util/__.js

@@ -14,21 +14,6 @@ function getTranslatedStringWithInjectedValues(string, values) {
     return injectValues(translateString(string), ...values);
 }
 
-export class TranslatedValue extends String {
-    // Translate and inject values during the initialization
-    constructor(value, args = []) {
-        super(getTranslatedStringWithInjectedValues(value, args));
-
-        this.value = value;
-        this.injectables = args;
-    }
-
-    // Reload the translation each time toString() is  called
-    toString() {
-        return getTranslatedStringWithInjectedValues(this.value, this.injectables);
-    }
-}
-
 export default function __(string, ...values) {
-    return new TranslatedValue(string, values);
+    return getTranslatedStringWithInjectedValues(string, values);
 }

packages/scandipwa/src/component/Product/Product.component.tsx

@@ -157,7 +157,7 @@ export class Product<P extends ProductComponentProps = ProductComponentProps> ex
 
     renderConfigurableOptions(): ReactElement {
         const {
-            // setActiveProduct,
+            setActiveProduct,
             parameters,
             product: { type_id: type, variants = [] },
             inStock,
@@ -182,7 +182,7 @@ export class Product<P extends ProductComponentProps = ProductComponentProps> ex
                   mix={ { block: this.className, elem: 'Attributes' } }
                   parameters={ parameters }
                   variants={ variants }
-                //   updateConfigurableVariant={ setActiveProduct }
+                  updateConfigurableVariant={ setActiveProduct }
                   configurable_options={ this.getConfigurableAttributes() }
                   isContentExpanded
                   inStock={ inStock }

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

@@ -38,11 +38,12 @@ import { validateGroup } from 'Util/Validator';
 
 import {
     AdjustedPriceMap,
-    ProductComponentContainerFunctions,
-    ProductComponentContainerPropKeys,
+    ConfigurableProductSelectedVariantValue,
     ProductComponentProps,
+    ProductContainerFunctions,
     ProductContainerMapDispatchProps,
     ProductContainerMapStateProps,
+    ProductContainerPropKeys,
     ProductContainerProps,
     ProductContainerState,
     ProductOption,
@@ -87,7 +88,7 @@ S extends ProductContainerState = ProductContainerState,
         cartId: '',
     };
 
-    containerFunctions: ProductComponentContainerFunctions = {
+    containerFunctions: ProductContainerFunctions = {
         addToCart: this.addToCart.bind(this),
 
         // Used to update entered and selected state values
@@ -225,7 +226,7 @@ S extends ProductContainerState = ProductContainerState,
         }
     }
 
-    containerProps(): Pick<ProductComponentProps, ProductComponentContainerPropKeys> {
+    containerProps(): Pick<ProductComponentProps, ProductContainerPropKeys> {
         const {
             quantity,
             parameters,
@@ -467,8 +468,8 @@ S extends ProductContainerState = ProductContainerState,
         const { showError } = this.props;
 
         if (
-            errorFields
-            || errorMessages
+            errorFields.length
+            || errorMessages.length
             || this.validateConfigurableProduct()
             || this.filterAddToCartFileErrors(values)
         ) {
@@ -496,7 +497,11 @@ S extends ProductContainerState = ProductContainerState,
      * @param key
      * @param value
      */
-    updateConfigurableVariant(key: string, value: string, checkEmptyValue = false): void {
+    updateConfigurableVariant(
+        key: string,
+        value: ConfigurableProductSelectedVariantValue,
+        checkEmptyValue = false,
+    ): void {
         const { parameters: prevParameters } = this.state;
 
         const newParameters = getNewParameters(prevParameters, key, value);

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

@@ -56,21 +56,21 @@ export interface ProductContainerState {
     activeProduct: IndexedProduct | null;
 }
 
-export interface ProductComponentContainerFunctions {
+export interface ProductContainerFunctions {
     setQuantity: (quantity: ProductQuantity) => void;
     addToCart: (options?: AddProductToCartOptions) => Promise<void>;
     updateSelectedValues: (data?: Partial<ProductOption>) => void;
     setAdjustedPrice: (type: keyof AdjustedPriceMap, amount: number) => void;
     setDownloadableLinks: (links: string[]) => void;
     updateAddToCartTriggeredWithError: () => void;
     getActiveProduct: () => IndexedProduct;
-    setActiveProduct: (key: string, value: string, checkEmptyValue?: boolean) => void;
+    setActiveProduct: (key: string, value: ConfigurableProductSelectedVariantValue, checkEmptyValue?: boolean) => void;
     getMagentoProduct: () => ProductTransformData[];
     setValidator: (elem: HTMLElement) => void;
     scrollOptionsIntoView: () => void;
 }
 
-export interface ProductComponentProps extends ProductComponentContainerFunctions {
+export interface ProductComponentProps extends ProductContainerFunctions {
     isWishlistEnabled: boolean;
     unselectedOptions: string[];
     quantity: ProductQuantity;
@@ -87,7 +87,7 @@ export interface ProductComponentProps extends ProductComponentContainerFunction
     productPrice: Partial<ProductExtractPrice>;
 }
 
-export type ProductComponentContainerPropKeys =
+export type ProductContainerPropKeys =
     | 'isWishlistEnabled'
     | 'unselectedOptions'
     | 'quantity'
@@ -127,3 +127,5 @@ export interface ProductPrice {
     minimum_price: Partial<PriceRange>;
     maximum_price: Partial<PriceRange>;
 }
+
+export type ConfigurableProductSelectedVariantValue = string | number | boolean;

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

@@ -24,10 +24,10 @@ import { RootState } from 'Util/Store/Store.type';
 
 import ProductActions from './ProductActions.component';
 import {
-    ProductActionsComponentContainerFunctions,
-    ProductActionsComponentContainerPropKeys,
     ProductActionsComponentProps,
+    ProductActionsContainerFunctions,
     ProductActionsContainerMapStateProps,
+    ProductActionsContainerPropKeys,
     ProductActionsContainerProps,
     ProductActionsContainerState,
 } from './ProductActions.type';
@@ -48,12 +48,12 @@ ProductActionsContainerState
 > {
     static defaultProps: Partial<ProductActionsContainerProps> = ProductContainer.defaultProps;
 
-    containerFunctions: ProductActionsComponentContainerFunctions = {
+    containerFunctions: ProductActionsContainerFunctions = {
         ...this.containerFunctions,
         showOnlyIfLoaded: this.showOnlyIfLoaded.bind(this),
     };
 
-    containerProps(): Pick<ProductActionsComponentProps, ProductActionsComponentContainerPropKeys> {
+    containerProps(): Pick<ProductActionsComponentProps, ProductActionsContainerPropKeys> {
         const {
             areDetailsLoaded,
             areReviewsEnabled,

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

@@ -10,12 +10,12 @@
  */
 
 import {
-    ProductComponentContainerFunctions,
-    ProductComponentContainerPropKeys,
     ProductComponentProps,
     ProductContainerBaseProps,
+    ProductContainerFunctions,
     ProductContainerMapDispatchProps,
     ProductContainerMapStateProps,
+    ProductContainerPropKeys,
     ProductContainerProps,
     ProductContainerState,
 } from 'Component/Product/Product.type';
@@ -49,7 +49,7 @@ export type ProductActionsContainerProps = ProductContainerProps
 
 export type ProductActionsContainerState = ProductContainerState;
 
-export interface ProductActionsComponentContainerFunctions extends ProductComponentContainerFunctions {
+export interface ProductActionsContainerFunctions extends ProductContainerFunctions {
     showOnlyIfLoaded: (expression: boolean, content: ReactElement, placeholder?: ReactElement) => ReactElement;
 }
 
@@ -69,7 +69,7 @@ export interface ProductActionsComponentProps extends ProductComponentProps {
     isPricePreview: boolean;
 }
 
-export type ProductActionsComponentContainerPropKeys = ProductComponentContainerPropKeys
+export type ProductActionsContainerPropKeys = ProductContainerPropKeys
 | 'areDetailsLoaded'
 | 'areReviewsEnabled'
 | 'displayProductStockStatus'

packages/scandipwa/src/component/ProductAttributeValue/ProductAttributeValue.component.tsx

@@ -22,7 +22,7 @@ import { ReactElement } from 'Type/Common.type';
 import { noopFn } from 'Util/Common';
 import { getBooleanLabel } from 'Util/Product';
 
-import { AttributeType, STRING_ONLY_ATTRIBUTE_CODES } from './ProductAttributeValue.config';
+import { AttributeType, SelectAttributeType, STRING_ONLY_ATTRIBUTE_CODES } from './ProductAttributeValue.config';
 import { ProductAttributeValueComponentProps, ProductAttributeValueOption } from './ProductAttributeValue.type';
 
 import './ProductAttributeValue.style';
@@ -159,11 +159,11 @@ export class ProductAttributeValue extends PureComponent<ProductAttributeValueCo
         const { value, type } = swatch_data;
 
         switch (type) {
-        case '0':
+        case SelectAttributeType.STRING:
             return this.renderStringValue(value, labelText, count);
-        case '1':
+        case SelectAttributeType.COLOR:
             return this.renderColorValue(value, label);
-        case '2':
+        case SelectAttributeType.IMAGE:
             return this.renderImageValue(value, label);
         default:
             return this.renderStringValue(labelText || __('N/A'), labelText, count);

packages/scandipwa/src/component/ProductAttributeValue/ProductAttributeValue.config.ts

@@ -20,3 +20,9 @@ export enum AttributeType {
     TEXTAREA = 'textarea',
     WEIGHT = 'weight',
 }
+
+export enum SelectAttributeType {
+    STRING = '0',
+    COLOR = '1',
+    IMAGE = '2',
+}

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

@@ -33,12 +33,12 @@ import { appendWithStoreCode, objectToUri } from 'Util/Url';
 
 import ProductCard from './ProductCard.component';
 import {
-    ProductCardComponentContainerPropKeys,
     ProductCardComponentProps,
+    ProductCardContainerFunctions,
     ProductCardContainerMapDispatchProps,
     ProductCardContainerMapStateProps,
+    ProductCardContainerPropKeys,
     ProductCardContainerProps,
-    ProductCartComponentContainerFunctions,
 } from './ProductCard.type';
 
 export const CartDispatcher = import(
@@ -73,12 +73,12 @@ export class ProductCardContainer extends ProductContainer<ProductCardContainerP
         layout: CategoryPageLayout.GRID,
     };
 
-    containerFunctions: ProductCartComponentContainerFunctions = {
+    containerFunctions: ProductCardContainerFunctions = {
         ...this.containerFunctions,
         showSelectOptionsNotification: this.showSelectOptionsNotification.bind(this),
     };
 
-    containerProps(): Pick<ProductCardComponentProps, ProductCardComponentContainerPropKeys> {
+    containerProps(): Pick<ProductCardComponentProps, ProductCardContainerPropKeys> {
         const {
             children,
             mix,

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

@@ -12,12 +12,12 @@
 import { RefObject } from 'react';
 
 import {
-    ProductComponentContainerFunctions,
-    ProductComponentContainerPropKeys,
     ProductComponentProps,
     ProductContainerBaseProps,
+    ProductContainerFunctions,
     ProductContainerMapDispatchProps,
     ProductContainerMapStateProps,
+    ProductContainerPropKeys,
 } from 'Component/Product/Product.type';
 import { CategoryPageLayout } from 'Route/CategoryPage/CategoryPage.config';
 import { NotificationType } from 'Store/Notification/Notification.type';
@@ -51,7 +51,7 @@ export type ProductCardContainerProps = ProductCardContainerMapStateProps
 & ProductCardContainerMapDispatchProps
 & ProductCartContainerBaseProps;
 
-export interface ProductCartComponentContainerFunctions extends ProductComponentContainerFunctions {
+export interface ProductCardContainerFunctions extends ProductContainerFunctions {
     showSelectOptionsNotification: () => void;
 }
 
@@ -70,7 +70,7 @@ export interface ProductCardComponentProps extends ProductComponentProps {
     isPlp: boolean;
 }
 
-export type ProductCardComponentContainerPropKeys = ProductComponentContainerPropKeys
+export type ProductCardContainerPropKeys = ProductContainerPropKeys
 | 'children'
 | 'hideCompareButton'
 | 'hideWishlistButton'

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

@@ -11,6 +11,7 @@
 
 import { AnimationEvent } from 'react';
 
+import { ConfigurableProductSelectedVariantValue } from 'Component/Product/Product.type';
 import { StockStatus } from 'Component/Product/Stock.config';
 import { ProductListFilter } from 'Store/ProductListInfo/ProductListInfo.type';
 import { Merge, Mix } from 'Type/Common.type';
@@ -19,7 +20,7 @@ import { IndexedConfigurableOption, IndexedVariant } from 'Util/Product/Product.
 export interface ProductConfigurableAttributesContainerProps {
     getLink: (filterKey: string, value: string) => string;
     parameters: Record<string, string | string[]>;
-    updateConfigurableVariant?: (requestVar: string, value: string | number | boolean) => void;
+    updateConfigurableVariant?: (requestVar: string, value: ConfigurableProductSelectedVariantValue) => void;
     isExpandable: boolean;
     showProductAttributeAsLink: boolean;
     variants: IndexedVariant[];
@@ -51,7 +52,7 @@ export interface ProductConfigurableAttributesComponentProps
     numberOfPlaceholders: number[];
     parameters: Record<string, string | string[]>;
     showProductAttributeAsLink: boolean;
-    updateConfigurableVariant?: (requestVar: string, value: string | number | boolean) => void;
+    updateConfigurableVariant?: (requestVar: string, value: ConfigurableProductSelectedVariantValue) => void;
     inStock: boolean;
     isContentExpanded: boolean;
     addToCartTriggeredWithError: boolean;

packages/scandipwa/src/store/Cart/Cart.dispatcher.ts

@@ -67,7 +67,7 @@ export class CartDispatcher {
                             } = {},
                             method_code = '',
                         } = {},
-                    }] = [],
+                    } = {}] = [],
                 } = {},
             } = await fetchQuery(
                 CartQuery.getCartQuery(

packages/scandipwa/src/util/Product/Product.ts

@@ -9,6 +9,7 @@
  * @link https://github.com/scandipwa/scandipwa
  */
 
+import { ConfigurableProductSelectedVariantValue } from 'Component/Product/Product.type';
 import { REVIEW_POPUP_ID } from 'Component/ProductReviews/ProductReviews.config';
 import {
     AttributeWithValue,
@@ -429,15 +430,15 @@ export const sortBySortOrder = <T>(options: T[], sortKey?: keyof T): T[] => opti
 export const getIsConfigurableParameterSelected = (
     parameters: Record<string, string>,
     key: string,
-    value: string,
+    value: ConfigurableProductSelectedVariantValue,
 ): boolean => Object.hasOwnProperty.call(parameters, key) && parameters[key] === value;
 
 /** @namespace Util/Product/getNewParameters */
 // eslint-disable-next-line max-len
 export const getNewParameters = (
     parameters: Record<string, string>,
     key: string,
-    value = '',
+    value: ConfigurableProductSelectedVariantValue = '',
 ): Record<string, string> => {
     // If value is already selected, than we remove the key to achieve deselection
     if (getIsConfigurableParameterSelected(parameters, key, value)) {