diff --git a/build-packages/webpack-i18n-runtime/src/plugin/App.plugin.js b/build-packages/webpack-i18n-runtime/src/plugin/App.plugin.js index e5e38faea2..070cbd42e5 100644 --- a/build-packages/webpack-i18n-runtime/src/plugin/App.plugin.js +++ b/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) => ( diff --git a/build-packages/webpack-i18n-runtime/src/util/__.js b/build-packages/webpack-i18n-runtime/src/util/__.js index 74ca37bd9f..2f6a4e2525 100644 --- a/build-packages/webpack-i18n-runtime/src/util/__.js +++ b/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); } diff --git a/build-packages/webpack-i18n-runtime/src/util/propTypesFix.js b/build-packages/webpack-i18n-runtime/src/util/propTypesFix.js deleted file mode 100644 index 403f398528..0000000000 --- a/build-packages/webpack-i18n-runtime/src/util/propTypesFix.js +++ /dev/null @@ -1,19 +0,0 @@ -import { TranslatedValue } from './__'; -/** - * This fix is required, because: - * typeof new String('...') === 'object' - * typeof new TranslatedValue(...) === 'object' - */ - -try { - const PropTypes = require('prop-types'); - - const validStringType = PropTypes.oneOfType([ - PropTypes.string, - PropTypes.instanceOf(TranslatedValue) - ]); - - PropTypes.string = validStringType; -} catch (err) { - // no-op, handle optional dependency lack -} diff --git a/packages/scandipwa/src/component/Product/Product.component.tsx b/packages/scandipwa/src/component/Product/Product.component.tsx index 7ccff8382b..f88dfbf983 100644 --- a/packages/scandipwa/src/component/Product/Product.component.tsx +++ b/packages/scandipwa/src/component/Product/Product.component.tsx @@ -157,7 +157,7 @@ export class Product

ex renderConfigurableOptions(): ReactElement { const { - // setActiveProduct, + setActiveProduct, parameters, product: { type_id: type, variants = [] }, inStock, @@ -182,7 +182,7 @@ export class Product

ex mix={ { block: this.className, elem: 'Attributes' } } parameters={ parameters } variants={ variants } - // updateConfigurableVariant={ setActiveProduct } + updateConfigurableVariant={ setActiveProduct } configurable_options={ this.getConfigurableAttributes() } isContentExpanded inStock={ inStock } diff --git a/packages/scandipwa/src/component/Product/Product.container.tsx b/packages/scandipwa/src/component/Product/Product.container.tsx index 7bfee30f54..f2df55340b 100644 --- a/packages/scandipwa/src/component/Product/Product.container.tsx +++ b/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 { + containerProps(): Pick { 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); diff --git a/packages/scandipwa/src/component/Product/Product.type.ts b/packages/scandipwa/src/component/Product/Product.type.ts index 29d6a76236..253c70ff69 100644 --- a/packages/scandipwa/src/component/Product/Product.type.ts +++ b/packages/scandipwa/src/component/Product/Product.type.ts @@ -56,7 +56,7 @@ export interface ProductContainerState { activeProduct: IndexedProduct | null; } -export interface ProductComponentContainerFunctions { +export interface ProductContainerFunctions { setQuantity: (quantity: ProductQuantity) => void; addToCart: (options?: AddProductToCartOptions) => Promise; updateSelectedValues: (data?: Partial) => void; @@ -64,13 +64,13 @@ export interface ProductComponentContainerFunctions { 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; } -export type ProductComponentContainerPropKeys = +export type ProductContainerPropKeys = | 'isWishlistEnabled' | 'unselectedOptions' | 'quantity' @@ -127,3 +127,5 @@ export interface ProductPrice { minimum_price: Partial; maximum_price: Partial; } + +export type ConfigurableProductSelectedVariantValue = string | number | boolean; diff --git a/packages/scandipwa/src/component/ProductActions/ProductActions.container.tsx b/packages/scandipwa/src/component/ProductActions/ProductActions.container.tsx index e8b5a95bd8..20074a354b 100644 --- a/packages/scandipwa/src/component/ProductActions/ProductActions.container.tsx +++ b/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 = ProductContainer.defaultProps; - containerFunctions: ProductActionsComponentContainerFunctions = { + containerFunctions: ProductActionsContainerFunctions = { ...this.containerFunctions, showOnlyIfLoaded: this.showOnlyIfLoaded.bind(this), }; - containerProps(): Pick { + containerProps(): Pick { const { areDetailsLoaded, areReviewsEnabled, diff --git a/packages/scandipwa/src/component/ProductActions/ProductActions.type.ts b/packages/scandipwa/src/component/ProductActions/ProductActions.type.ts index a07bf1b5b0..ccf07bf8e5 100644 --- a/packages/scandipwa/src/component/ProductActions/ProductActions.type.ts +++ b/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' diff --git a/packages/scandipwa/src/component/ProductAttributeValue/ProductAttributeValue.component.tsx b/packages/scandipwa/src/component/ProductAttributeValue/ProductAttributeValue.component.tsx index f157ac6027..ff327db411 100644 --- a/packages/scandipwa/src/component/ProductAttributeValue/ProductAttributeValue.component.tsx +++ b/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 { + containerProps(): Pick { const { children, mix, diff --git a/packages/scandipwa/src/component/ProductCard/ProductCard.type.ts b/packages/scandipwa/src/component/ProductCard/ProductCard.type.ts index b5537bfd5b..25e428ea1a 100644 --- a/packages/scandipwa/src/component/ProductCard/ProductCard.type.ts +++ b/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' diff --git a/packages/scandipwa/src/component/ProductConfigurableAttributes/ProductConfigurableAttributes.type.ts b/packages/scandipwa/src/component/ProductConfigurableAttributes/ProductConfigurableAttributes.type.ts index 5d0789679a..78f5f64e59 100644 --- a/packages/scandipwa/src/component/ProductConfigurableAttributes/ProductConfigurableAttributes.type.ts +++ b/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; - 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; showProductAttributeAsLink: boolean; - updateConfigurableVariant?: (requestVar: string, value: string | number | boolean) => void; + updateConfigurableVariant?: (requestVar: string, value: ConfigurableProductSelectedVariantValue) => void; inStock: boolean; isContentExpanded: boolean; addToCartTriggeredWithError: boolean; diff --git a/packages/scandipwa/src/store/Cart/Cart.dispatcher.ts b/packages/scandipwa/src/store/Cart/Cart.dispatcher.ts index 98f0419a41..00a5c2557a 100644 --- a/packages/scandipwa/src/store/Cart/Cart.dispatcher.ts +++ b/packages/scandipwa/src/store/Cart/Cart.dispatcher.ts @@ -67,7 +67,7 @@ export class CartDispatcher { } = {}, method_code = '', } = {}, - }] = [], + } = {}] = [], } = {}, } = await fetchQuery( CartQuery.getCartQuery( diff --git a/packages/scandipwa/src/util/Product/Product.ts b/packages/scandipwa/src/util/Product/Product.ts index 6f5c14346e..9de50a73b7 100644 --- a/packages/scandipwa/src/util/Product/Product.ts +++ b/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,7 +430,7 @@ export const sortBySortOrder = (options: T[], sortKey?: keyof T): T[] => opti export const getIsConfigurableParameterSelected = ( parameters: Record, key: string, - value: string, + value: ConfigurableProductSelectedVariantValue, ): boolean => Object.hasOwnProperty.call(parameters, key) && parameters[key] === value; /** @namespace Util/Product/getNewParameters */ @@ -437,7 +438,7 @@ export const getIsConfigurableParameterSelected = ( export const getNewParameters = ( parameters: Record, key: string, - value = '', + value: ConfigurableProductSelectedVariantValue = '', ): Record => { // If value is already selected, than we remove the key to achieve deselection if (getIsConfigurableParameterSelected(parameters, key, value)) {