From 5e3e19746faedd2ab79b1bc43cafd99e1c9d2d8f Mon Sep 17 00:00:00 2001 From: Daniel Dumitru Date: Thu, 11 Jul 2024 11:40:07 +0300 Subject: [PATCH] Added Prop `hideUnavailableVariations` that enables hiding unavailable variations from DOM --- CHANGELOG.md | 4 ++ docs/SKUSelector.md | 1 + react/components/SKUSelector/Wrapper.tsx | 2 + .../SKUSelector/components/SKUSelector.tsx | 6 +++ .../SKUSelector/components/Variation.tsx | 13 +++++- react/components/SKUSelector/index.tsx | 3 ++ react/components/SKUSelector/styles.css | 4 +- react/package.json | 15 +++--- react/yarn.lock | 46 ++++++++++--------- 9 files changed, 64 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b4ebd96f2..a459d0fd4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Added + +- Prop `hideUnavailableVariations` that enables hiding unavailable variations from DOM + ## [3.173.1] - 2024-07-09 ### Fixed diff --git a/docs/SKUSelector.md b/docs/SKUSelector.md index ff58a6cb5..2f8040181 100644 --- a/docs/SKUSelector.md +++ b/docs/SKUSelector.md @@ -64,6 +64,7 @@ The `sku-selector` block is mainly used in Product Details Pages (PDPs) to displ | `variationsSpacing` | `number` | Defines the `margin-bottom` size to be applied in the rendered product variations. Possible values range from `0` to `11` (the prop value is not in `px`; every value represents a tachyon class). | `7` | | `visibility` | `enum` | Defines the scenarios in which the SKU selector should be displayed. Possible values are: `always` (it will always be displayed, even if the product has only one SKU option) or `more-than-one` (the SKU selector is only displayed when the product has more than one SKU option). | `always` | | `visibleVariations` | `array` | Specifies which product variations should be displayed on the product details page. Please note that no variations will be displayed if you declare a name that does not represent a real product variation or an empty array. There is more information regarding this prop structure below this table. | `undefined` | +| `hideUnavailableVariations`|`boolean`| When this prop is set to `true` all unavailable variations will not be rendered.|`false`| - **`visibleVariations` props** diff --git a/react/components/SKUSelector/Wrapper.tsx b/react/components/SKUSelector/Wrapper.tsx index 6ca6e15be..b8e17f199 100644 --- a/react/components/SKUSelector/Wrapper.tsx +++ b/react/components/SKUSelector/Wrapper.tsx @@ -170,6 +170,7 @@ interface Props { sliderArrowSize?: number sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue sortVariationsByLabel?: boolean + hideUnavailableVariations?: boolean /** Used to override default CSS handles */ classes?: CssHandlesTypes.CustomClasses } @@ -262,6 +263,7 @@ function SKUSelectorWrapper(props: Props) { sliderArrowSize={props.sliderArrowSize} sliderDisplayThreshold={props.sliderDisplayThreshold} sortVariationsByLabel={props.sortVariationsByLabel} + hideUnavailableVariations={props.hideUnavailableVariations} /> ) diff --git a/react/components/SKUSelector/components/SKUSelector.tsx b/react/components/SKUSelector/components/SKUSelector.tsx index daeab3ea9..9f4f1fdcf 100644 --- a/react/components/SKUSelector/components/SKUSelector.tsx +++ b/react/components/SKUSelector/components/SKUSelector.tsx @@ -68,6 +68,7 @@ interface Props { sliderArrowSize: number sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue sortVariationsByLabel?: boolean + hideUnavailableVariations?: boolean } function isSkuAvailable(item?: SelectorProductItem) { @@ -248,13 +249,16 @@ const variationNameToDisplayVariation = const allNumbers = options.every( (option: any) => !Number.isNaN(option.label) ) + options.sort((a: any, b: any) => { if (allNumbers) { return a.label - b.label } + return a.label < b.label ? -1 : a.label > b.label ? 1 : 0 }) } + return { name, originalName, options } } @@ -321,6 +325,7 @@ function SKUSelector({ sliderArrowSize, sliderItemsPerPage, sortVariationsByLabel = false, + hideUnavailableVariations, }: Props) { const { handles } = useSKUSelectorCssHandles() const variationsSpacing = getValidMarginBottom(marginBottomProp) @@ -415,6 +420,7 @@ function SKUSelector({ sliderDisplayThreshold={sliderDisplayThreshold} sliderArrowSize={sliderArrowSize} sliderItemsPerPage={sliderItemsPerPage} + hideUnavailableVariations={hideUnavailableVariations} /> ) })} diff --git a/react/components/SKUSelector/components/Variation.tsx b/react/components/SKUSelector/components/Variation.tsx index 673b02efe..4e5541750 100644 --- a/react/components/SKUSelector/components/Variation.tsx +++ b/react/components/SKUSelector/components/Variation.tsx @@ -33,6 +33,7 @@ interface Props { sliderDisplayThreshold: number sliderArrowSize: number sliderItemsPerPage: ResponsiveValuesTypes.ResponsiveValue + hideUnavailableVariations?: boolean } const ITEMS_VISIBLE_THRESHOLD = 2 @@ -60,8 +61,13 @@ const Variation: FC = ({ sliderArrowSize, sliderDisplayThreshold, sliderItemsPerPage, + hideUnavailableVariations, }) => { - const { originalName, name, options } = variation + const { originalName, name, options: initialOptions } = variation + + const options = hideUnavailableVariations + ? initialOptions.filter(option => option.available) + : [...initialOptions] const visibleItemsWhenCollapsed = maxItems - ITEMS_VISIBLE_THRESHOLD @@ -88,6 +94,11 @@ const Variation: FC = ({ ) const showAllAction = useCallback(() => setShowAll(true), [setShowAll]) + + if (options.length === 0) { + return null + } + const containerClasses = classnames( 'flex flex-column', containerClassesProp, diff --git a/react/components/SKUSelector/index.tsx b/react/components/SKUSelector/index.tsx index 3e562cdde..9728d9f01 100644 --- a/react/components/SKUSelector/index.tsx +++ b/react/components/SKUSelector/index.tsx @@ -187,6 +187,7 @@ interface Props { sliderArrowSize?: number sliderItemsPerPage?: ResponsiveValuesTypes.ResponsiveValue sortVariationsByLabel?: boolean + hideUnavailableVariations?: boolean } const getNewSelectedVariations = ( @@ -254,6 +255,7 @@ const SKUSelectorContainer: FC = ({ tablet: 2, phone: 1, }, + hideUnavailableVariations = false, }) => { const productContext = useProduct() const selectedItem = productContext?.selectedItem @@ -425,6 +427,7 @@ const SKUSelectorContainer: FC = ({ sliderArrowSize={sliderArrowSize} sliderItemsPerPage={sliderItemsPerPage} sortVariationsByLabel={sortVariationsByLabel} + hideUnavailableVariations={hideUnavailableVariations} /> ) } diff --git a/react/components/SKUSelector/styles.css b/react/components/SKUSelector/styles.css index c796393ea..92c89159d 100644 --- a/react/components/SKUSelector/styles.css +++ b/react/components/SKUSelector/styles.css @@ -16,11 +16,13 @@ .skuSelectorTextContainer { } -.skuSelectorSelectContainer {} +.skuSelectorSelectContainer { +} .skuSelectorItem { font-size: 90%; height: 36px; + display: block !important; } .skuSelectorItemImage { diff --git a/react/package.json b/react/package.json index 02ac83bc7..aeb1627bc 100644 --- a/react/package.json +++ b/react/package.json @@ -47,8 +47,8 @@ "apollo-cache-inmemory": "^1.4.3", "babel-eslint": "^10.1.0", "typescript": "3.9.7", - "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form", - "vtex.apps-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql", + "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.24.3/public/@types/vtex.address-form", + "vtex.apps-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.16.0/public/@types/vtex.apps-graphql", "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.49.0/public/@types/vtex.checkout-resources", "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.1/public/@types/vtex.css-handles", "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.6/public/@types/vtex.device-detector", @@ -64,13 +64,14 @@ "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.2/public/@types/vtex.render-runtime", "vtex.responsive-values": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-values@0.4.2/public/@types/vtex.responsive-values", "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.16.0/public/@types/vtex.rich-text", - "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql", - "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.3/public/@types/vtex.shipping-estimate-translator", + "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.60.1/public/@types/vtex.search-graphql", + "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator", "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout", - "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql", + "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.173.0/public/@types/vtex.store-components", + "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.171.0/public/@types/vtex.store-graphql", "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons", - "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image", - "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources", + "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.21.0/public/@types/vtex.store-image", + "vtex.store-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.96.0/public/@types/vtex.store-resources", "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide" }, "resolutions": { diff --git a/react/yarn.lock b/react/yarn.lock index 7d596fee2..a46f39238 100644 --- a/react/yarn.lock +++ b/react/yarn.lock @@ -5292,13 +5292,13 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" -"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form": - version "4.22.8" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.22.8/public/@types/vtex.address-form#3df049602b25e54cffe543a9f61f9b01043d9413" +"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.24.3/public/@types/vtex.address-form": + version "4.24.3" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.24.3/public/@types/vtex.address-form#001990f5774e8b2175d14536c01df3981356e2a2" -"vtex.apps-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql": - version "3.15.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.15.0/public/@types/vtex.apps-graphql#eae9419b63948f1162541e71f90292a3bae07d6a" +"vtex.apps-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.16.0/public/@types/vtex.apps-graphql": + version "3.16.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.16.0/public/@types/vtex.apps-graphql#b1129c749b82d5eb1afe5e2c5b37cb6dc177ed75" "vtex.checkout-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.49.0/public/@types/vtex.checkout-resources": version "0.49.0" @@ -5360,33 +5360,37 @@ validate-npm-package-license@^3.0.1: version "0.16.0" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.16.0/public/@types/vtex.rich-text#0cdcaccffb37ae0d025894ba7055f69bc3c9aa30" -"vtex.search-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql": - version "0.58.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.58.0/public/@types/vtex.search-graphql#e0227a47b862277d2b9b4744f114e241afa158e4" +"vtex.search-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.60.1/public/@types/vtex.search-graphql": + version "0.60.1" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.60.1/public/@types/vtex.search-graphql#4e59e3577351d967e4b5c9594d4970783ee543bb" -"vtex.shipping-estimate-translator@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.3/public/@types/vtex.shipping-estimate-translator": - version "2.2.3" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.3/public/@types/vtex.shipping-estimate-translator#56c520e45e61572c253542572c153eb1ad0f993f" +"vtex.shipping-estimate-translator@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator": + version "2.3.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.3.0/public/@types/vtex.shipping-estimate-translator#47cd5baf775e33d3c623c56bbe223acca703faf7" "vtex.slider-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout": version "0.24.4" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.4/public/@types/vtex.slider-layout#81731b60025929589adeea1ffd3e12eb1d9480e1" -"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql": - version "2.170.1" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.170.1/public/@types/vtex.store-graphql#7e087ac00c2abf0a2e06ef5551110d0de5b7fe58" +"vtex.store-components@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.173.0/public/@types/vtex.store-components": + version "3.173.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.173.0/public/@types/vtex.store-components#c57196f89906ac33d5fadde06685c9fb365d9891" + +"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.171.0/public/@types/vtex.store-graphql": + version "2.171.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.171.0/public/@types/vtex.store-graphql#97d4e6caab10537776f25956ca92e73828d7f1ba" "vtex.store-icons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons": version "0.18.0" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons#0ee94d549aa283ce3a13ab987c13eac4fdfd1bba" -"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image": - version "0.20.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.20.0/public/@types/vtex.store-image#c0b627efa82e3e224b1ed48416836213fb204952" +"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.21.0/public/@types/vtex.store-image": + version "0.21.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.21.0/public/@types/vtex.store-image#5bf4e2d3857e92ac91a8de166b402f04e249467c" -"vtex.store-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources": - version "0.93.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.93.0/public/@types/vtex.store-resources#f7d82498aa2871d25df89c54f8fff2f5a7ac22f7" +"vtex.store-resources@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.96.0/public/@types/vtex.store-resources": + version "0.96.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-resources@0.96.0/public/@types/vtex.store-resources#6c281dd03ba28beeed38f4538c2068753d824f0d" "vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide": version "9.146.9"